推荐订阅源

本文主要介绍Cocos2d-html5如何快速的使用模板文件建立游戏项目，以及一些引擎的使用注意事项。

在代码仓中，已经集成Project的模板，位置在cocos2d-html5/HelloWorld目录下，包含的文件有：

1. HelloWorld.html
2. HelloWorld.js
3. cocos2d.js
4. ./Classes/AppDelegate.js

    其中，HelloWorld.html文件是网页的加载文件，里面主要定义了canvas和引导文件cocos2d.js。

    cocos2d.js文件用来加载所有的js文件，然后调用initLoader加载图片，声音等资源文件。加载完毕之后，创建出application，并开始运行。目前代码仓是分离的js文件，版本发布会将引擎文件进行打包和压缩，变为一个独立的文件。

    HelloWorld.js用来创建出运行环境的Scene，并将产生的scene返回给AppDelegate。在scene里面可以放置各种layer和sprite，并给layer或者sprite加上各种动作和效果。

    值得一提的是，logo展示背景层的创建方式有点特殊，是采用cc.LazyLayer()创建。采用这么做的好处是，canvas不需要实时对整个画面进行刷新，节省渲染时间，提高帧率。LazyLayer的方式，可以用来管理游戏的大背景，降低渲染消耗。

    AppDelegate初始化帧率和Director，调用runWithScene开始运行HelloWorld。至此，整个Demo就运行起来了。

    在cocos2d.js中，默认添加的是Canvas Menu，如果要Dom Menu，则替换对应的文件。涉及的文件有以下部分：

    Canvas Menu模式：

    cc.loadjs('menu_nodes/CCMenuItem.js');

    cc.loadjs('menu_nodes/CCMenu.js');

   Dom Menu模式：

   cc.loadjs('base_nodes/CCdomNode.js');

   cc.loadjs('menu_nodes/CCdomMenuItem.js');

   cc.loadjs('menu_nodes/CCdomMenu.js');

    在使用Dom Menu，浏览器原生支持，可以有更高的运行效率，但是用Dom Menu创建的Items和Menu只能在Canvas的上方。如果创建出来的菜单需要在Canvas Menu下方的话，需要选用Canvas Menu。

服务器搭建

     引擎使用到的特殊文件类型包括：.tmx .tsx .plist .fnt，需要在服务器中设置支持以上类型的文件。

Sean Lin，转载请注明： http://www.cnblogs.com/SeanLin/archive/2012/05/24/2516714.html