Sunday, August 23, 2009

And a big round of applause for generic thug!

Arrow keys for movement and crouching, spacebar to jump. Use arrow keys while swinging to increase his spin. Hold down spacebar to make the jump last longer. Hit spacebar again when holding on to a wall to wall jump. A is punch and D is kick. Press A while running against an enemy to throw him. Click on the game to start interacting with it

Wahey! An update! Life has meaning after all!

Despite having just discovered the Xbox live marketplace and bought Banjo Kazooie (one of the best games ever), Castle crashers (waiting for my brother to come back to play it with), Splosion man (brilliant game, hooked on it right now) and Battlefield 1943 (played a bit, got killed a lot), I've found the time to get on with the project.

The thing you've probably already noticed is that the yellow rectangle is no longer a yellow rectangle, but a rather effete looking young man.

Charmed, I'm sure

He can also take a beating, always turning the other cheek, mainly because I haven't programmed him to do anything else yet! Also, you can't just run through him anymore.

I've also been playing with the fighting system. Hopefully you'll find Dreg's moves string together more fluidly now. I've also added a little jump he can do while crouching. This'll be useful for evading blows or quickly getting to the other side of the guy.

The other big thing, programming wise and visually, is the throwing. To throw the thug, you have to be running against him, and then press A. It was pretty tough getting it so that it'd work. Obviously all the collision detection and gravity shifting had to continue while Dreg was throwing people, and it caused several headaches. But I'm mostly happy with it so far.

There's still more to do before I think about the Thug's AI:

- Extend Dreg's list of moves, including a few longer combos.

- Have different throws depending on whether Dreg is in front, or behind the enemy (the throw from behind will be much more deadly).

- Have the thug fall back when you trip him over, or do an uppercut

- I want the way the thug lands after being thrown to depend on the angle he's at when he hits the ground (basically, I want an amusing animation with him falling on his head. hohoho.)

Then the AI! That'll be exciting, won't it?

Monday, August 17, 2009

Kill the yellow rectangle! Kill it!!!

Arrow keys for movement and crouching, spacebar to jump. Use arrow keys while swinging to increase his spin. Hold down spacebar to make the jump last longer. Hit spacebar again when holding on to a wall to wall jump. A is punch and D is kick. Click on the game to start interacting with it


Long time no see. The thing is, as with many other people, it seems I can only work properly on my personal projects when I don't have enough time. As soon as I get a weekend, or a holiday, which I've been anticipating as a wonderful opportunity to get on with it, I find myself suddenly afflicted with accute laziness. It's the stolen hours between obligations that have the highest yield.

Anyway, all that to justify the apparent lack of progress, but don't you worry, I've been keeping the project on a simmer, and I thought I'd share what I've done so far.

As I said in my previous post, I wanted to get on with the fighting system. I knew this would be a lot of work, but I still didn't realise quite how much. Several little niggling problems turned up, of which more in the geek section later.

Anyway, as you can see, Dreg can now punch and kick. So far I've done a three punch combo, a single kick, a flying kick (which fighting purists among my friends say simply does not exist in real martial arts, but this is a computer game!), uppercut and a low kick. I plan to add several more in the future, with all sorts of silly combos. I'm quite happy with the way I've set the combat up, because it makes adding moves, and combos, very easy. Now I "just" need to animate them.

Also, seeing as I wanted low attacks, I had to make Dreg crouch. That meant I also had to animate, and program, him crawling. All this silly work!

Anyway, for now, all you have to practise on is a yellow rectangle. But it's there to show that it reacts to your hits, so I have the collision detection sorted. It also reacts correctly with the world collision lines, and gravity rifts, of course.

Don't worry, there's still more for me to do. This is the plan:

- More moves! Especially fun little combos. Also, it'd be nice to have a different jump kick depending on whether Dreg is moving sideways or not...

- The big one: Throws. This means intricate character interaction which I need to have work so that it looks like the character is being held by Dreg, but that also the character continues to perform collision detection on the scenery. I have a few ideas how to do this, but I'm worried about it.

- Maybe I could try improving on the enemy character design. Not that I have anything against yellow rectangles...

- after all that, I have to go through the same process for the enemy as for Dreg - animating movement and fight moves.

- The HUGE one: programming enemy AI. urrrrgghh! Only second to collision detection in the head-ache department.

Time for the nitty gritty:

< geekology >

First, for those who care, some silly statistics!

So far in the game, I've got 24 classes, though some of those inherit from others, and aren't particularly complicated.

The biggest class, Character, is currently at 961 lines, though that's including blank lines, braces and comments. It has 26 functions, excluding getters and setters (some of which are quite complicated) and it inherits from another class (MovingObject) which handles things like gravity shifts and whatnot. It's a bit of a mess.

So far, Dreg has 428 frames of animation, which is to say about 17 seconds, seeing as the game runs at 25 fps.

I have 65 symbols in the library (including various parts of Dreg, and level decoration).

The compiled .swf file is 116 KB big. I should write a preloader soon...

As for the work I've done so far, I had a couple of issues here when it came to gravity rifts. In a previous post, I mentioned that as Dreg passes through a rift, he is simply added to the new gravity zone sprite. The problem with this approach, now that I have multiple characters (yes, the yellow rectangle is a character) was that depending on the relative positions of each gravity zone within the level display list, and depending on when characters entered each gravity zone, Dreg would sometimes end up behind, and sometimes in front of the other character. My solution was to have each character placed in his or her own container sprite, which was added to the level in the order of my choosing, and when a character entered a new gravity zone, the container sprite's coordinates would be set to those of the new zone. That made so much sense I feel all nice and warm inside.

I also had to sort out a system to allow punches and kicks to register through a gravity rift...

I'm increasingly starting to embrace what I used to consider bad practice - that is to say, coding within a MovieClip's timeline. But that's exactly what I'm doing with all the fighting animation - the variable which defines the next move in a combo, as well as the function which does a collision test when Dreg punches, are all done within the timeline. I think it makes sense, seeing as these actions are all dependent on Dreg's current frame (it only checks for collision at the frame that Dreg's arm reaches out the furthest, for example...). It might come back to bite me in the bum when I get confused about where a certain variable is being set, but I'm hoping it'll all be fine!

</ geekology >

Anyway, hopefully the next installment should be more graphically pleasing...

Wednesday, August 5, 2009

Garish jodericity

Arrow keys for movement, spacebar to jump. Use arrow keys while swinging to increase his spin. Hold down spacebar to make the jump last longer. Hit spacebar again when holding on to a wall to wall jump. Click on the game to start interacting with it

Yup, I've done it. It's jodersome.

You all thought I was slacking off, didn't you? You thought I was just playing loads of GTA4 and looking at internet porn. Though I did do some of those things, I actually spent a lot of my time slaving away, finding out just how awfully orange and purple clash.

So now we have a background! The level is just the same. I fixed a few ongoing bugs: the swinging is broken in my previous post for some reason, and as always, collision detection issues, of which I am sure there are many more. It's just the beginning - I want to add plenty more details, such as cracks in the walls, hanging washing, benches etc. I'm hoping these details should help indicate which way the gravity is going each time. And look cool.

Here's how the foremost part of the background looks:

Watch out, time to geekify! Though I'm talking about geeky things, I'm also trying to use something approaching layman's language. If you feel brave enough, you can try to follow. It really isn't all that difficult and I've provided lots of useful links (wikipedia).

< geekicity >

As everybody and their mum knows, flash graphics (as in, the ones you create within flash) are vector based. Flash is also happy to deal with bitmaps. Now I know you all know the relative advantages and disadvantages of vector graphics and bitmaps, but here's a reminder...

Vector graphics:

advantages: they take up very little memory, seeing as they only consist of a series of instructions on how to draw something (curves and points etc.). You could make a vector graphic that's more memory intensive than a bitmap, but that would be dumb. Also, vector graphics have no resolution, you can scale them up all you want and they're still crisp.

disadvantages: Seeing as vector graphics are being redrawn every frame (hence their crispness), this does demand a hell of a lot from the processor. Slower computers would not be able to cope with large, complex vector graphics moving and rotating all over the place.


er... pretty much the opposite of vector graphics - they take up a lot of memory, but they're quick to draw.

So for the backgrounds, I didn't want them to be bitmaps because something that big would make the file unacceptably large (and slow to download). But with vector graphics older computers would have a hard time.

By the way, my computer is my benchmark. It's a two-year-old macbook (one of the first white ones). Not too shabby, but not all that amazing either, and what with macs never having dealt that well with flash, I feel it's a sensible benchmark. If your machine is slower, well, poo!

So what have I done? Well the Actionscript aficionados among you will know that the bitmapdata class has a function called draw which will take a display object as its argument and create bitmap data from that.

So for everyone I just lost in that previous paragraph, there's a way that I can take my memory-efficient vector graphics and convert them into processor-efficient bitmaps. Wonderful, no? This means I can continue adding details to the backgrounds with relatively little impact on application size and performance. This is awesome, in case you hadn't realised.

</ geekicity >

So now you can see what Dreg's world might look like. The reason I spent so long on all this was to see how long it would take to create these backgrounds, as well as have an idea what they would look like. I haven't strayed too far from the look of the comic and film. It's allowed me to establish a work-flow and make sure it was possible to do more or less what I had in mind.

So though the acrobatics still aren't finished, nor are the background details, I feel it's time to attack the next big challenge - combat. This means animation, other characters, and AI. Urgh... I expect I'll be happily spending a lot of time just drawing more objects for the background before I'm ready to face such a daunting challenge...

Saturday, August 1, 2009

Dreg's wonderful adventure playground

Arrow keys for movement, spacebar to jump. Use arrow keys while swinging to increase his spin. Hold down spacebar to make the jump last longer. Hit spacebar again when holding on to a wall to wall jump. Click on the game to start interacting with it

Hello! And welcome to yet more tweakage.

Amidst the adulation, praise and sexual offers of you, my multitudinous fans, a couple of hesitant words of constructive criticism have emerged.

For example, several people have whinged about wall jumping being too tricky. I don't know, in my day we stuck to these things until we got them right. I still can't reliably pull off a wall jump in Metroid Prime, but hey, this is a flash game, so I have to pander to people with a very tenuous grasp on their motor skills.

A good friend of mine suggested people might be pressing jump again before Dreg has reached the wall (the fools!) so I should have Dreg jump off the wall so long as the jump key was pressed very close to the point that Dreg hit the wall. Fair enough, I guess, so I did that.

I've also noticed several of my female colleagues moan about how difficult the pole jumping is. So I've also made that more flexible. Again, I realised a lot of them were pressing space bar too early, so I just made that acceptable. Look at me, pandering to the masses.

I also made it so Dreg doesn't go crazy with the letting and go and the grabbing of poles. Now he just falls off.

As for the camera being slower, opinion has been mixed. Some love it, some get confused and cry. So I've gone for a slightly faster camera, but I still want Dreg to sometimes appear almost upside down on the screen, just to confuse my fans. Yeah!

There have also been lots of other tweaks, mostly to collision detection, which will forever be a headache. The horrendous mess that is my "level-editor" is slowly starting to become usable, and as a result I've created an adventure playground for you all to test out the new and improved mechanics. Are you able to access all areas? There'll be plenty of wall and pole jumping for you to do. Enjoy!

Level editing is pretty fun, and has the added benefit of being possible to do while drunk (in fact, it might help). For the curious among you, here's what the level looks like:

I like the sketchy look of it, don't you?

Anyway, the next thing I want to do is draw. Lots of drawing - I want to make the background. There'll be a minimal bit of programming, but mostly just lots of clicks of the mouse, which should make a nice change.

My problem is that seeing as this is already incredibly awesome, I don't know what word I'll have at my disposal once I upload a version with funk backgrounds and what not. The English language has no word to encapsulate just how... well good it's going to be. So I'll have to invent a new one. What do you think of jodersome?