- Getting Started with melon.js
- Recipe: Creating a Tiled Map
- Recipe: Starting the Game
- Recipe: Adding a Character
- Recipe: Building a Collision Map
- Recipe: Walking and Jumping
- Recipe: Title Screen
- Recipe: Adding Collectables
- Recipe: Enemies
- Recipe: Powerups
- Recipe: Losing, Winning, and Information
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Adding a Character
Let’s bring a character into the game. We’ll call him Guy. He’s the one who will be doing the adventuring. First, you need to use Tiled again to set a starting position. To do this, you need to add an object layer. Go to Layer, Add Object Layer. In the Layers pane on the right side (if for some reason you can’t see your layers, go to View... Layers), and rename this object layer player. Also, as you did before, by following the Map... Add Tileset instructions, add the player.png image with the tileset name player.
You can place Guy somewhere safe-looking near the ground. To do this, click the insert object icon (see Figure 5.5) or press O and then click somewhere on the map to place him. Note that unlike the foreground sprites, you won’t actually see him. Then, right-click the gray box that has been added, and select Object Properties... You need to fill out the Name field with player. You also need to set two new properties in the bottom of the box. They should be named image and spritewidth, with values of player and 16, respectively (see Figure 5.6).
){kind=link}
Figure 5.5. The add object button
)
Figure 5.6. The player object
If you tried to load your game now, you wouldn’t have much luck. You still have a bit of work to properly integrate Guy into his new world. First, you need to add his image to your array in resources.js with the code in Listing 5.5. Remember to watch your commas.
Listing 5.5. Adding Your Player to resources.js
{
name: "player",
type: "image",
src: "player.png"
}
Next, add him to the melonJS entity pool in the loaded function of main.js with the code in Listing 5.6.
Listing 5.6. Adding Your Player to the Entity Pool of main.js
me.entityPool.add("player", PlayerEntity);
You also need to create the last file you’ll use for this tutorial, entities.js. With game development, it is common to refer to important objects as entities. Sometimes, these are enemies, the player, or projectiles. Unlike in traditional object-oriented programming, an entity-based system is typically supported by a less strict hierarchy. This paradigm can take a bit of getting used to, and we’ll explore it more in Chapter 10, “RTS.” It’s a good start just to think of entities as being composed of logical units that describe properties such as their movement capabilities and what happens when they hit each other. In addition, it is worth considering that these are not just objects “in the code,” but also objects “in the game.” So if you say “the player entity,” you are referring both to the lines of code representing the player and the notion of a “thing” that exists in the game world.
You need to add entities.js to your index.html file near all the other included JavaScript files with the code in Listing 5.7.
Listing 5.7. Loading the entities.js File in index.html
<script type="text/javascript" src="entities.js"></script>
The code in Listing 5.8 is fairly straightforward. You create the entities.js file, initialize a PlayerEntity variable that inherits from ObjectEntity, and set the viewport to follow the character around. Next, set an update function to handle updating the animation when the player moves.
Listing 5.8. Adding the PlayerEntity Object
var PlayerEntity = me.ObjectEntity.extend({
init: function(x, y, settings) {
this.parent(x, y, settings);
me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
},
update: function() {
this.updateMovement();
if (this.vel.x!=0 || this.vel.y!=0) {
this.parent(this);
return true;
}
return false;
}
});
If you load the game now, you’ll see something encouraging for us but fairly drastic for our hero. He starts in the position we set him to in Tiled (great), but he then immediately falls off the screen. What’s going on? We never created any solid ground for him to stand on.