<分区>
下午好。正如标题所述，我正在尝试为我正在制作的简单 2d 游戏在 canvas 元素上制作 2d spritesheet 动画。我已经浏览了将近十二篇文章，但没有找到我要找的东西，即如何在没有任何图书馆帮助的情况下进行此操作的说明。先生，您可能会对我说，如果您不打算利用这项可以让您的生活更轻松的免费技术，那您就是疯了。我对此的回应是，我这样做是为了学习，因为我想成为一名更好的 JavaScript 开发人员，并成长为编写更大更好的游戏。话虽如此，我想我的问题是:如何为 spritesheet 制作动画？ (我希望玩家能够使用箭头键输入方向)别搞错了:我不是在要求任何人为我编写代码，而是在问我在哪里可以找到资源来自学如何在我自己的。谢谢大家，非常感谢。
最佳答案
答案是:canvas + RequestAnimationFrame。这里有一个很棒的教程:http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/
几个月前，我一直在寻找要加入的 html5 + javascript 2d 游戏项目。如果您有兴趣，我想在这个项目上与您合作。让我知道并享受教程
您可以创建一个简单的动画循环，在您的 html 文档中创建一个 Canvas :
<canvas id="cvs"></canvas>
这将是你的“游戏板”
然后你可以在定义游戏引擎的地方创建一个javascript文件。 您可以像这样在图像元素中加载外部图像:
var myImage = new Image();
myImage.src = "my-sprite-animation.png";
并定义一个 Sprite :
var mySprite = sprite({
context: canvas.getContext("2d"),
width: 100,
height: 100,
image: coinImage
});
然后使用 requestAnimationFrame 方法创建动画循环:
function gameLoop () {
window.requestAnimationFrame(gameLoop);
mySprite.update();
mySprite.render();
}
关于javascript - 在没有 JS 库的情况下为 <canvas> 上的 spritesheet 设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36652096/