Daily news, dev blogs, and stories from Game Developer straight to your inbox
Sponsored By
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.
7 Min Read
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.
According to the Stack Overflow’s 2020 Developer Survey, more than 68.9 percent of respondents expressed interest in working with React Native.
With the growing trend of JavaScript programming languages, React Native is one of the most loved JavaScript-based tools with 21.5 percent of Google Trends in its favor.
In a blog post, the UI engineers at Netflix talked about their decision to switch their app development using React Native.
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 |
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"; |
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.
Read more about:
BlogsAbout the Author(s)
You May Also Like
Latest News
Trending
Featured Blogs
