cocos2dx-js 初探 整体流程helloworld.html分析
我们下载的是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分析的更多相关文章
- linux input输入子系统分析《四》：input子系统整体流程全面分析
1 input输入子系统整体流程 本节分析input子系统在内核中的实现,包括输入子系统(Input Core),事件处理层(Event Handler)和设备驱动层.由于上节代码讲解了设备 ...
- 【驱动】input子系统整体流程全面分析（触摸屏驱动为例）【转】
转自:http://www.cnblogs.com/lcw/p/3294356.html input输入子系统整体流程 input子系统在内核中的实现,包括输入子系统(Input Core),事件处理 ...
- (转)linux内存源码分析 - 内存回收(整体流程)
http://www.cnblogs.com/tolimit/p/5435068.html------------linux内存源码分析 - 内存回收(整体流程) 概述 当linux系统内存压力就大时 ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
- HDFS源码分析DataXceiver之整体流程
在<HDFS源码分析之DataXceiverServer>一文中,我们了解到在DataNode中,有一个后台工作的线程DataXceiverServer.它被用于接收来自客户端或其他数据节 ...
- Okhttp3源码解析(3)-Call分析(整体流程)
### 前言 前面我们讲了 [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源码解析(1)-OkHttpClient分析]( ...
- node.js基础模块http、网页分析工具cherrio实现爬虫
node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言 说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...
- Mybatis技术原理理——整体流程理解
前言:2018年,是最杂乱的一年!所以你看我的博客,是不是很空! 网上有很多关于Mybatis原理介绍的博文,这里介绍两篇我个人很推荐的博文 Mybatis3.4.x技术内幕和 MyBaits源码分析 ...
- vue框架整体流程
1.整体流程 (1)模板解析成render函数 (2)响应式监听 (3)首次渲染,显示页面,绑定依赖 (4)data属性变化,触发rerender 2.模板解析为render函数 参考上一篇博客. 模 ...
随机推荐
- codechef Tree and Queries Solved
题目链接: https://www.codechef.com/problems/IITK1P10 大概是:修改点值,求子树节点为0有多少个, DFS序后,BIT 询问,修改 ; { ...
- android 图片浏览器滑动切换图片
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- iOS开发 下滑隐藏Tabbar
项目中用到下滑隐藏tabbar,上滑显示. 虽然实现起来非常简单,还是记录一下. -(void)scrollViewDidScroll:(UIScrollView*)scrollView { ...
- django的form验证机制
今天遇到了一个奇怪的问题,django中formview一直返回200,但是却没有执行form_valid方法,然后在其中加了一个form_invalid方法: class StudentRegist ...
- BUPT复试专题—二进制数(2012)
https://www.nowcoder.com/practice/103dd589fed14457a673c613d8de3841?tpId=67&tqId=29634&tPage= ...
- linux nc，nmap,telnet ，natstat命令
说明 在服务器运维中 通常需要知道 机器端口状态 是否开启 是否被防火墙拦截等.今天我们介绍这三个命令 用来检测端口. nc 命令 / TCP # 安装 yum install -y nc nc 命令 ...
- 给大二学生——能够再坚持一年的ACM
[来信] 我是大二学生,就读于一所非常普通的大学.学校ACM基本零起步,去年才開始搞,我大一大二花了非常多时间搞acm,如今不太想放弃.但学校基本没人愿意搞这个. 非常快就要大三了,我一直在纠结要不要 ...
- 初解C#类、结构、弱引用
一.类 类中的数据和函数称为类的成员 数据成员是包含类的数据----字段.常量和事件的成员.数据成员可以是静态数据.类成员总是实例成员,除非用static进行显示的声明. 事件是类的成员,在发生某些行 ...
- jmeter3.0_bodydata中存在中文乱码
jmeter3.0_bodydata中存在中文乱码 1.进入jmeter.properties配置文件 找到#jsyntaxtextarea.font.family=Hack ,并将“#”取消并重启j ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...