Cocos Creator 3.0 基础——事件系统

Posted 2022-07-15 许英俊

触摸事件

触摸事件指的是用户手指触摸时候的事件

• TOUCH_START：当手指触点落在目标节点区域内时。
• TOUCH_MOVE：当手指在屏幕上移动时。
• TOUCH_END：当手指在目标节点区域内离开屏幕时。
• TOUCH_CANCEL：当手指在目标节点区域外离开屏幕时。

//绑定事件
this.node.on(SystemEvent.EventType.TOUCH_START, this._touchStart, this);
this.node.on(SystemEvent.EventType.TOUCH_END, this._touchEnd, this);
this.node.on(SystemEvent.EventType.TOUCH_MOVE, this._touchMove, this);
this.node.on(SystemEvent.EventType.TOUCH_CANCEL, this._touchCancel, this);
//解除事件
this.node.off(SystemEvent.EventType.TOUCH_START, this._touchStart, this);
this.node.off(SystemEvent.EventType.TOUCH_END, this._touchEnd, this);
this.node.off(SystemEvent.EventType.TOUCH_MOVE, this._touchMove, this);
this.node.off(SystemEvent.EventType.TOUCH_CANCEL, this._touchCancel, this);
//事件回调
_touchMove(touch: Touch, event: EventTouch) 
_touchStart(touch: Touch, event: EventTouch) 
_touchEnd(touch: Touch, event: EventTouch) 
_touchCancel(touch: Touch, event: EventTouch) 

键盘事件

键盘事件指的是用户在键盘上输入的事件，他可以同时按下多个键盘，并要完成多个事件的响应

• SystemEventType.KEY_DOWN：键盘按下
• SystemEventType.KEY_UP：键盘释放

//绑定事件
systemEvent.on(SystemEventType.KEY_DOWN, this.onKeyDown, this);
systemEvent.on(SystemEventType.KEY_UP, this.onKeyUp, this);
//解除事件
systemEvent.off(SystemEventType.KEY_DOWN, this.onKeyDown, this);
systemEvent.off(SystemEventType.KEY_UP, this.onKeyUp, this);
//事件回调
onKeyDown(event: EventKeyboard) 
onKeyUp(event: EventKeyboard) 

监听键盘wasd，控制人物往前后左右运动

export class CubeCtrl extends Component 

    body: RigidBody = null

    keyMask = 0

    speed = 50

    start() 
        this.body = this.node.getComponent(RigidBody)
        systemEvent.on(SystemEventType.KEY_DOWN, this.onKeyDown, this);
        systemEvent.on(SystemEventType.KEY_UP, this.onKeyUp, this);
    

    onKeyDown(event: EventKeyboard) 
        switch (event.keyCode) 
            case macro.KEY.a:
                this.keyMask |= (1 << 0)
                break;
            case macro.KEY.s:
                this.keyMask |= (1 << 1)
                break;
            case macro.KEY.w:
                this.keyMask |= (1 << 2)
                break;
            case macro.KEY.d:
                this.keyMask |= (1 << 3)
                break;
            case macro.KEY.space:
                this.keyMask |= (1 << 4)
                break;
        
    

    onKeyUp(event: EventKeyboard) 
        switch (event.keyCode) 
            case macro.KEY.a:
                this.keyMask &= ~(1 << 0)
                break;
            case macro.KEY.s:
                this.keyMask &= ~(1 << 1)
                break;
            case macro.KEY.w:
                this.keyMask &= ~(1 << 2)
                break;
            case macro.KEY.d:
                this.keyMask &= ~(1 << 3)
                break;
            case macro.KEY.space:
                this.keyMask &= ~(1 << 4)
                break;
        
    

    update(deltaTime: number) 
        if (this.keyMask & (1 << 0)) 
            var pos = this.node.getPosition()
            this.body.applyForce(v3(this.speed, 0, 0))
        
        if (this.keyMask & (1 << 3)) 
            var pos = this.node.getPosition()
            this.body.applyForce(v3(-this.speed, 0, 0))
        
        if (this.keyMask & (1 << 1)) 
            var pos = this.node.getPosition()
            this.body.applyForce(v3(0, 0, -this.speed))
        
        if (this.keyMask & (1 << 2)) 
            var pos = this.node.getPosition()
            this.body.applyForce(v3(0, 0, this.speed))
        
        if (this.keyMask & (1 << 4)) 
            var pos = this.node.getPosition()
            this.body.applyForce(v3(0, this.speed, 0))
        
    

触发事件

触发事件属于两个物体触碰后触发，其事件触发的前提

• 需要配置物理系统分组
• 需要有刚体组件才可触发
• 需要刚体组件勾选IsTrigger选项才可触发

触发事件类型

• onTriggerEnter：触发开始
• onTriggerStay：触发保持
• onTriggerExit：触发结束

//绑定事件
onEnable() 
    const collision = this.getComponent(Collider)
    collision.on('onTriggerEnter', this._onTriggerEnter, this);
    collision.on('onTriggerStay', this._onTriggerStay, this);
    collision.on('onTriggerExit', this._onTriggerExit, this);

//解除事件
onDisable() 
    const collision = this.getComponent(Collider)
    collision.off('onTriggerEnter', this._onTriggerEnter, this);
    collision.off('onTriggerStay', this._onTriggerStay, this);
    collision.off('onTriggerExit', this._onTriggerExit, this);

//触发事件掩码
public static CollisionT = 
   SELF_PLANE: 1 << 1,
   ENEMY_PLANE: 1 << 2,
   SELF_BULLET: 1 << 3,
   ENEMY_BULLET: 1 << 4

//触发事件回调，通过掩码判断是哪个物体
_onTriggerEnter(event: ITriggerEvent) 
   const group = event.otherCollider.getGroup()
   const name = event.selfCollider.node.name
   if (group === Constants.CollisionT.ENEMY_BULLET || group === Constants.CollisionT.ENEMY_PLANE) 
       
   

碰撞事件

碰撞事件属于两个物体碰撞后触发，其事件触发的前提

• 需要配置物理系统分组
• 需要有刚体组件才可触发
• 静态类型的刚体之间不会产生碰撞数据

触发事件类型

• onCollisionEnter：碰撞开始
• onCollisionStay：碰撞保持
• onCollisionExit：碰撞结束

//绑定事件
onEnable() 
    const collision = this.getComponent(Collider)
    collision.on('onCollisionEnter', this._onCollisionEnter, this);
    collision.on('onCollisionStay', this._onCollisionStay, this);
    collision.on('onCollisionExit', this._onCollisionExit, this);

//解除事件
onDisable() 
    const collision = this.getComponent(Collider)
    collision.off('onCollisionEnter', this._onCollisionEnter, this);
    collision.off('onCollisionStay', this._onCollisionStay, this);
    collision.off('onCollisionExit', this._onCollisionExit, this);

//触发事件掩码
public static CollisionT = 
   SELF_PLANE: 1 << 1,
   ENEMY_PLANE: 1 << 2,
   SELF_BULLET: 1 << 3,
   ENEMY_BULLET: 1 << 4

//触发事件回调，通过掩码判断是哪个物体
_onCollisionEnter(event: ICollisionEvent) 
   const group = event.otherCollider.getGroup()
   const name = event.selfCollider.node.name
   if (group === Constants.CollisionT.ENEMY_BULLET || group === Constants.CollisionT.ENEMY_PLANE)