
## Picking
Sprites managed by either the sprite or packed manager can be selected, or picked, provided both the sprite and the manager are set to pickable. This is done as follows

```javascript
mySpriteManager.isPickable = true;
mySpritePackedManager.isPickable = true;
mySprite.isPickable = true;
```

To do so, you need to:
- Turn on picking on the sprites you want: `sprite.isPickable = true;`
- Enable SpriteManager to support picking: `spriteManager.isPickable = true;`

To do picking you can use the `scene.pickSprite`:

```
var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
if (pickResult.hit) {
	pickResult.pickedSprite.angle += 0.5;
}
```

Pick and rotate selected sprite with sprite manager: <Playground id="#YCY2IL#9" title="Pick And Rotate A Selected Sprite" description="Simple example of picking a sprite and rotating it."/>
Pick and rotate selected sprite with sprite packed manager: <Playground id="#YCY2IL#10" title="Pick and Rotate A Selected Sprite With Sprite Packed Manager" description="Simple example of selecting a sprite from a sprite packed manager and rotating it."/>

For performance reasons the default is to indicate a hit if the sprite is picked within its bounding rectangle. When you do not want a hit inside a transparent region of the sprite you need to add the following
```javascript
mySprite.useAlphaForPicking = true;
```
and picking will only work if alpha > 0.5.

Transparent regions not reacting to pick: <Playground id="#YCY2IL#11" title="Transparent Regions No Picking" description="Simple example showing how you cannot pick transparent regions of sprites."/>


Where sprites are overlapping you can use *multiPickSprite* to get all the sprites under the mouse:

```
const pickResult = scene.multiPickSprite(this.pointerX, this.pointerY);
for (let i = 0; i < pickResult.length; i++) {
    	pickResult[i].pickedSprite.angle += Math.PI / 4;
}
```

multipicking of overlapping sprites: <Playground id="#YCY2IL#12" title="Multipicking Overlapping Sprites" description="Simple example of multipicking of overlapping sprites."/>


## Sprite Manager

Take a single sprite image example, i.e. just one cell.

![palm tree](/img/getstarted/palmtree.png)

Using an image format which contain 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});
```
Drawing sprites just uses a name and the sprite manager linking 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 id="#YCY2IL" title="Single Sprite Image" description="Simple example of a single sprite image."/>

You can alter the cell width and height after creation using these properties *mySpriteManager.cellWidth* and *mySpriteManager.cellWidth*

with single image size altered <Playground id="#YCY2IL#1" title="Single Sprite Image Altered" description="Simple example of a single sprite image altered."/>
multiple trees <Playground id="#YCY2IL#2" title="Multiple Sprites Example" description="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
```

A spritesheet example

![uniform spritesheet](/img/how_to/Sprites/08-2.png)

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 use to produce just one sprite instance.

```javascript
const player = new BABYLON.Sprite("player", spriteManagerPlayer); 
player.cellIndex = 1;
```
![Elements](/img/how_to/Sprites/08-1.png)

Since the cells are square the default values for player width and height are 1 and the ratio is correct they are not needed. However the if the sprite is to draw from a cell with index other than 0 it must be specified.

Sprites from different cells: <Playground id="#YCY2IL#3" title="Sprites From Different Cells" description="Simple example of sprites from different cells"/>

It is by changing of cell numbers that you produce a sprite animation.

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 delay between the frames of the animation (the smaller it is, the faster the animation). The cells must be in animation frame order.

Sprite animation: <Playground id="#YCY2IL#4" title="Sprite Animation" description="Simple example of how to handle sprite animation."/>