Cocos Creator 制做第一个游戏

时间 2019-12-07 标签 cocos creator 制做第一个游戏

Cocos Creator 制做第一个游戏

您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工做流程，但若是您想快速上手体验使用 Cocos Creator 开发游戏的大致流程和方法，这一章将知足您的好奇心。完成本章教程以后，您应该能得到足够上手制做游戏的信息，不过咱们仍是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工做流程。html

接下来就让咱们开始吧，跟随教程咱们将会制做一款名叫摘星星的坑爹小游戏。这款游戏的玩家要操做一个反应迟钝却蹦跳不停的小怪物来碰触不断出现的星星，难以驾驭的加速度将给玩家带来很大挑战，和您的小伙伴比比谁能拿到更多星星吧！html5

能够在这里感觉一下这款游戏的完成形态：node

http://fbdemos.leanapp.cn/star-catcher/git

准备项目和资源

咱们已经为您准备好了制做这款游戏须要的所有资源，下载初始项目后，解压到您但愿的位置，以后咱们就能够开始了：程序员

下载初始项目github

您也能够下载最终完成的项目，跟随教程制做过程当中有任何不明白的地方均可以打开完成版的项目做为参考：编程

下载完成项目canvas

打开初始项目

若是您还不了解如何获取和启动 Cocos Creator，请阅读安装和启动一节。浏览器

咱们首先启动 Cocos Creator，而后选择打开其余项目
在弹出的文件夹选择对话框中，选中咱们刚下载并解压完成的 start_project，点击打开按钮
Cocos Creator 编辑器主窗口会打开，咱们将看到以下的项目状态

检查游戏资源

咱们的初始项目中已经包含了全部须要的游戏资源，所以您不须要再导入任何其余资源。若是但愿了解导入资源的方法，能够阅读资源工做流程的相关内容。服务器

下面咱们先来了解一下项目中都有哪些资源，请关注名为资源管理器的面板，这里显示的是项目中的全部资源树状结构。

能够看到，项目资源的根目录名叫assets，对应咱们解压以后初始项目中的 assets 目录，只有这个目录下的资源才会被 Cocos Creator 导入项目并进行管理。

资源管理器能够显示任意层次的目录结构，咱们能够看到这样的图标就表明一个文件夹，点击文件夹左边的三角图标能够展开文件夹的内容。将文件夹所有展开后，资源管理器中就会呈现以下图的状态。

每一个资源都是一个文件，导入项目后根据扩展名的不一样而被识别为不一样的资源类型，其图标也会有所区别，下面咱们来看看项目中的资源各自的类型和做用：

声音文件，通常为 mp3 文件，咱们将在主角跳跃和得分时播放名为jump和score的声音文件。
位图字体，由 fnt 文件和同名的 png 图片文件共同组成。位图字体（Bitmap Font）是一种游戏开发中经常使用的字体资源，详情请阅读位图字体资源
各式各样的缩略图标，这些都是图像资源，通常是 png 或 jpg 文件。图片文件导入项目后会通过简单的处理成为texture类型的资源。以后就能够将这些资源拖拽到场景或组件属性中去使用了。

建立游戏场景

在 Cocos Creator 中，游戏场景（Scene）是开发时组织游戏内容的中心，也是呈现给玩家全部游戏内容的载体。游戏场景中通常会包括如下内容：

场景图像和文字（Sprite，Label）
角色
以组件形式附加在场景节点上的游戏逻辑脚本

当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各类各样开发者设置的逻辑功能。因此除了资源之外，游戏场景是一切内容创做的基础，让咱们如今就新建一个场景。

在资源管理器中点击选中assets目录，确保咱们的场景会被建立在这个目录下
点击资源管理器左上角的加号按钮，在弹出的菜单中选择 Scene
咱们建立了一个名叫New Scene的场景文件，右键点击它并选择重命名，将它更名为game。
双击game，就会在场景编辑器和层级编辑器中打开这个场景。

了解Canvas

打开场景后，层级管理器中会显示当前场景中的全部节点和他们的层级关系。咱们刚刚新建的场景中只有一个名叫Canvas的节点，Canvas能够被称为画布节点或渲染根节点，点击选中Canvas，能够在属性检查器中看到他的属性。

这里的Design Resolution属性规定了游戏的设计分辨率，Fit Height和Fit Width规定了在不一样尺寸的屏幕上运行时，咱们将如何缩放Canvas以适配不一样的分辨率。

因为提供了多分辨率适配的功能，咱们通常会将场景中的全部负责图像显示的节点都放在Canvas下面。这样当Canvas的scale（缩放）属性改变时，全部做为其子节点的图像也会跟着一块儿缩放以适应不一样屏幕的大小。

更详细的信息请阅读Canvas组件参考。目前咱们只要知道接下来添加的场景图像都会放在Canvas节点下面就能够了。

设置场景图像

添加背景

首先在资源管理器里按照assets/textures/background的路径找到咱们的背景图像资源，点击并拖拽这个资源到层级编辑器中的Canvas节点上，直到Canvas节点显示橙色高亮，表示将会添加一个以background为贴图资源的子节点。

这时就能够松开鼠标按键，能够看到Canvas下面添加了一个名叫background的节点。当咱们使用拖拽资源的方式添加节点时，节点会自动以贴图资源的文件名来命名。

咱们在对场景进行编辑修改时，能够经过主菜单文件->保存场景来及时保存咱们的修改。也可使用快捷键Ctrl+S（Windows）或Cmd + S（Mac）来保存。

修改背景尺寸

在场景编辑器中，能够看到咱们刚刚添加的背景图像，下面咱们将修改背景图像的尺寸，来让他覆盖整个屏幕。

首先选中background节点，而后点击主窗口左上角工具栏第四个矩形变换工具：

使用这个工具咱们能够方便的修改图像节点的尺寸，将鼠标移动到场景编辑器中 background 的左边，按住并向左拖拽直到 background 的左边超出表示设计分辨率的蓝色线框。而后再用一样的方法将 background 的右边向右拖拽。

以后须要拖拽上下两边，使背景图的大小可以填满设计分辨率的线框。

在使用矩形变换工具修改背景图尺寸时，能够在属性检查器中看到 Node （节点）中的 Size 属性也在随之变化，完成后咱们的背景图尺寸大概是 (1360, 760)。您也能够直接在 Size 属性的输入框中输入数值，和使用矩形变换工具能够达到一样效果。这样大小的背景图在市面流行的手机上均可以覆盖整个屏幕，不会出现穿帮状况。

添加地面

咱们的主角须要一个能够在上面跳跃的地面，咱们立刻来添加一个。用和添加背景图相同的方式，拖拽资源管理器中 assets/textures/ground 资源到层级管理器的 Canvas 上。此次在拖拽时咱们还能够选择新添加的节点和 background 节点的顺序关系。拖拽资源的状态下移动鼠标指针到 background 节点的下方，直到在 Canvas 上显示橙色高亮框，并同时在 background 下方显示表示插入位置的绿色线条，而后松开鼠标，这样 ground 在场景层级中就被放在了 background 下方，同时也是 Canvas 的一个子节点。

在层级管理器中，显示在下方的节点的渲染顺序会在上方节点的后面，咱们能够看到位于最下的ground物体在场景编辑器中显示在了最前。另外子节点也会永远显示在父节点以前，咱们能够随时调整节点的层级顺序和关系来控制他们的显示顺序。

按照修改背景的方法，咱们也可使用矩形变换工具来为地面节点设置一个合适的大小。在激活矩形变换工具的时候，若是拖拽节点顶点和四边以外的部分，就能够更改节点的位置。下图是咱们设置好的地面节点状态：

除了矩形变换工具以外，咱们还可使用移动工具来改变节点的位置。尝试按住移动工具显示在节点上的箭头并拖拽，就能够一次改变节点在单个坐标轴上的位置。

咱们在设置背景和地面的位置和尺寸时不须要很精确的数值，能够凭感受拖拽。若是您偏比如较完整的数字，也能够按照截图直接输入position和size的数值。

添加主角

接下来咱们的主角小怪兽要登场了，从资源管理器拖拽assets/texture/PurpleMonster到层级管理器中 Canvas 的下面，并确保他的排序在 ground 之下，这样咱们的主角会显示在最前面。注意小怪兽节点应该是 Canvas 的子节点，和 ground 节点平行。

为了让主角的光环在场景节点中很是醒目，咱们右键点击刚刚添加的PurpleMonster节点，选择重命名以后将其更名为Player。

接下来咱们要对主角的属性进行一些设置，首先是改变锚点(Anchor)的位置。默认状态下，任何节点的锚点都会在节点的中心，也就是说该节点中心点所在的位置就是该节点的位置。咱们但愿控制主角的底部的位置来模拟在地面上跳跃的效果，因此如今咱们须要把主角的锚点设置在脚下。在属性检查器里找到Anchor属性，把其中的y值设为0，能够看到场景编辑器中，表示主角位置的移动工具的箭头出如今了主角脚下。

接下来场景编辑器中拖拽Player，把他放在地面上，效果以下图：

这样咱们基本的场景美术内容就配置好了。下面一节咱们要编写代码让游戏里的内容生动起来。

编写主角脚本

Cocos Creator 开发游戏的一个核心理念就是让内容生产和功能开发能够流畅的并行协做，咱们在上个部分着重于处理美术内容，而接下来就是经过编写脚原本开发功能的流程，以后咱们还会看到写好的程序脚本能够很容易的被内容生产者使用。

若是您从没写过程序也不用担忧，咱们会在教程中提供全部须要的代码，只要复制粘贴到正确的位置就能够了，以后这部分工做能够找您的程序员小伙伴来解决。下面让咱们开始建立驱动主角行动的脚本吧。

建立脚本

首先在资源管理器中右键点击assets文件夹，选择新建->文件夹
右键点击New Folder，选择重命名，将其更名为scripts，以后咱们全部的脚本都会存放在这里。
右键点击scripts文件夹，选择新建->JavaScript，建立一个JavaScript脚本
将新建脚本的名字改成Player。双击这个脚本，打开代码编辑器。

注意： Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！若是组件名称的大小写不正确，将没法正确经过名称使用组件！

编写组件属性

打开的脚本里已经有了预先设置好的一些代码块，这些代码就是编写一个组件脚本所需的结构。具备这样结构的脚本就是 Cocos Creator 中的组件（Component），他们可以挂载到场景中的节点上，提供控制节点的各类功能。咱们先来设置一些属性，而后看看怎样在场景中调整他们。

在代码编辑器中找到Player脚本里 properties部分，将其改成如下内容并按Ctrl + S（Windows）或Cmd + S（Mac）保存：

// Player.js
    //...
    properties: {
        // 主角跳跃高度
        jumpHeight: 0,
        // 主角跳跃持续时间
        jumpDuration: 0,
        // 最大移动速度
        maxMoveSpeed: 0,
        // 加速度
        accel: 0,
    },
    //...

这些新增的属性将规定主角的移动方式，在代码中咱们不须要关心这些数值是多少，由于咱们以后会直接在属性检查器中设置这些数值。

如今咱们能够把 Player 组件添加到主角节点上。在层级编辑器中选中 Player 节点，而后在属性检查器中点击添加组件按钮，选择 添加用户脚本组件->Player，为主角节点添加 Player 组件。

如今咱们能够在属性检查器中（须要选中 Player 节点）看到刚添加的 Player 组件了，按照下图将主角跳跃和移动的相关属性设置好：

这些数值除了 jumpDuration 的单位是秒以外，其余的数值都是以像素为单位的，根据咱们如今对 Player组件的设置：咱们的主角将可以跳跃 200 像素的高度，起跳到最高点所需的时间是 0.3 秒，最大水平方向移动速度是 400 像素每秒，水平加速度是 350 像素每秒。

这些数值都是建议，一会等游戏运行起来，您彻底能够按照本身的喜爱随时在属性检查器中修改这些数值，不须要改动任何代码，很方便吧！

编写跳跃和移动代码

下面咱们添加一个方法，来让主角跳跃起来，在 properties: {...},代码块的下面，添加叫作setJumpAction的方法：

// Player.js
    properties: {
        //...
    },

    setJumpAction: function () {
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 不断重复
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },

这里用到了一些 Cocos2d-js 引擎中的 Action 来实现主角的跳跃动画，详情能够查询Cocos2d-js API.

接下来在onLoad方法里调用刚添加的setJumpAction方法，而后执行runAction来开始动做：

// Player.js
    onLoad: function () {
        // 初始化跳跃动做
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

onLoad方法会在场景加载后马上执行，因此咱们会把初始化相关的操做和逻辑都放在这里面。

保存脚本，而后咱们就能够开始第一次运行游戏了！

点击 Cocos Creator 编辑器上方正中的预览游戏按钮，Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏，如今应该能够看到咱们的主角——紫色小怪兽在场景中间活泼的蹦个不停了。

移动控制

只能在原地傻蹦的主角可没前途，让咱们为主角添加键盘输入，用A和D来控制他的跳跃方向。在setJumpAction方法的下面添加setInputControl方法：

// Player.js
    setJumpAction: function () {
        //...
    },

    setInputControl: function () {
        var self = this;
        // 添加键盘事件监听
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            // 有按键按下时，判断是不是咱们指定的方向控制键，并设置向对应方向加速
            onKeyPressed: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = true;
                        self.accRight = false;
                        break;
                    case cc.KEY.d:
                        self.accLeft = false;
                        self.accRight = true;
                        break;
                }
            },
            // 松开按键时，中止向该方向的加速
            onKeyReleased: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = false;
                        break;
                    case cc.KEY.d:
                        self.accRight = false;
                        break;
                }
            }
        }, self.node);
    },

而后修改onLoad方法，在其中加入向左和向右加速的开关，以及主角当前在水平方向的速度，最后再调用咱们刚添加的setInputControl方法，在场景加载后就开始监听键盘输入：

// Player.js
    onLoad: function () {
        // 初始化跳跃动做
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);

        // 加速度方向开关
        this.accLeft = false;
        this.accRight = false;
        // 主角当前水平方向速度
        this.xSpeed = 0;

        // 初始化键盘输入监听
        this.setInputControl();
    },

最后修改update方法的内容，添加加速度、速度和主角当前位置的设置：

// Player.js
    update: function (dt) {
        // 根据当前加速度方向每帧更新速度
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        // 限制主角的速度不能超过最大值
        if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) {
            // if speed reach limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // 根据当前速度更新主角的位置
        this.node.x += this.xSpeed * dt;
    },

update在场景加载后就会每帧调用一次，咱们通常把须要常常计算或及时更新的逻辑内容放在这里。在咱们的游戏中，根据键盘输入得到加速度方向后，就须要每帧在update中计算主角的速度和位置。

保存脚本后，下面就能够去泡杯茶，点击预览游戏来看看咱们最新的成果。在浏览器打开预览后，用鼠标点击一下游戏画面（这是浏览器的限制，要点击游戏画面才能接受键盘输入），而后就能够按A和D键来控制主角左右移动了！

感受移动起来有点迟缓？主角跳的不够高？但愿跳跃时间长一些？没问题，这些均可以随时调整。只要为Player组件设置不一样的属性值，就能够按照您的想法调整游戏。这里有一组设置可供参考：

Jump Height: 150
Jump Duration: 0.3
Max Move Speed: 400
Accel: 1000

这组属性设置会让主角变得灵活无比，至于如何选择，就看您想作一个什么风格的游戏了。

制做星星

主角如今能够跳来跳去了，咱们要给玩家一个目标，也就是会不断出如今场景中的星星，玩家须要引导小怪兽碰触星星来收集分数。被主角碰到的星星会消失，而后立刻在随机位置从新生成一个。

制做Prefab

对于须要重复生成的节点，咱们能够将他保存成 Prefab（预制）资源，做为咱们动态生成节点时使用的模板。关于 Prefab 的更多信息，请阅读预制资源（Prefab）。

首先从资源管理器中拖拽 assets/textures/star 图片到场景中，位置随意，咱们只是须要借助场景做为咱们制做 Prefab 的工做台，制做完成后会咱们把这个节点从场景中删除。

咱们不须要修改星星的位置或渲染属性，但要让星星可以被主角碰触后消失，咱们须要为星星也添加一个专门的组件。按照和添加 Player 脚本相同的方法，添加名叫 Star 的 JavaScript 脚本到 assets/scripts/中。

接下来双击这个脚本开始编辑，星星组件只须要一个属性用来规定主角距离星星多近时就能够完成收集，修改 properties，加入如下内容：

// Star.js
    properties: {
        // 星星和主角之间的距离小于这个数值时，就会完成收集
        pickRadius: 0
    },

保存脚本后，将这个脚本添加到刚建立的 star 节点上。而后在属性检查器中把 Pick Radius 属性值设为 60：

Star Prefab 须要的设置就完成了，如今从层级管理器中将 star 节点拖拽到资源管理器中的 assets 文件夹下，就生成了名叫 star 的 Prefab 资源。

如今能够从场景中删除 star 节点了，后续能够直接双击这个 star Prefab 资源进行编辑。

接下去咱们会在脚本中动态使用星星的 Prefab 资源生成星星。

添加游戏控制脚本

星星的生成是游戏主逻辑的一部分，因此咱们要添加一个叫作Game的脚本做为游戏主逻辑脚本，这个脚本以后还会添加计分、游戏失败和从新开始的相关逻辑。

添加Game脚本到assets/scripts文件夹下，双击打开脚本。首先添加生成星星须要的属性：

// Game.js
    properties: {
        // 这个属性引用了星星预制资源
        starPrefab: {
            default: null,
            type: cc.Prefab
        },
        // 星星产生后消失时间的随机范围
        maxStarDuration: 0,
        minStarDuration: 0,
        // 地面节点，用于肯定星星生成的高度
        ground: {
            default: null,
            type: cc.Node
        },
        // player 节点，用于获取主角弹跳的高度，和控制主角行动开关
        player: {
            default: null,
            type: cc.Node
        }
    },

保存脚本后将Game组件添加到层级编辑器中的Canvas节点上（选中Canvas节点后，拖拽脚本到属性检查器上，或点击属性检查器的添加组件按钮，并从 用户自定义脚本 中选择 Game，接下来从资源管理器中拖拽star Prefab 资源到Game组件的Star Prefab属性中。这是咱们第一次为属性设置引用，只有在属性声明时规定type为引用类型时（好比咱们这里写的cc.Prefab类型），才可以将资源或节点拖拽到该属性上。

接下来从层级编辑器中拖拽ground和Player 节点到组件中相同名字的属性上，完成节点引用。

而后设置Min Star Duration和Max Star Duration属性的值为3和5，以后咱们生成星星时，会在这两个之间随机取值，就是星星消失前通过的时间。

在随机位置生成星星

接下来咱们继续修改Game脚本，在onLoad方法后面添加生成星星的逻辑：

// Game.js
    onLoad: function () {
        // 获取地平面的 y 轴坐标
        this.groundY = this.ground.y + this.ground.height/2;
        // 生成一个新的星星
        this.spawnNewStar();
    },

    spawnNewStar: function() {
        // 使用给定的模板在场景中生成一个新节点
        var newStar = cc.instantiate(this.starPrefab);
        // 将新增的节点添加到 Canvas 节点下面
        this.node.addChild(newStar);
        // 为星星设置一个随机位置
        newStar.setPosition(this.getNewStarPosition());
    },

    getNewStarPosition: function () {
        var randX = 0;
        // 根据地平面位置和主角跳跃高度，随机获得一个星星的 y 坐标
        var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;
        // 根据屏幕宽度，随机获得一个星星 x 坐标
        var maxX = this.node.width/2;
        randX = cc.randomMinus1To1() * maxX;
        // 返回星星坐标
        return cc.p(randX, randY);
    }

保存脚本之后点击预览游戏按钮，在浏览器中能够看到，游戏开始后动态生成了一颗星星！用一样的方法，您能够在游戏中动态生成任何预先设置好的以 Prefab 为模板的节点。

添加主角碰触收集星星的行为

如今要添加主角收集星星的行为逻辑了，这里的重点在于，星星要随时能够得到主角节点的位置，才能判断他们之间的距离是否小于可收集距离，如何得到主角节点的引用呢？别忘了咱们前面作过的两件事：

Game组件中有个名叫player的属性，保存了主角节点的引用。
每一个星星都是在Game脚本中动态生成的。

因此咱们只要在Game脚本生成Star节点实例时，将Game组件的实例传入星星并保存起来就行了，以后咱们能够随时经过game.player来访问到主角节点。让咱们打开Game脚本，在spawnNewStar方法最后面添加这样一句：

// Game.js
    spawnNewStar: function() {
        // ...
        // 将 Game 组件的实例传入星星组件
        newStar.getComponent('Star').game = this;
    },

保存后打开Star脚本，如今咱们能够利用Game组件中引用的player节点来判断距离了，在onLoad方法后面添加名为getPlayerDistance和onPicked的方法：

// Star.js
    getPlayerDistance: function () {
        // 根据 player 节点位置判断距离
        var playerPos = this.game.player.getPosition();
        // 根据两点位置计算两点之间距离
        var dist = cc.pDistance(this.node.position, playerPos);
        return dist;
    },

    onPicked: function() {
        // 当星星被收集时，调用 Game 脚本中的接口，生成一个新的星星
        this.game.spawnNewStar();
        // 而后销毁当前星星节点
        this.node.destroy();
    },

而后在update方法中添加每帧判断距离，若是距离小于pickRadius属性规定的收集距离，就执行收集行为：

// Star.js
    update: function (dt) {
        // 每帧判断和主角之间的距离是否小于收集距离
        if (this.getPlayerDistance() < this.pickRadius) {
            // 调用收集行为
            this.onPicked();
            return;
        }
    },

保存脚本，而后再次预览测试，能够看到控制主角靠近星星时，星星就会消失掉，而后在随机位置生成了新的星星！

添加得分

小怪兽辛辛苦苦的收集星星，没有奖励怎么行，让咱们如今就在收集星星时添加得分奖励的逻辑和显示。

添加分数文字（Label）

游戏开始时得分从0开始，每收集一个星星分数就会加1。要显示得分，首先要建立一个 Label 节点。在层级管理器中选中Canvas节点，右键点击并选择菜单中的建立新节点->建立渲染节点->Label（文字），一个新的 Label 节点会被建立在Canvas下面，并且顺序在最下面。接下来咱们要用以下的步骤配置这个 Label 节点：

将该节点名字改成score
将score节点的位置（position属性）设为(0, 180)。
选中该节点，编辑Label组件的string属性，填入Score: 0的文字。
将Label组件的Font Size属性设为50。
从资源管理器中拖拽assets/mikado_outline_shadow位图字体资源（注意图标是）到Label组件的Font属性中，将文字的字体替换成咱们项目资源中的位图字体。

完成后效果以下图所示：

在 Game 脚本中添加得分逻辑

咱们将会把计分和更新分数显示的逻辑放在Game脚本里，打开Game脚本开始编辑，首先在properties区块的最后添加分数显示 Label 的引用属性：

// Game.js
    properties: {
        // ...
        // score label 的引用
        scoreDisplay: {
            default: null,
            type: cc.Label
        }
    },

接下来在onLoad方法里添加计分用的变量的初始化：

// Game.js
    onLoad: function () {
        // ...
        // 初始化计分
        this.score = 0;
    },

而后在update方法后面添加名叫gainScore的新方法：

// Game.js
    gainScore: function () {
        this.score += 1;
        // 更新 scoreDisplay Label 的文字
        this.scoreDisplay.string = 'Score: ' + this.score.toString();
    },

保存 Game 脚本后，回到层级管理器，选中 Canvas 节点，而后把前面添加好的 score 节点拖拽到属性检查器里 Game 组件的 Score Display 属性中。

在 Star 脚本中调用 Game 中的得分逻辑

下面打开Star脚本，在onPicked方法中加入gainScore的调用：

// Star.js
    onPicked: function() {
        // 当星星被收集时，调用 Game 脚本中的接口，生成一个新的星星
        this.game.spawnNewStar();
        // 调用 Game 脚本的得分方法
        this.game.gainScore();
        // 而后销毁当前星星节点
        this.node.destroy();
    },

保存后预览，能够看到如今收集星星时屏幕正上方显示的分数会增长了！

失败断定和从新开始

如今咱们的游戏已经初具规模，但得分再多，不可能失败的游戏也不会给人成就感。如今让咱们加入星星定时消失的行为，并且让星星消失时就断定为游戏失败。也就是说，玩家须要在每颗星星消失以前完成收集，并不断重复这个过程完成玩法的循环。

为星星加入计时消失的逻辑

打开Game脚本，在onLoad方法的spawnNewStar调用以前加入计时须要的变量声明：

// Game.js
    onLoad: function () {
        // ...
        // 初始化计时器
        this.timer = 0;
        this.starDuration = 0;
        // 生成一个新的星星
        this.spawnNewStar();
        // 初始化计分
        this.score = 0;
    },

而后在spawnNewStar方法最后加入重置计时器的逻辑，其中this.minStarDuration和this.maxStarDuration是咱们一开始声明的Game组件属性，用来规定星星消失时间的随机范围：

// Game.js
    spawnNewStar: function() {
        // ...
        // 重置计时器，根据消失时间范围随机取一个值
        this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
        this.timer = 0;
    },

在update方法中加入计时器更新和判断超过期限的逻辑：

// Game.js
    update: function (dt) {
        // 每帧更新计时器，超过限度尚未生成新的星星
        // 就会调用游戏失败逻辑
        if (this.timer > this.starDuration) {
            this.gameOver();
            return;
        }
        this.timer += dt;
    },

最后加入gameOver方法，游戏失败时从新加载场景。

// Game.js
    gameOver: function () {
        this.player.stopAllActions(); //中止 player 节点的跳跃动做
        cc.director.loadScene('game');
    }

对Game脚本的修改就完成了，保存脚本，而后打开Star脚本，咱们须要为即将消失的星星加入简单的视觉提示效果，在update方法最后加入如下代码：

// Star.js
    update: function() {
        // ...
        // 根据 Game 脚本中的计时器更新星星的透明度
        var opacityRatio = 1 - this.game.timer/this.game.starDuration;
        var minOpacity = 50;
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    }

保存Star脚本，咱们的游戏玩法逻辑就所有完成了！如今点击预览游戏按钮，咱们在浏览器看到的就是一个有核心玩法、激励机制、失败机制的合格游戏了。

加入音效

尽管不少人玩手游的时候会无视声音，咱们为了教程展现的工做流程尽可能完整，仍是要补全加入音效的任务。

跳跃音效

首先加入跳跃音效，打开Player脚本，添加引用声音文件资源的jumpAudio属性：

// Player.js
    properties: {
        // ...
        // 跳跃音效资源
        jumpAudio: {
            default: null,
            url: cc.AudioClip
        },
    },

而后改写setJumpAction方法，插入播放音效的回调，并经过添加playJumpSound方法来播放声音：

// Player.js
    setJumpAction: function () {
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 添加一个回调函数，用于在动做结束时调用咱们定义的其余方法
        var callback = cc.callFunc(this.playJumpSound, this);
        // 不断重复，并且每次完成落地动做后调用回调来播放声音
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    },

    playJumpSound: function () {
        // 调用声音引擎播放声音
        cc.audioEngine.playEffect(this.jumpAudio, false);
    },

得分音效

保存Player脚本之后打开Game脚本，来添加得分音效，首先仍然是在properties中添加一个属性来引用声音文件资源：

// Game.js
    properties: {
        // ...
        // 得分音效资源
        scoreAudio: {
            default: null,
            url: cc.AudioClip
        }
    },

而后在gainScore方法里插入播放声音的代码：

// Game.js
    gainScore: function () {
        this.score += 1;
        // 更新 scoreDisplay Label 的文字
        this.scoreDisplay.string = 'Score: ' + this.score.toString();
        // 播放得分音效
        cc.audioEngine.playEffect(this.scoreAudio, false);
    },

保存脚本，回到层级编辑器，选中Player节点，而后从资源管理器里拖拽assets/audio/jump资源到Player组件的Jump Audio属性上。

而后选中Canvas节点，把assets/audio/score资源拖拽到Game组件的Score Audio属性上。

这样就大功告成了！完成形态的场景层级和各个关键组件的属性以下：

如今咱们能够尽情享受刚制做完成的游戏了，您能打到多少分呢？别忘了您能够随时修改Player和Game组件里的移动控制和星星持续时间等游戏参数，来快速调节游戏的难度。修改组件属性以后须要保存场景，修改后的数值才会被记录下来。

总结

恭喜您完成了用 Cocos Creator 制做的第一个游戏！但愿这篇快速入门教程能帮助您了解 Cocos Creator 游戏开发流程中的基本概念和工做流程。若是您对编写和学习脚本编程不感兴趣，也能够直接从完成版的项目中把写好的脚本复制过来使用。

接下来您还能够继续完善游戏的各方各面，如下是一些推荐的改进方向：

加入简单的开始菜单界面，在游戏运行的一开始显示开始按钮，点击按钮后才会开始游戏
为游戏失败加入简单的菜单界面，游戏失败后点击按钮才会从新开始
限制主角的移动不能超过视窗边界
为主角的跳跃动做加入更细腻的动画表现
为星星消失的状态加入计时进度条
收集星星时加入更华丽的效果
为触屏设备加入输入控制

以上这些方向都获得改善的游戏版本能够下载进化版项目来参考和学习，这里就再也不赘述了。

此外若是但愿将完成的游戏发布到服务器上分享给好友玩耍，能够阅读预览和构建一节的内容。

今天的教程就到这里了，您能够马上开始制做您的第二款 Cocos Creator 游戏，或者继续阅读本手册。关于本快速开始教程的任何问题，均可以在Github 上的本教程仓库提交反馈。