HTML 5 Games with Lime JS, Part 4: Custom UI Classes

Lime JS, through Google Closure, provides an ability to define an inheritance structure, which doesn’t natively exist in JavaScript.  A sample JavaScript class may look like the following:

goog.provide(‘my.class’);

goog.require(‘lime.Sprite’);

my.class = function( /* ctor params */) {
lime.Sprite.call(this);
. . .
}

goog.inherits(my.class, lime.Sprite);

At the beginning of the class defines a provide statement, defining the name of the entity about to be created.  This is for Google Closure.  The require method defines related dependencies that are injected, as managed by Google Closure and not managed here.

The my.class statement defines the constructor of the class, defining any parameters needed at that time.  The first line makes a call to the base constructor; call(this) invokes the base type constructor.  The last line, goog.inherits, defines the inheritance structure, and structures it in a way that the methods of lime.Sprite can be called directly from within my.class (something that’s not always available in other inheritance frameworks).

In our sample demo game that we’ve been building, the letter that the user clicks on.

test.piece = function(letter, r, c, callback) {
goog.base(this);

this.letter = letter;
this.r = r;
this.c = c;

this.label = new lime.Label()
.setText(letter.letter)
.setSize(40,40)
.setFontSize(30);
this.appendChild(this.label);

.
.

}

Within the constructor of the piece, we are setting up fields on the piece itself to store the letter, row, and column.  We also construct the user interface by creating new primitive controls, setting their values, and appending the controls to the parent.  We could construct our own layers for this, if you need to, but I opted not to do that here.  Note that from a positioning perspective, if you were to use setPosition, it would be relative from the current location of the sprite; a position of 20,20 would be an offset of the current sprite, not a position defined on the root layer.

We can also append methods to a class by appending them to the prototype.  This appends methods to the signature of the class, not to a specific class instance.  Note that we can work with instances of objects within the prototype methods.  The label we setup in the constructor above can be modified here.

test.piece.prototype.highlight = function() {
  this.label.setFontColor(“blue”).setFontWeight(“bold”);
  this.isHighlighted = true;
};

test.piece.prototype.reset = function() {
  this.label.setFontColor(“black”).setFontWeight(“normal”);
  this.isHighlighted = false;
  this.isSelected = false;
};

If you are used to creating objects in JavaScript, this shouldn’t be foreign to you as a lot of class development in JavaScript is implemented this way.  Right after the constructor, we have one final step to add; we need to establish the inheritance hierarchy by specifying test.piece inherits from lime.Sprite as so:

goog.inherits(test.piece, lime.Sprite);

And there you have it, we have our own custom sprite class!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s