Cocos Creator-示例小游戏

  在前面一篇文章简单了解了Cocos Creator后,官方提供了一个简单小游戏的实例,我们可以尝试着跟着搞一遍,顺带进行一些小修改,这样可以完整的熟悉一下,使用Cocos Creator来开发一款游戏的基本流程。
  从这里下载到实例代码,然后使用里面的start_project文件夹来进行实现,具体的代码逻辑可以在这里看到,有非常详细的讲解。这篇文章主要写明将实例中的监听键盘来操控改为手指在屏幕的两边触摸来操控主角的逻辑。
  需要新建一个脚本Base.js,具体onLoad方法里需要我们找到Player的节点,然后根据手指触摸的位置来改变Player节点中一些属性(accLeftaccRight),如下的实现:

this.playerNode = cc.find('Canvas/Player').getComponent("Player");
        let width = cc.view.getVisibleSize().width;
        console.log('Base总宽度:'+width);
        this.node.on(cc.Node.EventType.TOUCH_START,function(t){
            // 函数体内写事件发生时的事情
            // 当触摸开始是打印以下字样
            console.log("触摸 底部 - 开始");
            let locationX = t.getLocationX();
            console.log('x:'+locationX);

            if (locationX < width/2.0) {
                this.playerNode.accLeft = true;
                console.log('左半边'+this.playerNode.accLeft);
            }
            else
            {
                this.playerNode.accRight = true;
                console.log('右半边'+this.playerNode.accRight);
            }
        },this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE,function(t){
            //函数体内写事件发生时的事情
            //当触摸开始是打印以下字样
            console.log("触摸- 移动");
        },this);
        this.node.on(cc.Node.EventType.TOUCH_END,function(t){
            //函数体内写事件发生时的事情
            //当触摸开始是打印以下字样
            console.log("触摸 - 结束");
            this.playerNode.accLeft = false;
            this.playerNode.accRight = false;
        },this);
        this.node.on(cc.Node.EventType.TOUCH_Cancel,function(t){
            //函数体内写事件发生时的事情
            //当触摸开始是打印以下字样
            console.log("触摸 - 不在内部的结束");
            this.playerNode.accLeft = false;
            this.playerNode.accRight = false;
        },this);

  在上面的代码中,看到了一个cc.find的方法,这个方法就是可以获取到不同节点,然后再用getComponent方法来获取到节点对应的脚本,getVisibleSize获取到屏幕的尺寸,然后根据手指触摸的地方判断手指是在左侧还是在右侧,进而修改脚本中的属性,由于目前是刚接触这方面,找到了这个方法可以实现,在后面的学习中,会发现有一些更快捷方便的方法来实现这个操作。
  对于一个客户端开发者来说,代码这块相对来说挺好理解,触摸事件都是用回调的方式直接可以在代码块中进行我们自己的逻辑,非常方便。
  在脚本的properties中声明属性的时候,注意到有类似对象的代码,比如:

player: {
    default: null,
    type: cc.Node
}

下面是属性声明的常用参数:

  • default:设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到
  • type:限定属性的数据类型,详见 CCClass 进阶参考:type 参数
  • visible:设为 false 时,不在 属性检查器 中显示该属性
  • serializable:设为 false 则不序列化(保存)该属性
  • displayName:在 属性检查器 中显示指定的属性名
  • tooltip:在 属性检查器 中添加属性的 tooltip

所以这里并不是一个对象,只是对这个属性的一些性质进行限制,让这个属性更加的规范。

你可能感兴趣的:(Cocos Creator-示例小游戏)