… well, a blog post about animation, at least 😉 .

Last time I left my preliminary game characters to move around the preliminary game world with their legs gliding across the ground and their arms sticking out like scarecrows’. My task since then has been to get them animated properly.

There’s a few different ways of handling animation in 3D. At the most basic level, if you want to make a character model appear to walk, you need to show the model with its arms and legs in different positions each frame to give the illusion of motion. So one method would be to just make a separate 3D model for each animation frame and show them in quick succession, one after another.

This is a pretty simple approach, but it has its drawbacks. Firstly, you’re going to have to make a lot of models! If you want a walking animation that runs at 30fps and is 2 seconds long, you need to edit and export 60 separate models, one for each frame. That’s a lot of work, and if you then want to make a walking animation for a second character, you need to do it all over again. Secondly, a lot of models means a lot of data, and in the case of a web-based game like mine a lot of data is bad news because it’s all got to be transferred over the internet whenever someone plays the game.

These drawbacks can be overcome by using skeletal animation instead. In this case you assign a skeleton (a hierarchy of straight line “bones”) to your character model, as well as a “skin” that describes how the character mesh deforms when the skeleton moves. Then you can create animations simply by determining the shape of the skeleton for each frame, and the model itself will automatically contort itself into the right shape. This means that you don’t need to store a complete new copy of the mesh for each frame, only the angles of each bone, which is a much smaller amount of data. Even better, as long as all your human models share the same skeleton structure, you can apply the same animations to all of them.

A skeleton “walking” in Blender:

Despite the big advantages of skeletal animation, I hadn’t been planning to use it at first for this game, because it requires some slightly complicated calculations that JavaScript isn’t ideally suited to. But once I’d thought about it a bit I realised that realistically I would have to use it to keep the amount of data involved (and the amount of manual effort to create the animations) manageable, so I coded it up. It wasn’t as bad as I feared and the core code to deform a mesh based on a skeleton only came to about 100 lines of JavaScript in the end.

Even small bugs in the animation code can cause effects that surrealist artists would have loved

You can make animations using Blender’s “Pose Mode” and animation timeline, then save them to BVH (BioVision Hierarchy) files. I wrote (yup, you’ve guessed it) yet another converter tool to convert these into binary files for the game engine, as well as extending my previous Collada converter to include the skeleton and skin information from MakeHuman. MakeHuman has various built-in skeletons that you can add to your human. I use the CMU skeleton, partly because at 31 bones it’s the simplest one on offer, and partly because it works with some nice ready made animations that I’ll talk about in a bit.

Here’s a simple animation of a character’s head turning that I made in Blender. It probably won’t win me any awards, but it served its purpose of reminding me how to create animations:

I didn’t, however, make that “walking skeleton” animation that I showed earlier. It came from a great animation resource, the Carnegie Mellon University Motion Capture Database. This contains a huge library of animations captured by filming real people with ping pong balls* attached to them performing various actions, and they’re free to use for any purpose. I will probably use some of these in the game, though they probably won’t have all the animations I need and I’ll still have to make some myself, so I’m a bit worried that the CMU ones will show up mine as being pretty rubbish! Still, we’ll get to that later.

Here’s one of my game characters walking with an animation from the CMU database:

With the animation in place it suddenly starts to look much more like an actual game, though admittedly a pretty dull one at this point!

Next I think I’ll turn my attention to re-organising the code a bit so that it can better manage all the assets required for an actual game – not the most glamourous of tasks but it needs to be done and will be well worth it. Then I’ll probably switch back to working on the game world and add something more interesting than a bare landscape for the characters to explore! Hopefully talk to you again soon.

(In case anyone’s interested, the current JavaScript game code runs to 1,558 lines).

* may not actually be ping pong balls

Last time I worked out a method of editing terrain using Blender, exporting it and then rendering it using JavaScript and WebGL. This time we’re going to add something a bit more interesting: namely a character!

Now, the characters in my game are going to be humans, and modelling 3D humans is not an easy thing to do unless you’re a pretty experienced 3D artist (which I’m not). Fortunately for me and others like me, there’s a great little free program called MakeHuman that does most of the difficult bits for you! In fact, I would go so far as to say that I probably wouldn’t be building this game at all if it wasn’t for MakeHuman, because I’d be worried about my character models looking so depressingly awful that they’d ruin the whole thing.

Making a male character in MakeHuman

MakeHuman is (to me, at least) one of those tools that’s so amazing that it’s almost difficult to believe it really exists. Basically, you start it up and you’re confronted with a 3D human model and a bunch of different controls (mostly sliders) that you can use to change various properties of the human. The sliders on the initial screen control very important properties that affect the shape of the entire human: here you can control gender (a continuum between male and female rather than a binary choice), age (from 1 to 90 years), height, weight, race (as a mix of African, Asian and Caucasian) and a handful of other things. But if you drill down into the other tabs, there are sliders to change just about every detail you can imagine (for example, there are 6 sliders just in the “Nose size” category, and there are also “Nose size detail” and “Nose features” categories!). The quality of the generated models is very good indeed.

As well as giving you a huge amount of control over the shape of your human model, MakeHuman also provides a wealth of other useful features. On the “Materials” tab you can assign skin and eye textures to the model, and there’s also a “Pose/Animate” tab that controls the character’s pose and allows you to add a skeleton for skeletal animation (more on that in a future post). And unless you’re exclusively making naked, hairless characters (not that there’d be anything wrong with that 😉 ), you’ll definitely want to visit the “Geometries” tab to add some hair and clothes to your model. If MakeHuman has a weakness it’s probably that the selection of hair, clothes and other accessories included is a bit barren, but you can make your own using Blender or download ones other people have made from the MakeHuman Community site, which has a much better selection.

Making a female character in MakeHuman

As you’ve probably guessed by now, I rather like MakeHuman! I’m only really scratching the surface of it here as this is supposed to be a blog about my game rather than about MakeHuman, but there’s plenty more information on the MakeHuman Community website and elsewhere online if you’re interested.

The licensing of MakeHuman is set up so that as long as you use an unmodified official build of the software and export using the built-in exporters, the resulting model is under the Creative Commons Zero licence, allowing you to do anything you want with it, even incorporate it into a commercial product. In order to get my character models out of MakeHuman and into my JavaScript game engine, I decided to use a similar approach to that used for the terrain last time: export to a standard file format and then write a converter program to convert to a compact binary format for the engine.

MakeHuman supports the same OBJ format that I used for exporting the terrain from Blender, but I didn’t use it this time; it doesn’t support all the features of MakeHuman and although this limitation wouldn’t be a problem right now, it will become a problem in the near future. Instead I used Collada, a complex XML-based format that captures a lot more information than OBJ does. Loading Collada files is a lot more involved than loading OBJ, but luckily I already had some C++ code from a previous project that was capable of extracting everything I needed. I modified this to write out the important data (at this point just the basic 3D mesh for the human body as well as accessories like the hair and clothes) to a binary file that I could load into my engine.

I also had to make quite a lot of changes to the engine at this point. When I wrote my last blog post, all it could do was display a single terrain mesh with a single texture mapped onto it. I rewrote the code to include a scene graph system, allowing multiple models to be placed in the 3D world in a hierarchical fashion, and also to support multiple textures. Then I wrote a loader for the models I converted from MakeHuman and added my human to the scene.

Male character in the game world

(The meshes exported from MakeHuman contain a lot of faces and are very detailed, in fact probably too detailed for my purposes. Fortunately it gives you the option of using a a less detailed but more rough looking “proxy” mesh in the place of the detailed mesh, so that’s what I’m doing for my characters, so that file sizes stay small and rendering isn’t too slow. However, the clothes and hair meshes are still very detailed so I suspect I will end up making my own so as not to bog the game down with too many polygons to deal with, as well as to make them look just how I want).

At this point (once I’d ironed out the inevitable bugs) I had a character in my game world, but all it could do was stand there. I wanted some movement, so I added code allowing me to move the human across the terrain using the keyboard, keeping the model at ground level at all times. I also added a very basic “floating camera” that would follow along behind the character. All of this (the models, the physics, the camera) is very preliminary and will need a lot of improvement in the future, but right now it’s quite cool to see the humans and the terrain working together in the game engine like this.

Female character in the game world

“But”, you might say, “Why are their arms sticking out like scarecrows’?”. If I’d been arsed to make a video rather than just post still screenshots, you would probably also comment on the fact that they’re sliding along the ground without their legs moving at all. Fear not! My very next step will be to add some animation to the characters. I was originally planning to have that done for this post but once I realised how much work it would be I decided to split it off, so stay tuned for that.

Last time I talked about the new game project I’m planning to start. I was feeling quite enthusiastic about it and I had a bit of time while I was away in the caravan, so I decided it was time to actually start doing stuff on it!

I won’t say too much about the actual concept of the game yet, and in fact it might still change a bit before it’s finished, but it’s going to be set in a 3D town that you can wander round. So one of the first things to do will be to get the bare bones of a game engine running that can display the 3D world using WebGL, and also get an editing pipeline working so that I can create and edit the environment.

For most of the 3D editing I’m planning to use Blender. It’s free, it’s very powerful, it has a great community, it runs on almost everything and I already know how to use it, so what’s not to like? At some point I might want a more customised editing experience, maybe either writing a plugin or two for Blender or adding an editing mode to the game engine itself, but for the moment vanilla Blender will do.

The first element of the environment that I’m going to focus on is the actual ground, since it’s (literally) the foundation on which everything else will be built. I could model the ground as a standard 3D mesh, but it would be more efficient to treat it as a special case: it’s basically a single plane but with variations in height and texture across it, so we can store it as a 2D array of height values, plus another 2D array of material indices. My plan for the ground was as follows:

• Add the ground as a “grid” object in Blender, and model the height variations using Blender’s extensive array of modelling tools
• Export the geometry in OBJ format (a nice simple format for doing further conversions on)
• Write a converter program in C++ to convert the OBJ file into a compact binary format containing the height values for each point and the material values for each square
• Create a single texture image containing tiled textures for all the materials used
• Write JavaScript code to parse the binary file and actually display the terrain!

(We could load and parse the OBJ file directly in JavaScript, but this would be significantly larger, and size matters when working in a browser environment, because every data file has to be downloaded over the internet when running the game).

Editing terrain in Blender

The terrain work went reasonably smoothly once I got started. Editing the heights as a Blender grid worked well, with the proportional editing tool being very useful. Writing the C++ converter tool didn’t take too long, and the binary terrain files it creates are about 10 times smaller than the original OBJ files exported from Blender, so it’s well worth doing the conversion.

Terrain rendered in WebGL

Writing a WebGL renderer for the terrain was a bit more involved. The main problem I ran into was an unexpected one: I could see dark lines appearing along the edges of the terrain “tiles” when they should have joined up with each other seamlessly. I eventually traced this to my decision to store all of the textures for the ground in a single image. This works fine for the most part, but I hadn’t foreseen that it would cause problems with the filtering used by WebGL to make the textures look smoother at different scales. This causes a slight blurring effect and when you have multiple textures side-by-side in a single image, it causes their edges to “bleed” into each other slightly.

I solved this by putting 4 copies of each texture into the image, in a 2×2 layout, and mapping the centre section onto the terrain, so that the blurred edges are never used. This reduces the amount of texture data that can be stored in a single image, but it’s still better than storing each texture in a separate image and having to waste time switching between them when rendering.

Now that it’s done I’m reasonably happy with how it looks. I was a bit worried that the height differences might distort the textures too much, but they actually don’t seem to. I do plan to add some additional texture images for variety, and it should also look a lot better once some of the other elements of the scene (buildings, roads, vegetation, etc.) are in place.

Another shot of the rendered terrain

The WebGL renderer is still in its very early stages; right now all it can do is render a single 3D terrain object with a plain sky blue background, illuminated by a single directional light source, and allow me to move the camera around for testing. Obviously it’ll need a lot of other stuff added to enable it to show everything else required for the game, as well as to make things look a bit nicer and run a bit faster – but we’ll get onto that next time.

(Incidentally, the texture images are all from textures.com, a great resource for anyone doing anything 3D related. You can get loads of textures of all sorts from there and they’re free to use for most purposes).

I’ve decided it’s time to start a new game project. I haven’t done one (well, not a proper one) in a few years but things now seem to be nudging me back in that direction.

A screenshot from the first full game I created. Yes, it’s a fan-made Dizzy game for the Spectrum.

Since the Union Canal Unlocked project finished a year or so ago, I’ve been working on a 3D project in my spare time, but I’ve become frustrated that it’s not really going anywhere, at least not very fast. I had very ambitious goals for it and maybe I’m just starting to realise how long it would realistically take for me to achieve them. I may go back to it at some point, but right now I’m getting tired of pouring time and effort into code that may not actually produce any interesting output for several months or even years.

At the same time, a few things have happened that reminded me how much I used to enjoy making games. I read through an old diary from the time when I was making my first one (well, the first one I actually finished), back in 1994, which seems impossibly long ago now. It brought back the feeling of achievement and progress I used to get from making another screen or another graphic. I’ve also recently played through a game that a friend made a few years ago, and another friend started studying game design just a few weeks ago. It feels like the right time to go back to it.

My second game, also for the Spectrum. This was going to have a ridiculously ambitious 56 levels but I only got around to making 6

Of course, it’s going to be challenging to find the time, especially with our new arrival in the household! But in a way that just makes me more determined to use my scarce time more effectively, on something that I’ll actually find rewarding, rather than trying to force myself to work on something I’ve lost interest in.  Even if I only manage to do a little bit each week, I’ll get there eventually.

I have a rough plan for the new game, which will no doubt get refined and altered a lot once I get started on it. It’s going to be my first 3D game (except for a little joke one I made late last year), something I’ve shied away from in the past mainly due to the additional complexity of 3D asset creation, but after actually completing some 3D models in the last few years, I feel a bit more confident that I can do it, and I think it will fit my concept better.

My third game, this time a historical Scottish game for DOS PCs. I only finished one level of this one

I’ve decided to write it to run in a browser, using JavaScript and WebGL. This will have its pros and cons. On the plus side, it’s technology I already have quite a bit of experience of; the game will automatically work on pretty much every platform without much extra effort on my part; people won’t have to install it before playing it; and not using a ready-made game engine will give me freedom to do everything exactly the way I want (plus I find tinkering with the low level parts of the code quite fun!). On the minus side it likely won’t run as fast as it would have as a “native” app, though I don’t see this being a huge problem in practice as what I have in mind shouldn’t be too demanding; and building the engine from scratch will take quite a lot of work.

To begin with I’m just going to target computers rather than tablets and phones. The control system I have in mind will work with keyboards and mice but not so well with touchscreens. At some point later on I might add a touch control scheme since most of the rest of the code should work fine on touch devices.

“Return of the Etirites”, probably the best game I ever made. It’s basically a rip-off of Mystic Quest on the Gameboy

I’m intending to write a series of posts on here to chronicle my progress. Of course, it’s always a bit dangerous to commit to something like this publicly, but that’s part of my reason for wanting to do it… I hope it will encourage me to actually do some stuff and not just think about it! And it will give me something nice and constructive to write blog posts about, instead of Brexit 😉 . It might take me a while to get the first post up, because as anyone who’s used WebGL (or done any OpenGL coding without using the fixed pipeline) knows, it takes quite a lot of code to even display anything at all. But once the basics are done it should be possible to build on it incrementally and progress a bit more rapidly.

Wish me luck!