第一個Cocos2d-JS遊戲
咱們的編寫的第一個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引擎目錄>。
javascript
配置JavaScript框架html
JavaScript框架配置不須要每次都進行，只是在最開始的配置一下，但建立工程的時候，Cocos Code IDE工具會從這個JavaScript框架目錄中建立工程文件。
接下來咱們就能夠建立JavaScript工程了，選擇菜單File→New→Project，以下圖所示，彈出項目類型選擇對話框。
html5
項目類型選擇對話框java
咱們選中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按鈕完成建立操做，建立好工程以後，以下圖所示。
web
新建項目對話框json
配置運行環境對話框canvas
建立工程成功界面數組
Cocos Code IDE中運行
建立好工程後咱們能夠測試一下，在左邊的工程導航面板中選中index.html文件，右鍵菜單中選擇Run As→Cocos JSBinding運行咱們剛剛建立的工程，運行結果以下圖所示。
瀏覽器
運行工程界面微信
咱們主要編寫的程序代碼是在src目錄下，在本例中app.js文件負責處理主要的如上圖場景界面邏輯。若是咱們想調試程序，能夠設置斷點，以下圖所示，點擊行號以前的位置，設置斷點。
設置斷點
調試運行過程，右鍵菜單中選擇Debug As→Cocos JSBinding菜單。以下圖所示，程序運行到第32行掛起，並進入調試視圖，在調試視圖中咱們能夠查看程序運行的堆棧、變量、斷點、計算表達式和單步執行程序等操做。
運行到斷點掛起
在調試視圖中調試工具欄的按鈕，主要調試按鈕說明以下圖所示。
調試工具欄按鈕
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文件就能夠運行了，過。運行結果以下圖所示。
設置完成界面
在瀏覽器中運行
工程文件結構
咱們建立的HelloJS工程已經可以運行起來了，下面咱們介紹一下HelloJS工程中的文件結構，咱們使用Cocos Code IDE打開HelloJS工程，左側的導航面板以下圖所示。
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工程中有不少文件下面咱們詳細解釋一下它們內部的代碼：
一、index.html文件
index.html文件只有在Web瀏覽器上運行纔會啓動它，index.html代碼以下：
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos2d-html5 Hello World test</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> ①
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/> ②
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<canvas id="gameCanvas" width="800" height="450"></canvas> ③
<script src="frameworks/cocos2d-html5/CCBoot.js"></script> ④
<script src="main.js"></script> ⑤
</body>
</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，咱們須要維護該文件。
二、main.js文件
main.js負責啓動遊戲場景，不管Web瀏覽器運行仍是本地運行都是經過該文件啓動遊戲場景的，main.js代碼以下：
c
[html] view plaincopy
c.game.onStart = function(){ ①
cc.view.adjustViewPort(true); ②
cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); ③
cc.view.resizeWithBrowserSize(true); ④
//load resources
cc.LoaderScene.preload(g_resources, function () { ⑤
cc.director.runScene(new HelloWorldScene()); ⑥
}, this);
};
cc.game.run(); ⑦
上述代碼第①行是啓動遊戲，cc.game是一個遊戲啓動對象。代碼第②~④行是設置遊戲視圖屬性，其中第③行是設置遊戲視圖大小，它涉及到屏幕適配問題，cc.ResolutionPolicy.SHOW_ALL是屏幕適配策略。
第⑤行代碼是加載遊戲場景所須要資源，其中g_resources參數是加載資源的數組，該數組是在src/resource.js文件中定義的。第⑥行代碼是運行HelloWorldScene場景，cc.director是導演對象，運行HelloWorldScene場景會進入到該場景。
第⑦行代碼cc.game.run()是運行遊戲啓動對象。
三、project.json文件
項目配置信息project.json文件代碼以下：
[html] view plaincopy
{
"project_type": "javascript",
"debugMode" : 1,
"showFPS" : true, ①
"frameRate" : 60, ②
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"frameworks/cocos2d-html5",
"modules" : ["cocos2d"], ③
"jsList" : [ ④
"src/resource.js", ⑤
"src/app.js" ⑥
]
}
project.json文件採用JSON字符串表示，咱們重點關注有標號的語句，其中第①行代碼是設置是否顯示幀率調試信息，幀率調試就是顯示在左下角文字信息。第②行代碼是設置幀率爲60，即屏幕1/60秒刷新一次。第③行代碼是加載遊戲引擎的模塊，Cocos2d-JS引擎有不少模塊，模塊的定義是在HelloJS\frameworks\cocos2d-html5\moduleConfig.json，咱們在資源管理器中才能看到該文件，這些模塊在場景啓動的時候加載，所以必定要根據須要導入，不然形成資源的浪費。例如咱們再添加一個chipmunk物理引擎模塊，代碼第③能夠修改以下形式：
"modules" : ["cocos2d","chipmunk"]
代碼第④～⑥行是聲明須要加載的JavaScript文件，這裏的文件主要是有咱們編寫的，咱們每次添加一個JavaScript文件到工程中，就須要在此處添加聲明。
四、config.json文件
只有在Cocos Code IDE中運行才須要該文件，它是配置模擬器運行信息的，該文件在工程發佈時候和Web環境下運行都沒有用處。但若是想Cocos Code IDE中運行，並改變模擬器大小和方向，能夠修改該文件，config.json文件代碼以下：
[html] view plaincopy
{
"init_cfg": { ①
"isLandscape": true, ②
"name": "HelloJS", ③
"width": 960, ④
"height": 640, ⑤
"entry": "main.js", ⑥
"consolePort": 6050,
"debugPort": 5086,
"forwardConsolePort": 10088,
"forwardUploadPort": 10090,
"forwardDebugPort": 10086
},
"simulator_screen_size": [
{
"title": "iPhone 3Gs (480x320)",
"width": 480,
"height": 320
},
… …
]
}
上述代碼第①行是初始配置信息，其中第②行是設置橫屏顯示仍是豎屏顯示，第③行代碼name屬性是設置模擬器上顯示的標題，第④和⑤行是設置屏幕的寬和高，第⑥行代碼是設置入口文件。
五、resource.js文件
resource.js文件是在src文件夾中，處於該文件夾中的文件是由咱們來維護的。在resource.js文件中定義資源對應的變量。resource.js文件代碼以下：
[html] view plaincopy
var res = { ①
HelloWorld_png : "res/HelloWorld.png",
CloseNormal_png : "res/CloseNormal.png",
CloseSelected_png : "res/CloseSelected.png"
};
var g_resources = []; ②
for (var i in res) {
g_resources.push(res[i]); ③
}
上述代碼第①行是定義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 plaincopy
var g_resources = [
//image
res.HelloWorld_png,
res.CloseNormal_png,
"res/CloseSelected.png"
];
放在g_resources變量這的資源，會在場景其中的時候加載的，在Web瀏覽器下運行若是加載的資源找不到會報出404錯誤。
六、app.js文件
app.js文件是在src文件夾中，處於該文件夾中的文件是由咱們來維護的，咱們看到的圖3-27所示的場景是在app.js中實現的，app.js代碼以下：
[html] view plaincopy
var HelloWorldLayer = cc.Layer.extend({ ①
sprite:null, //定義一個精靈屬性
ctor:function () { //構造方法
this._super(); //初始化父類
var size = cc.winSize; //得到屏幕大小
var closeItem = new cc.MenuItemImage( ②
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
}); ③
var menu = new cc.Menu(closeItem); //經過closeItem菜單項建立菜單對象
menu.x = 0; ④
menu.y = 0; ⑤
this.addChild(menu, 1); //把菜單添加到當前層上
var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38); //建立標籤對象
helloLabel.x = size.width / 2;
helloLabel.y = 0;
this.addChild(helloLabel, 5);
this.sprite = new cc.Sprite(res.HelloWorld_png); //建立精靈對象
this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
}); ⑥
this.addChild(this.sprite, 0);
this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
)
); //在精靈對象上執行一個動畫
helloLabel.runAction(
cc.spawn(
cc.moveBy(2.5, cc.p(0, size.height - 40)),
cc.tintTo(2.5,255,125,0)
)
); //在標籤對象上執行一個動畫
return true;
}
});
var HelloWorldScene = cc.Scene.extend({ ⑦
onEnter:function () { ⑧
this._super(); ⑨
var layer = new HelloWorldLayer(); ⑩
this.addChild(layer); //把HelloWorldLayer層放到HelloWorldScene場景中
}
});
咱們在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方法，見代碼第⑨行所示。
更多內容請關注最新Cocos圖書《Cocos2d-x實戰：JS卷——Cocos2d-JS開發》
本書交流討論網站：http://www.cocoagame.net
歡迎加入Cocos2d-x技術討論羣：257760386
更多精彩視頻課程請關注智捷課堂Cocos課程：http://v.51work6.com
智捷課堂現推出Cocos會員，敬請關注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0
《Cocos2d-x實戰 JS卷》現已上線，各大商店均已開售：
京東：http://item.jd.com/11659698.html
歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息
- 1. pygame第一個小遊戲
- 2. 第一個遊戲總結
- 3. 第一個2D遊戲
- 4. cocos2dx第一個遊戲項目helloworld（一）
- 5. Java寫的第一個小遊戲(一)
- 6. 修復第一個遊戲的小bug以及完成第二個遊戲。
- 7. 第一個windows 小遊戲 貪吃蛇
- 8. 打飛機！----我的第一個遊戲
- 9. 第一個python+pygame小遊戲
- 10. 00008第一個java桌面小遊戲
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • RxJava操作符（一）Creating Observables
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. pygame第一個小遊戲
- 2. 第一個遊戲總結
- 3. 第一個2D遊戲
- 4. cocos2dx第一個遊戲項目helloworld（一）
- 5. Java寫的第一個小遊戲(一)
- 6. 修復第一個遊戲的小bug以及完成第二個遊戲。
- 7. 第一個windows 小遊戲 貪吃蛇
- 8. 打飛機！----我的第一個遊戲
- 9. 第一個python+pygame小遊戲
- 10. 00008第一個java桌面小遊戲