Interlacing Scanlines



Look at our sprite of Ryu drinking. the images below is the same sprite, just hue shifted to yellow and magenta, and highly saturated.

• Grath-sama was nice enough to let us use Ryu drinking for our demonstration today. What he drinks is his business, but i doubt its contents would bring honor to Ryu-san's tribe. If you wish to learn how to create this type of fighting sprite, you would be best to check Grath's tutorials.

For this step, we will take two identical copies of Ryu and hue shift them to a yellow and a magenta. I have chosen these two hues due to his gi's pink hue. The purpose of this exercise is to create a holoprojected likeness of Ryu, immitating his original colorscheme on top. In order to achieve this, we choose two general C-M-Y values which when blended together would mix to match the hue you wish to immitate. Yellow and magenta together would make a nice pinkish type hue. Ultimately you can choose any two hues youd like (as you'll see later, the combinations are fun to play with).


take the two images and make every other 'scanline' transparent. make sure you start on opposite rows for each image.

• Now we take these two images that we have oversaturated and hue shifted and we will blit out every other row in the image. This produces a 'scanline' effect which makes the image look semi-transparent. It is important that the images do not have the same scanline pattern, for instance if you blitted out every even numbered row index on the magenta/indigo frame, you want to then blit out all the odd row indecies on the yellow image. It matters not which order you do. In fact, if you want to produce a fun animation effect seen later in this tutorial, make an even AND odd blitted version of each image.


Take the two previous images and lay them overtop another, and the above interlaced scanline effect is created.

• Once you have blitted out opposite rows for each image, you are then going to lay one image ontop of the other. If you did not alternate your even and odd rows between both the images in the previous step, then the two scanlines will just cancel each other out and which ever image you placed ontop will become the visible layer.

If you have done it correctly however, you will see that we get a sort of holographic type version of our character, which sort of resembles his original colorscheme. Yet the darker magenta/indigo scanlines interlaced with the lighter yellow/red scanlines gives each scanline enough contrast to give the sprite a false, computerized effect.

It should be said that you do not have to limit yourself to two images, you could use 3 or 4 if you desired. A general rule should follow like this... for every X amount of hues you wish to interlace together, make sure to blit out 1/X rows of your image. So the different amount of hues used vary inversely in relation to every n'th row you blit out per image. just make sure they all alternate between each image respectively.



For this next trick, we simply make two different versions of the interlaced image. Just switch up the odd-even pair of scanlines per image and make two unique images. If you alternate the images like so, you get the above flicker effect!

• Now for the final touch. This requires two different, unique versions of your interlaced image. Remember two steps previous when I had suggested to go ahead and blit both every odd and every even row for BOTH images? well, If you havent done that, you need to do so to create this next effect

Once you have blitted both odd and even rows for each image, go ahead and interlace the magenta frame with the opposing yellow frame (for this example, you may have used different hues), and make two separate images of each interlaced state of the same image.

Then simply animate the two images by alternating the display of each image (on/off fashion) to create a computer like flicker effect. Note that if you used 3 or more frames, this effect will become much smoother.