My first game with React Native
You might be asking yourself the question: Is React Native the best choice to develop a mobile game? The short answer is no, React Native is a great solution to develop mobile apps but it has not been created to develop games, there are other languages or technologies (like Unity) more prepared to develop them, this kind of solutions will provide you with a ton of useful features that will make the process easier, faster and more consistent: 3D graphic engine, physics engine, sound management…etc.
However, in my opinion, there are some cases where you can develop a game using RN achieving a very good result. To demonstrate my theory, I´ve created my first game (MemoShape) using this technology and in this post, I will show you how I did it and when using RN is a good idea.
First of all… When can we consider RN as an option?
Use React Native if:
- 2D graphics
- Easy user interaction
- Image or text based games: puzzles, trivial, board games…
- Easy platform games.
Don´t use React Native if:
- 3D graphics
- Complex user interaction: Strategy…
- Complex physics: Simulators, Sports…
Let’s talk about MemoShape
MemoShape is a game that will help you to increase your memory and responsiveness while you have a good time. The design is very minimalistic and inspired in material design.
How to play?
Memorize the shapes: Each block represents a shape that you have to memorize, but be careful … you must memorize only the property as indicated in the upper part (shape, color, rotation or letter), you will need a great concentration to do not go wrong.
Touch the correct shapes: Once the memorization phase has finished, a board will appear where you must click on the shapes you have memorized, but hurry up, the time is running!
At first, it may seem easy, but do not too confident, the complexity increases rapidly :)
As you can see, the structure and behavior of the game are very simple, we just have 3 screens (home, memorize screen & board screen) and colorful shapes turning in both directions. Easy, right?
In my opinion, this game is a perfect example of what you can achieve with RN. Is your game so much complex? Then I recommend you to take a look at other languages, you will have fewer headaches 😃
If you want to play it, the game is available for Android & iOS (this is one of the coolest things of RN), you can download it here:
These are the libraries that I’ve used to develop MemoShape:
I decided to use SVG instead images to load the shapes. Why? Because it is much easier to manipulate them (size, color…) and because they always will be rendered without losing quality. I used this library:
When the user loses or wins the playing level, the game reproduces a sound:
Complex layout? Try this library:
Animations:
More awesome libraries that you can use:
This is the most complete library that I found to develop games with React, you have physics, loops…etc. You should take a look at this.
This library is also very interesting, Lottie is a mobile library that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile.
Your game needs store data or sync with more users in real time? Then you should check Firebase.
And that´s all, I hope you like it :)
If you have a game idea and you already know React Native, don´t throw it away as an option yet, try to evaluate your needs first. Don´t forget to comment if you have some doubts or you know more cool libraries.
And finally, if you want to learn more about React Native and other languages, take a look at codetalks.tv, my new project :)
See you in the next post.
