cocos2dx-js 初探整体流程helloworld.html分析

我们下载的是cocos2dx-js的精简版本，主要是为了分析简单明了，能更清楚的看到架构流程。

下载地址:

http://cocos2d-x.org/filecenter/jsbuilder/

下载轻量版。

----------------------

服务器模拟使用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>

</head>

<body>

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>

简单来拆分下:

引入引擎js

需要一个id为gameCanvas tag为canvas的标签，为渲染使用。

主角代码为：

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分析相关推荐

cocos2dx显示html,cocos2dx-js 初探整体流程helloworld.html分析(示例代码)
我们下载的是cocos2dx-js的精简版本,主要是为了分析简单明了,能更清楚的看到架构流程. 下载地址: http://cocos2d-x.org/filecenter/jsbuilder/ 下载轻 ...
深入浅出Vue.js阅读——整体流程——实例方法与全局API的实现原理
深入浅出Vue.js阅读--整体流程--实例方法与全局API的实现原理 1. 数据相关的实例方法 2. 事件相关的实例方法 1. vm.$on 2. vm.$off 3. vm.$once 4. vm ...
linux input输入子系统分析《四》：input子系统整体流程全面分析
1 input输入子系统整体流程本节分析input子系统在内核中的实现,包括输入子系统(Input Core),事件处理层(Event Handler)和设备驱动层.由于上节代码讲解了设备 ...
HDFS源码分析DataXceiver之整体流程
在<HDFS源码分析之DataXceiverServer>一文中,我们了解到在DataNode中,有一个后台工作的线程DataXceiverServer.它被用于接收来自客户端或其他数据节 ...
MMKV_微信MMKV源码分析(一) | 整体流程
在使用MMKV框架前,需调用以下方法进行初始化 MMKV.initialize(context); 复制代码这里的 Java 层主要是获取到保存文件的路径,传入Native层,这里默认的路径是APP ...
FairFuzz 论文简读+源码分析+整体流程简述
FairFuzz: A Targeted Mutation Strategy for Increasing Greybox Fuzz Testing Coverage 一.论文阅读 Abstract ...
关于鸿蒙系统 JS UI 框架源码的分析
鸿蒙是华为研发的新一代终端操作系统,能适用于 IoT.手表.手机.Pad.电视等各种类型的设备上,扛起"国产操作系统"的大旗,也遭受了很多非议.2021 年 6 月初发布了 Ope ...
JavaScript异步精讲，让你更加明白Js的执行流程！
JavaScript异步精讲,让你更加明白Js的执行流程! 问题点什么是单线程,和异步有什么关系什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 as ...
二、Netty服务端/客户端启动整体流程
一.综述 Netty 的整体流程相对来说还是比较复杂的,初学者往往会被绕晕.所以这里总结了一下整体的流程,从而对 Netty 的整体服务流程有一个大致的了解.从功能上,流程可以分为服务启动.建立连接. ...

cocos2dx-js 初探整体流程helloworld.html分析

cocos2dx-js 初探整体流程helloworld.html分析相关推荐

最新文章

热门文章

cocos2dx-js 初探 整体流程helloworld.html分析

cocos2dx-js 初探 整体流程helloworld.html分析相关推荐

最新文章

热门文章

cocos2dx-js 初探整体流程helloworld.html分析

cocos2dx-js 初探整体流程helloworld.html分析相关推荐