這篇教程內容主要介紹Cocos2D-html的安裝和入門，如果你已經完成了這一步，可以跳過前面的內容。接下來，還會介紹到配置web伺服器，

一個選擇性的步驟。好吧，開始介紹：

首先你應該下載cocos2d-html5的包, 下載地址：https://github.com/cocos2d/cocos2d-html5

Locate the zip icon, as demonstrated in the picture to your left, click it.

專案左邊的zip可以直接下載到

 

我們準備安裝一個WEB伺服器，這部分作為參考，但是如果你想看到cocos自帶的demos效果的話，必須安裝。它允許通過其他機器訪問你本地的伺服器，非常簡單的過程，僅僅針對WINDOWS.

現在需要下載一個WAMP伺服器，點選下載:

WAMP伺服器是集合了Apache,MySql, PHP和一些其他的運用程式，在許多功能方面，已經超過我們的要求，安裝過程非常簡單。下載任意版本安裝之後(注意你的系統是32還是64位的)

 

下載之後，執行安裝包。餘下內容省略...

Now run the installer.  I choose the default value for every entry and let it install to C:\wamp.  If you saved to a different directory, adjust your path’s accordingly later on in this tutorial.  It is going to ask you to pick your default browser and default out to explorer.exe ( the shell, not to be confused with Internet Explorer the browser ).  You can explicitly choose a browser if you want but there is little reason to do so.  When prompted for mail settings, simply take the default.  WAMP server will now be installed and running in your system tray.

 

像上圖中，點選圖示之後會彈出一個對話方塊，點選開啟服務

安裝正確的話

If everything went according to plan, you should see:

 

 

Now we want to extract the cocos2d-html archive we downloaded earlier.  Open up the zip and navigate the folders until you find a directory that looks like such:

 

 CTRL+A選擇所有的內容放入C:\wamp\www\資料夾中，然後重新啟動

CTRL+A select the entire contents of this folder in the zip and paste it  to C:\wamp\www\.

 現在通過瀏覽器直接訪問 http://localhost/index.hmtl就可以看到執行的效果了

 

如果這樣，恭喜你了！你已經成功的配置了Cocos2d-HTML5，如果沒有的話，你需要確認一下WAMP底下www目錄中的檔案是否正確。

 

If so, congrats, you have successfully set up Cocos2d for HTML5.  If not, make sure you have the proper contents in c:\wamp\www, and that it’s not buried in a subdirectory.  Now optionally you can open access to it up a bit so other computers on your network can see the website.  I am by no means an apache expert ( was born and raised on IIS ), so do not take this as authoritative in any way!

 

You want to edit httpd.conf, which you can do from the tray icon, like such:

你可以通過下面的icon方便的編輯httpd.conf, httpd.conf是Apache網路伺服器軟體中重要的一個配置檔案，許多Apache重要的檔案都是需要配置。

 

 

Find and locate the following entries to match what I’ve done here ( with your IP address obviously ):

 

Set your IP and port to listen on, entry was originally Listen 80:

# # Listen: Allows you to bind Apache to specific IP addresses and / or # ports, instead of the default. See also the < VirtualHost > # directive. # # Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses. # Listen 192.168 . 2.103 : 80

 

Set the server name to your servers name, or if you haven’t got DNS configured ( such as yourserver.yourname.com ) use your IP address like I have:

 

# # ServerName gives the name and port that the server uses to identify itself. # This can often be determined automatically, but we recommend you specify # it explicitly to prevent problems during startup. # # If your host doesn ' t have a registered DNS name, enter its IP address here. # ServerName 192.168 . 2.103

 

Finally, grant access to your www folder:

 

< Directory " c:/wamp/www/ " > # # Possible values for the Options directive are " None " , " All " , # or any combination of: # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews # # Note that " MultiViews " must be named * explicitly * -- - "Options All" # doesn ' t give it to you. # # The Options directive is both complicated and important. Please see # http: // httpd.apache.org / docs / 2.2 / mod / core.html # options # for more information. # Options Indexes FollowSymLinks # # AllowOverride controls what directives may be placed in .htaccess files. # It can be " All " , " None " , or any combination of the keywords: # Options FileInfo AuthConfig Limit # AllowOverride all # # Controls who can get stuff from this server. # # onlineoffline tag - don ' t remove Order Allow,Deny Allow from all </ Directory >

 

You should now have full access to your webserver folder from other machines on your network ( and externally if you don’t have a firewall or have port forwarding configured ).  You can of course tweak the security settings until the cows come home.

 

Now, save your changes and restart your apache server, this can again be done from the tray icon, simply left click and choose Restart All Services.  If your icon doesn’t turn green, you have made an error in the httpd.conf file.

 

Again, the entire server portion is optional, you can just work from the local file system, but this allows you to make use of the full demo and test suite.

 

Speaking of which, if you now open your browser to http://yourserverIP/tests/index.html you should now have access to all the various cocos2d tests, like such:

 

 

Now you are set up and ready to go.  In the next tutorial, we will actually get to some coding.