![](https://hackernoon.com/hn-images/1*i1AHrykWlfAwRkgJNkjWVg.png)

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](https://github.com/bberak/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:

![](https://hackernoon.com/hn-images/1*m_ZipjWLlmqmLTjLuQ2PVA.gif)

![](https://hackernoon.com/hn-images/1*dEArjUdatshK951QpDlWhw.gif)

![](https://hackernoon.com/hn-images/1*dMaRGBSpNaJAyJMUEenbig.gif)

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 [Youtube for a gameplay demo](https://youtu.be/rIcbgMdxKdw) 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](https://github.com/bberak/react-native-donkey-kong) for the full source code.

### Project Setup

After you have initialized a vanilla React Native or [Expo project](https://expo.io/), install the following prerequisites:

#### [React Native Game Engine](https://github.com/bberak/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](https://github.com/bberak/react-native-game-engine#managing-complexity-with-component-entity-systems) pattern.

npm install — save react-native-game-engine

#### [Matter JS](http://brm.io/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](https://www.spriters-resource.com)

I found some great art and assets from the website [Spriters Resource](https://www.spriters-resource.com). 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](mailto:metalichotdog@hotmail.com) for his excellent Donkey Kong sprite sheets which I used extensively throughout the game.

#### [Aseprite](https://www.aseprite.org)

To edit, slice and scale the sprites for our game I used a great pixel-art tool called [Aseprite](https://www.aseprite.org).

We won’t need to edit any artwork in this tutorial — we’ll simply use the images sprites from the [React Native Donkey Kong](https://github.com/bberak/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.

![](https://hackernoon.com/hn-images/1*Ui8TT0qCaBcvM8elT1y9OA.png)

### 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](https://medium.com/@bberak)) to stay tuned.

### Links and Resources

[**bberak/react-native-game-engine**  
_react-native-game-engine - A lightweight Game Engine for React Native 🕹⚡🎮_github.com](https://github.com/bberak/react-native-game-engine "https://github.com/bberak/react-native-game-engine")[](https://github.com/bberak/react-native-game-engine)

[**bberak/react-native-donkey-kong**  
_react-native-donkey-kong - Donkey Kong remake using react-native-game-engine 🙉_github.com](https://github.com/bberak/react-native-donkey-kong "https://github.com/bberak/react-native-donkey-kong")[](https://github.com/bberak/react-native-donkey-kong)

[**liabru/matter-js**  
_matter-js - a 2D rigid body physics engine for the web ▲● ■_github.com](https://github.com/liabru/matter-js "https://github.com/liabru/matter-js")[](https://github.com/liabru/matter-js)

[**Aseprite**  
_Animated sprite editor & pixel art tool_www.aseprite.or](https://www.aseprite.org/ "https://www.aseprite.org/")[](https://www.aseprite.org/)

Making a Platforming Game with React Native

Too Long; Didn't Read

Companies Mentioned

@bberak

RELATED STORIES