在没有 JS 库的情况下在 <canvas> 上为 spritesheet 设置动画 [重复]

Posted 2023-03-25

【中文标题】在没有 JS 库的情况下在 <canvas> 上为 spritesheet 设置动画 [重复]

【英文标题】：Animating a spritesheet on <canvas> WITHOUT a JS library [duplicate]

【发布时间】：2016-08-07 17:14:57

【问题描述】：

下午好。正如标题所述，我正在尝试在画布元素上为我正在制作的简单 2d 游戏制作 2d spritesheet 动画。我浏览了近十几篇文章，但没有找到我要找的东西，这是关于如何在没有任何图书馆帮助的情况下进行此操作的说明。您可能会对我说，先生，如果您不打算利用这种可以让您的生活更轻松的免费技术，那么您就是疯了。我对此的回应是，我这样做是为了学习，因为我想成为一个更好的 javascript 开发人员，并成长为编写更大更好的游戏。话虽如此，我想我的问题是：如何为精灵表设置动画？ （我希望玩家能够用箭头键输入方向）不要搞错：我不是要求任何人为我编写代码，而是我在问我在哪里可以找到资源来教自己如何做到这一点我自己的。谢谢大家，非常感谢。

【问题讨论】：

哇，这当然是一个动机 :) 是的，这可以做到，因为 canvasRenderingContext2d.drawImage() 函数最多需要 8 个变量来定义图像的大小和位置以及切割框的大小和位置它关了。需要一段时间才能理解所有 dx, sx, sy, dy, sw, sh, dh, dw 相关性，否则这就是您所需要的。在这里阅读：developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/… - 顺便说一句，对 vanilla javascript 方法的赞誉。它教你更多关于编程如何工作的知识。

好的，我查看了您在评论中链接的文档。我一直在跟踪它，直到定义子矩形属性的参数。如果您能阐明子矩形的用途，那就太棒了。既然我知道如何绘制图像，我该如何制作动画呢？

我很想这样做，但我自己几乎没有报废那个表面。这确实需要一些时间来适应，但我敢肯定，如果你有时间，可以通过玩它来解决这个问题……而且，遗憾的是，我没有时间尝试并为你提供一个好的答案。我投了赞成票，希望你能吸引到能说流利的人drawImage :)

你真好 :) 谢谢你的贡献。

【参考方案1】：

答案是：画布+RequestAnimationFrame。这里有一个很棒的教程：http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

几个月前我正在寻找一个 html5 + javascript 2d 游戏项目加入。如果您有兴趣，我想在这个项目上与您合作。让我知道并享受本教程

您可以创建一个简单的动画循环，在您的 html 文档中创建一个画布：

<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();

【讨论】：

我正在阅读该教程。当然，我认为合作开发 2D 游戏对我们双方来说都是一个很好的学习经历。说实话，我是一名大学生，我从来没有合作过这样的项目。我很乐意讨论更多内容，并了解您对我们将如何进行的想法。

当然，我的 github 是 Azurasky1。

好的，给我发一封关于这个项目的信息的电子邮件

我对那里的私人消息不太清楚，所以我会给你发一封电子邮件，注意收件箱中的新消息

@SonnY。您的链接是正确且有用的:-)，但是在 *** 上，“仅链接”的答案是不受欢迎的，因为如果链接失效，那么答案就会变得毫无用处。为了做出正确的回答，您应该描述如何使用 requestAnimationFrame 从 spritesheet 中剪辑和显示单个 sprite。 ;-)