在<canvas>上不使用JS库动画制作精灵表。

Question

在<canvas>上不使用JS库动画制作精灵表。

4

下午好。正如标题所述，我正在尝试在canvas元素上为一个简单的2D游戏制作动画2D精灵图。我已经阅读了近十篇文章，但都没有找到我想要的内容，也就是如何在没有任何库的帮助下完成这个任务的指令。你可能会对我说，如果你不利用这些可以让你的生活更轻松的免费技术，那么你就疯了。我的回应是，我这样做是为了学习，因为我想成为一个更好的javascript开发人员，并写出更大更好的游戏。话虽如此，我的问题是：我该如何制作动画精灵图呢？（我希望玩家能够使用箭头键输入方向）请不要误解：我不是要求别人为我编写代码，而是询问我在哪里可以找到资源，自己学习如何完成这项任务。谢谢大家，非常感谢。

- Streamer

哇，这肯定是一种动力 :) 是的，可以通过canvasRenderingContext2d.drawImage()函数完成，该函数最多可以使用8个变量定义图像的大小和位置以及裁剪它的框的大小和位置。需要一段时间才能理解所有的dx、sx、sy、dy、sw、sh、dh、dw之间的关系，但除此之外，这就是你需要的。在这里阅读更多信息：https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage - 顺便说一句，赞一个原生JavaScript方法。它可以让你更多地了解编程的工作原理。 - somethinghere

好的，我看了你在评论中提供的文档。我一直在按照它的步骤进行操作，直到涉及到定义子矩形属性的参数时。如果你能够澄清子矩形的作用，那就太棒了。现在我知道如何绘制图像，但是如何实现动画效果呢？ - Streamer

我很想帮忙，但是我自己也只是刚刚入门。这需要一些时间来适应，但是如果你有时间去尝试，相信你可以通过实践弄清楚... 另外，很遗憾我没有时间去尝试并提供一个好的答案。我已经点赞了，希望你能吸引到一个流利掌握 drawImage 的人 :) - somethinghere

那真是太好了 :) 感谢您的贡献。 - Streamer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andreasonny83 · Answer 1

答案是：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";

定义一个精灵：

var mySprite = sprite({
  context: canvas.getContext("2d"),
  width: 100,
  height: 100,
  image: coinImage
});

然后使用requestAnimationFrame方法创建一个动画循环：

function gameLoop () {
  window.requestAnimationFrame(gameLoop); 
  mySprite.update();
  mySprite.render();
}