18 December 2009

Watch the roads

I won't be updating for the next bit till after New Years. I'm on an epic ~3000km journey on my little 250cc bike. If you see me on the road, please don't drive over me. I'd really appreciate it. Plus that way, I'd get to finish my game. That's good incentive. If you have holidays, enjoy them.

11 December 2009

Refinement: how to run

So I've been chatting to a friend of mine (relax, I have only one, nobody else to take my non-at-work time away from this project, I promise. Besides he's probably imaginary) about the animation doohickey I seem to have a trend of referring back to the very last post in these introductiony sort of pieces. Poor style and all that.

A quick note regarding the tag-based system of objects. It may seem a little awkward initially but is made simpler when you think of tags as folders. So a number of tags all used together to refer to an object is like having a folder within a folder, etc. All objects or assets are going to have predefined tags (I'll tag them) so this isn't a system whereby the user has to or even can change the tags (I will be adding a sort of "favourite" system so you can have quicker access to certain assets, but this only allows one to add tags, not change or remove others).

Going on with the topic at hand... the animation editor is still in the infancy of concept and, as such, has lots that needs to be improved upon. For starters I haven't mentioned anything about keyboard access. This is not to say it won't be in there. I live by the keyboard. I just didn't mention it because it's pretty boring to talk about how awesome the ctrl-alt-i shortcut is at importing an animation segment (even though we all know that's the most amazing shortcut ever). Keyboard shortcuts are paramount to a good workflow, and I'll be making sure I put in some good ones (I might even be nice and put in some Mac-based ones just for you weirdy "too cool for PC" guys*)

The top-level controllers of each animation (these ones: ) won't be enforced. The animation editor is quite modular and will allow for more permanent tampering but this is quite a central aspect of the gameplay in Sideline. So it'll be part of the editor for me and for people who mod the game (while retaining that part of the play style). But you can turn these controllers on and off per animation.

The animation system is also not the "everything" animator. I will be using Flash itself to do more basic frame-based animation. The editor is timeline based and also only really for programatic, dynamic animation. As in, stuff that may need to change on the fly. It's animation that is adjusted or moved around by code, whereas frame-based stuff is unchanging - think cell-based animation used by movie artists. You can have these animations change as needed - you just have to animate a whole new thing to do it.

The problem with dynamic animation is that it's more CPU intensive, something that I really don't want too much of as Flash is already a system hog. The more I throw at it (and it doesn't take much), the fewer people can actually run the game. And hell, I'd like people to actually play this, not watch a slideshow.

So the simpler animations will be done via Flash. It will render and calculate these sorts of things much faster that way which means I can toss a few more other things (particle, gore engine, better AI, what have you) into the game.

*I use a Mac at work but I am not a fanboy**. Every system has it's failings and as fancy as OSX looks, it's got its own problems. But is pretty cool, too, so please don't start a flamewar, there have been to many already.

**A balanced meal is essential, and although there are a few who can survive on fruit alone, you should eat your veggies. As much as I enjoy using any computer I often prefer mine to be kept personal.

10 December 2009

How I learned to walk

There are a huge number of programs out there that allow you to animate something in 2 dimensions. Some of these packages are very very good at what they do, and others are mediocre. Some are inbetween in the same way that statistics tells us there are averages. But I need my animation system tightly integrated with my game. I'm sure I could do a very handy job at character and object animations using another editor, but the result wouldn't be quite what I wanted, nor would it allow me the excuse of trying to make my own animation system and throwing all the code at you for free.

It's been mentioned to me that I could possibly make money by selling the tools I'm making at the moment, and I'm sure I could profit a little from them, but I'd rather help the growth of the community of indie (and even big company) devs out there. As I've mentioned before - my tools are different and maybe they'll hit a niche somewhere that somebody appreciates (at the moment that niche is me). I hope so, although even if that wasn't the case I'd still make the tools because I enjoy making them. Plus now I get to see if I can make something that actually works better than paid-for software and feel all self-important.

Here are some mockups for you all. It might be beneficial to click on the pictures to enlarge them, but maybe your eyesight's really good and you don't need to.

The animation editor

And here are some notes for the non-telepathic

The menu interface is much the same as the one in the level editor, save that now you get to see just how advanced the menu buttons can get as well as just how fricking difficult I make life for myself. Damn you, me.

So, quick notes, for the stuff I don't mention:
  • The timeline of the animation is resizable.
  • 1...2...3...etc. are time in seconds.
  • The hands shown there aren't how I'd actually make an animation, but just an illustration of what's possible.
  • The breathing diagram is draggable with the dots, and can also be edited by number input (not shown).
  • The times, etc. given in exertion are also not the values I'd use in the game (I will be greatly accelerating the values so 3 minutes would actually be a few seconds as otherwise the effects wouldn't be very noticible). Each animation has a level of exertion that is applied to it - more hectic things like running or jumping around will have significantly higher exertion levels. The more the character is exerted the more likely they have to stop moving to catch their breath, pass out, or have a heart attack.
  • You can search through these animations like in the other menus, I just haven't shown that here.
  • The red background track colours respond directly to the colour of the bone nodes (the circles) in the character.
  • The black silhouette is not how it will be shown in the actual system, I just couldn't be bothered to draw up something properly.
  • You can group bone nodes together (shown here as arms and legs).
  • I've left a subtle mention of animation blending in the bottom there while not showing anything of how this will work (aren't I mysterious).

Colours are not final here, and in fact I think it might be nice to have this interface themable (if only by colour). I already have a theming system half-coded up when I was writing the platform for my blog in Flash. Sadly I have since let the webs gather upon that project and opted instead to use blogspot. This is mostly due to the fact that it's one of the few ways I could get a free website.

For those of you dislike mysteries, I'll divulge a little as to the blending mechanism. Each animation has a priority of motion for each bone node. So you can specify that one animation takes prevalence over the leg nodes while another will control the arm motion. This way you can combine pointing at stuff with walking. You can set up nodes as weak controllers so they have low priority in the animation - they'll be used unless another animation that you're blending with has a different motion for those nodes. What if you use two animations with equal priority of bone nodes? I don't know. I might throw out an error to the user in the animation editor or perhaps gracefully fail and choose one animation over another automatically.

09 December 2009


Now that you know where I'm coming from I can show you what I actually worked on. It's a simple tree-like structure that many of you should be familiar with - your files are organised in this way on your harddrive (files inside folder inside folders, hiding your naughty stash). However, I've always found this strict tree-view lacking. It's difficult to categorize everything as belonging to a single explicit group.

Say I have a folder with a bunch of program installers (a collection of useful things that I may need to install if I reinstall my operating system, e.g. video drivers, Winamp, Open Office, whatever). If I have Audacity (an open source audio editor), in there I could categorise it as a "audio editor", a "music player", and "open source" amongst others. What if I want to list all my open source programs? Unless I have them all in a folder called "open source" I won't easily be able to filter through my programs. And likewise if I want all "audio editors". If I've already place Audacity in the "open source" folder I can't see it in my "audio editor" folder unless I duplicate it (wasting disk space).

Things (the vast array of matter and concept floating throughout existence, waiting to pounce) belong to several groups or sets. In the previous example, how about if I just say I want all "audio editors" that are also "open source". This will give me (along with some others if I have any on my drive) Audacity, while if I list "audio editors" only, Audacity will be in the list, likewise if I ask for "open source" applications. This tag-based system is the structure of databases (which uses set theory). And it's the way I wish file systems were organised (I'm busy doing an interface on that for funzies, although there are also a few other folk working on this).

So this is how I decided to do my menu structure:

The menu

From left to right:
The grey bar with dots: Clicking and dragging on this will move the menu around. You can dock the menu against other menus or the side of the screen. (I'm making the menu rotational, too, so double clicking on the grey bar will layout the menu horizontally from the top or vertically from the left, etc.)
The blue buttons: The dark ones are unselected, while "Add object" is active. The little circles at the end of the name indicate that there is a submenu if you click on it (no submenu means that it will run a command instead).
The blue buttons above the red ones: These are controllers. Using them will affect the list of buttons below them. "Group" will group buttons together (I'll show you the result shortly) and "Search" will filter through the list. Typing "ject" into the search box will only show the "Object" and "Object Type 2" buttons, hiding "Something" from the menu. I'm extending this a bit as only searching through names is limited, but allowing you to search through specific tags would be more useful (although this isn't shown in these concept images).
The red buttons: This is a rough example of how the library of objects would look. These objects can be added to the stage by clicking on them - mousing over would show a small preview like this:

 Hovering over the "Object" button

The above pic also shows how grouping works. This is the same menu from before, but the grouping button was activated with a tag of type "Var" (this isn't actually what stuff would be called, I just hadn't worked out all the names of everything when I designed this). So now the library items are shifted over a step and their groups are listed instead. Tags or groups are separated into types. So one tag could be "location" (which would include such tags as "garden", "kitchen", "bar", "sky") and another could be "furniture" (with tags like "chair", "decoration", "light"). Each of these tags would contain a multitude of objects. Objects can have several tags. A painting could be of location type "wall" and furniture type "decoration".

Using the search or filter will also immediately create a new search field under it so you can filter by multiple tags or names. I still need to think how I'll include this properly, but perhaps something along these lines:

Boolean operations at work with searches, crosses on the right will remove filters

I haven't worked it all out perfectly yet, but it's code worthy - in fact I started coding this a while back so you get to see a demo soon (of course, since this update didn't happen for a while I'm not sure how trustworthy my relative-term timescale is).

Curves and colours

I've been thinking about how the animation system will work for a while. Some of the time I've been awake for the thinking and not just dozing off pretending to work on the game. My thought processes are often quite visual so I get struggle when trying to indicate my thoughts with mere words. I think in colours, shapes, and expletives when it doesn't quite work out.

Some people may think it odd that I'm working out the interface to the program before I've even worked out exactly how a program works. It's not quite like that, of course. I have a general concept in mind before I start. Once the vague premise is in place, I start working out where all the buttons go, how they look, why they do something. I revise as I go along, too. This might mean I take a few iterations of conceptualizing the GUI (Graphical User Interface – you know, buttons, switches, shiny things), but it helps me work out what I should be including as well as what works best. Writing out what buttons you have on screen is all very well in text, but until you see them there you won't know if it actually makes sense.

It's in this manner that I began to build a menu system for my level editor and animation toolkit. This is not the game menu or anything, it's just for the tools that I'm building to make the game itself. Why waste my time? I'm not – these tools are part of the final game package. I want people to be able to be able to use these tools to not just modify and add to my game, but to create their own games. The games themselves don't even have to be Flash games at all, just something 2D in whatever language people want to develop it in. I just figure you can never have enough tools to do anything, mostly because any particular game development tool is designed for certain types of games. The more types of tools around, the easier it is for game developers to find a tool to suit their needs.

I love designing user interfaces, in particular ones that are user friendly, unique, and pleasing to look at. Which is actually sort of my day job anyway. And that's why I tried to make an animation system interface that makes to the user. Have you ever tried to learn how to use Flash, Photoshop or Microsoft Word? Those are great examples of really awful interfaces. They are designed from a programmer's perspective (as in, it makes sense to a cubicled person who drinks far too much coffee and enjoys discussing how to generate fractals using only 25 lines of code*).

But people use programs. This is not to say programmers aren't people, but they certainly don't think in the same way as most ordinary folk. Intefaces should be designed to maximise workflow within an application and, as much as possible, be intuitive. If you're program is complex, then naturally the interface will follow this trend, but the application designer needs to keep in mind who the audience is.

I don't have a perfect completely intuitive system by any means, but I think I've come up with something that will enhance workflow and still be quite open to some modification by others. I'm trying to keep it simple for the user (it's already become fairly complex code-wise – oh! the things I do for you). I'll post up how this all looks and works shortly. Minus an interactive demo - only pretty pictures for now.

*This is a fallacy of what a programmer is like and I apologise to all my fellow coders out there. I know you aren't like this, I know many of you (those 8 in the back) have spoken to girls before, and some of you (0.06%) don't even drink coffee. Many of you probably don't even discuss fractals, or know how to obfuscate code so that you have to stay hired at the company because you're the only one who can fix it, but that's because you're weird.