Sprites are the graphics used by the games, normally grouped into one or several images. Many game engines include tools to split and manage those graphics in a convenient way, but this is not the case in React Native. Since it was designed with a different kind of app having in mind, there are several libraries supporting React Native in the task of dealing with sprites, but our game will be simple enough not to need any of these libraries, so we will store one graphic in each image and we will load them separately into the app.
Before starting to build the game, let's get acquainted with the graphics we will load, as they will be the building blocks for the whole app.
Instead of using a <Text/> component to display the score in our game, we will use sprites for a more attractive look. These are the images we will use to represent the user's score:
As mentioned, all these graphics will be stored in separate images (named 0.png to 9.png) due to React Native's lack of sprite splitting capabilities.
We need a large background to make sure it will fit all screen sizes. In this lesson, we will use this sprite as a static graphic although it could be easily animated to create a nice parallax effect:
From this background, we will take a piece of ground to animate.
The ground will be animated in a loop to create a constant feeling of velocity. The size of this image needs to be larger than the maximum screen resolution we want to support, as it should be moved from one side of the screen to the opposite. At all times, two ground images will be displayed, one after the other to ensure at least one of them is shown on the screen during the animation:
The moving rocks are the obstacles our parrot needs to pass. There will be one on the top and one on the bottom and both will be animated at the same speed as the ground. Their height will vary for each pair of rocks but always keep the same gap size between them:
In our images folder, we will have rock-up.png and rock-down.png representing each sprite.
We will use two different images for our main character so we can create an animation displaying when the user has tapped on the screen:
The first image will be displayed when the parrot is moving down:
This second image will be shown every time the user presses the screen to move the parrot up. The images will be named parrot1.png and parrot2.png.
For the home screen, we will display two images: a logo and some instructions about how to get the game started. Let's take a look at them:
The instructions to start the game just point out that tapping will get the game started:
When the parrot hits a rock or the ground, the game will end. Then, it is time to display a game over sign and a reset button to get the game started again:
Although the entire screen will be touchable to get the game restarted, we will include a button to let the user know that tapping will result in the game restarting:
This image will be stored as reset.png.
This is the full list of images we will have in our game:
Now, we know the list of images we will use in our game. Let's take a look at the whole folder structure.