就像在上个教程中承诺的那样,在这篇教程中我们会深入的了解并开始编码。和其他教程一样,我们会用Cocos2D-HTML实现HelloWorld。我在一开始就警告你,这将会是一个看起来比其实际要复杂很多的过程。有相当一部分样板代码需要你保存可以运行的环境,但总的来说它们不是那么困难。在以后的游戏中,你只需要作为模板复制粘帖就行了。
下面的内容将涉及到很多细节,比后面的教程都详细。后面有一个TL;DR(注:Too Long; Didn’t Read 太长,不必细究)概要,所以如果你喜欢的话,只需要简单的看下代码示例,然后跳到此篇文章的尾部读下概要,就可以理解究竟发生了什么。
为了使事情对你自己来说变得容易一些,在安装Cocos2D-html的文件夹下创建游戏工程。如果你是按照我在教程1中来做的,路径将是c:wampwww。为你的工程创建一个新文件夹,我的是MyFirstApp。打开那个文件夹,创建一个子文件夹Classes。
现在你的文件夹已经创建了,我们要创建一些文件。首先,需要创建一个HTML网页用来承载游戏。文件名按照以下约定(使Apache服务器可以默认指向它),我使用的是index.html。在文件中输入下面代码:
- <div style="text-align: center;font-size: 0;">
- <canvas id="gameCanvas" width="600" height="600"> Your browser does not support the canvas tag </canvas>
- </div>
这是最常备的HTML代码。Body标签中的style属性使canvas标签在屏幕左侧刷新,并且拥有一个白色的背景。这里只有两个真正重要的东西。第一个是canvas标签,我们至少需要一个canvas标签让Cocos2D在上面绘制所有东西。为什么长宽是600像素?这是我blog内容栏的尺寸。因此,很明显,可以随意设定你的canvas的尺寸。最后,我们包含了cocos2d.js脚本。
让我们平滑的过渡到下一个任务,创建另一个文本文件,叫做cocos2d.js。文件中输入以下代码:
- var cccc = cc = cc || {};
- //Cocos2d directory
- //Cocos2d文件夹
- cc.Dir = './';//in relate to the html file or use absolute
- //相对于html文件的路径或绝对路径
- cc.loadQue = [];//the load que which js files are loaded
- //加载队列,储存加载的js文件
- cc.COCOS2D_DEBUG = 2;
- cc._DEBUG = 1;
- cc._IS_RETINA_DISPLAY_SUPPORTED = 0;
- //html5 selector method
- //html5 selector 方法
- cc.$ = function (x) {
- return document.querySelector(x);
- };
- cc.$new = function (x) {
- return document.createElement(x);
- };
- cc.loadjs = function (filename) {
- //add the file to the que
- //将文件加入到队列
- var script = cc.$new('script');
- script.src = cc.Dir + filename;
- script.order = cc.loadQue.length;
- cc.loadQue.push(script);
- script.onload = function () {
- //file have finished loading,
- //if there is more file to load, we should put the next file on the head
- //文件加载结束,如果还有需要加载的文件,需要将其放到head中
- if (this.order + 1 < cc.loadQue.length) {
- cc.$('head').appendChild(cc.loadQue[this.order + 1]);
- //console.log(this.order);
- }
- else {
- cc.setup("gameCanvas");
- //we are ready to run the game
- //我们准备好开始运行游戏
- cc.Loader.shareLoader().onloading = function () {
- cc.LoaderScene.shareLoaderScene().draw();
- };
- cc.Loader.shareLoader().onload = function () {
- cc.AppController.shareAppController().didFinishLaunchingWithOptions();
- };
- //preload ressources
- //预加载资源
- cc.Loader.shareLoader().preload([
- //{type:"image", src:"Resources/HelloWorld.png"},
- ]);
- }
- };
- if (script.order === 0)//if the first file to load, then we put it on the head
- //如果是第一个文件要进行加载,将其放到head中
- {
- cc.$('head').appendChild(script);
- }
- };
- // Engine files,
- // They can be packeted to a single file using the Ant tool.
- // The shell files and Closure Compiler which Ant needs are provided in tools folder and cocos2d folder.
- // 引擎文件,可以使用Ant工具将它们打包成一个文件。Ant需要的shell文件和Closure编译器在工具文件夹和cocos2d文件夹中提供了。
- cc.loadjs('../cocos2d/platform/CCClass.js');//0
- cc.loadjs('../cocos2d/platform/CCCommon.js');//1
- cc.loadjs('../cocos2d/platform/platform.js');//2
- cc.loadjs('../cocos2d/cocoa/CCGeometry.js');//3
- cc.loadjs('../cocos2d/cocoa/CCSet.js');//4
- cc.loadjs('../cocos2d/platform/CCTypes.js');//5
- cc.loadjs('../cocos2d/cocoa/CCAffineTransform.js');//5
- cc.loadjs('../cocos2d/support/CCPointExtension.js');//12
- cc.loadjs('../cocos2d/base_nodes/CCNode.js');//6
- cc.loadjs('../cocos2d/platform/ccMacro.js');//7
- cc.loadjs('../cocos2d/platform/ccConfig.js');//7
- cc.loadjs('../cocos2d/textures/CCTexture2D.js');//12
- cc.loadjs('../cocos2d/textures/CCTextureCache.js');//12
- cc.loadjs('../cocos2d/actions/CCAction.js');//7
- cc.loadjs('../cocos2d/actions/CCActionInterval.js');//7
- cc.loadjs('../cocos2d/actions/CCActionManager.js');//7
- cc.loadjs('../cocos2d/actions/CCActionEase.js');//7
- cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCScene.js');//8
- cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCLayer.js');//9
- cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCTransition.js');
- cc.loadjs('../cocos2d/sprite_nodes/CCSprite.js');//10
- cc.loadjs('../cocos2d/label_nodes/CCLabelTTF.js');//11
- cc.loadjs('../cocos2d/text_input_node/CCIMEDispatcher.js');//12
- cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDelegateProtocol.js');//12
- cc.loadjs('../cocos2d/touch_dispatcher/CCTouchHandler.js');//12
- cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDispatcher.js');//12
- cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDelegate.js');//12
- cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDispatcher.js');//12
- cc.loadjs('../cocos2d/CCDirector.js');//13
- cc.loadjs('../cocos2d/CCScheduler.js');//14
- cc.loadjs('../cocos2d/CCLoader.js');//14
- cc.loadjs('../cocos2d/CCDrawingPrimitives.js');//15
- cc.loadjs('../cocos2d/platform/CCApplication.js');//16
- cc.loadjs('../cocos2d/platform/CCSAXParser.js');//16
- cc.loadjs('../cocos2d/platform/AppControl.js');//18
- cc.loadjs('../cocos2d/menu_nodes/CCMenuItem.js');
- cc.loadjs('../cocos2d/menu_nodes/CCMenu.js');
- cc.loadjs('../CocosDenshion/SimpleAudioEngine.js');
- // User files
- // 用户文件
- cc.loadjs('Classes/AppDelegate.js');//17
- cc.loadjs('MyFirstApp.js');//19
这段代码几乎涵盖了最基本的Cocos2D-HTML例子,注释和其它东西。我推荐你直接使用它,而不是去重新发明轮子。