无法使用开始帧和结束帧加载动画 [P5.Play]

【问题标题】：Can't load animation using start frame and end frame [P5.Play]无法使用开始帧和结束帧加载动画 [P5.Play]
【发布时间】：2021-10-13 13:32:35
【问题描述】：

我正在尝试使用 P5.Play 参考指定的开始帧和结束帧在预加载中加载动画，它只加载第一帧和最后一帧，而不是预填充它们之间的所有帧。这对于 15 帧左右的动画来说不是问题，但我有一些 80+ 帧的动画。

function preload() {
  chargeExplosion = loadAnimation('assets/chargeExplosion/frame0000.png', 'assets/chargeExplosion/frame0081.png');
}

function setup() {
  createCanvas(500, 500)
}

function draw() {
  explosion1 = createSprite(width / 2, height / 2, 40, 40);
  explosion1.addAnimation('boom', chargeExplosion);
}

这段代码过于简单，因为我有几百行代码，但我确保绝对没有任何干扰。当我单独预加载每一帧时，动画效果很好，我真的不想为其余的帧这样做。

【问题讨论】：

标签： p5.js

【解决方案1】：

p5.play 中的精灵是持久的。您想在设置期间创建它们（或者可能是为了响应某些事件）。
为了显示您创建的精灵，您需要调用drawSprites()

let chargeExplosion;
let explosion1;

function preload() {
  chargeExplosion = loadAnimation('https://www.paulwheeler.us/files/AnimFrame00.png', 'https://www.paulwheeler.us/files/AnimFrame02.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  explosion1 = createSprite(width / 2, height / 2, 40, 40);
  chargeExplosion.frameDelay = 30;
  explosion1.addAnimation('boom', chargeExplosion);
}

function draw() {
  background(220);

  drawSprites();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://www.paulwheeler.us/files/p5.play.js?r=0"></script>

【讨论】：