我们下载的是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. hdu1385Minimum Transport Cost(最短路变种)

    题目链接: huangjing 思路: 输出路径的最短路变种问题..这个题目在于多组询问.那么个人认为用floyd更加稳妥一点.还有就是在每一个城市都有过路费,所以在floyd的时候更改一下松弛条件就 ...

  2. OHIFViewer meteor build 问题

    D:\Viewers-master\OHIFViewer>meteor build --directory d:/h2zViewerC:\Users\h2z\AppData\Local\.met ...

  3. [WASM] Access WebAssembly Memory Directly from JavaScript

    While JavaScript has a garbage-collected heap, WebAssembly has a linear memory space. Nevertheless u ...

  4. BeagleBone Black Industrial 杂谈

    前言 原创文章,转载引用务必注明链接.水平有限一己拙见,欢迎指正. 本文使用markdown写成,为获得更好的阅读体验,推荐访问我的博客原文: ​ 初版BeagleBone Black(Rev A4) ...

  5. Cg入门8：Vertex Shader - 更好的数据组织方式struct

    数据结构的使用:与C语言语法一样 參数的传递:參数匹配的是映射的语义的类型 输入输出:採用结构体,输入输出相应的參数的in和out可省略.函数的參数结构体就是输入參数集,函数的返回结构体就是输出參数集 ...

  6. pcapReader——源代码分析

    一.简单介绍 pcapReader是ndpi开源中的一个example. 大家能够从<ndpi directory>/example/pcapReader.c中找到它的源码.通过pcapl ...

  7. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  8. 新生入学V3.0颗粒归仓

    新生入学系统V3.0接近尾声.每次做项目都有不一样的收获.V1.0,V2.0主要是熟悉了整个项目流程是怎样进行的,可行性分析--需求分析(原型图Axure)--实体设计(PD)--类图时序图(EA)- ...

  9. 不能选择sublime作为默认打开方式的解决办法

    Sublime Text 绿色版删除后无法设置为默认打开方式…而且网上也没有给出明确的解决办法 注册表的解决办法: 删除 HKEY_CURRENT_USER\Software\Classes\Appl ...

  10. Cocos2d-x学习资源

    1.CSDN博客:http://blog.csdn.net/legendof1991/article/category/2161091.主要讲的Cocos2d-x3.0 2.CSDN博客:http:/ ...