Тёмный

My App has More Complicated Animations Than Yours 

Ben Awad
Подписаться 499 тыс.
Просмотров 93 тыс.
50% 1

Опубликовано:

 

29 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 198   
@ahmadalghali90
@ahmadalghali90 Год назад
My dude really just pulled out a calculator for 67 * 10 …. I have a chance in this industry.
@31redorange08
@31redorange08 Год назад
No professional software developer does that. So forget it.
@goatard3916
@goatard3916 Год назад
@@31redorange08 hahaha why so mad bro
@canodepvc2837
@canodepvc2837 Год назад
@@31redorange08 So Ben is what, a plumber?
@31redorange08
@31redorange08 Год назад
@@canodepvc2837 I don't know what he does for a living.
@floodo1
@floodo1 Год назад
Better safe than sorry
@wlockuz4467
@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
@Smurfis Год назад
It’s better to understand the core concepts it’s the difference between building a car and fixing a car
@MrMajorduck
@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
@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
@levizin917 10 месяцев назад
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
@1SquidBoy 8 месяцев назад
@@Smurfis If your job is to drive somewhere, you don't build a car so you can drive somewhere lol
@elliotsharpe5448
@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 :)
@AcornRiot
@AcornRiot Год назад
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
@bawad Год назад
I saw this bug in sentry and I was wondering what was causing it lol. How did you get rid of your starter?
@AcornRiot
@AcornRiot Год назад
@@bawad To get rid of the starter you go to your pets and hold down on it
@Alex-ry1gv
@Alex-ry1gv Год назад
@@bawad Just downloaded it and there's literally nothing stopping you from releasing the starter.
@bawad
@bawad Год назад
@@AcornRiot oh I didn't account for multi let go, thanks
@Yusuf-ok5rk
@Yusuf-ok5rk Год назад
​@@Alex-ry1gv this says a lot about our society
@DiegoZamalloaChion
@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.
@dinoscheidt
@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
@Kasukke Год назад
How would you do the accessories and hats? Would they require separate assets?
@juanmacias5922
@juanmacias5922 Год назад
@@Kasukke I was wondering about that as well. Possible that on Rive it could just be a bool.
@dinoscheidt
@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
@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
@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.
@floodo1
@floodo1 Год назад
What a world where it takes this much work to animate between two svgs
@trigunadi4024
@trigunadi4024 Год назад
he looks like a happy depressed person not being able to sleep for two days
@nanonorthlabs3375
@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
@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
@nanonorthlabs3375 Год назад
@@wcandillon very good response and insight
@abdulazeez.98
@abdulazeez.98 Год назад
I really thought you just specify the start and end frames and some library do the calculations. Awesome work man
@weidiocrow
@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 🤔.
@Quacky_Batak
@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
@kraxen72
@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
@BarisPalabiyik
@BarisPalabiyik Год назад
My lazy ass would be putting pulse animations to every goddamn property to make it work.
@hilllynn
@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! :)
@JEM_GG
@JEM_GG Год назад
I love over-engineering stuff like this! Thanks for sharing Ben
@0xpatrakar
@0xpatrakar Год назад
Is it just me or this feels over engineered? I don't see anything off with this method but feels unnecessarily complex.
@Notoriousjunior374
@Notoriousjunior374 Год назад
What is? The animation?
@0xpatrakar
@0xpatrakar Год назад
@@Notoriousjunior374 The implementation. The animation methodology seems pretty standard.
@noel.friedrich
@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
@0xpatrakar Год назад
@@noel.friedrich That still is fine with me to be honest but I feel like the logic could be a lot simpler.
@0xpatrakar
@0xpatrakar Год назад
I'm assuming it is probably optimal for them to do it this way for their use case.
@lucasa8710
@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
@peterszarvas94
@peterszarvas94 Год назад
If you calculate the SVG animations upfront, and only ship the paths in an array, you don't even need to memoize it.
@Kat21
@Kat21 Год назад
Ben out here showing us life changing techniques good job man 👍
@ravikumarmistry
@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. ❤
@itsanishjain
@itsanishjain Год назад
Everyone in working on AI, Ben is just build different. GOAT.
@sourabhverma9034
@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,
@saturnteatree
@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!!!
@daftxd
@daftxd Год назад
cant believe he reached [9] without announcing his new startup, bro is actually cooking
@alex2epic
@alex2epic Год назад
Loving these new ben posts recently, cant wait for him to leave again
@BehindTV
@BehindTV Год назад
Damn this looks like a lot of work, good job. Now add a setting to turn it off
@usmansbk
@usmansbk Год назад
"You don't need maths"
@Sven-W
@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
@bawad Год назад
It does, Figma handles that nicely
@Sp00mster
@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.
@RupluttajaGames
@RupluttajaGames Год назад
not sure if belated april fools
@riolly
@riolly Год назад
Fluid animation that mimics real physic is always complicated. Really awesome to see you work it out.
@pgameplay9639
@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
@ZeeshanAli-nk3xk
@ZeeshanAli-nk3xk Год назад
Nice techniques man, never thought this could be possible with SVG's. A side question, do you read books brother?
@faculupi
@faculupi Год назад
Development by youtube comments is both scary and amazing at the same time!.
@vlogmoinc5597
@vlogmoinc5597 Год назад
Pets look like thos 50 cent stickers you buy from the machine
@gardnmi
@gardnmi Год назад
Not a single comment in his code. This man devs in hard mode.
@rommyarb
@rommyarb Год назад
Nice technique, Ben
@Jangeroo
@Jangeroo Год назад
Can’t you just go figma to lottie and save a week of overengineering?
@TheWiredArts
@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.
@pedroalonsoms
@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
@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
@ЭнрикеЧурин
@ЭнрикеЧурин Год назад
@@arjix8738 couldn't you precompute the in-between frames into a gif?
@arjix8738
@arjix8738 Год назад
@@ЭнрикеЧурин that would greatly increase the file size of the game, but yeah you could do that
@natestrings673
@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!
@christianmonfiston
@christianmonfiston Год назад
What programming language is he using to build his app?
@gabrieltaveira
@gabrieltaveira Год назад
My god you should see Lottie
@cleyuh31
@cleyuh31 Год назад
Great update video. Inspires me to keep coding. Thanks Ben.
@benji9325
@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?
@wezter96
@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_
@justpatrick_ Год назад
The app works perfectly on my 5 year old android
@nikhiltaneja6673
@nikhiltaneja6673 Год назад
With unity you can achieve much much more complex animations but i guess that would have been an overkill for your simple game
@RedStone576
@RedStone576 Год назад
guys remember, he's a web dev
@asteinerd
@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
@AdisonCavani Год назад
This is intentional. He is aware of that
@connergoldberg
@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
@usmansbk
@usmansbk Год назад
That blue color hurt my eyes
@patrickc.2680
@patrickc.2680 Год назад
better title
@matinzd
@matinzd Год назад
Couldn't you just use lottie instead? You can also animate lottie as well.
@pukimaa
@pukimaa Год назад
I prefer Rive.
@matinzd
@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.
@tevoj
@tevoj Год назад
Looks like this would have been way easier to achieve using lottie or rive. Why did you decide to do this "manually"?
@vitorgouveia5378
@vitorgouveia5378 Год назад
whats up with changing titles and thumbnails of recent videos?
@fattuglee
@fattuglee Год назад
Who is drawing those svgs for you?
@pgameplay9639
@pgameplay9639 Год назад
6:00 your useMemo won't work properly since your dependency is an object
@carbondesigned
@carbondesigned Год назад
Can you talk about CI/CD? Expo to the platforms? Maybe even handling user testing (like testflight)?
@Hazanko83
@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
@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.
@vaisakh_km
@vaisakh_km Год назад
😅 to be honest, i still haven't figured out that that game does
@faeancestor
@faeancestor Год назад
cognitive rookie
@ДенисМалышок
@ДенисМалышок Год назад
Is it not possible just to morph in between svgs and that is it?
@YeetYeetYe
@YeetYeetYe Год назад
This is why I hate the frontend. Well, that and because of Angular.
@EndoTheBear
@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
@thevoidfish
@thevoidfish Год назад
have you considered adding an ease in and out?
@KManAbout
@KManAbout Год назад
Yup that would make more sense
@cembaspinar
@cembaspinar Год назад
try rive, instead of lottie. it's lightweight and has a built-in state machine.
@akarshanmishra2351
@akarshanmishra2351 Год назад
Why don’t you use a high res gif or a short video for animating ?
@vanvothe4817
@vanvothe4817 Год назад
vimmode is here
@TomieGG
@TomieGG Год назад
What do you use to display mobile view?
@vicyoslinuxofficial2607
@vicyoslinuxofficial2607 Год назад
I love your video titles and humor. Hahahahaha
@arnaudtisset
@arnaudtisset Год назад
I was talking to a game dev they don’t do the sprite sh*t anymore 😂
@k12moyo
@k12moyo Год назад
I like how i can ask my pet to tell me how to build react apps lol
@Kamilek96
@Kamilek96 Год назад
Well, that is not truth, my app has no animation at all
@RedVelocityTV
@RedVelocityTV Год назад
Extremely overengineered
@shehzadmohammed4818
@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.
@DennisPeters39
@DennisPeters39 Год назад
bro why do you remind me of young Jared Leto
@divital
@divital Год назад
looks good to me!
@klapaucius515
@klapaucius515 Год назад
weird flex but ok
@veridianr2490
@veridianr2490 Год назад
Should have used Lottie files
@wfl-junior
@wfl-junior Год назад
this is insane
@saptarshisengupta5073
@saptarshisengupta5073 Год назад
waiting till he drops the app
@quickmaths4762
@quickmaths4762 Год назад
Maybe you can make a video (separate from this series) on when to choose unity and when not to, for mobile 😊
@sichadeb
@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(...) } }
@eakzit3181
@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
@goatard3916
@goatard3916 Год назад
your code looks so clean, would definitely get into it if it was open source
@anikdasdigital
@anikdasdigital Год назад
Your videos are amazing. I really like it. I am a new subscriber to your channel. Can I talk with you ben?
@DomskiPlays
@DomskiPlays Год назад
Kinda crazy how fucked animation is in reality lmao
@ramyakmehra312
@ramyakmehra312 Год назад
try rive, its pretty neat
@matwright110
@matwright110 Год назад
Nice insight 👌
@getinnocuous
@getinnocuous Год назад
Rive!
@juanmacias5922
@juanmacias5922 Год назад
YES! Too many people suggesting Lottie, what a facepalm.
@muhammadseyan8361
@muhammadseyan8361 Год назад
Why not just use a game engine? (genuine curiosity)
@avigetsbored
@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
@KManAbout Год назад
Like three with ease in
@milanscienceacc3041
@milanscienceacc3041 Год назад
bro its ReactNative
@avigetsbored
@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.
@hoangngoclong2208
@hoangngoclong2208 Год назад
You can open source code ?
@theshy6717
@theshy6717 Год назад
I hate your stack...
@wave641
@wave641 Год назад
what even is this bro, it is literally 1,000x easier to use a game engine than do this.
@peroforrr7663
@peroforrr7663 Год назад
Why you leave the dev corner 😅
@peroforrr7663
@peroforrr7663 Год назад
No news tech dev videos 💔
@sanusihassan7125
@sanusihassan7125 Год назад
can you use canvas instead of svg?
@arjix8738
@arjix8738 Год назад
did you stop watching before the video ended?
@sanusihassan7125
@sanusihassan7125 Год назад
​@@arjix8738 No, i've watched the entire video
@arjix8738
@arjix8738 Год назад
@@sanusihassan7125 08:56 skia is canvas
@sanusihassan7125
@sanusihassan7125 Год назад
​@@arjix8738 okay now i get you, but isn't canvas faster than svg in the web?
@arjix8738
@arjix8738 Год назад
@@sanusihassan7125 I am not a web dev so I don't know
@JacoblBroughton
@JacoblBroughton Год назад
I bet you learned more about svgs from this project than you ever imagined you would lmao
@pyakz2906
@pyakz2906 Год назад
Can't you just show a GIF?
Далее
Technologies I used to Code My Backendless App
10:57
Просмотров 148 тыс.
Family♥️👯‍♀️🔥 How old are you? 🥰
00:20
My Startup Got Funding
3:18
Просмотров 104 тыс.
Serverless Doesn't Make Sense
10:13
Просмотров 367 тыс.
Coding Interview with Dan Abramov
58:20
Просмотров 645 тыс.
The Downfall of Actix Web
20:25
Просмотров 241 тыс.
My Final Flutter Video
14:26
Просмотров 110 тыс.
How I Designed my App that Got 100k Downloads
7:44
Просмотров 103 тыс.
How to Roll Your Own Auth
13:05
Просмотров 118 тыс.
Actually, Maybe There's Only 1 Game of Tic-Tac-Toe
11:58