学习Creator

 

 

目前网上教程有点少...只能稍做记录。

能想到的还是跟着cocos官方推的教程来学，逛文档有看到，他们提供了一个示例小游戏，看了一些，能大致了解代码结构，所以，第一步就从此开始了

(标题：制作第一个游戏)

https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

官方例子的效果截图，内容就是，那个紫色的小东西跳来跳去去捡物品

跟着文章走的过程，前面的步骤就简要说一下，大致就是创建场景，把图片拖进去就好了，然后新建一个文件夹，Scene 里面防止场景，Script ,这里刚实验的时候，发现一个问题，如果src代码部分如果不用 Script 这个文件夹当目录的话，绑定图片的时候，搜不到....具体为啥还没看，先跟着走把

我们把UI拼成上面那样后，就可以开始写代码逻辑了，首先穿件一个文件夹（Script，用于存储代码文件），新建一个PlayerHero，用于控制主角运动.  继承至 Component（组件）

properties 下的内容都是可以在编辑器里面编辑的，下面定义几条熟悉用于控制小精灵效果的基础熟悉

  properties: {
        // 可编辑内容
        
         // 主角跳跃高度
        jumpHeight: 0,
        // 主角跳跃持续时间
        jumpDuration: 0,
        // 最大移动速度
        maxMoveSpeed: 0,
        // 加速度
        accel: 0,
    },

添加基础熟悉好，将脚本代码绑定到精灵

添加用户组件-》选择文件名称, 这样本脚本属性就绑定到精灵了。

绑定好以后，我们可以看到在 properties 下的变量都能在可视化窗口里面编辑了。在这里可以直接输入内容，对其对应的变量进行赋值。

增加好基础属性后，先 让精灵跳起来，通过action 的方式让他跳起来。增加跳跃代码：

增加一个跳跃动画，jumpDuration，jumpHeight 都是我们在可视化窗口定义的内容。

本脚本运行时，就让他开始跳动。然后运行看一下跳动效果

已经跳动起来了，所以要开始让游戏更有操作性，官方教程是键盘操控，我觉得要以手机为主，所以就用了计时来做屏幕左右操控。所以这里就需要用到update,

因此我增加了三个字段，用于控制方向，以及平行位移

测试运行看一下，发现他会自动往左边跑，那就是逻辑没啥问题了，这样，在加一个点击事件处理一下，让他可以左可以右边，

所以我们现在需要增加一个逻辑类，用于处理玩法逻辑。gameLogic.js

把gamelogic 逻辑类挂载在， Canvas上，写屏幕左右控制逻辑

properties 下，添加了player 节点，这边把图片节点赋值到player节点上，在增加屏幕触摸事件，屏幕触摸事件是，

        this.node.on('touchstart', this.onEventStart, this);
        //touchmove 可以换成cc.Node.EventType.TOUCH_MOVE
        this.node.on('touchmove', this.onEventMove, this);
        //touchcancel 可以换成cc.Node.EventType.TOUCH_CANCEL
        this.node.on('touchcancel', this.onEventCancel, this);
        //touchend 可以换成cc.Node.EventType.TOUCH_END
        this.node.on('touchend', this.onEventEnd, this);

 关闭的话就是用 off  ，我这边只需要一个点击所以就只留了一个 按下事件.

this.node.off('touchstart',this.onEventStart,this);

 

触摸点击事件..this.player 是找到图片节点，也就是node，该图片节点下我们之前看到可以挂载多个脚本，所以我们需要借用 getComponent来获取其中某个挂载脚本，这样就可以先运行试一下了。

运行后，点击屏幕左右，精灵就会跟着左右移动了，为了增加可玩性，所以需要增加点玩法内容，

增加一个星星，来触碰他，然后来增加分数，所以这里在添加一个星星的类，因为星星是重复的，所以我们用一个新的东西叫做：Prefab 预制体，我的理解就是，把他弄成一个有脚本属性的内容，然后将其变成为资源一样的东西，重复添加。看内容

 

把图片资源星星拖动放入层级管理器中，任意，在添加代码文件Star.js挂载的脚本，添加属性pickRadius 用来控制判断玩家与星星的距离差多少视为碰撞成功。添加完熟悉以后，将起拖动到资源文件里面：

就会有如上文件出现，这就是预制体了.

在逻辑代码里面:GameLogic.js 里面在把星星的也放进去，在这里处理星星的生成

注意他的类型....

绑定脚本以后，添加两个函数，一个是生成星星，一个是生成星星的位置，

其中看到了。newStar.getComponent('Star').game = this;  我们把this（Canvas）赋值给了 star.game 里面，这样我们就可以在star.js 里面用到，所以我们在star 里面也添加逻辑

onpicked 函数，为触碰成功，如果触碰到了，就让他在生成一个星星

运行看一下结果，现在可以通过修改 pikeRedius 的数值来要求碰撞位置有差值

有了碰撞消除以后，现在来增加分数，

 添加一个label 节点，直接添加引用到 Canvas 上，增加一个变量分数，用于记录分值，

当碰撞到星星以后，将分数+1

游戏基本雏形，基本完成，后面可以自己在添加别的逻辑，最后效果如下，今天看的这个教程，主要是了解creator 的用法，下一步准备自己做一个以前做过的游戏来巩固一下，总结一下今天看的教程内容主题

creator 是一个脚本组件为主体的引擎，与之前用的cocos区别还是有点大。不过确实方便了独立性