Rotate image around it's center using easeljs/canvas/javascript while image remains on the starting position

Question

I found many questions/answers regarding this issue, but none using easeljs and javascript

So what I want is to rotate the image on the center, not on the 0,0 coordinates of it. I actually managed doing this with regX and regY (http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#property_regX), but then the image is drawn out of place (a bit left-up from where it should be).

So my image turns whichever way I want, but is a bit out of place, which is wrong. Image should stay on place, just turn itself and that's it.

Any ideas/suggestions welcome.

If I was unclear, ask for more info please.

I add a player image like this:

player = new createjs.Bitmap("../images/player.png");

player.x = X;
player.y = Y;   

stage.addChild(player);

where X and Y are some coordinates on canvas. If I try to rotate this image on key press with this line for instance:

player.rotation = 90;

this turns the image for 90 degrees right. So he is facing right now, which is correct and he is on the same spot he was before. BUT if I try to make him face left (with -90), what happens is seen on the pictures below:

Player started as shown on the first picture. When turning him for -90 degrees, he moves up one lane (picture 2).

So i found out about regX and regY (see link above) and used them like this:

player.regX = playerSize/2;
player.regY = playerSize/2; 

where playerSize is the picture size in pixels. This does the job about turning the player correctly on spot, but something else ends up wrong - the player position. This is the picture of starting position when regX/regY are used:

As you can see, there is some space between the player and "the wall" on the bottom. Player should be positioned one spot down and to the right (as a circle in relation to player on picture 2)

Am I missing something?

This is the image I am using (its white-ish because of the dark background in my game):

FIDDLE: http://jsfiddle.net/PsychicSaw/MLSnK/24/ Uncomment the lines with regX and regY and see what happens.

Thank you

Answer 1

Using your supplied fiddle, I have updated the code to the following to fix the jumping around on rotation. You can see it running on the updated fiddle.

var ship;
var canvas;
var stage;
var direction = "up";
var shipHolder;

// add keyboard listener.
window.addEventListener('keydown', whatKey, true);  
// create a new stage and point it at our canvas:
canvas = document.getElementById("mycanvas");
stage = new createjs.Stage(canvas);

createPlayer();

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);


function createPlayer(){
    var img = new Image();
    img.src = "http://i.stack.imgur.com/PXszc.png";

    var shipSize = 20; // 20x20 px is the image
    ship = new createjs.Bitmap(img);

    shipContainer = new createjs.Container();
    shipContainer.addChild(ship);

    // he starts at the bottom center of the canvas
    shipContainer.x = canvas.width / 2;
    shipContainer.y = canvas.height - shipSize;

    // uncomment to see ship position then
    ship.regX = 10;
    ship.regY = 10;
    ship.x = 10;
    ship.y = 10;

    stage.addChild(shipContainer);    
}

function manageDirection(){
    if(direction == "left"){
        ship.rotation = -90;
    }
    else if(direction == "right"){
        ship.rotation = 90;
    }
    else if(direction == "up"){
        ship.rotation = 0;
    }
    else if(direction == "down"){
        ship.rotation = 180;
    }
}    

function tick(event){
    // draw the updates to stage:
    manageDirection();
    stage.update(event);    
}    

function whatKey(event) {
    switch (event.keyCode) {
        // left arrow
        case 37:
            direction = "left";
            break;
            // right arrow
        case 39:
            direction = "right";
            break;
            // down arrow
        case 40:
            direction = "down";
            break;
            // up arrow 
        case 38:
            direction = "up";
            break;
    }
}

Notice the ship has been positioned at x:10 y:10 to account for the offset registration point. Also, by adding it to a Container, we are able to rotate the ship on a center registration point, and position it with a top/left orientation by setting the x/y on the Container instead of the ship.