createjs初学-关于Ticker

tick本来的意思是钟表的滴答声，在createjs中的Ticker当然就是于时间相关的。

Ticker是一个静态类，提供了好多静态方法和属性，不要去实例化它。

在API文档中对Ticker的介绍是它是一个集中的间隔广播，侦听tick时间后再设定的时间间隔会调用侦听函数。

但是我觉着在Beginning HTML5 Games with CreateJS这本书中的解释更好。Ticker类为游戏开发提供了一个主要的定时类。它主要的目的就是把stage渲染的工作集中起来，也就是说定时调用stage.update()这个方法。Ticker设置的频率也就是游戏的帧数了。

要注意一点就是在CPU使用率过高时，Ticker可能会比设定的要慢。这个很容易理解。

Ticker的使用如下，Ticker静态类侦听tick事件，然后设置好相应的函数就行

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {//todo
}

对于更新舞台来说就是，可以先设置一个帧频

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {stage.update();
}

也可以这样写

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);

因为addEventListener这个方法是这样的

addEventListener (type listener [useCapture] )

其中参数listener可以是一个方法，也可以是一个对象，这个对象里面有handleEvent这个方法，来出来侦听事件。
而Stage类里面就有handleEvent这个方法，而且就是用来处理tick事件的，看Stage里面的源码就知道

p.handleEvent = function(evt) {if (evt.type == "tick") { this.update(evt); }
};

tick事件的event

function handleTick(event) {//todo
}

在侦听函数中event的数据
1.event.paused 表示ticker是否处于暂停状态
2.event.delta 在上一次tick事件之后到这次事件的时间间隔，以毫秒为单位。
3.event.time 在Ticker被初始化以后的时间总和，以毫秒为单位。
4.event.runTime 在Ticker被初始化以后没有暂停的时间总和，以毫秒为单位。

Ticker类的属性
1.interval 这个就是用来设置间隔的时间，以毫秒为单位。默认为50。
在RAF模式下，这个参数就会被忽略。
2.framerate 这个参数用来直接设置fps，其实内部实现就是设置interval
interval=1000/framerate。
3.maxDelta 指定tick事件中的delta最大值。文档中推荐这个值为interval的两倍。
4.paused 在ticker暂停时，所有的侦听器仍然会接受到tick事件，但是事件中的paused会是true；

createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.paused = true;
function handleTick(event) {console.log(event.paused);
}

5.timingMode指定tick的timing模式。一共有三种模式，TIMEOUT、RAF和RAF_SYNCHEN。
（1）TIMEOUT，这种模式下使用的就是setTimeOut这个方法实现的。是timingMode的默认模式。
（2）RAF 在这个模式下使用requestAnimationFrame，完全忽略Ticker的帧频。如果requestAnimationFrame API不支持的话就用TIMEOUT模式。
（3）RAF_SYNCHEN 在这个模式下使用requestAnimationFrame，但是试图与ticker的帧频同步。如果requestAnimationFrame API不支持的话就用TIMEOUT模式。

Ticker类的方法
1.getTime ([runTime=false] )
返回Ticker初始化以后的总时间，如果没有初始化就返回-1。（初始化时在添加第一个侦听时进行的）。参数runTime表示返回的是否包含暂停时间，true的话只有tick运行的时间，false的话是所有时间。
2.getEventTime (runTime ) 和getTime差不多，但是返回的是最近一次tick事件的时间。
3.getMeasuredFPS() 获得当前的实际帧频。
4.getMeasuredTickTime 获得平均一次tick所有的时间，大概就是在这一次tick所用的时间。
5.getTicks (pauseable) 获得初始化后所有tick的次数参数表明是否包含暂停的tick
6.reset() 停止Ticker并且移除所有的侦听。

createjs初学-关于Ticker相关推荐

createjs开发h5游戏: 指尖大冒险
之前看到一个指尖冒险游戏,觉得挺有意思,就想学习一下怎么实现,毕竟当产经提出类似的需求时,问我等开发可不可以实现的时候,不至于回答不知道. 本文的主要思路,参考的是凹凸实验室的这篇文章:H5游戏开发: ...
h5小游戏--围住神经猫笔记
CreateJS 1,Ticker类为游戏开发提供了一个主要的定时类.它主要的目的就是把stage渲染的工作集中起来,也就是说定时调用stage.update()这个方法.Ticker设置的频率也就是 ...
Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...
CreateJs入门必知必会
CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. CreateJS主要包含如下四个类库: Ea ...
createjs中shape的属性regX和regY
官方文档说regX和regY是图形与注册点的距离. 那么注册点是什么呢? 我理解注册点就是图形的x/y对应的点图形动效的原点就是注册点如果修改图形的regX和regY值图形在画布上的位置是会被改变 ...
canvas 动画库 CreateJs 之 EaselJS（上篇）
本文来自网易云社区作者:田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
createjs入门
createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件.地址:http://www.createjs.com/ 开发createjs的动画或游戏, ...
CreateJS 学习4 动画、TweenJS
水平移动动画示例 <html><head><script src="easeljs.min.js" charset="utf-8" ...

createjs初学-关于Ticker

createjs初学-关于Ticker相关推荐

最新文章

热门文章