Hundreds of light years (now don’t ask me what is a light year, all I know it is same as a regular year, but with less calories!) away from the galaxy there lived a super intelligent species with big eyes & green naked (or wearing some sort of green bio-mechanical suit!) skin called extrachlorophylletron in the planet discotin, they have been found rarely in the sky of earth traveling around with their domed ship (rocket guys call it an UFO!).

Well, since the first episode we have tested the moving clouds animation using jQuery Spritely plugin 0.6 and in this sequel we are interested to have sprite or flying object in that sky. Also, earlier we used Spritely’s pan() feature to animate the clouds and here we will experiment sprite animation using sprite() feature, behold! an alien ship is headed towards the earth.

Figure: Alien ship in the sky

Sprites! (Sounds like Coke & Sprite?)

Before get our hands into sprite animation, we’ve played video games like Mario in the Super Mario, fighters in the Street Fighters or say, in movie, like fire breathing Balrog in the “The Lord of The Rings” and there are object(s) flying or moving around the game canvas, those are generally sprites. A Sprite composed with several images of an object together, played sequentially to animate an action and you may add certain controls to them.

So in our tutorial, we will design a flying alien ship (the sprite) with spinning at left or right behavior with sequence of frames like below:

Figure: frames for spinning to left/right

At the above figure, the first row (1) contains three (3) frames (each object at the above figure represents each frame of 180×180) for the spin towards right. In each next frame of the first row, we created white dashed marks on the dark green disk-shaped body and placed/moved them towards more right side, changed the position of the three rounded landers by few pixels to give a shaky feel. And the bottom row (2) contains three (3) frames for the spin towards left.

Checkout the spin direction diagram and a tap/click in the screen attracts the ship to that point with the same spin:

Figure: spin & flight direction diagram

Lets build the following scenarios (you must go through the first episode of this tutorial to understand the rest):

Scenario: We need a Ship in the sky with a green Alien inside (a pilot!).

Add the following CSS class for the “.alien-ship”:

.alien-ship {
    background: transparent url(img/sprit-space-ship.png) 0 0 no-repeat;
    position: absolute;
    top: 150px;
    left: 65px;
    width: 180px;
    height: 180px;
    z-index: 2000;
    cursor: pointer;
}

You can see that, the class is of 180×180, so the following DIV with the class “alien-ship” will display single frame of the ship as background of it. Spritely shows the frames serially by changing background position of the DIV.

<div id=" alien-ship " class=" alien-ship "></div>

Figure: the Ship

Scenario: The ship needs a spin.

Lets, invoke Spritely’s sprite() feature on the alien-ship DIV like below:

$(document).ready(function() {

     $('#alien-ship').sprite({ fps: 9, no_of_frames: 3 });

});

The above code will position the background frame, 9 frames per second using the given 3.

Scenario: The ship will fly within an area randomly.

Like the following code, using spRandom() method, we can define the boundary of the random movement.

$('#alien-ship')

    .sprite({ fps: 9, no_of_frames: 3 })

    .spRandom({top: 50, bottom: 200, left: 300, right: 320});

Scenario: Fly the ship at the Tap location (cool for touch works!).

To make the mouse attract the sprite when you click/tap the screen, use this:

$('#alien-ship')

    .sprite({ fps: 9, no_of_frames: 3 })

    .spRandom({top: 50, bottom: 200, left: 300, right: 320})

    .activeOnClick()

    .active();

$('body').flyToTap();

The active() method makes this sprite the active sprite on launch – otherwise a sprite with activeOnClick() becomes active only when you click it (or touch it using an iPhone/iPad).

The $(‘body’).flyToTap() method watches for a click on the page at which point, after any current move is complete, the sprite moves to the clicked location. After a few second, if a random movement method has been applied (see spRandom()), it then moves away again.

Scenario: Spin the ship into both directions.

The following method displays frames from the first row (Spin right):

$('#alien-ship').spState(1);

The following method displays frames from the second row (Spin left):

$('#alien-ship').spState(2);

Here, state 1 and 2 are row numbers and may add another row for another movement sequence.

Scenario: Controls in hand.

Check out the demo & source codes given at download section.

(If any extrachlorophylletrons reading this, advance sorry from a human for any misrepresentation of your funkiness)