Archive for the ‘Javascript’ Category

Github game off 2012 post-mortem

Wednesday, December 19th, 2012
The Moonening

Level 2

Github’s game off is over and the winners have been announced. Unfortunately my game, The Moonening, didn’t place. Sad face. The whole process was fun and I know what went well and what went wrong, which gives me a good idea of what to do next…

What went wrong

Animation & Events

My canvas framework, bang, doesn’t yet support animations like sprites, so I experimented a little with the way I would represent the characters. I did this by creating a base Sprite object that takes an image path and a list of rectangles, one for each frame of the animation. This essentially limits a sprite to having one animation. I then created another object called Toon that is a collection of Sprites. The character objects can show certain animations by specifying a Sprite in the Toon, and a frame in the Sprite. This ended up being problematic once I wanted to use certain frames for other animations, or trigger events after an animation played.

Events were handled by Action objects that bind an object to an event handler. I liked this pattern, but often I wanted an Action to trigger other actions, wait for those, then finish doing something else. This didn’t work correctly because half of the Actions ended the current turn so triggering them meant that the turn is over and now other Actions will soon be triggering. I’ll fix this in the future by making all async game actions use callbacks.

Sound

Sound is almost non-existent. My friend Jimmy wrote three kick ass songs but I could only include one and the game has no sound effects.

Gameplay

The user controls some number of astronauts in a turn-based puzzler. This seemed really cool at first but once the player is controlling more than one astronaut it can be quite confusing. I like it, but I’m biased. The next version will probably not be turn based but will instead see the user playing a group of astros all at once, using some sort of flocking algorithm in a more action-adventure (zelda style) setup.

What went right

Editor & Levels

Even though ONLY ONE PLAYER found the level editor, which is mentioned in the readme and linked on the main page, it was the best part of the game. The most fun I had during the jam was sitting around at my friend Bryce’s house drinking beers making levels (and bug fixes). That and listening to Jimmy’s songs. The way you can create a level, save it as an image in your browser’s local storage and then navigate to the game page to play said level was in my opinion pretty novel. But alas – I guess I didn’t stress it enough on the main page. A link was not enough.

Moonening Level Editor

Level editor.

Art & Music

My roommate Alex Whitehurst helped with the art and I think it looks great. He drew the faces of the astronaut, the blob animations and the crate. He also did a bunch more, but I couldn’t program as fast as he can draw. The art gives the game a cute feel and I’d like to go further down that road.

The music was created by my friend Jimmy Barry and is awesome. I wish I had enough time to include his other songs. He has a rad soundcloud that you should visit.

Another friend, Evan Johnsen, created some tile art but unfortunately like Jimmy’s songs I didn’t have time to code them into the game. The next round will see additions from all three.

Purity

Every part of the game code was written by hand by myself. There was no external code. The entire game consisted of a module loader, a display list system, an event system and animations, with an audio tag thrown in for good measure. It was a lot of work, but I enjoy knowing a little bit about every step in the process, even if I didn’t place in the comp!

Conclusion

All in all it was a great experience and it all ends just in time to continue working on the game for Mozilla’s 2013 Game On. So be expecting updates!

Moonening Mentions

Friday, December 14th, 2012

Here I’m going to collect mentionings of The Moonening from around the net as a sort of pre-post-mortem. If that makes any sense ;P

Bloggy Badger - “astronaut-splitting, blob-merging puzzles. too short. a bit buggy.”
HN comments on that post

Entries Viewer - no quote…

The github game off 2012 winners! - no mention, though I’d like to keep this for posterity.

Github Game Jam 2012

Thursday, November 8th, 2012

I’ve started on my entry for github’s first game jam! My game is called “The Moonining” and this is the pre-mortem.

Moonening

The astronaut approaches.

It’s a turn based, top-down, sci-fi-horror-comedy adventure. Whew. I’ve got three weeks to write the code, draw sprites and get it all bundled up (playable). I’ll be posting details on the tech involved and progress reports as I go along. My roomy Alex Whitehurst is helping with the sprites. He’s already made some awesome character faces for the astronaut and some nice spaceship map tiles. My good friend James Barry will be doing the music and sound effects and has so far finished the title screen music. This is going to be a fun project.

Bang Pre-Alpha

Saturday, May 12th, 2012

I have a new ongoing project, it’s called Bang. It’s a canvas-tag based display list written in Javascript. I’m going to be using it in place of AS3/Flash in my web authoring tool chain. Bang on Github. There are three main elements of Bang that make it special:

Modules

When writing a project with Bang you keep your code separated in modules. Each module exposes a Javascript Object, like a constructor function. The modules object is passed into each module definition, exposing your module to other modules that depend on it. Keeping your code in modules like this means you need only expose one global variable, the list of modules. Any modules loaded this way are essentially sandboxed in that modules object.
You define a module in a similar manner to RequireJS and the AMD:

mod({
name : 'MyObject',
dependencies : [ 'bang::Geometry/Rectangle.js', 'myLib::SomeFile.js' ],
init : function initMyObject(modules) {
function MyObject() {
this.x = 0;
this.y = 0;
}
MyObject.prototype = {};
MyObject.prototype.constructor = MyObject;
return MyObject;
}
});

The module system is another project of mine called Mod. I’ve written about it before. It’s very small and simple and it gets the job done (the job of code separation and later compilation).
Bang adds support for Google’s Closure Compiler to Mod, so once your project is ready to ship you can compile (in a sense), compress, obfuscate and pack your code down into a deployable script or a neato mosquito PNG. I like the PNG method because it’s slightly more obfuscated and adds further sandboxing, but that’s a topic for a later post.

It’s like Flash, but not too much like Flash…

Bang is enough like Flash/AS3 to be familiar, but sacrifices some AS3 similarities in exchange for simplicity and consistency. The complexity in Bang is very small. There aren’t any tricks to make it more Flash-like than it has to be and it won’t protect you from learning canvas operations. In fact, you’ll have to learn about the CanvasRenderingContext2D to do any real drawing. I’m not aliasing those calls and hiding it in a mock Graphics object for you! ;) And you should be learning these new technologies without crutches. Think of Bang not as a set of crutches, but as a set of wings, or at least a hammer and chisel. No one likes masonry-by-hand.

It is fast.

The original pre-alpha version of Bang takes Douglas Crockford‘s extremism literally. There are no uses of the keywords ‘this’ or ‘new’. It accomplishes (multiple) inheritance through special constructor functions that add functions and closures to objects (or creates new ones). This, although a departure from AS3 at first, actually gives projects written in Bang an AS3++ feel. Multiple inheritance is awesome. Private variables are awesome. With prototypal inheritance you lose private variables so by using special constructor functions we can create private variables through closures. These features are awesome, but as Martin Hunt of GameClosure pointed out to me, it’s not fast. Processing time will go up linearly with the number of properties and methods created in the class. This means that if you’re creating a lot of complex game objects every frame tick, the project will likely start chugging. This is not fast. Apps have to be fast! For this reason I started a new branch of Bang that uses traditional prototypal inheritance. This branch will include a dirty rectangles implementation for really lazy redrawing, and I have plans for using WebGL for rendering down the line. Stay tuned!

A tiny demo

Take a look at the source for this div. This is the compiled output of the main branch of Bang. It’s clean, right?!




mod – A javascript module definition and loading tool.

Wednesday, January 18th, 2012

Now that I’ve been writing a lot less Actionscript and a lot more Javascript I’ve found that I often need a system for separating my code out into modules. Javascript doesn’t provide a convenient way to load scripts and define modules so I wrote a tool I call ‘mod‘ that uses either XMLHTTPRequests or script tag injection to load scripts.

mod uses initialization objects to define modules. A module object takes a name, an init function and optionally an array of dependencies (paths to other scripts you’d like to load before initializing the current module). You can also supply an optional callback to execute after the module has been initialized. Both init() and callback() are passed an object that contains all the initialized modules thus far.

Defining a module looks like this:

mod({
    name : 'Main',
    dependencies : [
        'anotherModule.js'
    ],
    init : function initMain(modules) {
        // we can access anotherModule because mod.js
        // loads and initializes dependencies in order
        var anotherModule = modules.anotherModule;
        return {
            someValue : anotherModule.someFunction(),
            functionToExpose : anotherModule.someFunctionToExpose
        };
    },
    callback : function cbMain(modules) {
        // we can access Main because callback() is not called
        // until after Main's init()
        var Main = modules.Main;
        window.exposedFunction = Main.functionToExpose;
    }
});

In this first call mod packages your module initialization object and starts loading its dependencies (either through XMLHttpRequest or script tag injection). Once the dependencies are loaded (which may or may not define more modules and load more scripts), the result of the init function is stored in mod.modules, in this case as mod.modules.Main. The loaded modules are exposed to your init and callback functions as the only parameter, so they don’t clutter global space. As an added benefit, you can share data between modules using mod.modules.

If you use mod to write lots of modules (like I do when working on a big project), mod can ‘compile’ your project for you, removing all script loading. It essentially takes all your init and callback functions, wraps them inside an island closure and prints them to one monolithic file which you can then compress with YUI or a google ‘something-or-other’.
To do this, load your project in your browser, open the js console and type mod.printCompilation(). Alternatively, to store in a string, type var compilation = mod.compile();.

Blender 2.5 object export to Javascript for WebGL

Wednesday, September 8th, 2010

I’ve written a small python script to export a blender object to javascript for use with WebGL (or whatever else you might be running 3d in). It currently copies the entire file output to the clipboard, and only works on mac, but stick around for a write-to-file cross platform version shortly. You can get the script at my github.
blender 2.5 to javascript


Follow me on GitHub
Follow me on Google+
Follow me on Twitter