天天看點

通過Cocos2d-html5庫自帶的../samples/tests檔案來學習Cocos2d-html5遊戲引擎

這學期要開設”web程式設計課”,總覺得做一個部落格或者是某某管理系統,雖然頗為考驗一個人的程式設計水準,卻很是無趣,是以我計劃做html5遊戲,遊戲畢竟對沒有接觸過程式設計的人來說是很神奇的物品(滿足筆者小小的虛榮心)。

在網上搜尋了很久,也沒有找到關于Cocos2d-html5的比較正式的文檔(不過關于Cocos2d-x的文檔倒是很多)。是以我決定不依靠教程也不依靠文檔,單單看引擎庫裡的tests代碼來學習該引擎,這應該會是一個比較有趣的體驗(雖然不一定會成功,但自學能力對于coder是非常重要的技能)。

前段時間剛剛看過一篇“如何學一門新技術”的文章。文章傳遞的思想是:如果你要學一門新技術,不要從最基礎的語言開始慢慢準備,那樣會磨光你的耐心,而是應該直接動手做你要做的工程,後期再來關注語言細節和基礎。放在Cocos2d-html5引擎學習上就是,雖然筆者對于JavaScript,html5,css3的了解甚少,但還是毅然拿起了引擎開幹,等過段時間,有需要了,再來好好補償基礎内容。

以上的内容僅僅是開篇的感想,以下才是幹貨。

首先看看tests檔案夾的内容:

通過Cocos2d-html5庫自帶的../samples/tests檔案來學習Cocos2d-html5遊戲引擎

1.檔案夾的内容是具體的測試檔案,先不考慮。

2.build.xml是編譯引擎生成的檔案清單報告。

3.main.js遊戲的入口

4.tests_resources-html5.js定義遊戲将要使用的資源的檔案。

5.tests-boot-html5.js引擎的配置檔案。

6.test_main.js該遊戲(測試例程)的主要結構檔案,類似于C++的main。

7.其它和jsb有關的内容,不考慮。

通過Cocos2d-html5庫自帶的../samples/tests檔案來學習Cocos2d-html5遊戲引擎

main.js的最後一行(63)表明遊戲從TestController(場景或層)開始。

考慮TestController這個類,

這個類繼承了LayerGradient,呈現了一個層,層的顔色是漸變的,層上有兩個菜單:第一個菜單有兩個菜單項(關閉按鈕,控制是否自動測試的開關按鈕),第二個菜單有對應不同測試項目的多個菜單項。還實作了滾動滑鼠和拖動滑鼠第二個菜單滾動的響應事件。(有關各個類,函數的具體内容,留待研究單個測試執行個體時考慮,現在主要把握遊戲邏輯)

如上述,遊戲啟動後,呈現了這樣一個層。

當我們點選第二個菜單中的任意一項時,會觸發菜單項的響應函數,生成目标測試例的場景,并将目前主場景替換為該場景,我們會在該場景中實作該測試例的所有操作。

考慮所有測試例場景有共性,是以我們實作一個TestScene 類并在該類中實作各個場景的共性功能,以供其它所有場景類繼承。

場景上有一個菜單,菜單上有一個傳回TestController層的菜單項。

考慮所有測試例的層有共性,是以實作一個BaseTestLayer實作所有層的共性功能,以供其它所有層繼承。

層上有,兩個代表測試内容的标題,一個菜單上面有3個菜單項,分别表示重新測試,下一個測試,上一個測試。

完成以上邏輯後,就可以一個個實作測試例了,主要是實作一個個層。

注意:我們在不同檔案中定義的變量,如果希望被其它檔案找到的話,就需要特别注意檔案的包含順序,如下圖:

通過Cocos2d-html5庫自帶的../samples/tests檔案來學習Cocos2d-html5遊戲引擎
通過Cocos2d-html5庫自帶的../samples/tests檔案來學習Cocos2d-html5遊戲引擎

後面的檔案可以找到前面的檔案定義的變量,但是前面的檔案時無法找到後面的檔案定義的變量,關于這個問題,初期困擾了筆者許久。

結束了外層邏輯的建立後,就可以一個一個的考慮測試例,來深刻的研究這個引擎。是以現在對于外層的這些類和函數不了解也沒有關系。

繼續閱讀