動くスプライトを画面上に集中させるには？

私は、パンニング「カメラ」と動くスプライトを含むサイド・スクロール・ゲームを作成しました。パニング「カメラ」は、メインスプライトの反対方向に移動する障害物によって生成されるエフェクトです。この問題は、スプライトが1つの位置にないことです。それは最終的に視野を残して画面を絶えず動かす。スプライトが動いているように見せたいのですが、実際にはスプライトが1つの位置に設定されているため、スプライトが画面外に移動することはありません。移動スプライト用動くスプライトを画面上に集中させるには？

コード：

ctx.beginPath(); 
ctx.moveTo(positionX - small, positionY - large); 
ctx.lineTo(positionX + small, positionY - large); 
ctx.lineTo(positionX + small, positionY); 
ctx.lineTo(positionX - small, positionY); 
ctx.closePath(); 
ctx.stroke();

小さな変数が10に等しく、大きな変数がこれらの変数は、時間をかけて私たちのスプライトの大きさが変わるので、ここにある20に等しいです。「カメラ」の

コード：コードの

function drawSquare1() { 
ctx.beginPath(); 
ctx.rect(250 - positionX, 145, 30, 30); 
ctx.fillStyle = "#FF0000"; 
ctx.fill(); 
ctx.closePath(); 
}

これらの行は、私たちのゲームでの移動障害物を作成します。特定の行：
ctx.rect(250 - positionX, 145, 30, 30は、移動する「カメラ」錯覚を作成します。

すべてのコード：

<!DOCTYPE html> 
<html> 

<body> 
<canvas id="canvas" width="2000" height="2000"></canvas> 

<script> 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 

    var positionX = 50.0; 
    var positionY = 175.0; 
    var velocityX = 2; 
    var velocityY = 0.0; 
    var gravity = 0.5; 
    var onGround = false; 
    var deaths = 0; 
    var points = 0; 
    var color = "#DCD93C"; 
    var change1 = 175; 

    //circle 1 
    var point1x1 = 339; 
    var point1x2 = 372; 
    var point1y1 = 90; 
    var point1y2 = 150; 
    var circlex1 = 350; 
    var circley1 = 100; 

    //circle 2 
    var point2x1 = 565; 
    var point2x2 = 590; 
    var point2y1 = 90; 
    var point2y2 = 150; 
    var circlex2 = 575; 
    var circley2 = 100; 

    //circle 3 
    var point3x1 = 855; 
    var point3x2 = 880; 
    var point3y1 = 20; 
    var point3y2 = 50; 
    var circlex3 = 865; 
    var circley3 = 35; 

    //square size change 
    small = 10; 
    large = 20; 



    window.addEventListener("mousedown", StartJump, false); 
    window.addEventListener("mouseup", EndJump, false); 

    Loop(); 

    function StartJump() { 
    if (onGround) { 
     velocityY = -12.0; 
     onGround = false; 
    } 
    } 

    function EndJump() { 
    if (velocityY < -6.0) 
     velocityY = -6.0; 
    } 

    function Loop() { 
    Update(); 
    Render(); 
    window.setTimeout(Loop, 30); 
    } 

    function Update() { 
    velocityY += gravity; 
    positionY += velocityY; 
    positionX += velocityX; 

    // Collision Detection // 
    if ((positionX > (239 - positionX) && positionX < (292 - positionX) && positionY > 145) || (positionX > (439 - positionX) && positionX < (492 - positionX) && positionY > 145) || (positionX > (639 - positionX) && positionX < (692 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 50 && positionY < 100) || (positionX > (1039 - positionX) && positionX < (1700 - positionX) && positionY > 166 && positionY < 176)) { 
     positionY = 175; 
     positionX = 50; 
     deaths++; 
     points = 0; 

     small = 10; 
     large = 20; 

// circle 1 

     circlex1 = 350; 
     circley1 = 100; 
     point1x1 = 339; 
     point1x2 = 372; 
     point1y1 = 90; 
     point1y2 = 150; 

//circle 2 

     circlex2 = 575; 
     circley2 = 100; 
     point2x1 = 565; 
     point2x2 = 595; 
     point2y1 = 90; 
     point2y2 = 150; 

//circle 3 

     point3x1 = 855; 
     point3x2 = 880; 
     point3y1 = 20; 
     point3y2 = 50; 
     circlex3 = 865; 
     circley3 = 35; 

    } 

    if (positionY > change1) { 
     positionY = change1; 
     velocityY = 0.0; 
     onGround = true; 
    } 

// End World 
    if (positionX < 0 || positionX > 2000) 
     velocityX *= -1; 

// Platform 1 
if (positionX > (1039 - positionX) && positionX < (1300 - positionX) && positionY > 101 && positionY < 111) 
    { 
    change1 = 111; 
    } 

    if (positionX > (1300 - positionX)) 
    { 
    change1 = 175; 
    } 

    //Platform 2 
if (positionX > (1439 - positionX) && positionX < (1510 - positionX) && positionY > 81 && positionY < 101) 
    { 
    change1 = 91; 
    } 

    if (positionX > (1510 - positionX)) 
    { 
    change1 = 175; 
    } 

//Platform 3 
if (positionX > (1600 - positionX) && positionX < (1750 - positionX) && positionY > 111 && positionY < 131) 
    { 
    change1 = 121; 
    } 

    if (positionX > (1750 - positionX)) 
    { 
    change1 = 175; 
    } 


// Point 1 
    if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > point1y1 && positionY < point1y2) { 
     points++; 
     circlex1 = -10; 
     circley1 = -10; 
     point1x1 = -10; 
     point1x2 = -10; 
     point1y1 = -10; 
     point1y2 = -10; 
     small += -2; 
     large = small * 2; 

    } 




// Point 2 
    if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > point2y1 && positionY < point2y2) { 
     points++; 
     circlex2 = -10; 
     circley2 = -10; 
     point2x1 = -10; 
     point2x2 = -10; 
     point2y1 = -10; 
     point2y2 = -10; 
     small += -2; 
     large = small * 2; 
    } 

// Point 3 
    if (positionX > (point3x1 - positionX) && positionX < (point3x2 - positionX) && positionY > point3y1 && positionY < point3y2) { 
     points++; 
     circlex3 = -10; 
     circley3 = -10; 
     point3x1 = -10; 
     point3x2 = -10; 
     point3y1 = -10; 
     point3y2 = -10; 
     small += -2; 
     large = small * 2; 
    } 

// Gets Bigger One 
    if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > 150) { 
     small += .2; 
     large = small * 2; 
    } 

// Gets Bigger Two 
      if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > 150) { 
     small += .2; 
     large = small * 2; 
    } 

// Gets Bigger Three 
      if (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 101 && positionY < 149) { 
     small += .2; 
     large = small * 2; 
    } 



    } 


    function drawPlatform1() { 
    ctx.beginPath(); 
    ctx.rect(1050 - positionX, 111, 250, 10); 
    ctx.fillStyle = "#0066FF"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawPlatform2() { 
    ctx.beginPath(); 
    ctx.rect(1450 - positionX, 91, 60, 10); 
    ctx.fillStyle = "#0066FF"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawPlatform3() { 
    ctx.beginPath(); 
    ctx.rect(1600 - positionX, 121, 150, 10); 
    ctx.fillStyle = "#0066FF"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare1() { 
    ctx.beginPath(); 
    ctx.rect(250 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawCircle1() { 
    ctx.beginPath(); 
    ctx.arc(circlex1 - positionX, circley1, 7, 7, 500); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawCircle2() { 
    ctx.beginPath(); 
    ctx.arc(circlex2 - positionX, circley2, 7, 7, 500); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawCircle3() { 
    ctx.beginPath(); 
    ctx.arc(circlex3 - positionX, circley3, 7, 7, 500); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
    } 


    function drawSquare2() { 
    ctx.beginPath(); 
    ctx.rect(450 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare3() { 
    ctx.beginPath(); 
    ctx.rect(650 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare5() { 
    ctx.beginPath(); 
    ctx.rect(850 - positionX, 145, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare6() { 
    ctx.beginPath(); 
    ctx.rect(1050 - positionX, 165, 700, 10); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawSquare4() { 
    ctx.beginPath(); 
    ctx.rect(850 - positionX, 50, 30, 30); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function drawDeaths() { 
    ctx.font = "16px Arial"; 
    ctx.fillStyle = "#0095DD"; 
    ctx.fillText("Deaths: " + deaths, 10, 20); 
    } 

    function drawPoints() { 
    ctx.font = "16px Arial"; 
    ctx.fillStyle = "#0095DD"; 
    ctx.fillText("Points: " + points, 10, 50); 
    } 

    function Render() { 
    ctx.clearRect(0, 0, 2000, 2000); 
    drawPlatform1(); 
    drawPlatform2(); 
    drawPlatform3(); 
    drawCircle1(); 
    drawCircle2(); 
    drawCircle3(); 
    drawSquare1(); 
    drawSquare2(); 
    drawSquare3(); 
    drawSquare4(); 
    drawSquare5(); 
    drawSquare6(); 

    drawDeaths(); 
    drawPoints(); 

    ctx.beginPath(); 
    ctx.moveTo(0, 175); 
    ctx.lineTo(2000, 175); 
    ctx.stroke(); 



    ctx.beginPath(); 
    ctx.moveTo(positionX - small, positionY - large); 
    ctx.lineTo(positionX + small, positionY - large); 
    ctx.lineTo(positionX + small, positionY); 
    ctx.lineTo(positionX - small, positionY); 
    ctx.closePath(); 
    ctx.stroke(); 
    } 
</script> 
</body> 

</html>

Link to game

出典

2016-04-29 Mit

@DarkBee私は私の質問をもう一度書き直しました。私はそれが私の他の質問の問題であると考えていたので、さらに詳しく説明しましたか？ – Mit

あなたは他の質問を削除する必要があります...複製する代わりにオリジナルをリファクタリングする方が良いでしょう。 – Seth

あなたは宇宙船

ship = { 
    x : 100, 
    y : 200, 
}

を持っていて、プレイフィールド

ship.move = function(){ 
    this.x += 2; 
}

を通してそれを移動し、あなたが肝炎場合電子一部のオブジェクトは、ビッグプレイフィールド上にランダム彼らはあなたはそれが船を保つ変換を作成することによって、ビューを設定することができます

 obj.draw = function(){ 
     ctx.drawImage(objectImage,this.x,this.y); 
    } 

}

どこあなただけの描画サイズ

var objects = []; 
for(i = 0; i < 1000; i ++){ 
    objects.push(obj = { 
     x: Math.random() * 10000; 
     y: Math.random() * ctx.canvas.height; 
    });

で万画素以上を配置します中央に。

だから開始時に、あなたの更新/メインループに続いて船

function update(){ // the update function called once a frame 
    // clear the screen 
    ship.move(); // move the ship

を移動し、現在はその半分キャンバスの幅と高さアップで、船の左ようにトランスフォームセット。

ctx.setTransform(1,0,0,1,ship.x - ctx.canvas.width/2,ship.y - ctx.canvas.height/2);

、船を描く

ctx.drawImage(shipImage,ship.x,ship.y)

、あなたが描くすべてが船に関連します今すぐオブジェクト

for(i = 0; i < 1000; i ++){ 
    objects[i].draw(); 
}

を描きます。 coord 10000に障害物があり、その船が100にしかない場合、船が近くに移動するまでではなく、障害物が見えません。

このようにすれば、すべてのものを描くことができ、すべてを船に移動することについて心配する必要はありません。トランスフォームはあなたのためにすべてを動かします。

船の位置を変えたい場合は、船からキャンバスの左上隅にオフセットを変更します。

出典

2016-04-29 19:14:04 Blindman67

詳細な回答ありがとうございます！ – Mit

動くスプライトを画面上に集中させるには？

答えて

関連する問題