触摸限制时翻转图像（比例（-1,1））不起作用？

Question

（初学者） 我正在创建一个游戏，我希望图像在触及画布限制时水平翻转，所以当我第一次应用 scale(-1,1) 时它工作得很好。在对代码进行了一些更改后，它停止了工作。我也尝试创建一个函数并调用它，但出现“不是函数”错误。有什么建议吗？

let fish1, fish2, fish3, fish4;
let img1, img2, img3, img4;

function preload() {
  img1 = loadImage("Fishes/fish1.png");
  img2 = loadImage("Fishes/fish2.png");
  img3 = loadImage("Fishes/fish3.png");
  img4 = loadImage("Fishes/fish4.gif");
}

function setup() {
  createCanvas(1920, 1080);

  fish1 = new Fish(400, 150, img1);
  fish2= new Fish(200, 150, img2);
  fish3= new Fish(100, 50, img3);
  fish4= new Fish(200, 150, img4);
}

function draw() {
  background(bg);

  fish1.display();
  fish2.display();
  fish3.display();
  fish4.display();
  fish1.swim1();
  fish2.swim2();
  fish3.swim3();
  fish4.swim4();
  fish1.limits();
  fish2.limits();
  fish3.limits();
  fish4.limits();
}

function flip() {
  scale(-1, 1);
}

class Fish{
  constructor(x, y, inImg) {
    this.img1 = inImg;
    this.img2 = inImg;
    this.img3 = inImg;
    this.img4 = inImg;
    this.x1 = x;
    this.y1 = y;
    this.x2 = x + 1000;
    this.y2 = y + 200;
    this.x3 = x + 100;
    this.y3 = y + 400;
    this.x4 = x + 1000;
    this.y4 = y + 400;
    this.x1direction = random(0, 1);
    this.y1direction = random(0, 1);
    this.x2direction = random(0, 2);
    this.y2direction = random(0, 1);
    this.x3direction = random(0, 2.5);
    this.y3direction = random(0, 3);
    this.x4direction = random(0.5, 2);
    this.y4direction = random(0.3, 1.5);
  }
  display() {
    image(img1, this.x1, this.y1);
    image(img2, this.x2, this.y2);
    image(img3, this.x3, this.y3);
    image(img4, this.x4, this.y4);
  }
  swim1() {
    push();
    translate(this.x1 + px / 80, this.y1 + px / 80);
    if (this.x1direction < 0) {
      //this.img1.flip();
      scale(-1, 1);
    }
    pop();
    this.x1 += this.x1direction;
    this.y1 += this.y1direction;
  }
  swim2() {
    push();
    translate(this.x2 + px / 80, this.y2 + px / 80);
    if (this.x2direction < 0) {
      //this.img2.flip();
      scale(-1, 1);
    }
    pop();
    this.x2 += this.x2direction;
    this.y2 += this.y2direction;
  }
  swim3() {
    push();
    translate(this.x3 + px / 80, this.y3 + px / 80);
    if (this.x3direction < 0) {
      //this.img3.flip();
      scale(-1, 1);
    }
    pop();
    this.x3 += this.x3direction;
    this.y3 += this.y3direction;
  }
  swim4() {
    push();
    translate(this.x4 + px / 80, this.y4 + px / 80);
    if (this.x4direction < 0) {
      //this.img4.flip();
      scale(-1, 1);
    }
    pop();
    this.x4 += this.x4direction;
    this.y4 += this.y4direction;
  }
  limits() {
    if (this.x1 > width || this.x1 < 0) {
      this.x1direction = -this.x1direction;
    }
    if (this.y1 > height || this.y1 < 0) {
      this.y1direction = -this.y1direction;
    }
    if (this.x2 > width || this.x2 < 0) {
      this.x2direction = -this.x2direction;
    }
    if (this.y2 > height || this.y2 < 0) {
      this.y2direction = -this.y2direction;
    }
    if (this.x3 > width || this.x3 < 0) {
      this.x3direction = -this.x3direction;
    }
    if (this.y3 > height || this.y3 < 0) {
      this.y3direction = -this.y3direction;
    }
    if (this.x4 > width || this.x4 < 0) {
      this.x4direction = -this.x4direction;
    }
    if (this.y4 > height || this.y4 < 0) {
      this.y4direction = -this.y4direction;
    }
  }
}

Answer 1

您在尝试调用翻转函数时遇到错误的原因是您在 p5.Image 对象而不是 Fish 对象上调用它：

// this is a reference to the current Fish instance
// this.img1 is the field on the Fish instance containing the p5.Image
// So this.img1.flip is not a function because p5.Image has no such function
this.img1.flip();

您的翻转不起作用的原因是您没有在代码中使用scale(-1, 1) 的位置绘制图像：

  swim1() {
    push();
    translate(this.x1 + px / 80, this.y1 + px / 80);
    if (this.x1direction < 0) {
      // The scale function only effects those elements drawn after it is called
      scale(-1, 1);
    } 
    // Calling pop() resets the drawing state (including all translation and
    // scale transformations) back to the point they were at when the last call
    // to push() was made. So the translation and scale above have no effect
    pop();

    this.x1 += this.x1direction;
    this.y1 += this.y1direction;
  }

  display() {
    // When you are drawing your images, no scaling is applied
    image(img1, this.x1, this.y1);
    image(img2, this.x2, this.y2);
    image(img3, this.x3, this.y3);
    image(img4, this.x4, this.y4);
  }

简而言之，您似乎正在尝试翻转实际的源图像，以便下次以正常缩放绘制它时，它会出现翻转。然而，实际上以这种方式实现它会很复杂且效率较低，因为您必须为每个图像制作 4 个副本（或至少 2 个副本，一个翻转和一个）。

考虑这一点的更好方法是将其视为在代码中实际绘制鱼的位置转换为鱼的位置，并有条件地缩放。令人高兴的是，代码看起来与您现在的代码非常相似：

  swim1() {
    this.x1 += this.x1direction;
    this.y1 += this.y1direction;
  }

  display() {
    push();
    translate(this.x1, this.y1);
    if (this.x1direction < 0) {
      scale(-1, 1);
    }
    image(img1, 0, 0, 100, 100);
    pop();

    // repeat the above for each of the 4 instances of the fish.
  }

还有一些小问题，例如缺少变量 bg 和 px，但我认为这只是一个问题，将您的代码复制并粘贴到 StackOverflow 问题中。

这是对您的代码的工作改编，并进行了一些其他调整（调用所有游泳函数，而不是每种鱼类型仅调用 1 个，将画布调整到窗口大小，使用我周围的一些随机鱼图像，并限制每条鱼图像到 100x100）：

let fish1, fish2, fish3, fish4;
let img1, img2, img3, img4;

function preload() {
  img1 = loadImage("https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Forange-fish.jpg?v=1613865086898");
  img2 = loadImage("https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblue-fish.jpg?v=1613865087591");
  img3 = loadImage("https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fpurple-fish.jpg?v=1613865090105");
  img4 = loadImage("https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fwhite-fish.jpg?v=1613865093930");
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  fish1 = new Fish(400, 150, img1);
  fish2 = new Fish(200, 150, img2);
  fish3 = new Fish(100, 50, img3);
  fish4 = new Fish(200, 150, img4);
}

function draw() {
  background(255);

  fish1.display();
  fish2.display();
  fish3.display();
  fish4.display();
  fish1.swim();
  fish2.swim();
  fish3.swim();
  fish4.swim();
  fish1.limits();
  fish2.limits();
  fish3.limits();
  fish4.limits();
}

function flip() {
  scale(-1, 1);
}

class Fish{
  constructor(x, y, inImg) {
    this.img1 = inImg;
    this.img2 = inImg;
    this.img3 = inImg;
    this.img4 = inImg;
    this.x1 = x;
    this.y1 = y;
    this.x2 = constrain(x + random(-400, 400), 0, width);
    this.y2 = constrain(y + random(-400, 400), 0, height);
    this.x3 = constrain(x + random(-400, 400), 0, width);
    this.y3 = constrain(y + random(-400, 400), 0, height);
    this.x4 = constrain(x + random(-400, 400), 0, width);
    this.y4 = constrain(y + random(-400, 400), 0, height);
    this.x1direction = random(0, 1);
    this.y1direction = random(0, 1);
    this.x2direction = random(0, 2);
    this.y2direction = random(0, 1);
    this.x3direction = random(0, 2.5);
    this.y3direction = random(0, 3);
    this.x4direction = random(0.5, 2);
    this.y4direction = random(0.3, 1.5);
  }
  display() {
    push();
    translate(this.x1, this.y1);
    if (this.x1direction < 0) {
      //this.img1.flip();
      scale(-1, 1);
    }
    image(img1, 0, 0, 100, 100);
    pop();
        
    push();
    translate(this.x2, this.y2);
    if (this.x2direction < 0) {
      //this.img2.flip();
      scale(-1, 1);
    }
    image(img2, 0, 0, 100, 100);
    pop();
        
    push();
    translate(this.x3, this.y3);
    if (this.x3direction < 0) {
      //this.img3.flip();
      scale(-1, 1);
    }
    image(img3, 0, 0, 100, 100);
    pop();
        
    push();
    translate(this.x4, this.y4);
    if (this.x4direction < 0) {
      //this.img4.flip();
      scale(-1, 1);
    }
    image(img4, 0, 0, 100, 100);
    pop();
  }
    swim() {
        this.swim1();
        this.swim2();
        this.swim3();
        this.swim4();
    }
  swim1() {
    this.x1 += this.x1direction;
    this.y1 += this.y1direction;
  }
  swim2() {
    this.x2 += this.x2direction;
    this.y2 += this.y2direction;
  }
  swim3() {
    this.x3 += this.x3direction;
    this.y3 += this.y3direction;
  }
  swim4() {
    this.x4 += this.x4direction;
    this.y4 += this.y4direction;
  }
  limits() {
    if (this.x1 > width || this.x1 < 0) {
      this.x1direction = -this.x1direction;
    }
    if (this.y1 > height || this.y1 < 0) {
      this.y1direction = -this.y1direction;
    }
    if (this.x2 > width || this.x2 < 0) {
      this.x2direction = -this.x2direction;
    }
    if (this.y2 > height || this.y2 < 0) {
      this.y2direction = -this.y2direction;
    }
    if (this.x3 > width || this.x3 < 0) {
      this.x3direction = -this.x3direction;
    }
    if (this.y3 > height || this.y3 < 0) {
      this.y3direction = -this.y3direction;
    }
    if (this.x4 > width || this.x4 < 0) {
      this.x4direction = -this.x4direction;
    }
    if (this.y4 > height || this.y4 < 0) {
      this.y4direction = -this.y4direction;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>