Class: SpriteComponent
Enables an Entity to render a simple static sprite or sprite animations.
Properties
entity
entity: Entity
The Entity that this Component is attached to.
Inherited from
Component.entity
system
system: ComponentSystem
The ComponentSystem used to create this Component.
Inherited from
Component.system
autoPlayClip
Get Signature
get autoPlayClip(): string
Gets the name of the clip to play automatically when the component is enabled.
Returns
string
Set Signature
set autoPlayClip(value: string): void
Sets the name of the clip to play automatically when the component is enabled.
Parameters
value
string
Returns
void
batchGroupId
Get Signature
get batchGroupId(): number
Gets the batch group for the sprite.
Returns
number
Set Signature
set batchGroupId(value: number): void
Sets the batch group for the sprite (see BatchGroup). Default is -1 (no group).
Parameters
value
number
Returns
void
clips
Get Signature
get clips(): {}
Gets the dictionary that contains SpriteAnimationClips.
Returns
{
}
Set Signature
set clips(value: {}): void
Sets the dictionary that contains SpriteAnimationClips.
Parameters
value
Returns
void
color
Get Signature
get color(): Color
Gets the color tint of the sprite.
Returns
Set Signature
set color(value: Color): void
Sets the color tint of the sprite.
Parameters
value
Returns
void
currentClip
Get Signature
get currentClip(): SpriteAnimationClip
Gets the current clip being played.
Returns
drawOrder
Get Signature
get drawOrder(): number
Gets the draw order of the component.
Returns
number
Set Signature
set drawOrder(value: number): void
Sets the draw order of the component. A higher value means that the component will be rendered on top of other components in the same layer. This is not used unless the layer's sort order is set to SORTMODE_MANUAL.
Parameters
value
number
Returns
void
enabled
Get Signature
get enabled(): boolean
Gets the enabled state of the component.
Returns
boolean
Set Signature
set enabled(arg: boolean): void
Sets the enabled state of the component.
Parameters
arg
boolean
Returns
void
Inherited from
Component.enabled
flipX
Get Signature
get flipX(): boolean
Gets whether to flip the X axis when rendering a sprite.
Returns
boolean
Set Signature
set flipX(value: boolean): void
Sets whether to flip the X axis when rendering a sprite.
Parameters
value
boolean
Returns
void
flipY
Get Signature
get flipY(): boolean
Gets whether to flip the Y axis when rendering a sprite.
Returns
boolean
Set Signature
set flipY(value: boolean): void
Sets whether to flip the Y axis when rendering a sprite.
Parameters
value
boolean
Returns
void
frame
Get Signature
get frame(): number
Gets which frame from the current sprite asset to render.
Returns
number
Set Signature
set frame(value: number): void
Sets which frame from the current sprite asset to render.
Parameters
value
number
Returns
void
height
Get Signature
get height(): number
Gets the height of the sprite when rendering using 9-Slicing.
Returns
number
Set Signature
set height(value: number): void
Sets the height of the sprite when rendering using 9-Slicing. The width and height are only used when the render mode of the sprite asset is Sliced or Tiled.
Parameters
value
number
Returns
void
layers
Get Signature
get layers(): number[]
Gets the array of layer IDs (Layer#id) to which this sprite belongs.
Returns
number
Set Signature
set layers(value: number[]): void
Sets the array of layer IDs (Layer#id) to which this sprite should belong.
Parameters
value
number
Returns
void
opacity
Get Signature
get opacity(): number
Gets the opacity of the sprite.
Returns
number
Set Signature
set opacity(value: number): void
Sets the opacity of the sprite.
Parameters
value
number
Returns
void
speed
Get Signature
get speed(): number
Gets the global speed modifier used when playing sprite animation clips.
Returns
number
Set Signature
set speed(value: number): void
Sets the global speed modifier used when playing sprite animation clips.
Parameters
value
number
Returns
void
sprite
Get Signature
get sprite(): Sprite
Gets the current sprite.
Returns
Set Signature
set sprite(value: Sprite): void
Sets the current sprite.
Parameters
value
Returns
void
spriteAsset
Get Signature
get spriteAsset(): number | Asset
Gets the asset id or the Asset of the sprite to render.
Returns
number | Asset
Set Signature
set spriteAsset(value: number | Asset): void
Sets the asset id or the Asset of the sprite to render. Only works for SPRITETYPE_SIMPLE sprites.
Parameters
value
number | Asset
Returns
void
type
Get Signature
get type(): string
Gets the type of the SpriteComponent.
Returns
string
Set Signature
set type(value: string): void
Sets the type of the SpriteComponent. Can be:
- SPRITETYPE_SIMPLE: The component renders a single frame from a sprite asset.
- SPRITETYPE_ANIMATED: The component can play sprite animation clips.
Defaults to SPRITETYPE_SIMPLE.
Parameters
value
string
Returns
void
width
Get Signature
get width(): number
Gets the width of the sprite when rendering using 9-Slicing.
Returns
number
Set Signature
set width(value: number): void
Sets the width of the sprite when rendering using 9-Slicing. The width and height are only used when the render mode of the sprite asset is Sliced or Tiled.
Parameters
value
number
Returns
void
Methods
addClip()
addClip(data: {
fps: number;
loop: boolean;
name: string;
spriteAsset: number | Asset;
}): SpriteAnimationClip
Creates and adds a new SpriteAnimationClip to the component's clips.
Parameters
data
Data for the new animation clip.
fps?
number
Frames per second for the animation clip.
loop?
boolean
Whether to loop the animation clip.
name?
string
The name of the new animation clip.
spriteAsset?
number | Asset
The asset id or the Asset of the sprite that this clip will play.
Returns
The new clip that was added.
clip()
clip(name: string): SpriteAnimationClip
Get an animation clip by name.
Parameters
name
string
The name of the clip.
Returns
The clip.
fire()
fire(
name: string,
arg1?: any,
arg2?: any,
arg3?: any,
arg4?: any,
arg5?: any,
arg6?: any,
arg7?: any,
arg8?: any): EventHandler
Fire an event, all additional arguments are passed on to the event listener.
Parameters
name
string
Name of event to fire.
arg1?
any
First argument that is passed to the event handler.
arg2?
any
Second argument that is passed to the event handler.
arg3?
any
Third argument that is passed to the event handler.
arg4?
any
Fourth argument that is passed to the event handler.
arg5?
any
Fifth argument that is passed to the event handler.
arg6?
any
Sixth argument that is passed to the event handler.
arg7?
any
Seventh argument that is passed to the event handler.
arg8?
any
Eighth argument that is passed to the event handler.
Returns
Self for chaining.
Example
obj.fire('test', 'This is the message')
Inherited from
Component.fire
hasEvent()
hasEvent(name: string): boolean
Test if there are any handlers bound to an event name.
Parameters
name
string
The name of the event to test.
Returns
boolean
True if the object has handlers bound to the specified event name.
Example
obj.on('test', () => {}) // bind an event to 'test'
obj.hasEvent('test') // returns true
obj.hasEvent('hello') // returns false
Inherited from
Component.hasEvent
off()
off(
name?: string,
callback?: HandleEventCallback,
scope?: any): EventHandler
Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.
Parameters
name?
string
Name of the event to unbind.
callback?
HandleEventCallback
Function to be unbound.
scope?
any
Scope that was used as the this when the event is fired.
Returns
Self for chaining.
Example
const handler = () => {}
obj.on('test', handler)
obj.off() // Removes all events
obj.off('test') // Removes all events called 'test'
obj.off('test', handler) // Removes all handler functions, called 'test'
obj.off('test', handler, this) // Removes all handler functions, called 'test' with scope this
Inherited from
Component.off
on()
on(
name: string,
callback: HandleEventCallback,
scope?: any): EventHandle
Attach an event handler to an event.
Parameters
name
string
Name of the event to bind the callback to.
callback
HandleEventCallback
Function that is called when event is fired. Note the callback is limited to 8 arguments.
scope?
any = ...
Object to use as 'this' when the event is fired, defaults to current this.
Returns
Can be used for removing event in the future.
Examples
obj.on('test', (a, b) => {
console.log(a + b)
})
obj.fire('test', 1, 2) // prints 3 to the console
const evt = obj.on('test', (a, b) => {
console.log(a + b)
})
// some time later
evt.off()
Inherited from
Component.on
once()
once(
name: string,
callback: HandleEventCallback,
scope?: any): EventHandle
Attach an event handler to an event. This handler will be removed after being fired once.
Parameters
name
string
Name of the event to bind the callback to.
callback
HandleEventCallback
Function that is called when event is fired. Note the callback is limited to 8 arguments.
scope?
any = ...
Object to use as 'this' when the event is fired, defaults to current this.
Returns
- can be used for removing event in the future.
Example
obj.once('test', (a, b) => {
console.log(a + b)
})
obj.fire('test', 1, 2) // prints 3 to the console
obj.fire('test', 1, 2) // not going to get handled
Inherited from
Component.once
pause()
pause(): void
Pauses the current animation clip.
Returns
void
play()
play(name: string): SpriteAnimationClip
Plays a sprite animation clip by name. If the animation clip is already playing then this will do nothing.
Parameters
name
string
The name of the clip to play.
Returns
The clip that started playing.
removeClip()
removeClip(name: string): void
Removes a clip by name.
Parameters
name
string
The name of the animation clip to remove.
Returns
void
resume()
resume(): void
Resumes the current paused animation clip.
Returns
void
stop()
stop(): void
Stops the current animation clip and resets it to the first frame.
Returns
void
Events
EVENT_END
static EVENT_END: string = 'end';
Fired when an animation clip stops playing because it reached its end. The handler is passed the SpriteAnimationClip that ended.
Example
entity.sprite.on('end', (clip) => {
console.log(`Animation clip ${'${clip.name}'} ended.`)
})
EVENT_LOOP
static EVENT_LOOP: string = 'loop';
Fired when an animation clip reached the end of its current loop. The handler is passed the SpriteAnimationClip that looped.
Example
entity.sprite.on('loop', (clip) => {
console.log(`Animation clip ${'${clip.name}'} looped.`)
})
EVENT_PAUSE
static EVENT_PAUSE: string = 'pause';
Fired when an animation clip is paused. The handler is passed the SpriteAnimationClip that was paused.
Example
entity.sprite.on('pause', (clip) => {
console.log(`Animation clip ${'${clip.name}'} paused.`)
})
EVENT_PLAY
static EVENT_PLAY: string = 'play';
Fired when an animation clip starts playing. The handler is passed the SpriteAnimationClip that started playing.
Example
entity.sprite.on('play', (clip) => {
console.log(`Animation clip ${'${clip.name}'} started playing.`)
})
EVENT_RESUME
static EVENT_RESUME: string = 'resume';
Fired when an animation clip is resumed. The handler is passed the SpriteAnimationClip that was resumed.
Example
entity.sprite.on('resume', (clip) => {
console.log(`Animation clip ${'${clip.name}'} resumed.`)
})
EVENT_STOP
static EVENT_STOP: string = 'stop';
Fired when an animation clip is stopped. The handler is passed the SpriteAnimationClip that was stopped.
Example
entity.sprite.on('stop', (clip) => {
console.log(`Animation clip ${'${clip.name}'} stopped.`)
})