006 : Digging out the player

Why is the player drawn below the platform?

Because we start drawing from the upper left corner, and the rectangle hangs down and to the right.

To properly display the player, you need to subtract the height.

So, I can just subtract 20 more from y?

You could do that, and it would certainly appear to fix the problem, but what we really want is to be able to specify the player location relative to the bottom (since that's the part that sits on the platform).

And you can do that by defining an origin for the player. As a default, you can just use the middle of the bottom of the player.

So origin_x is half of the player width and origin_y is the full height of the player.

script.js: Initialize the player's origin based on the player width and height.

function init_player() { ... _player.width = 20; _player.height = 20; _player.origin_x = _player.width / 2; _player.origin_y = _player.height; _player.velocity_x = 0; _player.velocity_y = 0; }

Run your code in a browser and verify that there are no errors.

And now that origin can be used to calculate the upper-left corner when we need to draw the player. You simply subtract off the origin when drawing.

script.js: Update draw_player() to use the player origin.

function draw_player(ctx) { ctx.fillStyle = "blue"; ctx.fillRect(_player.x, _player.y, _player.width, _player.height); ctx.fillRect(_player.x - _player.origin_x, _player.y - _player.origin_y, _player.width, _player.height); }

Run your code in a browser and verify that there are no errors.

Since the player's horizontal origin is now the center, you'll probably want to adjust the initial x position (otherwise the player will be halfway off the screen). The player doesn't have to be exactly at the left edge, so we can just add something like 20.

That sounds like more work than just subtracting the player height.

Yes, but later on you're going to want to change the size of the player and you're going to be happy you made this change.

I hope so.

script.js: Adjust the player's starting x-position.

function init_player() { _player.x = 0; _player.x = 20; _player.y = 360; ... }

Run your code in a browser and verify that there are no errors.

If you run your code now, you'll find the player resting on the platform.

Congratulations! You've earned the Sprite I - Origin badge!

GOTO 007 if you want to experiment with changing the player width and height

GOTO 008