Dealings with Sprite Animation in Processing – Part 1

There are a few ways to insert Sprite Animations in Processing. I found tutorials online, and learned to code spritesheet animation using Adobe Flash/Animate then export to use it in Processing.

I think and understand the idea of Sprite animation like the traditional animation – Rotoscoping technique. Using frame by frame method and combining it to looping animation. Multiple frames of the horse in motion, combined to give the illusion of the horse running.

A sprite is a single graphic image that is incorporated into spritesheet so that it appears to be part of the motion. This website provides alot of Spritesheets, but have to pay for it so i’ll just use for reference.

I used Adobe animate to create animation then generate it to sprite animation. Then there are 2 choices, one is to save it in a box and the other is one long strip. Alternatively, I can also export to PNG sequence then it is more similar to Rotoscoping. But to save memory space I’ve decided to test the other 2 ways instead.

Basically, the parts that I will use spritesheets are the hovering of animals, so there will be 4 sprite.

Test 1 

Box method seems to be able to have longer frame animation but I couldnt get it work. It works find using the provided turorial img but when I replace it to my own animation it doesnt work. I dont know if its the size of my animation to be the issue or what 😦

Test 2

With the long strip of animation, it looks much easier and it works fine. The only problem is with the frame rate being too fast and i cannot generate longer animation due to the constraint of horizontal strip/max width that adobe animate allow me to export. Its a choice between you want the pixels size to be big then frames limited; if you want more frames/movement then the size cant be too big.

So I’ll continue by using the long strip method first, and see if it is okay with the animals movements that I want show. Hopefully everything goes well!