【Rustのまほう2】#21 bevy_simple_text_input

bevy_simple_text_input

前回はキーボード入力を扱い、キーイベントの読み取りについて説明しました。私のゲームでもテキストボックスはあるのですが、キーイベントを直接扱わず、bevy_simple_text_inputというクレートを使っています。

bevy_simple_text_inputはテキストボックス1個だけのシンプルなクレートです。UIについては bevy_egui や bevy_iced のようなより高度なUIツールキットも検討したのですが、ゲームの場合はどうせゲームの機能に合わせた独自のデザインのUIコンポーネントを自分で作ることになりますし、将来のバージョンアップに備えてeguiのような大きなクレートへの依存は避けたかったので、bevy_simple_text_inputを選びました。

テキストボックスの生成

bevy_simple_text_inputの使い方は簡単です。まずはTextInputコンポーネントをspawnで生成します。これはNodeなどのコンポーネントを必須とするUIコンポーネントなので、Nodeのwidthやborderなどで外観を調整できます。また、TextInputTextFontでフォントを指定したり、TextInputValueで入力テキストの初期値を指定できます。以下は私が書いた、ゲームでユーザー名を入力するテキストボックスをspawnする実際のコードです。

parent.spawn((
    Node {
        width: Val::Px(200.0),
        border: UiRect::all(Val::Px(5.0)),
        padding: UiRect::all(Val::Px(5.0)),
        ..default()
    },
    BorderColor::from(BORDER_COLOR_ACTIVE),
    BackgroundColor::from(BACKGROUND_COLOR),
    TextInput,
    TextInputTextFont(TextFont {
        font: assets.dotgothic.clone(),
        font_size: 40.,
        ..default()
    }),
    TextInputTextColor(TEXT_COLOR.into()),
    TextInputSettings {
        retain_on_submit: true,
        ..default()
    },
    TextInputValue(config.player_name.clone()),
));

入力されたテキストの読み取り

入力されたテキストを読み取るには、以下のようにTextInputValueコンポーネントから文字列を取り出すだけです。

fn start_game(
    ...
    text_input_query: Query<&TextInputValue>,
    ...
) {
    ...
    
    let TextInputValue(text_input) = text_input_query.single();
    config.player_name = text_input.clone();

    ...
}

ごくシンプルなクレートなので、最悪Bevy本体のバージョンアップについてこなくても、私が自力でなんとかできるだろうという目論見です。でも bevy_simple_text_input は Bevy 0.15 リリース直後に 0.15 に対応していました。ありがたいですね。