如何使用 p5JS 库将 GIF 分配给 JS 中的精灵？

Question

我有一个本地 GIF 文件，我想将输出分配给精灵。

我使用了以下库，如果它很重要的话:-

p5.js
p5.play.js
p5.dom.min.js
p5.sound.min.js

此外，我不想将 GIF 分成单独的图像。

Answer 1

如果您专门谈论 p5.play 精灵，您需要更明确地回答您的问题。但是，一般来说，在 p5.js 中使用动画 gif 非常简单。您可以使用 loadImage and image 函数像任何其他图像一样加载和绘制它们。

let gif;

function preload() {
  gif = loadImage('https://www.paulwheeler.us/files/EQ1QT.gif');
}

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

function draw() {
  background(255);
  image(gif, mouseX - 20, mouseY - 20, 40, 40);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

如何使用 p5JS 库将 GIF 分配给 JS 中的精灵？

How to assign a GIF to a sprite in JS with p5JS libraries?

javascript

animation

sprite

p5.js