Introduction
I’ve finally had my first app released onto the IOS App Store. My first app viq-scores was rejected due to copyright claims from FIFA (using team/league names/logo’s etc. ??) but you can still access it at: https://viq-scores.co.uk/. I decided to build a game while utilising the skills I already possess, mainly JavaScript. The main technologies I used were React Native for the framework and Matter JS for the in-game physics.
How to play
The game has a very simple concept: you are the rocket ship. You must keep the rocket flying so it does not go downwards and fall off the screen while avoiding the asteroids falling down; collecting the emeralds falling down and collecting the fuel canisters falling down.
The longer you keep flying, the higher your score gets. Collecting the emeralds also increases your score even further. Bumping into an asteroid reduces your health by 25%. Collecting a gas canister increases your health by 25%. If you health reaches 0% or the rocket falls off the bottom of the screen, it’s game over.
Motivation
I wanted to gain more experience with using React Native. A very similar language to React but it can be used to create apps for both Android and IOS among other platforms. It has few extra features compared to React which I love such as the stylesheets which is an abstraction similar to CSS StyleSheets. Basically, it allows you to add styles to components like you would assign a variable.
Prior to creating this game, I basically had zero experience in knowing how to either create a game or how it would work.
Lastly, I wanted to released an app onto both the IOS app store and the Google play store to understand how the logistics of this process works. I’ve found that Apple are super quick in their review process. After submitting my app to the IOS App Store, they started reviewing it within 24 hours and it was approved/rejected within a couple of hours after that. For Google, my app has been in review for over a week with no update. ??
Design
If you know anything about me, you know that I am terrible at design and UI (all my previous web apps can attest to this). To make this game look attractive, I decided to hire some freelance graphic designers via fiverr. fiverr is an online market place which allows users to offer their services and customers to acquire these services. This can include anything from designing apps, creating app, writing a biography to pretty much anything.
React Native Game Engine
This is a game engine that comes with lots of useful utilities to allow you to quickly build up your game. The definition from their GitHub page:
It's a sort of game kickstarter project that allows you to prototype ideas quickly and comes preloaded with a bunch of stuff like: A 3D renderer Physics Particle system Crude sound API Sprite support with animations
The difficulty I found with this library was the lack of documentation; there’s hardly any of it which made it very difficult to debug problems or make simple modifications to much of the game.
Matter JS
Matter JS is a 2d physics engine made for the web, but can also be used with React Native. It has many useful features such as collision of bodies (objects). I haven’t delved deep enough into this area, but it can perform similar physics to the way the famous GTA physics engine works. Collision of bodies that react in a realistic way.
I used this library to create my bodies like the asteroids, the space rocket, the emeralds, the fuel canister and the walls around the side and top of the game to stop the rocket from escaping. As you progress in the game there are 3 levels: level 1 when you reach a score of 3,000, level 2 when reaching 6,000 and level 3 (highest level) when you reach 9,000. As you progress in the levels, the asteroids get bigger and the restitution of the asteroids increase, that is, if you bump into them, they’ll know you around much further.
With the rocket, with each tap on the screen, again I use Matter JS to apply a force to the rocket to propel it upwards. I also calculate how far on the screen you press left or right to then propel the rocket in that direction as well as upwards.
Future Iterations
A few things I could add in the future:
Ads: I could monetize this app but that wasn’t my motivation here.
Special powers: the rocket could get special powers in the same was as it gets the fuel: by bumping into it. These powers could include temporary invincibility where the asteroids wouldn’t affect you, magnetic powers where you automatically get the fuel every time it drops into the screen etc.
Allow users to change sensitivity and other settings such as, how much force should be applied to the rocket every time you tap on the screen.
Github
IOS link
Happy coding!
Comments