# Sprite Manager

> Learn all about sprite management in Babylon.js.

Source: https://doc.babylonjs.com/features/featuresDeepDive/sprites/sprite_manager

## Sprite Manager

Take a single sprite image as an example, i.e. just one cell.

![palm tree](https://doc.babylonjs.com/img/getstarted/palmtree.webp)

Using an image format that contains an alpha channel for transparency, like .png, allows complex shapes to be displayed.

Create the sprite manager for the trees:
```javascript
const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", path to palm.png, 2000, {width: 512, height: 1024});
```
Creating sprites only uses a name and the sprite manager linked to the sprite image. For an accurately scaled representation of the image, the width and height of the sprite should be in the same ratio as the sprite image.
```javascript
const tree = new BABYLON.Sprite("tree", spriteManagerTrees); 
tree.width = 1;
tree.height = 2;
```

single sprite image [Playground: Single Sprite Image](https://playground.babylonjs.com/#YCY2IL) - Simple example of a single sprite image.

You can alter the cell width and height after creation using these properties: *mySpriteManager.cellWidth* and *mySpriteManager.cellHeight*.

with single image size altered [Playground: Single Sprite Image Altered](https://playground.babylonjs.com/#YCY2IL#1) - Simple example of a single sprite image altered.
multiple trees [Playground: Multiple Sprites Example](https://playground.babylonjs.com/#YCY2IL#2) - Simple example of multiple sprites.

As well as width and height, you can apply the following properties:

```javascript
sprite.position =new BABYLON.Vector3(1, 1, 1);
sprite.angle = Math.PI/4;
sprite.invertU = true; //vertical reflection
sprite.invertV = true; //horizontal reflection
```

Please note that the z-axis position of a sprite will affect its size on the screen, i.e. sprites with a higher z-axis value will appear farther away and, as such, will be smaller on the screen: [Playground: Sprite size affected by z position](https://playground.babylonjs.com/#YCY2IL#811) - An example of how the z axis position affects a sprite size.

A spritesheet example:

![uniform spritesheet](https://doc.babylonjs.com/img/how_to/Sprites/08-2.webp)

There are 44 cells in the above spritesheet, each one 64 x 64 pixels. Since the cells are square, you can just use the cell size rather than its width and height. Create the sprite manager with:
```javascript
const spriteManagerPlayer = new BABYLON.SpriteManager("playerManager","path to Player.png", 1, 64);
```
which can then be used to produce just one sprite instance.

```javascript
const player = new BABYLON.Sprite("player", spriteManagerPlayer); 
player.cellIndex = 1;
```
![Elements](https://doc.babylonjs.com/img/how_to/Sprites/08-1.webp)

Since the cells are square, the default values for player width and height are 1, and the ratio is correct, so they are not needed. However, if the sprite is to be drawn from a cell with an index other than 0, it must be specified.

Sprites from different cells: [Playground: Sprites From Different Cells](https://playground.babylonjs.com/#YCY2IL#3) - Simple example of sprites from different cells

You create a sprite animation by changing cell numbers.

To begin an animation, use:
```javascript
mySprite.playAnimation(start cell, end cell, loop, delay);
```
The sprite will be animated from the start cell to the end cell. When *loop* is set to true, the animation will loop. The delay is the time between animation frames (the smaller it is, the faster the animation). The cells must be in animation frame order.

Sprite animation: [Playground: Sprite Animation](https://playground.babylonjs.com/#YCY2IL#4) - Simple example of how to handle sprite animation.