Chris McCormick

I did a little bit more work on the Javascript games library that I've been working on recently, adding rudimentary collision detection. It needs quite a bit more work, but I'm getting there slowly. That allowed me to put shooting into the little asteroids-like game that I'm using to test the framework. Click on the image to play.

I've also been doing a bit of work on the documentation of jsGameSoup so that other people can start using it more effectively. I got jsDoc running, producing documentation from the comments in the code. I need to get that documentation online and make a nice little mini-site like the great flixel one at some stage. I've also started documenting reasons why a game developer might like to use jsGameSoup:

• If you make a game for the web, it will run everywhere, for everyone. Desktops, netbooks, games consoles, hand-held devices "...giving developers the largest user base of any platform."
• jsGameSoup runs on the major current generation browser engines, including Internet Explorer, Firefox (gecko), and Safari (WebKit).
• jsGameSoup relies on open standards and protocols, which means it runs in the lowest-common-demoninator places where proprietary technologies won't run.
• jsGameSoup is Free Software, which means that the users and developers (that's you) will have control over its future, unlike proprietary technologies such as Flash and Silverlight.

Here are some of the things that are not yet supported by jsGameSoup, but which I am looking to support soon:

• Documentation - I've started on this, but I need to get it online with lots of demos and examples.
• Bitmap graphics - The canvas element is the basis of jsGameSoup and it supports bitmap graphics, but I haven't tested how it performs yet on all of the browsers.
• Collision detection - I have implemented very naive bruteforce collision detection. I need to implement the more complex collision detection system I have in mind in order for it to scale up to games with more entities.
• Sprite/Animation - I'd like to add vector and bitmap sprite management and animation to jsGameSoup to make it easier to draw and manage on-screen entities.
• Networking - I will probably make a separate Javascript library with a Python based server for plugging into jsGamesoup to write multiplayer games with it. I have written a couple of Python based game/web servers before, so I have some idea of a good architecture for that.
• Inheritance - I am thinking about adding John Resig's Simple Javascript Inheritance to the library to make it easier to code in an object oriented style. Maybe this is best left as an optional plugin though.

Taking all that into account, you can see from the AsteroidsTNG demo that you can make basic 2d games using jsGameSoup already, and they will run in the major browsers.

jsGameSoup is LGPLv3 and AsteroidsTNG is GPLv3. Here is their source code:

jsgamesoup-46.zip

or bazaar:

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

AsteroidsTNG-41.zip

or bazaar:

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

This weekend, in between watching Captain Picard versus Gandalf and having a birthday drink, I somehow managed to find some time to work on my web based games library, currently tentatively named 'JSGameSoup'. Click through the image to try out a little demo which uses it:

This demo doesn't do that much except let you fly around, but you can see where it's leading, and what the library is basically capable of. The idea is to make a Free Software game development environment which can be trivially deployed to web browsers and portable devices like Android, Nintendo DS, etc. I want to keep it completely free of proprietary technologies so that people don't have to rely on Flash, for example, to develop games for the web and beyond. I am pretty excited with how things are going. So far it seems to work well and speedily with the three majority rendering engines; Gecko, IE, and that KHTML fork that some company started. In other words, the demo runs with acceptible quality and speed on the majority of operating systems in the majority of browsers, with no fiddly tweaking - Hooray! \o/

Even though I've only just started doing it, I am really liking this new way of making and releasing games and game libraries, where I get to release them right here on this blog to you, the three people who read it. :) I really need to set up comments here as well, so I can actually get some feedback on the releases (but please feel free to email me). I think the fact that making games feels fun again, is a very good sign that I'm on the right track.

Anyway, as usual, here is the source code:

jsgamesoup-39.zip

or if you are a bazaar user:

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

AsteroidsTNG-40.zip

or the repo:

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

JSGameSoup is LGPLv3 and AsteroidsTNG is GPLv3.

The code of the Asteroids themselves is quite similar to what I posted before, except that it uses canvas commands now, instead of processingjs commands to draw. Here's the code that drives the ship:

function Ship(world) {
    this.world = world;
    this.world.player = this;
    this.x = gs.width / 2;
    this.y = gs.height / 2;
    this.angle = 0;
    this.speed = 0;
    this.points = [[0, -13], [-7, 7], [7, 7]];
    this.poly = [];
    this.lastsmoke = null;

    this.keyHeld_37 = this.keyDown_37 = function () {
        this.angle -= 0.1;
    }

    this.keyHeld_39 = this.keyDown_39 = function () {
        this.angle += 0.1;
    }

    this.keyDown_38 = function () {
        this.speed = 1;
    }

    this.keyHeld_38 = function () {
        if (this.speed < 3.0)
            this.speed += 0.3;
    }

    this.keyDown = function (keyCode) {
        //console.log(keyCode);
    }

    this.update = function() {
        if (this.speed > 0.1)
            this.speed -= 0.1;
        else
            this.speed = 0;
        this.x = (this.x + this.speed * Math.sin(this.angle) + gs.width) % gs.width;
        this.y = (this.y - this.speed * Math.cos(this.angle) + gs.height) % gs.height;
        for (n=0; n<this.points.length; n++) {
            this.poly[n] = [this.points[n][0] * Math.cos(this.angle) - this.points[n][1] * Math.sin(this.angle) + this.x, this.points[n][0] * Math.sin(this.angle) + this.points[n][1] * Math.cos(this.angle) + this.y];
        }
        if (this.speed && (!gs.inEntities(this.lastsmoke) || gs.distance([this.lastsmoke.x, this.lastsmoke.y], [this.x, this.y]) > 15)) {
            this.lastsmoke = new Smoke(this.x - 9 * Math.sin(this.angle), this.y + 9 * Math.cos(this.angle));
            gs.addEntity(this.lastsmoke);
        }
    }

    this.draw = function(c) {
        c.strokeStyle = 'rgba(255, 255, 255, 1.0)';
        gs.polygon(this.poly);
    }
}

And here is the object/class defining the little smoke particles which come out of the ship:

function Smoke(x, y) {
    this.x = x;
    this.y = y;
    this.life = 1.0;

    this.draw = function(c) {
        c.strokeStyle = 'rgba(200, 200, 200, ' + this.life + ')';
        c.beginPath();
        c.arc(this.x, this.y, 2, 0, Math.PI*2, true);
        c.closePath();
        c.stroke();
    }

    this.update = function() {
        this.life -= 0.08;
        if (this.life < 0)
        {
            gs.delEntity(this);
            this.life = 0.01;
        }
    }
}

The whole game is launched like this, where gs is the JSGameSoup() object that is automatically created by the framework:

w = new World();
gs.addEntity(w);
gs.addEntity(new Ship(w));
for (n=0; n<3; n++) {
    gs.addEntity(new Asteroid(w));
}

To me this code feels like it does quite a lot for just a little bit of work, and that's always nice.

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/