Wie man ein bewegtes Sprite zentralisiert auf dem Bildschirm hält?

Ich habe ein Side-Scroller-Spiel erstellt, das eine schwenkbare "Kamera" und ein bewegliches Sprite enthält. Die Schwenk- "Kamera" ist ein Effekt, der durch die Hindernisse erzeugt wird, die sich in die entgegengesetzte Richtung des Hauptsprites bewegen. Das Problem dabei ist, dass das Sprite nicht in einer Position ist; es bewegt sich ständig über den Bildschirm und verlässt schließlich das Sichtfeld. Ich möchte, dass das Sprite sich bewegt, aber in Wirklichkeit ist es in einer Position eingestellt, so dass es sich nicht außerhalb des Bildschirms bewegt.Wie man ein bewegtes Sprite zentralisiert auf dem Bildschirm hält?

-Code für das Verschieben von Sprite:

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();

Die kleine Variable ist gleich 10 und die große Variable ist gleich 20. Diese Variablen sind hier, weil die Größe unserer Sprite Veränderungen im Laufe der Zeit.

-Code für die "Kamera":

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

Diese Codezeilen erzeugen ein sich bewegendes Hindernis in unserem Spiel. Die spezifische Zeile:
schafft die bewegende "Kamera" Illusion.

Alle Code:

<!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

Quelle

2016-04-29 Mit

@DarkBee Ich wiederholte meine Frage und ging ins Detail, weil ich annahm, dass das das Problem mit meiner anderen Frage war? – Mit

Sie sollten Ihre andere Frage dann löschen ... Es wäre besser gewesen, das Original zu refaktorieren, anstatt ein Duplikat zu machen. – Seth

Wenn Sie ein Raumschiff haben

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

und Sie diese über das Spielfeld bewegen

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

und Sie hav e einige zufällig auf einem großen Spielfeld platzierten Objekte 10.000 Pixel oder mehr in der Größe

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

Dass Sie gerade ziehen, wo sie

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

}

Sie sind durch eine Ansicht einrichten können Erstellen einer Transformation, die das Schiff hält Im Zentrum.

Also in Ihrem Update/mainloop zu Beginn

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

gesetzt, das Schiff bewegen Dann wird der Strom umwandeln, so dass seine Hälfte der Leinwand Breite und Höhe nach oben und links des Schiffes ist.

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

das Schiff ziehen,

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

und die Objekte alles, was Sie

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

Nun ziehen wird, um das Schiff relativ sein ziehen. Wenn Sie ein Hindernis bei Koord 10000 haben und das Schiff nur bei 100 ist, werden Sie das Hindernis nicht sehen, nicht bevor sich das Schiff in der Nähe bewegt hat.

Wenn Sie es so machen, dann können Sie einfach alles zeichnen, wo es sein muss und Sie müssen sich keine Sorgen machen, alles auf das Schiff zu bringen. Die Transformation bewegt alles für dich.

Wenn Sie das Schiff an einer anderen Position auf dem Bildschirm haben möchten, ändern Sie einfach den Versatz vom Schiff zur oberen linken Ecke der Leinwand.

Quelle

2016-04-29 19:14:04 Blindman67

Vielen Dank für die ausführliche Antwort! – Mit

Wie man ein bewegtes Sprite zentralisiert auf dem Bildschirm hält?

Antwort

Verwandte Themen