<p>テキストの表示ができたので、キャラクターを表示してみます。ここまでやれば大分ノベルゲームっぽくなります。</p>
<h2>キャラクターの表示</h2>
<p>とりあえずキャラクターを表示させてみます。コードを以下のように記載します</p>
<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(SpriteBundle {
        texture: asset_server.load(&#x26;quot;images/chara.png&#x26;quot;),
        transform: Transform { 
            scale: Vec3::new(0.1, 0.1,1.0),
            ..Default::default()
        },
        ..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.just_released(KeyCode::Right) {
        let result = query.get_single_mut();

        let tuple = result.unwrap();

        let mut text = tuple.0;
        let mut message = tuple.1;

        let get_message = message.messages.pop();
        match get_message {
           Some(x) =&#x26;gt; {
                text.sections[0].value = x;
           },
           None =&#x26;gt; println!(&#x26;quot;結果がNoneです&#x26;quot;)
        }
    }
}</code></pre></div>
<ul>
<li>SpriteBundle
<ul>
<li>画像を表示するのに利用します</li>
</ul>
</li>
</ul>
<p><img src="/3731/1.png" alt="画像"></p>
<p>キャラクターは表示されますが、メッセージエリアと被っているのでキャラクターが隠れています。</p>
<h2>透過処理</h2>
<p>NodeBundleを生成しているところの、colorをrgbaメソッドを利用して透明度まで指定できるようにします</p>
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">// 枠の生成
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::rgba(0.0, 0.0, 0.0, 0.6).into(),
            // color: Color::BLACK.into(),
            ..default()
})</code></pre></div>
<p><img src="/3731/2.png" alt="画像"></p>
<p>それらしくなりました</p>
<h2>画像の位置を修正する</h2>
<p>画面中央にある画像を、少しだけ上に配置します。SpriteBundleのtransformはtranslationにて位置を設定できます。中央を起点にしますので、y座標だけ少し値を設定してあげます</p>
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">// キャラクターの表示
command.spawn_bundle(SpriteBundle {
    texture: asset_server.load(&#x26;quot;images/chara.png&#x26;quot;),
    transform: Transform { 
        scale: Vec3::new(0.1, 0.1,1.0),
        translation: Vec3::new(0.0, 70.0, 0.0),
        ..Default::default()
    },
    ..default()
});</code></pre></div>
<p><img src="/3731/3.png" alt="画像"></p>
<h2>VecDeque</h2>
<p>現在はVec#popメソッドを使っているので最後に追加されたメッセージから出力されています。</p>
<p>これは感覚的ではないので修正します。</p>
<p>VecDequeにはpop_frontというメソッドがあり、先頭の要素から取得できます。これを利用するように修正します</p>
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">use std::collections::VecDeque;

use bevy::prelude::*;

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

#[derive(Component)]
struct Message{
    // VecDequeに変更する
    messages: VecDeque&#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(SpriteBundle {
        texture: asset_server.load(&#x26;quot;images/chara.png&#x26;quot;),
        transform: Transform { 
            scale: Vec3::new(0.1, 0.1,1.0),
            translation: Vec3::new(0.0, 70.0, 0.0),
            ..Default::default()
        },
        ..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::rgba(0.0, 0.0, 0.0, 0.6).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)
                })
            )
            // ここをVecDequeに変更する
            .insert(Message{
                messages: VecDeque::from([
                    &#x26;quot;hello&#x26;quot;.to_string(),
                    &#x26;quot;Do You Like Rust?&#x26;quot;.to_string()
                ])
            });
        }
    );
}

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();

        let mut text = tuple.0;
        let mut message = tuple.1;

        // pop_frontメソッドに変更
        let get_message = message.messages.pop_front();
        match get_message {
           Some(x) =&#x26;gt; {
                text.sections[0].value = x;
           },
           None =&#x26;gt; println!(&#x26;quot;結果がNoneです&#x26;quot;)
        }
    }
}</code></pre></div>
<ul>
<li>messages: VecDeque
<ul>
<li>型を変更しています</li>
</ul>
</li>
<li>messages: VecDeque::from([])
<ul>
<li>初期化の方法がVecとは異なっています</li>
</ul>
</li>
<li>message.messages.pop_front();
<ul>
<li>これが先頭から取得するメソッドになります</li>
</ul>
</li>
</ul>
<p>これでメッセージも管理しやすくなりました</p>
<p><img src="/3731/4.png" alt="画像"></p>
<p>これでかなりノベルゲームっぽくなりました。ゲーム要素はないですが。</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でノベルゲームを作るキャラクターを表示する