Making a Platforming Game with React Native

April 8th 2018 40,322 reads

@bberak
bberak

In this series of posts, we’ll be developing a remake of the classic Donkey Kong arcade game using React Native and React Native Game Engine. Since this will be a mobile-only game, we’re going to simplify the controls significantly from the original — our game should be playable with one finger only.

Here’s a preview of what we’re trying to achieve:

Our player needs to ascend a series of sloping ramps whilst avoiding barrels that are being thrown by Kong

If you’re not familiar with the original game, our character Mario (known initially as Jump Man) is trying to rescue the Princess (originally known as Pauline) while dodging barrels that are being hurtled down a series of ramps by the main antagonist — Kong. Head over to of the app we’re building.

To keep this moving along at a good pace, this won’t be a line-by-line tutorial — we’ll cover some important and post-worthy topics. See React Native Donkey Kong for the full source code.

Project Setup

After you have initialized a vanilla React Native or Expo project, install the following prerequisites:

React Native Game Engine

This library will help us run our game in a loop and manage/manipulate our game entities (players; projectiles; enemies; ladders; platforms etc.). In particular, we’ll be using the GameEngine component which is a loose implementation of the Component-Entity-Systems pattern.

npm install — save react-native-game-engine

Matter JS

This is a 2D physics library and will help us simulate the throwing of projectiles down a series of sloped ramps (see preview above). It will also help us move our character Mario up the ramps towards the Princess.

npm install --save matter-js

Other NPM Packages

npm install --save lodash # Always good to havenpm install --save d3-interpolate # Will help us create a nice jump curve

Spriters Resource

I found some great art and assets from the website Spriters Resource. This where I found the original sprite sheets for Donkey Kong. They have assets for a tonne of other games.

In particular, huge thanks to Zeon for his excellent Donkey Kong sprite sheets which I used extensively throughout the game.

Aseprite

To edit, slice and scale the sprites for our game I used a great pixel-art tool called Aseprite.

We won’t need to edit any artwork in this tutorial — we’ll simply use the images sprites from the React Native Donkey Kong repo.

Initiating the Game Entities

Game entities are all the game objects in our game world (they don’t necessarily have to be visible either) and we can add and remove them as we please. In our game, this will include Mario; the platforms; the barrels; Princess; Kong; ladders etc.

First, let’s code the components for our platform entities. Create the following file platform.js:

Let’s follow that with mario.js (the character controlled by the player):

You may have noticed we’ve referenced a constants.js file. It contains a map of collision categories that our physics engine uses to determine which game entities should collide.

Let’s create our first (and only) level, create a file called entities.js:

Next let’s update our App.js file:

Notice that we can pass children into our GameEngine component and they will get rendered after our entities.

Running our Game

Now we can fire up our app react-native run-ios and hopefully we should be able to see our seven platforms and Mario being rendered by our GameEngine component

I should note that everything we’re doing will also work on Android — I’m just sticking to iOS for brevity.