アンリアルエンジンで学ぶゲーム系UI・HUDデザイン - UnrealEngine4 UMG/Widget入門‐
4.0 (113 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
862 students enrolled

アンリアルエンジンで学ぶゲーム系UI・HUDデザイン - UnrealEngine4 UMG/Widget入門‐

ゲームのクオリティに直結するUI・HUDデザイン。このコースではUMG(UnrealMotionGraphics UIデザイナ )の基本操作を学びます。応用編ではダイアログや会話画面を作成しゲーム制作には欠かせない実践的な技術を習得します。
4.0 (113 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
862 students enrolled
Last updated 6/2018
Japanese
Current price: $80.99 Original price: $124.99 Discount: 35% off
21 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • UE4(Unreal Engine 4)を用いたゲーム系UIデザイン手法を習得できる
  • UMG(Unreal Motion Graphics UI デザイナ )の基本的な操作を身に付けることができる
  • チェックボックス、スライダー、進捗バーの作成方法を習得できる
  • ダイアログや会話シーン等の実践的なゲーム系UI・HUDデザインの制作手法を習得できる
  • UI・HUDの2D空間や3D空間への配置・設定手法を習得できる
  • ゲーム系UI・HUDデザインの基礎知識を習得することができ、ゲーム開発者や他業界のUIデザイナーとしても、レベルアップできる
Course content
Expand all 78 lectures 05:15:51
+ はじめに
2 lectures 06:38

この講座の使用方法について解説を行ないます。

(補足)使用バージョンにつきまして

動画は4.19.1で作成していますが、4.19 4.19.2でも問題ありません。


Preview 03:56

自己紹介および、どういう画面が作成できるかの説明を行ないます。

Preview 02:42
+ UMG・Widgetについて
5 lectures 09:49

UE4上でのUI等の作成機能Unreal Motion Graphics UI デザイナとは何かの説明を行ないます。

UMGについて
01:21

この講座で使用するUE4を起動を行ないます。

講座で使用するプロジェクトの作成
01:05

この講座で使用するプロジェクトファイルの作成を行ないます。

準備_プロジェクト設定
01:35

この講座で使用するリソースの取込を行ないます。

準備_リソース取り込みとWidgetの作成
01:29

エディタの機能説明を行ないます。

UMGエディタ画面説明
04:19
+ BluePrintでの制御
2 lectures 03:52

Widgetでブループリントを使用する際の説明を行ないます。

グラフについて
01:37

バインド(配置したWidgetを関数に割り当てる機能)の説明を行ないます。

バインドについて
02:15
+ 画面への表示方法
4 lectures 15:42

ブループリントを用いてWidgetを表示する方法の説明を行ないます。

2D空間への表示方法
07:35

ブループリントを用いて表示を行ったWidgetの非表示・削除・入れ替え方法の説明を行ないます。

切り替え方法・削除方法
02:51

配置したWidgetを他のアクタから呼び出す方法の説明を行ないます。

他のアクタからの呼び出し
01:28

3D空間に配置する方法の説明を行ないます。

3D空間への表示方法
03:48
+ 各種表示方法
32 lectures 01:36:23

文字を画面上に表示する方法・色変更フォントサイズなどの説明を行ないます。

文字表示1 文字の表示
03:24

バインドを用いてテキストの変更方法の説明を行ないます。

文字表示2 状態でのテキストの変更
02:08

実例として、バインドを用いてカウントダウンを表示する処理の作成を行ないます。

まず、カウントダウンの数字の表示処理を作成します。

文字表示3 カウントダウンの作成
03:37

実例として、バインドを用いてカウントダウンを表示する処理の作成を行ないます。

後半として、カウントダウン処理とその結果を表示に紐付ける処理を作成します。

文字表示4 カウントダウンの作成2
03:30

TextBoxを用いて文字入力する方法の説明を行ないます。

文字入力1 テキストボックスの配置
02:08

TextBoxの背景設定等について説明を行ないます。

文字入力2 テキストボックスの画像・色変更
03:43

TextBoxを用いて入力したデータを取得する方法の説明を行ないます。

文字入力3 入力データの取得
01:11

コンボボックスの配置・データセットについて説明を行ないます。

コンボボックス1 コンボボックスの配置
03:07

コンボボックスのデータの追加・削除について説明を行ないます。

コンボボックス2 データの入れ替え
04:43

コンボボックスのデータ取得について説明を行ないます。

コンボボックス3 データの取得
03:05

単色背景を表示する方法の説明を行ないます。

Preview 02:03

画像を表示する方法の説明を行ないます。

画像表示2 画像の表示
01:33

バインドを用いて画像の差替を行う方法の説明を行ないます。

画像表示3 画像の変更
02:09

ボタンの配置・設定方法の説明を行ないます。

ボタン配置1 ボタンの配置・テキストの表示
04:44

ボタンを画像にする場合の方法の説明を行ないます。

ボタン配置2 画像の表示
02:37

ボタンを押下した時の処理の作成方法の説明を行ないます。

ボタン配置3 押した時の処理
01:54

プログレスバーの配置・設定方法の説明を行ないます。

プログレスバー1 バーの配置
03:05

バインドを用いてプログレスバーの値を外部から変更する方法の説明を行ないます。

プログレスバー2 バーの進行処理
02:48

プログレスバーを画像にする方法の説明を行ないます。

プログレスバー3 画像の表示
01:45

チェックボックスを配置する方法の説明を行ないます。

チェックボックス1 ボックスの配置・文字表示
05:38

チェックボックスの状態を外部から取得する方法の説明を行ないます。

チェックボックス2 状態の取得・設定
01:10

チェックボックスを応用してラジオボタンの作成の準備を行ないます。

ラジオボタン1 ラジオボタンの作成
02:42

ラジオボタンの切り替え処理の作成を行ないます。


ラジオボタン2 データの作成・切り替え処理の作成
07:31

ラジオボタンの切り替え処理を呼び出し、設定を行う方法を説明します

ラジオボタン3 データの設定
02:23

スライダーの使用方法の説明を行ないます。

スライダー1 バーの作成
03:22

スライダーで画像を使用する場合の説明をを行ないます。

スライダー2 画像の表示
02:19

スライダーの値を取得・設定する方法の説明を行ないます。

スライダー3 データの取得・設定
02:48

スピンボックスを配置する方法の説明を行ないます。

スピンボックス1 ボックスの配置
02:49

スピンボックスの値を外部から取得する方法の説明を行ないます。

スピンボックス2 状態の取得・設定
01:42

応用として、スピンボックスの値と連携させる方法の説明を行ないます。

スピンボックス3 スライダーとの連携
06:33

「スライダーとの連携」で作成した処理をの動作確認を行ないます。

スピンボックス4 スライダーとの連携実行2
01:14

パネルを用いて親子関係・ダイアログの作成方法などの説明を行ないます。

パネルの配置と使用方法
02:58
+ キー操作
2 lectures 16:05

カーソルキーやゲームパッド・マウスを用いて項目を移動・選択させる方法の説明を行ないます。

基本操作とフォーカスについて
09:02

キー操作を用意された機能を使用せず自分で作成する方法の説明を行ないます。

キー操作の自作について
07:03
+ アニメーション機能
8 lectures 35:35

アニメーション機能の基本的な操作方法の説明を行ないます。

アニメーションについて
07:26

拡大縮小を行う方法について説明を行ないます。

拡大縮小
02:30

座標移動について説明を行ないます。

座標移動およびカーブエディタについて
05:46

色の変更について説明を行ないます。

Preview 01:11

画面全体のフェードを行う方法について説明を行ないます。

フェード
06:15

イベントトラックの使用方法について説明を行ないます。

イベントトラック
02:29

ブループリントを用いてアニメーションの再生説明を行ないます。

アニメーション再生
03:54

ブループリントを用いてアニメーションの停止・一時停止・再開の方法の説明を行ないます。

アニメーション一時停止・停止
06:04
+ レイアウト調整
2 lectures 06:39

アンカー機能を用いてレイアウト調整を行う方法の説明を行ないます。

アンカーとアラインメントについて
03:48

アンカーを分割し、オフセット設定を行う方法について説明を行ないます。

アンカーの分割について
02:51
+ (応用編)ダイアログの作成
4 lectures 18:04

ダイアログ画面用にここまでに作成したパネルやボタンの再配置を行ないます。

オブジェクトの準備
03:53

ダイアログ画面用にアニメーションの作成を行ないます。

ダイアログアニメーションの作成
05:08

ダイアログの呼び出し、終了処理の作成を行ないます。

処理の作成
05:34

作成したダイアログの動作確認を行ないます。

ダイアログ処理を実行
03:29
+ (応用編)会話シーンの作成
16 lectures 01:44:36

ここからしばらく会話シーンの作成を行ないますので、

レベル・Widgetブループリントの新規作成等の準備を行います。

会話シーン準備
04:12

会話シーンのキャラクター画像表示のレイアウト作成を行ないます。

キャラクター画像表示
04:47

キャラ立ち絵の画面外左右から画面中央への入退場用のアニメーション作成を行ないます。

キャラクター移動のアニメーション作成
03:35

キャラ立ち絵を変更する際に、フェードで切り替わるようにするアニメーション作成を行ないます。

キャラクター変更のアニメーション作成
09:58

会話シーンのテキスト部の画像レイアウト作成を行ないます。

テキスト表示ウィンドウの配置
08:17

会話シーンのテキスト部の文字レイアウト作成を行ないます。

テキストの配置
07:19

テキスト部の名前表示の変更処理の作成を行ないます。

名前の設定
02:13

会話部分の文字表示作成と、一文字づつ表示するための処理作成の準備を行ないます。

文字表示1 通常表示と文字送り処理の準備
07:06

文字を一文字づつ表示する処理作成を行ないます。

文字表示2 文字送り処理の作成
05:14

レベルブループリントなどから、

表示する名前・会話テキストをセットする処理の作成を行ないます。

文字表示命令の作成
06:24

会話に選択肢をつけ、選べるようにします。

まず、カーソル表示処理の作成を行ないます。

選択肢の作成
07:00

会話に選択肢をつけ、選べるようにします。

上下の選択処理、どちらを選ぶか決定する処理の作成を行ないます。

選択処理の作成
06:43

会話に選択肢をつけ、選べるようにします。

上下キーを押したときに選択先が変わる処理の作成をおこないます。

上下キー入力の作成
07:49

会話テキストが1画面分最後まで表示された時に、

改ページ用のマークを表示するアニメーションと処理の作成・呼び出しを行ないます。

改ページ表示の作成
07:38

作成した会話シーンの動作確認を行います。

準備として、テストデータの作成を行ないます。

動作確認準備
10:38

作成した会話シーンの動作確認を行います。実行を行ないます。

また、実際に組み込む場合の処理作成のヒントをお伝えします。

Preview 05:43
Requirements
  • 基本的なPCの操作ができること
  • 基本的なUE4(Unreal Engine 4)の操作ができること
  • 基本的なUE4のブループリントの知識があること
  • 本コースでは、UE4がダウンロードされたPC(Windows10)を用いて説明をします。手元にパソコンが無くても受講はできますが、コース内でいくつか実践レクチャーを実施しますので、ご自身のパソコンで実際に操作しながら進めていただく方が理解度が高まります。
  • 本コースは、Windows10のPCを用いて説明をします。UE4はMacOSでも動作しますが、OS個別の要件については関与しません。
  • ゲームのUI・HUDデザインに興味があること
Description

多くの業界で必要とされている「UI(User Interface)デザイナー」。

ゲーム業界でも、メインメニューやキャラクター・アイテム選択、HP・MPゲージを表現するHUD(Head-Up Display)等、
ゲームをプレイするうえで必要になる物の配置や動きを設計し、デザインを担うUIデザイナーの存在は欠かせません。

ゲームの世界観をユーザに最大限に伝えるための重要な要素であるUI・HUDデザインは、そのデザインの操作性や美しさがゲームのクオリティに直結すると言っても過言ではありません。

このコースでは、ゲーム開発のための様々な機能を有する総合開発環境:UE4(Unreal Engine4)に標準搭載されているビジュアル UI オーサリングツール:UMG(Unreal Motion Graphics UI デザイナ )を用いて、ゲーム系UI・HUDデザインを学びます。

前半の基礎編では、チェックボックス、スライダー、進捗バー等を作成し、UMGの基本操作を習得します。コース内では、UMGで作業を開始するために Widget ブループリント を作成するところから始めます。
後半の応用編では、ダイアログや会話シーンの作成を行い、実践的な技術を習得します。

プランナーやプログラマでゲーム系UI・HUDデザインについて学びたい方や、他業界でUIデザインに携わりゲーム業界のUI・HUDデザインにも興味がある方にもおすすめのコースです。

もちろん、自主制作でゲームを作っているみなさんにもおすすめです。
是非、このコースで習得した技術を用いて、クオリティの高いゲームを制作してみましょう!

Who this course is for:
  • UE4を使ったUI・HUDデザイン手法を学びたい方
  • UMG(Unreal Motion Graphics UI デザイナ )の基本的な操作方法を学びたい方
  • UI・HUDデザインを学び、ゲーム開発者としてレベルアップしたい方
  • 他業種のUIデザイナーでゲーム業界のUI・HUDデザインについて学びたい方
  • 自主制作でゲームを作っている方で、作品のクオリティを上げたい方
  • ゲーム系UI・HUDデザインを学び、ユーザがそのゲームの世界観に没頭できるようなUI・HUDデザインを設計・実装したい方