Sprites

Sprites are 2D images and always face the camera. They can used to display animated characters, and particles, and to simulate 3D complex objects like trees.

For animation individual sprite images are collected together in a single file called a spritesheet.

  • A uniform spritesheet is one where all the sprites are exactly the same size and arranged in order in the file. When you read the term spritesheet in the documentation you can usually assume that it is referring to a uniform spritesheet. A uniform spritesheet is overseen by a Sprite Manager.
  • A packed spritesheet is one where the sprites can be of different sizes and often packed in such a way as to minimize the overall size of the file. Usually the full term of packed spritesheet will be used for such a spritesheet. A packed spritesheet is overseen by a Sprite Packed Manager. available from BJS version 4.1

For sprites the use of one of these managers is mandatory, even for one sprite. They optimize GPU resources by grouping in one place multiple instances of a sprite.

Also available, for any grid like implementation (in a 2d or 2.5d game level for instance) that require thousands of sprites to be animated and rendered, is a special system called a Sprite Map, available from BJS version 4.1

Coming next

Introduction To Sprites
Dive into learning the basics of sprites in Babylon.js.
Introduction To Sprites
Sprite Manager
Learn all about sprite management in Babylon.js.
Sprite Manager
Sprite Packed Manager
Learn about the sprite packed manager in Babylon.js.
Sprite Packed Manager
Picking Sprites
Learn about picking sprites in Babylon.js.
Picking Sprites
Sprite Map
Learn about sprite maps in Babylon.js.
Sprite Map
Sprite Map Tile Layout
Learn all about sprite map tile layout in Babylon.js.
Sprite Map Tile Layout
Sprite Map Options
Learn all about sprite map options in Babylon.js.
Sprite Map Options
Sprite Map Animations
Learn all about sprite map animations in Babylon.js.
Sprite Map Animations
Sprite Map Example
Check out an in depth sprite map example in Babylon.js.
Sprite Map Example
Sprite Snippet Server
Learn about saving and loading sprites from the Babylon.js snippet server.
Sprite Snippet Server