HTML 5 Games with Lime JS, Part 3: Animation

Lime JS is not without the added bells and whistles that make the framework great. Lime JS is complete with various types of animations. From their own web site (referenced here), Lime JS has the following animations:

  • MoveBy – move object by offset from current location.
  • MoveTo – move object to specific location.
  • ScaleBy – scale objects dimensions by a factor. Passing 2 makes object 2 times bigger from its current size.
  • ScaleTo – scale objects dimensions to a given factor.
  • RotateBy – rotate object by a given angle
  • RotateTo – rotate object to a specific angle
  • ColorTo – change objects color from current color to another.
  • FadeTo – fade elements opacity to a given value.

Each of these objects is instantiated in the following manner:

lime.animation.MoveBy()

Where several of the animation attributes are supplied to the constructor.   Each animation is different, and will require different parameters.  The sample effect I was trying to achieve was to fade an element out and back in quickly.  Using the following code, I defined the fade out and in as:

var fadeToAnim = new lime.animation.FadeTo(.5).setDuration(.1);
var fadeBackAnim = new lime.animation.FadeTo(1).setDuration(.1);

You have to think about how fast you want the animation.  Because this is animating letter pieces that the user selects, it needs to be fast.  I chose .1 because it’s very fast with minimal interruption to the user (as of current testing, but may change when played competitively).  To run an animation, get a reference to a lime object, and call runAction.

In order to know when the first animation stopped, we need to attach an event handler to the stop event, defined by a constant, and perform the respective actions.  When the fadeToAnim animation stopped, it triggered the fadeBackAnim animation, then run some additional code after that.

var el = //some element;

this.runAction(fadeToAnim);

goog.events.listen(fadeBackAnim, lime.animation.Event.STOP, function() {

});
goog.events.listen(fadeToAnim, lime.animation.Event.STOP, function() {
el.runAction(fadeBackAnim);
});

All in all, the animation I chose wasn’t the best option for my particular needs.  What I wanted was an animation that ran when two letters were clicked on.  The user chooses the first letter, then selects a second, and the two swap spaces.  The animation that runs this is the MoveTo animation, which moves an object from one space to the other.  The animation uses the following code:

var pPos = piece.getPosition();
var cPos = compare.getPosition();

var pMove = new lime.animation.MoveTo(cPos.x, cPos.y)
.setDuration(.3).enableOptimizations();

var cMove = new lime.animation.MoveTo(pPos.x, pPos.y)
.setDuration(.3).enableOptimizations();

piece.runAction(pMove);
compare.runAction(cMove);

Objects in lime have a getPosition method, which returns the position of the element.  Using this position, the animation calculates the new position of the element, and moves it within a duration of .3 seconds.  Since the action should happen at the same time, we do not need to layer the animation using callbacks; they can run at the same time.

You can see the current progress of this game using the following URL; this test page is hosted on Brinkster.com, a capable host that offers free ASP.NET hosting for personal use:  http://bmains.brinkster.net/lettergame/lettergamephase1.html

Advertisements

One thought on “HTML 5 Games with Lime JS, Part 3: Animation

  1. I don’t know if it’s just me or if perhaps everyone else encountering issues
    with your blog. It appears as if some of the
    text within your content are running off the screen.

    Can somebody else please provide feedback and let me
    know if this is happening to them as well?

    This may be a problem with my internet browser because I’ve had this happen previously. Many thanks

    Like

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