2 - Bird Sprite

Let's start off by creating our bird in a new file within the src folder, as you can see in the code block on the right.

We'll represent our bird as a Sprite. Sprites are the building blocks of Replay, and provide a neat way to modularise our code.

For now we'll just render a yellow rectangle in the middle of the screen. To do this we create a new Sprite with makeSprite, passing in an object with a render method.

All Sprites need a render method which returns an array of other Sprites. For our bird, we return a rectangle Texture. Textures are elements to draw onto the screen like text, images and shapes. In this case, we use Replay's t.rectangle Texture, and pass in the width, height and color props.

BackNext
1import { makeSprite, t } from "@replay/core";
2
3export const birdWidth = 50;
4export const birdHeight = 40;
5
6export const Bird = makeSprite({
7 render() {
8 return [
9 t.rectangle({
10 width: birdWidth,
11 height: birdHeight,
12 color: "yellow",
13 }),
14 ];
15 },
16});
17
Preview