cocos2d-js中Hello World代码分析

上面我们介绍了cocos2d-js这个引擎的一些环境的配置之类的，我们在上面的文章中也介绍了，这个地方我们主要来接介绍一下cocos2d-js项目，在我们打开的时候Hello World这个界面的一些知识，当然我认为是知识。首先我们来看看我们项目的目录:

其实在这个目录中我们的关注点，可以放在main.js,src,project.json,config.json这几个文件上，要知道这个几个文件在整个项目中所起到的作用

首先是res这个文件夹是存放资源的，我们在项目中会用到各种各样的图片，我们就可以将这个文件存放到res这个文件夹里面，大家也可以看到，但是我们存放到文件夹中的文件是不能直接在项目中进行加载的，我们需要一个js文件来加载这个文件，这个res和src中的resource.js也是对应的，我们来看resource.js这个文件的代码:

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    CloseNormal_png : "res/CloseNormal.png",
    CloseSelected_png : "res/CloseSelected.png",
    item1_png:"res/1.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

这个地方我们使用到一个对象res，这个是一个关联的数组，其中键就是我们应该在项目中引用的，值后面的就是我们的资源图片，然后我们使用一个数组g_resources,来存储每一个键值对，于是我们在项目运行的过程中就会把g_resources这个数组加载进来，这样我们的图片就会被加载进来，那么图片何时会被加载进来，这个就要看我们整个项目的入口文件，也就是main.js,我们来瞧一瞧里面的源代码:

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(400, 250, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    //cc.LoaderScene.preload是预加载g_resources中的资源，加载之后执行匿名的回调函数
    
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

上面我们大致了解了，资源文件的一个从图片到加载到框架里面的过程。

 cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);

加载好了资源之后，就会执行里面的回调函数，也就是cc.director.runScene(new HelloWorldScence());我们将场景转换到了HelloWorldScene(),这个也就是我们在打开这个项目的时候，第一次出现的HelloWorldScene这个场景。那么我们看看这个场景是在哪里定义的，于是又来到了app.js：

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
       // cc.director.runScene(new cc.TransitionSlideInT(2,new SecondScence()));
    }
});

这个是我们定义场景的画面，其实我们可以这样来理解js中的各种画面的出现

首先是    场景Scene:

游戏里面画面的转换就是我们场景的转换，就像导演在拍戏一样，需要不同的场景。

然后是  层Layer

层分为很多种，我们可以设置背景层，在背景层上面我们有可以添加层，人物画面等等，其实层已经属于了节点，想了解节点，之后的文章中会继续的介绍。

我们场景里面添加层就等于导演在场景里面布置人物位置，物体的位置一样。

那么我们如何来定义一个层:

//在cocos2d-js提供了两个常用的LayerColor和LayerGardient，我们创建层是在层的内部的函数
//在这个层上面添加的东西,感觉层是在场景中定义的，并且所有的每一个画面都是以场景存在的
//然后层是放在场景上面，但是节点是存在层上，当然层也是可以在场景外面进行定义的

var PictureLayer=cc.Layer.extend({
	tree_sprite:null,
	//相当于是构造函数
	ctor:function(){
		//我们在这个里面可以定义节点，也可以定义另外的层,我们可以在上面定义一些变量然后在
		//这个里面进行初始化，那么这个里面的this也就是指本身这个类了
		
		this._super();
		this.tree_sprite=new cc.Sprite(res.item1_png);
		size=cc.director.getWinSize();
	    this.tree_sprite.attr({
			x: size.width / 2,
			y: size.height / 2,
			scale: 0.5,
			rotation: 180
		});
		/*this.tree_sprite.x=size.width/4;
		this.tree_sprite.y=size.height/4;*/
		this.addChild(this.tree_sprite,0);
        return true;
	}

});

我们还要知道，对于其它的我们结合app.js里面代码应该很清楚的知道，场景，层之间的关系，以及如何切换场景。