[Bevy] 長文を表示する

今度は長文を表示してみます。

テキスト取得

#[derive(Resource)]
struct TextData {
    text: String,
}

テキストを格納するためのリソースを準備し、登録します。

app.insert_resource(TextData { text: get_text() });

テキストはファイルからふつうに読み出します。

fn get_text() -> String {
    let mut f = File::open("assets/dummy.txt").expect("file not found.");
    let mut contents = String::new();
    f.read_to_string(&mut contents)
        .expect("something went wrong reading the file.");
    contents
}

以下の丸写しです。

表示領域描画

let width = windows.single().resolution.width();
let height = windows.single().resolution.height();

commands
    .spawn((
        Node {
            top: Val::Px(25.),
            left: Val::Px(25.),
            width: Val::Px(width - 50.),
            height: Val::Px(height - 50.),
            padding: UiRect {
                left: Val::Px(20.),
                right: Val::Px(20.),
                top: Val::Px(20.),
                bottom: Val::Px(20.),
            },
            ..Default::default()
        },
        BackgroundColor(Color::from(WHITE)),
    ));

Nodeというものがわかっていませんが、ユーザーインターフェース用の領域設定のなにかのようです。

FlexboxやGridなどのCSSの概念が使えるみたいですね。

見覚えのある名前のFieldがあるため、適当に設定しました。

これで、以下が表示されました。

テキスト描画

    /* (略) */
    },
    BackgroundColor(Color::from(WHITE)),
))
.with_children(|builder| {
    builder.spawn((
        Text::new(text_data.text.to_string()),
        TextColor(Color::from(BLACK)),
        TextFont {
            font: asset_server.load("SawarabiGothic-Regular.ttf"),
            font_size: (height - 50. - 40.) / 20. - 4.,
            ..default()
        },
    ));
});

さっき書いたspawn部分へwith_children()をくっつけます。

これで、親要素の内部へテキスト要素が表示されました。

本来、ECSの概念では親子のような階層の概念はないようですが、仮想的な階層が導入されているようです。

終わりに

なんとなく、サウンドノベルゲームのような表示をつくってみました。

少しずつBevyでのコードの書き方がわかってきたような気がします。

まだ複雑なものはつくっていませんが、少しずつステップアップしていきたいものです。

ここまで読んでいただき、ありがとうございました。