Cocos2d-JS工程中的文件結構

時間 2019-11-17

標籤 cocos2d cocos 工程文件結構欄目 Cocos2d-x 简体版

原文原文鏈接

res文件夾存放資源文件javascript

src文件夾是主要的程序代碼html

app.js是實現遊戲場景的JavaScript文件html5

resource.js在src文件夾中，定義資源對應的變量java

config.json保存模擬器運行配置信息web

project.json是項目的配置信息json

index.html是Web工程的首頁canvas

main.js與首頁index.html對應的JavaScript文件，負責啓動遊戲場景數組

index.html代碼：app

 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>

7~11行：meta信息是網頁基本信息，這些設置可以使得index.html網頁很好地在移動設備上顯示。this

23行：Canvas標籤，經過JavaScript 能夠在Canvas上繪製 2D 圖形，Cocos2d-JS在網頁運行的遊戲場景都是經過Canvas渲染出來的。

24行：導入JavaScript文件CCBoot.js，咱們不須要維護該文件。

25行：導入JavaScript文件main.js，咱們須要維護該文件

main.js代碼：

 1 cc.game.onStart = function(){
 2     cc.view.adjustViewPort(true);
 3     cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
 4     cc.view.resizeWithBrowserSize(true);
 5     //加載遊戲所需資源
 6     cc.LoaderScene.preload(g_resources, function () {
 7         cc.director.runScene(new HelloWorldScene());
 8     }, this);
 9 };
10 cc.game.run();

1行：啓動遊戲

cc.game是一個遊戲啓動對象

2~4行：設置遊戲視圖屬性

3行：設置遊戲視圖大小，涉及到屏幕適配問題，cc.ResolutionPolicy.SHOW_ALL是屏幕適配策略

g_resources參數是加載資源的數組，該數組是在src/resource.js文件中定義的

6行：運行HelloWorldScene場景，cc.director是導演對象

10行：cc.game.run()是運行遊戲啓動對象

project.json

 1 {
 2     "project_type": "javascript",
 3 
 4     "debugMode" : 1,
 5     "showFPS" : true,
 6     "frameRate" : 60,
 7     "id" : "gameCanvas",
 8     "renderMode" : 0,
 9     "engineDir":"frameworks/cocos2d-html5",
10 
11     "modules" : ["cocos2d"],
12 
13     "jsList" : [
14         "src/resource.js",
15         "src/app.js"
16     ]
17 }

5行：是否顯示幀率調試信息，幀率調試就是顯示在左下角文字信息。

6行：設置幀率爲60，即屏幕1/60秒刷新一次。

11行：加載遊戲引擎的模塊

13~15行：聲明須要加載的JavaScript文件，這裏的文件主要是由咱們編寫的，咱們每次添加一個JavaScript文件到工程中，就須要在此處添加聲明

config.json代碼：

 1 {
 2   "init_cfg": {
 3     "isLandscape": true,
 4     "name": "CocosJSGame",
 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  ...........
15   ]
16 }

2行：初始配置信息

3行：設置橫屏顯示仍是豎屏顯示

4行：設置模擬器上顯示的標題

五、6行：設置屏幕的寬和高

7行：設置文件入口代碼

app.js

 1 var HelloWorldLayer = cc.Layer.extend({
 2     sprite:null,
 3     ctor:function () {
 4         //////////////////////////////
 5         // 1. super init first
 6         this._super();
 7 　　　　//.....
 8        
 9         return true;
10     }
11 });
12 
13 var HelloWorldScene = cc.Scene.extend({
14     onEnter:function () {
15         this._super();
16         var layer = new HelloWorldLayer();
17         this.addChild(layer);
18     }
19 });