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

＜1＞はじめに

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

前回は、「操作できるUI」を作るための最初のステップとして、タイトル画面の文字列にアニメーションを付けるところまでを解説しました。

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

前回も紹介しました、完成までの流れは、以下の通りです。

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

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

STEP 3：ボタンとなる子ウィジェットWBP_TitleButtonの作成

ここからは、タイトル画面で使用するボタンを作成していきます。今回はボタン部分を独立した子ウィジェットとして作成し、後ほど親ウィジェットである「WBP_Title」から利用できるようにします。

3-1：ウィジェットブループリントを作成

まずは、「WBP_Title」を作成した場所に新しいウィジェットブループリントを作成しましょう。

コンテンツブラウザで［追加］、または右クリックから［ユーザーインターフェイス→ウィジェットブループリント］を選択します。作成したウィジェットブループリントの名前を「WBP_TitleButton」に変更します。

作成したWBP_TitleButtonを開きます。

3-2：ウィジェットの表示サイズを設定

次に、ウィジェットの表示サイズを設定します。

［Fill Screen］を選択してプルダウンメニューを開き、［Desired］を選択します。［Fill Screen］はウィジェットを画面いっぱいに表示する設定です。今回はボタンを作成するため、［Desired］を選択してコンテンツ本来のサイズで表示されるようにします。

• 

• 

3-3：テクスチャ素材をインポートする

続いて、ボタン用のテクスチャとUIコンポーネントを配置していきます。

以下から使用する素材をダウンロードし、「/Game/Asset/Texture」の場所に格納（インポート）してください。

【第3回素材データ】ダウンロードはこちら＞＞

【素材内容】
・Img_Btn_Normal.png　…　通常時
・Img_Btn_Hover.png　…　ホバー時（マウスカーソルが重なったとき）
・Img_Btn_Hover_Outline.png　…　ホバー時
・Img_Btn_Hover_Gauss.png　…　ホバー時
・Img_Btn_Star.png　…　ホバー時
・Img_Btn_Pressed.png　…　ボタンを押したとき

【格納場所】
/Game/Asset/Texture

3-4：インポートしたテクスチャの設定

インポートしたテクスチャの設定を行います。

Textureアセットをダブルクリックしてテクスチャエディタを開き、詳細パネルで［Texture Group］の設定を［UI］に変更します。これを、インポートした全てのテクスチャに対して行います。

3-5：ボタンのSize Boxを作成

テクスチャの設定が完了したら、ウィジェット画面に戻りボタンを作成していきます。

今回は、以下の構成でボタンを作成していきます。まずは完成形を確認してみましょう。

まずは、ボタンを固定サイズで表示するための「Size Box」を追加します。

①［パレット］の検索欄に「Size Box」と入力します（「サイズボックス」でも検索できます）。
②［パネル］カテゴリに表示された［サイズボックス］を、［階層］エリアの［WBP_TitleButton］へドラッグ＆ドロップして配置します。
※この時点ではサイズが設定されていないため、枠は表示されません。
③［詳細］パネルで名前を「SizeBox_Button」に変更します。
④［Is Variable］にチェックを入れます。 ※後ほどグラフパネルから参照するため、有効にしておきます。
⑤［Width Override］にチェックを入れ、「400.0」を入力します。［Height Override］にもチェックを入れ、「80.0」を入力します。これで「SizeBox_Button」のサイズが横400px、縦80pxに固定されます。

3-6：Overlayの配置

次に、「SizeBox_Button」の下に「Overlay（オーバーレイ）」を配置します。

Overlayを配置する理由は、この後、ボタン画像やテキストなどのUIを重ねて表示するためです。Overlayは「UIを重ねるための箱」と考えるとわかりやすいでしょう。

①［パレット］の検索欄に「Overlay」（または「オーバーレイ」）と入力します。
②［パネル］カテゴリに表示された［オーバーレイ］を、［階層］エリアの［SizeBox_Button］へドラッグ＆ドロップして配置します。
③［詳細］パネルの［スロット（サイズボックススロット）］で、［Horizontal Alignment］が「水平方向に塗りつぶし」（右端）、［Vertical Alignment］が「垂直方向に塗りつぶし」（右端）になっていることを確認します。「塗りつぶし」以外が選択されている場合は、それぞれ「塗りつぶし」に変更してください。

3-7：ボタンコンポーネントを配置

「ボタン」コンポーネントを配置します。

①［パレット］の検索欄に「Button」（または「ボタン」）と入力します。
②［一般］カテゴリに表示された［ボタン］を、［階層］エリアの［オーバーレイ］の下へドラッグ＆ドロップして配置します。
③［詳細］パネルで名前を「Button_Main」に変更します。
④［Is Variable］にチェックを入れます。
⑤［詳細］パネルの［スロット（オーバーレイスロット）］で、［Horizontal Alignment］を「水平方向に塗りつぶし」、［Vertical Alignment］を「垂直方向に塗りつぶし」に設定します。

3-8：ボタンにテクスチャを設定

配置した「Button_Main」にテクスチャを設定します。設定するテクスチャの項目は「Normal（通常時）」「Hovered（ホバー時）」「Pressed（押した時）」の3項目あります。

以下の内容で設定していきます。

▼Normal（通常時）

Image：Img_Btn_Normal.png
Tint RGBA：1.0
Draw As：Box　※1
Margin：0.5　※2

※1：Draw Asの設定
［Draw As］は、ボタン画像を「どのように引き伸ばすか」を決める設定です。今回は角の形を維持したまま画像を拡大するため、「Box」に設定します。
 

設定

意味

Image

そのまま

Box

角を守って伸ばす

Border

枠のみ表示

※2：Marginの設定
［Margin］は、［Draw As］が「Box」または「Border」の場合に、「画像のどこを伸ばすか」を指定する設定です。四隅の形を維持しながら中央部分だけを伸縮させたい場合に使用します。

▼Hovered（ホバー時）

Image：Img_Btn_Hover.png
Tint RGBA：1.0
Draw As：Box
Margin：0.5

▼Pressed（押した時）

Image：Img_Btn_Pressed.png
Tint RGBA：1.0
Draw As：Box
Margin：0.5

3-9：Horizontal Boxの配置

ここまでで、ボタンの土台が完成しました。

今回作成するボタンは、カーソルが重なったときに表示が切り替わる仕様にします。そこで、ボタン内には「イメージ」「テキスト」「スペーサー」の3つの要素を配置します。

①通常時（Normal）
通常時は、ボタン中央に配置したテキストのみを表示します。

②ホバー時（Hovered）
カーソルがボタン上に重なったときは、イメージとテキストを表示します。テキストはボタン中央に固定したまま、その左側にイメージが表示されるレイアウトにします。

このとき、スペーサーは画面上には表示されませんが、テキストを常に中央に配置するために使用します。以下のような構成になることをイメージしながら作業を進めていきましょう。

このボタンウィジェットは1つだけ作成し、後ほどタイトル画面に3つ配置して使い回します。そのため、ボタンごとにテキストの文字数が変わることを考慮する必要があります。

今回は、文字数が変わっても常にテキストがボタンの中央に配置されるように、以下の手順でレイアウトを要素を追加していきます。

まずは3つの要素を横並びで配置したいのですが、ボタンコンポーネントには1つの要素しか追加できません。試しにボタンの階層下へテキストを追加した後、さらにイメージを追加しようとしてもできません。

これは、ボタンが「中に1つのUIしか入れられない箱」になっているためです。

複数の要素を配置するには、「ボタンの中に別の箱を入れる」方法を使用します。

今回は要素を横並びに配置するため、［HorizontalBox］を使用します。［HorizontalBox］は、「UIを横並びに自動配置するためのレイアウトコンテナ（箱）」です。

それでは追加していきましょう。

①［パレット］の検索欄に「HorizontalBox」と入力します。
②［パネル］カテゴリに表示された［HorizontalBox］を、［階層］エリアの［Button_Main］へドラッグ＆ドロップして配置します。
③ 配置直後の［HorizontalBox］は中に何も入っていないため、サイズが「0」の状態で表示されます。
④［詳細］パネルで名前を［HorizontalBox_Button］に変更します。
⑤［スロット（ボタンスロット）］の［Padding］を「0.0」に設定します。

3-10：イメージの配置

［HorizontalBox］の中に、ボタンを構成する要素を追加していきます。まずは、ホバー時に表示するイメージを配置しましょう。

①［パレット］の検索欄に「画像」と入力します。
②［一般］カテゴリに表示された［画像］を、［階層］エリアの［HorizontalBox_Button］へドラッグ＆ドロップして配置します。
③［詳細］パネルで名前を［Img_Star］に変更します。
④［アピアランス → Brush → Image］に、テクスチャ［Img_Btn_Star］を設定します。
⑤［Img_Star］に設定したテクスチャが表示されます（サイズ：64×64）。

3-11：テキストの配置

次に、2つ目の要素となるテキストを［Img_Star］の横に配置します。

①［パレット］の検索欄に「テキスト」と入力します。
②［一般］カテゴリに表示された［テキスト］を、［階層］エリアの［HorizontalBox_Button］へドラッグ＆ドロップして配置します。
③［詳細］パネルで名前を［Text_ButtonName］に変更します。
④［Is Variable］にチェックを入れます。
⑤［スロット］で、［Horizontal Alignment］を「水平方向に中央揃え」、［Vertical Alignment］を「垂直方向に中央揃え」に設定します。
⑥［コンテンツ］の［Text］に「BtnName」と入力し、プレビュー用のテキストを設定します。
⑦［アピアランス］→［Font］→［Size］を「40」に設定します。
⑧設定した内容がプレビューに反映されます。

3-12：スペーサーの配置

ここで表示結果を確認してみましょう。

現在は［Text_ButtonName］が［HorizontalBox_Button］内で中央揃えになっているだけで、ボタン全体の中央に配置されているわけではありません。そのため、テキストがボタン中央に配置されているようには見えません。

［Text_ButtonName］を常にボタン中央に配置するため、3つ目の要素となるスペーサーを追加します。今回は［Img_Star］と同じ幅のスペーサーを配置することで、［Text_ButtonName］がボタン中央に配置されるようにします。

①［パレット］の検索欄に「スペーサー」と入力します。
②［プリミティブ］カテゴリに表示された［スペーサー］を、［階層］エリアの［HorizontalBox_Button］へドラッグ＆ドロップして配置します。
③［詳細］パネルの［アピアランス］→［Size］で、XとYの値を「64.0」に設定します。
④［スペーサー］のサイズが「64×64」で設定されます。

これで、ボタン内部のベース作成は完了です。

3-13：Img_Starの表示設定

［Img_Star］は通常時には非表示の状態にするため、［レンダリング］の［Render Opacity］を「0.0」に設定します。
※後ほど作成するアニメーションで、表示されるように設定します。

3-14：ホバー時テクスチャの設定

ホバー時に表示するテクスチャを2つ配置します。
1つめは、ボタンのアウトライン用のテクスチャです。

①［パレット］の検索欄に「画像」と入力します。
②［一般］カテゴリに表示された［画像］を、［階層］エリアの［オーバーレイ］へドラッグ＆ドロップして配置します。
③［詳細］パネルで名前を「Img_BtnOutline」に変更します。
④［Is Variable］にチェックを入れます。
⑤［スロット（オーバーレイ）］で、［Horizontal Alignment］を「水平方向に塗りつぶし」、［Vertical Alignment］を「垂直方向に塗りつぶし」に設定します。
⑥［アピアランス → Brush → Image］に、テクスチャ［Img_Btn_Hover_Outline］を設定します。
⑦［アピアランス → Brush］の［Draw As］を「Box」に設定し、［Margin］を「0.5」に設定します。※［Button_Main］と同じ設定です。
⑧ ボタンと重なる位置に［Img_BtnOutline］が表示されます。
⑨ 通常時は非表示にしておくため、［詳細］エリアの［動作 → Visibility］の項目を［Collapsed］に設定しておきます。

次に、2つめのホバー用テクスチャとなるガウス画像を追加します。

①［パレット］の検索欄に「画像」と入力します。
②［一般］カテゴリに表示された［画像］を、［階層］エリアの［オーバーレイ］へドラッグ＆ドロップして配置します。
③［詳細］パネルで名前を［Img_BtnGauss］に変更します。
④［Is Variable］にチェックを入れます。
⑤［スロット（オーバーレイ）］で、［Horizontal Alignment］を「水平方向に塗りつぶし」、［Vertical Alignment］を「垂直方向に塗りつぶし」に設定します。
⑥［アピアランス → Brush → Image］に、テクスチャ［Img_Btn_Hover_Gauss］を設定します。
⑦［アピアランス → Brush］の［Draw As］を「Box」に設定し、［Margin］を「0.3」に設定します。※［Button_Main］と同じ設定です。
⑧ボタンと重なる位置に［Img_BtnGauss］が表示されます。

今回追加した［Img_BtnOutline］も通常時は表示しないため、エディタ上ではいったん非表示にしておきます。［階層］パネルの「目のアイコン」を選択し、非表示に設定してください。

これで、ボタンの作成に必要なUI要素の配置は完了です。

STEP 4：作成したボタンにアニメーションを付ける

作成したボタンにアニメーションを追加していきます。
今回は、以下の3種類のアニメーションを作成します。

・ホバー時のアニメーション
・ホバー中にループ再生するアニメーション
・ボタンを押したときのアニメーション

4-1：ホバー時のアニメーションを作成

まずは、ホバー時のアニメーションを作成します。カーソルがボタンに重なったときに、ボタンが少し大きくなるようにスケールを設定します。

●アニメーショントラックの追加

①［階層］から［SizeBox_Button］を選択します。
②［アニメーション］の［+アニメーション］を選択し、アニメーション名を「Button_Hover」にします。
③［+追加］を選択します。
④［階層］で選択している［SizeBox_Button］が表示されるので選択し、トラックへ追加します。
⑤ 次に、キーを設定する項目を追加します。今回は、先ほど説明した［詳細］パネルの［Add Key］とは別の方法を使用します。トラック右側の［＋］アイコンを選択して項目メニューを表示してください。※［詳細］パネルの［Add Key］から追加しても問題ありません。
⑥ 今回はスケール値にキーフレームを設定するため、［Transform］を選択します。［Transform］を追加すると、［変換］、［回転］、［スケーリング］、［Shear］の項目がまとめて追加されます。今回使用するのは［スケーリング］のみのため、それ以外の項目は選択して［Delete］キーで削除してください。

不要な項目を削除できたら、次はキーを追加していきます。

●アニメーションキーの追加

① タイムラインバーを「0.00」の位置に移動します。
②［スケーリング］の［＋］を選択してキーを追加します。
③ タイムラインバーの位置に、アニメーション開始時のキーが追加されます。
④ 次に、アニメーション終了時のキーを追加します。タイムラインバーを「0.15」の位置へ移動してください。
⑤［スケーリング］の値を「1.05」に変更します。
⑥［＋］を選択してキーを追加します。
⑦ タイムラインバーの位置「0.15」に、終了時のキーが追加されます。

続いて、テキストの左側に配置した［Img_Star］のアニメーションを作成します。

●アニメーショントラックの追加

①［階層］エリアから［Img_Star］を選択します。
②［アニメーション］エリアで［Button_Hover］を選択します。
③ トラックの［+追加］を選択します。
④ 選択中の［Img_Star］が表示されるので選択し、トラックへ追加します。

●開始キーの追加
⑤ タイムラインバーを「0.00」の位置に移動します。
⑥［＋］を選択して、キーフレームを設定する項目の一覧を表示します。
⑦ 非表示から表示へ切り替えるアニメーションを作成するため、［Render Opacity］を選択します。
⑧［Render Opacity］がトラックに追加され、タイムラインバーの位置にキーフレームが自動で追加されます。

最後に、終了時のキーを追加します。

●終了キーの追加

①タイムラインバーを「0.15」の位置に移動します。
②［Img_Star］の［Render Opacity］を「1.0」に変更します。
③［Render Opacity］の右側にある［＋］を選択してキーを追加します。
④タイムラインバーの位置にキーが追加されます。

これで、［Img_Star］の表示アニメーションに必要なキーの設定は完了です。

続いて、［Img_BtnOutline］のアニメーションを設定します。今回は［Render Opacity］と［Transform］の2つの項目にキーフレームを設定します。

●アニメーショントラックの追加

①［階層］エリアから［Img_BtnOutline］を選択します。
② エディタ上で「目のアイコン」を選択し、非表示から表示に切り替えます。
③［アニメーション］エリアから［Button_Hover］を選択します。
④ トラックの［+追加］を選択します。
⑤ 選択中の［Img_BtnOutline］が表示されるので選択し、トラックへ追加します。

●開始キーの追加
⑥ タイムラインバーを「0.00」の位置に移動します。
⑦［＋］アイコンを選択して、キーを設定する項目の一覧を表示します。
⑧［Render Opacity］を選択してトラックへ追加します。
⑨［Transform］を選択してトラックへ追加します。今回も［スケーリング］のみにキーを設定するため、不要な［変換］、［回転］、［Shear］は削除しておきましょう。※［SizeBox_Button］と同じ手順です。［Render Opacity］と［Transform］をトラックへ追加すると、タイムラインバーの位置にキーが自動で作成されます。

●終了キーの追加

①タイムラインバーを「0.15」の位置に移動します。
②［Render Opacity］と［スケーリング］の［＋］をそれぞれ選択し、キーを追加します。

今回のアニメーションでは、［Img_BtnOutline］の値自体は変化しません。しかし、後ほど作成する別のアニメーションでは値を変更するため、［Button_Hover］側にも現在の状態を保持するためのキーを設定しています。

このままでは不要な終了キーが残ってしまうため、追加したばかりの終了位置のキーのみ削除します。※開始位置のキーと、「0.00」～「0.15」のアニメーション区間は残しておきます。

先ほど［Img_BtnOutline］の「0.15」に追加したキーを選択し、［Delete］キーで削除します。

これで、［Img_BtnOutline］のキー設定は完了です。

［Img_BtnOutline］の設定ができたら、同じ手順で［Img_BtnGauss］にもキーを設定します。

●アニメーショントラックの追加

①［階層］エリアから［Img_BtnGauss］を選択します。
②エディタ上で「目のアイコン」を選択し、非表示から表示に切り替えます。
③［アニメーション］エリアから［Button_Hover］を選択します。
④トラックの［+追加］を選択します。
⑤選択中の［Img_BtnGauss］が表示されるので選択し、トラックへ追加します。

●開始キーの追加
⑥タイムラインバーを「0.00」の位置に移動します。
⑦［＋］アイコンを選択して、キーを設定する項目の一覧を表示します。
⑧［Render Opacity］を選択してトラックへ追加します。

この時点で、「0.00」の位置にキーが自動で追加されます。

●終了キーの追加

①タイムラインバーを「0.15」の位置に移動します。
②［Render Opacity］の［＋］を選択してキーを追加します。
③「0.15」に追加したキーを選択し、削除します。

これで、ホバー時のアニメーション［Button_Hover］の設定は完了です。

4-2：ホバー時のループアニメーションを作成

ここからは、カーソルがボタンに重なっている間に再生されるアニメーションを作成します。今回は［Img_BtnGauss］を使用し、明滅する演出を設定していきます。

●アニメーショントラックの追加

①［階層］エリアから［Img_BtnGauss］を選択します。
②［アニメーション］エリアの［+アニメーション］を選択し、新しいアニメーションを作成します。
③ アニメーション名を［Button_HoverLoop］に変更します。
④［Button_HoverLoop］を選択した状態で［+追加］を選択し、［Img_BtnGauss］をトラックへ追加します。
⑤ 今回はループアニメーションを作成するため、エディタ上で動作を確認しやすいように［再生範囲をループ］を有効にします。※エディタ上でループ再生されない場合に設定してください。

●開始キーの追加
⑥ タイムラインバーを「0.00」の位置に移動します。
⑦［＋］を選択してキーを設定する項目を追加します。
⑧ 表示されたメニューから［Render Opacity］を選択します。

●終了キーの追加

①タイムラインバーを「1.00」の位置に移動します。
②［Render Opacity］の［＋］を選択してキーを追加します。
③「1.00」の位置にキーフレームが追加されます。

●中間キーの追加

さらに、明滅するアニメーションにするため、中間位置のキーも設定します。

①タイムラインバーを「0.50」の位置に移動します。
②［Render Opacity］の値を「0.3」に変更します。
③［Render Opacity］の［＋］を選択してキーを追加します。
④「0.50」の位置にキーが追加されます。

アニメーションを再生すると、［Img_BtnGauss］が明滅するように表示されます。これで、ホバー中のループアニメーション［Button_HoverLoop］の設定は完了です。

4-3：ボタンクリック時のアニメーションを作成

最後に、ボタンを押したときに再生されるアニメーションを作成します。

●アニメーショントラックの追加

①［詳細］エリアから［Img_BtnOutline］と［Img_BtnGauss］を選択します。※別々に選択して項目を追加しても問題ありません。
②［アニメーション］エリアの［+アニメーション］を選択し、新しいアニメーションを作成します。
③ アニメーション名を［Button_Pressed］に変更します。
④ トラックの［+追加］を選択し、［Img_BtnOutline］と［Img_BtnGauss］をトラックへ追加します。
⑤ エディタ上での再生形式を「ループ再生なし」に設定します。

●開始キーの追加
⑥ タイムラインバーを「0.00」の位置に移動します。
⑦［Img_BtnGauss］の［＋］を選択し、［Render Opacity］をトラックへ追加します。
⑧［Img_BtnOutline］の［＋］を選択し、［Render Opacity］と［Transform］をトラックへ追加します。
⑨［Transform］を追加し、不要な［変換］、［回転］、［Shear］を削除します。

●終了キーの追加

① タイムラインバーを「0.40」の位置に移動します。
②［Img_BtnGauss］の［Render Opacity］を「0.0」に変更します。
③［Render Opacity］の［＋］を選択してキーを追加します。
④［Img_BtnOutline］の［Render Opacity］を「0.0」に変更します。
⑤［Render Opacity］の［＋］を選択してキーを追加します。
⑥「0.40」の位置にキーが追加されます。

これで、［Img_BtnGauss］と［Img_BtnOutline］の［Render Opacity］については、終了位置のキー設定が完了です。残る［Img_BtnOutline］の［スケーリング］も設定していきましょう。

●スケーリングのキーの追加

①タイムラインバーを「0.30」の位置に移動します。
②［スケーリング］の［X］を「1.3」に変更します。
③［スケーリング］の［Y］を「1.6」に変更します。
④［スケーリング］の［＋］を選択してキーを追加します。
⑤「0.30」の位置にキーが追加されます。

これで、ボタンを押した際にアウトラインが拡大しながら消えていくアニメーションになります。
ここまでで、ボタンを押したときのアニメーション［Button_Pressed］の設定は完了です。

まとめ

今回は、以下のSTEP 3〜4までの工程を進めました。

STEP 1：親ウィジェット［WBP_Title］のテキストにアニメーションを設定する
STEP 2：ブループリントでアニメーション再生処理を実装する
STEP 3：ボタンとなる子ウィジェット［WBP_TitleButton］を作成する
STEP 4：作成したボタンにアニメーションを追加する

次回はSTEP 5以降の工程を進めていきます。

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

イベント詳細はこちら