Ticker Class
The Ticker provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick event to be notified when a set time interval has elapsed.
Note that the interval that the tick event is called is a target interval, and may be broadcast at a slower interval
during times of high CPU load. The Ticker class uses a static interface (ex. Ticker.getPaused()
) and
should not be instantiated.
Example
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
// Actions carried out each frame
if (!event.paused) {
// Actions carried out when the Ticker is not paused.
}
}
To update a stage every tick, the Stage instance can also be used as a listener, as it will automatically update when it receives a tick event:
createjs.Ticker.addEventListener("tick", stage);
Item Index
Methods
- _getTime
- _handleAF
- _handleTimeout
- _setupTick
- _tick
- addEventListener
- addListener static deprecated
- dispatchEvent
- getFPS static
- getInterval static
- getMeasuredFPS static
- getTicks static
- getTime static
- hasEventListener
- init static
- initialize
- removeAllEventListeners
- removeAllListeners static deprecated
- removeEventListener
- removeListener static deprecated
- setFPS static
- setInterval static
- setPaused static
- toString
Properties
Events
Methods
_getTime
()
protected
_handleAF
()
protected
_handleTimeout
()
protected
_setupTick
()
protected
_tick
()
protected
addEventListener
-
type
-
listener
Adds the specified event listener. Note that adding multiple listeners to the same function will result in multiple callbacks getting fired.
Example
displayObject.addEventListener("click", handleClick);
function handleClick(event) {
// Click happened.
}
Parameters:
addListener
-
o
-
pauseable
Adds a listener for the tick event. The listener must be either an object exposing a tick
method,
or a function. The listener will be called once each tick / interval. The interval is specified via the
.setInterval(ms)
method.
The tick method or function is passed two parameters: the elapsed time between the previous tick and the current
one, and a boolean indicating whether Ticker is paused.
dispatchEvent
-
eventObj
-
[target]
Dispatches the specified event to all listeners.
Example
// Use a string event
this.dispatchEvent("complete");
// Use an object
var event = {
type: "complete",
foo: "bar"
};
this.dispatchEvent(event);
Parameters:
-
eventObj
Object | StringAn object with a "type" property, or a string type. If a string is used, dispatchEvent will construct a generic event object with the specified type.
-
[target]
Object optionalThe object to use as the target property of the event object. This will default to the dispatching object.
Returns:
getFPS
()
Number
static
Returns the target frame rate in frames per second (FPS). For example, with an interval of 40, getFPS()
will return 25 (1000ms per second divided by 40 ms per tick = 25fps).
Returns:
getInterval
()
Number
static
Returns the current target time between ticks, as set with setInterval.
Returns:
getMeasuredFPS
-
[ticks]
Returns the actual frames / ticks per second.
Parameters:
-
[ticks]
Number optionalThe number of previous ticks over which to measure the actual frames / ticks per second. Defaults to the number of ticks per second.
Returns:
getTicks
-
pauseable
Returns the number of ticks that have been broadcast by Ticker.
Parameters:
-
pauseable
BooleanIndicates whether to include ticks that would have been broadcast while Ticker was paused. If true only tick events broadcast while Ticker is not paused will be returned. If false, tick events that would have been broadcast while Ticker was paused will be included in the return value. The default value is false.
Returns:
getTime
-
[runTime=false]
Returns the number of milliseconds that have elapsed since Ticker was initialized. For example, you could use this in a time synchronized animation to determine the exact amount of time that has elapsed.
Parameters:
-
[runTime=false]
Boolean optionalIf true only time elapsed while Ticker was not paused will be returned. If false, the value returned will be total time elapsed since the first tick event listener was added.
Returns:
hasEventListener
-
type
Indicates whether there is at least one listener for the specified event type.
Parameters:
-
type
StringThe string type of the event.
Returns:
init
()
static
Initializes or resets the timer, clearing all associated listeners and fps measuring data, starting the tick. This is called automatically when the first listener is added.
initialize
()
protected
Initialization method.
removeAllEventListeners
-
[type]
Removes all listeners for the specified type, or all listeners of all types.
Example
// Remove all listeners
displayObject.removeAllEvenListeners();
// Remove all click listeners
displayObject.removeAllEventListeners("click");
Parameters:
-
[type]
String optionalThe string type of the event. If omitted, all listeners for all types will be removed.
removeAllListeners
()
deprecated
static
Removes all listeners.
removeEventListener
-
type
-
listener
Removes the specified event listener.
Important Note: that you must pass the exact function reference used when the event was added. If a proxy function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or closure will not work.
Example
displayObject.removeEventListener("click", handleClick);
removeListener
-
o
Removes the specified listener.
Parameters:
-
o
ObjectThe object or function to remove from listening from the tick event.
setFPS
-
value
Sets the target frame rate in frames per second (FPS). For example, with an interval of 40, getFPS()
will return 25 (1000ms per second divided by 40 ms per tick = 25fps).
Parameters:
-
value
NumberTarget number of ticks broadcast per second.
setInterval
-
interval
Sets the target time (in milliseconds) between ticks. Default is 50 (20 FPS).
Note actual time between ticks may be more than requested depending on CPU load.
Parameters:
-
interval
NumberTime in milliseconds between ticks. Default value is 50.
setPaused
-
value
Changes the "paused" state of the Ticker, which can be retrieved by the Ticker/getPaused
method, and is passed as the "paused" property of the tick
event. When the ticker is paused, all
listeners will still receive a tick event, but the paused
property will be false.
Note that in EaselJS v0.5.0 and earlier, "pauseable" listeners would not receive the tick callback when Ticker was paused. This is no longer the case.
Example
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setPaused(true);
function handleTick(event) {
console.log("Paused:", event.paused, createjs.Ticker.getPaused());
}
Parameters:
-
value
BooleanIndicates whether to pause (true) or unpause (false) Ticker.
Properties
useRAF
Boolean
static
Indicates whether Ticker should use requestAnimationFrame
if it is supported in the browser.
If false, Ticker will use setTimeout
. If you use RAF, it is recommended that you set the framerate
to a divisor of 60 (ex. 15, 20, 30, 60).
Default: false
Events
tick
Dispatched each tick. The event will be dispatched to each listener even when the Ticker has been paused using setPaused.
Example
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
console.log("Paused:", event.paused, event.delta);
}
Event Payload:
-
target
ObjectThe object that dispatched the event.
-
type
StringThe event type.
-
paused
BooleanIndicates whether the ticker is currently paused.
-
delta
NumberThe time elapsed in ms since the last tick.
-
time
NumberThe total time in ms since Ticker was initialized.
-
runTime
NumberThe total time in ms that Ticker was not paused since it was initialized. For example, you could determine the amount of time that the Ticker has been paused since initialization with time-runTime.