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 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.
@@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.
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 :)
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.
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.
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.
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 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.
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.
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 🤔.
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! :)
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
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. ❤
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,
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!!!
@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?
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.
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.
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
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!
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.
... 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
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
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.
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.
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
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(...) } }
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
@@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.
