Cocos2d-html5 HelloWorld模板和引擎使用简介

本文主要介绍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


 

 

posted on 2012-05-24 16:26  SeanLin  阅读(3581)  评论(2编辑  收藏  举报

导航