time-and-timers
Use this skill when using timers and time-based events in Phaser 4. Covers TimerEvent, delayed calls, looping timers, the Clock plugin, and time scaling. Triggers on: timer, delay, delayedCall, TimerEvent, Clock, time event.
By phaserjs · 524 installs
npx skills add phaserjs/phaser --skill time-and-timers
Source repository · Upstream listing
Time and Timers
Clock plugin, TimerEvent, delays, loops, Timeline event sequencing, pausing time, time scale, and delta time in Phaser 4.
Key source paths: src/time/Clock.js , src/time/TimerEvent.js , src/time/Timeline.js , src/time/typedefs/ , src/time/events/
Related skills: ../scenes/SKILL.md, ../tweens/SKILL.md
Quick Start
this.time is the scene's Clock instance (registered as the 'Clock' plugin under the key time ). It creates and manages TimerEvent objects that fire callbacks based on game time.
Core Concepts
Clock (this.time)
The Clock is a Scene level plugin that tracks game time and updates all of its TimerEvents each frame. Key properties:
now current time in ms (equivalent to time passed to the scene update method).
startTime timestamp when the scene started.
timeScale multiplier applied to delta time. Default 1 . Values above 1 speed up all timers; below 1 slow them down; 0 freezes time.
paused when true , no TimerEvents are updated.
The Clock listens to PRE UPDATE (to flush pending additions/removals) and UPDATE (to tick active events). It is automatically shut down and destroyed with the scene.
TimerEvent
A TimerEvent accumulates elapsed time each frame: elapsed += delta clock.timeScale event.timeScale . When elapsed = delay , the callback fires. After all repeats are exhausted the event is removed from the Clock on the next frame.
Key properties set via config: delay , repeat , loop , callback , callbackScope , args , timeScale , startAt , paused .
Timeline (this.add.timeline)
A Timeline is a sequencer for scheduling actions at specific points in time. Unlike the Clock (which manages independent timers), a Timeline runs a linear sequence of events keyed by absolute or relative timestamps.
Timelines always start paused . You must call play() to start them. They are created via the GameObjectFactory and destroyed automatically when the scene shuts down.
Common Patterns
Delayed Call
Repeating Timer with Finite Count
Infinite Loop
Setting repeat: 1 is equivalent to loop: true .
First Fire Shortcut with startAt
Stopping and Removing Timers
Pausing and Resuming
Time Scale (Slow Motion / Fast Forward)
Reading Timer State
Timeline: Sequencing Events
Timeline: Relative Timing with from and in
at absolute ms from timeline start (default 0).
in offset from current elapsed time (useful when adding events to a running timeline).
from offset from the previous event's start time.
Priority: from overrides in , which overrides at .
Timeline: Conditional Events
If the if callback returns false , the event is skipped (marked complete but actions are not executed).
Timeline: Looping
The loop callback on a TimelineEventConfig fires on repeat iterations (not the first run).
Timeline: Pause, Resume, Stop, Reset
Timeline: Time Scale
Note: Timeline timeScale does not affect tweens created by the timeline. Set tween timeScale separately.
Timeline: Full Cutscene Example
Timelines excel at choreographing cutscenes with mixed actions (callbacks, tweens, sounds, property sets, and custom events):
Timer Reset and Reuse
A completed TimerEvent can be reset with a new config and re added to the Clock:
Configuration Reference
TimerEventConfig
Property Type Default Description
delay number 0 Delay in ms before the callback fires
repeat number 0 Times to repeat after first fire. Use 1 for infinite
loop boolean false If true , repeats indefinitely (same as repeat: 1 )
callback function Function called when the timer fires
callbackScope any TimerEvent The this context for the callback
args Array [] Extra arguments passed to the callback
timeScale number 1 Per event time multiplier
startAt number 0 Pre fill elapsed time in ms (makes first fire happen sooner)
paused boolean false Start the timer in a paused state
TimelineEventConfig
Property Type Default Description
at number 0 Absolute time in ms from timeline start
in number Offset from current elapsed (overrides at )
from number Offset from previous event time (overrides at and in )
run function Callback invoked when event fires
loop function Callback invoked on repeat iterations (not first run)
if function Guard function; return false to skip the event
event string Event name emitted on the Timeline instance
target any Scope for run / loop / if and target for set
set object Key value pairs applied to target when event fires
tween TweenConfig Tween config or instance created when event fires
sound string/object Sound key or { key, config } to play
once boolean false Remove this event after it fires
stop boolean false Stop the entire timeline when this event fires
TimelineEvent (Internal)
The processed event object stored in timeline.events[] . Extends config with:
Property Type Description
complete boolean Whether this event has fired
time number Resolved absolute time in ms
repeat number How many times this event has repeated
tweenInstance Tween/TweenChain Reference to spawned tween (if any)
Events
Timeline Events
Event Constant Listener Signature Fired When
'complete' Phaser.Time.Events.COMPLETE (timeline) All timeline events have been run
Custom events via the event property in TimelineEventConfig are also emitted on the Timeline instance with signature (target) .
TimerEvent / Clock
TimerEvent and Clock do not emit EventEmitter events. Timers use the callback property directly. The Clock is managed by scene lifecycle events ( PRE UPDATE , UPDATE , SHUTDOWN , DESTROY ).
API Quick Reference
Clock (this.time)
Method Signature Returns Description
addEvent (config \ TimerEvent) TimerEvent Create and schedule a timer event
delayedCall (delay, callback, args?, scope?) TimerEvent Shorthand for a one shot delayed call
removeEvent (event \ event[]) this Remove specific timer(s)
removeAllEvents () this Schedule removal of all active timers
clearPendingEvents () this Clear timers not yet added to active list
Property Type Description
now number Current clock time in ms
startTime number Time the scene started
timeScale number Delta multiplier for all timers
paused boolean Freeze all timers
TimerEvent
Method Returns Description
getProgress() number 0..1 progress of current iteration
getOverallProgress() number 0..1 progress across all repeats
getElapsed() number Elapsed ms this iteration
getElapsedSeconds() number Elapsed seconds this iteration
getRemaining() number Ms until next fire
getRemainingSeconds() number Seconds until next fire
getOverallRemaining() number Ms until final fire
getOverallRemainingSeconds() number Seconds until final fire
getRepeatCount() number Repeats remaining
remove(dispatchCallback?) void Expire the timer (optionally fire callback)
reset(config) TimerEvent Reinitialize with new config
destroy() void Null out callback references
Timeline (this.add.timeline)
Method Signature Returns Description
add (config \ config[]) this Append events to the timeline
play (fromStart?) this Start playing (default resets to start)
pause () this Pause timeline and spawned tweens
resume () this Resume timeline and spawned tweens
stop () this Stop (sets paused + complete)
reset (loop?) this Reset elapsed and all events to incomplete
repeat (amount?) this Set loop count ( 1/true=infinite, false=none)
clear () this Remove all events, reset elapsed, pause
isPlaying () boolean True if not paused and not complete
getProgress () number 0..1 based on completed event count
Property Type Description
elapsed number Current elapsed time in ms
timeScale number Delta multiplier (does not affect spawned tweens)
paused boolean Whether timeline is paused
complete boolean Whether all events have run
loop number Number of additional loops (0=none, 1=infinite)
iteration number Current loop iteration
totalComplete number Count of events that have fired
events TimelineEvent[] The internal event array
Gotchas
1. repeat vs total fires. repeat: 4 means 5 total callback invocations (1 initial + 4 repeats). This is a common off by one source.
2. Zero delay with repeat throws. A TimerEvent with delay: 0 and any repeat/loop will throw 'TimerEvent infinite loop created via zero delay' .
3. Timelines start paused. You must call timeline.play() after creation. Forgetting this is a frequent mistake.
4. Timeline timeScale does not affect tweens. Setting timeline.timeScale only scales the timeline's own elapsed counter. Tweens created by the timeline run at their own speed. Set tween timeScale separately or use the TweenManager.
5. once events are removed permanently. Timeline events with once: true are spliced out after firing and will not reappear on reset() or when looping.
6. Timer additions are deferred. addEvent() pushes to a pending list processed in preUpdate . The timer will not be active until the next frame.
7. Clock paused vs timeScale 0. Both freeze timers, but paused = true skips the update loop entirely, while timeScale = 0 still runs the loop with zero delta. Prefer paused for a full freeze.
8. callbackScope default. If you omit callbackScope , the TimerEvent itself becomes this inside the callback, not the scene. Use arrow functions or pass callbackScope: this explicitly.
9. Reusing TimerEvent instances. You can pass a TimerEvent object to addEvent() , but it must not be in a completed state. The Clock will reset its elapsed and dispatch state.
10. Timeline from chains. Each from offset is relative to the previous event's resolved time, not the previous from value. Events are processed in array order.
11. Scene pause pauses the Timeline. When a scene is paused ( scene.pause() ), the Timeline's update loop stops too, since Timeline updates are driven by the scene's update step.
12. timer.reset() does not re add to Clock. Calling timer.reset(config) reinitializes the timer but does not schedule it. You must call this.time.addEvent(timer) again after resetting.
Source File Map
File Description
src/time/Clock.js Scene Clock plugin creates, updates, removes TimerEvents
src/time/TimerEvent.js Individual timer delay, repeat, loop, progress tracking
src/time/Timeline.js Event sequencer scheduled actions, tweens, sounds, looping
src/time/typedefs/TimerEventConfig.js Config typedef for addEvent()
src/time/typedefs/TimelineEventConfig.js Config typedef for timeline.add()
src/time/typedefs/TimelineEvent.js Internal event object typedef
src/time/events/COMPLETE EVENT.js 'complete' event constant for Timeline
src/time/events/index.js Events namespace barrel file