Help with scales?

[estudillod]

So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following:

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);

My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this:

 // Here we create the ground.
    var ground = platforms.create(0, game.world.height - 64, 'ground');

Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks!

 

Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background?

tutorial.html

part9.html

[in mono]

Scaling a sprite means affecting its original pixel dimensions. When you initially create a sprite, it will appear in the game in its initial dimensions, in your case 400*32, and it will have a scale of (1, 1). You can manually change the width and height of the sprite and the scale will update accordingly, e.g. setting width to 800 will make scale.x equal to 2 (and vice versa: setting scale.x to 2 will make the width 800). It's usually set uniformly (i.e. scale.x is equal to scale.y), otherwise the image will appear with non-square pixels.

As for positioning, all sprites are initially created with anchor set to (0, 0), which means that all transforms (positioning, rotation, scale and so on) happen according to the top left corner of the sprite. If you set its position.y to game.world.height, it will appear just outside of the visible part of the game, that's why you offset it by 64 in this case (its height after the scale).