动画
在本节中，我们将学习如何为游戏添加动画，我们将从一些基本的动画开始，但你可以根据本教程中的想法添加更复杂的动画。我们将添加两种动画：让玩家眨眼和让方块在原地轻微晃动。
什么是动画？
动画实际上就是在特定时间间隔播放的一组帧，给人以运动的错觉。可以把它想象成一个视频（视频就是按顺序播放的一系列图像），但帧率要低得多。
例如，要让我们的玩家眨眼，我们需要三个动画帧：
- 我们当前的玩家，眼睛睁开
- 玩家眼睛稍微闭合
- 玩家眼睛完全闭合
如果我们按顺序播放这三帧，你会注意到看起来就像玩家在眨眼。你可以通过打开图像并在图像预览中快速切换它们来试试这个效果。
这里有一些需要注意的事项：
- 资源需要针对特定的帧率设计 - 对我们来说，我们将使用 250 毫秒，这意味着我们每 250 毫秒播放一个新的动画帧，所以我们每秒有 4 帧
- 资源之间需要保持一致性 - 想象一下如果我们有两种不同的玩家，它们有不同的资源和不同外观的眼睛，我们需要确保当我们创建上述三帧时它们是一致的，否则两个玩家会以不同的速率眨眼
- 为大量帧设计资源是一项繁重的工作，所以我们会尽量保持动画简单，只关注关键帧
它将如何工作？
那么这在我们现有的推箱子游戏中将如何工作呢？我们需要：
- 修改我们的可渲染组件以允许多个帧 - 我们也可以创建一个新的可渲染组件来处理动画可渲染对象，并保留现有的组件用于静态可渲染对象，但现在把它们放在一起感觉更整洁
- 修改玩家实体构造以接受多个帧
- 在我们的渲染循环中跟踪时间 - 我们稍后会详细讨论这个问题，所以如果现在不太清楚为什么需要这样做也不用担心
- 修改渲染系统，考虑帧数、时间和在给定时间应该渲染的帧
资源
让我们为玩家添加新的资源，它应该是这样的。注意我们创建了一个按顺序命名帧的约定，这不是严格必要的，但它将帮助我们轻松跟踪顺序。
├── 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
可渲染特性
现在，让我们更新可渲染组件，把他们变成一个路径列表以接收多个帧
我们还要添加两个新函数，用于构建两种类型的可渲染对象：一种是单一路径，另一种是多个路径。这两个函数是关联函数，因为它们与结构体 Renderable 相关联，但它们相当于其他语言中的静态函数，因为它们不操作实例（注意它们没有接收 &self 或 &mut self 作为第一个参数，这意味着我们可以在结构体的上下文中调用它们，而不是在结构体实例中调用）。它们也类似于工厂函数，因为它们封装了实际构建对象之前所需的逻辑和验证。
更多: 了解更多关于关联函数的信息。这里.
#![allow(unused)] fn main() { // components.rs pub struct Renderable { paths: Vec<String>, } impl Renderable { pub fn new_static(path: &str) -> Self { Self { paths: vec![path.to_string()], } } pub fn new_animated(paths: Vec<&str>) -> Self { Self { paths: paths.iter().map(|p| p.to_string()).collect(), } } } }
接下来，我们需要一种方法来判断可渲染对象是动画还是静态的，这将在渲染系统中使用。我们可以将 paths 成员变量设为公共，让渲染系统获取 paths 的长度并根据长度推断，但有一种更符合语言习惯的方式。我们可以为可渲染对象的类型添加一个枚举，并在可渲染对象上添加一个方法来获取该类型。这样，我们将类型的逻辑封装在可渲染对象内部，同时可以保持 paths 私有。你可以将类型的声明放在 components.rs 的任何位置，但最好放在 Renderable 声明的旁边。
#![allow(unused)] fn main() { // components.rs pub enum RenderableKind { Static, Animated, } }
现在让我们添加一个函数，根据内部的 paths 告诉我们可渲染对象的类型。
#![allow(unused)] fn main() { // components.rs pub fn kind(&self) -> RenderableKind { match self.paths.len() { 0 => panic!("invalid renderable"), 1 => RenderableKind::Static, _ => RenderableKind::Animated, } } }
最后，由于我们将 paths 设为私有，因此需要让可渲染对象的使用者能够从列表中获取特定路径。对于静态可渲染对象，这将是第 0 个路径（唯一的一个），而对于动画路径，我们将让渲染系统根据时间决定应该渲染哪个路径。唯一需要注意的地方是，如果请求的帧数超出了我们拥有的范围，我们将通过对长度取模来循环处理。
#![allow(unused)] fn main() { // components.rs pub fn path(&self, path_index: usize) -> String { // If we get asked for a path that is larger than the // number of paths we actually have, we simply mod the index // with the length to get an index that is in range. self.paths[path_index % self.paths.len()].clone() } }
实体创建
接下来，我们将更新玩家实体的创建，以考虑多个路径。请注意，现在我们使用 new_animated 函数来构建可渲染对象
#![allow(unused)] fn main() { // entities.rs pub fn create_box(world: &mut World, position: Position, colour: BoxColour) -> Entity { world.spawn(( Position { z: 10, ..position }, Renderable::new_animated(vec![ &format!("/images/box_{}_1.png", colour), &format!("/images/box_{}_2.png", colour), ]), Box { colour }, Movable {}, )) } pub fn create_box_spot(world: &mut World, position: Position, colour: BoxColour) -> Entity { world.spawn(( Position { z: 9, ..position }, Renderable::new_static(&format!("/images/box_spot_{}.png", colour)), BoxSpot { colour }, )) } }
并且让我们更新所有其他部分以使用 new_static 函数——以下是我们如何在墙壁实体创建中实现这一点的示例，请随意将其应用到其他静态实体中。
#![allow(unused)] fn main() { // entities.rs use crate::components::*; use hecs::{Entity, World}; pub fn create_wall(world: &mut World, position: Position) -> Entity { world.spawn(( Position { z: 10, ..position }, Renderable::new_static("/images/wall.png"), Wall {}, Immovable {}, )) } pub fn create_floor(world: &mut World, position: Position) -> Entity { world.spawn(( Position { z: 5, ..position }, Renderable::new_static("/images/floor.png"), )) } // ANCHOR: create_box pub fn create_box(world: &mut World, position: Position, colour: BoxColour) -> Entity { world.spawn(( Position { z: 10, ..position }, Renderable::new_animated(vec![ &format!("/images/box_{}_1.png", colour), &format!("/images/box_{}_2.png", colour), ]), Box { colour }, Movable {}, )) } pub fn create_box_spot(world: &mut World, position: Position, colour: BoxColour) -> Entity { world.spawn(( Position { z: 9, ..position }, Renderable::new_static(&format!("/images/box_spot_{}.png", colour)), BoxSpot { colour }, )) } // ANCHOR_END: create_box pub fn create_player(world: &mut World, position: Position) -> Entity { world.spawn(( Position { z: 10, ..position }, Renderable::new_animated(vec![ "/images/player_1.png", "/images/player_2.png", "/images/player_3.png", ]), Player {}, Movable {}, )) } pub fn create_gameplay(world: &mut World) -> Entity { world.spawn((Gameplay::default(),)) } // ANCHOR: create_time pub fn create_time(world: &mut World) -> Entity { world.spawn((Time::default(),)) } // ANCHOR_END: create_time }
时间
我们还需要另一个组件来记录时间。时间与此有什么关系？它又是如何与帧率联系起来的呢？基本思路是这样的：ggez 控制渲染系统的调用频率，这取决于帧率，而帧率又取决于我们在游戏循环的每次迭代中做了多少工作。由于我们无法控制这一点，在一秒钟内，渲染系统可能会被调用 60 次、57 次，甚至可能只有 30 次。这意味着我们的动画系统不能基于帧率，而需要基于时间。
正因如此，我们需要记录增量时间（delta time），也就是上一次循环和当前循环之间经过的时间。由于增量时间比我们设定的动画帧间隔（我们决定为 250 毫秒）要小得多，因此我们需要累积增量时间，也就是从游戏启动开始到现在经过的总时间。
现在，我们为时间添加一个资源。这并不适合放入组件模型中，因为时间只是一些需要维护的全局状态。
#![allow(unused)] fn main() { // components.rs #[derive(Default)] pub struct Time { pub delta: Duration, } }
现在，让我们在主循环中更新时间。幸运的是，ggez 提供了一个函数来获取增量时间，所以我们只需要累积它即可。
#![allow(unused)] fn main() { // main.rs fn update(&mut self, context: &mut Context) -> GameResult { // Run input system { systems::input::run_input(&self.world, context); } // Run gameplay state { systems::gameplay::run_gameplay_state(&self.world); } // Get and update time resource { let mut query = self.world.query::<&mut crate::components::Time>(); let time = query.iter().next().unwrap().1; time.delta += context.time.delta(); } Ok(()) } }
渲染系统
现在，我们来更新渲染系统。我们将从可渲染对象中获取类型，如果是静态的，我们直接使用第一帧；否则，我们根据增量时间来确定要使用哪一帧。
首先，我们添加一个函数来封装获取正确图像的逻辑。
#![allow(unused)] fn main() { // rendering.rs pub fn get_image(context: &mut Context, renderable: &Renderable, delta: Duration) -> Image { let path_index = match renderable.kind() { RenderableKind::Static => { // We only have one image, so we just return that 0 } RenderableKind::Animated => { // If we have multiple, we want to select the right one based on the delta time. // First we get the delta in milliseconds, we % by 1000 to get the milliseconds // only and finally we divide by 250 to get a number between 0 and 4. If it's 4 // we technically are on the next iteration of the loop (or on 0), but we will let // the renderable handle this logic of wrapping frames. ((delta.as_millis() % 1000) / 250) as usize } }; let image_path = renderable.path(path_index); Image::from_path(context, image_path).unwrap() } }
最后，我们在 run 函数中使用新的 get_image 函数（我们还需要将时间添加到 SystemData 定义中，并添加一些导入，但基本上就是这样了）。
#![allow(unused)] fn main() { // rendering.rs pub fn run_rendering(world: &World, context: &mut Context) { // Clearing the screen (this gives us the background colour) let mut canvas = graphics::Canvas::from_frame(context, graphics::Color::from([0.95, 0.95, 0.95, 1.0])); // Get time let mut query = world.query::<&Time>(); let time = query.iter().next().unwrap().1; // Get all the renderables with their positions and sort by the position z // This will allow us to have entities layered visually. let mut query = world.query::<(&Position, &Renderable)>(); let mut rendering_data: Vec<(Entity, (&Position, &Renderable))> = query.into_iter().collect(); rendering_data.sort_by_key(|&k| k.1 .0.z); // Iterate through all pairs of positions & renderables, load the image // and draw it at the specified position. for (_, (position, renderable)) in rendering_data.iter() { // Load the image let image = get_image(context, renderable, time.delta); let x = position.x as f32 * TILE_WIDTH; let y = position.y as f32 * TILE_WIDTH; // draw let draw_params = DrawParam::new().dest(Vec2::new(x, y)); canvas.draw(&image, draw_params); } // Render any text let mut query = world.query::<&Gameplay>(); let gameplay = query.iter().next().unwrap().1; draw_text(&mut canvas, &gameplay.state.to_string(), 525.0, 80.0); draw_text(&mut canvas, &gameplay.moves_count.to_string(), 525.0, 100.0); // Finally, present the canvas, this will actually display everything // on the screen. canvas.finish(context).expect("expected to present"); } }
箱体动画
现在我们已经学会了如何实现这一点，接下来我们将其扩展到让箱子也实现动画效果。我们只需要添加新的资源并调整实体创建部分，其他部分应该就能正常工作了。以下是我使用的资源，你可以随意复用或创建新的资源！
总结一下
这一部分内容比较长，但希望你喜欢！以下是游戏现在应该呈现的效果。
代码链接: 在这个例子中你可以看到完整的代码 here.