Hey guys, been a while since I posted here.

The reason behind this post is that I decided to challenge myself to implement a system similar to GLSL into my engine. Dont know why, but it seemed like a good idea at the time!

So, as many of you will know, I am working on Beyond The Light. One of the things I try to constantly do is to look at successful games, and see what I can learn from them. One of these games was in the Ludum Dare. Funnily enough, the game won LD25.

The game is called Atomic Creep Spawner, and it is a fantastic game. However, i was not very interested in the game mechanics, more the graphics.



The first thing that popped into my head as I watched this game being developed was: "I need to learn how to make that effect.

Good news! The game released it's source code!

After ~30 minutes of searching for the effect, I finally found it!

The code for the effect is below.


public static function makeMosaic(wid:Float, ?white=1.0, ?black=1.0) {
var wid = Std.int(wid);
var bd = new BitmapData(wid,wid, true, 0x808080);

var w = Color.addAlphaChannel(0xE0E0E0, Std.int(white*255));
var b = Color.addAlphaChannel(0x0, Std.int(black*255));

bd.setPixel32(0, 0, w);
bd.setPixel32(wid-1, wid-1, b);
for(x in 1...wid-1) {
bd.setPixel32(x, 0, w);
//bd.setPixel32(x, 1, 0xffffff);
bd.setPixel32(x, wid-1, b);
}
var w = Color.addAlphaChannel(0xFFFFFF, Std.int(white*255));
for(y in 1...wid-1) {
bd.setPixel32(0, y, w);
bd.setPixel32(wid-1, y, b);
}
return bd;
}

If you are like me, the first time you see that you will think it is very confusing. I started to peel away at the layers, and looked at what each bit did. Now this particular method will scale the images by UPSCALE, and then perform the mosaic effect, which in reality is far simpler than it looks.

What the effect actually does, is it makes the top left pixel, top, and left pixels brighter (ignoring top right and bottom left pixels), and the bottom right, right, and bottom (again, ignoring top right and bottom left pixels) a bit darker.

Once I figures this out, I started to experiment. The first 3-4 attempts were pathetic, and failed miserably. What I was trying to do was convert from HAXE to AS3 to Java. This was just crazy, as HAXE was using features AS3 doesnt have, and AS3 was using features Java doesnt have.

So, I started from scratch. What I actually did to generate the following images is to print the image to a file after the function has been performed. This allowed me to rapidly update and keep track of them.

So, heres a little blog of the development of the shader

The base image, scaled up by 3.


First iteration, I had no Idea what the maths was doing, I was just chucking in random equations.


This, this went horribly:


Removed the last change and updated the bitshifting.


Lets atleast attempt to optimise it:


More bitshifting attempts:


It is worth noting that at this point I gave up, and started again. I had a far simpler idea this time, why not use HSL/HSB and change the lightness/brightness?


Seem familiar? This was the output.




Time for take 3. This time I took some time to trawl through the internet looking for ways people had done it. What I found was on Cocos2D and iOS, someone had made a very similar effect, and said just multiply and divide the colour values by a common factor. Then use max/min on the values to get the required result.

Surely it isnt that simple?

Attempt 1, I was getting somewhere!


Attempt 2, Adding in the second line of lighter pixels!


Attempt 3, Seems I forgot all about the alpha channel here!


Attempt 4, Looks just how I wanted it to!


YAY!

Well, that took 4 long and frustrating hours in total! And personally, I like the effect. It adds depth to a much lower resolution image. So what the plan is now, is I shall make a duplicate of BTL's code and just see what its like If I scale everything down

Anyway, thanks for reading guys!

If you are interested in the code, its below!


package com.sparkedstudios.beyondthelight.graphics; public class Shader { public int w, h; public int scale; public Sprite sb; public double FACTOR = 0.7; public Sprite addAlpha(Sprite s) { Sprite result = new Sprite(s.width, s.height); for (int i = 0; i < result.pixels.length; i++) { result.pixels = ((255 >> 24) & 0xff) | s.pixels; } return result; } public Sprite scale(Sprite s, int scale) { Sprite result = new Sprite(s.width * scale, s.height * scale); for (int x = 0; x < result.width; x++) { for (int y = 0; y < result.height; y++) { int col = s.pixels[(x / scale) + (y / scale) * s.width]; result.setPixel(x, y, col); } } return result; } public Sprite mosaic(Sprite s, int scale) { Sprite result = s; for (int x = 0; x < s.width / scale; x++) { for (int y = 0; y < s.height / scale; y++) { int col = s.getPixel(x * scale, y * scale); if (col > 0) continue; int brighter = brighter(col); int darker = darker(col); for (int i = 0; i < scale - 1; i++) { result.setPixel((x * scale) + i, y * scale, brighter); result.setPixel((x * scale), (y * scale) + i, brighter); result.setPixel((x * scale) + scale - 1, (y * scale) + i, darker); result.setPixel((x * scale) + i, (y * scale) + scale - 1, darker); } } } return result; } public int brighter(int col) { int r = getRed(col); int g = getGreen(col); int b = getBlue(col); int alpha = getAlpha(col); int i = (int) (1.0 / (1.0 - FACTOR)); if (r == 0 && g == 0 && b == 0) { return toInt(i, i, i, alpha); } if (r > 0 && r < i) r = i; if (g > 0 && g < i) g = i; if (b > 0 && b < i) b = i; return toInt(Math.min((int) (r / FACTOR), 255), Math.min((int) (g / FACTOR), 255), Math.min((int) (b / FACTOR), 255), alpha); } public int darker(int col) { return toInt(Math.max((int) (getRed(col) * FACTOR), 0), Math.max((int) (getGreen(col) * FACTOR), 0), Math.max((int) (getBlue(col) * FACTOR), 0), getAlpha(col)); } public int toInt(int r, int g, int b, int a) { return ((a & 0xFF) << 24) | ((r & 0xFF) << 16) | ((g & 0xFF) << 8) | ((b & 0xFF) << 0); } public int getRed(int col) { return (col >> 16) & 0xFF; } public int getGreen(int col) { return (col >> 8) & 0xFF; } public int getBlue(int col) { return (col >> 0) & 0xFF; } public int getAlpha(int col) { return (col >> 24) & 0xff; }}



The Game:
http://www.ludumdare.com/compo/ludum-dare-25/?action=preview&uid=2982

The Author was deepknight, and well done to him for his success in LD25!