2 votes

Mit avatar

Comment garder un sprite en mouvement centralisé sur l'écran ?

Demandé el 29 de Avril, 2016
Quand la question a-t-elle été
80 affichage
Nombre de visites la question a
1 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai créé un jeu à défilement latéral qui comprend une "caméra" panoramique et un sprite mobile. La "caméra" panoramique est un effet créé par les obstacles qui se déplacent dans la direction opposée au sprite principal. Le problème est que le sprite n'est pas dans une seule position ; il se déplace constamment sur l'écran et finit par quitter le champ de vision. Je veux que le sprite semble se déplacer, mais qu'en réalité, il soit fixé à une seule position, de sorte qu'il ne puisse pas sortir de l'écran.

Code pour le sprite mobile :

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

La petite variable est égale à 10 et la grande variable est égale à 20. Ces variables sont là parce que la taille de notre sprite change au fil du temps.

Code pour la "Caméra" :

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

Ces lignes de code créent un obstacle mobile dans notre jeu. La ligne spécifique :
ctx.rect(250 - positionX, 145, 30, 30 crée l'illusion d'une "caméra" en mouvement.

Tous les codes :

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

Lien vers le jeu

Demandé el 29 de Avril, 2016 par Mit

Réponse

Trop de publicités?

1voto

user3877726 avatar
user3877726 Points 11

Si vous avez un vaisseau spatial

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

et vous le déplacez dans le champ de jeu

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

et vous avez des objets placés au hasard sur un grand terrain de jeu de 10 000 pixels ou plus.

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

Que tu dessines juste où ils sont

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

}

Vous pouvez mettre en place une vue en créant une transformation qui maintient le vaisseau au centre.

Donc, dans votre mise à jour / boucle principale au début, déplacez le vaisseau

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

Définissez ensuite la transformation actuelle de manière à ce qu'elle soit à la moitié de la largeur et de la hauteur du canevas, en haut et à gauche du navire.

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

dessiner le bateau,

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

et dessiner les objets

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

Maintenant, tout ce que vous dessinerez sera relatif au vaisseau. Si vous avez un obstacle à la coordonnée 10000 et que le vaisseau n'est qu'à la coordonnée 100, vous ne verrez pas l'obstacle, pas avant que le vaisseau ne s'en soit approché.

Si vous procédez de cette manière, vous pouvez simplement dessiner tout ce qui doit être à l'endroit voulu et vous n'avez pas à vous soucier de tout déplacer vers le navire. La transformation déplace tout pour vous.

Si vous souhaitez que le navire soit placé à un endroit différent de l'écran, il suffit de modifier le décalage entre le navire et le coin supérieur gauche de la toile.

Répondu el 29 de Avril, 2016 par user3877726 (11 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X