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.