smoothing animation with Interprite

[Lagi]

I describe how I increase animation frame rate.

In doom-esque games (doom, heretic, hexen, strife). Monsters use 4 frame of animation for walking, lets try to add more.

Lets improve undead knight walking from heretic.

1. I go to https://zdoom.org/wiki/Classes:Knight and check for walking sprites name under See:
its:

Code: Select all

See:
    KNIG ABCD 4 A_Chase
    Loop

---

KNIG - is the base name of sprite, could be whatever its for identification
ABCD - are 4 different frame named: "KNIG A 1" , "KNIG B 7" ...

4 [in the code!!!] - is the duration of frame display in game
1 or 7 [in the sprite name!!!] - its the direction of frame. KNIGA1 - is facing camera, while KNIGA5 is showing his back.

2. I open with Slade, Heretic.Wad, and search for KNIG.
I decide I want to add more frames into diagonal front direction - number 2
I select all 4 frames "KNIG - A/B/C/D - 2" and export as below


3. I notice that each 4 frame have different canvas size and are misaligned.

---

canvas is work space, while image size is rescaling the content

I want to have same canvas size for each image, because its required for Interprite [and because I have some f. standards and hate wasting time in setting offsets each time in each piece of software!]. I briefly scan the image sizes and decided to resize them all into 75x90 [75 pixel wide & 90 pixel height].

4. to do the picture change by mass (instead one by one wasting time) i will use Irfanview.



Irfan has other sweet feature mass mirror flip and file type conversion.

5. I have same size KNIG sprites I open them and align in graphic program (I use paintNet, because Im poor & too stupid learn Gimp).
If I copy paste frames on single picture you can notice that head and torso of each frame are in different positions


thats bad, you want the frames to overlap each other as tight as possible - otherwise whole process of smoothing animation would cost you much more work and in the end you will have to do it again. The better you align the sprites the easier the job - and its not hard to align 4 sprites.

it should look like this: note the head and torso are overleaping each other, plus whole silhouette is in center of the picture

---

this need also canvas resize, to have green line in the picture center

6. Input to InterPrite need BMP format (and same image size) use Irfan on the left check BMP


7. Finally Interprite - software created by MarkeyJester.
it look like this


Author make great 1h long tutorial video : Help > About > there is link

import images File>Import images

8. Name body parts


on the left name body parts that will move separatly: you need head, torso, left leg, left calf, right arm, right forearm .... if you have tail maybe you want multiple pieces? The more the better = but its more work as well, judge by yourself.

rule is top body parts on the list are render on top of parts below. So adjust each body parts properly f.ex. knight right leg has to be below his left leg, on the list

9. paint MEAT
top 4 brush types are for painting MEAT
select head and paint over relevant body part.

do it again on each other sprites. Use Left/Right arrows keys to move to next sprites [up/down arrow change body part]

Dont worry about quality of painting, it doesn't matter that much.
You should try to overlap each body parts area, to minimalize gaps in the future output.


10. fix BONE
when you have all MEAT painted
select compas
on body parts make a BONE from center to outside [ important ]
Blue dot is start - Red dot is end.


you can move the BONE with Ctrl
you should try to keep BONE in same position for body parts that not move, f.ex. torso and head.
the joint between to parts should be in the same place - more or less
try to scroll through each frame and check how the BONEs are moving together.

11. check
you should have something like this for each sprite


check if the BONEs are in correct direction RED and BLUE dot on BONE - otherwise you can encounter spinning limbs on your renders.

12. Process
Click Process > interpolate frames


Select if its looping animation [like walking] or not [ like attack or dying]
Select amount of extra Frames between [or how much work you can take, I recommend 2. 1 is great (its +100% of sprites!!), but +2 give notable better effect.

for render setting set: Complex MOrph and lenghty blend.

13. Output

Hurray !! ... hey ! WTF?

The output will have gaps. You can reduce the amount of gaps by overlaping bodyparts. Dont count too much on it, you still need to spend hours on cleaning the sprites.

check each frames, how the limbs of actor are moving, if its crappy already- f.ex. the head move there and back or torso bend in odd angles. Check BONE,s. maybe little adjustment will help? Process > Re-interploate

Is it better?
If not start again from point 5. Dont invest your time trying to fix something that is broken in first place.

If its ok.
File>Export all images

13.5 Mass removing background > transparency for conversion BMP>PNG - save some time removing background color.

when you change from BMP into PNG, go to options and select "use main window color as transparency"



in advanced > canvas setting > there is canvas color



14. Now you need to only clean the pictures and your monster is ready to amaze the community.
[not sure if I should make painting tutorial ]

try to copy paste in each 12 frames, the not-moving part of your animation, like Head and torso. Otherwise constant tweach of static parts, looks bad in motion (and its less work with cleaning).

You can usually copy paste top part of character sprites. If this is your sequence 1-12 frames:
A bc D ef G hi J kl
you can copy top parts of
b = l
c = k
D = J (yes overlap on "J", is suppose to be the same frame anyway)
e = i
f = h
Just be careful about the legs!

for asymetrical monsters you can flip the opposite direction and just paint over the Hand welding an axe - thats why I started with Axe behind (direction 2), so it dont obscure the view = easy edit for other side.

P.S.
there is neat tool Advance Renamer, that allow you mass changing file names.