UE4で試しに作ってみたらそれっぽいのができたやつ シリーズ第ｎ弾
カウントしていないのでｎです。まあいつもの癖です。
とある動画を見ていて、UMGに WidgetSwitcher というのがあって使えそうだなと思ったのと、UMGのチュートリアルの教材にクイズゲームはどうだろうかと以前より構想していたのがきっかけです。
とある動画というのはこちら
AdobeXD での画面遷移はアートボード間を行ったり来たりするのが基本なので、UE4の場合、１枚のアートボードを１つのアセット として扱えば XDで作っているかのようなワークフローが実現できそうな気がします。
なので、今回AdobeXDは使わずに、UE4の UMG を使ってAdobeXDのような感覚で画面作りにチャレンジしてみようかと思います。
XDの持つ快適な操作性はうらやましい限りですけどね。
この動画からひらめいたのと、AdobeXDを意識したのもあって、見た目がまんまな感じのものが仕上がりますが、そこは突っ込まないでいただけるとありがたいです。
画面構成はこうなります。
今回の記事でフォーカスを当てたいのが下の2つ。
- イベントディスパッチャー Event Dispatcher
- ブループリントインターフェイス Blueprint Interface
別々のWidget間での連携プレーを実践するための、ほどよいチュートリアルにしたいなと思っているのですけどどうでしょうね。操作方法についてはなるべく易しく説明したつもりです。UMGに不慣れな方にチャレンジしてもらえると嬉しいです。
まず作るアセットは 7つ。
- バックグラウンド（共通）
- タイトル
- 出題＆回答ボタン
- 正解演出
- 誤答演出
- ブループリントインターフェイス
- ゲーム画面
表示用のアセットを揃える《準備編》と、ブループリントで動かす《組み立て編》の２部構成で考えています。
いったん最小限の構造が出来上がったら、後日おまけの要素を追加する予定です。
- 問題を増やせるようにする
- 背景をにぎやかにする
- タイマーをつける
- ノルマを設定する
- ゲームオーバー画面を作る
ではさっそく
目次
- エディタを起動する
- フォルダを作る
- ウィジェットブループリントを作る
- バックグラウンド編
- タイトル画面編
- 出題＆回答ボタン画面編
- 正解演出画面編
- 誤答演出画面編
- 素材はできた。次はいよいよブループリント
エディタを起動する
今回使用するUE4のバージョンは 4.26.2 です
新規プロジェクトを作るところから書いていこうと思いますが、すでに日常のプロジェクトをお持ちで、わざわざそこまでという方は、Developerフォルダ内でも大丈夫です。
起動ボタンを押して出てくるダイアログ（下の部分）。
Game を選んで、 Nextボタンをクリック
テンプレートは Blank を選びます。
次に適当なプロジェクト名をセットして Create Project
スプラッシュが出て、しばらく待つとエディタが起動します。
フォルダを作る
画面下のコンテンツブラウザ内で右クリックして、フォルダを新しく用意します。
一番上にあります。
フォルダ名はとりあえず Widgets という名前にしておきます。
ダブルクリックしてこのフォルダ内に入ります。
空っぽだと、以下のような文言が表示されます。
ウィジェットブループリントを作る
UE4において、UI表示を担当する仕組みがUMG（Unreal Motion Graphics）で、アセットのタイプは Widget Blueprint になります。
フォルダを作ったのと同じように右クリックして Widget Blueprint を探します。
今度は一番下の項目の中のさらに一番下にあります。辿りやすい。
適当に wb_BG と名付けました。
ダブルクリックして専用のエディタを開きます。
バックグラウンド編
最初のWidgetは背景専用で作っていきます。
このエディタは、２つの編集モード に切り替えることができます。
右上に並ぶ２つのボタンで、オレンジ色にハイライトされているほうが現在のモードを表しています。
まずはこの Designer モードで 表示したいものを置いていきます。
最初から CanvasPanel が一つだけ置かれた状態で編集を開始します。邪魔だと思えるくらいUMGに慣れるまでは、このCanvasが画面のサイズを表していると思って作業するといいと思います。
今回は背景ということで、まず左のPaletteタブから Common カテゴリの Image をドラッグします。
ドロップできる場所は２か所あります。
作業の手間が少し変わる程度なので、どちらでもOK。
意味合いとしては、
キャンバスにドロップ
置き場所を探りながら直感的に配置したい
マウスで感覚的に位置を決めることができる
ヒエラルキーにドロップ
親子関係（階層構造）を気にしながら配置したい
座標がゼロリセットされた状態で配置される
一度配置してしまえば、座標の調整は、Detail（詳細）タブからも行えるので、どちらの方法でも大差ないです。後から親子関係を変えると表示位置が変わるので、調整の手間を惜しむなら、一考してからどちらかを選択するといいかも。
さてこの取り出した Imageパーツ のサイズと位置を整えるのですが、アンカー（Anchor）の設定をうまく活用したいと思います。
適当にキャンバスにドロップしたらこうなりました。
右のDetailsタブにある Slot > Anchors にあるプルダウンをクリックします。
ポップアップウィンドウの中から右下のアイコンを選択します。
このとき Ctrl キー 押しながらクリックするとラクチンです。
押さずにクリックすると下の画像のようになります。
エディタ右にあるDetail（詳細）タブからパラメータを変更します。
Offest ～ と書かれた部分は、選んだアンカータイプによって変化します。
今回は上下左右全てを 画面の端から何ピクセル？ というアンカーを選んだので、すべてをゼロにすると、画面にピッタリ合うようになります。
Ctrl キー押しながら選択すると、このゼロを入力する手間が省けます。
レスポンシブな背景完成！
この Image パーツは主に画像をセットして使うことが多いのですが、今回はナシで進めます。シンプルなベタ色の四角として使えます。
カラーは Detailsタブの Appearance > Color and Opacity から変更できます。
これで編集完了。
アセットを保存します。
エディタ左上のアイコンを Compile ボタン → Save ボタン の順でクリックすれば保存できます。
ここでのコンパイルの実行は、実際に使える状態に仕上げるというイメージで捉えるとよいかと思います。
何か問題があると警告してくれます。
Saveが完了すると、アセット名の横についた * が消えます。
保存したかどうかは、↑このタブと、
↓コンテンツブラウザでも確認できます。
ちなみに
少しでも変化が生じると、コンパイルボタンに？ のアイコンが付きます。
触ったかどうかの確認にもなりますが、変更して元に戻しても、？のアイコンは元に戻ってくれません。
放置していても、エディタ終了時に、Saveしてないけどええのん？ というダイアログでビビらせてくるので、強い心で Don’t Save を選択するといいでしょう。不要不急のコミット対象になるのを防ぐためです。
タイトル画面編
次はタイトル画面を用意します。
バックグラウンドと同じ要領でWidgeブループリントを作成します。
アセット名前は wb_Title としました。
編集していきます。
キャンバスに、Text と Button を配置します。
階層が必要ないのでまずは適当に置いて大丈夫。
センタリング（中央揃え）したいので、Detailsから設定します。
まずは TextパーツからAnchors の中から 真ん中のアイコンを選びます。
この時 Ctrl キーと Shiftキーを押しながらクリックすると数値入力の手間がいくらか省けます。
Alignment X を 0.5 にすると、 Position X を 0 にするだけで水平方向は中央に配置できます。
あとは、 高さ（Position Y）と文字サイズ（Font > Size）、表示する文字列（Content > Text）をいい感じに設定します。
背景に合わせてカラーもお好みで。
テキストの次は Button も同じようにセンタリングします。
中身が無いので、 Button に Text をドロップします。
中におさまるとこのようになります。
ヒエラルキー上では親子関係になります。
Button をフォーカスした状態で、Detailsタブの設定に Slot > Size to Content というのがあるので、ここを有効にすると、うまく収まってくれます。
Size To Content は「中身に合わせるよ」という意味になります。
この状態で、Text の設定を変更します。
Padding 設定は 親子構造になると子の側で設定できるようになります。
設定方式が CSS に似ていますが、外側に対して働くイメージなのが、CSSと少しニュアンスの違うところです。
スタートボタンとしていい感じになれば、ひとまず完成とします。
出題＆回答ボタン画面編
また新たにWidgetを用意します。
アセット名前は wb_Main としました。
また同じように必要なパーツを配置していきます。
まず Text を一つ配置。これは出題用のテキストが入ります。
問題のテキストが複数行になるのを想定して、サイズを大きめに設定してあります。
文字サイズも読みやすく大きめに。
今回背景が明るめなのと、文字の色を黒くしたかったので少し大きめの Image を半透明にして下敷きを置くことにしました。
名前を Image_Base に変更しています。
UMGでの表示優先（重なり）のコントロールは２種類。
ヒエラルキーでの上下位置 と ZOrder というパラメータです。今回はヒエラルキーで調整します。
後から足した Image は Text の下に置かれるので ドラッグして上下を入れ替えるようにするだけでOK。
Photoshop のレイヤーと逆ですね。
次に Button を用意します。Button には Textも入れておきます。
アンカーは左上のままにしておきます。
ここではサイズとPadding の設定にとどめます。
ここまではタイトル画面のWidgetと同じ構成になります。
さらにこのボタンをまっすぐ並べるための専用パネルを追加します。
Paletteタブの Panel カテゴリにある Vertical Box をドロップします。
この Vertical Box の子になるように、 先に作った Button を入れます。キャンバスでは操作できないのでヒエラルキー上で親子にします。
すると
せっかくサイズ調整したButton が大変なことに！
大丈夫です。
まずはヒエラルキー上で Vertical Box を選択します。
キャンバス上でマウスを使ってサイズを大きくするか、Details タブからサイズを変更できます。
この Vertical Box に入れると、自動で、水平方向にストレッチする仕様になってます。
ちなみに Horizontal Box というのも用意されていて、こちらは垂直方向にストレッチします。
Vertical Box のサイズをざっくり決めたら、アンカーの設定と位置を調整します。
高さは大体Button 4 つ分 を想定。
適当に拡げたら、中のButtonを選択状態にして
Dupulicate（複製）します。右クリックメニューか Ctrl キー 押しながら ｗキー
全部で４つ。
Button 同士のスキマを開けるには、全部の Button を Shiftキーを押しながら選択状態にして、
Detailsタブにある Slot > Padding の設定で、 Bottom を調整します。
レイアウト完成。
コンパイルして保存します。
正解演出画面編
つぎに正解した時の演出用画面を作ります。アセット名は wb_Right にしました。
タイトル画面と全く同じ構成です。テキストが専用なのと、アニメーションがついているくらい。〇は全角文字（日本語の丸）
アニメーションは いい感じに。
まずトラックを新しく追加します。
IN と名前を付けました。
ヒエラルキーの Text → アニメーショントラックの IN の順にクリックして、ハイライトしたら、Detailsタブの下の方にある Render Transform > Scale でキーを打ちます。
キーを打つには、数値を調整して下の〇で囲んだボタンをクリックすると打てます。
調整方法がたくさんあってここ紹介しきれないので、詳しい操作方法については公式のドキュメントをぜひぜひ
こんな感じに打ちました。
動きはこんな具合。
アニメーションができたら、注意しておきたいことがあります。
アニメーショントラックにハイライト（フォーカス状態）が残っていると、見た目の表示が、アニメーショントラックが優勢の状態なので、通常時の状態を見失ってしまうことがよくあります。アニメーションをつけるために変更した値が、そのままデフォルト状態になっていることがあって、いざ確認！というときになって あれ？ というのがたびたび起こるのがUMGです。今のところ慣れるしかない感じですが、とにかくフォーカスを外して確認 するようにすれば意図しない動きを回避できます。
正解演出はこれでいったん完成です。
コンパイルして保存します。
誤答演出画面編
間違えたときの表示です。正解用を複製すると時短できます。
コンテンツブラウザに並んでいるアセットアイコン wb_Right の上で右クリックして、メニューからDuplicate を選択します。
名前は wb_Wrong にしました。
パーツの構成は正解演出と同じなので説明は省かせていただきます。
〇 を ×（全角の乗算記号）にしています。に変えて、サイズを調整していています。
今度はアニメーションを残念な感じにします。
正解は Scaleアニメーション でしたが、Translation（位置） をアニメーションさせます。
誤答演出もひとまず完成です。
コンパイルして保存します。
素材はできた。次はいよいよブループリント
ここまでお付き合いくださった方、おつかれさまでした。
《準備編》ということでまだ動きませんが、次回の記事でブループリントを駆使して完成させるとこまでやります。
レイアウト操作に慣れていれば、30分かからないボリュームだと思います。
UE4のUMGを触り慣れていない方を想定して、比較的細かく操作方法について書いてみたので記事自体は結構なボリュームになってしまいました。次回はどうでしょう・・・
つづきはこちら
