It is HTML5

The full version is coming to IOS/Android using CocoonJS
Windows/OSX/Linux – If I manage to port it using node-webkit

Heroine Dusk

HTML5 dungeon crawler by clintbellanger and yubatake

I encourage you to look at the game source if it is still unobfuscated. Procedural programming at its best – haven’t expected that it can be so clean and readable.

Brilliant assets, lovely graphics and … this music – it really compares to the one of the best theme songs ever created.

Ludum Dare #26 Highlights

My totally non objective picks for the best browser based games on LD26. There are a lot of entries with awesome assets – but I am posting only these which also have immersive GAMEplay

Gods will be watching

Hell yes they will. Great psychological portraits of characters. Really easy to identify with the main character. Awesome point-and-clickish graphics.

Unfurl

Deserves more comments – one of the most interesting and polished games on this LD.

Budget Squad

Great atmosphere, super polished – I don’t like the gameplay(!!!) but it has so much potential that I hope the author will work something out of this.

Tech stuff

Verlet.js

Verlet.js – implementation of verlet physics in javascript. Not super useful thing, but I bet a great designer can come up with something interesting.

Phaser by PhotonStorm

Phaser – blossoming gamedev library – I hate frameworks and stuff – what makes it different then?

• It is made by people who are in gamedev for more than a decade – meaning – the solutions are responses to real problems not some made up stuff.
• It is not a framework. It is a bunch of solutions which you can use separately with no fixed code architecture.
• It is not a student project. A lot of prominent gamedev personas are involved.
• Very little of abstraction – no lousy attempts to bring clike inheritance into js – (god please punish them who try to fix what is not broken)

Javascript Dubstep Generator

mazbox/synths/dubstep/ – still better than dubstep produced by some djs.

Hope I will find time to write some followups as the game has been quite warmly welcomed by the dev community.

Click the image:

Here it is

Also available on

Mozilla Marketplace

Bonus – work in progress title for the next version:

Read more at canvasquery.com

Why CocoonJS?

Phonegap is uncomparably slow. Ejecta is IOS only. Haven’t tried Titanium SDK.

I can’t afford mobile device

Q: How to develop IOS/Android app for free?
A: It is impossible.

However a bunch of thoughts on that:

• Android emulator: you would need a google supercomputer to fluently run this software. Don’t even try the one bundled with SDK. You can give a try to x86 port – however it still requires fast VM to work + I failed to configure the network.
• Ripple Emulator: great tool from BlackBerry – it won’t simulate an IOS device, but it is a nice playground with features like touch events, accelerometer and orientation change. Also has ability to run cordova/phoengap libs if you are going to write an app rather than a game.
• BrowserStack – not free but kinda cheap.
• Consider buying new phone number/internet which is offered with a tablet (thanks @llamapixel)
• If you are Windows user – this might be useful – Electric Mobile Studio

CocoonJS pitfalls

Here is the Hello World. The documentation and knowledge sources are really inconsistent and scattered so below are some traps you might fall into (as I did):

• It has DOM elements only essential for gamedevelopment. Which means the only element you can use for view is Canvas. If you prefer making the games with jQuery/css – first of you are doing it wrong – second – try phonegap.
• All the elements has to be created via javascript at runtime (html will be ignored)

  var screenCanvas = document.createElement("Canvas");
  document.body.appendChild(screenCanvas);

• The screen is adjusted to the first created canvas element. this is uber !important if you are doing some pre-rendering using canvas element before initializing the view
• CocoonJS is so fast because it uses OpenGL to render the stuff – however if you are not familiar with it you would never guess that – texture size dimensions has to be power of two – examples: 32×32, 64×64, 128×128, 256×256 and so on – or enjoy the artifacts – and there is no emphasis on that in documentation.

Other platforms

Firefox OS

It is really easy to get your thing working on FirefoxOs + you can test it without any compatible device using simulator plugin.

Linux / OSX / Windows

Try Tide SDK – You can easily create desktop application using variety of web technologies like javascript, ruby, php, css, html5. I think you could even try to hit Valve’s Steam with a decent game.

I will update this article according to my further experience

[inlineadh]

1. Manipulator

I just made up this name. It consists of universal methods that can be applied to any other object in order to manipulate its properties.

/* physics - constructor manipulator */

var Physics = function(object) {
  object.v = [0, 0];
  object.forces = [ ];
  object.x = 0;
  object.y = 0;
};

_.extend(Physics, {
  
  addForce: function(object, x, y) { 
    object.forces.push([x, y]);
  }, 

  stop: function(object) { 
    object.forces = [ ];
  },
 
  step: function(object, delta) { ... }

});

Ok, now some object that will use these physics superpowers.

var Soldier = function(args) {
  Physics(this);
};

Soldier.prototype = {
  step: function(delta) {
    Physics.step(this, delta)

    /* some other behaviours for the soldier,
       for example - self healing with no limits*/

    this.hp++;
  },

  jump: function() {
    Physics.addForce(this, 0, -100);
  }
};

If you don’t like passing the object each time you may prefer apply/call approach instead:

var Physics = function() {

  /* note that there is no `object` anymore */
  this.x = 0;
  this.y = 0;
};

var Soldier = function() {
  Physics.apply(this, arguments);
};

We used apply to pass “this” context to a certain Physics method.

Live example

2. Extending the prototype

Like in the previous example we have constructor manipulator – but then we extend an object’s prototype – so we can call new methods directly using “this.method”

var Sprite = function(object) {
  object.spriteAnimation = null;
  object.spriteFrame = null;  
};

_.extend(Sprite, {

  /* I am prefixing every property to
   * decrease a chance for naming conflicts */
  spriteStep: function() { ... },
  spriteSetAnimation: function() { ... },
  render: function(ctx) { ... }
});

var Enemy = function() {
  Sprite(this);
};

Enemy.prototype = {
  changeStance: function(stance) {
    this.stance = stance;
    this.spriteSetAnimation("enemy-" + stance);
  },

  render: function(ctx) {
    this.spriteRender(ctx);
  }
};

_.extend(Enemy.prototype, Sprite);

Simple inheritance

You don’t really need magical javascript `class` systems for it.

/* base `class` for all controls, components, widgets or how do you call them */
function GuiComponent() {
  this.border = "2px solid #000000";
  this.foreground = "#444444";
  this.background = "#fafafa";
};

GuiComponent.prototype = {
  redraw: function() { },
  onMouseDown: function() { ... }
};

/* simple button */

function GuiButton() {

  /* call the base contructor */
  GuiComponent.apply(this, arugments);
}

GuiButton.prototype = {
  redraw: function() {

    /* draw the button in its own specific way */
  },

  onMouseDown: function() {
    
    /* call the mouse down from the base */
    GuiComponent.prototype.onMouseDown.apply(arguments);

    /* then do some other - button specific stuff */
  }
};

You might actually want to copy all the properties that are not defined from the base `class`.

function inherit(object, parent) {
  for(var key in parent) {
    if(!object.hasOwnProperty(key)) {
      object[key] = parent[key];
    }
  }
};

inherit(GuiButton.prototype, GuiComponent.prototype);

Be creative – you can easily forge your own `class` system that suits your needs using this approach. You can even add this parent thing if you miss it so much and don’t really need composition (you will be inheriting only from one object):

GuiButton.prototype = {
  parent: GuiComponent,
  redraw: function() {
   
    /* omg so simple */
    this.parent.redraw();
  }
}

General routine for loading resources in javascript goes like that:

var image = new Image;
image.onload = function() { /* some onReady callback */ };
image.src = "nude-princess-peach.png";

But for WebFonts there is no corresponding object which makes it kind of difficult – especially when you want to write pure canvas app (for example compatible with CocoonJS)

The solution

First of – in chrome – using context.fillText with not-yet-loaded font-face – will execute properly – but with absolutely no visual result. So the basic idea is to set a timer which will be calling a drawing function until something actually appears on canvas. Detect the change. That’s it :)

As for firefox – if the font is not yet loaded it will fall back to default one which is “10px sans-serif” now to detect the change we just need to check if after assignment the font is still “10px sans-serif”.

The implementation

live example

There are many ways to detect that change – I will use cq.trim() but you can easily write any other method from scratch.

So basically – if I call a trim method on an empty image – it will not be trimmed at all – ergo – its dimensions will stay intact.

Code

I like to keep the same routine as in image or audio – so I am going to create object representing a font.

var WebFont = function(fontName) {

  /* create some canvas that will be used to check
     if the font has been loaded */

  var placeholder = cq(64, 64);

  /* setup check timer */

  var timer = setInterval(function() {    

    /* save previous height */

    var previousHeight = placeholder.canvas.height;

    /* try to draw some text */

    placeholder.clear().font("32px " + fontName).fillText("test", 32, 32).trim();

    /* check for changes */

    if((window.mozIndexedDB && placeholder.context.font !== "10px sans-serif") || (!window.mozIndexedDB && placeholder.canvas.height !== previousHeight)) {
    
      /* eventually run ready callback and clear the timer */

      this.onload();
      clearInterval(timer);
    }
    
  }, 500);
}

Usage

example css:

@import url(http://fonts.googleapis.com/css?family=Kavoon);

example js:

var font = new WebFont("Kavoon");
font.onload = function() { alert("Font has been loaded"); }

live example

I am using this method in my WIP simploader.js see example usage here

1) Porting HTML5 game to: IOS, Android, Linux, Windows, Firefox OS
2) What to care about when working with CocoonJS
3) How to write a font-face loader (I think this would be the first one)
4) How to rescue bricked iPad using linux + windows on Virtual Box
5) How to properly write a game/application that fits to screen – including window resize and orientation change
6) How to emulate bitmap fonts and retro title screens using font-faces and canvas
7) Some tutorials demonstrating touch events in Canvas Query microframework

Most of them have no consistent brushes. Theirs philosophy is rather like – “look how many useless brushes I can implement”.

So I have decided to pick just a few which looks sketchy – there is save and share so you know – go nuts and let it spread :)

Haiku Sketchbook