This time I’ve prepared an interactive demo of new features for you. Guess the hottest addition is borderImage which is a first step for making a GUI library

Read more at canvasquery.com

This time I’ve prepared an interactive demo of new features for you. Guess the hottest addition is borderImage which is a first step for making a GUI library Read more...

This is based on my experience gained while porting anitroubles to
IOS/Android.

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

This is based on my experience gained while porting anitroubles to IOS/Android. Why CocoonJS? Phonegap is uncomparably slow. Ejecta is IOS only. Haven’t tried Titanium SDK. I can’t afford mobile...

Don’t overcomplicate things – in most cases all you need are mixins with some variations.

[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();
  }
}

Don’t overcomplicate things – in most cases all you need are mixins with some variations. [inlineadh] 1. Manipulator I just made up this name. It consists of universal methods that...

I will start to write down the ideas and discoveries before I forget.

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

I will start to write down the ideas and discoveries before I forget. 1) Porting HTML5 game to: IOS, Android, Linux, Windows, Firefox OS 2) What to care about when...

How is it different from other tools of this kind?

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

How is it different from other tools of this kind? Most of them have no consistent brushes. Theirs philosophy is rather like – “look how many useless brushes I can...