@@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.
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!
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!
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.
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.
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.
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
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.
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.
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!!!
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!
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!
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
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.
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.
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
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.
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
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?
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.
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.
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
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!
Given that the data users store can be sensitive, if you had stored the data in a database /cloud service, do you know which service/setup you would have chosen?
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
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?
What about a way to connect the apps to the web browser game so you can do all the functionalities you could do in the web game with the pets from the app and vice-versa? 👀
I'm curious what happens if someone buys the in-app bundle but then deletes the app at a later date, does the user lose the in-app purchase benefits when they reinstall the app?
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.
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.
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?
Наука
Backendles???? Okay let’s start throwing books out the window
I give it 1 day before a hack comes out
@@theairaccumulator7144 I think its been online for a couple months now
@@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.
It's not literal, backendless / serverless is a misnomer
You've never heard of cache?
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!
Did you do it?
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!
really love hearing about the behind the scenes of development of VoidPet Ben can't wait to hear more in future vids :)
Loved following this process Ben! Looking forward to trying the game out
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.
Great work Ben! Love the insight you provided, really inspirational. ❤
If encryption is done client side it sounds like every state can be edited if you just locate the private key.
🤫
API called datetime can also be cheated with a proxy
@@geeshta 🤫
Hello from my rooted android :)
Ben! Thank you for sharing the process and the tech. 🙏
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.
There is a random name generator on top right corner on name screen. I agree with the second one.
Yeah im tired of calling them things like "hydrogen monoxide poisoning"
i think the idea is make it more deliberate..
random name generator for sure
I just name them whatever the emotion is
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!
CSS allows you to hue rotate the images very easily.
@@traniel123456789 but react native doesnt uses css and thats the problem
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.
Yep react native does have tint - doing it in layers would also mean you still have individual pieces to animate too.
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.
Thanks you for this Angular/Ionic tutorial. I had no idea you could write Angular apps in this way.
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
War halt wieder einer super kreativ haha.
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!
Thanks for sharing. Inspiring me to get back to my side projects
@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.
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.
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!!!
Thanks for the video Ben, I recently fiddled with expo and had the same conclusion. Much better than it was in 2019!
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!
Pls more insight videos Ben 😊 I really like that you show production code. You should be proud! What about the business behind voidpet?
I love watching these log videos even though I don't understand the techy stuff
Nice, coding an app with Expo and React right now, glad to see you recommend the same things I'm using 👍
Can we have a firebase notification with expo cli app ?
Super cool. Thanks for sharing ,love it
That's amazing work!
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!
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
Damn... that node_modules directory must have its own gravity well.
thank you for sharing this!
Looks great! The SVGs definitely look crisp. Downloaded the app and works well on a Pixel 6!
Very cool man! Just downloaded it!!
Ver Helpful. Thanks 🎉
"zustand" is a german word and my brain had to double check when you pronounced it - thanks for the insight into your stack btw :)
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.
Adding this now
The radial menu is a nice touch.
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.
I like this idea
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.
@@theairaccumulator7144 I enjoy the concept of re-inventing the wheel! Your comment is reminiscent of soviet era logic *slips off sassy pants*
@@ShighetariVlogs you single?
@@rake1840 nope, dating a data science queen 💜 I am lucky & blessed 🥹 maybe if she sees my RUclips comment history I’ll become single tho 😂
Thank you Ben
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
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.
Oh sweet, didn't realize this
Thanks for info. What tool did you use to draw the SVGs (output in svg format)
Amazing content!
"They're lookin like Silicon Valley Bank" 😂 Too soon dude
Love it thanks
So Impressed by how React Native can be used to build project like this
I think discord on phone is react native too
@@lolnein7216 and it sucks ... maybe i just hate the ui and how not smooth it is
and tesla app
Really great Ben
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
Congratz on the project ! Looks pretty dope !
Think you will be making tutorial in the future, or no time? hahah
Greetings from Chile!
"ENTER THE VOID!!!"
Amazing work Ben. I am doing closed testing on my startup app with React Native. Just curious, what did you use for the notifications?
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?
You could make use of Lottie files for the smoking animation
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.
You could use the api call to tell the UTC time on game launch so you cant cheat and go to the future in any part of the app, not only the battle pass
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.
but he said that he does not care if people cheat, he only cares about the battle pass
This works if progressing while offline isn't a feature. It kind of sounded like from the video that offline was though.
Thanks for the video, really cool stuff...
How did you / expoert the animations for the SVGS?
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
not the silicon valley bank dis at 7:10 lmao
stupid idea... could you not have a local build step on first launch that exports all the svg's at the correct scale to a texture atlas or something?
I got a couple of questions, Did you look into Flutter before you decided on the framework?
Have you tried Rive for animations?
Yes, it would be interesting to know if you looked at Flutter at all.
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!
Thinking about how tool like RPG maker handles animations could you create a sprite map for the pets this single image would house all movements?
"They're looking like silicon valley bank" loll 😆
I missed watching your devlogs
It sounds like you are using the Adobe voice enhance ai thingy. Nice! Much better then being stuck with a roomy recording
lol the steam effect is like a default particle system in unity. would take 5 minutes and no code
I suggest u to set the paths and baseUrl options in the tsconfig file in order to have a clean import inside the component
7:10 The SVB joke about SVGs is gold.
Given that the data users store can be sensitive, if you had stored the data in a database /cloud service, do you know which service/setup you would have chosen?
Pretty awesome, this is a professional game, you did a great job 👍😘😀😍
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
Man.. And me that was naming my pets in SQL statements hoping they would align up in the void somewhere to drop your table.
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?
Revenuecat is a godsend
1:29 "well, I take a sensible approach and *dont* harvest your data"
Best dev of our time
Nice cover!!
Can you explain how do you track on errors users get and monitoring in general? (Since there is no backend)
Check out RN Sentry
Ben can you talk about how to get into backend . If I were to build my own website and host it somewhere
„crappy mobile phones.. they dont look good like silicon valley bank“🤣
How do you test on different devices? Do you have your own device lab or do you use emulators/simulators
Am I correct in assuming the graphics are all done with UI elements? If so, why did you opt for this instead of using a graphics library?
You can try reducing windowSize to 3 or 2 to improve performance on terrain screen
What about a way to connect the apps to the web browser game so you can do all the functionalities you could do in the web game with the pets from the app and vice-versa? 👀
I love zustand
nice to see a project from the great Ben Awad built so similar I built my projects. The only difference is that I alias my root hahaha
Silicon Valley Bank 😂
You could use flashlist instead of recycler list view
As a German it is always funny how "Zustand" gets pronounced
What about FlashList by shopify instead of recycler list view?
Instead of Async Storage you could have used react-native-mmkv, which is faster. Any reason why you choose Async Storage over mmkv or other packages?
Wouldn't decompiling the app reveal your encryption key though?
Is it possible to render SVG to image buffers on the fly for menus where the pets are static?
I'm curious what happens if someone buys the in-app bundle but then deletes the app at a later date, does the user lose the in-app purchase benefits when they reinstall the app?
How's the build experience on expo? Have they made local builds possible yet?
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.
couldn't the time API thing be easily circumvented by using a local DNS and installing self-signed TLS certs on the device?
There is no framer-motion equivalent for react native. So yeah, I guess reanimated is the go-to for react native.
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.
A piece of advice that helped me in my React Native projects: use a module resolver.
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?
What are your thoughts on flutter?