Sprite Component

src/graphics/sprite.js#L170-L183

Events

Invalidate
when the sprites change

A component for using tiles in a sprite map.

This is automatically added to entities which use the components created by Crafty.sprite or Crafty.load. Since these are also used to define tile size, you'll rarely need to use this components methods directly.

Properties

Methods

Back to top

.sprite()

src/graphics/sprite.js#L269-L299
public this .sprite(Number x, Number y[, Number w, Number h])
x

X cell position

y

Y cell position

w

Width in cells. Optional.

h

Height in cells. Optional.

Uses a new location on the sprite map as its sprite. If w or h are ommitted, the width and height are not changed. Values should be in tiles or cells (not pixels).

public this .sprite(String tileName)
tileName

the name of a tile specified in the sprite map

Uses a new location on the sprite map as its sprite. The location is retrieved by name from the previously supplied sprite map. An invalid name will be silently ignored.

Example

Crafty.e("2D, DOM, Sprite")
  .sprite(0, 0, 2, 2);

Crafty.e("2D, DOM, flower")
  .sprite('grass');
Back to top

.__coord

src/graphics/sprite.js#L301-L307

The coordinate of the slide within the sprite in the format of [x, y, w, h].

Back to top

.crop()

src/graphics/sprite.js#L332-L352
public this .crop(Number x, Number y, Number w, Number h)
x

Offset x position

y

Offset y position

w

New width

h

New height

If the entity needs to be smaller than the tile size, use this method to crop it.

The values should be in pixels rather than tiles.

Example

Crafty.e("2D, DOM, Sprite")
  .crop(40, 40, 22, 23);