CocosCreator微信小游戏入门实战《小猫钓鱼》（四）：触摸输入

转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83063423

 

之前第一节的时候，我们让鱼钩简单的动了起来，并且让摄像头跟随鱼钩向下移动，可是我们并不能控制鱼钩的左右位置，这让我们的根本无法享受操作的乐趣。

所以这一节，我们来实现让玩家通过触摸输入控制鱼钩的运动。

 

首先我们先对第一节做好的鱼钩进行一下改造

 

Hook为一个Widget节点，挂载脚本为第一节我们制作的Hook，size修改为640*960；

 

Controller为我们的鱼钩节点Sprite类型，挂载一个新的脚本Controller.js；

 

Camera同第一节不变。

 

OK，接下来打开Controller.js脚本，我们来编写代码。

关于触摸输入，可以参考官方范例：

https://github.com/cocos-creator/example-cases/blob/master/assets/cases/03_gameplay/01_player_control/OnTouchCtrl/OnTouchCtrl.js

 

 

Properties中添加属性mCanvas，引用Canvas节点，因为我们需要使用Canvas节点来接受触摸事件。

        mCanvas : {

            default : null,

            type : cc.Node

        }

为什么不用鱼钩来直接接受触摸事件？理论上也是可以的，不过鱼钩这些小，放在手机中，那就需要让玩家精确的触摸到鱼钩才能进行操作，这个操作体验实在是太差了。在编码过程中，很多时候你得试着去站在GameDesigner的角度去考虑问题，否则就真的是一个码农了。

 

 

接下来是开启注册监听触摸事件，并定义触摸事件触发后的回掉函数：

    EnableTouch () {

        if (this.mEnableTouch)

            return;

        this.mCanvas.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);

        this.mCanvas.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);

        this.mCanvas.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);

        this.mCanvas.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);

        this.mEnableTouch = true;

        console.log("EnableTouch");

    },

关闭方法：

    DisableTouch () {

        if (!this.mEnableTouch)

            return;

        this.mCanvas.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);

        this.mCanvas.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);

        this.mCanvas.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);

        this.mCanvas.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);

        this.mEnableTouch = false;

        console.log("DisableTouch");

    },

 

同时实现onTouchStart,onTouchMove,onTouchEnd方法：

    onTouchStart (event) {



    },

    onTouchMove (event) {

        var touches = event.getTouches();

        var touchLoc = touches[0].getLocation();

        console.log("touchLoc :" , touchLoc);

    },

    onTouchEnd (event) {



    },

 

我们在触摸移动事件中可以打印触摸点进行测试，别忘了调试时，在start方法中调用刚刚我们写的EnableTouch方法开启触摸。

    start () {

        this.EnableTouch();

    },

可以看到输出：

 

好的，代码没问题，最麻烦的输入事件已经搞定，剩下的就是完善一下鱼钩移动的业务逻辑了。

 

参考官方范例，我们可以很容易的把业务逻辑进行完善：

    properties: {

        mSpeed : 350,

        mMoveToPos : {

            default : cc.v2(0,0),

            visible : false

        },

        mIsMoving : {

            default : false,

            visible : false

        },

        mEnableTouch : {

            default : false,

            visible : false

        },

        mCanvas : {

            default : null,

            type : cc.Node

        }

    },





    onTouchStart (event) {

        var touches = event.getTouches();

        var touchLoc = touches[0].getLocation();//获得当前触摸点的坐标

        this.mIsMoving = true;//进入移动状态

        this.mMoveToPos = this.node.parent.convertToNodeSpaceAR(touchLoc);//将绝对坐标转换为父节点的相对坐标

    },

    onTouchMove (event) {

        var touches = event.getTouches();

        var touchLoc = touches[0].getLocation();//获得当前触摸点的坐标

        this.mMoveToPos = this.node.parent.convertToNodeSpaceAR(touchLoc);

    },

    onTouchEnd (event) {

        this.mIsMoving = false;//退出移动状态

    },



    update (dt) {

        if (!this.mIsMoving)

            return;

        var oldPos = this.node.position;

        var direction = this.mMoveToPos.sub(oldPos).normalize();//获得移动方向

        direction.y = 0;//锁定Y轴的移动

        var newPos = oldPos.add(direction.mul(this.mSpeed * dt));//根据移动速度计算鱼钩新的坐标

        this.node.setPosition(newPos);

    },

 

OK，敲完代码运行一下，把速度值调整到你觉得合适的一个值，我们的触摸操作也就完成了！