My App has More Complicated Animations Than Yours

voidpet.com/
#benawad #voidpet #VoidLog
----
Follow me online: voidpet.com/benawad

[@ahmadalghali90]

My dude really just pulled out a calculator for 67 * 10 …. I have a chance in this industry.

[@31redorange08]

No professional software developer does that. So forget it.

[@goatard3916]

@@31redorange08 hahaha why so mad bro

[@canodepvc2837]

@@31redorange08 So Ben is what, a plumber?

[@31redorange08]

@@canodepvc2837 I don't know what he does for a living.

[@floodo1]

Better safe than sorry

[@wlockuz4467]

I can't believe an engineer of your skill level thought "Hey, I want some animations, I am gonna reinvent them!" instead of reaching out for something like Lottie or Rive.

[@Smurfis]

It’s better to understand the core concepts it’s the difference between building a car and fixing a car

[@MrMajorduck]

@@Smurfis Hey I have an important business meeting to get to tomorrow, I will build a car because then I know how to build a car. Unfortunatly my car is poorly made and took a long time to make so I missed my meeting.

[@sebastianramirez5781]

@@MrMajorduck have you played voidpet? the animations are great, you can't re-invent the wheel for everything but you also can't be so afraid of making stuff from scratch all the time.

[@levizin917]

programming will never be building blocks of libs, sometimes learning to use something like this takes time and also doesn't fit to your needs

[@1SquidBoy]

@@Smurfis If your job is to drive somewhere, you don't build a car so you can drive somewhere lol

[@elliotsharpe5448]

One small tip. The input for typing a name in for your pets has autocorrect enabled for it which is a bit weird when you're choosing a name. Pass false to the autocorrect prop on the TextInput to disable it :)

[@travis9260]

There's a bug that if you have no pets (from letting them all go) sometimes when you open the app you get a phantom letter that when you try to open it crashes the game.

[@bawad]

I saw this bug in sentry and I was wondering what was causing it lol. How did you get rid of your starter?

[@travis9260]

@@bawad To get rid of the starter you go to your pets and hold down on it

[@Alex-ry1gv]

@@bawad Just downloaded it and there's literally nothing stopping you from releasing the starter.

[@bawad]

@@travis9260 oh I didn't account for multi let go, thanks

[@Yusuf-ok5rk]

​@@Alex-ry1gv this says a lot about our society

[@JEM_GG]

I love over-engineering stuff like this! Thanks for sharing Ben

[@DiegoZamalloaChion]

Use sinusoidal interpolation instead of linear to avoid the appearance of infinite acceleration at the ends of the animation. Not sure if this is consistent with the desired animation style, but I would prefer smoother velocity.

[@abdulazeez.98]

I really thought you just specify the start and end frames and some library do the calculations. Awesome work man

[@dinoscheidt]

If this is high enough in the backlog: this is something that should be pre-computed and used with i.e. Lottie. I see no reason why this should be computed on all devices all the time. At the end of the day, each monster is just one continues timeline of state + accessories mounted to points. In i.e. for easy Lottie in after effects you would create one timeline for each monster, animate it through and in code just play the loop of the current evolution step it’s at. In the after effects file drop transparent objects on neck head, to attach to later. AE supports javascript btw. The code here gives me shivers 🥶 AE and Lottie is just one example. Having a timeline and a renderer is standard OpenGL / Shader / etc practice.

[@Kasukke]

How would you do the accessories and hats? Would they require separate assets?

[@juanmacias5922]

@@Kasukke I was wondering about that as well. Possible that on Rive it could just be a bool.

[@dinoscheidt]

In case of Lottie files: These are not flat, you can access layers within them (frame info property). However, even if they were (like a flat video file), generating a complementary file that just lists at which frame the anchor is for an an accessory, wouldn’t be so difficult. Then you’d just position the accessory at the position of the given frame. At 60fps, pretty efficient. One frame of 60fps is 16+ milliseconds long. So ages of time in terms of compute to position a few things.

[@citronovykolac]

Tradeoff between storage and compute power. I bet it's quicker to compute and store in ram than transfer all precomputed frames over network

[@dinoscheidt]

@@citronovykolac No for lottie files, which are motion vector files. Aka has the code for animation and not the frame by frame pixels. Also, to not trade storage for compute is a fools errant in 2023. We are not living in the age of floppy disks anymore; but battery constraints.

[@weidiocrow]

Memoizating "svg paths frames" is a really neat idea! Although it does seem like pre-computing images would be easier on performance, rough napkin math tells me that storing 670 Lust frames might be around 6mb, which doesn't sound bad, but IDK if the way you interpolate item animations would work the same 🤔.

[@sourabhverma9034]

I did something similar for another mental health app I was using except that I wrote a composite path interpolator which interpolates and combines multiple paths into one and returns it instead of animating them individually,

[@benji9325]

does all the animation you made support ProMotion? what I know is RN is hard coded at 60fps does your app look smooth on iPhone 13/14 pro and up?

[@Sven-W]

@bawad does this depend on the verticies/paths being in the same order between the two .svg files? If yes, how do you ensure the same order when creating the files?

[@bawad]

It does, Figma handles that nicely

[@floodo1]

What a world where it takes this much work to animate between two svgs

[@hilllynn]

I use to do all my animations with code as well. I started doing my animations in After Effects -- much faster (once familiar with After Effects) and more maintainable (no code). The animation is exported as a json and then passed to a library called Lottie. P.s. Very pretty game! :)

[@ZeeshanAli-nk3xk]

Nice techniques man, never thought this could be possible with SVG's. A side question, do you read books brother?

[@Kat21]

Ben out here showing us life changing techniques good job man 👍

[@0xpatrakar]

Is it just me or this feels over engineered? I don't see anything off with this method but feels unnecessarily complex.

[@Notoriousjunior374]

What is? The animation?

[@0xpatrakar]

@@Notoriousjunior374 The implementation. The animation methodology seems pretty standard.

[@noel.friedrich]

welcome to overly object oriented programming... this could all be one function but he split it up into so many confusing parts

[@0xpatrakar]

@@noel.friedrich That still is fine with me to be honest but I feel like the logic could be a lot simpler.

[@0xpatrakar]

I'm assuming it is probably optimal for them to do it this way for their use case.

[@TomieGG]

What do you use to display mobile view?

[@trigunadi4024]

he looks like a happy depressed person not being able to sleep for two days

[@natestrings673]

I've been playing the game a lot. It's been great so far! There's a bit of confusion though: 1. Does rarity of food or pets equate to anything besides physical appearance? I've noticed that the black pets are were normally worth way more in passive void matter than the rarer pet types, but honestly it just feels random. Same for the food, it does not feel like the rarity has any correlation with xp gained. 2. Does cuddling or dressing up have any real benefits? I can't really find a reason to focus on it long term other than cosmetics. The movement improvements have been looking really good so far btw!

[@Sp00mster]

Hmm... Is there a reason not to just use css with a transition to animate the svg paths? I know css is bad but this looks awful.

[@lucasa8710]

Wouldn't be better if you used this logic in a separate script to pre-render all the animation frames and then just use the frames as a regular animation? Now you have pay the price for computing the frames on each frame which is crazy

[@vitorgouveia5378]

whats up with changing titles and thumbnails of recent videos?

[@fattuglee]

Who is drawing those svgs for you?

[@christianmonfiston]

What programming language is he using to build his app?

[@carbondesigned]

Can you talk about CI/CD? Expo to the platforms? Maybe even handling user testing (like testflight)?

[@peterszarvas94]

If you calculate the SVG animations upfront, and only ship the paths in an array, you don't even need to memoize it.

[@user-ut4hj7kc1t]

Is it not possible just to morph in between svgs and that is it?

[@EndoTheBear]

Would it be cool if there where a "performance mode" where the svg of the pets gets rasterised? It would be better for phones that aren't that powerful to render a bunch of svg animations

[@riolly]

Fluid animation that mimics real physic is always complicated. Really awesome to see you work it out.

[@tevoj]

Looks like this would have been way easier to achieve using lottie or rive. Why did you decide to do this "manually"?

[@ravikumarmistry]

I would have used Lottie animation and abstracted out all this junk animation code from my codebase. There would be 2 advantages of using Lottie 1. My code has become more maintainable 2. Saved a lot of time. 3. The artist would have full artistic license to animate it anyway. Such a waste of time. But salute to the hard work. ❤

[@cleyuh31]

Great update video. Inspires me to keep coding. Thanks Ben.

[@BarisPalabiyik]

My lazy ass would be putting pulse animations to every goddamn property to make it work.

[@nanonorthlabs3375]

Nothing will ever beat DIY, vanilla code. This is the moral of this video. I didn’t expect skia to be slow but there you go

[@wcandillon]

Contributor on RN Skia here 🙋🏼‍♂ Hope you will indulge me for answering here :) I'd like to point out that the method demonstrated in the video contains redundant steps on every single frame. Although all paths have been pre-calculated, the string is still parsed, and a new path object is allocated/rendered for each frame. Skia enables users to create the full path object in advance (as path commands stay the same between frames, with only the values varying), and during animation, you can simply interpolate between path values without needing additional parsing or allocation. This technique is significantly faster based on our experience. We suspect that Skia may have been evaluated on an older version (distributed by Expo Go) that lacks UI thread rendering and UI thread animations. Naturally, if you directly use the SVG path string within the component, you won't be able to fully benefit from Skia's performance features.

[@nanonorthlabs3375]

@@wcandillon very good response and insight

[@rommyarb]

Nice technique, Ben

[@akarshanmishra2351]

Why don’t you use a high res gif or a short video for animating ?

[@termite9501]

have you considered adding an ease in and out?

[@KManAbout]

Yup that would make more sense

[@matwright110]

Nice insight 👌

[@Quacky_Batak]

I'm kinda sad that lust doesn't have number of frames set at 69. We were so close to greatness. Nevertheless, amazing video, quite informative

[@n-0-1]

You should add a little linear interpolated easing to that animation.

[@wezter96]

Have you encountered performance issues on Android? Wondering since the way Android renders SVG's can cause performance issues and that's why one general recommendation is to use font icons as much as possible instead of SVG's.

[@justpatrick_]

The app works perfectly on my 5 year old android

[@kraxen72]

awesome, the most encouraging part was when he used a calculator to verify 67*10 is indeed 670, gives us not as advanced programmers hope

[@quickmaths4762]

Maybe you can make a video (separate from this series) on when to choose unity and when not to, for mobile 😊

[@pgameplay9639]

Coding all of this yourself instead of using a library like Lottie? What are you going to do next, code in Angular? /s ... kindof

[@Jangeroo]

Can’t you just go figma to lottie and save a week of overengineering?

[@wfl-junior]

this is insane

[@TheWiredArts]

So much work for this result. What even is this animation supposed to be. Either do proper animations and use rive/lottie or just wiggle it around with css and be done.

[@BehindTV]

Damn this looks like a lot of work, good job. Now add a setting to turn it off

[@saturnteatree]

I’ve been playing the game for a while and i want to give my feedback… 1. there are way too many pets 2. I want to be able to choose the pets i want to grown not wait for them to visit the garden 3. I want points when i let go of a pet 4. I want to be able to have more trees in my garden 5. We need more scenes less pets Ty!!!

[@itsanishjain]

Everyone in working on AI, Ben is just build different. GOAT.

[@vicyoslinuxofficial2607]

I love your video titles and humor. Hahahahaha

[@pedroalonsoms]

I’m probably missing something, but, why not to simply use gifs to animate? Wouldn’t using something graphics-oriented like Unity make things faster/improve game dev experience? I’m curious, great game btw.

[@arjix8738]

what you are missing is that he is interpolating the frames kinda like a transition a gif with 2 frames would just change from one frame to another but what he is doing generates in-between frames

[@user-rr8hc8ls5n]

@@arjix8738 couldn't you precompute the in-between frames into a gif?

[@arjix8738]

@@user-rr8hc8ls5n that would greatly increase the file size of the game, but yeah you could do that

[@BuyHighSellLo]

ideas for optimization, what if you set a limit on the interpolation steps? the 70 something one just seems excessive. Maybe you can put a hard cap at 50 or something that’s *good enough*. also you can scale that cap as a function of the total number if pets on screen. so 1 pet = 0 * cap, 20 pets = 1 * cap, and interpolate in between. or something like that

[@divital]

looks good to me!

[@cembaspinar]

try rive, instead of lottie. it's lightweight and has a built-in state machine.

[@vlogmoinc5597]

Pets look like thos 50 cent stickers you buy from the machine

[@usmansbk]

"You don't need maths"

[@goatard3916]

your code looks so clean, would definitely get into it if it was open source

[@hoangngoclong2208]

You can open source code ?

[@alex2epic]

Loving these new ben posts recently, cant wait for him to leave again

[@RupluttajaGames]

not sure if belated april fools

[@vanvothe4817]

vimmode is here

[@pgameplay9639]

6:00 your useMemo won't work properly since your dependency is an object

[@faculupi]

Development by youtube comments is both scary and amazing at the same time!.

[@SoloChinchilla]

Very nice

[@eakzit3181]

Works for mvp, but jeez...Mb I am wrong didn't work with RN for 1.5 years, but I feel there should be a decent way without implementing js thread controlled cycled "animation" on a standalone view. If general pixie/giff/animation won't work... Specifically for this components I would go native development and would build a swift/cotlin views to link with rn. I mean w/e you show us feels like junior level pet project for me not "billion" dollar start up. If I am wrong, please explain the benefits of this approach

[@gabrieltaveira]

My god you should see Lottie

[@patrickc.2680]

better title

[@gardnmi]

Not a single comment in his code. This man devs in hard mode.

[@sichadeb]

could make a little helper to DRY the code const setIfNumber = (frameProps, frameData, key) => { let value = frameProps[key]; if (typeof value === 'number') { frameData[key] = lerp(...) } }

[@daftxd]

cant believe he reached [9] without announcing his new startup, bro is actually cooking

[@usmansbk]

That blue color hurt my eyes

[@connergoldberg]

This was very cool to see. Always wondered how involved something like this was, and it is great that you were able to show us first hand what tools are used. Cheers for that

[@k12moyo]

I like how i can ask my pet to tell me how to build react apps lol

[@Hazanko83]

I'm having a hard time following exactly what's going on as I'm not familiar with the language or project... but you mention updating/changing a string value a bunch of times per second. Even if the string values are static(not being created every time), parsing those strings instead of raw values is going to be extremely heavy irregardless of the language. Unless I'm misunderstanding something, that right there is going to be a GIGANTIC performance hit to your app.

[@ra2enjoyer708]

There is no such thing as "raw value" in svg/html/css. The biggest hit there is not from parsing strings, but from constant DOM updates, which still would be a problem even if you roll out your own binary-only implementation of DOM.

[@sanusihassan7125]

can you use canvas instead of svg?

[@arjix8738]

did you stop watching before the video ended?

[@sanusihassan7125]

​@@arjix8738 No, i've watched the entire video

[@arjix8738]

@@sanusihassan7125 08:56 skia is canvas

[@sanusihassan7125]

​@@arjix8738 okay now i get you, but isn't canvas faster than svg in the web?

[@arjix8738]

@@sanusihassan7125 I am not a web dev so I don't know

[@nikhiltaneja6673]

With unity you can achieve much much more complex animations but i guess that would have been an overkill for your simple game

[@muhammadseyan8361]

Why not just use a game engine? (genuine curiosity)

[@Michaeljamieson10]

pls make animation course i buy now

[@matinzd]

Couldn't you just use lottie instead? You can also animate lottie as well.

[@pukimaa]

I prefer Rive.

[@matinzd]

@@pukimaa Yeah I also used that. It doesn't matter. They are the same concept. Anything other than dealing with svg and animating them manually.

[@anikdasdigital]

Your videos are amazing. I really like it. I am a new subscriber to your channel. Can I talk with you ben?

[@saptarshisengupta5073]

waiting till he drops the app

[@peroforrr7663]

Why you leave the dev corner 😅

[@peroforrr7663]

No news tech dev videos 💔

[@avigetsbored]

Couldnt you just put the path to the svg in a tag and in css use @keyframe to animate the wiggle. Would take probably 10 lines of code.

[@KManAbout]

Like three with ease in

[@milanscienceacc3041]

bro its ReactNative

[@avigetsbored]

​@@milanscienceacc3041 React native can still render html and css. Think to use css you just make a 'css module' and pass its path in through an import. Pretty much analogous to linking to a style sheet in an html file. But I could be wrong I haven't worked with React Native much. Just seems like a little animated wiggle of an svg should be a simple static element on the page, but I'm open to being proved wrong.

[@arnaudtisset]

I was talking to a game dev they don’t do the sprite sh*t anymore 😂

[@vaisakhkm783]

😅 to be honest, i still haven't figured out that that game does

[@ramyakmehra312]

try rive, its pretty neat

[@DennisPeters39]

bro why do you remind me of young Jared Leto

[@veridianr2490]

Should have used Lottie files

[@shehzadmohammed4818]

You are a lot like me ready to do crazy things but generally I try to make other's vision come true whilst you are different in this regard.

[@Kamilek96]

Well, that is not truth, my app has no animation at all

[@asteinerd]

... I broke the game. Time events use the system-clock; and I jumped too far forward in time messing with dev-theories and now nothing loads between days. :P I felt bad about breaking the game and bought a few gems to support the dev :D

[@AdisonCavani]

This is intentional. He is aware of that

[@karimdjemai5386]

y no lottie

[@RedStone576]

guys remember, he's a web dev

[@klapaucius515]

weird flex but ok

[@Sergey95GameTesterrr]

just prerender them as videos

[@getinnocuous]

Rive!

[@juanmacias5922]

YES! Too many people suggesting Lottie, what a facepalm.

[@faeancestor]

cognitive rookie

[@DomskiPlays]

Kinda crazy how fucked animation is in reality lmao