快速上手：制作第一个游戏
接下来就让我们开始吧，跟随教程我们将会制作一款名叫摘星星的坑爹小游戏。这款游戏的玩家要操作一个反应迟钝却蹦跳不停的小怪物来碰触不断出现的星星，难以驾驭的加速度将给玩家带来很大挑战，和您的小伙伴比比谁能拿到更多星星吧！
可以在这里感受一下这款游戏的完成形态：
http://fbdemos.leanapp.cn/star-catcher/
准备项目和资源
下载初始项目
您也可以下载最终完成的项目，跟随教程制作过程中有任何不明白的地方都可以打开完成版的项目作为参考：
下载完成项目
打开初始项目
我们首先启动 Cocos Creator，然后选择打开其他项目
检查游戏资源
下面我们先来了解一下项目中都有哪些资源，请关注名为 资源管理器 的面板，这里显示的是项目中的所有资源树状结构。
可以看到，项目资源的根目录名叫assets，对应我们解压之后初始项目中的 assets 目录，只有这个目录下的资源才会被 Cocos Creator 导入项目并进行管理。
资源管理器可以显示任意层次的目录结构，我们可以看到这样的图标就代表一个文件夹，点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后， 资源管理器 中就会呈现如下图的状态。
每个资源都是一个文件，导入项目后根据扩展名的不同而被识别为不同的资源类型，其图标也会有所区别，下面我们来看看项目中的资源各自的类型和作用：
声音文件，一般为 mp3 文件，我们将在主角跳跃和得分时播放名为jump和score的声音文件。
场景图像和文字（Sprite，Label）
在资源管理器中点击选中assets目录，确保我们的场景会被创建在这个目录下
我们创建了一个名叫New Scene的场景文件，右键点击它并选择重命名，将它改名为game。
双击game，就会在 场景编辑器 和层级编辑器中打开这个场景。
这里的Design Resolution属性规定了游戏的设计分辨率，Fit Height和Fit Width规定了在不同尺寸的屏幕上运行时，我们将如何缩放Canvas以适配不同的分辨率。
由于提供了多分辨率适配的功能，我们一般会将场景中的所有负责图像显示的节点都放在Canvas下面。这样当Canvas的scale（缩放）属性改变时，所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。
更详细的信息请阅读Canvas组件参考。目前我们只要知道接下来添加的场景图像都会放在Canvas节点下面就可以了。
设置场景图像
这时就可以松开鼠标按键，可以看到Canvas下面添加了一个名叫background的节点。当我们使用拖拽资源的方式添加节点时，节点会自动以贴图资源的文件名来命名。
我们在对场景进行编辑修改时，可以通过主菜单文件->保存场景来及时保存我们的修改。也可以使用快捷键Ctrl+S（Windows）或Cmd + S（Mac）来保存。
修改背景尺寸
在 场景编辑器 中，可以看到我们刚刚添加的背景图像，下面我们将修改背景图像的尺寸，来让他覆盖整个屏幕。
首先选中background节点，然后点击主窗口左上角工具栏第四个 矩形变换工具：
使用这个工具我们可以方便的修改图像节点的尺寸，将鼠标移动到 场景编辑器 中 background 的左边，按住并向左拖拽直到 background 的左边超出表示设计分辨率的蓝色线框。然后再用同样的方法将 background 的右边向右拖拽。
之后需要拖拽上下两边，使背景图的大小能够填满设计分辨率的线框。
在使用 矩形变换工具 修改背景图尺寸时，可以在 属性检查器 中看到 Node （节点）中的 Size 属性也在随之变化，完成后我们的背景图尺寸大概是 (1360, 760)。您也可以直接在 Size 属性的输入框中输入数值，和使用 矩形变换工具 可以达到同样效果。这样大小的背景图在市面流行的手机上都可以覆盖整个屏幕，不会出现穿帮情况。
添加地面
在 层级管理器 中，显示在下方的节点的渲染顺序是在上方节点的后面，也就是说下方的节点是在上方节点之后绘制的，我们可以看到位于最下的ground物体在 场景编辑器 中显示在了最前。另外子节点也会永远显示在父节点之前，我们可以随时调整节点的层级顺序和关系来控制他们的显示顺序。
按照修改背景的方法，我们也可以使用矩形变换工具来为地面节点设置一个合适的大小。在激活矩形变换工具的时候，如果拖拽节点顶点和四边之外的部分，就可以更改节点的位置。下图是我们设置好的地面节点状态：
除了矩形变换工具之外，我们还可以使用移动工具来改变节点的位置。尝试按住移动工具显示在节点上的箭头并拖拽，就可以一次改变节点在单个坐标轴上的位置。
我们在设置背景和地面的位置和尺寸时不需要很精确的数值，可以凭感觉拖拽。如果您偏好比较完整的数字，也可以按照截图直接输入position和size的数值。
添加主角
为了让主角的光环在场景节点中非常醒目，我们右键点击刚刚添加的PurpleMonster节点，选择重命名之后将其改名为Player。
接下来我们要对主角的属性进行一些设置，首先是改变锚点(Anchor)的位置。默认状态下，任何节点的锚点都会在节点的中心，也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果，所以现在我们需要把主角的锚点设置在脚下。在 属性检查器 里找到Anchor属性，把其中的y值设为0，可以看到 场景编辑器 中，表示主角位置的移动工具的箭头出现在了主角脚下。
接下来 场景编辑器 中拖拽Player，把他放在地面上，效果如下图：
这样我们基本的场景美术内容就配置好了。下面一节我们要编写代码让游戏里的内容生动起来。
编写主角脚本
如果您从没写过程序也不用担心，我们会在教程中提供所有需要的代码，只要复制粘贴到正确的位置就可以了，之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。
创建脚本
编写组件属性
在 代码编辑器 中找到Player脚本里 properties部分，将其改为以下内容并按Ctrl + S（Windows）或Cmd + S（Mac）保存：
// Player.js
现在我们可以把 Player 组件添加到主角节点上。在 层级编辑器 中选中 Player 节点，然后在 属性检查器 中点击 添加组件 按钮，选择 添加用户脚本组件->Player，为主角节点添加 Player 组件。
现在我们可以在 属性检查器 中（需要选中 Player 节点）看到刚添加的 Player 组件了，按照下图将主角跳跃和移动的相关属性设置好：
这些数值除了 jumpDuration 的单位是秒之外，其他的数值都是以像素为单位的，根据我们现在对 Player 组件的设置：我们的主角将能够跳跃 200 像素的高度，起跳到最高点所需的时间是 0.3 秒，最大水平方向移动速度是 400 像素每秒，水平加速度是 350 像素每秒。
这些数值都是建议，一会等游戏运行起来，您完全可以按照自己的喜好随时在 属性检查器 中修改这些数值，不需要改动任何代码，很方便吧！
编写跳跃和移动代码
// 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());
// 不断重复
return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
},这里用到了一些 Cocos2d-js 引擎中的 Action 来实现主角的跳跃动画，详情可以查询Cocos2d-js API.
接下来在onLoad方法里调用刚添加的setJumpAction方法，然后执行runAction来开始动作：
// Player.js
保存脚本，然后我们就可以开始第一次运行游戏了！
点击 Cocos Creator 编辑器上方正中的预览游戏按钮，Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏，现在应该可以看到我们的主角——紫色小怪兽在场景中间活泼的蹦个不停了。
移动控制
// Player.js
setInputControl: function () {
var self = this;
// 添加键盘事件监听
// 有按键按下时，判断是否是我们指定的方向控制键，并设置向对应方向加速
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function (event){
switch(event.keyCode) {
case cc.KEY.a:
self.accLeft = true;
break;
case cc.KEY.d:
self.accRight = true;
break;
}
});
// 松开按键时，停止向该方向的加速
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, function (event){
switch(event.keyCode) {
case cc.KEY.a:
self.accLeft = false;
break;
case cc.KEY.d:
self.accRight = false;
break;
}
});
},然后修改onLoad方法，在其中加入向左和向右加速的开关，以及主角当前在水平方向的速度，最后再调用我们刚添加的setInputControl方法，在场景加载后就开始监听键盘输入：
// Player.js
// 加速度方向开关
this.accLeft = false;
this.accRight = false;
// 主角当前水平方向速度
this.xSpeed = 0;
// 初始化键盘输入监听
this.setInputControl();
},最后修改update方法的内容，添加加速度、速度和主角当前位置的设置：
// Player.js
// 根据当前速度更新主角的位置
this.node.x += this.xSpeed * dt;
},update在场景加载后就会每帧调用一次，我们一般把需要经常计算或及时更新的逻辑内容放在这里。在我们的游戏中，根据键盘输入获得加速度方向后，就需要每帧在update中计算主角的速度和位置。
保存脚本后，下面就可以去泡杯茶，点击预览游戏来看看我们最新的成果。在浏览器打开预览后，用鼠标点击一下游戏画面（这是浏览器的限制，要点击游戏画面才能接受键盘输入），然后就可以按A和D键来控制主角左右移动了！
感觉移动起来有点迟缓？主角跳的不够高？希望跳跃时间长一些？没问题，这些都可以随时调整。只要为Player组件设置不同的属性值，就可以按照您的想法调整游戏。这里有一组设置可供参考：
Jump Height: 150
制作星星
制作Prefab
首先从 资源管理器 中拖拽 assets/textures/star 图片到场景中，位置随意，我们只是需要借助场景作为我们制作 Prefab 的工作台，制作完成后会我们把这个节点从场景中删除。
我们不需要修改星星的位置或渲染属性，但要让星星能够被主角碰触后消失，我们需要为星星也添加一个专门的组件。按照和添加 Player 脚本相同的方法，添加名叫 Star 的 JavaScript 脚本到 assets/scripts/ 中。
接下来双击这个脚本开始编辑，星星组件只需要一个属性用来规定主角距离星星多近时就可以完成收集，修改 properties，加入以下内容：
// Star.js
Star Prefab 需要的设置就完成了，现在从 层级管理器 中将 star 节点拖拽到 资源管理器 中的 assets 文件夹下，就生成了名叫 star 的 Prefab 资源。
现在可以从场景中删除 star 节点了，后续可以直接双击这个 star Prefab 资源进行编辑。
接下去我们会在脚本中动态使用星星的 Prefab 资源生成星星。
添加游戏控制脚本
添加Game脚本到assets/scripts文件夹下，双击打开脚本。首先添加生成星星需要的属性：
// Game.js
接下来从 层级编辑器 中拖拽ground和Player 节点到组件中相同名字的属性上，完成节点引用。
然后设置Min Star Duration和Max Star Duration属性的值为3和5，之后我们生成星星时，会在这两个之间随机取值，就是星星消失前经过的时间。
在随机位置生成星星
// Game.js
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.js
// Star.js
onPicked: function() {
// 当星星被收集时，调用 Game 脚本中的接口，生成一个新的星星
this.game.spawnNewStar();
// 然后销毁当前星星节点
this.node.destroy();
},然后在update方法中添加每帧判断距离，如果距离小于pickRadius属性规定的收集距离，就执行收集行为：
// Star.js
添加得分
添加分数文字（Label）
将该节点名字改为score
在 Game 脚本中添加得分逻辑
// Game.js
// Game.js
// Game.js
在 Star 脚本中调用 Game 中的得分逻辑
// Star.js
失败判定和重新开始
为星星加入计时消失的逻辑
// Game.js
// Game.js
// Game.js
// Game.js
// Star.js
加入音效
跳跃音效
// Player.js
// Player.js
playJumpSound: function () {
// 调用声音引擎播放声音
cc.audioEngine.playEffect(this.jumpAudio, false);
},得分音效
// Game.js
// Game.js
然后选中Canvas节点，把assets/audio/score资源拖拽到Game组件的Score Audio属性上。
这样就大功告成了！完成形态的场景层级和各个关键组件的属性如下：
现在我们可以尽情享受刚制作完成的游戏了，您能打到多少分呢？别忘了您可以随时修改Player和Game组件里的移动控制和星星持续时间等游戏参数，来快速调节游戏的难度。修改组件属性之后需要保存场景，修改后的数值才会被记录下来。
到这里都是官网上面所写的。
下面进入二次开发。
官网上提供的这个游戏只有一个场景。那我就想是不是应该有一个开始场景还有一个结束场景，在结束场景中是不是应该有这次游戏的一个分数和一个重生玩一次的按键。
接下来我们就开始把这二个场景加入进来。
1.把官网上的完整代码下载下来。地址：https://github.com/cocos-creator/tutorial-first-game/releases/download/v1.2/complete_project.zip
2.导入到cocos creator。
3.打开导入的项目。现在我们开始进行二次开发。
我们创建二个场景：start、end
双击start场景，给start场景添加background 和 ground二张背景图片，和一个button，
在scripts下面新建start、end。
start文件
cc.Class({
properties: {
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
btnClick:function(){
console.log("btnClick");
cc.director.loadScene("game");
},
//start () {},
// update (dt) {},});
end文件
cc.Class({
properties: {
// 暂存 Game 对象的引用
// score label 的引用
scores: {
default: null,
type: cc.Label
},
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
// cc.log(Global.scorezf)
this.scores.string = 'gameOver Score:'+ Global.scorezf.toString();
},
btnClick:function(){
// cc.log(this.game.score.toString())
cc.director.loadScene('game');
},
//start () {},
// update (dt) {},});
2.修改控制主角方向的事件。
打开Player文件，修改setInputControl方法
setInputControl: function () {
// if (cc.rectContainsPoint(rect, locationInNode)) { // 判断触摸点是否在按钮范围内
// cc.log("sprite began... x = " + locationInNode.x + ", y = " + locationInNode.y);
// target.opacity = 180;
// return true;
// }
// return false;
},
onTouchMoved: function (touch, event) {
cc.log('Touch Moved: ' + event);
},
onTouchEnded: function (touch, event) {
cc.log('Touch Ended: ' + event);
var canvas = cc.find('Canvas');
var locationInNode = canvas.convertToNodeSpace(touch.getLocation());
// cc.log(cc.director.getWinSize());
if(cc.director.getWinSize().width/2>locationInNode.x){
self.accLeft = false;
self.accRight = false;
}else{
self.accLeft = false;
self.accRight = false;
}
},
onTouchCancelled: function (touch, event) {
cc.log('Touch Cancelled: ' + event);
// var target = event.getCurrentTarget(); // 获取事件所绑定的 target, 通常是cc.Node及其子类
//
// // 获取当前触摸点相对于按钮所在的坐标
// var locationInNode = target.convertToNodeSpace(touch.getLocation());
//
// cc.log(cc.director.getWinSize());
// if(cc.director.getWinSize().width/2>locationInNode.x){
// self.accLeft = false;
// self.accRight = false;
// }else{
// self.accLeft = false;
// self.accRight = false;
// }
}
// set a flag when key pressed
// 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;
// }
// },
// // unset a flag when key released
// onKeyReleased: function(keyCode, event) {
// switch(keyCode) {
// case cc.KEY.a:
// self.accLeft = false;
// break;
// case cc.KEY.d:
// self.accRight = false;
// break;
// }
// }
}, self.node);
//cc.Node.EventType.TOUCH_MOVE
},这个主要就不会跳屏幕外面去了。
最后构建发布时把初始场景设置为start.fire
下面是游戏运行效果：
————————————————
