회전 이미지 easeljs/캔버스/자바 스크립트를 사용하여 센터의

Question

나는 발견 많은 질문/답변이 문제에 대한,하지만 easeljs 및 자바 스크립트를 사용하여 아무도

그래서 내가 원하는 이미지를 회전 할 수 없다 센터의 0,0 좌표가 아닙니다. 실제로 regX와 regY (http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#property_regX)를 사용하여이 작업을 관리했지만 이미지가 제자리에서 벗어났습니다.

그래서 내 이미지가 원하는대로 바뀌지 만 약간의 차이가 있습니다. 잘못된 것입니다. 이미지는 제자리에 머물러 있어야하며, 그냥 돌리면됩니다.

아이디어/제안을 환영합니다.

내가 명확하지 않은 경우 자세한 정보를 요청하십시오.

나는이 같은 선수 이미지를 추가 :

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

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

stage.addChild(player); 

하는 X와 Y는 캔버스에 몇 가지 좌표있는 곳. 내가 예를 들어,이 라인 키 누름에이 이미지를 회전하려고하면 :

player.rotation = 90; 

이 오른쪽으로 90도 이미지를집니다. 그래서 그는 지금 당장 직면하고 있습니다. 그것은 정확하며 그는 이전과 똑같은 자리에 있습니다. 나는 (-90과) 그 왼쪽 얼굴 만들려고한다면, 무슨 일하는 아래 그림에서 볼 수있다 :

는 플레이어가 시작 첫 번째 사진과 같이. -90도를 돌릴 때 그는 한 차선 위로 올라갑니다 (그림 2).

는 그래서 REGX 및 regY 대해 알게 (위 링크 참조)와 같이이를 사용했을

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

을 playerSize 픽셀의 영상 크기이다. 이것은 플레이어를 현장에서 올바르게 돌리는 것에 대한 일을하지만, 다른 것은 잘못된 위치 즉 플레이어 위치로 끝납니다. 이 REGX/regY를 사용하는 경우 시작 위치의 사진입니다 :

당신이 볼 수 있듯이, 하단에있는 플레이어와 "벽"사이에 약간의 공간이있다. 플레이어는 한 지점 아래에서 오른쪽으로 (그림 2의 플레이어와 관련하여 원으로) 위치해야합니다.

내가 뭔가를 잃어 버렸 는데요?

뿐인 :

이

내가 (때문에 내 게임의 어두운 배경의 하얀 틱)를 사용하고있는 이미지입니다 REGX 및 regY와 http://jsfiddle.net/PsychicSaw/MLSnK/24/ 주석 라인과 무슨 일이 일어 나는지.

나는 회전에 점프 주위를 해결하기 위해 다음에 코드를 업데이트 한 경우

Answer 1

이 공급 바이올린을 사용하여 감사드립니다. 업데이트 된 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; 
    } 
} 

오프셋 등록 포인트를 설명하기 위해 우주선이 x : 10 y : 10에 배치되었습니다. 또한 Container에 추가하여 센터 등록 포인트에서 배를 회전하고 배 대신 컨테이너에서 x/y를 설정하여 상단/왼쪽 방향으로 배치 할 수 있습니다.