The recipe...
There are multiple ways to make character animations and the two principal ones I used on UpIt are Skeletal Animation and Sprite Animation.
Skeletal Animation:
It consists in creating a skeleton for the character and manipulating the bones to produce movements. Works well for stickman's like characters.
- You create an asset for each body part.
- You can create a hierarchy (i.e. hand inside arm container).
- You define different positions with the coordinates of each part for each position (That's the long part)
- You animate by moving each part from coordinates of the current position to the next one. (i.e. idle -> run -> idle -> ...)
Sample Games: https://upit.com/up/NeoRetroBasket; https://upit.com/up/AthleSticks
Sprite Animation :
Here you use a sequence of pre-drawn images, or sprites, in rapid succession to create the illusion of movement.
Problem : Current image generators are not good enough to create coherent sprite sheets.
You can generally get 2-3 frames, but if you want more, you need to draw them yourself or import them.
A good source of free sprite sheets is https://itch.io. For this demo I used Hormelz's 8-Directional Knight Character (https://hormelz.itch.io/8-directional-knight). Here's how:
- I downloaded the animation Bundle
- I selected the animations I wanted to use : Idle, run and attack
- I used FreeConvert (https://www.freeconvert.com/gif-to-png) to convert each Gif image for each 8 directions into a group of Png files : 1 file per direction for idle, 8 for run and 15 files per direction for attack => ~190 files
- I uploaded the Pngs 8 by 8 by group of anim-direction
- I copy/pasted a `LK.init.image(...)` line to prepare the 8 assets in the game with a generic name like 'knight-run-dir1-001', 'knight-run-dir1-002', ...
- I affected each image to each asset one by one (That's the long part)
That's it for asset preparation. It looks complex when written, but when you are doing it, it's simple and mechanical: just a bit of patience and organization.
When it's done, you have all you need to make your character perform all actions you want (at least the ones on the sprites...)
For the in-game usage, I choose to preload all assets in arrays per action. And asked for an equivalent array for the shadow (i.e.: `knightAttackAssets` & `shadowAttackAssets` (shadows use the same frames with small offset, black tint and low alpha)
Then you let Ava handle the animation details using asset visibility.
That's it.
Now your turn to animate!
:quality(85)/https://cdn.upit.com/meuopujsry3qsckhjjbmbr4t.png)
3d
:quality(85)/https://cdn.upit.com/q8dspsdvsn08gvp3ljgvzdkg.jpeg)
:quality(85)/https://cdn.frvr.ai/65b969e192c1d63fc3492409.jpg)
:quality(85)/https://cdn.frvr.ai/65b969e192c1d63fc3492409.jpg)
