Aftertile is game about a cute little ghost traveling a huge maze and using his ghastly powers to help other ghosts.

Post tutorial Report RSS Aftertile Devlog #2.5

This is a semi-devlog: I explain how I made the inner fluid inside the ghost.

Posted by on - Basic Textures

I’ve got a request, and thought answering it could be interesting for others into pixel art and animation.

Request: Share the progress of that fluid thingy

Reply: oh yeah @v@

Disclaimer: I’m a beginner myself, so almost everything I do is achieved by trial and error. I also keep a note open on my monitor with the 12 principles of animation and a short explanation for each while I’m working - I think it helps me think outside the box when I’m tired.

tl;dr gif version:



I work on Aseprite. I started with the ghost as a base, and laid out the new colors according to the new concept. I also separated the eyes into a new layer, as they will be now on top of the inner fluid.

Once I was happy with it, I made the ghost almost invisible and started drawing the inner goo in a new layer on top of the ghost's layer.


Previously, I had done a bit of research on how floating fluids behave. I watched videos of water on space, for example, and came across lava lamps! Yes! After a bit of research, I found these two animations I ended up using as reference:



Animating this goo took a while, but it was fairly simple. The only complicated part is really watching out for the blobs volume: they can squash and stretch, but they don’t grow in mass!

After that I replaced that blue color, which I used only to make it more visible.


The movement looked nice, but the ghost in general looked weird. That’s because in the concept there’s a subtle transition between the ghost’s white mass and its inner fluid.


I needed more colors to give this effect. I created this layer I called “protection” (naming things is hard, no wonder one of my cats was first named “Kitty”), and inside on it I used the shape of the ghost to create a sort of skin that “thins out” in the middle, with few thick spots remaining:


I also wanted to express that the inner fluid is actually INSIDE the ghost, instead of it being a moving texture. Reducing the opacity helped.


Then I created another layer at the bottom, but still on top of the ghost’s main body, and filled it with a transitional color.


As you know, I began remaking these assets using the x11 color names palette and the gbc palette preset that comes with Aseprite. That leaves me with 178 colors, and room to create more, if needed, until I reach 256. For this sprite, I created one color, and, following the x11 scheme, I named it “morning dew” (“you just wanted to name a color, maruki”). So, the colors used were:

#B8FFF1 Morning Dew

#F0FFF0 Honey Dew

#66CDAA Medium Aquamarine

#7FFFD4 Aquamarine

#20B2AA Light Sea Green

#008080 Teal

#FFFFFF White


In the end, I also wanted to animate the “tail”. I made that in a separate file, then pasted it into the main body timeline, where I replaced the colors and added the shadows.

If I make more ghosts (which is the plan, because, you know, NPCs), I’ll basically shift the colors according to the ghost personality. Maybe.

Hope you enjoyed it! :D Thanks for reading!!

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
Aftertile
Platforms
Windows, Mac, Linux
Developer
LOSTⒶLLOY
Engine
Unity
Contact
Send Message
Homepage
Lostalloy.com
Release date
Game watch
Follow
Tutorial
Browse
Tutorials
Report
Report
Share
Related Games
Aftertile
Aftertile Platformer
Related Engines
Unity
Unity Commercial
Related Groups
LOSTⒶLLOY
LOSTⒶLLOY Developer
Unity Games
Unity Games Hobbies & Interests with 1,795 members