I'm making a PC 2D point and click adventure and I would like to have a UI where if the user hovers their mouse cursor over an object (that can be interacted with) the object would be rendered with a highlight selection around it... Something like marching ants.
I'm thinking this could be implemented like this:
* start render frame
* Render all objects appearing behind the selected item using the "normal" shader.
* switch to selection shader and render the item
* switch back to "normal" shader and render all items that appear in front of the selected object
All my graphic assets are 2D hand drawn textures.
Any ideas on how to implement the selection shader in GLSL?
How to implement GLSL marching ant shader
there are lots of possible solutions - a fast one could be to use a graphics-tool (ie gimp) to add a border to each graphical asset that may be selected using a marker-color, like 255 0 255. then in glsl you can do something like this:
if(selected && color.r == 255 && color.g == 0 && color.b == 255) color = mySelectionColor;
else if(!selected && color.r == 255 && color.g == 0 && color.b == 255) color.a = 0.0;
ofc calculating a border on the fly is also possible, and if it's supposed to be just 1 or 2 pixels wide it's reasonably fast. for that you'd do something like:
if(color.a == 0 && color.a of neighbouring pixels != 0) color = mySelectionColor;
that would give a 1px wide border around whatever by checking each transparent pixel if it is neighbouring any opaque pixels, and if so render it with border-color.
i'd probably prefer the first method, cause it's faster. you can add the 1px wide border to the textures/sprites using a batch-cli tool like the ones from imagemagick (http://www.imagemagick.org/script/binary-releases.php) - so it isnt much work, just 1 command for all textures/sprites.
Author
Thanks for the suggestions, I'll implement your first suggestion to see how it looks.
if(color.a == 0 && color.a of neighbouring pixels != 0) color = mySelectionColor;
Do you have any information on how you'd go about accessing data from neighbouring pixels? This would be part of the fragment shader right?
Yes. "Texels" in this case. It's called multi-sampling (though most people asociate that term with antialiasing). There's no trick to it, you just take more than one sample. Be aware that sampling is expensive though.
Author
I just found this online that gives a nice explanation on how to implement exactly what I need:
http://blogs.love2d.org/content/let-it-glow-dynamically-adding-outlines-characters
http://blogs.love2d.org/content/let-it-glow-dynamically-adding-outlines-characters
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
