新手入门: 基于bevy, 实现图片的加载及平铺功能

483 阅读3分钟

前言

bevy是一款基于纯rust的游戏库, 即使你没有任何rust基础, 但只要你有一点编程的基础知识, 便能看懂如何基于bevy, 实现图片的加载及平铺功能.

想了解bevy游戏详情的同学们, 欢迎点击github开源库查看

与其他游戏库相比, bevy诞生的最晚, 2020年才开发出来, 但是它的star数量已经高达32k多, 这足以说明该游戏库已经取得广大码农的认可及支持. 好, 废话不多说, 让我们开始bevy编程吧!

正文

架构

代码的架构如下所示

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}

接下来, 让我们逐步了解上面代码的功能

  • use是 Rust 中的关键字,用于导入一个模块或路径

  • bevy::prelude::*; 这行代码导入了 Bevy 游戏引擎的预导入模块,其中 bevy 是 Bevy 游戏引擎的主模块,prelude 是其中的一个子模块。* 表示导入该模块中的所有内容,包括类型、函数、宏等。; 表示语句的结束

  • App::new() 方法创建了一个新的 Bevy 应用程序实例,并链式调用了一系列方法来配置应用程序

  • .add_plugins(DefaultPlugins) 方法用于添加默认的 Bevy插件

  • .add_systems(Startup, setup) 方法用于添加启动系统

  • .run() 方法运行整个应用程序。

setup函数

该函数有2个参数, 它们的作用分别如下所示:

  • mut commands: Commands 其中mut表示该参数可修改, 这是一个 Commands 类型的可变引用,用于创建、修改和删除游戏中的实体和组件。在 Bevy 中,你可以使用 commands 对象来执行各种与实体和组件相关的操作。
  • asset_server: Res<AssetServer>: asset_server: 这是一个 AssetServer 类型的资源引用(Res<AssetServer>),用于加载和管理游戏中的资源文件。在 Bevy 中,你可以使用 asset_server 来加载和获取游戏中的各种资源,如纹理、模型、音频等。

接下来, 让我们填充setup里的代码

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // 创建一个默认的 2D 相机的捆绑(bundle)。
    // 相机实体是游戏中非常重要的一个实体,它定义了游戏视图的显示区域和渲染参数。
    commands.spawn(Camera2dBundle::default());
    commands.spawn((
        // SpriteBundle,用于定义带有精灵的实体
        SpriteBundle {
            // texture: asset_server.load("logo.png") 用于加载名为 "logo.png" 的纹理资源,并将其应用到精灵上
            texture: asset_server.load("logo.png"),
            ..default()
        },
        // ImageScaleMode::Tiled 枚举值,表示图片的缩放模式是瓦片模式。
        // 在这种模式下,图片会被水平和垂直地平铺(tile)以填充整个区域,同时指定了水平和垂直方向上的瓦片参数,以及伸展值(stretch_value)为 0.5
        ImageScaleMode::Tiled {
            tile_x: true,
            tile_y: true,
            // 若改成0.2, 则每行每竖会排列5个logo.png
            stretch_value: 0.5,
        },
    ));
}

请注意, 图片资源应放在运行环境下的assets文件夹内, 如下图所示

image.png

stretch_value的值若是0.5, 则每行每竖会平铺2个

image.png

若将其改成0.2, 则每行每竖会排列5个logo.png

好了, 今天的分享到这里便结束啦, 感兴趣的小伙伴们赶紧动手试试吧~