Function of Tick or Ticker

Question

What is the use of tick function in easeljs. When to use it? What exactly does it do to a stage? What is the exact format? I see different ways in which it has been called in different tutorials.

What is difference between tick and ticker?

Answer 1

The tick function on the Stage (and other display objects) advances all the child animations. Things like MovieClip and Sprite have frame-based animation, which are advanced the the next frame whenever they are ticked. You can turn off updateOnTick on the stage to prevent this.

The Ticker is a utility class that manages an actual heartbeat. It is a totally optional utility, but it creates an interval (using timeouts or requestAnimationFrame), and then dispatches events at a ~constant rate (the rate will be dependant on the performance on the device).

You can set the stage as a listener to the Ticker (instead of a custom handler function), and it will automatically call update() (and hence tick()) on the stage. This is the easiest usage. You can also manually call stage.update() in your own function to tick and redraw the stage. Note that using the stage as a listener guarantees that the stage will constantly update - so if you want to control it, then listen to the Ticker yourself, and manually call stage.update().