Question

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

Answer 1

答案是：canvas + 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();
}

在没有JS库的<canvas>上为spritesheet设置动画

1 个答案: