ゲームにおいてUIは、プレイヤーの体験を支える重要な要素だ。本連載では、C&R Creative Studiosの2DCG専門スタジオ「Planet Design Studio」が、Unreal Engineを使用したUI制作の基本を段階的に解説していく。第2回は、前回作成したタイトル画面にアニメーションを追加していく。

＜1＞はじめに

みなさん、こんにちは！　Unreal Engine UI連載 第2回です。

前回はUMGを使って、タイトル画面のUIを作成し、レベル上に表示するところまでを解説しました。

ここからは一歩進み、

• UIアニメーションの作成と再生
• ボタンを別ウィジェットとして作成
• ブループリントでボタン処理を実装

の各ステップを通して、「操作できるUI」をつくっていきます。

＜2＞今回のゴール

今回は、以下の3つで構成されたUIを作成します。

① レベルブループリント
② 親ウィジェット（WBP_Title）
③ 子ウィジェット（WBP_TitleButton）

＜3＞完成までのステップ

完成までの流れは、以下の通りです。

STEP 1：親ウィジェットWBP_Titleのテキストにアニメーションを付ける
STEP 2：ブループリントでアニメーション再生処理を実装
STEP 3：ボタンとなる子ウィジェットWBP_TitleButtonの作成
STEP 4：作成したボタンにアニメーションを付ける
STEP 5：子ウィジェットのグラフにボタン処理を実装
STEP 6：親ウィジェットWBP_Titleに子ウィジェットを配置
STEP 7：ブループリントでアニメーション再生や表示切替の処理を実装
STEP 8：仕上げ

今回は、STEP 1〜2までを進めていきます。

＜4＞UIアニメーションの基本

アニメーションの作成には、「タイムライン」を使用します。

画面下の「アニメーションウィンドウ」と、2つ目の「タイムラインウィンドウ」にキーフレームを打つことで、動きを付けていきます。

アニメーションキー（キーフレーム）とは？

UEのUMGアニメーションにおける「アニメーションキー（キーフレーム）」とは、ウィジェット（画像やテキストなど）の位置やサイズ、透明度、色といったプロパティの状態を記録し、時間の経過に応じた変化を制御するための設定ポイントです。

詳細パネルでキーを追加したいプロパティの［Add Key（キー追加）］を選択すると、その時点の値がアニメーションキー（キーフレーム）として登録されます。

追加の手順は以下の通りです。

① タイムラインバーを動かす
② 数値を入力する
③ ［Add Key］ボタンを押す
④ アニメーションキーが追加される

アニメーションキーの追加方法は他にもありますので、後々ご紹介します。

STEP 1：親ウィジェットWBP_Titleのテキストにアニメーションを付ける

まず、以下のように、テキストが点滅するアニメーションを作成していきます。

1-1：テキストコンポーネントの名前を変更する

「PRESS ANY BUTTON」のテキストコンポーネントを選択し、画面右上の詳細エリアで、コンポーネントの名前を「Text_PRESS」に変更します。

1-2：アニメーショントラックを追加する

UMGでアニメーション作成を開始するには、最初にアニメーショントラックを追加する必要があります。

「Text_PRESS」のテキストコンポーネントを選択し、アニメーションウィンドウの左の項目からさらに［+アニメーション］を選択して、アニメーショントラックを追加します。

追加したトラックの名前を、デフォルトの「NewAnimation」から、点滅するテキストのアニメーションを表す「BlinkingText」に変更します。

アニメーショントラックを追加するとタイムラインがアクティブになり、「アニメーションキー（キーフレーム）」を追加できるようになります。

1-3：アニメーションキーを追加する

それでは、作成したアニメーションのトラックにアニメーションキー（以下、キー）を追加していきましょう。

「Text_PRESS」が選択されている状態で、先ほど追加したアニメーション「BlinkingText」を選択します。

アニメーションを選択するとタイムラインがアクティブになり、「タイムラインバー」を移動できるようになります。

まずは、アニメーションの開始位置となる「0.00」にキーを追加してみましょう。

①タイムラインバーを「0.00」の位置に移動します。
②キーを追加します。

キーは、対象のコンポーネント（今回はテキストコンポーネント）とアニメーショントラックを選択した状態で追加できます。

これで「0.00」の位置にキーが追加されました。

今回はループする点滅アニメーションを作成するため、アニメーションの開始位置だけでなく終了位置にもキーを設定します。タイムラインバーを「1.00」の位置に移動し、同様にキーを追加してください。

これで、アニメーションの開始位置と終了位置にキーを追加することができました。現在の「Text_PRESS」は、開始位置と終了位置で同じ状態が設定されているため、まだ点滅せず常に表示されたままです。

そこで次は、アニメーションの途中でテキストが薄くなる状態を設定してみましょう。

①タイムラインバーを「0.50」の位置に移動し、
②「Text_PRESS」の「Render Opacity」を「1.0」から「0.3」に変更して
③キーを追加します。

これで、「Text_PRESS」の点滅アニメーションに必要なキーの設定は完了です。

では、アニメーションウィンドウの再生ボタンを押して、動きを確認してみましょう。

再生時に「PRESS ANY BUTTON」の文字列が点滅していれば、キーは正しく設定できています。

TIPS：タイムラインの表示調整

タイムラインの表示を調整（拡大・縮小）したいときは、以下の方法があります。

・タイムラインとコンポーネント名の中心をドラッグして左右に動かす

・タイムライン上で［Ctrl］キー＋マウスのホイール操作で拡大・縮小

・タイムライン上で［Ctrl］キー＋マウス右ボタン＆ドラッグで左右に移動

1-4：コンパイルを実行して動作を確認する

次にコンパイルを行い、実行画面でアニメーションの動作を確認してみましょう。「コンパイル」は「作成したUIをきちんと動く状態に確定させる処理」のことを指します。

画面左上のコンパイルボタンに黄色いアイコンが表示されている場合は、変更内容がまだ反映されてない状態です。コンパイルを実行し、問題がなければアイコンが緑色に変わります。

コンパイルボタンが緑色になったことを確認したら、「実行」ボタンを押して、プレビュー画面で動作を確認してみましょう。

プレビュー画面は表示されますが、先ほど作成した「Text_PRESS」のアニメーションは動作していません。

これは、現時点では「グラフパネル」でアニメーションを再生する処理を追加していないためです。アニメーションデータは作成されていますが、再生を指示する処理がないため、プレビュー画面では静止した状態で表示されます。

STEP 2：ブループリントでアニメーション再生処理を実装

次はグラフパネルへ移動して、作成したアニメーション「BlinkingText」を再生する処理を追加してみましょう。

2-1：グラフ画面に切り替え

画面右上にある［グラフ］ボタンをクリックして、グラフ画面に切り替えます。

2-2：アニメーション処理を追加

今回は、画面が表示されたタイミングで、テキストの点滅アニメーションを再生するかたちにします。

まずは［Event Construct］ノードにアニメーション再生処理を追加していきます。

アニメーションを再生するには、［Play Animation］ノードを使用します。

グラフパネル内で右クリックし、検索欄に「Play Animation」と入力します。表示されたノードの中から、「ターゲットはユーザーウィジェット」と表記されているPlay Animationを選択して追加してください。

追加した［Play Animation］ノードと［Event Construct］ノードを接続します。［Event Construct］の実行ピンから［Play Animation］の実行ピンへドラッグして接続してください。

この時点では、まだアニメーションは再生されません。［Play Animation］ノードに、どのアニメーションを再生するのか指定する必要があります。

前の手順で作成した「BlinkingText」を接続してみましょう。画面左の［変数］パネルから［アニメーション→BlinkingText］をイベントグラフへドラッグ＆ドロップし、［Get BlinkingText］を選択します。

追加した「BlinkingText」を［Play Animation］ノードの［In Animation］に接続します。

最後に、アニメーションをループ再生するため、［Num Loops to Play］の値を「1」から「0」に変更します。

これでアニメーション再生処理の設定は完了です。コンパイルを実行し、問題がなければ実行ボタンを押して動作を確認してみましょう。

プレビュー画面で「PRESS ANY BUTTON」の点滅アニメーションがループ再生されていれば成功です。

まとめ

少し長くなってしまいましたが、今回はここまでになります。今回の記事を通して、UMGでのアニメーション作成の流れを少しでも掴んでいただけたら幸いです。

今回は以下のSTEP 1〜2までの工程を進めました。

STEP 1：親ウィジェット［WBP_Title］のテキストにアニメーションを設定する
STEP 2：ブループリントでアニメーション再生処理を実装する　← 今回はここまで

次回はSTEP 3〜4の工程を進めていきます。

STEP 3：ボタンとなる子ウィジェット［WBP_TitleButton］を作成する
STEP 4：作成したボタンにアニメーションを追加する
STEP 5：子ウィジェットのグラフにボタン処理を実装する
STEP 6：親ウィジェット［WBP_Title］に子ウィジェットを配置する
STEP 7：ブループリントでアニメーション再生や表示切り替え処理を実装する
STEP 8：仕上げ

イベント開催のお知らせ

Unreal Engineを使ったUI制作に興味はあっても、
「どこから触り始めればいいのかわからない」
「一度インストールしてみたものの、その先に進めていない」
という声は、現場のデザイナーからよく耳にします。

加えて、UIについて気軽に情報交換できる場や、同じ領域のデザイナー同士でつながる機会が少ない、という声も少なくありません。そうした課題感を踏まえ、この連載と連動するかたちで、UIデザイナー向けの交流会イベントを7月17日（金）に開催します。

当日は、UEの導入から基本操作までを実演形式で解説するだけでなく、AIを活用したUE5の実践的な使い方にも触れる予定です。また、同じ関心をもつUIデザイナー同士が、実際の制作や思考、悩みについて気軽に語り合える交流の場も用意しています。

これからUEを触り始めたい方はもちろん、触れたことはあるものの活用に課題を感じている方にとっても、新しい知見とつながりの両方を得られる機会になればと考えています。「気になっていたまま」を終わらせるきっかけとして、ぜひご参加ください。

【Unreal Engine 5 初級編】「きになっちゃってたっ！このスキル」～UIデザイナー交流会～

日時：7月17日（金） 19:00～21:30

場所：株式会社クリーク･アンド･リバー社
C&R Creative Studios 御成門 12階 Community Hub
〒105-0003
東京都港区西新橋三丁目20番1号 MSC御成門ビル

参加費：無料
定員：50名
主催：Planet Design Studio｜C&R Creative Studios
応募締め切り：7月17日（金）19:00

イベント詳細はこちら