Swang Development Log — Building Levels in SVG
When building levels for Swang I’ve been using a little bit of a different toolset than what is commonly used in game development. I decided to use this method quite early in the project, and it’s been holding up surprisingly well so far. The idea is not completely unheard of, but for how simple and clever it is I think it deserves more attention.
I’m using a vector graphics program to lay out my levels, then export them out to SVG to be parsed by the game code. I’m using the $99 Mac app Sketch because that’s what I’ve been using at my job when working with designers, but there are of course other free alternatives out there.
Here’s the current introductory level in the game:
And here’s how that SVG behind it looks:
What makes SVG so convenient to use is that it’s all based on XML, which is a text format that is easy to parse and is already a popular format for storing other types of configuration for apps and games. Here’s the source code of the SVG above:
From this data we can easily parse and lay out:
- The starting position of the player, represented by the large green dot.
- The anchors and the maximum distance from which they can be attached to, represented by small red dots with gray outer circles.
- The bonus star, represented by a large yellow dot.
- The goal anchor, represented by a small green dot with gray outer circle.
- All of the walls, represented by the black lines.
- The size of the camera (i.e. zoom distance), hidden in the image above.
The walls are drawn using the Vector tool (commonly known as the Pen tool in many other programs). This tool allows me to place the vertices of one or multiple polygons that make up the geometry of the level. When the game starts these are converted to vector objects that we can easily calculate collisions against.
This has all been working out great, but there’s one limitation that I’m currently having to deal with when it comes to using this method. There’s no way for me to set any extra properties on the elements that Sketch exports out, so everything that makes up the level needs to have some sort of visual representation. So far that hasn’t really been a problem, and has even forced me to do things in ways that make it easier to work with the design of the level.
For example, instead of setting a property on all of the anchors defining their reach, I need to draw a circle with the radius that I want. This might seem like a tedious thing to do, but having this clearly presented visually makes it much easier for me to see the possible areas to swing around in. This allows me to easily design the level to eliminate any frustrating dead zones and make sure that no anchors are overlapping.
The camera is also represented visually in the level, although I’ve hidden it from the image in this example. By drawing a rectangle on top of the level, I control the zoom distance of the camera. The rectangle is the frame that the player will see the level through, so a small rectangle creates a zoomed in camera view, and a large rectangle makes it look zoomed out. This makes it easy for me to visually find a good zoom distance to place the camera at for each individual level, without needing to blindly tweak a number until I find something that works.
Since I haven’t worked much on the graphics yet, I’m not yet sure how I’ll be drawing the foregrounds and backgrounds for the levels. If I’m going to paint them by hand on a drawing tablet I’ll need to use another program since Sketch isn’t really built for that.
The foreground graphics are going to need to closely match the walls in the level, so I’ll need to use the SVG as a reference when drawing. I quickly tried this out and it seems to work fairly well, but there’s going to be a lot of back and forth if I want to make small tweaks in the geometry as I go.
Here’s how it looks with some sloppily hand drawn graphics:
So far I’ve been very pleased with how effective Sketch has been for me as a level design tool, and I hope it will hold up throughout the entirety of the project. Hopefully I’ve opened up your eyes for this method, or made you think of other clever ways to use unconventional tools in your workflow!
I posted a video on Twitter, might as well include it here: