부모 위치에 상대적인 스프라이트 재배치

Question

이것은 HTML5/JavaScript 게임 개발과 관련된 질문입니다. 부모 스프라이트를 회전시키고 자식 스프라이트의 위치와 회전을 올바르게 정렬해야합니다. 부모가 회전하면 자식은 올바른 위치와 회전을 유지해야합니다.

누구든지이 공식을 알고 있습니까?

Answer 1

부모 - 자식 관계를 추적 할 수 있도록 개체의 로컬 좌표와 세계 좌표를 알아야합니다. 애니메이션을 원한다면 보이는 것처럼 쉽지는 않지만 여기에 예제가 있습니다. 찾고있는 "수식"은 b.pos에 있으며 부모 개체에 상대적으로 계산됩니다.

데모 :http://jsbin.com/dahul/2/edit

// Some basic canvas utilities 
// (see demo) 

// Objects to be drawn on canvas 
var a = { 
    x: 0, // global coordinates 
    y: 0, //^
    vx: .1, // velocity 
    vy: .1, //^
    w: 100, // dimensions 
    h: 100, //^
    color: 'red' 
}; 

var b = { 
    parent: a, // relationship 
    x: 0, 
    y: 0, 
    lx: .5, // local coordinates (percentage) 
    ly: .5, //^
    w: 25, 
    h: 25, 
    color: 'yellow', 
    pos: function() { // calculate position relative to given parent 
    return { 
     x: this.parent.w * this.lx - this.w/2, 
     y: this.parent.h * this.ly - this.h/2 
    }; 
    } 
}; 

// Draw boxes with parent-child relationship 
// @param a {Object} Parent 
// @param b {Object} Child 
var draw = function(a, b, ctx, dt) { 
    ctx.fillStyle = a.color; 
    ctx.fillRect(a.x += a.vx * dt, a.y += a.vy * dt, a.w, a.h); 
    ctx.fillStyle = b.color; 
    ctx.fillRect(b.x + a.x + b.pos().x, b.y + a.y + b.pos().y, b.w, b.h); 
}; 

// Initialize and animate canvas 
document.body.appendChild(canvas(400, 400, function(ctx) { 
    return render(function(dt) { 
    ctx.clearRect(0, 0, 400, 400); 
    draw(a, b, ctx, dt); 
    }); 
}));