Brush Technique

avatar_painterThe brush is one of the central pieces of input in Backworlds – we have gone over a few iterations on how it works and we will probably go over some more, but these are some of the steps we have taken to get us where we are.brush_original This is how the brush looked in the Backworld prototype – we were not allowed to create our own assets so the texture used to render brush strokes is simply a circular gradient that we could generate procedurally (without breaking the rules, I hope).

The original brush had some problems – first of all, we didn’t like the sterile look of the smooth edges. Perhaps more importantly, it gave the impression that the split between physics object in frontworld and backworld was a lot more sharp than it actually was, encouraging players to be more detail-oriented than the game supported.

brush_basicPutting in a new brush texture was one of the first things we did when we started using our own assets. We liked how it turned out almost immediately so we have not spent a lot of time changing the image – the edge looks rough but is thin enough that you can easily tell frontworld from backworld.

mipped_brushA problem with using a single-level texture for the brush was that when the brush was resized, the linear filtering would cause the small sizes to get sharper and the large sizes blurred. Aside from looking bad, this introduced the problem that larger brushes would have a wider “fuzzy” edge without actually losing precision. We wanted to maintain the edge detail across sizes so instead of linear filtering, we wrote a function to recursively copy the brush texture in the pattern above onto larger mips in the brush texture and used trilinear filtering. While the texture itself does not look very organic, it works well in the game.

stroke_geomWe always rendered the brush strokes as sets of quads with a certain distance from each other, but after the uneven brush was introduced we started applying a semi-random rotation to each new quad as visualized in the above image.

There is quite a lot of overdraw in these kinds of brush strokes, but since we only really render them in short segments and then save the resulting image it doesn’t matter much.

dot_geomFinally, with the uneven brush we could no longer just render a single quad when the player clicked the mouse – instead, the first element we render in any new stroke is a series of 12 rotated quads – the first six being of increasing size and the final six of the correct stroke size.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.