Crafty.sprite()

src/graphics/sprite.js#L28-L81
public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY[, Boolean paddingAroundBorder]]])
tile

Tile size of the sprite map, defaults to 1

tileh

Height of the tile; if provided, tile is interpreted as the width

url

URL of the sprite image

map

Object where the key is what becomes a new component and the value points to a position on the sprite map

paddingX

Horizontal space in between tiles. Defaults to 0.

paddingY

Vertical space in between tiles. Defaults to paddingX.

paddingAroundBorder

If padding should be applied around the border of the sprite sheet. If enabled the first tile starts at (paddingX,paddingY) instead of (0,0). Defaults to false.

Generates components based on positions in a sprite image to be applied to entities.

Accepts a tile size, URL and map for the name of the sprite and its position.

The position must be an array containing the position of the sprite where index 0 is the x position, 1 is the y position and optionally 2 is the width and 3 is the height. If the sprite map has padding, pass the values for the x padding or y padding. If they are the same, just add one value.

If the sprite image has no consistent tile size, 1 or no argument need be passed for tile size.

Entities that add the generated components are also given the 2D component, and a component called Sprite.

Example

Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]});
var flower_entity = Crafty.e("2D, DOM, flower");

The first line creates a component called flower associated with the sub-image of spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels. The second line creates an entity with that image. (Note: The 2D is not really necessary here, because adding the flower component automatically also adds the 2D component.)

Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]});

In this case, the flower component is pixels 0 <= x < 50, 0 <= y < 50, and the grass component is pixels 0 <= x < 150, 50 <= y < 100. (The 3 means grass has a width of 3 tiles, i.e. 150 pixels.)

Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10);

In this case, each tile is 50x100, and there is a spacing of 10 pixels between consecutive tiles. So flower is pixels 0 <= x < 50, 0 <= y < 100, and grass is pixels 0 <= x < 50, 110 <= y < 210.

See Also