cocos2d-js中Hello World代码分析

前端之家收集整理的这篇文章主要介绍了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,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里面代码应该很清楚的知道,场景,层之间的关系,以及如何切换场景。

猜你在找的Cocos2d-x相关文章