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