121 : Monster bitaps
Balthazar:
Now do the same thing for monsters
Balthazar:
Create the images/monsters directory.
Create the following directory in your project:
- images/monsters
Balthazar:
Copy 2 monster images into your monster directory: vlad.png and henrietta.png.
vlad.png
henrietta.png
Copy the following files into your project:
- images/monsters/vlad.png
- images/monsters/henrietta.png
function init_game() {
...
_game.imagedir = "images/";
_game.imagedir_player = _game.imagedir + "player/";
_game.imagedir_monsters = _game.imagedir + "monsters/";
...
}
_game.imagedir_monsters = _game.imagedir + "monsters/";
...
}
Balthazar:
And now we need to specify which image to use for each monster.
function init_level1() {
...
var monster_data = [
[350, 360, 20, 20, 60, 470, -1.0],
[350, 360, 20, 24, 60, 470, -1.0, "vlad"],
[400, 360, 20, 20, 60, 470, 0.8],
[400, 360, 30, 30, 60, 470, 0.8, "henrietta"],
];
add_monsters(level, monster_data);
...
}
[350, 360, 20, 20, 60, 470, -1.0],
[350, 360, 20, 24, 60, 470, -1.0, "vlad"],
[400, 360, 20, 20, 60, 470, 0.8],
[400, 360, 30, 30, 60, 470, 0.8, "henrietta"],
];
add_monsters(level, monster_data);
...
}
Balthazar:
don't forget to update the width and height of each monster. vlad is 20x24 and henrietta is 30x30
// monster_data: [x, y, width, height, min_x, max_x, move_x]
// monster_data: [x, y, width, height, min_x, max_x, move_x, image]
function add_monsters(level, monster_data) {
for (var i = 0; i < monster_data.length; i++) {
var m = monster_data[i];
var monst = create_monster(m[0], m[1], m[2], m[3], m[4], m[5], m[6]);
var monst = create_monster(m[0], m[1], m[2], m[3], m[4], m[5], m[6], m[7]);
level.monsters.push(monst);
}
}
Balthazar:
and finally create_monster() needs to be updated
function create_monster(x, y, width, height, min_x, max_x, move_x) {
function create_monster(x, y, width, height, min_x, max_x, move_x, image) {
var m = {};
m.x = x;
m.y = y;
m.width = width;
m.height = height;
m.origin_x = m.width / 2;
m.origin_y = m.height;
m.min_x = min_x;
m.max_x = max_x;
m.move_x = move_x;
m.img = new Image();
m.img.src = _game.imagedir_monsters + image + ".png";
return m;
}
function draw_monsters(ctx) {
var level = _levels[_game.current_level];
var monsters = level.monsters;
for (var i = 0; i < monsters.length; i++) {
var m = monsters[i];
ctx.fillStyle = "#800000";
ctx.fillRect(m.x - m.origin_x, m.y - m.origin_y, m.width, m.height);
ctx.drawImage(m.img, m.x - m.origin_x, m.y - m.origin_y);
}
}
ctx.fillStyle = "#800000";
ctx.fillRect(m.x - m.origin_x, m.y - m.origin_y, m.width, m.height);
ctx.drawImage(m.img, m.x - m.origin_x, m.y - m.origin_y);
}
}
Balthazar:
Now you have monsters!
You:
yay!
You:
But they're still walking backwards.
Balthazar:
Yes, yes, yes. We'll fix that now.
Congratulations! You've earned the Sprite II - Image badge!
GOTO 122 if you already have the Treasure II - Finish badge.