cocos2d-js开发入门
- 格式：pdf
- 大小：575.36 KB
- 文档页数：6
cocos2d-js开发⼊门
第⼀步，环境搭建
⾸先去官⽹下载cocos2d-x压缩包：
这⾥我选择的是3.x版本的完整SDK：
解压到任意⽬录运⾏python setup.py安装即可，不过这⾥的python版本是2.x。
新建⼯程：cocos new -l js ⼯程名
进⼊⼯程⽬录运⾏：cocos run -p web
在浏览器上看到如下画⾯即可表⽰程序运⾏成功：
第⼆步，cocos2d-js基础
上⾯的环境搭建和使⽤命令⾏新建⼯程是⼀般的流程，不过如果我们想具体了解⼀下cocos是如何运⾏⼀个程序的话，可以⼿动来创建⼀个简单的⼯程，在下载好的SDK⼯具包
中需要使⽤的是如下图所⽰的web⽂件夹：
运⾏cocos需要服务器环境，于是在服务器的www⽬录下新建⼀个game⽂件夹，将SDK中的web⽂件夹解压到此处并重命名为cocos2d-html5，下图是必要的⼯程结构：
cocos2d-html5是web游戏引擎应该不需要解释；
res⽂件夹⽤来存放⼀些⾳频或者图⽚资源；
src存放游戏的脚本资源，主要在该⽂件夹下编写游戏逻辑和加载游戏的媒体资源，包含app.js和resource.js；
index.html是运⾏游戏的默认web页⾯；
main.js是⽤于开始加载游戏cocos2d-js脚本；
project.json是运⾏游戏必要的配置⽂件。
准备好⼯程⽬录以后开始编写游戏的代码：
⾸先是index.html：
1
2
3
4
5
6
7 Document
8
9
10
11
12
13
14
canvas节点是运⾏游戏必要的“舞台”，然后再引⼊CCBoot.js和main.js⽂件，html代码应该不怎么需要解释吧。
然后是main.js：
1 cc.game.onStart = function() {
2 cc.view.setDesignResolutionSize(1280, 800, cc.ResolutionPolicy.SHOW_ALL);
3 cc.director.runScene(new gameScene());
4 };
5 cc.game.run();
cc是cocos2d对象的简称，新建的游戏叫做cc.game，⾸先给游戏开始运⾏事件设置⼀些参数：
使⽤setDesignResolutionSize ⽅法来设置分辨率，同时设置游戏适应浏览器全屏运⾏；
然后运⾏gameScene场景，这是我们⾃⼰定义的游戏场景，后续会详细介绍。
接着是project.json配置⽂件：
1 {
2 "debugMode" : 0,
3 "showFPS" : false,
4 "frameRate" : 60,
5 "id" : "gameCanvas",
6 "renderMode" : 0,
7 "engineDir":"cocos2d-html5",
8 "modules" : ["cocos2d"],
9 "jsList" : [
10 "src/resource.js",
11 "src/app.js"
12 ]
13 }
debugMode：有0~6共7个等级，⽤来设置显⽰哪些错误或警告信息，这⾥设置为0即不显⽰信息；
showFPS ： 是否显⽰FPS，玩游戏⼤家应该都懂吧；
frameRate：设置游戏帧数，24帧⼈眼就不会感到画⾯闪烁了，因此60帧应该算⽐较流畅的；
id：⽤来指定哪个DOM节点来运⾏游戏，还记得前⾯设置过的id为gameCanvas的canvas节点吗，你设置了没有？
renderMode：渲染模式，官⽅推荐设为0；engineDir ：引擎⽬录，就是前⾯SDK中解压的web⽂件夹，不过改名为cocos2d-html5了；
jsList ：数组，说明需要哪些必要的游戏脚本⽂件，⼀般都放置在src⽂件夹下。
最后，来编写游戏的基本逻辑src/app.js：
1 var gameScene = cc.Scene.extend({
2 onEnter: function () {
3 this._super();
4 console.log("my first game starts here");
5 }
6 });
这⾥主要定义gameScene场景⽅法，将在main.js⽂件中建⽴场景⽽运⾏。现在打开浏览器输⼊localhost/game应该可以在控制台看到输出了“my first game starts here”字样，到
⽬前为⽌游戏⾥还没有精灵（⼀般在游戏⾥将可以与玩家交互的图⽚称为“精灵”），下⾯将导⼊图⽚资源来创建精灵res/player.png：
这是⼀只可爱的像素鸟，现在打开src/resource.js⽂件：
1 var gameResources = [
2 "res/player.png"
3 ];
然后修改main.js来预加载该图⽚资源：
1 cc.game.onStart = function() {
2 cc.view.setDesignResolutionSize(1280, 800, cc.ResolutionPolicy.SHOW_ALL);
3 cc.LoaderScene.preload(gameResources, function () {
4 cc.director.runScene(new gameScene());
5 }, this);
6 };
7 cc.game.run();
最后修改src/app.js来显⽰精灵：
1 var gameScene = cc.Scene.extend({
2 onEnter: function () {
3 this._super();
4 var gameLayer = new game();
5 gameLayer.init();
6 this.addChild(gameLayer);
7 }
8 });
9
10 var game = cc.Layer.extend({
11 init: function () {
12 this._super();
13 var target = cc.Sprite.create("res/player.png");
14 this.addChild(target, 0);
15 }
16 });
这个时候打开浏览器，emmm。。。注意屏幕左下⾓应该可以看到1/4像素鸟：
不是很明显，这是因为cocos的锚点设置默认在图⽚中⼼，⽽坐标系原点⼜在屏幕左下⾓（⼀般的程序都是在左上⾓），引⽤cocos中⽂⽹站的⼀张图⽚加以说明：
注意每张图⽚中的红点，它表⽰图⽚的锚点位置。
现在来修改精灵的显⽰位置，由于我这⾥设置的分辨率为1280x800，所以精灵的显⽰位置应该是(640, 400)，修改src/app.js：
1 var gameScene = cc.Scene.extend({
2 onEnter: function () {
3 // same as before
4 }
5 });
6
7 var game = cc.Layer.extend({
8 init: function () {
9 this._super();
10 var target = cc.Sprite.create("res/player.png");
11 this.addChild(target, 0);
12 target.setPosition(640, 400);
13 }
14 });
然后重新打开浏览器可以看到像素鸟已经在屏幕中间显⽰了。有了显⽰精灵的基础，接下来我们可以来制作⼀些简单逻辑的⼩游戏。
第三步，简单逻辑游戏的开发：Concentration gameConcentration game 是⼀个和连连看差不多的⼩游戏，⾸先准备素材：
在前⾯的基础上需要修改的主要是src⽂件夹下的js⽂件，这也是模块化设计的优点。先修改src/resource.js⽂件导⼊资源：
1 var gameResources = [
2 "res/cover.jpg",
3 "res/tile_0.jpg",
4 "res/tile_1.jpg",
5 "res/tile_2.jpg",
6 "res/tile_3.jpg",
7 "res/tile_4.jpg",
8 "res/tile_5.jpg",
9 "res/tile_6.jpg",
10 "res/tile_7.jpg"
11 ];
接下来是修改src/app.js⽂件，都是⼀些简单逻辑，部分函数不太明⽩的可以去cocos官⽅查看API⼿册，这⾥不再详细展开，源码如下：
1 // 定义瓷砖序列
2 var gameArray = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7];
3 // 翻开的瓷砖
4 var pickedTiles = [];
5 // 显⽰移动步数
6 var scoreText;
7 var moves = 0;
8
9 // 打乱数组：从数组末端出发，每次与前⾯随机⼀个元素交换
10 var shuffle = function(v) {
11 for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
12 return v;
13 };
14
15 // 游戏场景⽅法
16 var gameScene = cc.Scene.extend({
17 onEnter: function() {
18 gameArray = shuffle(gameArray);
19 this._super();
20 var gameLayer = new game();
21 gameLayer.init();
22 this.addChild(gameLayer);
23 }
24 });
25
26 // 游戏主要逻辑层
27 var game = cc.Layer.extend({
28 init: function () {
29 this._super();
30 // 背景渐变
31 var gradient = cc.LayerGradient.create(cc.color(0, 0, 0, 255), cc.color(0x46, 0x82, 0xB4, 255));
32 this.addChild(gradient);
33 // 移动步数
34 scoreText = cc.LabelTTF.create("Moves: 0", "Arial", "32", cc.TEXT_ALIGNMENT_CENTER);
35 this.addChild(scoreText);
36 scoreText.setPosition(100, 50);
37 // 4x4瓷砖
38 for (var i = 0; i < 16; i++) {
39 var tile = new MemoryTile();
40 tile.pictureValue = gameArray[i];
41 this.addChild(tile, 0);
