Making a Platforming Game with React Native

Originally published by bberak on April 8th 2018 39,853 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:

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 Youtube for a gameplay demo 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 have
npm 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.

Coming Up

In the next post, we’ll start wiring up our systems and moving our character with some simple gestures.

Follow me (bberak) to stay tuned.

Links and Resources

The paperwork API that scales with your tech stack.