Hello World of Cocos2d-JS

property name	options	explanation
debugMode	0,1,2,3,4,5,6	0: close all 1: info level 2: warn level 3: error level 4: info level with web page 5: warn level with web page 6: error level with web page
showFPS	true or false	toggle FPS visibility
id	"gameCanvas"	the dom element to run cocos2d on
frameRate	a positive number above 24, usually 60-30	adjust the frame rate of your game
renderMode	0,1,2	Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
engineDir	the engine directory related to your project	specify the directory the engine code
modules	engine modules	you could customize your engine by modules. Module names are in the module of moduleConfig.json in root of frameworks/Cocos2d-html5directory
jsList	a list of your game source code	add your own file lists after myApp.js

在为你的游戏创建第一个场景前，你应该熟悉一些Cocos2d的基础概念。如果你已经熟悉这些概念，你可以跳到下一个章节。

基础概念

在一个Cocos2d game游戏中，每一个元素都是一个节点。游戏通常是由三种节点构成的：

场景（Scene）
层（Layer)
精灵（Sprite）

现在我们关注这个游戏中的层，你可以在这里找到更多关于场景和精灵的细节。

层（Layer）

一个cc.Layer是一个cc.Node，知道怎样去渲染自己，而且可能是半透明的，能让玩家可以看见在当前层之下的其他层。cc.Layer在定义你的游戏外观和行为方面非常有用，所以你应该要花很多时间去对付cc.Layer子类以来达到你的预期。

因为复杂的应用程序会要求你去定义自定义cc.Layer子类，所以Cocos2d提供了几个预定义的层。这些例子包括cc.Menu（简单的菜单层），cc.ColorLayer（填充色层），还有cc.LayerMultiplex（可以复用它的子节点，每次激活其中的一个子节点，同时禁用其它子节点）。层可以包含任意cc.Node作为子节点，包括cc.Sprite，cc.Label，甚至是其它的cc.Layer对象。因为层是cc.Node的子类，所以层可以手动或者使用cc.Action进行切换。

坐标系

Cocos2d-JS使用与OpenGl相同的坐标系，其被叫做笛卡尔右手系。它在游戏产业非常流行，但是它与网页设计所使用的传统的左上角坐标系是不同的。

你可以在这里找到更多关于坐标系的细节。

锚点（Anchor Point）

锚点被用在一个对象的定位和旋转。锚点坐标是相对坐标，举例来说，在（0，1）位置的锚点（我们经常在Cocos2d中简化定义为cc.p(0,0)）对应于那个对象的左下角，同时cc.p(0.5,0.5)对应于对象的中心。当设置一个对象的位置时，这个对象被定位以致于锚点会位于setPosition()函数调用所指定的坐标。同样地，当旋转一个对象，它是绕着锚点旋转的。这些性质（properties）可以在Cocos2d-JS v3.0作为属性（attribute）被设置。例如，这个精灵有一个cc.p(0,0)的锚点和一个cc.p(0,0)的位置。

// create sprite 
var sprite = new cc.Sprite ( "bottomleft.png" ) ; 
sprite.attr({
        x: 0,
        y: 0,
        anchorX: 0,
        anchorY: 0
    });
this.addChild ( sprite ) ;

动作（Action）

更多关于动作的细节请看这里。运行cc.MoveBy动作的例子：

// Move a sprite 50 pixels to the right, and 10 pixels to the top over 2 seconds.
sprite.runAction(new cc.MoveBy(2, cc.p(50, 10)));

动画（Animation）

更多关于动画的细节请看这里。播放动画的例子：

var animation = new cc.Animation ( ) ;
for ( var i = 1 ; i < 15 ; i ++ ) {         
    var frameName = "res/Images/grossini_dance_" + ( ( i < 10 ) ? ( "0" + i ) : i ) + ".png" ; 
    animation.addSpriteFrameWithFile ( frameName ) ;
}

animation.setDelayPerUnit ( 2.8 / 14 ) ; 
animation.setRestoreOriginalFrame ( true ) ; 
var action = new cc.Animate ( animation ) ; 
sprite.runAction ( new cc.Sequence( action, action.reverse ( ) ) ) ;

调度器（Scheduler）和定时器回调（Timer Callback）

更多关于调度器和定时器回调的细节请看这里。

事件管理器（EventManager）

Cocos2d-JS v3.0移植了一种对用户事件响应的新机制。基本要素：

事件监听器（Event listeners） 封装事件处理代码。
事件管理器（Event Manager） 管理用户事件的监听器。
事件对象（Event objects） 含有有关事件的信息。

为了响应事件，你必须首先创建一个cc.EventListener。这里有五种不同的事件监听器：

cc.EventListenerTouch - 响应触摸事件
cc.EventListenerKeyboard - 响应键盘事件
cc.EventListenerAcceleration - 响应加速计事件
cc.EventListenMouse - 响应鼠标事件
cc.EventListenerCustom - 响应自定义事件

然后，添加你的事件处理代码到事件监听器上恰当的回调（例如，onTouchBegan对应EventListenerTouch监听器，或者onKeyPressed对应键盘事件监听器）。接下来，利用cc.eventManager注册你的事件监听器。当事件出现（例如，用户触摸屏幕，或者在键盘打字），cc.eventManager通过调用你的回调来分发事件对象（Event objects）（比如 EventTouch， EventKeyboard）到恰当的事件监听器。每个事件对象包含有关事件的信息（比如触摸的坐标）。请参考事件处理器（EventManager）来获得更多细节。

制作你的第一个游戏场景

在上一篇教程，我们已经分析一个Cocos2d-JS游戏的执行通路。我们知道在main.js里我们利用cc.game.onStart加载我们的第一个游戏场景，这是起作用的代码片段：

cc.game.onStart = function(){
cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
//load resources
cc.LoaderScene.preload(g_resources, function () {
    cc.director.runScene(new HelloWorldScene());
}, this);
};

这里，我们使用cc.LoaderScene来预加载我们游戏的资源，而在加载完成后，导演则会运行我们的第一个游戏场景。 注意： cc.game是真正的，会初始化游戏配置和启动游戏的游戏对象。

清理工作（Cleanup Work）

好了,我认为背景信息已经足够。让我们做些清理工作。

清理myApp.js

这个过程非常简单。首先，我们应该删除myApp.js的全部内容。因为我们会从头开始写这些代码。其次，我们应该改变main.js中的这一行：

cc.director.runScene(new HelloWorldScene());

成

cc.director.runScene(new MenuScene());

没错，我猜你已经抓住要点了。我们会定义我们的第一个类，名为MenuScene。最后，我们应该添加需要的资源和定义一些资源变量以便于简单的访问。

打开resource.js然后改变它的内容成这样：

var res = {
helloBG_png : "res/helloBG.png",
start_n_png : "res/start_n.png",
start_s_png : "res/start_s.png"
};

var g_resources = [
//image
res.helloBG_png,
res.start_n_png,
res.start_s_png
];

定义你的第一个场景-MenuScene

打开app.js然后开始定义菜单层（MenuLayer）：

var MenuLayer = cc.Layer.extend({
ctor : function(){
    //1. call super class's ctor function
    this._super();
},
init:function(){
    //call super class's super function
    this._super();

    //2. get the screen size of your game canvas
    var winsize = cc.director.getWinSize();

    //3. calculate the center point
    var centerpos = cc.p(winsize.width / 2, winsize.height / 2);

    //4. create a background image and set it's position at the center of the screen
    var spritebg = new cc.Sprite(res.helloBG_png);
    spritebg.setPosition(centerpos);
    this.addChild(spritebg);

    //5.
    cc.MenuItemFont.setFontSize(60);

    //6.create a menu and assign onPlay event callback to it
    var menuItemPlay = new cc.MenuItemSprite(
        new cc.Sprite(res.start_n_png), // normal state image
        new cc.Sprite(res.start_s_png), //select state image
        this.onPlay, this);
    var menu = new cc.Menu(menuItemPlay);  //7. create the menu
    menu.setPosition(centerpos);
    this.addChild(menu);
},

onPlay : function(){
    cc.log("==onplay clicked");
}
});

让我们从1-6回顾全部细节：

它调用它超类的初始函数。
得到你游戏的屏幕大小。
计算你的屏幕的中心点，这将会被用于将背景图片放于中心。
利用文件名创建一个背景图片然后设置它到屏幕中央的位置。最后，作为子节点添加这个精灵到菜单层。
调用MenuItemFont的setFontSize函数来调整字体大小。在这个例子，它是无效的。但如果你想要使用MenuItemFont来创建一些菜单项，它会影响菜单项的标签大小。
创建一个有两张图片的菜单，一张对应正常状态而另一张对应选中状态。然后我们设置菜单的位置到屏幕的中心。最后，添加它到当前的层中。

然后我们也应该定义一个Menu scene：

var MenuScene = cc.Scene.extend({
onEnter:function () {
    this._super();
    var layer = new MenuLayer();
    layer.init();
    this.addChild(layer);
}
});

创建一个菜单场景（MenuScene）的过程是非常直观的。你定义了一个从cc.Scene派生的变量。你应该记住extend这个符号，这被用于继承类（extenal classes）。一旦这个场景被创建，一个onEnter函数应该被定义。它定义菜单层作为它的孩子。我们也可以定义一个ctor函数代替onEnter函数。onEnter函数在ctor函数后被调用。

总结

在这篇教程，我已经向你展示了当你第一次开始编写Cocos2d-JS游戏所需要知道的基础概念。然后也给你详细解释了怎样建立你的第一个游戏场景。希望你享受它同时能快乐地编程！相关的样板工程可以在这里下载。它只包括用户部分而不包括框架。你可以使用它们去替代Cocos2d-JS模版的对应部分。

从这里要去哪（Where to go from here）

在下一章，我会向你展示怎样去定义你的游戏场景以及各种游戏层，怎样去设计这些层还有这些层的责任是什么。

介绍

在这篇教程中，我会向你展示如何在parkour游戏中添加TiledMap作为新的背景。我们也将会学习如何使背景不断滚动以及玩家不断奔跑。这背后的奥秘就是移动cocos2d的层。

完成一些准备工作

在我们下手前，让我们添加资源文件以及相对应我们游戏的名字。

设置资源和全局变量

既然我们将要在每一层引用其他的层。所以最好的方式来检索层是通过标签。在globals.js添加下述的代码：

if(typeof TagOfLayer == "undefined") {
    var TagOfLayer = {};
    TagOfLayer.background = 0;
    TagOfLayer.Animation = 1;
    TagOfLayer.Status = 2;
};

以下我们给背景层、动画层、状态层一个标签名字，这样我们就能通过标签检索其他层。我们也需要在resource.js添加资源变量。

//Our two tiled map are named s_map00 and s_map01.
var res = {
    helloBG_png : "res/helloBG.png",
    start_n_png : "res/start_n.png",
    start_s_png : "res/start_s.png",
    PlayBG_png  : "res/PlayBG.png",
    runner_png  : "res/running.png",
    runner_plist : "res/running.plist",
    map_png: "res/map.png",
    map00_tmx: "res/map00.tmx",
    map01_tmx: "res/map01.tmx"
};

var g_resources = [
    //image
    res.helloBG_png,
    res.start_n_png,
    res.start_s_png,
    res.PlayBG_png,
    res.runner_png,
    res.runner_plist,
    res.map_png,
    res.map00_tmx,
    res.map01_tmx
];

上述的代码能自己解释自己，所以让我们跳到下一节。

激活Chipmunk调试绘画

如果我们使用Chipmunk物理引擎，你最好激活调试绘画功能。所以调试的过程会更加方便。在AnimationLayer.js的ctor方法中添加下面的代码：

this._debugNode = new cc.PhysicsDebugNode(this.space);
// Parallax ratio and offset
this.addChild(this._debugNode, 10);

当你再次运行游戏，你将会看见在奔跑的玩家上的一个红色的盒子：

TiledMap介绍

TileMap是一个2d游戏里面常见的概念。它对于构建非常大的地图和一些视差滚动背景非常有用。 TiledMap比一般的PNG文件消耗更少的内存。如果你想要构建一些很大型的地图，这一定是你最好的选择。闲话少说，让我们深入看看TiledMap。

用TiledMap代替以前的背景

现在，是时候用酷炫的tiled map代替旧的静态的背景图。我们将要在BackgroundLayer.js完成下面的工作。首先，我们应该在BackgroundLayer中添加四个成员变量：

map00:null,
map01:null,
mapWidth:0,
mapIndex:0,

我们应该删除旧的创建静态背景的代码。 (注意：下面我取注释代码片段，你可以完整地删除。)

//        var winSize = cc.Director.getInstance().getWinSize();
//
//        var centerPos = cc.p(winSize.width / 2, winSize.height / 2);
//        var spriteBG = new cc.Sprite(s_PlayBG);
//        spriteBG.setPosition(centerPos);
//        this.addChild(spriteBG);

最后，我们将要添加新的代码片段来创建tiledmap 背景。

this.map00 = new cc.TMXTiledMap(res.map00_tmx);
this.addChild(this.map00);
this.mapWidth = this.map00.getContentSize().width;
this.map01 = new cc.TMXTiledMap(res.map01_tmx);
this.map01.setPosition(cc.p(this.mapWidth, 0));
this.addChild(this.map01);

保存所有的改动并运行：

在这里，我们添加两片地图。map01就在map00的旁边。在下面的章节中，我们将要解释为什么我们要添加两片地图。

Scene Display介绍

既然物理body将要不断地向右移动，精灵会和物理body同步它的位置。过了一段时间后，玩家会跑到屏幕外面，就像上一篇教程说的那样。所以我们需要在每帧移动游戏层的x坐标，让它保持在可见的范围内。以下是AnimationLayer.js中代码片段：

getEyeX:function () {
    return this.sprite.getPositionX() - g_runnerStartX;
},

这里getEyeX函数计算动画层的偏移(delta)。我们应该在包含背景层和动画层的this.gameLayer反方向移动相同的偏移（delta）。所以我们能够通过在PlayScene.js里的，每帧调用的update函数中添加下列代码：

     update:function (dt) {
        // chipmunk step
        this.space.step(dt);

        var animationLayer = this.gameLayer.getChildByTag(TagOfLayer.Animation);
        var eyeX = animationLayer.getEyeX();

        this.gameLayer.setPosition(cc.p(-eyeX,0));
    }

移动背景层

设置背景层的移动的方法跟我们上一节做的基本是一样的。不过我们需要针对两个tiled map完成一些计算。让我们来完成它把。在BackgroundLayer里添加一个新的成员函数checkAndReload：

    checkAndReload:function (eyeX) {
        var newMapIndex = parseInt(eyeX / this.mapWidth);
        if (this.mapIndex == newMapIndex) {
            return false;
        }
        if (0 == newMapIndex % 2) {
            // change mapSecond
            this.map01.setPositionX(this.mapWidth * (newMapIndex + 1));
        } else {
            // change mapFirst
            this.map00.setPositionX(this.mapWidth * (newMapIndex + 1));
        }
        this.mapIndex = newMapIndex;
        return true;
    },

当eyeX超出了屏幕的宽度，表达式parseInt(eyeX / this.mapWidth 将会获得一个大于0的值。我们将要使用newMapIndex来决定哪片地图需要移动以及多少像素需要移动。那么，我们要在每帧调用这个函数。

    update:function (dt) {
        var animationLayer = this.getParent().getChildByTag(TagOfLayer.Animation);
        var eyeX = animationLayer.getEyeX();
        this.checkAndReload(eyeX);
    }

最后，我们要在背景层的init的最后要调用scheduleUpdate函数。

 this.scheduleUpdate();

收尾

好。我们要完成最后的收尾工作。修改PlayScene的onEnter方法来添加层的标签(tag)，在游戏层中添加背景层和动画层。

    onEnter:function () {
        this._super();
        this.initPhysics();
        this.gameLayer = new cc.Layer();

        //add Background layer and Animation layer to gameLayer
        this.gameLayer.addChild(new BackgroundLayer(), 0, TagOfLayer.background);
        this.gameLayer.addChild(new AnimationLayer(this.space), 0, TagOfLayer.Animation);
        this.addChild(this.gameLayer);
        this.addChild(new StatusLayer(), 0, TagOfLayer.Status);

        this.scheduleUpdate();
    },

恭喜！你成功完成了这篇教程。运行并看看它。注意：如果你不想展示一个chipmunk刚体body的调试绘画信息。你可以放心地在创建PhysicsDebugNode下添加下列的代码：

this._debugNode.setVisible(false);

总结

在这篇教程，我们已经学到了TiledMap 和 display。这两个概念在你开发一个物理游戏是非常重要的。你可以在这里下载整个项目。

下一步

在下一篇教程中，我们将要在我们的游戏中添加金币和障碍物。在这篇教程里，我们将要学习如何重构我们的代码让它更具有扩展性。我们会在PlayScene类作清理并封装Coin和Rock两个类。继续在下篇教程里调整代码并开心地编程！

Cocos2d-JS 目录结构概览

理解目录结构

第一部分: 引擎相关文件

第二部分: 测试文件，游戏样本和模板

第三部分: 其他

查看内置样本

查看测试文件

浏览游戏样本

MoonWarrior

创建你的第一个 "Hello World" 工程

完成Parkour工程框架

游戏样本模板的代码分析

查看整个工程的文件

分析工程执行路径

让你的项目做一些小改动

隐藏你游戏屏幕左边角落的最大帧数

修改设计的分辨率大小

总结

下章简介

基础概念

层（Layer）

坐标系

锚点（Anchor Point）

动作（Action）

动画（Animation）

调度器（Scheduler）和定时器回调（Timer Callback）

事件管理器（EventManager）

制作你的第一个游戏场景

清理工作（Cleanup Work）

清理myApp.js

定义你的第一个场景-MenuScene

总结

从这里要去哪（Where to go from here）

介绍

背景层（Background Layer）

动画层（Gameplay Layer）/游戏层（Gameplay Layer)

状态层（Status Layer）/HUD层（HUD Layer）

动作编码（Coding in Action）

准备工作

游戏场景代码(PlayScene.js)

背景层编码(BackgroundLayer.js)

动画层编码（AnimationLayer.js）

状态层编码（StatusLayer.js）

总结

接下来去哪里

介绍

TexturePacker的介绍

用TexturePacker生成你自己的动画

在cocos2d-JS中加载动画资源文件

准备阶段

创建玩家动画

总结

学习方向

介绍

为什么选择Chipmunk？

在Cocos2d-JS中激活Chipmunk

准备工作

初始化Chipmunk 物理世界

在Runner 精灵中添加物理组件

调试和测试

总结

下一步

介绍

完成一些准备工作

设置资源和全局变量

激活Chipmunk调试绘画

TiledMap介绍

用TiledMap代替以前的背景

Scene Display介绍

移动背景层

收尾

总结

下一步

引言

准备

设置Resource和Globals

打包硬币和岩石到包含纹理图册的Spritesheet

TiledMap Object Layer的介绍

添加硬币Object Layer

添加岩石Object Layer