How I Made a Game in React Native

I just released a new mobile game with my team called void pet dungeon and it is out on IOS and Android because we chose to make it in react native the

inspiration for this came from playing AFK journey and honai and some other sketchier games and we wanted to see if we could take our 2D emotion monsters

and create a simpler version of those style of games and also could we pulled off in react native mostly because I didn't have any experience with the game engine and I kind of didn't feel like learning one one big thing going for our

game is we chose to make it turn-based there's no way you're making a good real-time game using react native but if you're building chess or something like that where you press a button and an

animation plays then react native can kind of get it done we also kind of tested out whether this would even be possible by creating a little bit of a game in our mental health app called void pet Garden where you're kind of

doing a 1 V one kind of Pokemon style battle and we were like okay this kind of works now before we talk coding I got to plug our book my co-founder Linda

just wrote a void pet book called hands of greed which is a 400 page fantasy book based in the world of void pet I'm incredibly biased but I mostly read fantasy and out of the 51 books that I

have read recently recently being maybe in the last 15 years this is my second favorite book so go to hands of gre.com and you can learn more okay Tech time

after you complete the tutorial and make it to flor 10 and void pet dungeon your main screen is going to look something like this all the icons all the

backgrounds and even the pets are all svgs and these are svgs made in figma because my co-founder Linda is a figma wizard I recommend getting one of those

it makes your life so much easier and makes everything look awesome then the basics are you pick a cool font you put a bunch of colors and it looks more like a game and less like facebook.com when you do that okay my pet's going a little

crazy let me get like a yeah let me switch him out just for the sake of you're not supposed to see that yet okay there we go this is a milder pet for you

this is lonely next we have that bouncing chest the daily boss which here's a nice big version of him and if I go to

training enter all these bosses right here we have a I think 12 or 11 bosses they're animated using RI drawn inigma we do a bunch of idle animations but you

you can also do active ones with r so if I tap on this chest you can see it opens I get my rewards awesome if you want to animate a character or anything R is very nice and I would recommend it if

you can do what you want to do given their SDK we almost converted all of our pet animations to RVE but we just hit a hard blank where we can't actually

change the colors of the svgs or the paths using RVE it's kind of hardcoded which was a little bit sad so we left them to be svgs and they kind of do this

little wiggle Thing by Interpol interpolating between two svgs and I have another video where I go more into depth of how we do that believe it or not the little particles floating downward so void pet dungeon is a kind

of winter based game that's why that's there are using lahi and not Rive mainly because I found a snow animation really easy with lah and I didn't find one RVE and now that I think about it I probably

need to replace it because it doesn't work on Android like if you create if you play this game on Android you probably won't see this no particles and by probably I mean you won't we did create some higher form pets and we just

said with these higher forms you can't change the color and so those we we made those using RVE and those came out really good and as I click around unless we just use

modals bottom tab bar this is using just react navigation and the native Navigator we also use a lot of recycler list view cuz we have lots of lists that

are long and lots of images and little icons I can take a lot like look at all these items and that just helps with performance it's really good the background with the waves svgs all these

items in their backgrounds also svgs sometimes that can be a problem with computation performance on Android when that happens I just switch things over to images and then things work okay

let's talk about the hatch animation now I'm going to kind of expose ourselves for being basic when it comes to animations but uh here we go useing my gems which were hard fought for freeto

playay player here hyphens one of our NPCs that's a figma dude as well um confirm all right this is a little reanimated action going on tap once got

a terrible pet that's a rare and then we have some opacity going on to kind of transition and then every time I tap it just changes the image and then we pal we have some triangle particles also

using reanimated reanimated is a huge part of what we do for battle and in a lot of little places which will show I can't remember if these particles show on Android there's some sometimes when I do like these small little particles

those are all small reanimated like views doesn't work well for performance so sometimes I just turn things off in Old devices this is the breakdown of our greedy egg which is kind of the same thing as our mystery egg but a different

color and we just kind of switch between the images and at the end have these fly everywhere and translate the X and Y and it looks very cool well I don't know if it very cool is the right word but kind

of cool all right now for the fun stuff we're going to hop into a battle my team's Looking Good Start battle once

again background icons Circle all figma svgs now actually the red circle you see is not in like kind of the the targets they images they used to be svgs but

that was one of the ones where the performance on Android was less good so I changed them over and the background that's memorized never changes so it was fine to be an SVG and it looks really

crisp on all device sizes because of that but you'll notice like as you change your move at the bottom of the move bar it changes what kind of targets are going on and so we're constantly

rendering and rendering and that's where performance can be dicer if you have a very intricate SVG and some of the pathing on it was intricate so an image

just solve things all right let's cast soak bam all right we got a move firing off you saw like this thing fly across this screen let's break down what's actually going on there so in a void

pack casts a skill we show an animation using a Sprite sheet which is what you see right here a lot of old school games use these you might be more familiar with kind of the block grid of

animations of little Sprites and you just kind of show these really quickly and it kind of creates an animation and you play them on Loop a lot of times for idle animations they also work for

casting skills so in our case we just have a very long horizontal one and if I zoom in you can kind of see the particles and as it changes you kind of just watch the entire animation kind of

play by scrolling left and right and this is a giant image look at the dimensions in the bottom right it is 33600 x400 so very long now to actually

display this in react native what happens is I display an image and I have overflow hidden on it so you only see one frame which is about 1,00 pixels I

believe I use reanimated to translate it to the the right to go this way and if you play it fast enough or really at the rate that you want it you can change the

frame rate it just looks like a nice crisp animation flying across the screen now you may be asking can you just render this size image and everything is

okay the answer is actually yes as long as you're not on Android 9 or lower if you are problems can occur I just disable them and we're kind of fine because not too many people have Android

9 devices or lower or if you do you just play without animations and it is what it is also not all of our animations are that long for example this one is a square animation and it's a lot shorter

it doesn't need to be horizontally going across the screen it's just kind of a bite that goes on somebody now I can sit here and I can recast that move we could watch it again or I can just go to Auto

Battle and I can watch this kind of play and they can cast skills for me and that's two different style of ways that you can play in the game but the same thing is happening an input is automatically chosen for you and then we

play the animation across the screen I can also speed this up if I want to this is 2x speed and it can really start zooming and really all that's going on

in battle is showing those Sprite sheets showing outlined text and little images with a fade animation and then some math

going on so we did have to do some like arctan math or something to be able to choose the diagonal like this lonely needs to hit this sge in the bottom right and so you can see the angle's a

little bit different compared to if it was going all the way across so there's a little thought put into it and then some pets will lunge you see how he kind of goes forward all it is is a

translation but it's rotated translation with some math underneath the hood all using reanimated very nice very cool I used to use skia for the uh outline text I stopped for some reason can't remember

why switched to this Charmy Tech Library has been working great and the text looks crisp and stuff that's pretty much it when it comes to the things that we did to get kind of a game likee feeling inside of react native app now to get

the battle screen to work in particular I did have to do some optimizations and some profiling using the react profiler and just seeing where all the renders were coming from to get things to work

relatively smoothly on lower-end Android devices and I wouldn't even say it is perfect then but it's a struggle for everyone I think so the big thing for me

was I use zus stand and every times so many cast move or something we were rendering a lot of things on the page and so I just went through with the

react profiler and I was like okay when you cast this these are the things that should be rendering and these are the things that should not and I just did a lot of memo one random crash we had on

Android devices had to do with flipping the text so you'll notice how the boss on the right side he's looking the opposite direction that the pets are so

how do you get that to happen well you say scale X is1 and it flips the the dude horizontally well that makes the text go backwards so what I was doing is

I reflip the text with the scale negative one on the X direction as well on some Android devices that will make things lag really hard and it can't

handle it others just fine iOS just fine so we didn't catch it till production and then I was like okay we just won't flip the text cuz honestly it was kind of silly that was doing that but you know when you're coding you just put

silly little stuff everywhere but the thing that I found that has worked really really well and is how we got our crash rate down uh like 5% lower or whatever it was the beginning of the

week was every time somebody would crash I would give them a Dev build and I'd be using Expo and do tunneling so they can like make changes on their phone as I'm kind of like testing things and they can

they can replay it and they can recreate the crash and then I would figure out where it was coming from and we just like fix it live on the spot so that was huge for figuring out all these random crashes cuz there's so many Android

devices and that's pretty much it for void pet dungeon if you like strategy games give it a try you might like it and if you're running into any crashes let me know cuz I am trying to fix all

those