고정 점을 중심으로 스프라이트를 회전하여 커서를 따라가는 방법

Question

커서를 움직여 각도를 설정하고 적용되는 힘은 화살표의 길이가 될 수있는 작은 미니 골프 게임을 개발 중입니다. (커서가 볼에 가까울수록 힘이 적음). 정확히 어떻게 작동하는지 확인할 수 있습니다 : https://imgur.com/a/AQ1pi

커서를 따라 화살표 스프라이트를 회전하는 방법을 알아 냈습니다. 그러나 공이 움직일 수있는 방법을 아직 모릅니다. 바로 지금 회전하고 있습니다. 그것의 닻,이 경우 화살의 머리.

저는 Panda.js (Pixi.js 기반 프레임 워크)를 사용하여 게임을 개발하고 있지만 API는 기본 Canvas 기능과 비슷합니다. 정확한 구현이 필요 없기 때문에 (즉, 코드를 게시하지 않기 때문에), 주어진 반경 내에서 한 지점을 중심으로 스프라이트를 회전하는 방법에 대한 아이디어를 얻고 싶습니다. 이 경우, 포인트는 볼의 중심이되고 반경은 볼 반경이됩니다. 감사!

Answer 1

ctx.translate 또는 ctx.setTransform으로 회전 지점을 설정 한 다음 ctx.rotate(ang);으로 회전을 적용한 다음 회전 지점이 (0,0)이되도록 이미지 오프셋을 그립니다. 즉 당신이 사용하는 마우스에 지점에서 각도를 얻으려면 다음 ctx.drawImage(image,-100,-50);

에서 렌더링 이미지 좌표 (100,50)에있을 회전의 지점을 원하는 경우 Math.atan2

requestAnimationFrame(update); 
 

 
// draws rotated image at x,y. 
 
// cx, cy is the image coords you want it to rotate around 
 
function drawSprite(image, x, y, cx, cy, rotate) { 
 
    ctx.setTransform(1, 0, 0, 1, x, y); 
 
    ctx.rotate(rotate); 
 
    ctx.drawImage(image, -cx, -cy); 
 
    ctx.setTransform(1, 0, 0, 1, 0, 0); // restore defaults 
 
} 
 

 
// function gets the direction from point to mouse and draws an image 
 
// rotated to point at the mouse 
 
function rotateAroundPoint(x, y, mouse) { 
 
    const dx = mouse.x - x; 
 
    const dy = mouse.y - y; 
 
    const dir = Math.atan2(dy, dx); 
 
    drawSprite(arrow, x, y, 144, 64, dir); 
 
} 
 

 
// Main animation loop. 
 
function update(timer) { 
 
    globalTime = timer; 
 
    ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform 
 
    ctx.globalAlpha = 1; // reset alpha 
 
    ctx.clearRect(0, 0, w, h); 
 
    strokeCircle(150, 75, 10); 
 
    rotateAroundPoint(150, 75, mouse); 
 
    requestAnimationFrame(update); 
 
} 
 

 

 
//===================================================== 
 
// All the rest is unrelated to the answer. 
 

 
const ctx = canvas.getContext("2d"); 
 
const mouse = { x: 0, y: 0, button: false }; 
 
["down", "up", "move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents)); 
 
function mouseEvents(e) { 
 
    mouse.bounds = canvas.getBoundingClientRect(); 
 
    mouse.x = e.pageX - mouse.bounds.left - scrollX; 
 
    mouse.y = e.pageY - mouse.bounds.top - scrollY; 
 
    mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button; 
 
} 
 
const CImage = (w = 128, h = w) => (c = document.createElement("canvas"), c.width = w, c.height = h, c); 
 
const CImageCtx = (w = 128, h = w) => (c = CImage(w, h), c.ctx = c.getContext("2d"), c); 
 
const drawPath = (ctx, p) => {var i = 0;while (i < p.length) {ctx.lineTo(p[i++], p[i++])}}; 
 
const strokeCircle = (l,y=ctx,r=ctx,c=ctx) =>{if(l.p1){c=y; r=leng(l);y=l.p1.y;l=l.p1.x }else if(l.x){c=r;r=y;y=l.y;l=l.x}c.beginPath(); c.arc(l,y,r,0,Math.PI*2); c.stroke()}; 
 
const aW = 10; 
 
const aH = 20; 
 
const ind = 5; 
 
const arrow = CImageCtx(); 
 
arrow.ctx.beginPath(); 
 
drawPath(arrow.ctx, [ 
 
    ind, 64 - aW, 
 
    128 - ind - aH, 64 - aW, 
 
    128 - ind - aH, 64 - aH, 
 
    128 - ind, 64, 
 
    128 - ind - aH, 64 + aH, 
 
    128 - ind - aH, 64 + aW, 
 
    ind, 64 + aW, 
 
]); 
 
arrow.ctx.fillStyle = "red"; 
 
arrow.ctx.fill(); 
 
ctx.strokeStyle = "black"; 
 
ctx.lineWidth = 2; 
 
var w = canvas.width; 
 
var h = canvas.height; 
 
var cw = w/2; // center 
 
var ch = h/2; 
 
var globalTime;

canvas { 
 
    border: 2px solid black; 
 
}

<canvas id="canvas"></canvas>