<p>右キーを押下したら次の文字を表示させようと思います。changeTextみたいなのがあればいいのですが、なさそう？</p>
<p>テキストの更新を行っているサンプルを見つけましたので、こちらを参考に実装してみます</p>
<p>https://bevyengine.org/examples/ui/text/</p>
<h2>次のメッセージの表示</h2>
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">use bevy::prelude::*;

fn main() {
    App::new()
    .add_plugins(DefaultPlugins)
    .add_startup_system(setup)
    .add_system(next_message) //定義した関数を追加する
    .run();
}

// メッセージというコンポーネントを定義する
#[derive(Component)]
struct Message;

fn setup(
    mut command: Commands,
    asset_server: Res&#x26;lt;AssetServer&#x26;gt;
){
    // フォントの取得
    let font = asset_server.load(&#x26;quot;fonts/FiraMono-Medium.ttf&#x26;quot;);
    // カメラの生成
    command.spawn_bundle(Camera2dBundle::default());
    // 枠の生成
    command.spawn_bundle(NodeBundle{
                style: Style {
                    size: Size::new(Val::Percent(100.0), Val::Percent(50.0)),
                    margin: UiRect::all(Val::Px(0.0)),
                    align_items: AlignItems::FlexEnd,
                    ..default()
                },
                color: Color::BLACK.into(),
                ..default()
    })
    .with_children(|parent| {
            parent.spawn_bundle(TextBundle::from_section(
                &#x26;quot;Bevy | Rust&#x26;quot;,
                TextStyle {
                    font: font.clone(),
                    font_size: 60.0,
                    color: Color::rgb(0.9, 0.9, 0.9)
                })
            )
            //メッセージの登録
            .insert(Message);
        }
    );
    
}

// キーイベントを受け取り、右キーを押下していたらテキストを書き換える
fn next_message(
    key_input: Res&#x26;lt;Input&#x26;lt;KeyCode&#x26;gt;&#x26;gt;,
    mut query: Query&#x26;lt;&#x26;amp;mut Text, With&#x26;lt;Message&#x26;gt;&#x26;gt;
){
    if key_input.pressed(KeyCode::Right) {
        let text = query.get_single_mut();
        text.unwrap().sections[0].value = &#x26;quot;this is next message.&#x26;quot;.to_string();
    }
}</code></pre></div>
<p><img src="/3716/1.png" alt="画像"></p>
<p>テキストの更新が行えましたが、実装については駆け足になっています。</p>
<h2>複数のメッセージを表示する</h2>
<p>次のメッセージが一つしかないのは流石にお粗末なので、複数のメッセージを表示できるようにします。</p>
<p>まずはどうやって複数のメッセージを管理するのか考えたのですが、以下のようにしてみました。</p>
<ul>
<li>Message構造体にmessagesというベクタを定義</li>
<li>イベントが発生したらmessagesからpopする</li>
</ul>
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">use bevy::prelude::*;

fn main() {
    App::new()
    .add_plugins(DefaultPlugins)
    .add_startup_system(setup)
    .add_system(next_message) //定義した関数を追加する
    .run();
}

// メッセージというコンポーネントを定義する
// い
#[derive(Component)]
struct Message{
    messages: Vec&#x26;lt;String&#x26;gt;,
}


fn setup(
    mut command: Commands,
    asset_server: Res&#x26;lt;AssetServer&#x26;gt;
){

    // フォントの取得
    let font = asset_server.load(&#x26;quot;fonts/FiraMono-Medium.ttf&#x26;quot;);
    // カメラの生成
    command.spawn_bundle(Camera2dBundle::default());
    // 枠の生成
    command.spawn_bundle(NodeBundle{
                style: Style {
                    size: Size::new(Val::Percent(100.0), Val::Percent(50.0)),
                    margin: UiRect::all(Val::Px(0.0)),
                    align_items: AlignItems::FlexEnd,
                    ..default()
                },
                color: Color::BLACK.into(),
                ..default()
    })
    .with_children(|parent| {
            parent.spawn_bundle(TextBundle::from_section(
                &#x26;quot;Bevy | Rust&#x26;quot;,
                TextStyle {
                    font: font.clone(),
                    font_size: 60.0,
                    color: Color::rgb(0.9, 0.9, 0.9)
                })
            )
            //メッセージの登録
            .insert(Message{
                messages: [
                    &#x26;quot;hello&#x26;quot;.to_string(),
                    &#x26;quot;rust novel game&#x26;quot;.to_string()
                ].to_vec()
            });
        }
    );
    
}

// キーイベントを受け取り、右キーを押下していたらテキストを書き換える
fn next_message(
    key_input: Res&#x26;lt;Input&#x26;lt;KeyCode&#x26;gt;&#x26;gt;,
    mut query: Query&#x26;lt;(&#x26;amp;mut Text, &#x26;amp;mut Message)&#x26;gt;
){
    if key_input.pressed(KeyCode::Right) {
        let result = query.get_single_mut();
        // クエリの結果からタプルを取り出す
        let tuple = result.unwrap();
        // Text部分
        let mut text = tuple.0;
        // Message部分
        let mut message = tuple.1;
        // 書き換える
        text.sections[0].value = &#x26;quot;this is next message.&#x26;quot;.to_string();
        // Messageのmessagesから1件取り出す
        let get_message = message.messages.pop();
        // 取り出したOptionをmatchにかける
        match get_message {
           Some(x) =&#x26;gt; println!(&#x26;quot;{}&#x26;quot;, x),
           None =&#x26;gt; println!(&#x26;quot;結果がNoneです&#x26;quot;) 
        }
    }
}</code></pre></div>
<p><img src="/3716/2.png" alt="画像"></p>
<p>messagesで設定した値を正しくpopしていることは確認できますが、一度キーを押しただけなのにすぐに結果がNoneですというログが表示されてしまっていますので、その辺を含めて修正していきます。</p>
<h4>余談</h4>
<p>この複数のメッセージを表示するっていうのに苦戦しました。最初はイテレータでnext呼べばいいでしょう？となったが、ごちゃごちゃしまくって断念。</p>
<p>その後も配列とカウンタで～とかやってもコンパイルが通らず断念。</p>
<p>結果的には構造体が持つVecをpopして順番に取り出すというのに落ち着きました。</p>
<h2>just_released</h2>
<p>キーイベントはワンプッシュでも毎フレーム呼ばれるので、popが一気に呼ばれてしまいます。代わりにjust_releasedというメソッドでイベントの監視を行います。</p>
<ul>
<li>pressed
<ul>
<li>キーを押して離す間イベントがtureになる</li>
</ul>
</li>
<li>just_released
<ul>
<li>キーを話した時の1フレームがtrueになる</li>
</ul>
</li>
</ul>
<p>詳細 https://bevy-cheatbook.github.io/input/mouse.html?highlight=button#mouse-buttons</p>
<p>なのでnext_messageメソッドを以下のように修正します</p>
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">fn next_message(
    key_input: Res&#x26;lt;Input&#x26;lt;KeyCode&#x26;gt;&#x26;gt;,
    mut query: Query&#x26;lt;(&#x26;amp;mut Text, &#x26;amp;mut Message)&#x26;gt;
){
    // キーを離した時に呼ばれる
    if key_input.just_released(KeyCode::Right) {

        let result = query.get_single_mut();
        // クエリの結果からタプルを取り出す
        let tuple = result.unwrap();
        // Text部分
        let mut text = tuple.0;
        // Message部分
        let mut message = tuple.1;
        
        // Messageのmessagesから1件取り出す
        let get_message = message.messages.pop();
        // 取り出したOptionをmatchにかける
        match get_message {
           Some(x) =&#x26;gt; {
                // ここで書き換える
                text.sections[0].value = x;
           },
           None =&#x26;gt; println!(&#x26;quot;結果がNoneです&#x26;quot;)  // ここでメッセージが空になったときのイベントを行う
        }
    }
}</code></pre></div>
<p><img src="/3716/3.png" alt="画像"></p>
<p>右キーを話すと画面のテキストが変更されます。</p>
<p>現在はpopメソッドを使っているので、感覚的には設定するメッセージを後ろから設定していく必要がありますが、ここは次回修正します。</p>
<h2>シリーズ記事</h2>
<p>◆Rust – Bevyでノベルゲームを作る 文字の表示</p>
<p><a href="/posts/p3690">リンク</a></p>
<p>◆Rust – Bevyでノベルゲームを作る 枠の表示</p>
<p><a href="/posts/p3702">リンク</a></p>
<p>◆Rust – Bevyでノベルゲームを作る 次の文字を表示</p>
<p><a href="/posts/p3716">リンク</a></p>
<p>◆Rust – Bevyでノベルゲームを作る キャラクターを表示する</p>
<p><a href="/posts/p3731">リンク</a></p>

Rust – Bevyでノベルゲームを作る 次の文字を表示

Rust – Bevyでノベルゲームを作る 次の文字を表示

Rust – Bevyでノベルゲームを作る次の文字を表示