Hi Ben, thank you for sharing this. I am an ex-product manager aspiring to break into software engineering / web dev. I've spent my first year full time learning how to code with Harvard CS50 and The Odin Project. Thank you for sharing this project and how you are going about building it. I want to build a similar app, so this video gave me a lot of direction on how and where to start. Wishing you continued success!
@@simplyzetax I’m guessing he meant local hacks, but unlike GTA I don’t think this will get the attention of giga chad developers to figure out hacks. Although I admit, a change in the svgs to a giga chad path would be kinda funny to see.
I have had void pet for a month now and have enjoyed it so far, however I have a few suggestions. 1. Don't force the player to name aver pet they find, it gets annoying fast and players will eventually run out of good names. Naming your pet should be an optional thing instead. 2. Display the users void matter somewhere on the screen.
For the pet svg problem and the issue with having too many color combinations: you could export different-colored elements in a separate image, rendering them in layers. There should be some way to tint them. So you only have a handful of images in your app package, the only issue is that when you render a sprite you are actually rendering 4/5 images one on top of the others, but that might bet not that big of a problem
I came across this problem as well in a unity project recently. The way i solved it was to use a single image/sprite and put every element i wanted to adjust in realtime either in the red, green, blue or alpha channel of the image. That way i could just tint each channel to a different color in a simple shader. Don't know if that approach would work in react but it's a pretty clean solution!
The problem is probably happening because he’s trying to persist too much data at once. He should remove objects and dom elements when they are not visible. Baking images would not only make it harder to update the layout but it adds a whole layer of complexity because images make separate network requests.
Really great Ben! I've thought about using React Native for a project before, and it's great to see your experience and get a peak at some of the underlying code with your thoughts!
I love how half of these comments are legitimate suggestions / improvements. Building in public can attract so many helpful people! Great video covering your development/process regarding your app!
@bawad, two optimizations on concurrent display of SVG-s on screen: 1. Render blank components in place of SVG when it is outside of viewport. With grid item lists you don't have to check every item, using math should do the trick. 2. If you would still need to convert to images, I am sure you could generate PNG assets from SVG-s at runtime with some library when you know the device screen dimensions (so that PNG-s are of an appropriate resolution for every device). You could do this on first load and cache the images to the device storage.
I would save the PNG rendering for absolute worst case scenario. Caching images is a huge pain because it makes separate network requests and he looses flexibility to manipulate svg paths. Selectively rendering content and manual garbage collection is the way to go.
@@wadecodez Why should caching (storing) the images to the device (local) storage make any network requests at all? I agree with you on SVG paths manipulation though.
Funfact: "zustand" is just german for "state". Same for "werkzeug" which is "tool-box". Idk why it is a thing but I'm always impressed how many names are just german in the end
SVGs are great. I have recently been working on an industrial scada system and ended up using SVGs to render live LIDAR data in the HMI for sensor calibration. It works surprisingly well.
Hey Ben, at a first glance your SVGs looks quite compact but I'm pretty sure you can shrink the file size even more, I personally recommend the svgo library. You can also think about doing some SVG sprite strategies if needed. I noticed that the background/garden have most elements repeated, you can also think about something to optimize down this path.
There are a few strategies you can use optimize your SVGs. For example, plotting the vertices that define the paths of your keyframes on a grid so that their coordinate values fall on whole numbers actually speeds up rendering. You could probably reduce the number of points your SVGs use as well. There are programs that do a good job of optimization, but if you can get a vector artist that knows how to do that manually they are likely to do a better job (for example, vector tools typically create circles using a cubic bezier curve with 12 control points, a vector artist with an eye for optimization can create near perfect circles using 9 control points). If you ultimately opt to migrate from vector to raster graphics go with PNGs. If you're clever about it, you don't have to generate thousands of variants of a Void pet. Break each Void pet design into component sprites that group/isolate shapes with the same color (think layers in Photoshop), then whip up some logic to apply palette swaps to each grouping (pretty easy to do, just change the R,G,B color channels and leave the Alpha channel alone) and then make a composite for a given variant.
Projet looks great ben! Why you choose not to use react-lottie for all the SVG animations? With help of after effects you can create even complicated animations for the pets. Also you can manipulate pet colors at runtime so that you can create even more variations by just looping them with different color values.
Yup you can just have a base PNG and then overlay colors on it. Also unity would've handled this super basic game extremely easily while running on even the shittiest phone, classic web dev trying to make everything web moment.
Great project ben! A request, could you please create a react native playlist with advance topics like RecyclerListView, Reanimated, Skia and other advance stuff, it would really help us out here! Anyway great job!!!
The let go button looks like a positive action rather than a negative one with the star ball icon, to the point where I misread it as "let's go" and took it to mean they spend a while at a park or something and then come back. Permanently releasing pets should require more of a deliberate action, and be framed negatively
Hey Ben, just wanted to say however data is being stored locally, if the app data is transferred to a new device. All user data is transferred as well. My girlfriend got a new phone and was happily surprised when she saw that all her pets saved transferring her data to her new device.
Ben, thanks for this video and all your great content. I made an app also with RN and expo called "TriviaLinked" and your discussion of animations/sounds is going to be really helpful as I try to improve the game! Thank you thank you thank you!
i was thinking similarly, like on launch just check if the device time is around the API time, if it is, then Date.now() can be trusted, otherwise use the api.
This is just great. One small issue I had with the app is when I wanna close a menu (like the main menu or the one for nourishing the plants) I instinctively tap outside the menu (on the dark overlay behind it) but that doesn't close it.
Damn, great to see React Native has been utilized for this project which I wasn't expecting since its a game, huge fan of react native and this inspires me soon to make more apps using react native
yup I took the same choices regarding cheating some aspects of my game, if it becomes a massive hit you can still correct the weak parts (if you keep track of them, or just know which part is weak). Most of the users won't try to cheat the system
Hey Ben, awesome as ever! Can you post a video with your though proccess of your design ideas and implementations? That would be super cool! Liked as always, keep it up!
@@StephaneModesta Yeah true. Probably requires some extra code to check whether the connection succeeded and react accordingly if not (don't keep trying to send requests, just display "no internet connection")
Highly recommend react-native-skia instead of svg's for animations and vectors in general. Sure, it's not officially production ready but it's damn stable, stays away from the js thread and it's relatively easy to convert svg's to it.
Great video Ben.. I saw you made used of the `tw` package. What the difference between using that and the default tailwind setup a d config for react-natjve app? Isn't it the same, or is there any difference towards using that package?
Thanks for the video, I enjoy watching it Ben. Just a quick question, why you say backendless, which part I need to store information? I don't think I got this part. You mean registration?
For the trusted time source, someone could still cheat by having their own DNS server point to an IP they own. So you could make the time return whatever you want still.
please make a video on how you build measurable optimized mobile applications and how you would improve or apply measures/logging and optimizations to existing applications
Can't you store some data in the Google Play / Game Center account? I Never used it but seems that some games use it to store state between devices. App is looking great!
You can make 1 png that supports as many colors as you want. Instead of drawing with visible colors you draw color id for specific region and then you can have a separate color palette that reassigns each color id with a particular color. Also the whole svg thing seems like a mess, of course that's the tool that you or your team is most familiar with, or more suitable for web. But giving an example that the device cannot render/animate more than 3 at once is like a joke, the average phone has capabilities to render hundreds of thousands of animated sprites at acceptable framerate (even inside a web browser when using something like WebGL).
Can you make the haptic feedback less aggressive. My phone practically jumps out of my hand every time I click a button. If you could just make the strength of the vibrations weaker on Android, that would be great.
@@Soulis98 Is very good, they have a CI/CD pipeline already configured so that your project can be uploaded to their cloud and automatically built as an Android APK or an iOS App. Publishing the apps can be done directly through the CLI, and then you will just need to perform some extra effort on Apple side of things to actually publish the app.
@@Soulis98 I've never seen anybody saying that but I definitely wouldn't consider it trash. If you have a web development background, it will be far easier to put something together using React Native than natively coding everything together or using Flutter. React Native used to not be so great, but the Expo ecosystem has largely changed that. Not to mention, many of the packages you are used to in React exist within React Native, so it benefits from the greater React ecosystem as well.
@@Soulis98 In this video, Ben also mentions that he's making use of Zustand, which is a state management library developed that has learned from the mistakes of a certain previous state management library in the React world. I'm not sure what the situation is like for native development or Flutter, but it helps a lot to have these developed tools that are being used and maintained by many other large projects.
10:09 Couldn’t you bypass this by spoofing this API server? like you could install a custom DNS server on your phone that redirects the API traffic to a server you control. Then you could issue a certificate for it and then manually install that Certificate on your phone as well.
Why aren't you using import aliases? It will simplify your imports: - import { ... } from "../../../../ui/myComponent" - import { ... } from "@/ui/myComponent"
BEN.....please give the "Are you confirm" alert popup after the "let go" button , I accidentally pressed and my pets just gone...and also the feeling that one day I'll press that button accidentally giving me PTSD
For the colours and pets, what about using a PNG and then creating a layering algorithm to apply the separate colours to specific areas? Idk, maybe it's less efficient, I guess you lose the possibility to scale the image
What did you use to style the UI? I starting a new large React native project and was wondering what is the best way to style in react native expo. I've seen people use tailwind with native wind?
