Sprites

Sprites are simple renderable components, allowing shapes to be rendered with materials applied to them to specify texture, color and shaders.

The SpriteSystem allows rendering Sprite components - by tracking Sprite components and generating a list of IRenderable for render systems to use.

Setting up the Sprite System

To set up a SpriteSystem, you simply need to provide a message bus.

new SpriteSystem(messageBus);

Peer dependencies

The SpriteSystem will only work in conjunction with some kind of rendering system, such as the WebGLSystem to actually render the elements; the SpriteSystem is a pre-rendering system.

Creating an entity with a sprite

An Entity can be given a sprite by adding the Sprite component to an entity.

const spriteEntity = new Entity(messageBus);
spriteEntity.Add(new Transform(Vector.New(0, 0), Vector.New(5,5)));
spriteEntity.Add(new Sprite(
    new Material({
        texture: new Texture("example_texture", Polygon.RectangleByPoints(Vector.New(0,0), Vector.New(1,1))),
    }),
    0,
    Polygon.RectangleByDimensions(1,1)
));

This example shows creating an Entity which will use the Sprite component to render using the example_texture texture.

Z Order

Sprites contain a field zOrder, which determines the precendence with which sprites will appear on the screen. Objects with a higher z order will appear ahead of objects with a lower z order.

Material

Sprites specify the Material that should be applied when rendering it, allowing choice over texture, color, and shaders.

Creating a UI sprite

A UI sprite can be created by adding a UI component to an entity, alongside required Transform and Sprite components.

const gameCamera = new Entity(messageBus);
gameCamera.Add(new Transform(Vector.New(0, 0), Vector.New(5, 5)));
gameCamera.Add(new Camera());

const uiElement = new Entity(messageBus);
uiElement.Add(new Transform(Vector.New(0, 0), Vector.New(0.2,0.2)));
uiElement.Add(new Sprite(
    new Material({
        texture: new Texture("example_texture", Polygon.RectangleByPoints(Vector.New(0,0), Vector.New(1,1))),
    }),
    0,
    Polygon.RectangleByDimensions(1,1)
));
uiElement.Add(new UI(gameCamera));

This example shows creating a camera, and then a UI element that will display in the center of the camera - with the example_texture texture.