Cocos2d-HTML5系列教程
- 格式：doc
- 大小：35.50 KB
- 文档页数：4
Cocos2d-HTML5系列教程制作＂Hello World＂和其他教程一样，我们会用Cocos2D-HTML实现HelloWorld。
我在一开始就警告你，这将会是一个看起来比其实际要复杂很多的过程。
有相当一部分样板代码需要你保存可以运行的环境，但总的来说它们不是那么困难。
在以后的游戏中，你只需要作为模板复制粘帖就行了。
下面的内容将涉及到很多细节，比后面的教程都详细。
后面有一个TL;DR （注：Too Long; Didn’t Read 太长，不必细究）概要，所以如果你喜欢的话，只需要简单的看下代码示例，然后跳到此篇文章的尾部读下概要，就可以理解究竟发生了什么。
为了使事情对你自己来说变得容易一些，在安装Cocos2D-html的文件夹下创建游戏工程。
如果你是按照我在教程1中来做的，路径将是c:wampwww。
为你的工程创建一个新文件夹，我的是MyFirstApp。
打开那个文件夹，创建一个子文件夹Classes。
现在你的文件夹已经创建了，我们要创建一些文件。
首先，需要创建一个HTML网页用来承载游戏。
文件名按照以下约定（使Apache服务器可以默认指向它），我使用的是index.html。
在文件中输入下面代码：1<divstyle="text-align:center;font-size:0;">2<canvasid="gameCanvas"width="600"height="600">Yourbrowserdoesnotsupportthecanv astag</canvas>3</div>这是最常备的HTML代码。
Body标签中的style属性使canvas标签在屏幕左侧刷新，并且拥有一个白色的背景。
这里只有两个真正重要的东西。
第一个是canvas标签，我们至少需要一个canvas标签让Cocos2D在上面绘制所有东西。
为什么长宽是600像素？这是我blog内容栏的尺寸。
因此，很明显，可以随意设定你的canvas的尺寸。
最后，我们包含了cocos2d.js脚本。
让我们平滑的过渡到下一个任务，创建另一个文本文件，叫做cocos2d.js。
文件中输入以下代码：4varcccc=cc=cc||{};5//Cocos2ddirectory6//Cocos2d文件夹7cc.Dir='./';//inrelatetothehtmlfileoruseabsolute8//相对于html文件的路径或绝对路径9cc.loadQue=[];//theloadquewhichjsfilesareloaded10//加载队列，储存加载的js文件11cc.COCOS2D_DEBUG=2;12cc._DEBUG=1;13cc._IS_RETINA_DISPLAY_SUPPORTED=0;14//html5selectormethod15//html5selector方法16cc.$=function(x){17returndocument.querySelector(x);18};19cc.$new=function(x){20returndocument.createElement(x);21};22cc.loadjs=function(filename){23//addthefiletotheque24//将文件加入到队列25varscript=cc.$new('script');26script.src=cc.Dir+filename;27script.order=cc.loadQue.length;28cc.loadQue.push(script);29script.onload=function(){30//filehavefinishedloading,31//ifthereismorefiletoload,weshouldputthenextfileonthehead32//文件加载结束，如果还有需要加载的文件，需要将其放到head中33if(this.order+1<cc.loadQue.length){34cc.$('head').appendChild(cc.loadQue[this.order+1]);35//console.log(this.order);36}37else{38cc.setup("gameCanvas");39//wearereadytorunthegame40//我们准备好开始运行游戏41cc.Loader.shareLoader().onloading=function(){42cc.LoaderScene.shareLoaderScene().draw();43};44cc.Loader.shareLoader().onload=function(){45cc.AppController.shareAppController().didFinishLaunchingWithOptions();46};47//preloadressources48//预加载资源49cc.Loader.shareLoader().preload([50//{type:"image",src:"Resources/HelloWorld.png"},51]);52}53};54if(script.order===0)//ifthefirstfiletoload,thenweputitonthehead55//如果是第一个文件要进行加载，将其放到head中56{57cc.$('head').appendChild(script);58}59};60//Enginefiles,61//TheycanbepacketedtoasinglefileusingtheAnttool.62//TheshellfilesandClosureCompilerwhichAntneedsareprovidedintoolsfolderandcocos2dfol der.63//引擎文件,可以使用Ant工具将它们打包成一个文件。
Ant需要的shell文件和Closure 编译器在工具文件夹和cocos2d文件夹中提供了。
64cc.loadjs('../cocos2d/platform/CCClass.js');//065cc.loadjs('../cocos2d/platform/CCCommon.js');//166cc.loadjs('../cocos2d/platform/platform.js');//267cc.loadjs('../cocos2d/cocoa/CCGeometry.js');//368cc.loadjs('../cocos2d/cocoa/CCSet.js');//469cc.loadjs('../cocos2d/platform/CCTypes.js');//570cc.loadjs('../cocos2d/cocoa/CCAffineTransform.js');//571cc.loadjs('../cocos2d/support/CCPointExtension.js');//1272cc.loadjs('../cocos2d/base_nodes/CCNode.js');//673cc.loadjs('../cocos2d/platform/ccMacro.js');//774cc.loadjs('../cocos2d/platform/ccConfig.js');//775cc.loadjs('../cocos2d/textures/CCTexture2D.js');//1276cc.loadjs('../cocos2d/textures/CCTextureCache.js');//1277cc.loadjs('../cocos2d/actions/CCAction.js');//778cc.loadjs('../cocos2d/actions/CCActionInterval.js');//779cc.loadjs('../cocos2d/actions/CCActionManager.js');//780cc.loadjs('../cocos2d/actions/CCActionEase.js');//781cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCScene.js');//882cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCLayer.js');//983cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCTransition.js');84cc.loadjs('../cocos2d/sprite_nodes/CCSprite.js');//1085cc.loadjs('../cocos2d/label_nodes/CCLabelTTF.js');//1186cc.loadjs('../cocos2d/text_input_node/CCIMEDispatcher.js');//1287cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDelegateProtocol.js');//1288cc.loadjs('../cocos2d/touch_dispatcher/CCTouchHandler.js');//1289cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDispatcher.js');//1290cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDelegate.js');//1291cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDispatcher.js');//1292cc.loadjs('../cocos2d/CCDirector.js');//1393cc.loadjs('../cocos2d/CCScheduler.js');//1494cc.loadjs('../cocos2d/CCLoader.js');//1495cc.loadjs('../cocos2d/CCDrawingPrimitives.js');//1596cc.loadjs('../cocos2d/platform/CCApplication.js');//1697cc.loadjs('../cocos2d/platform/CCSAXParser.js');//1698cc.loadjs('../cocos2d/platform/AppControl.js');//1899cc.loadjs('../cocos2d/menu_nodes/CCMenuItem.js');100cc.loadjs('../cocos2d/menu_nodes/CCMenu.js');101cc.loadjs('../CocosDenshion/SimpleAudioEngine.js');102//Userfiles103//用户文件104cc.loadjs('Classes/AppDelegate.js');//17105cc.loadjs('MyFirstApp.js');//19这段代码几乎涵盖了最基本的Cocos2D-HTML例子，注释和其它东西。
