cocos2d-x-html5之游戏启动2

[上一篇]讲了调用了cc.game.run后，会执行cc.game.onStart函数，然后项目组在onStart函数中实现了自己的逻辑。这一篇就具体解析一下是怎么执行到cc.game.onStart函数。
在CCBoot.js的实现中，我们可以看到 cc.game.run中做了一下操作
1、调用cc.game.prepare() :
2、加载project.json : cc.game._loadConfg()
3、加载引擎代码: 加载moduleConfig.json里面module对应的配置
4、加载项目代码：加载project.json里面 jsList 包含的代码列表
5、运行 director.mainLoop.js 进入主循环，时间模块初始化等逻辑，并执行 cc.game.onStart

接下来看下具体代码：


//+++++++++++++++++++++++++something about CCGame begin+++++++++++++++++++++++++++
/*** An object to boot the game.* @class* @name cc.game**/
cc.game = /** @lends cc.game# */{/*** Run game with configuration object and onStart function.* @param {Object|Function} [config] Pass configuration object or onStart function* @param {onStart} [onStart] onStart function to be executed after game initialized*/run: function (config, onStart) {// 如果第一个参数为函数，则赋值给onStart(比较多是直接 cc.game.onStart = function() {...})if (typeof config === 'function') {cc.game.onStart = config;} else {// config参数存在时if (config) {// 如果为字符串 if (typeof config === 'string') {// 不存在config时，加载config cc.game.config在_loadConfig()执行成功后，内容为 project.json的内容if (!cc.game.config) this._loadConfig();// 赋值给cc.game.config.idcc.game.config[cc.game.CONFIG_KEY.id] = config;} else { // 不是字符串，直接赋值给cc.game.configcc.game.config = config;}}// onStart为函数时if (typeof onStart === 'function') {cc.game.onStart = onStart;}}// 运行prepare函数this.prepare(cc.game.onStart && cc.game.onStart.bind(cc.game));},//  @Game loading/*** Prepare game.* @param cb project.json解析、加载引擎代码、加载游戏代码等准备工作完成后调用  目前为 cc.game.onStart*/prepare: function (cb) {var self = this,config = self.config,CONFIG_KEY = self.CONFIG_KEY;// Config loaded// config 未加载if (!this._configLoaded) {// 加载配置文件 project.josnthis._loadConfig(function () {// 加载后重新调用 准备self.prepare(cb);});return;}// Already prepared// 如果已经准备好了，直接执行回调if (this._prepared) {if (cb) cb();return;}// Prepare called, but not done yet// 到这里是 引擎代码加载过，但是游戏代码还未加载// 疑问 如果cb存在不存起来，后面游戏代码加载后 执行？if (this._prepareCalled) {return;}// Prepare never called and engine ready// 引擎代码已经加载过if (cc._engineLoaded) {this._prepareCalled = true;// 初始化 渲染this._initRenderer(config[CONFIG_KEY.width], config[CONFIG_KEY.height]);/*** cc.view is the shared view object.* @type {cc.EGLView}* @name cc.view* @memberof cc*/cc.view = cc.EGLView._getInstance();/*** @type {cc.Director}* @name cc.director* @memberof cc*/cc.director = cc.Director._getInstance();if (cc.director.setOpenGLView)cc.director.setOpenGLView(cc.view);/*** cc.winSize is the alias object for the size of the current game window.* @type {cc.Size}* @name cc.winSize* @memberof cc*/// 赋值cc.winSizecc.winSize = cc.director.getWinSize();// 初始化事件this._initEvents();// 设置帧率this._setAnimFrame();// 运行主循环this._runMainLoop();// Load game scripts// 加载游戏代码var jsList = config[CONFIG_KEY.jsList];if (jsList) {cc.loader.loadJsWithImg(jsList, function (err) {if (err) throw new Error(err);self._prepared = true;// 加载完成后，运行回调 （这里就是cc.game.onStart）if (cb) cb();});} else {if (cb) cb();}return;}// Engine not loaded yet// 初始化引擎，执行后，cc._engineLoaded 设为truecc.initEngine(this.config, function () {self.prepare(cb);});// 总结：这里 this._configLoaded、 this._prepared 、this._prepareCalled、cc._engineLoaded// 这几个变量的控制，让 project.json文件解析、引擎代码加载、游戏代码加载 这几个异步流程 没有异步嵌套 },//  @Game loading section// 加载 project.json 文件_loadConfig: function (cb) {// Load configvar config = this.config || document["ccConfig"];// Already loaded or Load from document.ccConfig// config存在，直接初始化配置if (config) {this._initConfig(config);cb && cb();}// Load from project.jsonelse {// 所有的script元素var cocos_script = document.getElementsByTagName('script');for (var i = 0; i < cocos_script.length; i++) {var _t = cocos_script[i].getAttribute('cocos');// 找到第一个有cocos属性，用于修改projection.json所在的路径if (_t === '' || _t) {break;}}var self = this;var loaded = function (err, txt) {// 加载出来的内容 用JSON 解析一下var data = JSON.parse(txt);// 初始化配置self._initConfig(data);cb && cb();};var _src, txt, _resPath;if (i < cocos_script.length) {_src = cocos_script[i].src;if (_src) {// 找到 a/b/c.js 的文件夹路径  a/b/_resPath = /(.*)\//.exec(_src)[0];cc.loader.resPath = _resPath;_src = cc.path.join(_resPath, 'project.json');}cc.loader.loadTxt(_src, loaded);}if (!txt) {cc.loader.loadTxt("project.json", loaded);}}},_initConfig: function (config) {// 配置的keyvar CONFIG_KEY = this.CONFIG_KEY,modules = config[CONFIG_KEY.modules];// Configs adjustment// 是否显示帧率信息config[CONFIG_KEY.showFPS] = typeof config[CONFIG_KEY.showFPS] === 'undefined' ? true : config[CONFIG_KEY.showFPS];// 引擎所在文件夹config[CONFIG_KEY.engineDir] = config[CONFIG_KEY.engineDir] || "frameworks/cocos2d-html5";// debug模式if (config[CONFIG_KEY.debugMode] == null)config[CONFIG_KEY.debugMode] = 0;// 暴露类名让 Chrome DevTools 可以识别，如果开启会稍稍降低类的创建过程的性能，但对对象构造没有影响config[CONFIG_KEY.exposeClassName] = !!config[CONFIG_KEY.exposeClassName];// 帧率config[CONFIG_KEY.frameRate] = config[CONFIG_KEY.frameRate] || 60;// 渲染模式if (config[CONFIG_KEY.renderMode] == null)config[CONFIG_KEY.renderMode] = 0;// 注册系统事件if (config[CONFIG_KEY.registerSystemEvent] == null)config[CONFIG_KEY.registerSystemEvent] = true;// Modules adjustment// 如果包含没有core的话，在第一个插入 “core”if (modules && modules.indexOf("core") < 0) modules.splice(0, 0, "core");modules && (config[CONFIG_KEY.modules] = modules);this.config = config;// 标识 已经加载过this._configLoaded = true;},
};//+++++++++++++++++++++++++Engine initialization function begin+++++++++++++++++++++++++++
(function () {// 确定渲染类型function _determineRenderType(config) {var CONFIG_KEY = cc.game.CONFIG_KEY,userRenderMode = parseInt(config[CONFIG_KEY.renderMode]) || 0;// Adjust RenderTypeif (isNaN(userRenderMode) || userRenderMode > 2 || userRenderMode < 0)config[CONFIG_KEY.renderMode] = 0;// Determine RenderTypecc._renderType = cc.game.RENDER_TYPE_CANVAS;cc._supportRender = false;if (userRenderMode === 0) {if (cc.sys.capabilities["opengl"]) {cc._renderType = cc.game.RENDER_TYPE_WEBGL;cc._supportRender = true;} else if (cc.sys.capabilities["canvas"]) {cc._renderType = cc.game.RENDER_TYPE_CANVAS;cc._supportRender = true;}} else if (userRenderMode === 1 && cc.sys.capabilities["canvas"]) {cc._renderType = cc.game.RENDER_TYPE_CANVAS;cc._supportRender = true;} else if (userRenderMode === 2 && cc.sys.capabilities["opengl"]) {cc._renderType = cc.game.RENDER_TYPE_WEBGL;cc._supportRender = true;}}// 初始化引擎函数 用于加载引擎代码cc.initEngine = function (config, cb) {if (_engineInitCalled) {var previousCallback = _engineLoadedCallback;_engineLoadedCallback = function () {previousCallback && previousCallback();cb && cb();}return;}_engineLoadedCallback = cb;// Config uninitialized and given, initialize with itif (!cc.game.config && config) {cc.game.config = config;}// No config given and no config set before, load itelse if (!cc.game.config) {cc.game._loadConfig();}config = cc.game.config;_determineRenderType(config);document.body ? _load(config) : cc._addEventListener(window, 'load', _windowLoaded, false);_engineInitCalled = true;};
})();
//+++++++++++++++++++++++++Engine initialization function end+++++++++++++++++++++++++++++

通过上面，我们了解到了调用cc.game.run之后，怎么调用cc.game.onStart函数。
下一讲，我们继续分解一下，进入我们的逻辑后，界面是怎么渲染的。

cocos2d-x-html5之游戏启动2相关推荐

用html5和js制作一个游戏启动界面（html5游戏开发一）、
制作一个游戏启动界面,用户点击屏幕进入游戏主界面首先建立一个html文档,在body里面添加一个游戏容器,再将主菜单界面元素添加到添加到游戏容器里面. <div id="game&q ...
《HTML5 2D游戏编程核心技术》——第1章，第1.3节特别功能
本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.3节特别功能,作者［美］戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号 ...
html游戏怎么做,HTML5 制做“游戏”的一个基本流程
怎样用HTML5 Canvas制作一个简单的游戏为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新 ...
开发 HTML5 小游戏
Html5小游戏在介绍小游戏之前,先看一个框架 Phaser. Phaser 框架是一个快速.免费且开源的 HTML5 游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 P ...
HTML5 2D游戏引擎研发系列第四章 Canvas技术篇-画布技术-基于手动切片动画
作者:HTML5游戏开发者社区-白泽转载请注明出处:http://html5gamedev.or HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画&g ...
cocos2d x html5项目,cocos2d-js学习笔记之项目目录
Paste_Image.png 项目目录结构目录介绍 frameworks 包含cocos2d-html5引擎.cocos2d-x引擎和各个平台的项目文件 -cocos2d-html5 cocos ...
前沿穿越——HTML5小游戏制作技巧经验
转 K米: 前沿穿越--HTML5小游戏制作技巧&经验 hello~大家好,我是黑米! O(≧▽≦)O 今天我来跟大家分享一些动画实现的相关知识,希望大家能够支持(鞠躬-- 我很喜欢很喜欢看 ...
用Cocos2D开发的iPhone游戏的教程
用Cocos2D开发的iPhone游戏的教程编辑 | 删除 | 权限设置 | 更多▼ iTudou 发表于2010年03月24日 00:36 阅读(1) 评论( 0) 分类: IT世 ...
转载: 【社区专栏】陈书艺：Egret Html5开源游戏引擎背后的故事
[社区专栏]陈书艺:Egret Html5开源游戏引擎背后的故事 2014-05-23 12:06 CSDN CODE 作者陈书艺 5 846 开源游戏 html5 Egret 游戏引擎 ...
情人节学写html5微信游戏
情人节都在干什么??? 当然是写代码!!! 看某书正好以一个html5微信游戏,很适合今天的日子附上demo:demo 请在手机上查看,pc端请切换手机调试模式,目前没弄完后续完善(图片也懒得弄了, ...

cocos2d-x-html5之游戏启动2

cocos2d-x-html5之游戏启动2相关推荐

最新文章

热门文章