CososJS学习笔记（1） 环境配置（填坑版，让你少走弯路！）
這段時間比較了國外的phaser、pixi、create等h5游戲框架以及國內的egret、cocosjs之后，最后還是決定使用cocosjs進行h5游戲的開發。
先簡單地說一下個人的觀點：首先pixi是個輕量級的框架，體積很小，速度也很快（cocosjs的官方說法是速度僅次于pixi，也就是說pixi應該是目前最快的。）但是問題也來了，由于封裝得較少，pixi很難較方便地實現復雜邏輯的東西（想要實現任何復雜邏輯理論上都是可以自己寫的，甚至整個js框架都可以自己寫，但畢竟我們還要考慮開發效率的問題，所以在框架選擇上最好還要考慮這個因素。）而phaser，本人也測試過，在相對高端的手機上運行都是沒什么問題的，但是在低端手機上運行效率并不理想。如果不考慮低端手機的話，不得不說phaser確實是一個非常理想的js游戲框架。它體積不大，api非常齊全，而且功能很強大，例子也很多。個人設計著玩玩的話用這個應該要比cocos好得多了。
phaser的官網：phaser.io
phaser的中文網站：（官方說不是他們做的，所以肯定是國內的大神做的。翻譯得很棒很棒！強烈地贊一個！要不是phaser性能較差我直接學phaser就沒有cocosjs的事兒了！）phaser.cc
對phaser感興趣的童鞋可以去這兩個網站上面進行學習。phaser的官網有時候需要科學訪問，所以有些時間段可能不太穩定。
接下來我們說一下egret，對于白鷺引擎，我只是稍作了解，所以不敢妄做評論。但是typescript的語法結構多少有點奇葩，而且對于并沒有接觸過action script的程序員來說，想要使用egret還要額外增加學習多一門語言的成本，所以經過一番比較之后，最后決定使用cocosjs進行開發。在低端手機上進行測試，cocos的運行效率應該說是比較理想的（絕對理想是不可能的，畢竟html5的運行效率本來就不高，而且還要受制于手機本來就比較差的硬件條件的約束，等等。這里就不再贅述。）
好了，那么接下來就開始說一下關于cocos2d js的環境配置。不得不說，cocos的官方網站并不友好。為什么這么說呢？對于一個沒有任何經驗的新手來說，cocos的各種版本顯得非常混亂，站在一個新人的角度看問題，我明明只是想開發個游戲啊，為什么要有這么多各種亂七八糟的版本？為什么要裝那么多亂七八糟的東西？而且官方首頁居然沒有對如此簡單的問題做一個簡簡單單的說明或者解釋！！簡直是讓人生氣！別跟我扯淡什么cocos是開源免費的，所以很多東西不完善需要慢慢來云云，這些都是放屁。這是一家公司對于市場的態度問題！相比之下unity簡直友好得像天使！如果不是unity目前不支持h5開發的話，我也懶得考慮cocos了。如果真的想要花點精力打造一個全自動環境配置和安裝的ide出來，就真有那么難？或者官方錄幾個視頻教一下新人，就真有那么逆天？態度決定一切，在這點上，我對cocos現在的情況保留意見。
好了，說一下安裝和配置，本質上講過程并不復雜，但是這個“不復雜”是針對于熟手的，里面藏了不少坑，我花了不少時間才填了這些坑（極容易出錯），很有必要在這里進行一個細致的說明和總結。對于技術大拿來說，這些都是浮云，所以請各路大神勿噴。我有時候甚至覺得，技術屏障是嚴重阻礙國內的游戲和IT行業真正朝著創造而不是山寨路線邁進的最大制約因素。技術上的門檻和官方的態度極大程度上地影響了真正有創意但卻不懂技術的人進入這個行業。
不繼續吐槽了，回歸正題。我認為，好的教程應該是讓人一看就明白的教程。如果教程寫出來之后讓閱讀者云里霧里的，不能怪閱讀者的理解能力差，而是寫教程的人本身就不負責任或者功力不足。我的想法是，要么不寫，要寫就要寫一份詳盡的、真正可以幫到人的文檔。這樣，才能讓別人少走一些不必要的彎路。
步驟1：資源準備（下面以windows7 64位系統的配置為例，本人沒使用過mac電腦，所以如果是mac用戶只能類比一下了。如果是XP用戶的話，建議你重裝系統吧……不然后續還是會有很多坑的。）
0.比cocosjs更重要的是先安裝Python2.7.6，注意不要安裝3的版本。地址：https://www.python.org/download/releases/2.7.6/
（沒有這個的話，cocosjs是跑不了的，切記。）
1.cocosjs，這個沒什么好說的，去官網下載吧：http://cn.cocos2d-x.org/download#anchor3
下面提到的java、sdk、ndk是和編譯成andriod的apk相關的，如果不需要編譯apk的話可以跳過這些步驟。
2.然后如果你的電腦上沒有安裝java jdk 1.7的話，請自己百度找一個。注意需要1.7的版本。
（解釋一下，jdk就是java development kit的意思，已經集成了jre的了，不需要再裝jre了。這里給出一個我隨便百度的下載地址，可能會過期，如果過期的話請自行百度一個：http://www.cr173.com/soft/55503.html 非win7 64位的請自己百度）
（如果已經裝了1.8的，那就很麻煩了，先用360或者上網找一個叫做windows installer clean up的軟件，來卸載掉電腦里和java相關的東西，然后用360或者其他注冊表清理工具清理一下電腦上的注冊表。然后用win鍵+R鍵打開運行窗口，輸入regedit進入注冊表，將：HKEY_CURRENT_USER\Software\JavaSoft 和
HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft 這兩個目錄下的注冊表清理掉，重啟，之后就可以安裝了。jdk的安裝是一個非常蛋疼的問題。如果安裝之后還是有問題，呵呵，抱歉，你可能要重裝系統了……這個絕對不是忽悠=_=）
關于java的環境配置，百度一下就可以找到很多教程，但是我這里還是要說明一下，首先是下載，不要去官網，下載不到舊版本的，直接百度或者去百度網盤搜索引擎里面找一個就行了。然后是安裝，安裝位置隨你喜歡，但切記路徑中不要含有中文。（基本上凡是IT類的東西的安裝都要謹記這一點，即使不是絕對必要的，也最好這樣，以免日后出現各種錯亂讓人極度崩潰！下面的配置過程是百度來的，大家直接看就行，不用自己再去百度了。）
安裝好后便是配置JDK的環境變量，在桌面上計算機點右鍵選屬性，或是開始菜單計算機上點右鍵選屬性，?左邊點高級系統設置，點下邊的環境變量，
?在新彈出窗口上，點系統變量區域下面的新建按鈕，彈出新建窗口，變量名為JAVA_HOME，變量值填JDK安裝的最終路徑，我這里裝的地址是D:\Program Files\Java\jdk1.7.0_51，所以填D:\Program Files\Java\jdk1.7.0_51，點確定完成，
下面需要設置Path變量，由于系統本身已經存在這個變量，所以無需新建，在原本基本上添加JDK相關的，找到Path變量雙擊編輯，由于每個值之間用;符號間斷，所以先在末尾加上;（注意是英文格式的，不要輸其他符號空格等），加上;符號后在末尾加入%JAVA_HOME%\bin，點確定完成，
下面添加CLASSPATH變量，由于不存在，所以新建一個，變量名CLASSPATH，變量值%JAVA_HOME%lib\dt.jar;%JAVA_HOME%\lib\tools.jar，首尾不帶空格的，點確定完成，至此環境變量配置完成，點確定關掉環境變量配置窗口。
上面步驟完成后，下面驗證下是否配置成功，點開始運行輸入cmd打開命令行窗口，輸入java -version，顯示版本1.7.0_51，輸入javac -version，也顯示1.7.0_51，說明JDK安裝及環境變量配置成功。
請注意：如果重裝了之后提示找不到c:\ProgramData\Oracle\Java\javapath\java.exe。的話，請在環境變量的系統變量的path的最前面加入你的java的jdk的絕對路徑，以我自己的為例，是：C:\Program Files\Java\jdk1.7.0_13;
好了，現在java安裝完畢，那么就到安卓的相關東西了。為什么要裝這么多亂七八糟的東西？因為你也希望自己做好的東西可以很方便地打包編譯成apk文件放到手機里吧？如果不需要的話，那這些步驟全部可以跳過的！沒錯，全部可以跳過！這些步驟說白了就是讓你在電腦上配置andriod開發環境然后可以將cocosjs的工程文件編譯成apk而已。至于ios？呵呵，那就復雜了，就算你沒有蘋果機，也要在電腦上搭載個虛擬機或者干脆裝雙系統什么的，這個扯得遠了，我們這里不說。
下載ndk、sdk、ant這三個東西：http://pan.baidu.com/share/home?uk=1260900318#category/type=0
這是cocos2d js論壇的大神給出的鏈接，建議用里面的東西去安裝，切記不要使用官網那個只有100多M的sdk tool，除非你想下載完之后自己再更新，但更新又是需要科學訪問的，這樣的話就又涉及到了別的技術……如果只是個新手的話，建議不要去什么官網下載了！為什么很多人裝了之后各種蛋疼呢，因為官網的東西和人家傳到百度網盤的東西經常是不一樣的啊！
如果哪天這個鏈接掛了的話，那就只好自己去百度網盤搜索引擎里面找了，直接百度的話也行，要靠自己的甄別能力：
目前官網的ndk版本已經到了ndk-r10d，不要用，還是用ndk-r9d吧。
ant的話無所謂，sdk和ndk到底是用來干什么的這個就不說了，ant是用來編譯成h5工程的，所以就算只做h5開發也還是需要這個的。
全部下載完之后建一個文件夾，然后在這個文件夾下面建三個子文件夾，把東西放好，這一步應該就不用多說了吧。直接解壓放好就行了。
我存放的位置是C:\sdk\
這里就有一個坑了。請大家注意：cocos的編譯是不支持帶有空格的路徑的。比如說，你的安裝路徑是C:\program files\，這樣的話，在program files文件夾上面有個空格，編譯過程尋找路徑就會出現"C:\Program"不是內部命令錯誤。
本人就是遇到了這樣的一個巨坑，而且網上還真找不到好的解決方案。所以這一點一定要謹記，希望能讓看到這篇東西的新人少走點彎路。這么容易出問題的地方，官方居然不事先說明，哎……我能吐槽么
（http://www.itnose.net/detail/6121615.html 這里有一篇做? cocos2dx3.2 android平臺搭建開發環境糾錯備忘錄
的東東，干貨，出問題的話請看一下。）繞過這個坑之后，我們就可以來配置環境了：
添加如下環境變量，這里需要注意的就是，PATH里面變量是添加的不是新建！然后是根據自己的下載的包的版本不同和解壓的地址不同，有所差異，但是變量名一定要按照下面的這么寫
NDK_ROOT ?： C:\sdk\android-ndk-r9d
ANDROID_SDK_ROOT ? ： C:\sdk\android-sdk-windows
ANT_ROOT ?： C:\sdk\apache-ant-1.9.4\bin ? 這里注意了，必須得有bin!!!!!!有的教程里面沒有，以后便會出現這個配置失敗錯誤.
隨后在PATH里添加 ??
;C:\Python27;%NDK_ROOT%;ANDROID_SDK_ROOT%\tools;%JAVA_HOME%/bin;C:\sdk\apache-ant-1.9.4\bin
關于環境變量java_home那，那就是看你的下載的版本了，可能跟我的不一樣，有的教程上寫的是 JAVA_HOME ?： C:\Program Files\Java\jdk1.7.0_51
關于PATH這里我說明一下，需要添加python的地址】
如果以上配置都沒什么問題的話，那么接下來就算是安裝完安卓和ant環境了。
接下來是在自己的電腦上安裝一個web服務器，建議使用xampp，當然也可以用其他的，這個沒有限制。這里以xampp為例：把xampp裝好之后，把整個cocosjs解壓進去：
C:\xampp\htdocs\cocos2d-js-v3.5
然后運行xampp的Apache，注意端口不能沖突（如果你的電腦有用iis的話可能會沖突，出現這個問題的話請自己百度一下，這個比較簡單）
然后打開cmd，鍵入cd 你的項目路徑，這里以我自己的為例：
cd表示跳轉到指定路徑，這個就不用多說了吧？當然不知道也沒關系啦，你現在不就知道了嘛，嘻嘻。
關于cocos的一些指令，這里順便說一下，但是沒必要去刻意記住，只要記住一兩個常用的就行了：
?創建工程
a)????首先，你需要打開你的終端工具(Windows 系統打開Dos系統)，運行下列命令(自選一種)
b)????//創建一個同時包含Cocos2d-html5和Cocos2d-x JSB的項目
c)????cocos new -l js??????????
d)????//創建一個僅包含Cocos2d-html5的項目, --no-native 表示不需要支持Native平臺(IOS,Android,Mac,Windows等)，只支持瀏覽器就可以了。
e)????cocos new -l js --no-native??
f)????//創建一個置頂工程名字指定目標的項目
g)????cocos new projectName -l js -d ./Projects
h)????例如，我想在桌面創建一個叫HelloWord 的項目。那么有兩種做法。
i.????第一種：
1.????cd ./Desktop
2.????cocos new HelloWord –l js
ii.????第二種： cocos new HelloWord -l js -d ./Desktop
運行項目
瀏覽器上：
cd ./Desktop/HelloWord
cocos run -p web
????????????編譯并運行Cocos2d-x JSB項目在iOS，android，mac上(即：native平臺上)
cd ./Desktop/HelloWord
cocos compile -p ios|android|mac
cocos run -p ios|android|mac
????????????例如：我要運行在IOS上，那就運行：cocos run -p ios。編譯好之后，對應的工程目錄在HelloWord/frameworks/runtime-src/
????????????Android項目導入Eclipse：
導入 HelloWord/frameworks/runtime-src/proj.android 到 Eclipse, 這個時候，Eclipse會報錯，完成下面一步就好了。
導入 HelloWord/frameworks/js-bindings/cocos2d-x/cocos/platform/android/java 到 Eclipse 中即可
打包項目：()
cd ./Desktop/HelloWord
cocos compile –p web| android|IOS –m release
命令運行成功之后，在HelloWord工程文件夾下多出了一個publish文件夾，這個就是發布包。
例如我想把HelloWord跑在微信上，那三個步驟搞定：
????????cd ./Desktop/HelloWord
cocos compile –p web –m release
拷貝HelloWord/publish/html5到你的服務器下，然后微信瀏覽器訪問這個地址，就搞定了。PC瀏覽器也是一樣一樣滴。
最后，強烈建議大家去看剛剛那個鏈接里面的視頻深入學習！以后會繼續更新我的學習筆記的！
總結
以上是生活随笔為你收集整理的CososJS学习笔记（1） 环境配置（填坑版，让你少走弯路！）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 彻底搞懂JS无缝滚动代码
- 下一篇： 用javascript伪造太阳系模型系统