Outlining objects as single post-process effect in SFML/OpenGL

Started by
1 comment, last by pcmaster 5 years, 9 months ago

I'm making a 2D sprite-based game in SFML and I wanted to add an outline around each of the entities in my game world. This is relatively easy to do per-entity, but this approach has numerous problems. First, it's a lot more calls to the graphics card which could add up if there's a lot of stuff on the screen at once. Second, I don't want to have to put a line of code into each entity class to apply the effect. Finally, if the entity's texture extends all the way to its bounding box, the outline gets cut off unless I create a separate, slightly larger buffer to draw to first. Because of this I want it to be a global effect applied to the whole scene. I've done it in 3D with Unreal using the depth buffer, but in 2D there's no real depth axis--for something to be "in front" you just draw it later. So I'm wondering if there's a good way to achieve this effect, either by enabling the depth buffer in OpenGL or finding some other way to fudge it.

My website: Brass Watch Games

Come check out Shipyard, my first real game project (Very WIP): Game Website Development Journal

Shipyard is a 2D turn-based strategy with a sci-fi theme, in which you build ships from individual parts rather than being given a selection of predefined models.

Advertisement

You could use a Sobel filter (wiki + plenty of implementations online). Instead of a depth buffer for it to operate on, you could render your 2D sprites also into another render target (MRT) and output a different colour or even the same for each object, just the background has to be different. This RT with the single-coloured sprites will be the input to the filter which should highlight edges between the areas.

If you ran an edge detection filter directly on your only colour render target, it would detect edges also inside of your sprites. That's why I recommend another input which has profound discontinuities, even if you don't have a depth buffer.

For example here:

 

So that's a simple and quick (9-tap) post-process, you'll just have to add and experiment with a threshold to get a clearer outline.

This topic is closed to new replies.

Advertisement