第一个Cocos2d-JS游戏

今天药忘吃喽~ 2022-08-02 13:44 198阅读 0赞

我们的编写的第一个Cocos2d-JS程序，命名为HelloJS，从该工程开始学习其它的内容。  
创建工程  
我们创建Cocos2d-JS工程可以通过Cocos2d-x提供的命令工具cocos实现，但这种方式不能与WebStorm或Cocos Code IDE集成开发工具很好地集成，不便于程序编写和调试。由于Cocos Code IDE工具是Cocos2d-x开发的专门为Cocos2d-JS和Cocos2d-x Lua开发设计的，因此使用Cocos Code IDE工具很方便创建Cocos2d-JS工程。  
首先我们需要在Cocos Code IDE工具中先配置JavaScript框架，打开Cocos Code IDE工具，选择菜单Window→Preferences，弹出对话框如下图所示，选择Cocos→JavaScript在右边的JavaScript Frameworks中选择<Cocos2d-JS引擎目录>。

![20150319183807502][]

配置JavaScript框架

JavaScript框架配置不需要每次都进行，只是在最开始的配置一下，但创建工程的时候，Cocos Code IDE工具会从这个JavaScript框架目录中创建工程文件。  
接下来我们就可以创建JavaScript工程了，选择菜单File→New→Project，如下图所示，弹出项目类型选择对话框。

![20150319183948126][]

项目类型选择对话框

我们选中Cocos JavaScript Project，然后点击Next按钮，弹出如下图所示的对话框。我们在Project Name项目中输入工程名称，Create Project in Workspace是在Workspace目录中创建工程，我们需要选中该项目，Create From Existing Resource项目选中可以让我们从已经存在的工程创建，现在我们不需要选中该项目。  
选择完成点击Next按钮进入到如下图所示配置运行环境对话框，在该对话框中我们可以配置项目运行时信息。Orientation项目是配置模拟器的朝向，其中landscape是横屏显示，portriat是竖屏显。Desktop Runtime Settings中的Title是设置模拟器的标题，Desktop Windows initialize Size是设置模拟器的大小。Add Native Codes是设置添加本地代码到工程，在本来中我们不需要添加本地代码。最后点击Finish按钮完成创建操作，创建好工程之后，如下图所示。

![20150319183833274][]

新建项目对话框

![20150319183843336][]

配置运行环境对话框

![20150319184024194][]

创建工程成功界面

Cocos Code IDE中运行  
创建好工程后我们可以测试一下，在左边的工程导航面板中选中index.html文件，右键菜单中选择Run As→Cocos JSBinding运行我们刚刚创建的工程，运行结果如下图所示。

![20150319184035878][]

运行工程界面

我们主要编写的程序代码是在src目录下，在本例中app.js文件负责处理主要的如上图场景界面逻辑。如果我们想调试程序，可以设置断点，如下图所示，点击行号之前的位置，设置断点。

![20150319184055316][]

设置断点

调试运行过程，右键菜单中选择Debug As→Cocos JSBinding菜单。如下图所示，程序运行到第32行挂起，并进入调试视图，在调试视图中我们可以查看程序运行的堆栈、变量、断点、计算表达式和单步执行程序等操作。

![20150319184106345][]

运行到断点挂起

在调试视图中调试工具栏的按钮，主要调试按钮说明如下图所示。

![20150319184116688][]

调试工具栏按钮

WebStorm中运行  
Cocos Code IDE工具提供的运行是本地运行，即Cocos2d-JS程序通过JSB在本地运行。如果我们需要测试Web浏览器上运行情况，需要使用WebStorm工具，由于我们已经在Cocos Code IDE创建了工程我们不需要再创建了，但是需要进入到WebStorm中进行设置，创建文件在本地WebStorm工程，为了能与Cocos Code IDE共用相同工程我们需要设置WebStorm的Project Root为Cocos Code IDE的Workspace目录。  
设置完成界面如图下所示，其中的HelloJS是我们要运行的工程，右键选择HelloJS中的index.html文件就可以运行了，过。运行结果如下图所示。

![20150319184128653][]

设置完成界面

![20150319184155391][]

在浏览器中运行

工程文件结构  
我们创建的HelloJS工程已经能够运行起来了，下面我们介绍一下HelloJS工程中的文件结构，我们使用Cocos Code IDE打开HelloJS工程，左侧的导航面板如下图所示。

![20150319184206077][]

HelloJS工程中的文件结构

在上图所示导航面板中，res文件夹存放资源文件的，src文件夹是主要的程序代码，其中的app.js是实现游戏场景的JavaScript文件，resource.js定义资源对应的变量。HelloJS根目录下还有config.json、project.json、index.html和main.js，config.json保存模拟器运行配置信息，在我们创建工程时候生成，project.json是项目的配置信息，index.html是Web工程的首页，main.js与首页index.html对应的JavaScript文件。  
代码解释  
HelloJS工程中有很多文件下面我们详细解释一下它们内部的代码：   
  
  
1、index.html文件  
index.html文件只有在Web浏览器上运行才会启动它，index.html代码如下：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.      **<****meta** charset="utf-8"**>**  
5.      **<****title****>**Cocos2d-html5 Hello World test**</****title****>**  
6.      **<****link** rel="icon" type="image/GIF" href="res/favicon.ico"**/>**  
7.      **<****meta** name="apple-mobile-web-app-capable" content="yes"**/>**             ①  
8.      **<****meta** name="full-screen" content="yes"**/>**  
9.      **<****meta** name="screen-orientation" content="portrait"**/>**  
10.     **<****meta** name="x5-fullscreen" content="true"**/>**  
11.     **<****meta** name="360-fullscreen" content="true"**/>**                          ②  
12.     **<****style****>**  
13.         body, canvas, div \{  
14.             -moz-user-select: none;  
15.             -webkit-user-select: none;  
16.             -ms-user-select: none;  
17.             -khtml-user-select: none;  
18.             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
19.         \}  
20.     **</****style****>**  
21. **</****head****>**  
22. **<****body** style="padding:0; margin: 0; background: \#000;"**>**  
23. **<****canvas** id="gameCanvas" width="800" height="450"**>****</****canvas****>**                      ③  
24. **<****script** src="frameworks/cocos2d-html5/CCBoot.js"**>****</****script****>**                      ④  
25. **<****script** src="main.js"**>****</****script****>**                                             ⑤  
26. **</****body****>**  
27. **</****html****>**

上述代码第①~②行是设置网页的meta信息，meta信息是网页基本信息，这些设置能够使得index.html网页很好地在移动设备上显示。  
第③行代码放置一个canvas标签，canvas标签是HTML5提供的，通过JavaScript 可以在Canvas上绘制 2D 图形，Cocos2d-JS在网页运行的游戏场景都是通过Canvas渲染出来的，Cocos2d-JS的本地运行游戏场景的渲染是通过OpenGL渲染出来的，事实上HTML5也有类似于OpenGL渲染技术，它是WebGL但是考虑到浏览器的支持程度不同，Cocos2d-JS没有采用WebGL渲染技术而是Canvas渲染，虽然Canvas渲染速度不及WebGL，但是一般的网页游戏都能满足要求。  
第④行代码是导入JavaScript文件CCBoot.js，我们不需要维护该文件。第⑤行代码是导入JavaScript文件main.js，我们需要维护该文件。  
2、main.js文件  
main.js负责启动游戏场景，无论Web浏览器运行还是本地运行都是通过该文件启动游戏场景的，main.js代码如下：  
c

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  c.game.onStart = function()\{                                                ①  
2.      cc.view.adjustViewPort(true);                                           ②  
3.      cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW\_ALL);            ③  
4.      cc.view.resizeWithBrowserSize(true);                                    ④  
5.      //load resources  
6.      cc.LoaderScene.preload(g\_resources, function () \{                           ⑤  
7.          cc.director.runScene(new HelloWorldScene());                            ⑥  
8.      \}, this);  
9.  \};  
10. cc.game.run();                                                          ⑦

上述代码第①行是启动游戏，cc.game是一个游戏启动对象。代码第②~④行是设置游戏视图属性，其中第③行是设置游戏视图大小，它涉及到屏幕适配问题，cc.ResolutionPolicy.SHOW\_ALL是屏幕适配策略。  
第⑤行代码是加载游戏场景所需要资源，其中g\_resources参数是加载资源的数组，该数组是在src/resource.js文件中定义的。第⑥行代码是运行HelloWorldScene场景，cc.director是导演对象，运行HelloWorldScene场景会进入到该场景。  
第⑦行代码cc.game.run()是运行游戏启动对象。  
3、project.json文件  
项目配置信息project.json文件代码如下：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \{  
2.      "project\_type": "javascript",  
3.    
4.    
5.      "debugMode" : 1,  
6.      "showFPS" : true,                                                   ①  
7.      "frameRate" : 60,                                                   ②  
8.      "id" : "gameCanvas",  
9.      "renderMode" : 0,  
10.     "engineDir":"frameworks/cocos2d-html5",  
11.   
12.   
13.     "modules" : \["cocos2d"\],                                                ③  
14.   
15.   
16.     "jsList" : \[                                                                ④  
17.         "src/resource.js",                                              ⑤  
18.         "src/app.js"                                                        ⑥  
19.     \]  
20. \}

project.json文件采用JSON字符串表示，我们重点关注有标号的语句，其中第①行代码是设置是否显示帧率调试信息，帧率调试就是显示在左下角文字信息。第②行代码是设置帧率为60，即屏幕1/60秒刷新一次。第③行代码是加载游戏引擎的模块，Cocos2d-JS引擎有很多模块，模块的定义是在HelloJS\\frameworks\\cocos2d-html5\\moduleConfig.json，我们在资源管理器中才能看到该文件，这些模块在场景启动的时候加载，因此一定要根据需要导入，否则造成资源的浪费。例如我们再添加一个chipmunk物理引擎模块，代码第③可以修改如下形式：  
"modules" : \["cocos2d","chipmunk"\]  
代码第④～⑥行是声明需要加载的JavaScript文件，这里的文件主要是有我们编写的，我们每次添加一个JavaScript文件到工程中，就需要在此处添加声明。  
4、config.json文件  
只有在Cocos Code IDE中运行才需要该文件，它是配置模拟器运行信息的，该文件在工程发布时候和Web环境下运行都没有用处。但如果想Cocos Code IDE中运行，并改变模拟器大小和方向，可以修改该文件，config.json文件代码如下：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \{  
2.    "init\_cfg": \{                                                             ①  
3.      "isLandscape": true,                                                ②  
4.      "name": "HelloJS",                                                  ③  
5.      "width": 960,                                                       ④  
6.      "height": 640,                                                      ⑤  
7.      "entry": "main.js",                                                 ⑥  
8.      "consolePort": 6050,  
9.      "debugPort": 5086,  
10.     "forwardConsolePort": 10088,  
11.     "forwardUploadPort": 10090,  
12.     "forwardDebugPort": 10086  
13.   \},  
14.   "simulator\_screen\_size": \[  
15.     \{  
16.       "title": "iPhone 3Gs (480x320)",  
17.       "width": 480,  
18.       "height": 320  
19.     \},  
20.     … …  
21.   \]  
22. \}

上述代码第①行是初始配置信息，其中第②行是设置横屏显示还是竖屏显示，第③行代码name属性是设置模拟器上显示的标题，第④和⑤行是设置屏幕的宽和高，第⑥行代码是设置入口文件。  
5、resource.js文件  
resource.js文件是在src文件夹中，处于该文件夹中的文件是由我们来维护的。在resource.js文件中定义资源对应的变量。resource.js文件代码如下：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  var res = \{                                                                 ①  
2.      HelloWorld\_png : "res/HelloWorld.png",  
3.      CloseNormal\_png : "res/CloseNormal.png",  
4.      CloseSelected\_png : "res/CloseSelected.png"  
5.  \};  
6.    
7.    
8.  var g\_resources = \[\];                                                   ②  
9.  for (var i in res) \{  
10.     g\_resources.push(res\[i\]);                                               ③  
11. \}

上述代码第①行是定义JSON变量res，它为每一个资源文件定义一个别名，在程序中访问资源，资源名不要“写死\[ 写死被称为硬编码（英语：Hard Code或Hard Coding），硬编码指的是在软件实作上，把输出或输入的相关参数（例如：路径、输出的形式或格式）直接以常量的方式书写在源代码中，而非在运行时期由外界指定的设置、资源、数据或格式做出适当回应。——引自于维基百科 http://zh.wikipedia.org/zh-cn/%E5%AF%AB%E6%AD%BB  
\]”，而是通过一个可配置的别名访问，这样当环境变化之后修改起来很方便。  
第②行代码是定义资源文件集合变量g\_resources，它的的内容是通过代码第③行把res变量中的资源文件循环添加到g\_resources中。当然我们可以采用下面逐一添加：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  var g\_resources = \[   
2.      //image  
3.      res.HelloWorld\_png,  
4.      res.CloseNormal\_png,  
5.      "res/CloseSelected.png"  
6.  \];

放在g\_resources变量这的资源，会在场景其中的时候加载的，在Web浏览器下运行如果加载的资源找不到会报出404错误。  
6、app.js文件  
app.js文件是在src文件夹中，处于该文件夹中的文件是由我们来维护的，我们看到的图3-27所示的场景是在app.js中实现的，app.js代码如下：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  var HelloWorldLayer = cc.Layer.extend(\{                                     ①  
2.      sprite:null,                            //定义一个精灵属性  
3.      ctor:function () \{                      //构造方法  
4.          this.\_super();                  //初始化父类  
5.          var size = cc.winSize;          //获得屏幕大小  
6.          var closeItem = new cc.MenuItemImage(                               ②  
7.              res.CloseNormal\_png,  
8.              res.CloseSelected\_png,  
9.              function () \{  
10.                 cc.log("Menu is clicked!");  
11.             \}, this);                                                     
12.         closeItem.attr(\{  
13.             x: size.width - 20,  
14.             y: 20,  
15.             anchorX: 0.5,  
16.             anchorY: 0.5  
17.         \});                                                                 ③  
18.   
19.   
20.         var menu = new cc.Menu(closeItem);  //通过closeItem菜单项创建菜单对象  
21.         menu.x = 0;                                                     ④  
22.         menu.y = 0;                                                     ⑤  
23.         this.addChild(menu, 1); //把菜单添加到当前层上  
24.   
25.   
26.         var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38); //创建标签对象  
27.         helloLabel.x = size.width / 2;  
28.         helloLabel.y = 0;  
29.         this.addChild(helloLabel, 5);  
30.         this.sprite = new cc.Sprite(res.HelloWorld\_png); //创建精灵对象  
31.         this.sprite.attr(\{  
32.             x: size.width / 2,  
33.             y: size.height / 2,  
34.             scale: 0.5,  
35.             rotation: 180  
36.         \});                                                                 ⑥  
37.         this.addChild(this.sprite, 0);  
38.   
39.   
40.         this.sprite.runAction(  
41.             cc.sequence(  
42.                 cc.rotateTo(2, 0),  
43.                 cc.scaleTo(2, 1, 1)  
44.             )  
45.         );  //在精灵对象上执行一个动画  
46.         helloLabel.runAction(  
47.             cc.spawn(  
48.                 cc.moveBy(2.5, cc.p(0, size.height - 40)),  
49.                 cc.tintTo(2.5,255,125,0)  
50.             )  
51.         );  //在标签对象上执行一个动画  
52.         return true;  
53.     \}  
54. \});  
55.   
56.   
57. var HelloWorldScene = cc.Scene.extend(\{                                     ⑦  
58.     onEnter:function () \{                                                   ⑧  
59.         this.\_super();                                                  ⑨  
60.         var layer = new HelloWorldLayer();                                  ⑩  
61.         this.addChild(layer);   //把HelloWorldLayer层放到HelloWorldScene场景中  
62.     \}  
63. \});

我们在app.js文件中声明了两个类HelloWorldScene（见代码第①行）和HelloWorldLayer（见代码第⑦行），然后通过HelloWorldScene实例化HelloWorldLayer，见代码第⑩行。HelloWorldScene是场景，HelloWorldLayer是层，场景包含若干个层，关于场景和层我们会在下一节再具体介绍。  
另外，上述代码第②行是是创建一个图片菜单项对象，点击该菜单项的时候回调function方法。  
提示  cc.MenuItemImage中res.CloseNormal\_png和res.CloseSelected\_png变量是在resource.js文件中定义的资源文件别名，以后res.开通变量都是资源文件的别名，不再详细解释。

第③行代码是菜单项对象的位置，其中closeItem.attr(\{…\})语句可以设置多个属性，类似的还有代码第⑥行，采用JSON格式表示，x属性表示x轴坐标，y属性表示y轴坐标，anchorX表示x轴锚点，anchorY表示y轴锚点，关于锚点的概念后面小节介绍。关于精灵x和y轴属性，我们也可以通过代码④和⑤方式设置。

还有上述代码第⑧行是声明onEnter方法，它是在进入HelloWorldScene场景时候回调的。onEnter方法是从重写父类的方法，我们必需通过this.\_super()语句调用父类的onEnter方法，见代码第⑨行所示。

源引：http://blog.csdn.net/tonny\_guan/article/details/44462165

[20150319183807502]: /images/20220731/3b1be7b283d743029e363bd1b0086631.png
[20150319183948126]: /images/20220731/299dfe9447ad4650b7b8511c37d84a75.png
[20150319183833274]: /images/20220731/50a6617c671944afb1d1d1c1b3804ed5.png
[20150319183843336]: /images/20220731/6a099093ae4246e799accff3eeffbc58.png
[20150319184024194]: /images/20220731/03dd0e4703154654ac25ff240783b77c.png
[20150319184035878]: /images/20220731/d0d58f18f998452594957354584bc1cf.png
[20150319184055316]: /images/20220731/ee64874d1bf44e7684e7e5bb90044778.png
[20150319184106345]: /images/20220731/a82a1bf322e6492ba16d1e7df7467555.png
[20150319184116688]: /images/20220731/323aea72698b43eb8afa95a593901c4e.png
[20150319184128653]: /images/20220731/7b4e1d6b51ea47c6a6b26104b5e7717d.png
[20150319184155391]: /images/20220731/f8595cadde65455a94a9614af251653f.png
[20150319184206077]: /images/20220731/db0c28a0f21d408bb715410009ddab6c.png
[view plain]: http://blog.csdn.net/tonny_guan/article/details/44462165#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/623497
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/623497/fork