cocos2d-html5学习笔记（一）--游戏入口

 

cocos2d-html5学习笔记（一）--游戏入口

分类：  cocos2d-html5  javascript2012-06-29 20:06  2994人阅读  评论(3)  收藏  举报

function layer object 游戏 null 引擎

cocos2d-html5是一个cocos2d系列的一个新成员，目前最新的版本是v2.0。关于这个游戏引擎的详细介绍我就不说了，想了解的话请到官方网站：cocos2d-html5。这是我第一次接触游戏引擎，今天就对这个游戏引擎进行了一点小探究。

首先简要讲解一些游戏的基本知识：游戏有一个或多个场景（Scene），每个场景又由多个图层组成，每个图层由文本（Label）、图片（Menu、Sprite等）组成。游戏由导演（Director）负责组织和协调这些元素。（详细的请看我转载的一篇博文：cocos2d-html5教程之重要概念）

Helloword讲解

探讨游戏入口之前，我们先新建一个场景。本文将官方的Helloworld示例简化了一下，修改了myApp.js。

[javascript]  view plain copy

1. //定义（新建）一个图层：Helloworld  
2. var Helloworld = cc.Layer.extend({  
3.     sprite: null,  
4.     helloLabel: null,  
5.   
6.     init: function () {  
7.         //  
8.         // 1. 调用父类的同名方法，初始化父类  
9.         this._super();  
10.   
11.         /  
12.         // 2. 添加一个关闭菜单（在右下角）  
13.         //  
14.         // 获得画布的大小，其实可以理解为获得游戏的边界大小  
15.         var size = cc.Director.getInstance().getWinSize();  
16.   
17.         // 关闭菜单的菜单项  
18.         var closeItem = cc.MenuItemImage.create(  
19.             "res/CloseNormal.png",  
20.             "res/CloseSelected.png",  
21.             this,  
22.             function () {  
23.                 history.go(-1);  
24.             });  
25.   
26.         //新建一个菜单，菜单有一个菜单项  
27.         var menu = cc.Menu.create(closeItem);  
28.         menu.setPosition(cc.PointZero());   //将菜单放到原点（注意，这里的原点在左下角）  
29.         this.addChild(menu, 1);     //将菜单添加到Helloworld这个层里  
30.         closeItem.setPosition(cc.p(size.width - 20, 20));   //设置菜单项的位置  
31.   
32.         /  
33.         // 3. add your codes below...  
34.         // 添加文本“Hello world”到本层里去  
35.         // 新建文本  
36.         this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38);  
37.         this.helloLabel.setAnchorPoint(cc.p(0.5,0)); //将锚点设置到：中下  
38.         // position the label on the center of the screen  
39.         this.helloLabel.setPosition(cc.p(size.width / 2, 0));  
40.         // add the label as a child to this layer  
41.         this.addChild(this.helloLabel, 5);  
42.   
43.   
44.         // 添加一张图片  
45.         this.sprite = cc.Sprite.create("res/HelloWorld.png");  
46.         this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));  
47.   
48.         this.addChild(this.sprite, 0);  
49.   
50.         return true;  
51.     }  
52. });  
53.   
54. //定义(新建)一个场景，里面有一个图层  
55. var HelloWorldScene = cc.Scene.extend({  
56.     //进入场景时  
57.     onEnter:function () {  
58.         this._super();  
59.         var layer = new Helloworld();  
60.         layer.init();  
61.         this.addChild(layer);  
62.     }  
63. });  

运行效果:

 

游戏入口

我们已经有一个场景了，那么这个场景是怎样呈现出来的？

首先，将定义HelloWorldScene的js文件加载进来。在cocos2d.js中appFiles中添加

[javascript]  view plain copy

1. var c = {  
2.         COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug  
3.         box2d:false,  
4.         showFPS:true,  
5.         frameRate:60,  
6.         tag:'gameCanvas', //the dom element to run cocos2d on  
7.         engineDir:'../lib/cocos2d/',  
8.         //SingleEngineFile:'',  
9.         appFiles:[  
10.             'src/resource.js',  
11.             'src/myApp.js'//add your own files in order here  
12.         ]  
13.     };  

可以看到，这里还加载了resource.js，这个是预加载资源用的。资源开始加载从main.js这一句开始：cc.Loader.shareLoader().preload(g_ressources);

一切从这里开始：var myApp = new cocos2dApp(HelloWorldScene);

 这条语句在main.js最后一行;这一句相当于调用了cocos2dApp这个方法，并将HelloWorldScene作为参数传进去(其实cocos2dApp是一个类)。在cocos2dApp中，ctor是构造函数，初始化一些东西和预加载资源（ch5中的资源一定要预加载，不然会在使用资源的时候出现错误）。初始化和加载完资源后，applicationDidFinishLaunching这个方法就会被调用。在applicationDidFinishLaunching这个方法中，我们重点要看最后这一句：

 

[javascript]  view plain copy

1. // run  
2.         director.runWithScene(new this.startScene());  

这里this.startScene=HelloWorldScene; 就这样，我们的场景就呈现到我们的眼前。

创建我们自己的场景

Allenice.js

[javascript]  view plain copy

1. var AlleniceLayer = cc.Layer.extend({  
2.     init: function () {  
3.        this._super();  
4.         var winSize=cc.Director.getInstance().getWinSize();  
5.   
6.         var label=cc.LabelTTF.create("Allencie","Arial",48);  
7.         label.setPosition(cc.p(winSize.width/2,winSize.height/2));  
8.         this.addChild(label);  
9.   
10.         return true;  
11.     }  
12. });  
13.   
14. var AlleniceScene = cc.Scene.extend({  
15.     //进入场景时  
16.     onEnter:function () {  
17.         this._super();  
18.         var layer = new AlleniceLayer();  
19.         layer.init();  
20.         this.addChild(layer);  
21.     }  
22. });  

加载js文件：

[javascript]  view plain copy

1. appFiles:[  
2.            'src/resource.js',  
3.            'src/Allenice.js',  
4.            'src/myApp.js'//add your own files in order here  
5.        ]  

修改main.js

[javascript]  view plain copy

1. var myApp = new cocos2dApp(AlleniceScene);  

运行效果：

源码下载：http://t.cn/zlmzhFQ?u=1895120762&m=3504261167868399