Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


We're also offering banner ads on our site from just $5! 1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.






Custom Shaders - 2D

Posted by Matthewj234, 10 January 2013 · 884 views

java beyond the light sparked studios 2d shader custom graphics ludum dare ld25
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.

Posted Image

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 Posted Image

The base image, scaled up by 3.
Posted Image

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

This, this went horribly:
Posted Image

Removed the last change and updated the bitshifting.
Posted Image

Lets atleast attempt to optimise it:
Posted Image

More bitshifting attempts:
Posted Image

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.
Posted Image



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!
Posted Image

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

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

Attempt 4, Looks just how I wanted it to!
Posted Image

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 Posted Image

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[i] = ((255 >> 24) & 0xff) | s.pixels[i];
        }
        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!




So do you just run those functions on the texture data once as a preprocessing step if I'm understanding correctly? This looks like it could be achieved in real time, but maybe you chose to do it this way for some special reason??

So do you just run those functions on the texture data once as a preprocessing step if I'm understanding correctly? This looks like it could be achieved in real time, but maybe you chose to do it this way for some special reason??

 

Yes, I run it pre-processing. This is because a lot of the sprites are repeated, so you save the program running the same method for each instance of the sprite.

November 2014 »

S M T W T F S
      1
2345678
9101112131415
16171819202122
23 242526272829
30      

Recent Entries

Recent Comments

PARTNERS