使用 PIXI JS 时，图像精灵未显示在我的画布中

Question

我的图像精灵 (game.player_booba) 没有出现，我不明白为什么。 尽管修改了它在 x 和 y 中的位置，但它没有出现。

game.player_booba.init();
game.player_booba.sprite.image.addEventListener("load", (event) => {
  window.requestAnimationFrame(game.loop);

});

我的代码笔： https ://codepen.io/manonragnotti/pen/abbeEKO

谢谢

Answer 1

老实说，我不明白这个问题与 PIXI 有什么关系。 您已将其包含到您的 codePen 项目中，但您从未真正使用过该库。 所有渲染都是直接使用原生 2d canvas api 完成的。 而角色 sprite 之所以没有绘制在屏幕上，是因为它是在画布上绘制的，从来没有添加到 DOM 中。 在这条线上看到

buffer = document.createElement("canvas").getContext("2d");

您正在创建一个画布元素，然后将其 2d 上下文分配给变量“缓冲区”，但实际上从未将 DOM 元素添加到文档中。 所以你需要做这样的事情：

bufferCanvas = document.createElement("canvas");
buffer = bufferCanvas.getContext("2d");
window.document.body.appendChild(bufferCanvas);