{"id":384,"date":"2016-11-21T21:36:33","date_gmt":"2016-11-21T20:36:33","guid":{"rendered":"http:\/\/kunsternst.de\/?p=384"},"modified":"2016-11-21T22:03:15","modified_gmt":"2016-11-21T21:03:15","slug":"gameboy-shader","status":"publish","type":"post","link":"https:\/\/kunsternst.de\/?p=384","title":{"rendered":"Gameboy shader"},"content":{"rendered":"

Hey there,<\/p>\n

Made a super simple Gameboy shader that uses the palette of the old classic gameboy (including green tint!)<\/p>\n

The way it works is simple: first I scale down the image, to get a quarter resolution or less (not actual Gameboy resolution). I don’t do anything fancy here, just skip a few pixels. Fancier would be to get a weighted average, somehow combining the different colors, but that would also require more texture reads. The basic approach already gave decent results, so I kept it.<\/p>\n

\"The

Picture from wikipedia (public domain)<\/p><\/div>\n

Next I needed to somehow map a full color image to just\u00a0the four values of the Gameboy classic palette<\/a>. Since I needed to figure out which colors to cluster in one palette color, I had to figure out a way to calculate the distance between colors. The first thing that came to mind\u00a0was\u00a0to take the RGB <\/a>color values as a 3D vector and calculate the vector distance. But I thought this would give unsatisfactory results, since I deemed the brightness the only interesting value. So I converted the color from RGB to HSL<\/a>, or, more specifically, just calculated the luminance (or brightness or Value or Intensity, depending on what you prefer. ;) ). \u00a0This gave a singular value that made it easy to calculate the distance of colors to the four Gameboy classic palette values and cluster them in four groups to map them.<\/p>\n

In the end, just using the luminance instead of the RGB for calculating the distance between colors didn’t actually give better results. Simple RGB vector distance has the added benefits of needing fewer calculations and being easier to implement. (if you are familiar with vector math).Here is the comparison:<\/p>\n

\"luminancedistance\"

Using just luminance<\/p><\/div>\n

\"rgbdistance\"

Using RGB<\/p><\/div>\n

\"no

original colors (scaled)<\/p><\/div>\n

You can try out the difference for yourself on\u00a0Shadertoy<\/a>. (be careful, the videos have sound auto-playing).<\/p>\n

I then went and ported this shader to Unreal, which ended up looking like this:<\/p>\n

\n