前回の続きです
前回は単純な文字列を表示することができましたので、今回は枠を作ってそこに文字列を表示させるようにします。
黒い枠を100%100%で表示してみます。前回のテキストを表示の手前に実装を書きます。
<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)
 .run();
}

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(100.0)),
 margin: UiRect::all(Val::Px(50.0)),
 ..default()
 },
 color: Color::BLACK.into(),
 ..default()
 });
 // テキストの生成
 command.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)
 })
 .with_style(Style{
 margin: UiRect::all(Val::Px(50.0)), // ウインドウの左下を起点に(50.0)のマージンを取る
 ..default()
 }),
 );
}</code></pre></div>
<ul>
<li>NodeBundleで空の要素を作成します。に相当するらしいです
<ul>
<li>https://bevy-cheatbook.github.io/builtins.html?highlight=rect#bundles</li>
</ul>
</li>
</ul>
<img src="/3702/1.png" alt="画像">
100%になっているのは高さだけで、横幅は100%になっていません。
と、コードを書きつつ、実行結果を見て思ったのはこれはHTMLとCSSにソックリだということです。今はNodeBundleという要素の横に、TextBundleという要素が横並びになっているような状態ではないでしょうか？
試しにTextBundleを消して実行すると、マージンを除けばだいたい100%で表示されました。
<img src="/3702/2.png" alt="画像">
HTMLとCSSに似ていると書きましたが、これはWasmでWebAssemblyとして利用できるので当然だと思います。実際にStyleはcssのflexboxシステムを利用していると書いてありました。
枠に対してテキストを子要素として登録することで、横並びの問題は解決できそうです。とりあえずテキストの位置とかは気にしないでやってみます。
<div class="remark-highlight"><pre class="language-python"><code class="language-python">use bevy::prelude::*;

fn main() {
 App::new()
 .add_plugins(DefaultPlugins)
 .add_startup_system(setup)
 .run();
}

fn setup(
 mut command: Commands,
 asset_server: Res&#x3C;AssetServer>
){
 // フォントの取得
 let font = asset_server.load("fonts/FiraMono-Medium.ttf");
 // カメラの生成
 command.spawn_bundle(Camera2dBundle::default());
 // 枠の生成
 command.spawn_bundle(NodeBundle{
 style: Style {
 size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
 margin: UiRect::all(Val::Px(50.0)),
 ..default()
 },
 color: Color::BLACK.into(),
 ..default()
 })//;
 // テキストを子要素にする
 .with_children(|parent| {
 // クロージャでparentに対してspawnするように記載
 parent.spawn_bundle(TextBundle::from_section(
 "Bevy | Rust",
 TextStyle {
 font: font.clone(), //取得したフォント
 font_size: 60.0,
 color: Color::rgb(0.9, 0.9, 0.9)
 })
 .with_style(Style{
 margin: UiRect::all(Val::Px(50.0)), // ウインドウの左下を起点に(50.0)のマージンを取る
 ..default()
 }),
 );

 }
 );
}
</code></pre></div>
<img src="/3702/3.png" alt="画像">
クロージャを利用してNodeBundleに対してTextBundleを追加しているようなイメージですね。
少しスタイルを変えてみます。
<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)
 .run();
}

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 {
 //高さは50%に指定
 size: Size::new(Val::Percent(100.0), Val::Percent(50.0)),
 //marginは0にしておく
 margin: UiRect::all(Val::Px(0.0)),
 // 追加位置を指定する（感覚cssと同じ)
 align_items: AlignItems::FlexStart,
 ..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)
 })
 // 位置は親要素に依存させるため記載除去
 /*
 .with_style(Style{
 margin: UiRect::all(Val::Px(50.0)), 
 ..default()
 }),
 */
 );

 }
 );
}</code></pre></div>
<img src="/3702/4.png" alt="画像">
<ul>
<li>align_items: AlignItems::FlexStart,
<ul>
<li>これが左下起点？</li>
</ul>
</li>
</ul>
というわけでFlexEndにすると
<div class="remark-highlight"><pre class="language-rs"><code class="language-rs">// 追加位置を指定する（感覚cssと同じ)
align_items: AlignItems::FlexEnd,</code></pre></div>
<img src="/3702/5.png" alt="画像">
イイ感じになりました。これでテキストに関しては親要素の左上起点にして表示されています。
この親要素と子要素という考え方は、UIとか作る際には重要になりそうです。
<h2>シリーズ記事</h2>
◆Rust – Bevyでノベルゲームを作る 文字の表示
<a href="/posts/p3690">リンク</a>
◆Rust – Bevyでノベルゲームを作る 枠の表示
<a href="/posts/p3702">リンク</a>
◆Rust – Bevyでノベルゲームを作る 次の文字を表示
<a href="/posts/p3716">リンク</a>
◆Rust – Bevyでノベルゲームを作る キャラクターを表示する
<a href="/posts/p3731">リンク</a>

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

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

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