- 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: Enemies
First, create a new object layer in Tiled (Layer... Add Object Layer) and call it EnemyEntities. Then add a new object (no new tileset required) to the map, and right click to name it EnemyEntity. Here is the tricky part. You can be more precise in declaring the X and Y positions of the baddie, but you can also specify width and height. With all these numbers, the assumption is made to multiply by 16, which means that for any whole integer value of X and Y, the enemy will be placed on your grid. The height should be set to 1 assuming your bad guy is 16-pixels tall. The cool part is that when you set the width, you are not indicating the width of sprite, but rather, the horizontal area that the enemy can walk back and forth.
Next, you need to add your enemy to the entity pool in main.js, as shown in Listing 5.19. This can directly follow your CoinEntity code.
Listing 5.19. Adding the EnemyEntity to the entityPool
me.entityPool.add("coin", CoinEntity);
me.entityPool.add("EnemyEntity", EnemyEntity);
Then add the badGuy to the resources.js file, as shown in Listing 5.20. Again, remember to watch your commas.
Listing 5.20. Adding the badGuy Image to resources.js
{ name: "badGuy",
type: "image",
src: "badGuy.png"
}
By now, you might have guessed that you need to define EnemyEntity in entities.js. This is a fairly complex entity, but the overall structure of the code should be starting to look familiar at this point. One big change is that you are defining some of the properties (settings) for the EnemyEntity object directly in melonJS (Listing 5.21) instead of Tiled. Also notice how the path is indicated with the settings.width. The last important thing to notice is that you now have a new Game Over condition for when Guy touches the bad guy. The code in Listing 5.21 can go at the end of the entities.js file.
Listing 5.21. Creating the EnemyEntity
var EnemyEntity = me.ObjectEntity.extend({
init: function(x, y, settings) {
settings.image = "badguy";
settings.spritewidth = 16;
this.parent(x, y, settings);
this.startX = x;
this.endX = x + settings.width - settings.spritewidth;
this.pos.x = this.endX;
this.walkLeft = true;
this.setVelocity(2);
this.collidable = true;
},
onCollision: function(res, obj) {
obj.gameOver();
},
update: function() {
if (!this.visible){
return false;
}
if (this.alive) {
if (this.walkLeft && this.pos.x <= this.startX) {
this.walkLeft = false;
}
else if (!this.walkLeft && this.pos.x >= this.endX){
this.walkLeft = true;
}
this.doWalk(this.walkLeft);
}
else { this.vel.x = 0; }
this.updateMovement();
if (this.vel.x!=0 || this.vel.y!=0) {
this.parent(this);
return true;
}
return false;
}
});
Guy has a lot to deal with now, and if you were cruel and created a lava and bad guy-filled wasteland for a map, he could be having a rough time. Let’s make sure Guy can still get the upper hand.