laya 摇杆的实现

在竖版rpg游戏中常常需要摇杆来控制角色移动。我们这里给出在laya引擎中一个摇杆的简单实现。用户只需要在UI界面简单的设置一个摇杆的触摸区、摇杆bg和摇杆柄即可。如下图所示

1.  
   import Script = Laya.Script;
2.  
   import Image = Laya.Image;
3.  
   import Event = Laya.Event;
4.  
   import Sprite = Laya.Sprite;
5.  
   import Point = Laya.Point;
6.  
    
7.  
   /** 摇杆半径 */
8.  
   export const JoystickRadius: number = 64;
9.  
    
10.  
    export default class Joystick extends Script {
11.  
    /** 可触摸区域节点 */
12.  
    private _touchAreaSpr: Sprite;
13.  
    /** 摇杆背景 */
14.  
    private _joystickBg: Image;
15.  
    /** 摇杆的柄 */
16.  
    private _joystickHandler: Image;
17.  
     
18.  
    /** 是否按下摇杆的柄 */
19.  
    private _isPressHandler: boolean = false;
20.  
     
21.  
    /** 摇杆的中心点 */
22.  
    private _centerPoint: Point = new Point();
23.  
    /** 摇杆柄的局部位置 */
24.  
    private _localPoint: Point = new Point();
25.  
    /** 摇杆柄的局部位置相对于stage在水平方向上的增量 */
26.  
    private _deltaX: number = 0;
27.  
    private _deltaY: number = 0;
28.  
     
29.  
    // /** 摇杆角度 0 - 360*/
30.  
    // public static JoyAngle: number = -1;
31.  
    /** 摇杆方向, 包含尺度(0 - 1) */
32.  
    public static JoyDir: Point = new Point();
33.  
     
34.  
    onAwake(): void {
35.  
    this._touchAreaSpr = this.owner.parent as Sprite;
36.  
    this._joystickBg = this.owner as Image;
37.  
    this._joystickHandler = this.owner.getChildAt(0) as Image;
38.  
    }
39.  
     
40.  
    onEnable(): void {
41.  
    // this._joystickHandler.on(Event.MOUSE_DOWN, this, this.onMouseDownHandler);
42.  
     
43.  
    this._touchAreaSpr.on(Event.MOUSE_DOWN, this, this.onBgMouseDown);
44.  
    this._touchAreaSpr.on(Event.MOUSE_MOVE, this, this.onBgMouseMove);
45.  
    this._touchAreaSpr.on(Event.MOUSE_UP, this, this.onBgMouseUp);
46.  
    this._touchAreaSpr.on(Event.MOUSE_OUT, this, this.onBgMouseUp);
47.  
     
48.  
    this._centerPoint.setTo(this._joystickBg.pivotX, this._joystickBg.pivotY);
49.  
    }
50.  
     
51.  
    onDisable(): void {
52.  
    this._joystickHandler.offAll();
53.  
    this._touchAreaSpr.offAll();
54.  
    }
55.  
     
56.  
    // /** 鼠标按下摇杆柄部 */
57.  
    // private onMouseDownHandler() {
58.  
    // this._isPressHandler = true;
59.  
    // }
60.  
     
61.  
    private onBgMouseDown(e: Event): void {
62.  
    if(this._isPressHandler) return;
63.  
     
64.  
    this._isPressHandler = true;
65.  
    this._joystickBg.pos(e.stageX, e.stageY - this._touchAreaSpr.y); // 让摇杆追随玩家手指
66.  
    this._deltaX = this._touchAreaSpr.x this._joystickBg.x - this._joystickBg.pivotX;
67.  
    this._deltaY = this._touchAreaSpr.y this._joystickBg.y - this._joystickBg.pivotY;
68.  
    this._joystickBg.set_visible(true);
69.  
    }
70.  
     
71.  
    private onBgMouseMove(e: Event): void {
72.  
    if (!this._isPressHandler) return;
73.  
     
74.  
    /** 移动摇杆柄 */
75.  
    this._localPoint.x = e.stageX - this._deltaX;
76.  
    this._localPoint.y = e.stageY - this._deltaY;
77.  
     
78.  
    if (this.distance(this._localPoint, this._centerPoint) > JoystickRadius) { // 超过摇杆半径时处理
79.  
    this._localPoint.setTo(this._localPoint.x - this._centerPoint.x, this._localPoint.y - this._centerPoint.y);
80.  
    this._localPoint.normalize();
81.  
    Joystick.JoyDir.copy(this._localPoint);
82.  
    this._localPoint.setTo(this._centerPoint.x this._localPoint.x * JoystickRadius, this._centerPoint.y this._localPoint.y * JoystickRadius);
83.  
    } else {
84.  
    Joystick.JoyDir.setTo((this._localPoint.x - this._centerPoint.x) / JoystickRadius, (this._localPoint.y - this._centerPoint.y) / JoystickRadius);
85.  
    }
86.  
     
87.  
    this._joystickHandler.pos(this._localPoint.x, this._localPoint.y);
88.  
    }
89.  
     
90.  
    private onBgMouseUp(e: Event): void {
91.  
    if (!this._isPressHandler) return;
92.  
    this._isPressHandler = false;
93.  
     
94.  
    this._joystickBg.pos(this._touchAreaSpr.width / 2, this._touchAreaSpr.height / 2);
95.  
    this._joystickHandler.pos(this._centerPoint.x, this._centerPoint.y);
96.  
    Joystick.JoyDir.reset();
97.  
    this._joystickBg.set_visible(false);
98.  
    }
99.  
     
100.  
     private distance(p1:Point, p2:Point): number {
101.  
     return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) (p1.y - p2.y) * (p1.y - p2.y));
102.  
     }
103.  
     }

这篇好文章是转载于：学新通技术网