Portfolio | Stefan Andersson

I first made a Draw Surface for Toca Life: School in 2015. It was based on a free plugin which I stripped down for parts and vastly simplified (one brush, one color). In 2017, however, we decided to flesh it out and re-use it for Toca Life: After School.

The original Draw Surface was incredibly slow as it would send every touch straight to the GPU and a stroke was made by simply repeating a million (more-or-less) touches. So, first out was making sure that all painting was applied to an array that would be sent to the GPU on a specified interval if necessary.

Second, the line drawing was replaced with a new algorithm - although unfortunately I didn’t know Bresenham’s line drawing algorithm was a thing at this point. Basically, I find the top and bottom pixel of the current and the previous registered brush stroke, I rotate those positions around the center of their brush strokes, and store that as a rectangle for later. I create another, non-rotated, rectangle between the brush strokes - i.e. using the strokes as the corners - and iterate over the pixels inside, then check for each pixel whether or not they’re inside the first rectangle; if so, they are painted.

The performance boost was significant, and the quality was vastly improved since we could afford upping the texture resolution - although scrapping support for iPod Touch 4 (?!) also certainly helped. A huge downside, however, was that if you drew a line diagonally you would get a bigger lag spike the faster you drew since that would increase the distance between brush strokes one frame apart, and give the algorithm an absolutly massive rectangle to process! Note that this isn’t visible in the gif, because I accidentally recorded it using the latest version of the app.

I also added the spray can brush, which uses Perlin noise and, if using the smallest brush size, can randomly drip down. This is done by selecting 1-3 random points along a brush strokes horizontal plane and creating new fake touches moving slowly downwards from those points.

Finally, I added a printing machine that allows the user to export the texture onto a painting item that they can bring along for art shows and what-not.

Two years after the last Draw Surface improvement I got the chance to improve it even more for the University Playset in Toca Life: World.

Since we were doing a chalkboard this time around, we wanted to add a chalk effect to the standard brush. The idea was to use Perlin noise on the edges of the brush, like the spray can from before, except the spray can didn’t actually use the line drawing algorithm at all… So when it came to mixing those two features, I realized it would be both hard and expensive to find the center of a line from the pixels perspective using my old algorithm. I first tried implementing various Thick Bresenham’s algorithms to replace it, but without success. I then decided to try simply drawing multiple vanilla Bresenham’s between brush strokes, and after fixing some kinks with pixels being missed, it worked and yielded far better performance, independently of how fast you were drawing!

Some other nice additions are particles emitted when erasing and much less buggy handling of sound effects.

The Elevator sounds simple enough on paper, but OH BOY. In our saving system, we have a dictionary for each scene, that contains the unique ID:s for each object in the scene. We also have a dictionary for our Sidewalk feature, that allows you to access characters in any scene, but it’s not a scene so positions are irrelevant and hierarchies are handled very differently. But here we have the Elevator, which is basically a scene, since you can place stuff on it like any old floor!

I ended up solving it by making scenes connected by Elevator share an Elevator scene. When an object is placed in the Elevator and the game saves, the objects are instead saved in the Elevator scene’s dictionary which is then accessed by the connected scenes when loaded (the Elevator is always available from all the connected scenes, so it’s more like a connected space in that sense).

The hair machine was actually the first thing I worked on after joining Toca Boca! The idea is that you place a character in a chair, select a hair cut, then either tap or drag the head cover to apply the new do to the character. The code is… not very nice to look at, but the end result still looks nice.

Included in developing the feature was also figuring out how to switch hair on characters, since that was something we didn’t yet have support for. I solved it simply by creating a list of all hairstyles in what’s essentially our “game manager” object (although we try to avoid that nowadays) and giving each character a value to track what hair to use, which you can simply change to change the haircut.