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
.
- JavaScript
- TypeScript
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
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