1
00:00:04,270 --> 00:00:05,200
‫こんにちは､ ようこそ｡

2
00:00:05,200 --> 00:00:10,060
‫この講義では､ 緩やかな画面を表示し､ そのウィジェットを生成するために､

3
00:00:10,060 --> 00:00:13,870
‫すべてC++内から行うことにします｡

4
00:00:13,870 --> 00:00:15,490
‫さっそく潜入してみましょう｡

5
00:00:16,150 --> 00:00:23,260
‫そこで､ プレイヤーが死んだときに､ 負けたこと､ レベルがリセットされようとしていることを伝えるUIを表示させたいと思います｡

6
00:00:23,260 --> 00:00:25,240
‫だから､ 彼らにとっては驚きではないのです｡

7
00:00:25,240 --> 00:00:31,990
‫そこで､ いくつかのUI､ UIウィジェット､ UMG､ アンリアルモーショングラフィックウィジェットを作成する必要があります｡

8
00:00:32,350 --> 00:00:35,830
‫それではまず､ UIを格納するためのフォルダを作成しましょう｡

9
00:00:35,830 --> 00:00:41,470
‫UIを2つ用意することはすでに分かっているので､ ここにUIフォルダを用意し､

10
00:00:41,470 --> 00:00:47,800
‫ここに入って右クリックし､ 次に進みましょう｡

11
00:00:48,070 --> 00:00:52,600
‫ユーザー・インターフェース・セクションに移動して､ ウィジェット設計図を選択し､

12
00:00:52,600 --> 00:00:57,130
‫使用する接頭辞をWPアンダースコアにして､ lose screenにします｡

13
00:00:57,430 --> 00:01:03,520
‫さて､ C++でこの種のものの基底クラスをいくつか作ることができますが､ このセクションでこれを取り上げるつもりはありません｡

14
00:01:03,520 --> 00:01:07,480
‫一般的にはその必要はなく､ このようなことはBlueprintで行う方がはるかに簡単です｡

15
00:01:07,480 --> 00:01:13,000
‫UIが超複雑になりそうで､ そのUIロジックの一部をC++に入れたいとかでなければ､

16
00:01:13,000 --> 00:01:15,850
‫C++でやるメリットはあまりないでしょう｡

17
00:01:15,850 --> 00:01:20,560
‫その場合はそうではないので､ そのまま設計図を使っていけばいいのです｡

18
00:01:20,560 --> 00:01:22,510
‫やはり､ UIは視覚的なものですからね｡

19
00:01:22,510 --> 00:01:29,500
‫ウィジェットの作成方法についてすでに知っているのだから､ 今ビジュアルツールを使ってまとめるのは理にかなっている｡

20
00:01:29,500 --> 00:01:32,860
‫では､ これを課題としてロストスクリーンを設定します｡

21
00:01:32,860 --> 00:01:37,180
‫プレイヤーが負けたこと､ これから再開することを説明するテキストを追加したい｡

22
00:01:37,240 --> 00:01:42,040
‫そのテキストをおそらく中央に配置し､ 見えるようにして､ ゲーム内で見えるようにしたいのです｡

23
00:01:42,040 --> 00:01:45,610
‫それでいて､ 先ほど言ったように､ これからリスタートがあることを説明する｡

24
00:01:45,730 --> 00:01:50,500
‫そして､ このチャレンジに挑戦した後､ これをC++からどのように産み出すかを見ていきます｡

25
00:01:50,500 --> 00:01:53,020
‫Blueprintでこの方法を見たことがあるかもしれませんね｡

26
00:01:53,020 --> 00:01:55,690
‫C++の中からどのようにできるかを見ていきます｡

27
00:01:55,690 --> 00:01:57,070
‫では､ ビデオを一時停止して､ やってみてください｡

28
00:01:57,160 --> 00:01:58,420
‫では､ お帰りなさい｡

29
00:01:58,600 --> 00:02:03,340
‫そこで､ まず､ ちょっとしたテキストを作成してきます｡

30
00:02:03,340 --> 00:02:09,400
‫そこで､ 左側のパレットからテキスト項目を探し､ それを取り込みたいと思います｡

31
00:02:10,090 --> 00:02:17,270
‫ここでは､ かなりストレートで想像力に欠ける台詞の書き方をyou loseに変え､ 色や不透明度や外観を赤に変えて､

32
00:02:17,290 --> 00:02:22,900
‫負けたことを超明確にするつもりです｡

33
00:02:22,900 --> 00:02:28,090
‫そして､ もう少しだけ擦って､ フォントを拡大し､ サイズを大きく変更します｡

34
00:02:28,090 --> 00:02:35,320
‫そして､ テキストを囲むボックスを拡張し､ テキストを中央揃えにするつもりです｡

35
00:02:35,320 --> 00:02:38,080
‫そこで､ ジャスティフィケーションまで下りて､ テキストのところで行を中央揃えにします｡

36
00:02:38,080 --> 00:02:44,890
‫そして､ もし拡大したら､ どこか中央揃えのできるところがないか､ ノート内にはありません｡

37
00:02:44,890 --> 00:02:55,150
‫そこで､ ボックスのサイズを大まかに決めてから､ アライメントやアンカーなどの設定に入ります｡

38
00:02:55,450 --> 00:03:03,370
‫そして､ アンカーのドロップダウンを選択し､ 真ん中に固定するためのプリセットを選択します｡

39
00:03:03,790 --> 00:03:14,530
‫アライメントを0にしたい｡  5と0である｡  5で､ 基本的には左上隅ではなくオブジェクトの中心にアライメントすることを意味します｡

40
00:03:14,770 --> 00:03:16,690
‫また､ アンカーをやるだけです｡

41
00:03:16,690 --> 00:03:16,930
‫なるほど｡

42
00:03:16,930 --> 00:03:19,060
‫それはあまり参考にならなかったですね｡

43
00:03:19,390 --> 00:03:24,520
‫そして､ ポジションXはなぜかというと､ アンカーをそう設定したからといって､ ポジションをゼロとゼロの隣に設定すれば､

44
00:03:24,520 --> 00:03:31,300
‫私のロストポジションは真ん中あたりになると思うので､ それを少しずつ上げていくだけなのです｡

45
00:03:31,300 --> 00:03:38,200
‫位置Xを0に､ 位置Yを-50に保ってください｡ これは､

46
00:03:38,200 --> 00:03:43,930
‫いくつかの副文書を追加したいからです｡

47
00:03:43,930 --> 00:03:46,060
‫ただ､ もう少し小さくしたいんです｡

48
00:03:46,060 --> 00:03:55,270
‫もう一度ゼロの位置を決め､ 「レベルは5秒後に再開します」と言い､ フォントサイズをもっと小さくします｡

49
00:03:55,270 --> 00:04:00,460
‫そして､ このポジションXをゼロにリセットし続けることで､

50
00:04:00,460 --> 00:04:05,950
‫100％満足のいく位置決めができるのです｡

51
00:04:05,950 --> 00:04:08,560
‫もうちょっとだけ前倒しで｡

52
00:04:08,560 --> 00:04:14,560
‫シフトを押しながらだと､ 自分が動いている軸にロックして､ だいたいこんな感じで中心になるんです｡

53
00:04:14,590 --> 00:04:15,640
‫なるほど､ それなら納得です｡

54
00:04:15,640 --> 00:04:18,940
‫では､ さっそくスポーンしてみましょう｡

55
00:04:18,970 --> 00:04:19,870
‫どうやってやるんだ？

56
00:04:19,870 --> 00:04:27,520
‫さて､ まず最初に､ どのウィジェットクラスをスポーンすることになるのか､ そしてこれからどこでそれを行うのかを知っておく必要があります｡

57
00:04:27,520 --> 00:04:31,870
‫すでに申し上げたように､ プレイヤーコントローラー自体から行うのが良いと思います｡

58
00:04:32,200 --> 00:04:38,030
‫そして､ プレイヤーコントローラで､ どのクラスが､ どのウィジェットクラスを生み出そうとしているのかを知る必要がありそうです｡

59
00:04:38,030 --> 00:04:42,670
‫さて､ これはブループリント・クラスですが､ スポーンしようとするクラスであることが必要です｡

60
00:04:43,000 --> 00:04:48,880
‫この方法は､ 新しいプロパティを作成し､

61
00:04:48,880 --> 00:04:57,250
‫どこでも編集できるようにすることです｡

62
00:04:57,250 --> 00:05:05,350
‫基本的には､ 使おうと思えばタイプ・ユーのクラスも使えるのですが､ だからといって､ どんなクラスが使えるのかが制限されるわけではありません｡

63
00:05:05,350 --> 00:05:09,790
‫そして､ ここでは､ ウィジェットを使用する場合のみに限定したいと思います｡

64
00:05:09,790 --> 00:05:17,390
‫設計図を見て､ この中のどこかに移動すれば､ そこにあるのがわかると思います｡

65
00:05:17,410 --> 00:05:22,930
‫親クラスはuse a widgetで､ プレフィックスを付けるとuse a widgetになることが分かっています｡

66
00:05:23,050 --> 00:05:26,680
‫のサブクラスなんですね｡

67
00:05:27,490 --> 00:05:34,360
‫それから､ 角括弧を使用して､ ウィジェットを使用することになります｡

68
00:05:34,360 --> 00:05:46,630
‫実際に､ インクルードを行うのではなく､ ここで前方に宣言するつもりです｡

69
00:05:47,020 --> 00:05:56,710
‫ヘッダーファイルを変更するときにコンパイルすると､ ほんの少し時間がかかるので､ 次の作業をしながらこの段階でコンパイルすることにします｡

70
00:05:56,710 --> 00:06:02,860
‫さて､ 実はこの段階でコンパイルに失敗します｡ UMGモジュールを入れていないからです｡

71
00:06:02,860 --> 00:06:03,820
‫その方法がわからないのです｡

72
00:06:03,820 --> 00:06:09,760
‫この段階ではコンパイルは気にしないでください｡ 動画の9分ごろに､ このエラーを修正することになります｡

73
00:06:10,060 --> 00:06:14,560
‫さて､ C++のほうでは､ 実際にウィジェットを生成してみましょう｡

74
00:06:14,560 --> 00:06:17,290
‫だから､ 時間の前でも多分やりたいと思う｡

75
00:06:17,290 --> 00:06:20,320
‫タイマーは待ってくれないから､ どうでもいいんだけどね｡

76
00:06:20,320 --> 00:06:24,820
‫時間を設定して､ そのまま次の行に進むので､ これをまっすぐ行ったとしても5秒待つことはありませんし､

77
00:06:24,820 --> 00:06:29,860
‫その後にUIをスポーンすれば､ どの順番でやっても同じです｡

78
00:06:30,220 --> 00:06:36,520
‫そこで､ これからやりたいことは､ 現在利用できないcreate widgetという関数を使うことです｡

79
00:06:36,520 --> 00:06:38,980
‫だから､ まず何かをハッシュ化する必要がある｡

80
00:06:38,980 --> 00:06:50,260
‫このクラスは､ このウィジェット作成関数にアクセスするために必要です｡

81
00:06:50,740 --> 00:06:53,620
‫そして､ 基本的にはウィジェットを作成すると言うことにしています｡

82
00:06:53,620 --> 00:06:58,270
‫必要なのは､ 実は､ それを提供するために必要なものを確認することなんです｡

83
00:06:58,270 --> 00:07:00,910
‫その実装にF 12をすることになりました｡

84
00:07:00,910 --> 00:07:11,080
‫ちょっと見づらいですが､ テンプレートパラメータがあり､ これは基本的にウィジェットを使用するときのデフォルトのパラメータです｡

85
00:07:11,590 --> 00:07:19,390
‫そして､ 所有オブジェクトと作成する必要のあるクラス､ そして必ずしも提供する必要のないウィジェット名があり､

86
00:07:19,390 --> 00:07:23,830
‫そしてウィジェットへのポインタとして返されるのです｡

87
00:07:24,040 --> 00:07:29,200
‫そこで実際に行うのは､ ここでオーナー・オブジェクトを与えることです｡

88
00:07:29,200 --> 00:07:31,560
‫これで､ 特定のものだけがウィジェットを所有できるようになりました｡

89
00:07:31,580 --> 00:07:36,310
‫そのうちのひとつが､ 実はプレイヤーのコントローラーなのですが､ これを渡すだけです｡

90
00:07:36,310 --> 00:07:40,750
‫次に､ ウィジェットを使用する場合は､ RTのサブクラスを渡す必要があります｡

91
00:07:40,750 --> 00:07:46,540
‫幸いなことに､ ヘッダーファイルですでに設定されているので､ それを渡せば､

92
00:07:46,540 --> 00:07:55,420
‫行末にセミコロンをつけていない間にインデントが勝手に修正されるのを防げます｡

93
00:07:55,420 --> 00:07:56,050
‫まあ､ それはそれとして｡

94
00:07:56,050 --> 00:07:58,540
‫この時点ではウィジェットが返されるだけです｡

95
00:07:58,540 --> 00:08:06,910
‫そこでできることは､ あなたへのポインターを持つこと､ ウィジェットの星を使うこと､ そしてこれが私たちのロストスクリーンになることです｡

96
00:08:06,910 --> 00:08:09,310
‫そこで､ ロストスクリーンクラスを開催しました｡

97
00:08:09,310 --> 00:08:13,000
‫ウィジェットを作成した後は､ 実際に緩い画面になる｡

98
00:08:13,000 --> 00:08:16,060
‫次に必要なのは､ このUIを可視化することです｡

99
00:08:16,060 --> 00:08:20,020
‫アンリアルの用語でいうところのビューポートに追加することでそれを実現するのです｡

100
00:08:20,020 --> 00:08:27,100
‫しかし､ その前に､ ブルースクリーンで関数を呼び出してビューポートに追加するので､ ヌルポインタでないことを確認する必要があります｡

101
00:08:27,100 --> 00:08:32,410
‫では､ lose screen が null pointer と等しくない場合､ なぜ null pointer になる可能性があるのでしょうか？

102
00:08:32,410 --> 00:08:37,210
‫ところで､ なぜここでヌルポインターになってしまうのか､ その理由がわかるかどうか､ ちょっとチャレンジしてみてください｡

103
00:08:37,600 --> 00:08:41,200
‫まあ､ 一つの原因は､ lose screen classを設定するのを忘れていたのかもしれませんね｡

104
00:08:41,200 --> 00:08:46,180
‫もしそうで､ 有効なブルースクリーン・クラス・セットがない場合､ create widget は単に

105
00:08:46,180 --> 00:08:47,860
‫null ポインタを返します｡

106
00:08:47,860 --> 00:08:54,340
‫また､ NULLポインタで関数を呼び出すようなことは避けたいものです｡

107
00:08:54,340 --> 00:08:56,500
‫そこで､ ロースクリーンアローを行います｡

108
00:08:56,740 --> 00:09:01,270
‫そして､ ここで欲しいのはviewportに追加という関数です｡

109
00:09:02,060 --> 00:09:07,820
‫これは単純に､ そのルーズな画面を見ることができるように､ 画面に追加して行くということです｡

110
00:09:08,090 --> 00:09:17,330
‫さて､ これもコンパイルして､ 1つのリールに移動して､ プレイヤーコントローラのブループリントを開きます｡

111
00:09:17,330 --> 00:09:19,100
‫そこで､ シュータープレイヤーのコントローラーをここに｡

112
00:09:19,550 --> 00:09:25,520
‫そして､ この中のどこかに､ まだポップアップしていない変数を見ることができるはずです｡

113
00:09:25,640 --> 00:09:27,110
‫もしかしたら､ ビルドエラーがあったのかもしれません｡

114
00:09:27,110 --> 00:09:28,850
‫では､ メッセージログを見てみましょう｡

115
00:09:29,180 --> 00:09:36,140
‫はい､ ここにいくつかのビルドエラー､ すなわち外部シンボルが見つからないという奇妙なエラーを見ることができます｡

116
00:09:36,140 --> 00:09:41,780
‫我々はあなたについてのものを言って少し見ている場合は､ 以前にいくつかの講義に戻ってあなたの心をキャストする場合､

117
00:09:41,780 --> 00:09:50,840
‫今利用できないウィジェットを使用して､ 我々は､ これらの種類のエラーは､ モジュールの依存関係が欠けているときになる傾向があることを知っている｡

118
00:09:50,840 --> 00:09:57,770
‫そこで､ シンプルなシューティング・ドット・ビルド・ドット・CSSを開き､ スペースを確保するためにターミナルを閉じると､

119
00:09:57,770 --> 00:10:04,370
‫必要なことは新しいパブリック依存関係をここに追加することだとわかります｡

120
00:10:04,580 --> 00:10:12,140
‫そこで､ この最後に､ UMGのパブリックな依存関係を追加します｡ つまり､ 新しいコンマを追加します｡

121
00:10:12,140 --> 00:10:24,380
‫そして引用符で囲んでUMGとすることで､ 基本的にここにあったインクルード､ つまりブループリントのフォワードスラッシュユーザーウィジェットを利用できるようになります｡

122
00:10:24,680 --> 00:10:28,700
‫そういうものはすべて､ 標準で入っているものとは別のモジュールになっているんです｡

123
00:10:28,700 --> 00:10:32,690
‫そのため､ C++ でそのモジュールを使用することを Unreal に伝える必要があります｡

124
00:10:32,690 --> 00:10:34,640
‫さっそくビルドして､ 動作確認をしてみましょう｡

125
00:10:34,640 --> 00:10:36,410
‫これで成功したように見える｡

126
00:10:36,410 --> 00:10:42,500
‫エディターでシュータープレイコントローラーに戻ると､ なぜかちゃんとリロードされていないようなので､

127
00:10:42,500 --> 00:10:46,340
‫エディターでコンパイルする必要がありました｡

128
00:10:46,340 --> 00:10:48,430
‫ここで､ シュータープレイヤーのコントローラーに話を戻します｡

129
00:10:48,430 --> 00:10:50,630
‫ついにあのロースクリーンクラスを見ることができるようになりました｡

130
00:10:50,850 --> 00:11:00,140
‫ドロップダウンをクリックして､ AWPを選択し､ アンダースコアの画面を失い､ コンパイルし､ 保存して､ 自分自身を殺しに行くことができるのです｡

131
00:11:00,140 --> 00:11:01,900
‫何度か撃たれるよ｡

132
00:11:01,910 --> 00:11:03,380
‫バン､ バン

133
00:11:03,380 --> 00:11:04,250
‫そして､ そこにあるのは

134
00:11:04,250 --> 00:11:09,320
‫ルーの画面が現れ､ 何が起こっているのか､ あと5秒でレベルが再開されることを告げています｡

135
00:11:09,320 --> 00:11:10,220
‫そして､ そうなった｡

136
00:11:10,220 --> 00:11:11,270
‫そうなんです｡

137
00:11:11,270 --> 00:11:22,070
‫これで､ UMG グラフィックを作成する方法だけでなく､ Blueprint からではなく､ C++ からこれらを生成する方法についても理解できました｡

138
00:11:22,070 --> 00:11:30,680
‫次回の講義では､ あまり悲観的にならずに､ このゲームの勝利条件も作れるかどうか試してみたいと思います｡

139
00:11:30,680 --> 00:11:31,550
‫現地でお会いしましょう｡