aseprite

[ShahOdin]

When spiking #2 I came across aseprite. Googled it and came across some videos by youtube channel: saultoons

Some useful videos of his channel:

• Aseprite Tutorial For Beginners (Pixel Art)
• Pixel Art Animation Tutorial - (Aseprite)
• 12 Animation Principles You Need To Know
• Easy Pixel Art Walk Cycle Tutorial
• Easy Pixel Art Portrait Tutorial

and some other interesting ones from across the youtube:

• Pixel Art Class - Simple Character Idle Animation
• Pixel Art Class - Animating Fire!
• Pixel Art Class - What's The Right Canvas Size?

Next i thought I would give aseprite itself a try. It has a free trial which doesn't let you save files (making it useless for our purposes) but you can just compile the app from code by following their instruction here: https://github.com/aseprite/aseprite/blob/main/INSTALL.md#compiling

It's gonna need xcode and chances are you don't have it and have only command line tools see the issue here: https://stackoverflow.com/a/17980786/9199853 simply download xcode from the app store and everything should work nicely.

[ShahOdin]

as an exercise, we can open the original captain clown nose and open it in aseprite:

the standard captian icon looks like it's a 26*26 pixel image:

[ShahOdin]

next we need to do two things:

• [x] figure out the frames of the pirate simply standing and (moving up and down in place) in the code. as specified in this file: https://github.com/cgroc/CursedHacker/blob/main/assets/Captain%20Clown%20Nose.json
• [x] Try to replicate those for a picture of Dave.

inspirations

• we could have this image as an inspiration:
• for the flame behind him (assuming that's what it is) this pixel art flame animation could come in handy: https://www.pond5.com/stock-footage/item/88243748-pixel-art-style-fire-4k-animation
• very bob-ross-esque video on animating flames: https://www.youtube.com/watch?v=b0iyDxpECJE

[ShahOdin]

figure out the frames of the pirate simply standing and (moving up and down in place) in the code. as specified in this file: https://github.com/cgroc/CursedHacker/blob/main/assets/Captain%20Clown%20Nose.json

https://github.com/cgroc/CursedHacker/blob/b8db2abd08a05dd92c38ea4487e6cd9763086b7f/assets/Captain%20Clown%20Nose.json#L767

https://github.com/cgroc/CursedHacker/blob/b8db2abd08a05dd92c38ea4487e6cd9763086b7f/assets/Captain%20Clown%20Nose.json#L2-L37

to better view the captain and taking the json file as our guide, we can set the checked background to be 96x96, ie in the preferences set:

Captain idle

The frame with index 3 has a sword so Im not sure if it's relevant. The following however is the first three frames that were tagged with "idle" tag.

Next we will go ahead and try to see how these frames would look like when animated within the aseprite app following this tutorial. here is the result:

https://user-images.githubusercontent.com/13497500/169670562-1a9b2b70-8748-4f7e-9881-9dec1c52a18d.mov

here is the aseprite file: https://drive.google.com/file/d/1HEMInPpUxFl6e1l5WE9MkCugfjM-kj7_/view?usp=sharing

and here is the gif file:

Also I discovered that the Export Sprite sheet allows you to export all your frames in a single PNG file. ie:

which is presumably what Dave has used to construct the big Captain Nose face PNG file.