cocos2d-js(一)引擎的工作原理和文件的调用顺序
Cocos2d-js可以实现在网页上运行高性能的2D游戏,实现原理是通过HTML5的canvas标签,该引擎采用Javascript编写,并且有自己的一些语法,因为没有成熟的IDE,一般建立工程是通过WebStorm手动创建文件与文件夹,实现将引擎跑起来,下面详解一下运行过程。
首先,用户最先访问到的是index.html页面,在index.html中引入引擎的启动文件CCBoot.js和自己编写的游戏的启动文件main.js。除此之外,还需要在工程的根目录下写一个project.json,来描述工程,引擎会自动读入这个文件,确定工程的类型、功能设置、引入的模块、自己的js文件列表等。
一般是将cocos2d的引擎拷贝到自己的工程目录下,使用frameworks/cocos2d-html5这个目录下的引擎文件。
下面的流程图说明了cocos2d的基本工作流程:
下面我们以frameworks/cocos2d-html5/template为例分析一下这个工程。
工程的运行结果为在屏幕上显示Hello、屏幕分辨率、Logo等内容。
首先分析一下index.html这个文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cocos2d-html5 Hello World test</title> <link rel="icon" type="image/GIF" href="res/favicon.ico"/> <meta name="viewport" content="width=321,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="full-screen" content="yes"/> <meta name="screen-orientation" content="portrait"/> <meta name="x5-fullscreen" content="true"/> <meta name="360-fullscreen" content="true"/> <style> body, canvas, div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style><pre name="code" class="html"><script src="../CCBoot.js"></script> <script src="main.js"></script> <body style="padding:0; margin: 0; background: #000;"> <script src="res/loading.js"></script> <canvas id="gameCanvas" width="1920" height="1920"></canvas> </body>
<script src="../CCBoot.js"></script> <script src="main.js"></script></head><body style="padding:0; margin: 0; background: #000;"><script src="res/loading.js"></script><canvas id="gameCanvas" width="1920" height="1920"></canvas></body></html>
Head中的大部分标签都是用于说明一些显示的属性,如果是手机网页应用则需要设置这些,如果是普通的网页应用则不必设置,可以省略成如下这样:
<head> <title>Title</title> <meta name="viewport" content="user-scalable=no"/> <meta charset="utf-8"/> </head>
最重要的是js的引入和canvas标签:
<script src="../CCBoot.js"></script> <script src="main.js"></script>这个工程在body中还载入了loading.js,这个只是启动时的loading动画,可以不加。
<body style="padding:0; margin: 0; background: #000;"> <script src="res/loading.js"></script> <canvas id="gameCanvas" width="1920" height="1920"></canvas> </body>要特别注意canvas的id,在json中需要声明它,供引擎使用。
接下来,通过CCBoot.js,引擎会去加载和解析project.json,注意把它放在工程的根目录下,下面我们来看看这个json文件的内容:
{ "debugMode" : 1, "noCache": true, "showFPS" : true, "frameRate" : 60, "id" : "gameCanvas", "renderMode" : 0, "engineDir":"../", "modules" : ["cocos2d"], "jsList" : [ "src/resource.js", "src/myApp.js" ] }
按照json的标准格式,这个文件说明了工程的调试模式、是否缓存、是否显示帧率、最大帧率、canvas的id、渲染模式、还有引擎的路径,注意引擎路径这里,因为这个模版工程是寄生在frameworks之内的,因此它的上一层目录就是引擎,对于一般的工程一定要找到引擎的正确位置,在frameworks/cocos2d-html5。
其中,jList是要加载的js文件列表,在这里加载后,以后在任何文件的任何位置都可以访问这些js文件。
下面我们看一下工程的目录结构:
src中一般用于存放自己的js文件,也就是jsList中要加载的那些文件,而资源文件一般放到res中,为了保证性能,资源文件不应当在一开始就全部加载到工程中,而应当进行懒加载,即使用时才加载,为了方便加载资源,一般会写一个resource.js来对资源路径和分类进行封装,下面我们来看看resource.js的内容:
var s_HelloWorld = "HelloWorld.jpg"; var s_CloseNormal = "CloseNormal.png"; var s_CloseSelected = "CloseSelected.png"; var g_resources = [ //image s_HelloWorld, s_CloseNormal, s_CloseSelected ];
当前工程只有三种图片,HelloWorld的Logo、一个按钮的两种状态,首先定义变量存储图片路径,然后用一个数组存储一次性要用到的所有资源,因为这个模版只有一个场景,因此只需要一个资源数组,这个资源数组可以在main.js中进入场景时传入,实现在场景切换完成后同时实现资源的加载。
由于index.html中包含了main.js,因此会运行main.js,下面我们看main.js的内容:
cc.game.onStart = function(){ if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it document.body.removeChild(document.getElementById("cocosLoading")); var designSize = cc.size(480, 800); var screenSize = cc.view.getFrameSize(); if(!cc.sys.isNative && screenSize.height < 800){ designSize = cc.size(320, 480); cc.loader.resPath = "res/Normal"; }else{ cc.loader.resPath = "res/HD"; } cc.view.setDesignResolutionSize(designSize.width, designSize.height, cc.ResolutionPolicy.SHOW_ALL); //load resources cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new MyScene()); }, this); }; cc.game.run();这里用到了cc.game这个类,重写了它的onStart方法,在cocos2d-js中,所有的API都是以cc开头,全部使用点语法,在调用cc.game.run()方法之后,cc.game会自动调用onStart方法,从而实现工程设置与场景的加载。
注意最后一句:
//load resources cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new MyScene()); }, this);用到了cc.LoaderScene的preload方法来切换场景,这个方法的参数如下:
cc.LoaderScene.preload(resources, cb, target)其中第一个参数是在切换场景时要加载的资源,这里的g_resources是在上述的resource.js中定义的;第二个参数是要加载的内容,用大括号包围,其内写上切换的代码;第三个参数是目标,一般都是填写this。
要实现切换场景,使用的是cc.director的runScene方法,director的含义是导演,这个类的命名十分的形象,说明这个类是控制场景切换和游戏走向的,可以从中获取场景的一些数据和切换场景。
传入的参数是一个场景的实例,MyScene这个类是在哪里定义的呢?注意到jsList中还有一个文件myApp.js没被提到过,它便是定义MyScene类的文件。
它的代码如下:
var MyLayer = cc.Layer.extend({ helloLabel:null, sprite:null, init:function () { ////////////////////////////// // 1. super init first this._super(); ///////////////////////////// // 2. add a menu item with "X" image, which is clicked to quit the program // you may modify it. // ask director the window size var size = cc.director.getWinSize(); // add a "close" icon to exit the progress. it's an autorelease object var closeItem = new cc.MenuItemImage( s_CloseNormal, s_CloseSelected, function () { cc.log("close"); },this); closeItem.setAnchorPoint(0.5, 0.5); var menu = new cc.Menu(closeItem); menu.setPosition(0, 0); this.addChild(menu, 1); closeItem.setPosition(size.width - 20, 20); ///////////////////////////// // 3. add your codes below... // add a label shows "Hello World" // create and initialize a label this.helloLabel = new cc.LabelTTF("Hello", "Impact", 38); // position the label on the center of the screen this.helloLabel.setPosition(size.width / 2, size.height - 40); // add the label as a child to this layer this.addChild(this.helloLabel, 5); // add "Helloworld" splash screen" this.sprite = new cc.Sprite(s_HelloWorld); this.sprite.setAnchorPoint(0.5, 0.5); this.sprite.setPosition(size.width / 2, size.height / 2); this.sprite.setScale(size.height / this.sprite.getContentSize().height); this.addChild(this.sprite, 0); } }); var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var layer = new MyLayer(); this.addChild(layer); layer.init(); } });首先第一行可以看到对MyLayer类的定义,这里先提一下,cocos2d-JS中对类的继承是通过调用extend方法实现的,传入的为类的具体内容,例如要继承CCLayer类,则按第一行代码写var MyLayer = cc.Layer.extend({...});
再看最后几行代码,定义了一个继承自Scene的类,这里之所以有两个类,是因为切换场景时接收的是Scene,而为了实现用户输入,应到使用Layer,因此一个常用的用法是先定义一个Layer,再定义一个Scene,在Scene中实现把Layer加入到Scene中,然后在Layer中写代码。
CCLayer与CCScene都是继承自CCNode 的类,其中CCLayer比CCScene多了用户输入的功能。
这时候我们再回到上面的preload代码,在那里实例化MyScene,场景在实例化时会调用onEnter方法,只要重写onEnter方法,在场景中加入一个Layer即可。
接下来,在Layer中写主要代码即可,有关cocos2d-js的具体语法详见下一篇。