Files
kdletters cbc27bad4a
Some checks failed
CI / verify (push) Has been cancelled
init with react+axum+spacetimedb
2026-04-26 18:06:23 +08:00

74 lines
3.7 KiB
Plaintext
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{\rtf1\ansi\ansicpg1252\deff0\nouicompat{\fonttbl{\f0\fnil\fcharset0 Calibri;}}
{\*\generator Riched20 10.0.19041}\viewkind4\uc1
\pard\sa200\sl276\slmult1\f0\fs22\lang10 Animation Guide\par
\par
Due to the large number of different combinations it is almost crazy to create attack animations. \par
But I thought I'd give some advice for those who want to take advantage of creating their own animations.\par
\par
This is a little guide or rather some tips on how to combine sprites to create animations.\par
These notes are accompanied by images that will useful as a visual reference, so do not forget to check them.\par
\par
It is important to know that I have created these animations thinking that you will be able to perform certain functions with your game engine such as: \par
\par
linking or attaching objects to each other and rotating, scaling and positioning objects.\par
\par
Anyway, these are just a few examples, the possibilities are many, it just requires a good knowledge of your tools and some creativity.\par
\par
\par
\par
\tab attack_sample_01:\par
\par
1- the hand sprite must be linked or attached to the weapon sprite, so that both move at the same time.\par
2- The weapon is rotated 90\'ba backwards to create an anticipation\par
3,4,5- The hand and weapon object are removed or hidden, and is exchanged for the hit effect animation.\par
6- the weapon is rotated 90\'ba forward\par
7- the weapon is rotated 90\'ba back to its original position\par
\par
I'm also going to include some samples to give you ideas on how to move the head and body to emphasize the animations.\par
\par
\tab attack_sample_02:\par
\par
To make this animation, what I did was stretch the body in frame 2 (the head must move upwards, still aligned with the body), in frame 3 the body shrink, and in frame 4 it returns to its original size.\par
This trick is widely used in animation with the squash and stretch technique and greatly improves animation. \par
\par
\par
Another thing you can do is to use walk and jump sprites in attack animations. As you can see in examples 3 and 4. Interesting things can come out.\par
\par
\tab attack_sample_3\par
\par
- In frame 2 of the attack animation I replaced the body with that of frame 4 of the walk animation. (repeat it 2 times)\par
- In frame 4 of the attack animation I replaced the body with that of frame 1 of the walk animation. (repeat it 2 times)\par
\par
attack_sample_4\par
\par
- In frame 2 of the attack animation I replaced the body with that of frame 3 of the jump animation. (repeat it 2 times)\par
- In frame 4 of the attack animation I replaced the body with that of frame 2 of the jump animation. (repeat it 2 times)\par
\par
\par
\par
This part is a reference to know how the idle, walk and jump animations work, to have a better location of where to place the different parts of the character (head, hands, weapons) in relation to the body.\par
\par
\par
idle animation: \par
first frame = no motion\par
second frame = 1 px down\par
third frame = 1 px down\par
fourth frame = 1 px up\par
When using the animation in a loop, remember that from frame 4 to 1 the body rises 1 px to return to the original position\par
\par
walk animation:\par
first frame = no motion\par
second frame = 1 px down\par
third frame = 1 px up\par
fourth frame = 1 px up\par
For the following frames the movement is the same, with the other foot. Just remember that from frame 4 to 5 the body down 1 px to return to the original position like in frame 1.\par
\par
run animation:\par
The movement is exactly the same as in the walk animation.\par
\par
jump animation:\par
first frame = no motion\par
second frame = 1 px down\par
third frame = 3 px up\par
}