informa
/
6 MIN READ
Blogs

How to Develop Trending Games Using React Native?

Develop the classic Donkey Kong Arcade Game with React Native, while understanding the process requirements. Know ways to tackle the game bugs and synchronize all the logic you know in order to make the game dynamic and interactive.

 

In today's era, mobile games are gaining huge popularity, thanks to the very old Covid-19. If you've ever played a game on your smartphone, you must have heard about flappy birds. That annoying game in which you need to keep touching your screen to fly the bird in the air was a great hit earlier.

React Native has always been a swiss-army knife for developers looking to develop engaging applications and games for smartphone operating systems such as Android and iOS. The best thing about this language is that it allows you to create highly-dynamic applications with the least effort.

Whether you’re looking for some inspiration or ideas to make your first mobile game, this guide will help you throughout the process of app development using react native by building a real-time multiplayer game as a reference.

It feels pretty amazing to code for both Android and iOS at the same time in a single language. React Native is certainly big money- and time- saver for the world.

 

 

The only hurdle that comes in building games with react native is to make your logic synchronized to make things work. For example, if you want to make a game based on gravity, you’ll notice that there’s no such feature in react native. However, a module named Matter.js can do the job.

 

What Exactly is Matter.js?

When it comes to adding a physics engine to your game, you need to use Matter.js. It's a fully-functional 2D JavaScript module that helps you to add physics to react-native. Moreover, it can also be configured with react-native-game-engine to set it up easily.

The very first thing that you need to do is create a new app with this line of code:

npx react-native init GameApp

Once it’s done, you need to include the react-native-game-engine to the Matter.js to make it work:

npm install matter-js react-native-game-engine --save

While writing your game, you need to make sure that you follow a proper structure to save time while refracting the code. Moreover, you can feel free to follow your desired structure and start coding your game in a proper way.

 

Making App.js To Specify the Plane

Everything starts by making a plane or area for the game where it can operate. This can be done by making a file named App.js with the following lines of codes:

import React, {PureComponent} from 'react';

import {StatusBar, StyleSheet, View} from 'react-native';

import Entities from './src/entities';

import {GameEngine} from 'react-native-game-engine';

 

export default class App extends PureComponent {

  constructor(props) {

           super(props);

           this.state = {

           running: true,

           };

           this.gameEngine = null;

           console.disableYellowBox = true;

  }

 

  render() {

           return (

           <View style={styles.container}>

      <GameEngine

       ref={ref => {

       this.gameEngine = ref;

       }}

       style={styles.gameContainer}

       entities={Entities()}

       running={this.state.running}>

       <StatusBar hidden={true} />

      </GameEngine>

           </View>

           );

  }

}

 

const styles = StyleSheet.create({

  container: {

           flex: 1,

           backgroundColor: '#000',

  },

  gameContainer: {

           position: 'absolute',

           top: 0,

           bottom: 0,

           left: 0,

           right: 0,

  },

});

 

Making The Classic Donkey Kong Arcade Game With React Native 

If you’re not those lucky ones who played Donkey Kong in their childhood, then do not get disappointed. It’s a game in which Mario (earlier known as Jump Man) attempts to rescue princess peach while defending against barrels and a monstrous creature known as a kong. 

Let’s have a look at what we’ll require for this project: 

 

1. Essential NPM Packages

Being the world’s largest software registry, NPM is a compilation of several code packages shared by open-source developers. There are a couple of essential NPM packages that can provide you a head-start in your project. Follow these commands to install these packages:

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

 

2. Aseprite 

For the process of slicing, editing, and scaling the sprites of your game, you need a great pixel-art tool such as Aseprite. The best thing is that you won’t require to edit any of the artworks for this game. All you need to do is use the images using sprites from the github repo of Donkey Kong React Native Game. 

And here’s how the final result will look: 

import React, { PureComponent } from "react";
import { StyleSheet, StatusBar } from "react-native";
import { GameEngine } from "react-native-game-engine";
import { LevelOne } from "./entities";

export default class App extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <GameEngine
        ref={"engine"}
        style={styles.game}
        systems={[]}
        entities={LevelOne()}
      >
        <StatusBar hidden={true} />
      </GameEngine>
    );
  }
}

const styles = StyleSheet.create({
  game: {
    backgroundColor: "#000"
  }
});

 

The Guru Mantra to Tackle Bugs 

Although React Native is one of the most stable libraries of javaScript, you might still find a lot of unmaintained libraries. jQuery is a great example of having numerous untested libraries, and React Native is no exception. 

It’s just the fact that React Native provides a consistent API that makes it better than other engines. Therefore, when you’re developing a game with React Native, you need to be prepared for reading a lot of React Native source code to figure out what’s actually happening. 

Here’s what you’ll likely experience during your process of making a game: 

  • You may find bugs within the Android’s native animation driver

  • You might face some crashes with the react-native-sound library

  • You may lose some data due to android GC’s memory-clearing function 

Out of all other operating systems, Android is particularly the most unstable. 

The Takeaway

In this article, you’ve learned about React Native and how it can be used to build a game. Moreover, you also learnt about Matter.js and how you can stimulate real-world physics in your app development using react-native. 

Latest Jobs

Cryptic Studios

Remote
1.19.23
Senior Producer

Anne Arundel Community College

Arnold, MD, USA
1.30.23
Instructor/Assistant Professor, Game Art

Night School Studio

Los Angeles, CA, USA
1.09.23
Level Designer / Scripter, Games Studio
More Jobs   

CONNECT WITH US

Explore the
Subscribe to
Follow us

Game Developer Job Board

Game Developer Newsletter

@gamedevdotcom

Explore the

Game Developer Job Board

Browse open positions across the game industry or recruit new talent for your studio

Browse
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more