[add] script

[add] HoldButton

assets/Script/Engine/Component/Button/HoldButton.ts

@@ -0,0 +1,127 @@
+
+const { ccclass, requireComponent, menu, property } = cc._decorator;
+
+@ccclass
+@menu("Plug-in/Button/HoldButton")
+@requireComponent(cc.Button)
+export default class HoldButton extends cc.Component {
+    //#region public
+
+    @property()
+    public MaxTime: number = 2;
+
+    @property({ type: cc.Node })
+    public HoldLine: cc.Node = null;
+
+    @property({ type: cc.Sprite })
+    public ProgressBG: cc.Sprite = null;
+
+    @property({ type: cc.Sprite })
+    public ProgressLine: cc.Sprite = null;
+
+    @property({ type: [cc.Component.EventHandler] })
+    public OnInvoke: cc.Component.EventHandler[] = [];
+
+    //#endregion
+
+    //#region private
+
+    private _m_isMouseDown: boolean = false;
+
+    private _m_pressDeltaTime: number = 0;
+
+    private _m_noLineUI: boolean = true;
+
+    //#endregion
+
+    //#region Lifecycle
+
+    protected start(): void {
+        if (this.HoldLine != null) {
+            this.HoldLine.active = false;
+        }
+    }
+
+    protected update(dt: number): void {
+        if (this._m_isMouseDown) {
+            this._checkHoldAutoStart(dt);
+        } else {
+            if (!this._m_noLineUI) {
+                this.HoldLine.active = false;
+            }
+        }
+    }
+
+    protected onEnable(): void {
+        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
+        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
+        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
+    }
+
+    protected onDisable(): void {
+        this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
+        this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
+        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
+    }
+
+    //#endregion
+
+    //#region Custom
+
+    private _checkHoldAutoStart(deltaTime: number): void {
+        this._m_pressDeltaTime += deltaTime;
+
+        if (!this._m_noLineUI) {
+            // 蓄能條顯示特效
+            this.ProgressLine.fillRange = this._m_pressDeltaTime;
+        }
+
+        if (this._m_pressDeltaTime > this.MaxTime) {
+            this._m_isMouseDown = false;
+            if (!this._m_noLineUI) {
+                this.HoldLine.active = false;
+            }
+            this._m_pressDeltaTime = 0;
+            if (this.OnInvoke != null) {
+                this.OnInvoke.forEach((eventHandler: cc.Component.EventHandler) => {
+                    eventHandler.emit([this.node.getComponent(cc.Button)]);
+                });
+            }
+        }
+    }
+
+    //#endregion
+
+    //#region EventT
+
+    private _onTouchStart(event: cc.Event.EventTouch): void {
+        if (this._m_isMouseDown) {
+            return;
+        }
+        this._m_isMouseDown = true;
+        this._m_noLineUI = this.HoldLine == null || this.ProgressBG == null || this.ProgressLine == null;
+        if (!this._m_noLineUI) {
+            this.HoldLine.active = true;
+        }
+    }
+
+    private _onTouchEnd(event: cc.Event.EventTouch): void {
+        this._m_isMouseDown = false;
+        this._m_pressDeltaTime = 0;
+        if (!this._m_noLineUI) {
+            this.HoldLine.active = false;
+        }
+        this._checkHoldAutoStart(0);
+    }
+
+    private _onTouchCancel(event: cc.Event.EventTouch): void {
+        this._m_isMouseDown = false;
+        this._m_pressDeltaTime = 0;
+        if (!this._m_noLineUI) {
+            this.HoldLine.active = false;
+        }
+        this._checkHoldAutoStart(0);
+    }
+
+    //#endregion
+}

assets/Script/Engine/Component/Button/HoldButton.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "0d1d51df-9f21-4b00-ad91-612a56dfcedd",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}