我们下载的是cocos2dx-js的精简版本，主要是为了分析简单明了，能更清楚的看到架构流程。
下载地址:
http://cocos2d-x.org/filecenter/jsbuilder/
下载轻量版。
百牛信息技术bainiu.ltd整理发布于博客园
----------------------
服务器模拟使用xampp软件。
调试使用360浏览器自带调试。
开发环境当前没找到一个好的，暂时使用notepad++编辑，如有好的，请告知。
-----------------
一般学习一个引擎的思路便是阅读引擎自带的demo源码，熟悉架构以及模块。关于demo，我们下载完整版本，在cocos2d-js-v3.1\samples\js-tests\src 这个路径下。
关于api查询，可在官网找到，具体为http://www.cocos2d-x.org/wiki/Reference。
------------
下面我们来分析demo，熟悉下流程。

我们来看的是
HelloWorld.html这个文件.

<!DOCTYPE html>
<html>
<head>
<title>Hello Cocos2d-JS</title>
<script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script type="text/javascript">
window.onload = function(){
cc.game.onStart = function(){
//load resources
cc.LoaderScene.preload(["HelloWorld.png"], function () {
var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();
var sprite = cc.Sprite.create("HelloWorld.png");
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
this.addChild(sprite, 0);

var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2);
this.addChild(label, 1);
}
});
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run("gameCanvas");
};
</script>
</body>
</html>

简单来拆分下:
<script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
引入引擎js
<canvas id="gameCanvas" width="800" height="450"></canvas>
需要一个id为gameCanvas tag为canvas的标签，为渲染使用。

主角代码为：
<script type="text/javascript">
window.onload = function(){
cc.game.onStart = function(){
//load resources
cc.LoaderScene.preload(["HelloWorld.png"], function () {
var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();
var sprite = cc.Sprite.create("HelloWorld.png");
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
this.addChild(sprite, 0);

var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2);
this.addChild(label, 1);
}
});
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run("gameCanvas");
};
</script>

我们可以看到标准的框架:
window.onload = function(){
};
代码写在这里，当环境加载完毕触发。
cc.game.onStart
给这个赋值。
cc.game.run("gameCanvas");
这个真正开始引擎。
cc.LoaderScene.preload 为加载前面列出来的数组资源，加载完毕后进入第二个函数。
加载完毕，创建了一个Scene ，这个为场景。
cc.director.runScene(new MyScene());
这个为将场景加载进入导演里面，此时才会去绘制，显示，以及响应。
我们来看下var MyScene里面的元素，在onEnter里面添加了一些元素，比如sprite label 使用addChild 将其加载进入scene里面，最终呈现出来。

流程整理为：
Window.onload 里面配置cc.game.onStart 为自己加载的第一个界面。
使用 cc.game.run("gameCanvas");进行引擎启动。

下面我们来看下引擎里面的cc.game.run函数的实现:

run: function (id) {
var self = this;
var _run = function () {
if (id) {
self.config[self.CONFIG_KEY.id] = id;
}
if (!self._prepareCalled) {
self.prepare(function () {
self._prepared = true;
});
}
if (cc._supportRender) {
self._checkPrepare = setInterval(function () {
if (self._prepared) {
cc._setup(self.config[self.CONFIG_KEY.id]);
self._runMainLoop();
self._eventHide = self._eventHide || new cc.EventCustom(self.EVENT_HIDE);
self._eventHide.setUserData(self);
self._eventShow = self._eventShow || new cc.EventCustom(self.EVENT_SHOW);
self._eventShow.setUserData(self);
self.onStart();
clearInterval(self._checkPrepare);
}
}, 10);
}
};
document.body ?
_run() :
cc._addEventListener(window, 'load', function () {
this.removeEventListener('load', arguments.callee, false);
_run();
}, false);
},

我们看,这里为首次进入初始化代码。

if (!self._prepareCalled) {
self.prepare(function () {
self._prepared = true;
});
}
关键代码：在
if (cc._supportRender) 里面，这个默认肯定是要支持渲染的。
cc._setup()设置默认参数，一些全局对象创建。

_runMainLoop: function () {
var self = this, callback, config = self.config, CONFIG_KEY = self.CONFIG_KEY,
director = cc.director;
director.setDisplayStats(config[CONFIG_KEY.showFPS]);
callback = function () {
if (!self._paused) {
director.mainLoop();
if(self._intervalId)
window.cancelAnimationFrame(self._intervalId);
self._intervalId = window.requestAnimFrame(callback);
}
};
window.requestAnimFrame(callback);
self._paused = false;
}

关键函数requestAnimFrame 执行刷新频率， director.mainLoop(); 一直执行，推动游戏执行。
调用配置的onstart 函数执行真正代码。
self.onStart();

cocos2dx-js 初探 整体流程helloworld.html分析的更多相关文章

  1. linux input输入子系统分析《四》：input子系统整体流程全面分析

    1      input输入子系统整体流程 本节分析input子系统在内核中的实现,包括输入子系统(Input Core),事件处理层(Event Handler)和设备驱动层.由于上节代码讲解了设备 ...

  2. 【驱动】input子系统整体流程全面分析（触摸屏驱动为例）【转】

    转自:http://www.cnblogs.com/lcw/p/3294356.html input输入子系统整体流程 input子系统在内核中的实现,包括输入子系统(Input Core),事件处理 ...

  3. (转)linux内存源码分析 - 内存回收(整体流程)

    http://www.cnblogs.com/tolimit/p/5435068.html------------linux内存源码分析 - 内存回收(整体流程) 概述 当linux系统内存压力就大时 ...

  4. Node.js开发入门—HelloWorld再分析

    在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...

  5. HDFS源码分析DataXceiver之整体流程

    在<HDFS源码分析之DataXceiverServer>一文中,我们了解到在DataNode中,有一个后台工作的线程DataXceiverServer.它被用于接收来自客户端或其他数据节 ...

  6. Okhttp3源码解析(3)-Call分析(整体流程)

    ### 前言 前面我们讲了 [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源码解析(1)-OkHttpClient分析]( ...

  7. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  8. Mybatis技术原理理——整体流程理解

    前言:2018年,是最杂乱的一年!所以你看我的博客,是不是很空! 网上有很多关于Mybatis原理介绍的博文,这里介绍两篇我个人很推荐的博文 Mybatis3.4.x技术内幕和 MyBaits源码分析 ...

  9. vue框架整体流程

    1.整体流程 (1)模板解析成render函数 (2)响应式监听 (3)首次渲染,显示页面,绑定依赖 (4)data属性变化,触发rerender 2.模板解析为render函数 参考上一篇博客. 模 ...

随机推荐

  1. Currency Exchange（最短路）

    poj—— 1860 Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 29851   Ac ...

  2. springboot jetty替换tomcat

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  3. Spring MVC集成Spring Data Reids和Spring Session实现Session共享

    说明:Spring MVC中集成Spring Data Redis和Spring Session时版本是一个坑点,比如最新版本的Spring Data Redis已经不包含Jedis了,需要自行引入. ...

  4. 【Windows7】win7启动 报错 AutoIt错误，不能打开脚本文件

    解决方法: 1.开始-->运行-->regedit 2.按照下图 3.

  5. aSmack连接server异常smack.SmackException$ ConnectionException thrown by XMPPConnection.connect();

    以下是我在研究asmack4.0出现的异常 06-17 12:02:56.924: W/System.err(10622): org.jivesoftware.smack.SmackException ...

  6. BUPT复试专题—串查找(？)

    https://www.nowcoder.com/practice/a988eda518f242c29009f8620f654ede?tpId=67&tqId=29642&rp=0&a ...

  7. PHP读取excel(4)

    这一小节内容主要是PHPExcel读取少量excel数据,具体代码如下: <?php //数据较少的时候,一次性读取出来放到数组里 header("Content-Type:text/ ...

  8. vs2010配置VL_FEAT库

    VL_FEAT库是计算机视觉中的一个开源库,支持C/C++,Matlab,可以在http://www.vlfeat.org/下载. 本文主要讲一下VS2010中如何配置vl_feat库(算是对原文的一 ...

  9. Python开发【迭代器】

    1.迭代器 1.1.迭代器创建:指定数据创建迭代器(使用iter()和next() ) x = [1, 2, 3] #定义一个列表:<class 'list'> y = iter(x) # ...

  10. Android SDK更新失败的解决方案（原创）

    笔者在搭建好Android环境后,进行Android的SDK更新下载升级,乌龟的速度,更让人生气的是到了85%的进度时,直接timeout,循环3次无果.查阅相关资料,原来是Google的服务器遭遇了 ...