29a.ch

Entries tagged “gamedev”

fuckNaN(), seriously

I generally like dynamic languages and in generally don't run into much trouble with them. Having that said, I hate the way undefined and NaN work in Javascript.

Zombie in Blue

This turns a simple typo into a NaN apocalypse. After half of your numbers have turned into NaNs it's hard to find out where they came from.

var o = {y: 0},
#NaN
1/o;
#NaN
var x = 1/o.x;
#NaN
var y = x*10;

Setting up traps

So how do you catch stray NaNs? You set up traps. Because it can become very tedious and error prone to have asserts everywhere I wrote a little helper, fuckNaN().

function fuckNaN(obj, name){
    var key = '__' + name;
    obj.__defineGetter__(name, function(){
        return this[key];
    });
    obj.__defineSetter__(name, function(v) {
        // you can also check for isFinite() in here if you'd like to
        if(typeof v !== 'number' || isNaN(v)){
            throw new TypeError(name + ' isNaN');
        }
        this[key] = v;
    });
}

// Examples
var o = {x: 0};
fuckNaN(o, 'x');
// throws TypeError: x isNaN
o.x = 1/undefined;

// Also works with prototypes
function O(){
    this.x = 0;
}
fuckNaN(O.prototype, 'x');
var o = new O();

// throws TypeError: x isNaN
o.x = 1/undefined;

Place some of those traps during debug mode in critical locations like your Vector and Matrix classes and they will bring doom and destruction to those NaNs..

Note: This doesn't work in IE<=8 and you shouldn't use it in production. Use it as a tool during development to make your code fail early.

A new html5 game space break



Play it now

Space Break

Space Break is a html5 acrade 'ball and paddle' game written in coffee-script. It features levels full of explosives, extra balls and even nukes. I hope you will enjoy it.

History

Space Break started out as coffee-break - a little project I did to get into coffee script. Because it turned out to be a lot of fun I decided to turn it into a complete game.

Technology

Space Break uses the canvas tag for rendering. The sound effects were created using csound and played using the audio tag. The graphics were made using the gimp and blender. Rake is used for controlling the asset pipeline. All the assets of the game (music, sounds, graphics) are self made - programmer art.

Browsers

Firefox 4 (3.6 kind of works), Chrome 9 and Safari (no ogg - no audio) work. Opera is crashy. Mobile safari on the iPad also works but the frame rate is low. Could be fixed with a bit of optimization.

Source and License

The code and assets are of course on github.

The Sourcecode (break.coffee, Rakefile) is licensed under the GPL V3.

The assets are licensed as Creative Commons BY NC SA

PLEASE LET ME KNOW IF YOU DO SOMETHING COOL WITH IT.

If the licensing doesn't work for you, please let me know.

Feedback

Feedback, both positive and negative is of course appreciated. Just leave me a comment, tweet or send me a email.

JS WARS as mobile html5 game

It's been well over a year since I first released JS WARS. I was playing with the idea of having a version that runs on mobile devices for quite a while now, but until recently the technology was not advanced enough to easily do it. With the release of iOS 4.2 there is a platform that is fast enough and has all the features that are needed to run JS WARS - So I did it.

Getting it

You can try JS WARS mobile under the following URL: http://29a.ch/jswarsmobile/.

Tested devices

  • iPhone 4g with iOS 4.2
  • iPad with iOS 4.2

Please report your success with other devices in the comments. If you don't have a device that can run it, you can still play the normal version.

Controls

You can control your ship with the joystick on the top left. Push and hold the laser button on the top right to fire your laser canon (infinite ammo). The second button allows you to fire missiles/nukes when you have any (ammo is limited).

Technology used

and now for some buzzwords...

I'm actually quite impressed by the canvas performance of the tested devices, is this now hardware accelerated?

What's currently (2.2) wrong with Android

Until recently the canvas implementation of the android browser was pretty much unusable due to problems with the pixel density (1 css pixel -> 4 physical pixels). Those problems are solved now, and thanks to the jit the browser is fast enough to support JS WARS as well (faster than mobile safari it seems). The two things that are still missing hovever are multitouch and a way to treat a website like an app. I find it a bit confusing that iOS seems to be more friendly to webapps than android and I really hope the great engineers at google will catch up. Maybe 2.3 will do the trick already. I'll try it out as soon as there is an official release for the Nexus one (or I can get my hands on a Nexus S...).

Graphics

All the graphics in JS WARS were made by myself using open source software (gimp and blender). I have released a part of them under a creative commons license for you to reuse.

Source code

I will not publish the JS WARS mobile source code because it's a mess and I don't intend to clean it up nor do I want to be responsible if you permanently loose your sight because of it. I do however plan to write an article about the associated challenges that will include relevant code.
So if you haven't done so already subscribe to my news feed or follow me on twitter.

Chrome and Safari don't cache html5 audio

Chrome and Safari seem to ignore the http cache headers for html5 audio files. When you are programming a game that can be fatal. First it delays the playback, second you get at least one http request per play(). So what can you do? Write a html5 Cache Manifest!

Also at least chrome seems to have a limit on the number of <audio> elements that can be created. You notice the problem when you call play() on an audio file and nothing happens anymore. My solution to this was to create a pool for audio elements for reuse.

With those two techniques I'm now able recreate the sound of a gatling gun by playing individual bullet shots, yay!

2D Light/Shadow Effects Algorithm

I played around with 2d lighting for a game I'm working on. I'll probably post how it's done once it's a bit refined (and quicker!). It's currently written in C and running on the CPU. I'm looking for a way to do it using glsl though.

Author

Jonas Wagner Jonas Wagner
Software Engineer
Zürich, Switzerland

More about me

Follow 29a_ch on Twitter

Experiments

screenshot screenshot screenshot screenshot

More Experiments

Latest Posts Tags Archive Links

guitarmasterclass.net (guitar lessons)