1
2
3
4
5
6
<body>
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="480" height="720"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>

首先加载的是CCBoot.js文档

执行主循环

1
2
3
4
5
6
7
8
9
10
11
12


mainLoop: function () {
if (this._purgeDirectorInNextLoop) {
this._purgeDirectorInNextLoop = false;
this.purgeDirector();
}
else if (!this.invalid) {
this.drawScene();
}
},

_purgeDirectorInNextLoop:下一帧是否需要清除自身,一般在cc.director.end()赋值为true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

* Draw the scene. This method is called every frame. Don't call it manually.
*/
drawScene: function () {
var renderer = cc.renderer;

// calculate "global" dt
this.calculateDeltaTime();

大专栏  Cocos2dx-JS学习01n class="comment">//tick before glClear: issue #533
if (!this._paused) {
this._scheduler.update(this._deltaTime);
cc.eventManager.dispatchEvent(this._eventAfterUpdate);
}


//首先执行调度器中的任务,然后触发cc.director.EVENT_AFTER_UPDATE事件,检查交互事件,有的话就分发处理




/* to avoid flickr, nextScene MUST be here: after tick and before draw.
XXX: Which bug is this one. It seems that it can't be reproduced with v0.9 */
if (this._nextScene) {
this.setNextScene();
}
//如果有场景切换,便切换

//渲染当前scene
// draw the scene
if (this._runningScene) {
if (renderer.childrenOrderDirty) {
cc.renderer.clearRenderCommands();
cc.renderer.assignedZ = 0;
this._runningScene._renderCmd._curLevel = 0; //level start from 0;
this._runningScene.visit();
renderer.resetFlag();
}
else if (renderer.transformDirty()) {
renderer.transform();
}
}

renderer.clear();

// draw the notifications node
if (this._notificationNode)
this._notificationNode.visit();
//遍历节点,更新节点的空间转换矩阵,发送命令给渲染器
cc.eventManager.dispatchEvent(this._eventAfterVisit);
cc.g_NumberOfDraws = 0;

renderer.rendering(cc._renderContext);
this._totalFrames++;
//排序,绘制
cc.eventManager.dispatchEvent(this._eventAfterDraw);
cc.eventManager.frameUpdateListeners();
//更新帧率
this._calculateMPF();
},

关于绘制管理

关于内存管理(引用计数法)

调度器

cc.Node有相关API

1
2
3
4
node.scheduleUpdate()
node.update = function (dt) {

}

默认调度器:使用scheduleUpdate,必须重写update函数,dt是时间间隔

自定义调度器:

1
node.schedule(callback,inteval,repeate,delay,key)

回调函数(必须),时间间隔(默认0),重复次数(默认cc.REPEAT_FOREVER),延时时间(默认0),唯一标示符

卸载调度器:

unschedule和unscheduleAllCallbacks

场景管理

使用栈的结构

在退出的相关生命周期函数中,应该将this._super()函数放在最后调用,遵循“先进后出“

A->B

SceneA的onEixtTransitionDidStart方法开始前SceneB的ctor执行,所以不要在ctor中做开销大的工作

精灵

每个精灵一般关联一张纹理(Texture2D对象)

四种方法创建

Cocos2dx-JS学习01的更多相关文章

  1. node.js 学习01

    PHP开发技术栈(LAMP) Linux  Apache  MySql  PHPnode.js 全栈开发技术栈(MEAN): MongoDB  Express  Angular  Node.js 现阶 ...

  2. 【8-18】JS学习01

    Source : http://www.w3school.com.cn/html 外部的 JavaScript 也可以把脚本保存到外部文件中.外部文件通常包含被多个网页使用的代码. 外部 JavaSc ...

  3. jquery动画切换引擎插件 Velocity.js 学习01

    一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

  4. JS学习-01

    01

  5. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  6. ThinkPhp学习01

    原文:ThinkPhp学习01 一.ThinkPHP的介绍           MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板 ...

  7. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  8. JS学习小结(上)

    学而时习之,不亦说乎,开启JS学习新乐章~ JS是干啥的?网页特效,它主要是实现控制结构和样式,是一种行为,有多重要,不言而喻吧,页面炫酷的资本. 1. JS输出: alert("hello ...

  9. vue学习01

    vue学习01   1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...

  10. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. 文献阅读报告 - Pedestrian Trajectory Prediction With Learning-based Approaches A Comparative Study

    概述 本文献是一篇文献综述,以自动驾驶载具对外围物体行动轨迹的预测为切入点,介绍了基于运动学(kinematics-based)和基于机器学习(learning-based)的两大类预测方法. 并选择 ...

  2. POJ 3013 SPFA算法,邻接表的使用

    Big Christmas Tree Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 19029   Accepted: 4 ...

  3. PAT Advanced 1106 Lowest Price in Supply Chain (25) [DFS,BFS,树的遍历]

    题目 A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)– everyone in ...

  4. Mybatis实现联合查询(六)

    1. 疑问 在之前的章节中我们阐述了如何用Mybatis实现检查的查询,而我们实际的需求中,绝大部分查询都不只是针对单张数据表的简单查询,所以我们接下来要看一下Mybatis如何实现联合查询. 2. ...

  5. Django2.0——模板渲染(一)

    在前面的介绍中我们都是用简单的 django.http.HttpResponse来把内容显示到网页上,本节将讲解如何使用渲染模板的方法来显示内容,即调用精美的HTML页面.模板的创建既可以在项目下创建 ...

  6. Codeforce 370C Mittens 巧妙数学题

    这道题目我一开始想错了,觉得只要排好序,再从头到尾把可以相互交换的进行下交换就可以了...事实证明是错的.正确的解法比较巧妙,而且写法非常好,值得学习 首先,要注意的一个规律是,假如最大的颜色数字出现 ...

  7. IntelliJ IDEA 2019.2 LUA环境搭建说明

    1.搭建GCC 添加系统环境变量PATH  为C:\MinGW\bin目录 测试命令进入CMD    gcc -v 2.编译LUA cd到lua/src目录      mingw32-make min ...

  8. 常用DOS命令(1) color,dir,copy,shutdown,mkdir(md),rmdir(rd),attrib,cd

    1.  color color [attr] 设置默认的控制台前景和背景颜色. attr        指定控制台输出的颜色属性.颜色属性由两个十六进制数字指定 -- 第一个对应于背景,第二个对应于前 ...

  9. Vue专题-生命周期

    有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求开发,针对这样的需求,Vue提供给我们一系列的钩子函数. 本文详细介绍了Vue实例在创建和销毁的过程中,我们 ...

  10. python pandas 对带时间序列的数据进行重采样处理

    今天老板要处理一批带有时间序列的数据,源数据为1秒钟一行的csv数据,处理之后变成15分钟一行的数据. 源数据示例如下: time B00 B01 ... RollMean2.5 RollMean10 ...