Cocos2d-JS連載之認識Cocos2d-JS和環境搭建及demo演示

由于工作需要,近期將記錄Cocos2d-JS的學習實戰,Spring源碼還是會繼續。進入cocos2d-JS的學習,對于不會客戶端開發(Android,IOS),會JS的程序員來說Cocos2d-JS<b>游戲引擎</b>的出現真是福音,它是個跨全平臺的游戲引擎。其中有兩個概念:

  • Cocos2d-HTML5
  • Cocos2d-x JavaScript Bindings(JSB)

其中這兩者提供的js的api是一致的,Cocos2d-html5是Cocos2d-JS的一個重要模塊,是一個面向Web的游戲引擎,采用Canvas或者WebGL渲染,并完全兼容HTML5規范,如果您只關注于純Web游戲開發,那么您還可以選擇Cocos2d-JS Lite的版本。 Cocos2d-x JavaScript Bindings(JSB)版是C++實現。可以把 Cocos2d-x JavaScript Bindings(JSB)理解成一個和C++的橋。就像JVM是C++寫的一樣,對外提供的是JAVA的接口。Cocos2d-JS是二者的融合。這是Cocos官網cocos2d-js github的地址。那么到底什么區別的呢?我理解的就是只在web運行的話Cocos2d-html5足矣,但是你要打包成app(Android和IOS還有WIN)的話然后只用js語言開發那么需要的是Cocos2d-JS,其中包含了 Cocos2d-x JavaScript Bindings(JSB)??匆幌鹿倬W的圖片

官網對于現在框架的圖解

看一下Cocos2d-JS下載下來的引擎包的目錄。我下載的是github上的master分支。
看一下
cocos2d-js-master

  • 其中framwork就是 Cocos2d-HTML5和js-bindings兩者。
framwork目錄
  • docs是文檔,都是MarkDown格式的 即.md結尾的。
  • samples是官方提供的例子 對以后的學習非常重要
samples/js-tests
  • templates是官方提供的模板,在cocos命令創建項目的時候會直接把templates的東西copy過去 作為你的新建項目。
  • tools目錄就是打包成app的時候需要到工具集。其中還有consle 就是cocos的終端控制臺,運行一些cocos命令。
  • 最下面setup.py的文件是我們安裝cocos時需要用到的文件。

下面看一下開發環境的搭建,我的是windows版的。

  • 安裝Python環境官方是指定2.7版本的Python 下載地址
  • 配置Python的環境變量 path中加入即可(exe安裝文件不需要設置手動設置環境變量)
Python環境變量設置

cmd運行

Python命令嘗試

然后進入cmd中進入下載下來的cocos2d-js-master的目錄運行python setup.py文件。

cmd運行python的安裝文件 setup.py

其中有幾個工具的地址需要設置

  • ANT
  • NDK
  • SDK
    我的都是在D盤目錄下 看上面的截圖,其中ANT的目錄要精確到bin目錄。

我的開發工具用的是sublime text3,好多人用的是webstorm 。這個自己選擇,官方還提供了IDE,目前最新的是個Creator(下章講解,官網已經找不到IDE下載地址),這東西我還不會使用,慢慢摸索吧。
下面創建個cocos工程。

cocos new helloworld -l js -d ./
helloworld是項目的名字,-l是語言設置(js,lua,c++),-d是目錄設置 我的是當前目錄

如果不知道命令怎么使用可以運行 cocos -h 列出可以選擇的命令 ,然后在cocos [命令] -h 例如

命令詳解的獲取方式
helloworld項目創建命令

創建好項目以后我們可以將將創建好的項目放到nginx下面,也可以在nginx下面配置alais目錄

Paste_Image.png

然后啟動nginx就可以訪問了http://127.0.0.1/cocos/helloworld/

helloworld項目訪問效果

由于我們配置了android(JAVA環境是前提,我上面沒說)的環境,所以我們可以將其打包成android的apk供安裝使用
運行命令 比較耗費時間

cocos compile -p android-m release

web版本的打包

cocos compile -p web -m release

運行過程截圖,可以看到在編譯執行各種.cpp文件


運行過程截圖

在編譯完成后是需要輸入keystory的文件路徑的 這個做Android的應該都知道,
最后會在項目目錄先生成 runtime文件 里面會包含 android的和html的文件夾,進入后可以看到對應的文件。

publish文件

進入publish 可以看到生成的文件,我的android打包的時候出現問題應該是keystor文件的問題 回頭我再看一下。

web的compile文件

進入可以看到compile后的文件已經生成。只需要將html文件夾改名字發布到容器訪問就可以了。

compile后我的web文件目錄

go go home!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,156評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,401評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,069評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,873評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,635評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,128評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,203評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,365評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,881評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,733評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,935評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,475評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,172評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,582評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,821評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,595評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,908評論 2 372

推薦閱讀更多精彩內容