cocos2d-js中Hello World代码分析

概述上面我们介绍了cocos2d-js这个引擎的一些环境的配置之类的，我们在上面的文章中也介绍了，这个地方我们主要来接介绍一下cocos2d-js项目，在我们打开的时候Hello World这个界面的一些知识，当然我认为是知识。首先我们来看看我们项目的目录: 其实在这个目录中我们的关注点，可以放在main.js,src,project.json,config.json这几个文件上，要知道这个几个文件在

上面我们介绍了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-js中Hello World代码分析全部内容，希望文章能够帮你解决cocos2d-js中Hello World代码分析所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。