Cocos2D HTML5 教程系列1: 项目配置和启动

这篇教程内容主要介绍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.