Sign up ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I would like to make a game field in a indie-strategic 2d game to be some a-like this popular picture. enter image description here

So every "pixel"(blocks) changes it's color slowly, sometimes a bright color wave happens, etc, but the spaces beetwen this pixels should stay dark (not to count shades, lightning and other 3rd party stuff going on). Units are going to be same "pixelized" and should position them-selfs according those blocks.

I have some experience in game-developing, but this task seems not trivial for me. What approaches (shader, tons of sprites or code-render, i don't now) would you recommend me to follow? (I'm thinking of making this game using Unity Engine) Thanks everyone! :)

share|improve this question
Aspcartman, your enthusiasm is good! However, how to make an entire game is off topic for the site. See the FAQ about what types of questions to ask. –  Byte56 Sep 30 '12 at 19:34
post processing pixel shader's the way to go. –  Gustavo Maciel Sep 30 '12 at 19:36
Change colors to more of blue then black, and I have a name for your game: "Toilet wars" –  Markus von Broady Sep 30 '12 at 21:39
@Byte56 I don't think he is asking how to make a game, but just how to make some special effect applied to my game. –  Ali.S Sep 30 '12 at 22:44
All right, I suppose we'll get clarification when OP returns. –  Byte56 Sep 30 '12 at 23:21

1 Answer 1

float size = 1.0 / NumTiles;

float2 Base = UV - fmod(UV, size.xx);
float2 Center = Base + (size/2.0).xx;

return tex2D(ScreenTexture, Center);

Make your render target be a texture called ScreenTexture, render your scene, make the rendertarget be the backbuffer again, draw a fullscreen quad with ScreenTexture and apply this shader on it. It is called Post Processing Pixel Shader. Should work fine for it.

EDIT: With in-between gaps:

float size = 1.0 / NumTiles;
float2 PixelSize = 1.0 / ScreenSize; //ScreenSize is a float2(ScreenWidth, ScreenHeight)
float2 Part = fmod(UV, size.xx)
if(any(Part < PixelSize) || any(Part > (size.xx - PixelSize))
    return float4(0, 0, 0, 1);
float2 Base = UV - Part;
float2 Center = Base + (size/2.0).xx;

return tex2D(ScreenTexture, Center);
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.