The Miracle of SVG
I’ve been doing the long, slow work of adding art to Heart of the Mountain, and started to come up against a problem that I’ve been anticipating for a while. The images were too damn big.
To account for retina-quality screens, images need to have a pretty high resolution even when they aren’t going to take up a lot of space on the screen. And since my characters, tiles, and cards can all be blown up pretty large at certain points in the game, I couldn’t fudge the size. So each image I created was somewhere between 200 and 300kb, even after optimization. On my huge, robust development machine, the browser was already showing signs of stress. On devices with more modest specs, the game would have crawled to a puttering halt once all these images were in there. I needed another way.
So instead of PNG, I’m switching as much as I can to SVG. Instead of a collection of pixels, my pictures are now going to be a small set of mathematical descriptions that will draw crisp, perfect images at any resolution, and at a tiny fraction of the size. As a bonus, they can even be embedded directly in the data for cards and tiles, so no additional roundtrip to load an external file.
Hand-drawn PNG on the left, SVG on the right
The PNG in the image above is 248kb, after every optimization I was able to throw at it. The SVG is a couple bytes over 1kb. (Technically, this is one PNG that combines screenshots of the original PNG and the SVG.)
Well, ok, that’s a little bit of a cheat. The stone texture is a separate SVG that will be applied to the entire board, and will show through the transparent portions of each individual tile. And that is far and away the largest SVG I have at this point: a whole 7kb. Theoretically I could have done a similar thing with the bitmap images and seen some savings that way. But it would never have come close to what I’m getting by switching over to SVG.
I've always sorta known that I would be doing this eventually. It was easier to use PNGs to get started, but I couldn't put it off any longer. As it is, re-"drawing" every tile in the game is going to take a while. I didn't want to wait until I finished the artwork for every card as well.
What’s the tradeoff? There has to be one, right? In this case it’s processing. Instead of displaying the pixels that are detailed in the image file, the device will need to compute each image. I’m keeping things as simple as I can, so hopefully that won’t end up being more than modern machines can handle. I may need to go back to that stone texture and simplify it some more, we’ll see. To get good looking images for things that are more complicated than tiles, there could be a lot of processing required…
So I’m definitely doing this for the tiles. I will most likely use it for items on cards. For traps and enemies? Not sure yet. For characters? I really don’t know. But even if I don’t end up replacing every image in the game, whatever savings I do make will be very welcome, and it just might end up being absolutely necessary for the final game to run at all.
In one other update, I’ve flipped the board over. As much as I became accustomed to starting at the bottom of the board and moving the top, it didn’t make sense thematically. You’re not climbing a mountain, you’re descending deeper into one. So now Base Camp is at the top of the board, the Heart of the Mountain is at the bottom. I’m… still getting used to it.