Update - 1/30/2022 - Shadows and clipping

When Fukyuuten was first developed, we had created clouds to scroll beneath the map, and cloud shadows to scroll over top of the map, to really highlight the fact that you were on floating islands. However, the shadows were also being drawn over the sky. I wanted to talk a little bit about a technique I used to clip those shadows to draw only on top of the ground. Fortunately it ended up being fairly simple.

I had previously created a script to go through all the tilemaps, render them to a canvas (in ika’s language, essentially an image handled in software that lets you draw off screen) and save them as an image file. This was so I could create a screenshot map of the island, which I may share sometime. For the sake of example, this is the first map, Anastasia’s house:

Using this script as a base, I modified it so that anywhere that was clear, it would instead draw white, and where there was any color at all, it would draw clear, to create a stencil version of the map. Unfortunately ika did not have a working Matte blend for this, so I did it by hand. This may not be the most efficient way, but I essentially made a true/false dictionary in Python code, and defined my black and white colors:

black=ika.RGB(0,0,0,0)
white=ika.RGB(255,255,255,255)

pixeldict = {
    False: black,
    True: white
}

And then while iterating over each pixel in my canvas, I would compare that pixel’s color against black, using the comparison result as the key to that dictionary and essentially invert the colors for me:

canvas.SetPixel(x,y, pixeldict[ canvas.GetPixel(x,y) == black ])

This would give me the resulting image, where white is where there is any sky.

Now the ika engine that I am using for this game does not support shaders. But luckily with this technique, all I needed was a simple Subtract blend. I would draw the clouds onto a screen sized canvas at the appropriate scroll position, then draw the stencil over top of the clouds using SubtractBlend. This essentially clears out the part of the image anywhere there is white, nicely clipping the clouds for me:

The final effect I think turned out pretty well! The clouds here are sped up for dramatic impact and are much slower in the real game.

Hope you enjoyed this little insight into the making of this little effect!