Broad Strokes

We are currently hard at work with the leveldesign (iteration, iteration…) and working out how the themes of the game tie into the narrative and aesthetics. Taking a break from that, today I thought I’d go over one of our effects.

In the Backworlds demo, we spawn the player character into the level by gradually drawing the icon into place. We liked the effect for this and decided to try and implement it in several places, today I will give a brief overview of our quick-and-dirty solution to doing this.

Rather than doing the spawn animation as a frame-by-frame clip-book animation, we opted to use the old trick of rendering the image normally but use the mask texture to the right as the alpha channel and then incrementing the alphatest value over time. While this limits us a bit and might not look as good as doing it by hand, creating the mask is considerably faster than drawing the animation. In addition, it takes up less texture space and allows us to set the animation speed manually later.

I created the first mask in inkscape, in retrospect I should have looked for specific tools as this took some time. I manually recreated the image with splines, converted them to gradients and kept track of the luminance values to make sure the appearance was gradual.

… When we decided that we wanted to use this for other effects, I wanted to use the same method of manually placing the strokes I wanted to render but have the application automatically figure out the gradient ramp and render the texture for me. As luck would have it, we already had a tool for manipulating lines overlaid over an image so adding the functionality I needed for these features only took a couple of hours.

The image shows a mask texture in progress – the black parts show line startpoints and the white parts line endpoints.

… After making this, I added the option to use lines with round or square endpoints, it also became clear that some lines would need to be drawn at a greater speed than others so I added a multiplier to each individual line. I had some ideas for additional features, automatic filling of large spaces for instance, but so far we have not needed them. Simplicity is important too.

The end result is that the effect to the left took a few minutes to set up, which was pretty nice (especially if you consider that it is smoother in-game, it renders four times as many frames in 60 fps). There are probably more generic tools with powerful features available for this kind of thing, but seeing as this is a part of our existing level editor turnaround is very fast.

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.