Cocos Creator 制作第一个游戏
Cocos Creator制作第一个游戏您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程，但如果您想快速上手体验使用 Cocos Creator 开发游戏的大体流程和方法，这一章将满足您的好奇心。完成本章教程之后，您应该能获得足够上手制作游戏的信息，不过我们还是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工作流程。 接下来就让我们开始吧，跟随教程我们将会制作一款名叫摘星星的坑爹小游戏。这款游戏的玩家要操作一个反应迟钝却蹦跳不停的小怪物来碰触不断出现的星星，难以驾驭的加速度将给玩家带来很大挑战，和您的小伙伴比比谁能拿到更多星星吧！ 可以在这里感受一下这款游戏的完成形态： http://fbdemos.leanapp.cn/star-catcher/ 准备项目和资源我们已经为您准备好了制作这款游戏需要的全部资源，下载初始项目后，解压到您希望的位置，之后我们就可以开始了： 下载初始项目 您也可以下载最终完成的项目，跟随教程制作过程中有任何不明白的地方都可以打开完成版的项目作为参考： 下载完成项目 打开初始项目如果您还不了解如何获取和启动 Cocos Creator，请阅读安装和启动一节。
检查游戏资源我们的初始项目中已经包含了所有需要的游戏资源，因此您不需要再导入任何其他资源。如果希望了解导入资源的方法，可以阅读资源工作流程的相关内容。 下面我们先来了解一下项目中都有哪些资源，请关注名为资源管理器的面板，这里显示的是项目中的所有资源树状结构。 可以看到，项目资源的根目录名叫assets，对应我们解压之后初始项目中的 资源管理器可以显示任意层次的目录结构，我们可以看到这样的图标就代表一个文件夹，点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后，资源管理器中就会呈现如下图的状态。 每个资源都是一个文件，导入项目后根据扩展名的不同而被识别为不同的资源类型，其图标也会有所区别，下面我们来看看项目中的资源各自的类型和作用：
创建游戏场景在 Cocos Creator 中，游戏场景（Scene）是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容：
当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础，让我们现在就新建一个场景。
了解Canvas打开场景后，层级管理器中会显示当前场景中的所有节点和他们的层级关系。我们刚刚新建的场景中只有一个名叫 这里的 由于提供了多分辨率适配的功能，我们一般会将场景中的所有负责图像显示的节点都放在Canvas下面。这样当Canvas的 更详细的信息请阅读Canvas组件参考。目前我们只要知道接下来添加的场景图像都会放在Canvas节点下面就可以了。 设置场景图像添加背景首先在资源管理器里按照 这时就可以松开鼠标按键，可以看到Canvas下面添加了一个名叫 我们在对场景进行编辑修改时，可以通过主菜单 修改背景尺寸在场景编辑器中，可以看到我们刚刚添加的背景图像，下面我们将修改背景图像的尺寸，来让他覆盖整个屏幕。 首先选中 使用这个工具我们可以方便的修改图像节点的尺寸，将鼠标移动到场景编辑器中 之后需要拖拽上下两边，使背景图的大小能够填满设计分辨率的线框。 在使用矩形变换工具修改背景图尺寸时，可以在属性检查器中看到Node（节点）中的 添加地面我们的主角需要一个可以在上面跳跃的地面，我们马上来添加一个。用和添加背景图相同的方式，拖拽资源管理器中 在层级管理器中，显示在下方的节点的渲染顺序会在上方节点的后面，我们可以看到位于最下的 按照修改背景的方法，我们也可以使用矩形变换工具来为地面节点设置一个合适的大小。在激活矩形变换工具的时候，如果拖拽节点顶点和四边之外的部分，就可以更改节点的位置。下图是我们设置好的地面节点状态： 除了矩形变换工具之外，我们还可以使用移动工具来改变节点的位置。尝试按住移动工具显示在节点上的箭头并拖拽，就可以一次改变节点在单个坐标轴上的位置。 我们在设置背景和地面的位置和尺寸时不需要很精确的数值，可以凭感觉拖拽。如果您偏好比较完整的数字，也可以按照截图直接输入 添加主角接下来我们的主角小怪兽要登场了，从资源管理器拖拽 为了让主角的光环在场景节点中非常醒目，我们右键点击刚刚添加的 接下来我们要对主角的属性进行一些设置，首先是改变锚点(Anchor)的位置。默认状态下，任何节点的锚点都会在节点的中心，也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果，所以现在我们需要把主角的锚点设置在脚下。在属性检查器里找到Anchor属性，把其中的 接下来场景编辑器中拖拽 这样我们基本的场景美术内容就配置好了。下面一节我们要编写代码让游戏里的内容生动起来。 编写主角脚本Cocos Creator 开发游戏的一个核心理念就是让内容生产和功能开发可以流畅的并行协作，我们在上个部分着重于处理美术内容，而接下来就是通过编写脚本来开发功能的流程，之后我们还会看到写好的程序脚本可以很容易的被内容生产者使用。 如果您从没写过程序也不用担心，我们会在教程中提供所有需要的代码，只要复制粘贴到正确的位置就可以了，之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。 创建脚本
注意：Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！ 编写组件属性打开的脚本里已经有了预先设置好的一些代码块，这些代码就是编写一个组件脚本所需的结构。具有这样结构的脚本就是 Cocos Creator 中的组件（Component），他们能够挂载到场景中的节点上，提供控制节点的各种功能。我们先来设置一些属性，然后看看怎样在场景中调整他们。 在代码编辑器中找到 // Player.js
//...
properties: {
// 主角跳跃高度
jumpHeight: 0,// 主角跳跃持续时间
jumpDuration: 0,// 最大移动速度
maxMoveSpeed: 0,// 加速度
accel: 0,},//...
这些新增的属性将规定主角的移动方式，在代码中我们不需要关心这些数值是多少，因为我们之后会直接在属性检查器中设置这些数值。 现在我们可以把 现在我们可以在属性检查器中（需要选中 这些数值除了 jumpDuration 的单位是秒之外，其他的数值都是以像素为单位的，根据我们现在对 这些数值都是建议，一会等游戏运行起来，您完全可以按照自己的喜好随时在属性检查器中修改这些数值，不需要改动任何代码，很方便吧！ 编写跳跃和移动代码下面我们添加一个方法，来让主角跳跃起来，在 // 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,-this.jumpHeight)).easing(cc.easeCubicActionIn());
// 不断重复
return cc.repeatForever(cc.sequence(jumpUp,jumpDown));
},
这里用到了一些 Cocos2d-js 引擎中的 Action 来实现主角的跳跃动画，详情可以查询Cocos2d-js API. 接下来在 // Player.js
onLoad: function () {
// 初始化跳跃动作
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
},
保存脚本，然后我们就可以开始第一次运行游戏了！ 点击 Cocos Creator 编辑器上方正中的预览游戏按钮，Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏，现在应该可以看到我们的主角——紫色小怪兽在场景中间活泼的蹦个不停了。 移动控制只能在原地傻蹦的主角可没前途，让我们为主角添加键盘输入，用A和D来控制他的跳跃方向。在 // 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);
},
然后修改 // Player.js
onLoad: function () {
// 初始化跳跃动作
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
// 加速度方向开关
this.accLeft = false;
this.accRight = false;
// 主角当前水平方向速度
this.xSpeed = 0;
// 初始化键盘输入监听
this.setInputControl();
},
最后修改 // 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;
},
保存脚本后，下面就可以去泡杯茶，点击预览游戏来看看我们最新的成果。在浏览器打开预览后，用鼠标点击一下游戏画面（这是浏览器的限制，要点击游戏画面才能接受键盘输入），然后就可以按A和D键来控制主角左右移动了！ 感觉移动起来有点迟缓？主角跳的不够高？希望跳跃时间长一些？没问题，这些都可以随时调整。只要为 Jump Height: 150 Jump Duration: 0.3 Max Move Speed: 400 Accel: 1000 这组属性设置会让主角变得灵活无比，至于如何选择，就看您想做一个什么风格的游戏了。 制作星星主角现在可以跳来跳去了，我们要给玩家一个目标，也就是会不断出现在场景中的星星，玩家需要引导小怪兽碰触星星来收集分数。被主角碰到的星星会消失，然后马上在随机位置重新生成一个。 制作Prefab对于需要重复生成的节点，我们可以将他保存成Prefab（预制）资源，作为我们动态生成节点时使用的模板。关于Prefab的更多信息，请阅读预制资源（Prefab）。 首先从资源管理器中拖拽 我们不需要修改星星的位置或渲染属性，但要让星星能够被主角碰触后消失，我们需要为星星也添加一个专门的组件。按照和添加 接下来双击这个脚本开始编辑，星星组件只需要一个属性用来规定主角距离星星多近时就可以完成收集，修改 // Star.js
properties: {
// 星星和主角之间的距离小于这个数值时，就会完成收集
pickRadius: 0
},
保存脚本后，将这个脚本添加到刚创建的 Star Prefab 需要的设置就完成了，现在从层级管理器中将 现在可以从场景中删除 接下去我们会在脚本中动态使用星星的 Prefab 资源生成星星。 添加游戏控制脚本星星的生成是游戏主逻辑的一部分，所以我们要添加一个叫做 添加 // 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.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.js
spawnNewStar: function() {
// ...
// 将 Game 组件的实例传入星星组件
newStar.getComponent('Star').game = this;
},
保存后打开 // 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();
},
然后在 // Star.js
update: function (dt) {
// 每帧判断和主角之间的距离是否小于收集距离
if (this.getPlayerDistance() < this.pickRadius) {
// 调用收集行为
this.onPicked();
return;
}
},
保存脚本，然后再次预览测试，可以看到控制主角靠近星星时，星星就会消失掉，然后在随机位置生成了新的星星！ 添加得分小怪兽辛辛苦苦的收集星星，没有奖励怎么行，让我们现在就在收集星星时添加得分奖励的逻辑和显示。 添加分数文字（Label）游戏开始时得分从0开始，每收集一个星星分数就会加1。要显示得分，首先要创建一个Label节点。在层级管理器中选中
完成后效果如下图所示： 在 Game 脚本中添加得分逻辑我们将会把计分和更新分数显示的逻辑放在 // Game.js
properties: {
// ...
// score label 的引用
scoreDisplay: {
default: null,type: cc.Label
}
},
接下来在 // Game.js
onLoad: function () {
// ...
// 初始化计分
this.score = 0;
},
然后在 // Game.js
gainScore: function () {
this.score += 1;
// 更新 scoreDisplay Label 的文字
this.scoreDisplay.string = 'Score: ' + this.score.toString();
},
保存 在 Star 脚本中调用 Game 中的得分逻辑下面打开 // Star.js
onPicked: function() {
// 当星星被收集时，调用 Game 脚本中的接口，生成一个新的星星
this.game.spawnNewStar();
// 调用 Game 脚本的得分方法
this.game.gainScore();
// 然后销毁当前星星节点
this.node.destroy();
},
保存后预览，可以看到现在收集星星时屏幕正上方显示的分数会增加了！ 失败判定和重新开始现在我们的游戏已经初具规模，但得分再多，不可能失败的游戏也不会给人成就感。现在让我们加入星星定时消失的行为，而且让星星消失时就判定为游戏失败。也就是说，玩家需要在每颗星星消失之前完成收集，并不断重复这个过程完成玩法的循环。 为星星加入计时消失的逻辑打开 // Game.js
onLoad: function () {
// ...
// 初始化计时器
this.timer = 0;
this.starDuration = 0;
// 生成一个新的星星
this.spawnNewStar();
// 初始化计分
this.score = 0;
},
然后在 // Game.js
spawnNewStar: function() {
// ...
// 重置计时器，根据消失时间范围随机取一个值
this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
this.timer = 0;
},
在 // Game.js
update: function (dt) {
// 每帧更新计时器，超过限度还没有生成新的星星
// 就会调用游戏失败逻辑
if (this.timer > this.starDuration) {
this.gameOver();
return;
}
this.timer += dt;
},
最后加入 // Game.js
gameOver: function () {
this.player.stopAllActions(); //停止 player 节点的跳跃动作
cc.director.loadScene('game');
}
对 // 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));
}
保存 加入音效尽管很多人玩手游的时候会无视声音，我们为了教程展示的工作流程尽量完整，还是要补全加入音效的任务。 跳跃音效首先加入跳跃音效，打开 // Player.js
properties: {
// ...
// 跳跃音效资源
jumpAudio: {
default: null,url: cc.AudioClip
},
然后改写 // Player.js
setJumpAction: function () {
// 跳跃上升
var jumpUp = cc.moveBy(this.jumpDuration,-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);
},
得分音效保存 // Game.js
properties: {
// ...
// 得分音效资源
scoreAudio: {
default: null,url: cc.AudioClip
}
},
然后在 // Game.js
gainScore: function () {
this.score += 1;
// 更新 scoreDisplay Label 的文字
this.scoreDisplay.string = 'Score: ' + this.score.toString();
// 播放得分音效
cc.audioEngine.playEffect(this.scoreAudio,
保存脚本，回到层级编辑器，选中 然后选中 这样就大功告成了！完成形态的场景层级和各个关键组件的属性如下： 现在我们可以尽情享受刚制作完成的游戏了，您能打到多少分呢？别忘了您可以随时修改 总结恭喜您完成了用 Cocos Creator 制作的第一个游戏！希望这篇快速入门教程能帮助您了解 Cocos Creator 游戏开发流程中的基本概念和工作流程。如果您对编写和学习脚本编程不感兴趣，也可以直接从完成版的项目中把写好的脚本复制过来使用。 接下来您还可以继续完善游戏的各方各面，以下是一些推荐的改进方向：
以上这些方向都得到改善的游戏版本可以下载进化版项目来参考和学习，这里就不再赘述了。 此外如果希望将完成的游戏发布到服务器上分享给好友玩耍，可以阅读预览和构建一节的内容。 今天的教程就到这里了，您可以立刻开始制作您的第二款 Cocos Creator 游戏，或者继续阅读本手册。关于本快速开始教程的任何问题，都可以在Github 上的本教程仓库提交反馈。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |