先週の金曜日に新しいホラーゲームのマップを更新しました！

魂棲病院(Tamazumi Hospital)👻IslandCode：1885-3709-4662👻

---

興味があればぜひ体験してみてください。今後も更新を続けます。

みんながYoutuberになりたいと思うこの時代に、従来のホラーゲームよりも、ライブ配信のような画面を追加して、ゲームを現代のテーマにより近づけました。Alcheとしては、常に新しい体験をつくりたいと思っています！バーチャル空間で普段できない、またはやってみたくない体験を安全に体験し、オカルトや怪談のようなスリルを体験することは、ホラーゲームやオカルト番組が人気の理由の一つかもしれません。

それでは今回はコメント欄の作り方を紹介します。次回はコメントアニメーションの作り方を紹介します。

1.問題点：多すぎるコメント欄

今回のゲーム内では、大量のスクロールするコメントが必要です。数量が少ないと、プレイヤーはすぐにこれが偽物であると感じてしまい、体験が損なわれます。FIGMAで画像素材を作成することは可能ですが、実際にはテキストの変化だけです。大量のコメント画像を制作してインポートすると、制作や交換が非常に面倒になります。

したがって、UEFNのWidgetBlueprint内でコメントのフレームを作成し、コメントのバブルはテキストの長さに応じて変化する必要があります。 このようにすると、UEFN内で直接、複数人での作業が容易になり、変更もしやすくなります。

もし半円をそのまま左右に固定し、長方形だけを伸ばすことができれば嬉しいです。試してみたら確かに可能でしたが、もっと簡単な方法もあるため今回はRounded Boxを使用しました。

2.パネルの種類

それではUEFN内のパネルの種類を見てみましょう！簡単な特徴整理を行いました。

図のように、各パネルにはそれぞれ特徴があります。 CanvasPanelはベースとなる存在で、複数のWidgetを配置でき、通常は最下層に使用されます。Canvas Panelに入れたWidgetのアンカーを手動で調整できます。

次に、Widgetを綺麗に並べるためのパネルです：Grid Panel、StackBox、Uniform Grid Panel、Scroll Box。Overlayは他のWidgetの上に覆うことができます。そして中に置かれたWidgetのPaddingが調整できて、幅広い用途はあります。最後に、画像やテキストなどの素材を装载するためのパネル：ScaleBoxとSizeBoxがあります。ScaleBoxとSizeBoxは最大で一つのWidgetしか配置できませんが、Stack Boxのように複数のWidgetを設置できるパネルを入れ、その中に複数の素材を置くことができます。

3.コメント欄の制作

まずWidgetのフレームをかんがえましょう！チャット欄に5つのコメントを配置する必要があります。そこで、最初にScaleBoxを配置して画面サイズに自動的に適応させ、次にCanvas Panelを配置し、その後にStack Boxを配置して縦方向に並べます。Canvas Panel内なので、Stack Boxの位置を自由に調整し、左下隅に配置できます。Stack Box内にさらにもう一つStack Boxを配置してコメント欄を収容し、Stack Boxの上部のPaddingを10に設定します。（最初のコメントを完成したら、さらに4つを直接コピーすることができます。）

次に最初の行のコメントを作成します。まずは、ユーザーのアバター、スペース、コメントテキストを横に並べます。横方向に設定されたStack Boxを配置し、順番にSize Box（ユーザーのアバターが常に正しい比率を保つ）、Image（スペース用）およびScale Box（サイズが変更可能）を配置します。

ユーザーアイコン：【SizeBox > Image】

SizeBoxのWidth OverideとHeight Overideをチェックして、欲しいサイズに設置します（ここでは45x35）。Imageを配置し、希望画像を設定します。

スペース：【Image】

画像サイズのXを調整します（ここでは10）。

コメント：【Scale Box > Canvas Panel > Overlay、Stack Box】

大まかに文字層（Stack Box）と背景層（Overlay）に分けていて、それらを同じCanvas Panelに入れます。そうすると、文字と背景の位置ずれが発生しないようになります。

文字層（Stack Box）：【Stack Box Text Block】TextBlockを文字層（Stack Box）に配置し、Stack Box内のWidgetはPaddingの間隔を設定できます。左右をそれぞれ20に設定し、水平方向と垂直方向に塗りつぶします。この時、任意のテキストを入力すると、最も外側のScale Boxがテキストの長さの変化に応じて変化します。

背景層（Overlay）：【Overlay > Scale Box > Image】 ScaleBoxをオーバーレイに配置し、水平方向と垂直方向に塗りつぶして自動的にサイズを変更するように設定し、その後Imageを配置します。Imageには画像素材は必要ありません。色合いを透明度40%のダークグレーに設定し、DrawAsをRounded Boxに調整すると、伸ばしても変形しない楕円形のコメント背景を得ることができます。

まとめ：