Chris McCormick

There's something about sarien.net that really floats my boat. Maybe it's the 8 bit goodness, or maybe it's the multiplayer twist, or maybe it's the crazy technology they're using. Whatever it is, I think sarien.net is awesome.

I love that they use the term DHTML rather than any of the fancy new monikers which Javascript + markup have take on in recent years.

Prototyping is a great way of making games. You make lots of small, quick prototypes, and iterate on them to "find the fun". Scripting languages like Python and Lua are really useful in this process and there are lots of nice libraries like Pygame to assist in the process.

It would be cool to be able to include players in the prototyping loop so that your game ideas can be tried out infront of an audience and get feedback early in the process. The democratisation of game design, I guess.

I've been thinking about this a lot lately, especially as I've been going through the frustrating process of trying to get my recent gamejam entry to work under Windows. It's a pygame based game which should port trivially, but it's still a fair bit of hair-tearing work. It's not much fun to have to do such a huge amount of laborious work just to get your game ideas infront of people so that they can play them, and tell you what they think.

To this end I've been working on the Javascript game library which I wrote about earlier. Recently my efforts have been in separating it from the processingjs library into a standalone system which will run on all the major browsers. Firefox, Safari, IE6, IE7 are currently tested and working.

Hopefully you'll be seeing more links like this on here in future:

.:[ circles demo ]:.

Download a zipfile of the source of the JSGameSoup library here:

http://mccormick.cx/dev/blogref/jsgamesoup-30.zip

Or check out a branch with bzr:

bzr branch http://mccormick.cx/dev/jsgamesoup/

Patches welcome!

[ ]  dorkbotlondon #61
/|\  The summer season of dork is here
/ \

When:
   7pm, 4th June 2009
Where:
   The boxing club, Limehouse town hall, E14 7HA
   For directions and instructions for getting in to the building go here:
   http://dorkbotlondon.org/event/dorkbotlondon61/

Featuring presentations from the well-combed and frisky...

* RJDJ  - Chris McCormick
  (Pure data on the iphone)

* sketchPatch - Davide Della Casa
  (an online programming playground based on Processing, somewhere to
  experiment with code, reuse and collaborate on existing code, share
  and learn)

* Orbiter - an interactive sound environment - Vera-Maria Glahn & Marcus Wendt
  (Process of an interactive installation using generative sound and
  visuals and stereo motion tracking - from idea to play)

Plus!  Opendorks.  If you'd like to give a 7 minute ad-hoc
presentation about something then drop us a mail or let us know on the
night.  Or if you'd like to give a longer presentation drop us a mail
and we'll schedule you for a future dork.

http://dorkbotlondon.org/event/dorkbotlondon61/

I've been experimenting with the Javascript port of processing by John Resig and it seems like it could be quite good for rapidly prototyping games on the web. One of the great things about it is that it doesn't require any plugins or proprietary technologies like Flash, relying instead on the canvas element. There are some awesome demos of it in action on the website. I made a little fork which is optimised for the task of writing object oriented game code, which you can see in action below. Try clicking on the spinning asteroids.

My fork implements a basic mainloop into which you can inject new game entities with the function addEntity(); and a bunch of convenience methods which you can implement to draw your entities, or capture events like mouse clicks. As per processingjs, you can use processing's Java style syntax, or Javascript syntax instead. Here's the source to the above example:

size(400, 225);

function Asteroid(radius, x, y) {
    // variables
    this.x = x || random(0, width);
    this.y = y || random(0, height);
    this.angle = random(0, PI);
    this.radius = radius || 40;
    // velocities
    this.angleV = random(-0.1, 0.1);
    this.xV = random(-0.5, 0.5);
    this.yV = random(-0.5, 0.5);
    // structure of this shape
    this.points = [];
    this.randomPoint = function() {
        return random(-this.radius/2, this.radius/2);
    }
    for (i=0; i<round(this.radius / 5); i++)
        this.points.push([this.radius * Math.sin(i * PI / round(this.radius / 10)) + this.randomPoint(),
            this.radius * Math.cos(i * PI / round(this.radius / 10)) + this.randomPoint()]);
    this.poly = [];

    this.collisionPoly = function() {
        return this.poly;
    }

    this.mouseDown = function() {
        if (this.radius > 25) {
            addEntity(new Asteroid(this.radius / 3 * 2, this.x + this.randomPoint(), this.y + this.randomPoint()));
            addEntity(new Asteroid(this.radius / 3 * 2, this.x + this.randomPoint(), this.y + this.randomPoint()));
        }
        delEntity(this);
    }

    this.update = function() {
        // update all our state variables
        this.angle += this.angleV;
        this.x = (this.x + this.xV + width) % width;
        this.y = (this.y + this.yV + height) % height;
        // update our shape definition
        for (n=0; n<this.points.length; n++) {
            this.poly[n] = [this.points[n][0] * cos(this.angle) - this.points[n][1] * sin(this.angle) + this.x,
                this.points[n][0] * sin(this.angle) + this.points[n][1] * cos(this.angle) + this.y];
        }
    }

    this.draw = function() {
        stroke(255);
        noFill();
        beginShape();
        for (n=0; n<this.poly.length; n++) {
            vertex(this.poly[n][0], this.poly[n][1]);
        }
        endShape(CLOSE);
    }
}

addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());
addEntity(new Asteroid());

I you want to check out all of the code, including my modified version of processingjs, I've put my bzr repository online and you can get it like this:

bzr co http://mccormick.cx/dev/gameprocjs/

Or you can click here to download a zipfile of the source.

The main thing to be aware of is that any object added with addentity() should have an update() method, which will get called once per game loop to update your object's state, and a draw() method where you should put the code to draw your object. Other useful methods which you can implement include mouseDown() and mouseUp(), both of which require that you provide a method called collisionPoly() which returns a list of points that define a collision polygon for your game entity. Later I hope to add my Javascript recursive dimensional clustering implementation which will make it really simple to detect in-game collisions and will also require a method called getBoundingBox() which will make the collision detection and mouse-click-detection much more efficient.

Anyway, if you're interested in using this I'd love to hear from you!