Most of the most successful apps on the app stores are games. They proved to be really popular as mobile users tend to play all sort of games while commuting, in waiting rooms, when traveling, or even when relaxing at home. It is a fact that mobile users are more inclined to pay for a game than for any other kind of app in the market as the perceived value is higher most of the time.
Modern games are usually built in powerful gaming engines such as Unity or Unreal, as they provide a wide range of tools and frameworks to work with sprites, animations, or physics. But the reality is that great games can also be built in React Native due to its native capabilities. Moreover, React Native has introduced many web and mobile app programmers into game development as it offers them a familiar and intuitive interface. Of book, there are some concepts in game development which need to be understood in order to make the most of the library when building games. Concepts like sprites, ticks, or collisions are small hurdles, which may need to be overcome by non-game developers before building a game.
The game will be built for both iOS and Android, and will use a limited number of external libraries. Redux, the state management library, was chosen to help calculate the position of every sprite on each frame.
We will use some custom sprites and add a sound effect to notice each time the score is increased. One of the main challenges when building a game is making sure the sprites are rendered responsively, so different devices will show the game with the same proportions providing the same game experience across different screen sizes.
This game will be designed to be played in portrait mode only.
The game we will build in this lesson has simple mechanics:
- The goal is to help a parrot fly between rocks in a cave
- Tapping the screen will result in the parrot flying higher
- Gravity will pull the parrot toward the ground
- Any collision between the parrot and the rocks or the ground will result in the end of the game
- The score will be increased every time the parrot flies through a group of rocks
This kind of game is very well suited to being built with React Native, as it doesn't really need complex animations or physics capabilities. All we need to be sure of is that we move every sprite (graphics component) on the screen at the correct time to create the feeling of continuous animation.
Let's take a look at the initial screen for our game:
This screen presents the logo and instructions about how to get the game started. In this case, a simple tap will start up the game mechanics causing the parrot to fly forward and up on every tap.
The player must help our parrot to fly through the rocks. Each time a set of rocks is passed, the player will get one point.
To make it more difficult, the heights of the rocks will vary forcing the parrot to fly higher or lower to pass through the rocks. If the parrot collides with a rock or the ground, the game will stop and the final score will be presented to the user:
At this point, the user will be able to restart the game by tapping again on the screen.
To make it nicer and easier to play, tapping can be done anywhere on the screen, causing a different effect depending on which screen the user is on:
- On the initial screen tapping will start up the game
- In-game tapping will result in the parrot flying higher
- On the GAME OVER screen tapping will restart the game and reset the score
As can be observed, it will be a very simple game but, due to this, easily extendable and fun to play. One import aspect when building this kind of app is counting with a nice set of graphics. For this matter, we will download our assets from one of the multiple game assets markets, which can be found online (most game assets cost a small amount of money although free assets can be found every now and then).
The technical challenges for this game lie more in how the sprites will be moved over time than on a complex state to be maintained. Despite this, we will use Redux to keep and update the app's state as it is a performant and well-known solution. Besides revisiting Redux, we will review the following topics in this lesson:
- Handling animated sprites
- Playing sound effects
- Detecting colliding sprites
- Absolute positioning in different screen resolutions