AuthorTopic: Perhraps Useful Retro Look CRT (RGB CELL) Overlay Filter Tutorial.  (Read 214 times)

Offline Tycho Magnetic Anomaly

  • 0001
  • *
  • Posts: 45
  • Karma: +0/-0
    • View Profile
Hello everyone,

I thought to repost this from another forum I posted into.

A quick tutorial on how to get a nice effective old school CRT look.

Ok so I really like that old CRT  look, in particular when it comes to pixel art. Over the years I have seen various games and emulators try to simulate various styles of scan-lines and CRT looks, however I have rarely (if ever) seen ones that try to simulate the actual RGB component to each cell on a CRT screen. This style may not be to everyone's taste though.

Anyway I thought to try come up with something effective and thought to post my method here on the AGS forum since many of you are working at the pixel art level.

For this method you must upscale your artwork to at least 300%. This means for every pixel of your art work it will now have 9 pixels of detail, this will be needed for 2 reasons,  the first reason is to get Red Green and Blue going horizontally across each of your pixels, and the second reason is you will simulate the CRT cell beveling at the top and bottom of this 3x3 pixel.

This up-scaling of art work may not work with some projects  in particular low res games, but it might be nice to use on static images, or other contexts.

Ok here are the very simple steps, and underneath are images of the process and underneath that is another image demonstrating how effective it can be.

Step 1:
Up-Scale your raw pixel art work up by 300% using nearest neighbor scaling (to avoid aa/blurring)
then zoom right in on one of your artwork pixels (which is now 3x3 pixels), then simply paint 3 vertical lines of 3 pixels, Red, Green and Blue. (Make sure to keep neatly inside your art work pixel)

Step 2
Now to simulate the slight bevel you see on CRT cells if you look close enough. Either apply a bevel or just paint lighter shade of Red,Green, Blue on the top row of 3 pixels, then at the bottom row of 3 pixels paint in darker R, G, B colors.

Step 3
Now you simply (but very carefully) copy and paste this to make a row,, then copy that row to make a block, and copy that block.. and so on. But its very import to take care that in each of your art work pixels the RGB cell is sitting in snug, with the highlight of the bevel on top and the dark part on the bottom and the Red component starting first.

Step 4
Once you have the whole of your image covered , simply use a "Soft Light" layer blend and your done. No need to touch Opacity settings. In this example I am using PS, however most GFX software that has layers will have a close equivalent to PS Layer Blends.

Step 5
On zooming right in you can make sure you didn't go wrong with the copy/pasting of the cells/rows..etc

And here are some examples of how effective this overlay filtering can be. , I have also provided you with a strip of overlay filter at the very bottom that's on a transparent background so if your too lazy to make it your self, just grab that and copy/paste until you have your image covered. (you will still need to apply a layer blend such as Soft Light)
You could bake this overlay effect into your image, or in theory it could be used as a real-time screen overlay filter in a game engine however I am not sure AGS could do that.

There is one disadvantage to this CRT effect in that it darkens the image slightly. It is a bit unavoidable. You can try play with the contrast/color balance of art work to compensate. In the example images I could have de-saturated the red component a bit, but you can mess about with the 3 colors, and how its blended to get some really interesting results.

Anyway have fun with it, hope it's useful to someone out there.

Offline Magpie

  • 0001
  • *
  • Posts: 7
  • Karma: +0/-0
    • View Profile
I think it would get a bit anoying all the time, but I could see this making a nice "intro" effect that fades out once the level actually starts. Or maybe as a damage effect if you have a tech theme going on.