<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p data-line="2" class="code-line">UE5公式にある<code>GameAnimationサンプル</code>の中にワープ先やデバッグウィンドウを開くためにタイル上に文字列を表示している箇所があります<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--clfHAEMt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/6e9c3b7e9980f870d554df73.png%3Fsha%3D797aae84d1e71fa80498a351cce524bdfb3d1944" loading="lazy" class="md-img"></p>
<p data-line="5" class="code-line">これを自分でもやってみたいと調べた所、<code>TextRenderingComponent</code>が使われてることがわかりました。<br>
今回はそれを使って自分でやったみたことを短いですが記事にしました。</p>
<h1 id="%E7%92%B0%E5%A2%83" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h1>
<p data-line="10" class="code-line">UE5.4.4</p>
<h1 id="%E3%82%84%E3%82%8A%E6%96%B9" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%8A%E6%96%B9" aria-hidden="true"></a> やり方</h1>
<p data-line="14" class="code-line">まず、自作Actorを作成し、BPを開いたら、Componentを追加を選択します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--6ZgdF4k4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/dd4c8b0281983ec3ae7988e4.png%3Fsha%3Da6be3403f3e132db3da708d1089e9dbd7b5318b6" loading="lazy" class="md-img"></p>
<p data-line="17" class="code-line">選択したら、検索ボックスに<code>text</code>を入れると、テキストレンダリングコンポーネントというものがあるので、 それを選択します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--WMrHC3R8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/bf3025891a47b2cdceaa7ec2.png%3Fsha%3D764a6a77eeb04be26028d8dd514595e237e684a1" loading="lazy" class="md-img"></p>
<p data-line="20" class="code-line">追加できたら、文字を変えます。<br>
文字の変え方は、追加した<code>TextRenderingComponent</code>を選択して、テキスト項目の中にある<code>Text</code>を変更すると文字を変えられます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--LDyNjods--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/266dfa5ac3826f5a19083aa1.png%3Fsha%3Df549240d6f2812b3d66cb21eedfc17ff0653d1c1" loading="lazy" class="md-img"></p>
<p data-line="24" class="code-line">こんな感じに設定した文字が表示されていれば成功です<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--iiIufAZE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/6a106f7bca689646108349c3.png%3Fsha%3Dd660f808fd2a551669bd08a4e82f25dbd707aa92" loading="lazy" class="md-img"></p>


【UE5】TextRenderComponent(テキストレンダリングコンポーネント)を使って3D上に文字を表示する

Discussion