My latest game has just gone live! It’s a fast paced platform puzzler created for Cartoon Network’s Ben 10 Series. Kerb produced all of the graphics and animations and they got me in to do the programming.
You can play the game here. Enjoy!
I have a library of code that I use across all of the projects that I work on. I also work across several computers so I thought that it would be handy to have my library in a subversion repository so that I can update and synchronise my library from anywhere. After checking out a few options I signed up with Springloops. They offer a free service with 100MB storage and up to three projects. This is perfect for personal use and so far it’s been working really well. That’s a recommendation from me then!
This is a repost from an old blog I used to have. I’ve cleaned up the code a bit but the idea remains the same.
Conway’s Game of Life is an example of a cellular automaton. It is based on a square grid of cells who live or die depending on now many live neighbouring cells they have. The obvious way to code this would be to have a two-dimensional array storing the state of each cell and then going through each cell to calculate its new state.
Ugh, boring.
It would be much more fun to use a convolution filter to determine if a cell should live or die. Convolution filters take an array of values (called a kernel) which it treats as a two-dimensional grid whose values determine the colour of a pixel based on the pixels around it. All that’s needed after that is a palette map to set the variously coloured pixels to their correct alive or dead colours.
Certain starting shapes produce very complex outcomes when the rules are repeatedly applied to the grid. When you click on any of the running demos, a shape called “the Acorn” will be drawn at the mouse position and the state of the grid will be updated every frame.
The actionscript source code for this first example is at the end of the post. Click on the image to play the demo of Conway’s Game of Life:
This is a more refined version where dead pixels are cycled through a palette of decay colours:
This is a happy accident I ended up with when I was working out the fastest way of applying the palette of decay colours
Actionscript source code for the first example is available below:
More…
Here’s a code snippet that takes a textfield and checks to see if its text is too long to fit in the textfield. If it is, it truncates the text and adds an ellipsis (that’s three dots to you) to indicate that the text has been truncated.
function truncateText(textField:TextField):void { var text:String = textField.text; while (textField.maxScrollV > textField.scrollV) { text = text.substring(0, text.length - 1); textField.text = text + "..."; } }
Following on from my last post, it occurred to me that there were a couple of problems with plain metaballs using BlendMode.ADD. Firstly circles are boring. What about having energy fields around other shapes? Secondly, although displaying metaballs using BlendMode.ADD doesn’t actually give you data about the perimeter of the blob.
In this example, I’m still using BlendMode.ADD to display the metaballs but this time I’m drawing the gradient field around a blob that is modelled by a ring of nodes connected by springs. This is similar to the way I created the Flash version of Loco Roco.
The edge of the blob is smoothed by using the node points as control handles in calls to graphics.drawCurve() and the anchor points as determined by calculating the mean between adjacent nodes. The gradient field is drawn by repeating the calls to drawCurve() and changing the line thickness to build up a gradient line.
What I ended up with is a really blobby simulation as each metaball is springing around instead of being a fixed circular shape. I also have access to a set of points which describe the edge of the blob so I could use this for collision detection or even having blobs join together into larger blobs if they get close enough.
This example also has interaction – you can grab the blobs and throw them around! Of course all this extra functionality comes at a price so the demo is quite processor intensive. The biggest bottleneck comes from having to draw each individual blob to a bitmap before applying a palette map and then drawing it again to a composite bitmap with blendMode.ADD.
Rather than building up the gradient field using the drawing API, it is also possible to use a blur or convolution filter which would have the same effect of decreasing the value of the pixels as they get further away from the edge of the source blob.
Click on the image to play with some metablobs
Metaballs are organic looking blobs and are often used to model fluid drops as they join together and pull apart. Usually a metaball is described as a source point with a field around it. As the field moves away from the point, the energy of the field diminishes. When you have several metaballs together, the energy at any given point is simply the sum of all the energies of the metaballs in the system at that point.
The edge of a metaball is linking together areas of the same energy, much like the contours on a map. It is these contours that give the metaball its distinctive blobbiness.
Here’s a quick example of what I’m talking about. Click on the image to watch the metaballs in action.
Click on the image to watch some metaballs in action
There are lots of methods for modelling metaballs in two dimensions. One of the best I’ve come across is this one which uses a very efficient method for determining the edge of the metaball and then tracing around that edge to define the shape.
An even faster method for displaying metaballs can be achieved by using BlendMode.ADD which does all the adding up of the energy fields for us. If you represent the energy field as a circular gradient starting with blue in the centre (0xFF) and going out to black at the perimeter (0×00) any pixel’s value in that circle will describe the energy of the field at that point. By overlaying these gradient circles with BlendMode.ADD, the blend mode sums the values of each pixel and displays the sum of energies at that point. All that’s let to do is apply a palette map to convert the blue energy field to something prettier.
The source code for the example is after the click. There are two classes, one controlling the simulation and the other describing each ball.
I haven’t had a look at the WCK project for quite a while so I thought I’d better check it out again today. I can’t believe how far it’s come on since I first came across it!
The World Construction Kit comprises a load of helper classes for working with and extending Box2D and some jsfl scripts for defining complex polygons. There’s also a copy of the C++ version of Box2D that has been compiled with Alchemy so it can be used with Actionscript. This should be significantly faster than the native Actionscript version which is a bonus.
There are far too many goodies to list them all here but one of the stand-out features to me is the inclusion of elliptical objects and elliptical segments. The maths behind the collision detection of ellipses is pretty hairy stuff so it’s really impressive to see this running in Flash.
Here’s the demo that comes with the source. You can download the source code and demo files from GitHub.
Click on the image to play with the WCK Demo
I can’t wait to have a play around with this. Hopefully it will integrate nicely with Boris the Brave’s Box2DWith library which has an invaluable xml parser for constructing Box2D simulations.
I’m so glad that there are people way cleverer than me working hard to make my life easier. Hats of to you, Jesses and BoristheBrave!
Edit: How could I forget to mention Erin Catto, the originator of Box2D? Erin, I salute you sir!
I’ve been using Box2DFlash for quite a few years now. One thing I have always done is set the gravity for the world without thinking about it too much. If I need things to fall down in a game then gravity has got to be the answer. When I made games with shooting in them, I started to have problems. It’s easy to make a small object in Box2D that acts as a bullet but if gravity is applied to the bullet it stops going in a straight line when you fire it out of a gun and curves down to the ground instead.
Of course this is perfectly accurate and is what happens in the real world but in games you tend to want bullets to go in a straight line. There are two ways round this problem:
The first is to turn gravity off completely. Any objects that do need to have gravity applied to them can have a downward force applied during each step that you update the Box2D model. This is great if you’ve just got a few objects that need to react to gravity and most of the rest of the game is static. This line of code applies GRAVITY to the body where the constant GRAVITY is a predefined b2Vec2 vector
const GRAVITY = new b2Vec2(0, 9.81); myBody.ApplyForce(GRAVITY, myBody.GetPosition());
The second method is useful when most things need to react to gravity. You can ‘turn off’ gravity on certain objects by applying a force in the opposite direction to the objects that shouldn’t react to gravity. It’s the same code as above but with the direction of the gravity vector changed:
const ANTI_GRAVITY = new b2Vec2(0, -9.81); myBody.ApplyForce(ANTI_GRAVITY, myBody.GetPosition());
When I started using Box2D, I tended to take the way it worked as something you didn’t touch. It just did it’s simulation and that was what you were stuck with. Nowadays I’m far more inclined to hack into the way it works with these kind of tricks. I also love controlling the way objects jump up and fall down to give them a more responsive feel by directly altering their velocities according to what state they are in. The true physics model is no longer sacred for me 
Apart from being an apt description of my life, the title of this blog comes from the classic Nuggets band “The Daily Flash”. I love 60’s garage and psychedelic bands so the title seemed like a perfect fit. I’ve only ever heard one track by the Daily Flash – “Jack of Diamonds” but my partner Rona used to have their 80s reissue compilation “I Flash Daily”.
I love the strapline on the back cover: “Give us this day our daily flash”!
As a strange twist of fate, Glasgow label Luminous Music is re-releasing I Flash Daily this year. Small world, eh?
Like half of the rest of the blogging world, I’m using Wordpress to power this blog. All Flash content is displayed using the Shadowbox JS plugin which I’d highly recommend. It’s an elegant way to avoid having too many swfs running on the same page which can be a real drain on the processor.
One of the key plugins I needed was one to format and display source code properly. I tested every syntax highlighting plugin that I could get my hands on and quickly came to two conclusions.
Firstly, I preferred the code to be displayed within <pre> tags. This seemed to be the best way to preserve the formatting of my source code. I didn’t want to spend ages prettifying source code for my blog – a simple cut & paste from my IDE was all I wanted to do. Putting the source code between <pre> tags also means I don’t have to worry about special characters getting messed up when rendered as html.
Secondly I needed a syntax highlighter that could handle Actionscript. Like Javascript, Actionscript is based on the ECMA standard so at a push I could have used a syntax highlighter that worked with Javascript. I quickly found out the most syntax highlighter plugins were using GeSHi at their core which not only supports Actionscript but just about every other programming language known to man (OK, no Piet, but when the source code for the canonical “Hello World” application looks like this, you can’t be too suprised!)
This is the source code for displaying “Hello World” in Piet. Hmmmm.
The syntax highlighter plugin I eventually settled on was WP-Syntax and with a bit of tweaking I got my source code looking almost identical to my IDE of choice, Flex Builder.
If you have the excellent monospace font “Consolas” installed, that’s what the code will be displayed in. Since discovering Consolas, I can’t believe I spent years looking at screens of code displayed in Courier New. Ugh.
Finally, I used the free “Clean Minimal” theme from Theme Lab which I tweaked a bit but what you see is 90-something percent how it looked out of the box! The only annoyance was that Theme Lab hadn’t included a call to wp_head() in header.php so the plugins weren’t being initialised. Adding the line
<?php wp_head(); ?>
between the <head></head> tags solved that problem but it took me a while to work out why the plugins weren’t working.