手游摇杆(一)最简单的四方向摇杆

摇杆是所有手游中不可或缺的一部分,是最基本的操作方式,下面是用cococ creator实现的一个简单的摇杆,后面将基于此慢慢优化。

一 场景

新建一个场景,拖入三中图片,如图:

手游摇杆(一)最简单的四方向摇杆_第1张图片

分别表示:

  • spPlayer 代表游戏中的角色,通过摇杆控制其移动;
  • spRoker 摇杆的事件影响区域;
  • spRokerCenter 摇杆的中心点。

二 事件监听

为了能控制摇杆,需要监听摇杆的事件,新建一个脚本CompRoker,挂到Canvas上,然后编辑器其内容如下:

cc.Class({
    extends: cc.Component,

    properties: {
        spPlayer: cc.Sprite,
        spRoker: cc.Sprite,
        spRokerCenter: cc.Sprite
    },

    onLoad: function () {
        this.spRoker.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    },

    onTouchStart: function(event) {
        console.log("start ...");
    },

    onTouchMove: function(event) {
        console.log("move ...");
    },

    onTouchEnd: function(event) {
        console.log("end ...");
    },

    onTouchCancel: function(event) {
        console.log("cancel ...");
    },
});

定义了三个变量,分别表示前面说到的三个控件,从cocos中,将其关联到相应的变量,然后运行,可以看到输出,说明事件监听正确。

三 方向控制

首先,我们做一个最简单的额四方向摇杆,控制角色上下左右移动。

如图,当我们触摸点在spRoker的不同区域,分别表示角色向不同的方向移动。

手游摇杆(一)最简单的四方向摇杆_第2张图片

那么,如何来判断触摸点落在那个区域呢,以spRoker的原点为坐标原点的直角坐标系中,对角线的方程即为:
x = y和x = -y,每个区域分别为:

  • 上:x < y 且 x > -y
  • 下:x > y 且 x < -y
  • 左:x < y 且 x < -y
  • 右:x > y 且 x > -y

基于这个原理,添加一个函数getDirection根据传入点来获取方向,如下:

    onTouchStart: function(event) {
        var touchPoint = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPoint);
        var dir = this.getDirection(pos);
        console.log("start ...", dir);
    },

    onTouchMove: function(event) {
        var touchPoint = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPoint);
        var dir = this.getDirection(pos);
        console.log("move ...", dir);
    },

    getDirection: function(pos) {
        var x = pos.x;
        var y = pos.y;
        if (x <= y && x > -y) {
            return cc.v2(0, 1);// 上
        } else if (x >= y && x < -y) {
            return cc.v2(0, -1);// 下
        } else if (x <= y && x < -y) {
            return cc.v2(-1, 0);// 左
        } else {
            return cc.v2(1, 0);// 右
        }
    },

运行,点击摇杆的不同位置,验证获得的方向是否准确。

此外,我们需要需要不断的更新摇杆中心点的位置。

    onTouchStart: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        var dir = this.getDirection(pos);
        console.log("start ...", dir);
        this.updateRokerCenterPos(pos);
    },

    onTouchMove: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        var dir = this.getDirection(pos);
        console.log("move ...", dir);
        this.updateRokerCenterPos(pos);
    },

    onTouchEnd: function(event) {
        console.log("end ...");
        this.updateRokerCenterPos(cc.v2(0, 0));
    },

    onTouchCancel: function(event) {
         console.log("cancel ...");
        this.updateRokerCenterPos(cc.v2(0, 0));
    },

    updateRokerCenterPos: function(pos) {
        this.spRokerCenter.node.setPosition(pos);
    }

四 控制角色移动

通过上面的几几个步骤,已经得到移动的方向,据此,可以来更新角色的位置,另外为了控制角色移动快慢,在设置一个速度。
最终代码如下:

cc.Class({
    extends: cc.Component,

    properties: {
        spPlayer: cc.Sprite,
        spRoker: cc.Sprite,
        spRokerCenter: cc.Sprite,
        moveSpeed: {
            type: cc.Float,
            default: 1
        }
    },

    onLoad: function () {
        this.spRoker.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.spRoker.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    },

    onTouchStart: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        var dir = this.getDirection(pos);
        this.moveDir = this.getDirection(pos);
        this.updateRokerCenterPos(pos);
    },

    onTouchMove: function(event) {
        var touchPos = event.getLocation();
        var pos = this.spRoker.node.convertToNodeSpaceAR(touchPos);
        this.moveDir = this.getDirection(pos);
        this.updateRokerCenterPos(pos);
    },

    onTouchEnd: function(event) {
        this.updateRokerCenterPos(cc.v2(0, 0));
        this.moveDir = null;
    },

    onTouchCancel: function(event) {
        this.updateRokerCenterPos(cc.v2(0, 0));
        this.moveDir = null;
    },

    getDirection: function(pos) {
        var x = pos.x;
        var y = pos.y;
        if (x <= y && x > -y) {
            return cc.v2(0, 1);// 上
        } else if (x >= y && x < -y) {
            return cc.v2(0, -1);// 下
        } else if (x <= y && x < -y) {
            return cc.v2(-1, 0);// 左
        } else {
            return cc.v2(1, 0);// 右
        }
    },

    updateRokerCenterPos: function(pos) {
        this.spRokerCenter.node.setPosition(pos);
    },

    updatePlayerPos: function(dir) {
        this.spPlayer.node.x += dir.x * this.moveSpeed;
        this.spPlayer.node.y += dir.y * this.moveSpeed;
    },

    update: function(dt) {
        if (this.moveDir) {
            this.updatePlayerPos(this.moveDir);
        }
    },
});

到这里,就可以看到角色在摇杆的控制下动起来了,当然还有很多细节需要优化的地方,后面再加上。

你可能感兴趣的:(游戏开发)