scale and positioning

[l4u]

When I scale a sprite and move it to (0,0).
It doesn't appear at the top left, probably because it is scaled with a center anchor point.

How do I implement this?

[batiste]

How much do you scale it? As I understand it it should still display. Do you use canvas or HTML?

[l4u]

I am scaling it for < 1.
But the result is the same for canvas/HTML, or scaling it > 1.

[batiste]

Could you try this code with your image?
It works for me. The scaling is applied from the center of the sprite::

window.onload = function() {

    var game_height = 200;
    var game_width = 200;
    var scene = sjs.Scene({w:game_width, h:game_height});

    scene.loadImages(['img/ground.png'], function(){
        var s = scene.Sprite('img/ground.png');
        s.move(0, 0);
        s.scale(2);
        s.update();
    });

};

[l4u]

Thanks @batiste, I have tried your code but if I want to align the left corner of the sprite to (0, 0)
the code would become

sprite.scale(scale_factor);
sprite.move( - width_of_sprite * (1 - scale_factor) / 2, - height_of_sprite * (1 - scale_factor) / 2);

And the code will become longer when I want to align the left top corner of a sprite to (x, y)

Could we add some functions to the framework?
Not sure how this should be implemented, I am looking into other frameworks for references.

[batiste]

A way to do this would be to change the center of scaling for the Sprite. This could be done with the transform origin CSS property:

https://developer.mozilla.org/en/CSS/-moz-transform-origin

So it will look like this::

 s.transformOrigin(0, 0);
 s.scale(2, 2);

What do you think?

[batiste]

Here is a first implementation of the function:

d7a3d31

[l4u]

Just tried out the new function.
It works and makes my code much cleaner.