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. 吴裕雄--天生自然C++语言学习笔记:C++简介

    C++ 是一种中级语言,它是由 Bjarne Stroustrup 于 年在贝尔实验室开始设计开发的.C++ 进一步扩充和完善了 C 语言,是一种面向对象的程序设计语言.C++ 可运行于多种平台上,如 ...

  2. Java static的用法以及原理(06)

    静态:static 用法:是一个修饰符,用于修饰成员(成员变量,成员函数), 当成员被静态修饰后,就多了一个调用方式,除了可以被对象调用外,还可以直接被类名调:类名.静态成员 类名.静态成员 存在:方 ...

  3. Python笔记_第四篇_高阶编程_再议装饰器和再议内置函数

    1. 概述: 我们在前面用了很多的装饰器这个工具的方法.这个位置要系统的讲一下装饰器. 1.2 为什么需要装饰器. 装饰器本质是一个Python函数,它可以让其他函数在不需要任何代码变动的前提下增加额 ...

  4. Python笔记_第四篇_高阶编程_检测_2.文档检测

    1. 文档检测: 我们观察官方的函数编写的时候会在函数或者类当中有些类的备注,这些备注叫做文档.当我们在编写函数的时候,可以去显示这些文档.因此我们可以用这个文档来进行检测.另外我们还需要导入doct ...

  5. jQuery如何给DOM添加ID

    ID每个元素只能有一个,ID名同一页面也不能重复,addID方法是不需要的,和其他属性一样用attr方法就行了, $(singleTarget).attr('id','idName'); 更简单的 $ ...

  6. JavaWeb部分视频\2-12JSP,EL和JSTL

    JavaWeb知识结构图 第3节 EL介绍和运算符 && 第4节 EL获取域中存储的数据 ## EL表达式 1. 概念:Expression Language 表达式语言 2. 作用: ...

  7. JAVA多线程之状态转换图

    线程状态转换图如下: 1.新建(new):线程对象被创建后就进入了新建状态.如:Thread thread = new Thread(); 2.就绪状态(Runnable):也被称为“可执行状态”.线 ...

  8. Python dict 字典 keys和values对换

    原字典: d1 = { 'en':'英语', 'cn':'中文', 'fr':'法语', 'jp':'日语' } 经过相互对换: d1_inverse = {values:keys for keys, ...

  9. 频率类组件-认证规图分析-JWT认证-drf-jwt插件

    频率类源码 # 1)APIView的dispath方法中的 self.initial(request, *args, **kwargs) 点进去 # 2)self.check_throttles(re ...

  10. Django专题

    一.   web框架的原理: 1.C/S架构和B/S架构 C/S:客户端与服务器 B/S:浏览器与服务器     web开发 2.web开发的本质: socket服务端:收发消息都是按照HTTP协议的 ...