Creating frog jump game in HTML5 using CreateJS: 04 Adding more game elements

In the previous chapter we added background on stage. There are still few elements yet to add. Floating leafs on river water, a frog on a leaf and an insect on each leaf. So let get start adding elements.

Topics Covered

Sprite sheet and Sprite sheet data

A sprite sheet is an image which contains many images in single file. Sprite sheets are generally connected to data file which specifies the region of each image. A sprite sheet can be used to create images, images sequence or sprite animation. See the sprite sheets below for insects’ images and frog animation sequence.

Insect sprite sheet

Frog animation sprite sheet

In the insects sprite sheet there are 6 insects I placed and in frog sprite sheet the frog seating position and jump position. To get the insect images from the specific region I have created a variable and stored the data in the variable.
See the data format with data for both sprite sheets.

In the sprite sheet data, the images property is an array which holds image or images which will be used. The frames property holds array or simple object of each frame. The array holds several arrays and one for each image to hold the image x, y, width and height data. Animation property is an object which contains animation object for sprite or its animation.

There are several ways to create sprits sheet and the data for it. You may use Texture packer, Photoshop or Adobe Animate to create sprite sheet.

Creating Insects array

Once you have the sprite sheet data, you can create spritesheet object by passing the data new spritesheet object.

Now create the sprite from spitesheet object and push the sprites into insects array which we have defined on top of the code already.

As we already know there are only 6 sprites in sprite sheet, so push all 6 insect sprites using loop and and set sprite frame position respectively.

The complete function will look like this.

And add the create function in init() function below the buildGameBackground() function.

Adding leafs and insects on stage

Before add the leafs and insects on the stage here first we need to create a container in which we can contain the insect over the leaf. So get the leaf texture first to create leafs inside the loop.

Now inside the loop create container object and contain leaf sprite and add insect one by one which we have already created and add the container to stage.

Instead of writing code to add insect into leaf container make the separate function for it. The purpose of writing separate function to add insect to reuse it again and that we will see in later chapter.

Now add the addLeafsAndInsects() function into init() function same as above section.

Adding frog on the stage

Now we have placed all leafs on river. Now it’s time to place our main character, which is Frog. Create a frog sprite object from frog spritesheet and set its frame 0 or set animation as “seating”, then add the frog sprite on the stage. See the code below.

Frog is added but not at the correct place. Yes, should be on one of the leaf. So set the position of the frog on the leaf which is middle of the screen vertically between 200 to 400 pixels.

First find out the leaf which current y position is between 200 to 400, then define frog sprite custom property named onTheLeaf and set leaf index to property, which we will refer into game loop to update frog position and rotation with that leaf.

Once frog position get setup we have remove insect on leaf as we are collecting insect by jumping on leaf. To remove insect I have created separate function to reuse later in game.

Add the both functions in init() function.

Now run the code to see the result.

Insect is removed, but where is my frog gone. Well…. Frog is there, but not synced with leaf x and y position and rotation. So what is next… ? We need game loop. So let’s create a game loop in the next chapter.

Download Source Files
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *