Right now on the game project, I’m working on something that I think is going to be pretty cool once it’s done, but it’s going to take me a while to get it done, or even to get it to the point where it’s worth me writing about it here. So I thought I would break up this interlude by writing a bit about the tools I’m using to develop the game, in case anyone is interested. I’ve mentioned some of these already in passing but in this post I’ll try and flesh out the full picture a bit more, and also say a bit about why I chose the tools I did (since they probably seem an odd choice to a lot of people).

As I said before, I am writing the game in JavaScript so that it runs in a browser environment, using WebGL for the graphics. The major advantages of this approach are: 1. I don’t have to grapple with all the annoying differences between the various platforms I want to target (Windows, macOS and Linux to begin with), I can just target the web environment and the game will run on almost anything that has a browser; and 2. once the game’s finished, people won’t have to download and install the game in order to play it, they can just navigate to a web page. The major disadvantage is that the performance will be worse than “native” code in C++, but the game isn’t likely to be super demanding so this shouldn’t be too much of a problem in practice.

For testing the game while I develop it I’m mostly using Google Chrome, since that’s what I have on all my machines anyway. I’ll test it on other browsers (Firefox, Safari, etc.) at some point and check that everything works as it should, though I’m trying to steer clear of relying on obscure or browser-specific features as much as possible.

The only JavaScript library I’m currently relying on is glmatrix, a very useful library for doing the vector and matrix operations that are very common in 3D graphics applications. I’ve used it before and there seemed no point in re-inventing the wheel for something so basic and ubiquitous. Other than glmatrix I’m targeting the browser directly and writing all the code myself, though bits of it are adapted from my previous projects rather than being written from scratch for this game.

XAMPP running an Apache server on Windows

As well as a browser, it’s also necessary to have a web server installed for testing purposes, because the game expects to load its data files from a server via HTTP rather than from a local disk. So I have Apache, the most widely used web server in the world, installed on all my machines. On Linux I installed it through the normal package manager; on Windows and Mac I’ve installed XAMPP, which does a great job of packaging up Apache plus some other useful software and making it easy to install and use.

To edit the actual game code I’m using GNU Emacs. This is largely due to habit: Emacs has been my editor of choice for nearly 20 years now and its most useful shortcut keys are burned into my brain so deeply that I don’t even have to think about them anymore. It’s a pretty powerful editor and has some decent support for JavaScript, so it probably wouldn’t be a bad choice even if it wasn’t for my long history of using it for everything.

Editing the rendering code using GNU Emacs

I’m storing the code in a Fossil repository. I wrote a whole blog post about Fossil when I first discovered it, so I won’t say too much here. I still like its philosophy of storing all the code along with wiki pages and a bug tracker in a single compact file, while the Fossil executable itself is also a single file that can be dropped onto any system without going through a complex installation process. I probably wouldn’t use Fossil to co-ordinate a huge software project with multiple authors, but for a personal project like this one it’s ideal.

I’m using Fossil’s wiki facility to make notes as I go, covering things like the binary file formats used for models, and the exact process of authoring content for the game engine. Hopefully I’ll manage to keep this up going forwards as I know from past experience how useful it will be later on! I haven’t used the bug tracker system yet but I might later on if it becomes useful.

So that the code is automatically synchronised between all my machines, I keep the Fossil repository file in my Dropbox. I also keep many of the asset files in Dropbox, though I haven’t checked them into Fossil as it’s not really designed for working with large binary files, and putting them in there would just bloat the repository file and cause it to take longer to sync. I’ve used this workflow, for want of a better word, on various projects for the last few years and found it works pretty well for me.

Editing terrain in Blender

I think that pretty much covers the coding and testing side of things. The other major aspect to the game is creating the assets (3D models, landscapes, animations, textures, icons, and so on). My primary 3D software is Blender. As I said in the first post of this series, it’s free, it’s very powerful (people have made entire animated movies using it), it runs on almost anything, and it’s got a great community behind it. Its biggest downside is probably the steep learning curve, but since I’m already mostly over that after using it for my previous 3D dabblings, there was no reason not to use it for this.

I covered MakeHuman, which I’m using for the (you’ve guessed it) human models in some depth in part 2, so I won’t go into it further here.

Even when making 3D games, some 2D image editing is still usually required for preparing textures, making heads up displays, that kind of thing. Gimp has been my paint program of choice for years now. Apparently it’s got a horrible interface compared to Photoshop, but then I’ve never really used Photoshop so I guess you can’t miss what you’ve never had. In any case, Gimp has never let me down so far in terms of features. I’ve only used it once so far for this particular game, for tiling the ground textures into a single image (the “snap to grid” feature was very helpful here), but I’m sure I’ll be breaking it out again before too long. My other favourite image editor is Inkscape, which handles vector graphics rather than bitmapped. In the past I’ve found it great for designing icons and stuff like that.

Editing the terrain texture map in Gimp

I think that’s pretty much all my tools covered now. If you’ve been following along, you’ll notice that all of them are free to use and the majority are open source, which is no accident. I’m not a free software zealot who demands that all software must be freely licensed, but there are some good practical reasons why I much prefer using open source tools wherever possible.

Firstly, I don’t have to pay for them. I’m not a complete cheapskate, but at the same time I have a family to support now and better things to do with my limited money than pour it into (for example) Adobe’s pockets for a Photoshop subscription when Gimp meets my needs perfectly well.

Secondly, they tend to be cross-platform. That’s important for me because I regularly use all three major operating system platforms (Windows, Linux and macOS) so I much prefer tools that work on all three of them, as all of the tools I’ve described in this post do. I like it this way; it means I’m not locked into one particular platform and am free to switch whenever I want without having to throw away the time I’ve invested in learning this stuff and start from square one with a whole new suite of software. For example, last year it made sense for me to get a MacBook (I needed a Mac for a project and didn’t own a decent laptop at the time) and, even though I hadn’t used one since high school, I was able to install all my preferred free tools and get up and running with it very quickly.

Thirdly, they’re not going anywhere. With commercial software there’s always the worry that the company will go out of business or will discontinue their product after I’ve come to rely on it. Sure, I could continue using an old version (unless it’s a subscription service *shudder* ) but it might not keep working forever, or might keep me locked into an older operating system and unable to upgrade. That’s much less likely with open source, because even if the original developer disappears, someone else from the community can step up and take over maintenance. (I could even do it myself in some theoretical world where I have time for such things 😉 ).

So yeah. While I could probably make my game more rapidly if I switched to some expensive all-singing-all-dancing commercial Windows-only solution, I’m happy with the approach I’m taking, and it also fits well with my desire to understand everything and be able to tinker with the low level code if I want to. I hope you found this at least somewhat interesting or informative. Next time I’ll be back with a proper progress report to share with you.

… though you might be forgiven for thinking that at first 😉 . Why do so many things in computing have such weird names?

In my post about trees, I mentioned that having too many trees in the scene can make the game engine run pretty slowly, because each one contains a lot of polygons and vertices. This could be a problem for me because some of the areas of my game are going to be quite big and contain quite a lot of trees, and I want the game to perform reasonably well even on quite modest computers. So in this post I’m going to talk about some of the tricks that can be used to speed up the rendering of complex 3D scenes, which I’ve been spending a lot of time lately coding up for my game engine.

Culling

The first trick is a pretty simple one: don’t waste time drawing things that aren’t going to be visible in the final scene. This might seem obvious but in fact it’s quite a common approach in simple 3D graphics applications just to throw everything onto the screen and let the GPU (Graphics Processing Unit) sort out what’s visible and what isn’t. (My game engine as described in the earlier posts used this method). This still works fine because the GPU is smart enough not to try and draw anything that shouldn’t be there, but it’s inefficient because we’ve wasted time on processing objects and sending them to the GPU when we didn’t need to. It would be better if we could avoid as much of this work as possible.

This is where culling comes in. It refers to the process of removing items from the graphics pipeline as early as possible so as not to waste time on them. There are various methods of doing this, because there are various reasons why items might not be visible:

1. They’re behind the viewer.
2. They’re too far to the side to be visible.
3. From the viewer’s point of view they’re completely hidden behind other objects.

The first two cases aren’t too hard to deal with. We can imagine the area of the world that’s visible to the viewer as a big sideways pyramid shape projecting out into 3D space (often called the view frustum), then we can immediately cull anything that falls completely outside of this pyramid, because it can’t be visible. The details of how this is done are quite complicated and involve projections and various different co-ordinate systems, but it’s reasonably efficient to do.

There are a couple of ways of making the clipping even more efficient:

1. Instead of examining every vertex of an object to see if it’s in or out of the frustum, it’s common to work with the object’s bounding box instead. This is an imaginary cuboid that’s just big enough to contain all of the object’s 3D points within it. It’s much faster just to clip the 8 points of the bounding box against the frustum, and it still gives us nearly all same benefits as clipping the vertices individually.
2. If you arrange your 3D scene in a hierarchical form (often called a scene graph), then you can cull large parts of the hierarchy with very little effort. For example, if your scene graph contains a node that represents a house, and various nodes within that that represent individual rooms, and various nodes in each room that represent the furniture, then you can start by clipping the top level “house” node against the frustum. If it’s outside, you can immediately cull all of the room nodes and furniture nodes lower down the hierarchy and not have to spend any more time dealing with them.

(The view frustum only extends a limited distance from the viewer, so it’s also common to cull things that are too far away from the viewer. However, if this distance is too short it can cause far away objects that should be visible to disappear from the scene).

The case where an object is hidden behind another object is a bit trickier to deal with, because there’s usually no easy way to tell for sure whether this is the case or not, and we don’t want to have to get into doing complicated calculations to try and work it out because the whole point of culling things in the first place was to try and avoid doing too many calculations! However, there are exceptions; indoor scenes are a bit more amenable to this sort of optimisation because (for example) if you’ve got a completely solid wall separating one room of a building from another, you know straight away that when the viewer is in the first room, nothing in the second room is ever going to be visible (and vice versa).

Depth Cuing

Sometimes, though, even when we’ve culled everything we realistically can, things still run too slowly. For example, imagine a 3D scene looking down from a hill over a big city spread out down below. There could be hundreds or even thousands of buildings and trees and other objects visible to the viewer, and we can’t just start removing them without the player noticing, but on the other hand it’s a hell of a lot of work for the computer to render them all. What can we do?

One other option is depth cuing. This involves using less detailed models for certain objects when they’re further away from the viewer. For example, I can instruct my tree generator code to use fewer vertices on the stems and trunks, and simpler shapes made up of fewer triangles for the leaves. This wouldn’t look good for trees close to the camera, because you’d notice the shapes looking less curved and more blocky, but for trees in the distance it’s not too bad.

MakeHuman can also use less detailed “proxy” meshes which would be an option for adding depth cuing to human models.

Full detail MakeHuman model (left), and with low resolution proxy mesh (right)

Ideally it’s better if we can generate the less detailed models of the objects automatically, but it’s also possible to make them manually in Blender if necessary.

Billboards

In 3D graphics terms, billboards are a bit like depth cuing taken to the extreme. In this case, instead of replacing a 3D model with a less detailed 3D model, we replace it with a flat rectangle with the object “painted” onto it via a texture – just like a billboard!

Obviously this is quite a drastic step and it only really looks acceptable for objects that are pretty far away from the camera, but the speed improvement can be dramatic. We’re going from having to render a tree model that might contain thousands of vertices and polygons to rendering a single flat surface composed of 4 points and two triangles!

In fact, older 3D games used to make extensive use of “billboard sprites” – all of the enemies and power-ups in Doom were drawn this way, as were the trees and some other things in Super Mario 64. The downsides are that they can look quite pixellated and blocky close up, and also that (unless the game creators included images of the objects from different angles) they look the same no matter what angle you view them from.

Creating texture images for every object that we might want to turn into a billboard would be a lot of work, and the resulting images would take up a lot of space as well. Fortunately, we don’t have to do this; WebGL is quite capable of creating the billboard images on-the-fly when they’re required, using a technique called render-to-texture. Basically, this means that instead of drawing a 3D scene directly onto the screen like normal, we draw it into an image stored on the GPU, and that image can then be used as a texture when drawing future scenes.

That little pixellated tree was my very first attempt at a billboard sprite!

This is an incredibly useful technique. As well as making billboards, it can also be used for implementing things like display screens and mirrors in games, and some 3D systems use it extensively for doing multiple rendering passes so that they can do clever stuff with lights and shading. I’d never used it myself before, but once I’d coded it up for generating the billboards, I was pleased that it seemed to work pretty well.

Up close, it’s pretty obvious which tree is the 3D model and which is the billboard…

… but from a bit of a distance the billboard looks a lot more convincing

One potential problem with both depth cuing and billboards is known as “pop in”. This is the effect you sometimes see when you’re walking forwards in a game and you see a sudden visible “jump” in the scenery coming towards you, because you’ve now got close enough to it that the billboard (or less accurate model) being used for speed has been replaced by the proper 3D model. It’s difficult to get rid of “pop in” altogether, because no matter how good the billboard is, it’s never going to look exactly the same as the original model, even from quite a distance; but we can minimise it by using as good a substitute as possible and by only using it for objects a long way from the viewer.

Phew! That was pretty long and quite technical this time, but I’m really pleased to have got all of this stuff into the game engine and working. (It’s swelled the engine code up to a much larger 3,751 lines, but it’ll be worth it). I’ve tried to make it all as general as possible – there’s a mechanism in the code now for any object in the game world to say to the engine, “Hey, you can replace me with a 256×256 pixel billboard once I’m 20 metres away from the camera!” or “Here’s a less detailed model you can use once I’m 10 metres away!”, so it should be useful for speeding up all sorts of things in the future. Hopefully next time I should be back doing something a bit more fun… I haven’t quite decided what yet, but it’ll probably involve adding more elements to the game world, so stay tuned for that.

But why now?

You might reasonably ask why I chose to do all this optimisation work so early on in the project. After all, there were plenty of more interesting (to most people anyway!) things I could have been working on instead, like adding streets and buildings to my town. Also, the general advice given to programmers is not to get caught up in optimising code too early, because it complicates the code and because you might end up wasting your time if it turns out it would have run fast enough anyway. I had three main reasons for disregarding this advice:

1. I already knew from similar projects I’d done recently that I was going to need these optimisations or the engine would be nowhere near fast enough.
2. I also expected that the billboarding was going to be (along with the skeletal animation) one of the trickiest things to code, so I wanted to get them both out of the way as early as possible, because if it turned out that they were beyond my coding ability or beyond what JavaScript could realistically cope with, I’d rather find that out now than when I’ve spent months perfecting the rest of the game only to find out I can’t actually finish it.
3. In my experience it’s usually easier to build fast code from the start than it is to try and “retrofit” speed to slow code later on. Some optimisations require a certain code architecture to work properly, and it’s not ideal if you find you’ve already written 10,000 lines of code using a completely different architecture.

Anyway, I’m happy. It’s all working now and the coding difficulty should hopefully be mostly downhill from this point onwards.

Oops. I didn’t mean to leave it quite so long after part 3 before posting this. I have been doing quite a lot on the game, it’s just either been dull (but necessary) rearranging of the code that I’m not going to bother writing about, or it’s been other coding stuff that I’ll discuss in part 5 (my coding has got a bit out of sync with my posts on here).

Having now got the basics of human models and animation working using WebGL, for the next several posts I’ll be shifting my attention back to creating the game world, and building the tools I need to give the characters a more interesting environment to explore. Starting, in this post, with trees!

As luck would have it, I already had a very useful chunk of tree-related code that I wrote for the Botanic Gardens Station model I made a couple of years ago, and I was able to integrate that code mostly unchanged into my new game engine, allowing me to place trees into the game world. But although the main core of the tree generation code was already there, I wanted to add three major things for this game:

1. A nice tree editor. I always intended to make one for the Botanics project, but in the end I only used one type of tree for that model, so I did it by just editing numbers in the code until I got it to look vaguely like I wanted it to. For the game I want a more powerful way of editing tree types.
2. An easy way of placing trees into the game world. I want the ability to place individual trees at specific points, but I also want to be able to generate areas of woodland without having to manually specify the exact location of every single tree. I already had something like this for the Botanics model which I could adapt.
3. A way to keep the game running fast even with lots of trees in the world. The tree models contain quite a lot of polygons and on less powerful systems (like the Macbook Air that I’m using for much of the game development) things can easily slow down to a crawl when there are lots of trees visible. I need to speed up the code so that it can cope better with this.

Altogether that added up to quite a lot of work, so much so that I’m going to split off the third item into a separate blog post about optimisation and just concentrate on 1 and 2 here.

No. 1: The Larch. The Larch *

I wrote most of the tree editor on the train down to London. All the people standing in the aisles who would have been on the previous train if it hadn’t been cancelled made it a bit hard to concentrate, but luckily this code didn’t require too much thought – it was mostly a case of adding edit controls to a web page and writing code to move values to and from them. The resulting editor isn’t particularly advanced or pretty, but it works and will be far better than trying to create tree types by editing numbers in the code like I was before.

It’s a bit like a very primitive MakeHuman for trees, in the sense that it lets you edit tree models by tweaking meaningful(ish) parameters like the lengths of the branches, the density of the leaves and the overall shape rather than having to worry about the individual vertices and faces like you would in traditional 3D editing. Once I’m done editing each tree, I can copy the text below the tree graphic and paste it into my JavaScript code to include that tree type in the game.

Placing trees using Blender

One downside to generating geometry such as trees within my code is that it means I can’t easily use a 3D editor like Blender to put them in the scene – if I was to model a tree using Blender and put it in my scene and export it, I’d have a full 3D mesh, which isn’t what I want, because I want to generate the meshes for the trees within my JavaScript code instead.

However, I still want to use Blender to build the game scenes. I’m already using it for my terrain, and it has lots of amazing editing tools that will be handy for future parts of the game. I could just leave the trees out of the Blender scenes and put them in some other way (either by building some editing tool of my own or just by tweaking the co-ordinates manually), but that would be more work, and I’d have to remember that there were going to be trees in certain places when editing the other stuff in Blender, so it’s not ideal.

“That’s not a cube, it’s a tree”. “Oh. I see you’ve played Cubey-Treey before!”

Instead I’m just putting placeholder objects in the Blender scene (I’m using cubes but they could be anything), and giving them names that make it obvious they’re meant to be trees, and also include their types. Then I’ve extended the terrain converter program that I wrote way back in post 1 to recognise the placeholders and spit out a list of their positions and types in a form that I can easily incorporate into the game code. That way I can move the trees around and change their types from within Blender like I wanted, but I still get the advantages that come with generating the tree models within my game engine.

But what about whole areas of woodland? As I said earlier on, I didn’t want to have to tediously place every tree manually for those. Once again I’m using the idea of a “placeholder” object in the Blender scene. This time it’s merely a base that trees will later sprout from. The code I wrote for the Botanic Gardens Station model can automatically place trees on this base according to some parameters. I can tell it what types of tree I want in this woodland, how densely they cover the ground, how close they’re allowed to be to each other, etc. and it will generate a woodland for me with very little effort on my part!

My terrain model in Blender. That yellow rectangle is an area that I’m marking out to become a woodland.

Of course, there’s always a risk that I won’t like what it comes up with. If so, I can change a “seed” number and it will place the trees differently, though still obeying the same constraints as before.

Back in the game engine, my character can now go for a walk in the woods.

So now the game has a slightly more interesting landscape! There are still many more elements to be added of course, but my next task is going to be to speed it up. It’s already slowing my laptops down noticeably when I add a woodland to the scene (though my nice big Linux desktop PC with proper graphics card doesn’t even break a sweat), so that needs to be addressed before I go too much further.

* may not actually be a larch