bevy-ui

Bevy 0.19 — UI

このスキルを使う場面

• Node ベースのパネル、ボタン、ラベル、オーバーレイ、メニューをスポーンする。
• Interaction::{None, Hovered, Pressed} と視覚状態を処理する。
• 0.19 の Parley 移行後のテキストをスタイル設定する。
• ポインターによって取得される InputFocus またはアクセシブルな名前を管理する。
• children![] で静的なツリーを、with_children で動的なツリーを構築する。

基本パターン

use bevy::{
    input_focus::{FocusCause, InputFocus},
    prelude::*,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins) // includes InputFocusPlugin in 0.19
        .add_systems(Startup, setup)
        .add_systems(Update, style_button)
        .run();
}

fn setup(mut commands: Commands, assets: Res<AssetServer>) {
    commands.spawn(Camera2d);
    commands.spawn((
        Node {
            width: percent(100),
            height: percent(100),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            ..default()
        },
        children![(
            Button,
            AccessibleLabel::new("Start game"),
            Node {
                width: px(180),
                height: px(64),
                border: UiRect::all(px(3)),
                border_radius: BorderRadius::MAX,
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            BackgroundColor(Color::srgb(0.12, 0.12, 0.15)),
            BorderColor::all(Color::WHITE),
            children![(
                Text::new("Start game"),
                TextFont {
                    font: assets.load("fonts/FiraSans-Bold.ttf").into(),
                    font_size: FontSize::Px(32.0),
                    ..default()
                },
                TextColor(Color::WHITE),
            )],
        )],
    ));
}

fn style_button(
    mut focus: ResMut<InputFocus>,
    mut buttons: Query<
        (Entity, &Interaction, &mut BackgroundColor),
        (Changed<Interaction>, With<Button>),
    >,
) {
    for (entity, interaction, mut background) in &mut buttons {
        *background = match interaction {
            Interaction::Pressed => {
                focus.set(entity, FocusCause::Pressed);
                BackgroundColor(Color::srgb(0.15, 0.55, 0.25))
            }
            Interaction::Hovered => BackgroundColor(Color::srgb(0.22, 0.22, 0.28)),
            Interaction::None => BackgroundColor(Color::srgb(0.12, 0.12, 0.15)),
        };
    }
}

トピック

トピック	リファレンス
Node、Val、フレックス／グリッドレイアウト	レイアウト
FontSource、FontSize、TextLayout	テキスト
Button、Interaction、Changed	インタラクション
色、境界線、角丸	色と境界線
パレット定数	パレット
InputFocus、セマンティクス、アクセシブルなラベル	アクセシビリティ
静的および動的な子エンティティ	子エンティティ
複数のトピックにまたがる注意点	注意点

注意点

• 新しく挿入されたコンポーネントは Changed<T> を満たします。インタラクションシステムは通常、最初の Update 時に新しいボタンを処理します。挿入とその後の変更を区別する必要がある場合は、Ref<T>::is_added() を使用してください。
• ポインターのホバー状態と入力フォーカスは別のものです。カーソルが入ったり出たりしただけで、キーボードや支援技術のフォーカスを移動したり解除したりしないでください。
• TextFont.font は FontSource です。Handle<Font> は .into() で変換してください。font_size は FontSize::Px(32.0) のような FontSize です。
• InputFocus のフィールドは非公開です。get、set(entity, FocusCause)、clear を使用してください。DefaultPlugins が初期化します。
• 表示されるテキストの子エンティティがある場合、Button の名前は推定されます。ただし、表示テキストがない場合、装飾的な場合、または意味が曖昧な場合は、AccessibleLabel を使用してください。

関連項目

• bevy-a11y — ゲームのアクセシビリティ実装全般。
• bevy-fluent — ローカライズされた UI テキスト。
• bevy-cameras — UI カメラとレンダーターゲット。
• bevy-ecs-queries — 変更検出。