上面我们介绍了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里面代码应该很清楚的知道,场景,层之间的关系,以及如何切换场景。