javascript - 处理、镜像或翻转图像而不影响其他图像

Question

我正在使用 Javascript 开发一款带有处理功能的迷你平台游戏，例如《马里奥》。

我正在使用箭头或 WASD 移动 Angular 色，我想知道在镜像 Angular 色/图像时是否有 scale(-1,1); 的替代方案。 (默认情况下，或者当您按 D 时，它会向右看，当您按 A 时，它会向左翻转)。

如果这是最好或最简单的方法，我还想知道如何使缩放方法不影响所有其余图像，因为我想放置一些具有缩放功能的平台当 Angular 色移动时它们会不断翻转...

我还通过处理和 Javascript 收听与 Sprite /声音使用相关的任何信息。我尝试过一些库，但它们仅在我切换到 Java 模式时才有效。

提前致谢， 马拉尔。

由于之前的帖子，我使用了比例镜像。 Processing mirror image over x axis?

“dreta”是右，“esquerre”是左，两者都由 WASD 或按键控制，按下时将每个 bool 值更改为 true，释放时更改为 false。 我没有发布所有代码，但这是我想要修复的基本 Action 。

   void draw() {
       pushMatrix();
       if (iniciar == true) {
       inici();
    }
    if (dreta == true && esquerre != true) {
      movDret(backgroundimg[2]);
    }
    if (esquerre == true && dreta != true) {
      movEsquerre(backgroundimg[2]);
    }
  }

   void platformndBackground(PImage b){
      background(b);
      popMatrix();
      image(imgGrass[0], 50, 50);
      if (esquerre == true) {
        scale(-1,1);
      }
   }

   void inici() {
      movDret(backgroundimg[2]);
      iniciar = false;
   }

   void movDret(PImage b) {
      //Colisió extrem Esquerre.
     if (posicio > 1024-imgJugador[5].width) {
       posicio = posicio - imgJugador[tipusMoviment].width/2;
       movEsquerre(backgroundimg[2]);
     } else {
       bothMoviments(b);
       image(imgJugador[tipusMoviment], posicio, posicioSalt);
       posicio = posicio + 3;
     }
   }

    void movEsquerre(PImage b) {
      //Colisió extrem Dret.
      if (posicio < 0) {
        posicio = posicio + imgJugador[tipusMoviment].width/2;
        popMatrix();
        movDret(backgroundimg[2]);
      } else {
        bothMoviments(b);
        image(imgJugador[tipusMoviment], ((-imgJugador[tipusMoviment].width)-posicio), posicioSalt);
        posicio = posicio - 3;
      }
    }

    void bothMoviments(PImage b) {
      if (esquerre == true) {
        scale(-1, 1);
      }else{
        popMatrix();
      }
        if (tipusMoviment < imgJugador.length-1) {
          tipusMoviment++;
        } else {
          tipusMoviment = 5;
        }
        platformndBackground(b);
    }

Answer 1

如果你不想镜像你的 Sprite ，你可以只使用两组 Sprite :一组向右走，一组向左走。

但是如果您使用scale()函数来镜像您的 Sprite ，则需要使用pushMatrix()和popMatrix()，这样比例就不会影响所有其他 Sprite 。像这样的事情:

public void draw(){

   background(0);

   pushMatrix(); //save current "default" matrix
      scale(-1,1); //scale the matrix
      image(img,-img.width,img.height); //draw the image using the scaled matrix
   popMatrix(); //go back to the saved "default" matrix

   //draw non-mirrored sprites
   image(img2,img2.width,img2.height);
}

更多信息可以在引用文献here中找到.