DEV Community

Cover image for Building a Mobile Game Using React Native
ryanvanbelkum
ryanvanbelkum

Posted on

Building a Mobile Game Using React Native

Alt Text

Concept:

It's the simplest games that are the most fun. At least that's true for me. Flappy Bird was a hit, and it just involved touching the screen to give your bird a little loft. So why couldn't I create the next Flappy Bird? As a professional web developer, Javascript and HTML/CSS are well known. This makes React Native a perfect framework for me to create a mobile application. I've made a couple mobile apps in the past, but could I create a full 2D game using the framework? I decided to find out.

Idea:

I had no idea how to build a mobile game using React Native. Looking through examples and articles I found where someone had built a game with blocks falling down from the top of the screen. They were using a simple library called React Native Game Engine and Matter JS to simulate the physics. This was awesome! Then the wheels start to turn. At the time my son was just turning three. Among his interests in trains and cars, he also enjoyed "space". Mostly because of the movie Toy Story. I also wanted my game to be controlled by the movement of the phone. I've seen many kids play games on devices, and they often move the phone in attempts to move the player on screen. That is when I settled on the "Shaky Shuttle". The concept was simple. Space items would fall from the top of the view towards a shuttle at the bottom. The user would tilt the device to move the shuttle left and right to dodge these obstacles. There would be stars and other items falling down to make it look as though the shuttle was speeding through space! The higher the score got, the move items tossed into the mix. This would be the premise of our phase one.

Development:

This would be a learning experience for me. I've never created a game, let alone one using React Native. Luckily, React Native Game Engine has tons of examples, and even a repo of other game projects. I bootstrapped the app using Expo. This takes all of the heavy lifting and configuration from a React Native project. Once our project was created, time to get React Native Game Engine setup. I wont go too deep into the concepts of this library. I wouldn't do it justice, and their docs and examples go way beyond what I could explain in this article. The core of RNGE is that it "ticks" at a set interval. Each tick represents a frame on screen. From there the game engine has two core components, systems and entities. Systems are an array of functions to be called on every tick. Entities are objects to be placed on the screen. Entities typically contain a render function, which return what you see on screen. This could be anything from an image, to native elements like View.

Above is the render function for my game component. Notice it doesn’t return much. GameEngine is imported from React Native Game Engine. We’ve given it a couple props, mainly our systems and entities.

Systems:

We have three systems. First is physics. This one is simple. Every tick if it passes the time to Matter to update the fall of the objects based on the gravity simulation.

Next we have tilt. This updates the x position of the rocket, making sure it doesn’t move off the left or right of the screen and out of view.

Finally, trajectory, which sets the path of all our space objects. This keeps them on the screen or regenerating them at the top.

Entities:

Entities come in two parts. The body, which is created from Matter, and the renderer, which is our custom component that returns an image to show on screen. Here is an example of an entitiy.

And it’s renderer…

Rest of render function:

The other components in our render function are passed in as children of the game engine. Mainly, our score component, hiding the status bar, and an overlay which pops up when the rocket is hit by an obstacle. When the rocket is hit, we show the user their score and a “restart” button. Upon restart we reset the component’s state and swap that out in the game engine with recreated entities.

Release to he App Store:

Upon writing this article, the app was just release to Apple’s App Store. Expo makes this pretty simple. Their docs walk you through the building of the standalone app, and uploading to the store. Again, I won’t go into crazy details as expo’s docs explain things much better. First step is to build your standalone app. This assumes you already have an Apple developer license. Once your build is finished you will get a link in your terminal to download your bundle. Now you’re ready to upload to the app store for the review process. There are multiple ways to do this, easiest I found was using Apple’s Transporter app. Once the app is uploaded you will be able to see the build on App Store Connect. This is where the waiting begins. It takes time for them to process the new upload. Once finished you will be able to test via TestFlight. I highly recommend doing this. I have found bugs via TestFlight that weren’t apparent using Expo. You will now need screen shots and app preview videos. Make sure to make these as high quality and appealing as possible. This is what the user sees when they’re window shopping for apps. This process is also quite a pain. Apple is very specific on resolutions and often won’t tell you exactly what is wrong when there is an error with your submission. Eventually your submission will be ready and your app will be ready for sale. Click that release button and watch your app 🚀. Note: it takes a bit for your app to actually show up in the App Store.

Conclusion:

Home page for Shaky Shuttle

Discussion (7)

Collapse
maskedman99 profile image
Rohit Prasad

I checked the game in apple store and found that the download size is near to 100MB, isn't it overkill for a simple game.

Collapse
ryanvanbelkum profile image
ryanvanbelkum Author

Hi Rohit! There may be some discrepancy with the App Store. When I pull up the App Store mobile app on my phone I see 58.6MB, but I do see 94.6MB on the web version of the App Store. Honestly, even 58.6MB is quite large. The app is built using Expo. I assume 95% of the bundle is Expo code.

Collapse
rileyrg profile image
Richard Riley

And there is no way the build can prune out unused components? Yuck.

Thread Thread
maskedman99 profile image
Rohit Prasad

No, not without ejecting from expo. My advice avoid Expo and use the CLI version.

Collapse
lfkwtz profile image
Michael Lefkowitz

Very cool, Ryan! Shared on React Native Now

Collapse
jahangirhussain profile image
jahangirhussain

unable to find its source code of complete project. Pleas make it share

Collapse
bberak profile image
Boris Berak

This is really neat Ryan. Fun and easy-to-play concept. Thanks for sharing! The large size is due to Expo, but I've found it to be more than a worthwhile trade-off in most cases.