2D 基础

概述

学习目标：

理解 Bevy 2D 渲染的基本概念
掌握如何创建和显示精灵（Sprite）
学会使用 2D 相机（Camera2d）
理解精灵的变换（Transform）和动画

前置知识要求：

Bevy 快速入门
ECS 基础
资源管理基础

核心概念

什么是 2D 渲染？

2D 渲染是在二维平面上显示图像和图形。Bevy 提供了强大的 2D 渲染系统，支持精灵、纹理、动画等功能。

为什么需要 2D 渲染？

游戏开发：大多数 2D 游戏需要 2D 渲染
UI 开发：用户界面通常使用 2D 渲染
性能优化：2D 渲染比 3D 渲染更高效

2D 渲染的核心组件

Bevy 2D 渲染系统包含以下核心组件：

Sprite：精灵，用于显示图像
Camera2d：2D 相机，用于控制视图
Transform：变换，用于控制位置、旋转、缩放
AssetServer：资源服务器，用于加载图像资源

基础用法

显示单个精灵

创建并显示一个精灵图像。

源代码文件：bevy/examples/2d/sprite.rs

代码示例：

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2d);

    commands.spawn(Sprite::from_image(
        asset_server.load("branding/bevy_bird_dark.png"),
    ));
}

关键要点：

使用 Camera2d 创建 2D 相机
使用 Sprite::from_image() 从图像创建精灵
使用 AssetServer 加载图像资源
精灵默认显示在屏幕中心

说明：
这是最简单的 2D 渲染示例。Camera2d 是 2D 相机，用于控制视图。Sprite::from_image() 从图像文件创建精灵。AssetServer 用于加载图像资源。精灵默认显示在屏幕中心（0, 0, 0）位置。

精灵翻转

控制精灵的水平和垂直翻转。

源代码文件：bevy/examples/2d/sprite_flipping.rs

代码示例：

commands.spawn(Sprite {
    image: asset_server.load("branding/bevy_bird_dark.png"),
    flip_x: true,  // 水平翻转
    flip_y: false, // 垂直翻转（默认）
    ..default()
});

关键要点：

flip_x: true 水平翻转精灵
flip_y: true 垂直翻转精灵
翻转是相对于精灵原始方向的
可以同时进行水平和垂直翻转

说明：
精灵翻转用于改变精灵的显示方向。这在游戏开发中很有用，例如让角色面向不同方向。翻转是相对于精灵原始方向的，不会改变精灵的位置。

精灵移动

实现精灵的移动动画。

源代码文件：bevy/examples/2d/move_sprite.rs

代码示例：

#[derive(Component)]
enum Direction {
    Left,
    Right,
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2d);

    commands.spawn((
        Sprite::from_image(asset_server.load("branding/icon.png")),
        Transform::from_xyz(0., 0., 0.),
        Direction::Right,
    ));
}

fn sprite_movement(time: Res<Time>, mut sprite_position: Query<(&mut Direction, &mut Transform)>) {
    for (mut logo, mut transform) in &mut sprite_position {
        match *logo {
            Direction::Right => transform.translation.x += 150. * time.delta_secs(),
            Direction::Left => transform.translation.x -= 150. * time.delta_secs(),
        }

        if transform.translation.x > 200. {
            *logo = Direction::Left;
        } else if transform.translation.x < -200. {
            *logo = Direction::Right;
        }
    }
}

关键要点：

使用 Transform 组件控制位置
使用 time.delta_secs() 确保帧率无关的移动
通过边界检测改变移动方向
使用组件存储移动方向

说明：
精灵移动是 2D 游戏开发中的基本功能。使用 Transform 组件控制精灵的位置。time.delta_secs() 确保移动速度与帧率无关，无论帧率如何，移动速度都保持一致。通过边界检测可以改变移动方向，实现来回移动的效果。

进阶用法

精灵旋转

实现精灵的旋转动画。

源代码文件：bevy/examples/2d/rotation.rs

代码示例：

fn sprite_rotation(mut sprite_query: Query<&mut Transform, With<Sprite>>, time: Res<Time>) {
    for mut transform in &mut sprite_query {
        transform.rotate_z(time.delta_secs() * 1.0);
    }
}

注意事项：

旋转角度以弧度为单位
rotate_z() 绕 Z 轴旋转（2D 平面）
使用 time.delta_secs() 确保旋转速度与帧率无关

最佳实践：

使用 time.delta_secs() 确保动画速度一致
合理设置旋转速度，避免过快或过慢
考虑性能影响，避免过多旋转的精灵

精灵缩放

控制精灵的大小。

代码示例：

fn sprite_scale(mut sprite_query: Query<&mut Transform, With<Sprite>>, time: Res<Time>) {
    for mut transform in &mut sprite_query {
        let scale = (time.elapsed_secs() * 0.5).sin() * 0.5 + 1.0;
        transform.scale = Vec3::splat(scale);
    }
}

注意事项：

缩放值 1.0 表示原始大小
小于 1.0 表示缩小，大于 1.0 表示放大
可以使用 Vec3::splat() 统一设置三个轴的缩放

最佳实践：

使用统一的缩放值保持精灵比例
避免过度缩放，影响性能
考虑缩放对碰撞检测的影响

实际应用

在游戏开发中的应用场景

2D 渲染在游戏开发中有广泛的应用：

角色显示：显示游戏角色和 NPC
背景渲染：显示游戏背景和场景
UI 元素：显示用户界面元素
特效显示：显示粒子效果和动画

常见问题

问题 1：精灵不显示怎么办？

解决方案：

确保创建了 Camera2d
检查图像资源路径是否正确
确认精灵的位置在相机视野内

问题 2：如何控制精灵的显示顺序？

解决方案：

使用 Transform 的 translation.z 控制深度
Z 值越大，显示越靠前
默认 Z 值为 0

问题 3：如何优化 2D 渲染性能？

解决方案：

使用精灵图集（Sprite Atlas）减少绘制调用
合理使用精灵批处理
避免过多的小精灵

性能考虑

精灵批处理：将多个精灵合并为一次绘制调用
纹理优化：使用合适的纹理格式和大小
相机优化：只渲染相机视野内的精灵

2D 基础

2D 基础

概述

核心概念

什么是 2D 渲染？

2D 渲染的核心组件

基础用法

显示单个精灵

精灵翻转

精灵移动

进阶用法

精灵旋转

精灵缩放

实际应用

在游戏开发中的应用场景

常见问题

性能考虑

相关资源