在HTML5游戏中构建多状态动画

随着HTML5游戏中的所有这些动作的进行，您一定会想要多个复杂的动画。您可以使用changeImage（）或setImage（）函数（它们是同一个事物的两个不同名称）来随时更改与Sprite关联的图像。有时候，你想要更复杂的动画。看看walkAnim。 HTML。

<！ --1 - >

这里有很多图像交换。行走动画实际上是一系列快速交换的八个不同图像，以给出走路的幻觉。有4个不同的动画（每个基本方向一个），所以这是总共32个不同的图像。但是，如果您仔细查看代码，则会看到字符精灵只包含一个图像。

这个图像是一个复合动画。每一行代表一个方向，每一行都包含一个循环，或者一系列意图重复的图像。

rpg_sprite_walk。 png图片由Franck Dupont创建。他慷慨地在OpenGameArt上发布了这个图片。 org网站，他被称为“Arikel。 “他根据名为”归因分享“的特别许可证发布了自己的作品。 “这意味着人们可以免费使用或混合自己的作品，只要他们将原作者归为一类。

背景图片由一位名为Hyptosis的作者发布，他们在同一网站的公共领域下发布了图片。像Franck和Hyptosis这样有天赋的，有思想的贡献者是创意社区蓬勃发展的关键。随意查看开放的游戏艺术网站，以获得更多优秀的作品，以便在游戏中使用，但请务必感谢并将作者归功于他们应得的作品。 simpleGame。 js库包含了一个很容易制作多图像动画的功能。查看walkAnim的代码。 html看看它是如何工作的：

walkAnim。 html var game; var background; var character;函数init（）{game = new Scene（）; background = new Sprite（game，“rpgMap。png”，800，600）;背景。 setSpeed（0，0）;背景。 setPosition（400，300）;

character = new Sprite（game，“rpg_sprite_walk。png”，192,128）;

字符。 loadAnimation（192,128,24,32）; 字符。 generateAnimationCycles（）; 字符。 renameCycles（new Array（“down”，“up”，“left”，“right”））; 字符。 setAnimationSpeed（500）; //开始暂停字符。 setPosition（440，380）;字符。 （0）setSpeed; 字符。 pauseAnimation（）; 字符。 setCurrentCycle（ “下”）; 游戏。start（）;} //结束init函数update（）{游戏。明确（）; checkKeys（）;背景。更新（）;字符。 update（）;} //结束更新函数checkKeys（）{if（keysDown [K_LEFT]）{ 字符。 （1）setSpeed; 字符。 playAnimation（） 字符。 setMoveAngle（270）; 字符。 setCurrentCycle（ “左”）; } if（keysDown [K_RIGHT]）{character。 （1）setSpeed;字符。 playAnimation（）字符。 setMoveAngle（90）;字符。 setCurrentCycle（“right”）;} if（keysDown [K_UP]）{character。 （1）setSpeed;字符。 playAnimation（）字符。 setMoveAngle（0）;字符。 setCurrentCycle（“up”）;} if（keysDown [K_DOWN]）{character。 （1）setSpeed;字符。 playAnimation（）字符。 setMoveAngle（180）;字符。 setCurrentCycle（“down”）;} if（keysDown [K_SPACE]）{ 字符。 （0）setSpeed; 字符。 pauseAnimation（）; 字符。 setCurrentCycle（ “下”）; }} 您需要采取一些新的步骤来构建动画，但结果是完全值得的。 获取动画图像。

您可以自己创建一个图片，也可以查看OpenGameArt等优秀资源。 org去找别人做的工作。当然，你有责任尊重他人的工作，但今天非常宽松的许可证有一些很好的工作。确保图像按行和列组织，并且每个子图像的大小完全相同。

1. 您可能不得不篡改图像编辑器，以确保图像格式正确，并知道每个子图像的大小。将动画图像附加到您的精灵。

   你会把整个图像附加到你的精灵上，但只是在任何时候显示一小部分。这比处理一堆图像要容易得多，而且效率也更高。

   用loadAnimation（）方法创建一个动画对象。

2. 当您调用对象的loadAnimation（）方法时，您正在创建一个动画工具来帮助管理动画。前两个参数是整个图像的大小（宽度和高度），后两个参数是每个子图像的宽度和高度。如果这些值错误，动画将显示为滚动。继续玩，直到你得到这些值正确：

   字符。 loadAnimation（192,128,24,32）;

3. 构建动画周期。

   每一行都会变成一个动画循环。默认版本（没有任何参数）在大多数情况下工作正常。请查阅该工具的更高级用法的文档：

   字符。 generateAnimationCycles（）;重命名周期。
   

4. 使用buildAnimationCycles（）命令创建的动画具有默认名称，但附加自己的更有意义的名称通常会更好。添加一个名称指示每行代表的数组：

   字符。 renameCycles（new Array（“down”，“up”，“left”，“right”））;

   设置动画速度。
   

5. 动画速度表示动画运行的速度。对于大多数应用来说，500的值似乎是正确的，但是您可以调整此值，以便角色的行走循环看起来像是实际上推动了字符：

   字符。setAnimationSpeed（500）;

   设定您想要显示的周期。
   

6. setCurrentCycle（）方法允许您使用renameAnimationCycles（）步骤中指定的名称之一来选择循环：

   字符。 setCurrentCycle（ “下”）;

   使用pauseAnimation（）命令暂停动画。 pauseAnimation（）命令使动画暂时停止。
   

7. 使用playAnimation（）开始动画。

   该方法将不断循环当前的动画循环。

   正如你所看到的，动画为游戏增添了大量的乐趣，并为角色扮演游戏开辟了全部的角色扮演游戏。