Making a Platforming Game with React Native

In this series of posts, we’ll be developing a remake of the classic Donkey Kong arcade game using React Native and . 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. React Native Game Engine 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. Youtube for a gameplay demo 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 for the full source code. React Native Donkey Kong Project Setup After you have initialized a vanilla React Native or , install the following prerequisites: Expo project 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 pattern. Component-Entity-Systems 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 . This where I found the original sprite sheets for Donkey Kong. They have assets for a tonne of other games. Spriters Resource In particular, huge thanks to for his excellent Donkey Kong sprite sheets which I used extensively throughout the game. Zeon 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 repo. React Native Donkey Kong 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 (the character controlled by the player): mario.js You may have noticed we’ve referenced a file. It contains a map of collision categories that our physics engine uses to determine which game entities should collide. constants.js Let’s create our first (and only) level, create a file called : entities.js Next let’s update our file: App.js 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 and hopefully we should be able to see our seven platforms and Mario being rendered by our GameEngine component react-native run-ios 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 ( ) to stay tuned. bberak Links and Resources bberak/react-native-game-engine _react-native-game-engine - A lightweight Game Engine for React Native 🕹⚡🎮_github.com bberak/react-native-donkey-kong _react-native-donkey-kong - Donkey Kong remake using react-native-game-engine 🙉_github.com liabru/matter-js _matter-js - a 2D rigid body physics engine for the web ▲● ■_github.com Aseprite _Animated sprite editor & pixel art tool_www.aseprite.or