18 - Image

As beautiful as our yellow bird rectangle is, it would look even better to use an image in its place. I've taken some artwork from this Open Game Art submission.

replay-starter stores its images in the assets/images folder, so we can copy one of the PNG files from Open Game Art to there as bird.png.

In our Bird Sprite we replace the rectangle with the t.image Texture, set to the same width and height.

To use the image it first needs to be loaded. Back in our top-level Game Sprite we can load it when the game launches using preloadFiles and by specifying the image file names to load. Putting it in Promise.all allows us to load the assets at the same time saved data is being loaded.

We don't want to render the image until the loading is finished, so we add a view state called "loading" before we enter the menu. In the render function we can then return a text Texture of "Loading..." before the game starts.

This allows us to only load the files we need when we want them. You can have as many loading states like this as you like, even in different Sprites.

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.image({
10 fileName: "bird.png",
11 width: birdWidth,
12 height: birdHeight,
13 }),
14 ];
15 },
16});
17
Preview