API Documentation for: 0.11.8
Show:

platypus.components.RenderSprite Class

This component is attached to entities that will appear in the game world. It renders a static or animated image. It listens for messages triggered on the entity or changes in the logical state of the entity to play a corresponding animation.

Methods

'handle-render'

(
  • renderData
)

Defined in 'handle-render':401

The render update message updates the sprite. If a sprite doesn't have a container, it's removed.

Parameters:

  • renderData Object

    Data from the render handler

    • container PIXI.Container

      The parent container.

'play-animation'

(
  • [animation]
)

Defined in 'play-animation':433

Available since 0.9.0

Starts the sprite's animation.

Parameters:

  • [animation] String optional

    The animation to play. If not specified, this method simply unpauses the current animation.

'stop-animation'

(
  • [animation]
)

Defined in 'stop-animation':422

Available since 0.9.0

Stops the sprite's animation.

Parameters:

  • [animation] String optional

    The animation to show and pause. If not specified, this method simply pauses the current animation.

addEventListener

(
  • event
  • callback
)
Function private
This method adds an event listener to the entity.

Parameters:

  • event String
    The event that this component should listen for.
  • callback Function
    The handler for the event.

Returns:

Function: handler A reference to the bound handler.

addMethod

(
  • name
  • func
)
private
This method adds a method to the entity.

Parameters:

  • name String
    The name of the method. For example, if name is "turnYellow", the method is accessible on the entity as entity.turnYellow().
  • func Function
    The function describing the method.

destroy

() private

Inherited from platypus.Component: destroy:54

This method cleans up listeners and methods that this component added to the entity. It should never be called by the component itself. Call this.owner.removeComponent(this) instead.

getAssetList

(
  • definition
  • properties
  • defaultProperties
)
Array
This method can be overwritten to provide the list of assets this component requires. This method is invoked when the list of game scenes is created to determine assets for each scene.

Parameters:

  • definition Object
    The definition for the component.
  • properties Object
    The properties of the Entity.
  • defaultProperties Object
    The default properties of the Entity.

Returns:

Array: A list of the necessary assets to load.

getLateAssetList

(
  • data
)
Array
This method can be overwritten to provide the list of assets this component requires. This method is invoked when the list of game scenes is created to determine assets for each scene.

Parameters:

  • data Object
    Scene data that affects the list of assets.

Returns:

Array: A list of the necessary assets to load.

removeEventListener

(
  • event
  • callback
)
private
This method removes an event listener from the entity.

Parameters:

  • event String
    The event for which to remove a listener.
  • callback Function
    The listener to remove. If not supplied, all event listeners for the provided event are removed.

removeEventListeners

(
  • [listeners]
)
private
This method removes multiple event listeners from the entity.

Parameters:

  • [listeners] Array optional
    The list of listeners to remove. If not supplied, all event listeners are removed.

removeMethod

(
  • name
)
private
This method removes a method from the entity.

Parameters:

  • name String
    The name of the method to be removed.

toJSON

() Object

Inherited from platypus.Component: toJSON:45

Available since 0.11.0

Returns a JSON object describing the component.

Returns:

Object: Returns a JSON definition that can be used to recreate the component.

toString

() String
Returns a string describing the component.

Returns:

String: Returns the component type as a string of the form "[Component ComponentType]".

Properties

animationMap

Object

Defined in animationMap:55

Optional. An object containg key-value pairs that define a mapping from triggered events or entity states to the animation that should play. The list is processed from top to bottom, so the most important actions should be listed first (for example, a jumping animation might take precedence over an idle animation). If not specified, an 1-to-1 animation map is created from the list of animations in the sprite sheet definition using the animation names as the keys.

"animationMap":{
                                                "standing": "default-animation"  // On receiving a "standing" event, or when this.owner.state.standing === true, the "default" animation will begin playing.
                                                "ground,moving": "walking",  // Comma separated values have a special meaning when evaluating "state-changed" messages. The above example will cause the "walking" animation to play ONLY if the entity's state includes both "moving" and "ground" equal to true.
                                                "ground,striking": "swing!", // Putting an exclamation after an animation name causes this animation to complete before going to the next animation. This is useful for animations that would look poorly if interrupted.
                                                "default": "default-animation" // Optional. "default" is a special property that matches all states. If none of the above states are valid for the entity, it will use the default animation listed here.
                                            }
                                            

This data is used to create EventRender or StateRender components on the entity if the eventBased or stateBased properties are set to true.

Default: null

cache

Boolean

Defined in cache:206

Optional. Whether this sprite should be cached into an entity with a RenderTiles component (like "render-layer"). The RenderTiles component must have its "entityCache" property set to true. Warning! This is a one-direction setting and will remove this component from the entity once the current frame has been cached.

Default: false

eventBased

Boolean

Defined in eventBased:188

Optional. Specifies whether this component should create an EventRender component to listen to events matching the animationMap to animate. Set this to true if the component should animate for on events. Default is false.

Default: false

flip

Boolean

Defined in flip:170

Optional. Whether this object can be flipped over Y. To flip it over Y set the this.owner.rotation to be > 180.

Default: false

forcePlayThrough

Boolean

Optional. When using state-based animations, forces animations to complete before starting a new animation. Defaults to false.

Default: false

ignoreOpacity

Boolean

Defined in ignoreOpacity:224

Optional. Ignores the opacity of the owner. Used when multiple RenderSprite components are on the same entity.

Default: false

interactive

Boolean | Object

Defined in interactive:93

Available since 0.9.0

Defines whether the entity will respond to touch and click events. Setting this value will create an Interactive component on this entity with these properties. For example:

"interactive": { "hover": false, "hitArea": { "x": 10, "y": 10, "width": 40, "height": 40 } }

Default: false

mask

Object

Defined in mask:73

Optional. A mask definition that determines where the image should clip. A string can also be used to create more complex shapes via the PIXI graphics API like: "mask": "r(10,20,40,40).dc(30,10,12)". Defaults to no mask or, if simply set to true, a rectangle using the entity's dimensions.

"mask": { "x": 10, "y": 10, "width": 40, "height": 40 },

-OR-

"mask": "r(10,20,40,40).dc(30,10,12)"

Default: null

mirror

Boolean

Defined in mirror:161

Whether this object can be mirrored over X. To mirror it over X set the this.owner.rotation value to be > 90 and < 270.

Default: false

offsetX

Number

Defined in offsetX:113

Available since 0.11.0

The offset of the x-axis position of the sprite from the entity's x-axis position.

Default: 0

offsetY

Number

Defined in offsetY:123

Available since 0.11.0

The offset of the y-axis position of the sprite from the entity's y-axis position.

Default: 0

offsetZ

Number

Defined in offsetZ:133

The z-index relative to other render components on the entity.

Default: 0

restart

Boolean

Defined in restart:142

Available since 0.9.2

Whether to restart a playing animation on event.

Default: true

rotate

Boolean

Defined in rotate:152

Optional. Whether this object can be rotated. It's rotational angle is set by setting the this.owner.rotation value on the entity.

Default: false

rotation

Number

Defined in rotation:287

Optional. The rotation of the sprite in degrees. All sprites on the same entity are rotated the same amount unless they ignore the rotation value by setting 'rotate' to false.

Default: 1

scale

Number | Array | Object

Defined in scale:233

The scaling factor for this component.

Default: 1

scaleX

Number

Defined in scaleX:242

Optional. The X scaling factor for the image. Defaults to 1.

Default: 1

scaleY

Number

Defined in scaleY:251

Optional. The Y scaling factor for the entity. Defaults to 1.

Default: 1

skew

Number | Array | Object

Defined in skew:260

The skew factor for this component.

Default: 0

skewX

Number

Defined in skewX:269

Optional. The X skew factor of the entity. Defaults to 0.

Default: 0

skewY

Number

Defined in skewY:278

Optional. The Y skew factor for the entity. Defaults to 0.

Default: 0

spriteSheet

String | Array | Object

Defined in spriteSheet:24

spriteSheet can either be a String or an object. If a string, the spritesheet data will be loaded from the file with a matching name in the spritesheet folder. Otherwise the definition is in full here. That spritesheet data defines an EaselJS sprite sheet to use for rendering. See http://www.createjs.com/Docs/EaselJS/SpriteSheet.html for the full specification.

"spriteSheet": 'hero-image'

-OR-

"spriteSheet": {

 "images": ["example0", "example1"], //Can also define 'image' and give the
                                             "frames": {
                                                 "width":  100,
                                                 "height": 100,
                                                 "regY":   100,
                                                 "regX":   50
                                             },
                                             "animations":{
                                                 "default-animation":[2],
                                                 "walking": {"frames": [0, 1, 2], "speed": 4},
                                                 "swing": {"frames": [3, 4, 5], "speed": 4}
                                             }
                                            

}

-OR- an Array of the above (since 0.8.4)

Default: null

stateBased

Boolean

Defined in stateBased:197

Optional. Specifies whether this component should create a StateRender component to handle changes in the entity's state that match the animationMap to animate. Set this to true if the component should animate based on this.owner.state. Default is true.

Default: true

visible

Boolean

Defined in visible:179

Optional. Whether this object is visible or not. To change the visible value dynamically set this.owner.state.visible to true or false.

Default: false

Events

'animation-ended'

This event fires each time an animation completes.

Event Payload:

  • animation String

    The id of the animation that ended.

'update-animation'

This event is triggered each tick to check for animation updates.

Event Payload:

  • playing Boolean

    Whether the animation is in a playing or paused state.