动画

在本节中，我们将学习如何为游戏添加动画，我们将从一些基本的动画开始，但你可以根据本教程中的想法添加更复杂的动画。我们将添加两种动画：让玩家眨眼和让方块在原地轻微晃动。

什么是动画？

动画实际上就是在特定时间间隔播放的一组帧，给人以运动的错觉。可以把它想象成一个视频（视频就是按顺序播放的一系列图像），但帧率要低得多。

例如，要让我们的玩家眨眼，我们需要三个动画帧：

  1. 我们当前的玩家，眼睛睁开
  2. 玩家眼睛稍微闭合
  3. 玩家眼睛完全闭合

如果我们按顺序播放这三帧，你会注意到看起来就像玩家在眨眼。你可以通过打开图像并在图像预览中快速切换它们来试试这个效果。

这里有一些需要注意的事项：

  • 资源需要针对特定的帧率设计 - 对我们来说，我们将使用 250 毫秒，这意味着我们每 250 毫秒播放一个新的动画帧，所以我们每秒有 4 帧
  • 资源之间需要保持一致性 - 想象一下如果我们有两种不同的玩家，它们有不同的资源和不同外观的眼睛，我们需要确保当我们创建上述三帧时它们是一致的，否则两个玩家会以不同的速率眨眼
  • 为大量帧设计资源是一项繁重的工作，所以我们会尽量保持动画简单，只关注关键帧

它将如何工作？

那么这在我们现有的推箱子游戏中将如何工作呢？我们需要：

  1. 修改我们的可渲染组件以允许多个帧 - 我们也可以创建一个新的可渲染组件来处理动画可渲染对象，并保留现有的组件用于静态可渲染对象，但现在把它们放在一起感觉更整洁
  2. 修改玩家实体构造以接受多个帧
  3. 在我们的渲染循环中跟踪时间 - 我们稍后会详细讨论这个问题，所以如果现在不太清楚为什么需要这样做也不用担心
  4. 修改渲染系统，考虑帧数、时间和在给定时间应该渲染的帧

资源

让我们为玩家添加新的资源，它应该是这样的。注意我们创建了一个按顺序命名帧的约定，这不是严格必要的，但它将帮助我们轻松跟踪顺序。

玩家1 玩家2 玩家3

├── resources
│   └── images
│       ├── box_blue.png
│       ├── box_red.png
│       ├── box_spot_blue.png
│       ├── box_spot_red.png
│       ├── floor.png
│       ├── player_1.png
│       ├── player_2.png
│       ├── player_3.png
│       └── wall.png

[继续文档的其余部分...]