﻿1
00:00:04,490 --> 00:00:05,090
‫こんにちは､ ようこそ｡

2
00:00:05,090 --> 00:00:07,100
‫今回の講演では､ やや遅れていることがあります｡

3
00:00:07,130 --> 00:00:12,110
‫今後は､ より簡単にエイミングができるように､ 十字キーを搭載していく予定です｡

4
00:00:12,110 --> 00:00:16,790
‫また､ 一般的なヘッドアップディスプレイの一部である十字線も削除します｡

5
00:00:16,790 --> 00:00:21,950
‫これで､ 負けか勝ちかのUIを表示するときに､ それを削除することができるようになりました｡

6
00:00:21,980 --> 00:00:24,380
‫その様子を飛び込みで見てみましょう｡

7
00:00:25,520 --> 00:00:32,690
‫そこで､ 体力がどれくらいあるのか､ レティクルを表示するようなUIを､ 私たちの世界に導入したいと思います｡

8
00:00:32,690 --> 00:00:40,880
‫なぜなら､ レティクルや十字線など､ 誰かを撃とうとする瞬間に､ その基準点がないと本当に難しいからです｡

9
00:00:40,880 --> 00:00:43,400
‫では､ UIフォルダに移動します｡

10
00:00:43,430 --> 00:00:48,710
‫ここで右クリックして､ 新しいユーザーインターフェイスウィジェット要素を作成します｡

11
00:00:48,710 --> 00:00:54,080
‫WP接頭辞を付けて､ Food for Heads Up Displayと呼ぶことにします｡

12
00:00:54,380 --> 00:00:57,440
‫では､ それを開いて行きましょう｡

13
00:00:57,440 --> 00:01:05,000
‫まず最初に､ 十字線を作成します｡ 十字線のグラフィックがあれば､ それを使って行うことができます｡

14
00:01:05,000 --> 00:01:06,980
‫そこで画像コンポーネントを使えばいいんですね｡

15
00:01:07,070 --> 00:01:14,570
‫また､ テキストコンポーネントを追加して､ プラス記号を入れ､ それを十字線にすることもできます｡

16
00:01:14,600 --> 00:01:17,300
‫非常にシンプルで､ 本当に簡単にプロトタイプを作ることができます｡

17
00:01:17,300 --> 00:01:23,090
‫そこで､ テキストを中央に揃えることにします｡

18
00:01:23,090 --> 00:01:33,740
‫それから､ スロットキャンバスパネルエリアまで行って､ このようにサイズをコンテンツにチェックすることで､ すべてが十字の周りにぴったりと収まるようにします｡

19
00:01:33,950 --> 00:01:41,750
‫それから､ アライメントが0になるように設定します｡  5と0である｡  5して､ その十字の中心に揃えるようにします｡

20
00:01:41,750 --> 00:01:47,510
‫そして最後に､ デフォルトのセンタリングを使用するようにアンカーを設定したいと思います｡

21
00:01:47,510 --> 00:01:53,420
‫そして､ ポジションをゼロゼロに設定して､ 十字線がちょうど真ん中に来るようにするんだ｡

22
00:01:53,420 --> 00:01:54,950
‫色を赤に変えてみる｡

23
00:01:54,950 --> 00:01:56,480
‫だから､ 見やすくていいですね｡

24
00:01:56,480 --> 00:02:02,210
‫そこに十字線がありますが､ その十字線のサイズを少し大きくしてみるのもいいかもしれませんね｡

25
00:02:02,210 --> 00:02:03,920
‫遊んでみよう､ どんな感じか｡

26
00:02:04,390 --> 00:02:14,270
‫ひとつ問題があるとすれば､ この十字キーが実際に見えていないこと｡

27
00:02:14,270 --> 00:02:21,410
‫ウィジェットを作成し､ ビューポートに追加しました｡ もう一度同じことをして､ ヘッドアップディスプレイのUIを生成してほしいのです｡

28
00:02:21,440 --> 00:02:25,030
‫プレイヤーコントローラーを大きく配置した上で追加するんですね｡

29
00:02:25,040 --> 00:02:29,990
‫プレイヤー・コントローラに大きな遊びを追加し､ ヘッドアップディスプレイに使用するウィジェット・ブループリントを設定できるように､

30
00:02:29,990 --> 00:02:37,670
‫ヘッダーファイルに設定を追加し､ それをスポーンしてビューポートに追加する必要があります｡

31
00:02:37,670 --> 00:02:41,510
‫プレイ・コントローラーにそのためのコードがあるので､ それを拝借して､

32
00:02:41,510 --> 00:02:46,760
‫どのクラスをスポーンするのかをブループリントで設定することになります｡

33
00:02:46,760 --> 00:02:49,670
‫それでは､ ビデオを一時停止して､ チャレンジしてみてください｡

34
00:02:50,600 --> 00:02:51,410
‫お帰りなさい｡

35
00:02:51,410 --> 00:02:57,200
‫それでは､ シュータープレイヤーコントローラのヘッダーファイルで､ 試してみましょう｡

36
00:02:57,200 --> 00:03:01,130
‫ウィンドスクリーンのロストスクリーンに設定しているのがお分かりいただけると思います｡

37
00:03:01,130 --> 00:03:09,410
‫そして､ これらのすぐ上に､ HまたはHUDクラスとなる新しいものを追加したいのです｡

38
00:03:09,740 --> 00:03:17,990
‫そこで､ ウィジェットを使用するDTのサブクラスとして､ Begin Playを追加する必要があります｡

39
00:03:17,990 --> 00:03:25,010
‫そのために､ 私は銃のところに行き､ そこから宣言をコピーして､ シュータープレイヤーコントローラーHのところに持って行き､

40
00:03:25,010 --> 00:03:36,560
‫同様に保護されたセクションに追加して､ 行って再生を開始し､ 再生開始でスーパー再生に呼び出さなければならないことを思い出してください｡

41
00:03:36,590 --> 00:03:39,260
‫そうしないと､ うまく機能しないんです｡

42
00:03:39,260 --> 00:03:45,530
‫そして最後に､ このbegin playは､ 論理的に物事が起こる順番として､ 私たちのゲームが終了した上に移動させようと思います｡

43
00:03:46,140 --> 00:03:48,720
‫そして次は､ ウィジェットの設定です｡

44
00:03:48,720 --> 00:03:52,200
‫まあ､ そのためには､ ウィンドスクリーンやトイレのスクリーンの設定とまったく同じ手順でやればいいので､

45
00:03:52,200 --> 00:03:55,500
‫簡単なんですけどね｡

46
00:03:55,500 --> 00:04:00,330
‫これをBegin Playにコピーして､ 試しに再生してみましょう｡

47
00:04:00,330 --> 00:04:05,850
‫基本的に､ ウィンドスクリーン・クラスを使用する代わりに､ HUDクラスを使用します｡

48
00:04:05,850 --> 00:04:11,760
‫そして､ ウィンドスクリーンを作成する代わりに､ h you dを作成します｡ そのため､

49
00:04:11,760 --> 00:04:17,520
‫これらすべてのケースでHDと呼んでいます｡

50
00:04:17,520 --> 00:04:23,220
‫エディタに移動してコンパイルし､ プレイヤー・コントローラで設定できるかどうか確認してみましょう｡

51
00:04:23,220 --> 00:04:29,340
‫BP シューティング プレイヤー コントローラを開き､ フル ブループリント エディタを開きます｡

52
00:04:29,340 --> 00:04:36,030
‫そして､ コンパイルが完了すると､ HUDクラスが上部に設定できる変数としてポップアップ表示されますね｡

53
00:04:36,030 --> 00:04:40,440
‫このドロップダウンをクリックすると､ WP､ HUDが表示されるので､ これを選択します｡

54
00:04:40,440 --> 00:04:41,970
‫さっそく再生ボタンを押してみましょう｡

55
00:04:42,090 --> 00:04:47,310
‫そして案の定､ 画面には大きな巨大な赤い十字が表示されています｡ おそらく､ 大きすぎるのでしょう｡

56
00:04:47,310 --> 00:04:53,880
‫では､ それを少し小さめのフォント､ 47くらいにしてみましょうか｡

57
00:04:54,390 --> 00:04:55,590
‫今すぐ再生ボタンを押してください｡

58
00:04:55,590 --> 00:04:56,720
‫そして､ それは大きなことです｡

59
00:04:57,340 --> 00:04:58,690
‫適度な大きさの十字線｡

60
00:04:58,690 --> 00:05:00,250
‫まだ少し大きいと私は思います｡

61
00:05:00,250 --> 00:05:02,860
‫だから､ 30くらいまで下げようと思っているんです｡

62
00:05:03,160 --> 00:05:04,240
‫試してみてください｡

63
00:05:05,420 --> 00:05:07,510
‫ええ､ それなら私のゲームでも納得です｡

64
00:05:08,980 --> 00:05:14,220
‫その通り､ 画面の中心を撮影しているのですから｡

65
00:05:14,220 --> 00:05:20,400
‫次に､ ライフル銃に再びダメージを与えようとする場合､ その完全な設計図を開くことになります｡

66
00:05:20,400 --> 00:05:25,980
‫エディターがダメージを50に設定し､ 我々をすぐに殺せるようにし､ プレイを開始する｡

67
00:05:26,430 --> 00:05:32,070
‫キルされると､ その十字線がそのまま残ってしまうので､ 十字線を消すことができるようにしたいのです｡

68
00:05:32,070 --> 00:05:37,800
‫幸いなことに､ これはすべてプレイヤー・コントローラ・クラスの中にあり､ すでにここでゲームが終了しているため､

69
00:05:37,800 --> 00:05:39,870
‫削除はかなり簡単です｡

70
00:05:39,870 --> 00:05:49,380
‫私たちがしたいことは､ 基本的に､ 私たちが勝者であろうとなかろうと､ そのHUDをビューポートから取り除くことです｡ なぜなら､ ここではそれを他のUIに置き換えているからです｡

71
00:05:49,380 --> 00:05:55,440
‫しかし､ ここで作成したHUDウィジェットを再生開始しても､ どこにも保存していないため､ 作成したHUDウィジェットを手に入れることができません｡

72
00:05:55,440 --> 00:06:05,040
‫ヘッダーファイルの下のほうに､ 新しいプライベート変数を作成して､ ユーザーウィジェットのHUDにします｡

73
00:06:05,580 --> 00:06:08,130
‫つまり､ プライベート変数にセットして再生を開始するわけです｡

74
00:06:08,130 --> 00:06:21,170
‫つまり､ ゲーム終了後にその変数にアクセスできるようにするのです｡

75
00:06:21,220 --> 00:06:26,970
‫今気づいたのですが､ 私は残念ながらHUDをシュータープレイヤーのコントローラーヘッダーではなく､ ガンヘッダーに追加してしまいましたが､

76
00:06:26,970 --> 00:06:29,670
‫実はこれが私がやりたかったことなのです｡

77
00:06:29,670 --> 00:06:35,640
‫また､ 新しいプロパティにするのを忘れたように見えますが､ これは保持したいポインタになるためで､

78
00:06:35,640 --> 00:06:41,550
‫正しくガベージコレクションされるようにする必要があります｡

79
00:06:41,550 --> 00:06:47,490
‫そう､ そのプロパティに指定子がなくても､ youプロパティになるはずです｡

80
00:06:47,490 --> 00:06:52,980
‫これで､ ゲームが終了する直前のif文を見てみると､

81
00:06:52,980 --> 00:07:03,630
‫ビューポートからそれを取り除きたいので､ HUDを実行することができます｡

82
00:07:03,630 --> 00:07:06,900
‫エンジンに行ってコンパイルして試してみましょう｡

83
00:07:06,900 --> 00:07:10,230
‫そして､ コンパイルが終わったら､ 再生ボタンを押して､ 殺されましょう｡

84
00:07:11,430 --> 00:07:14,730
‫そして案の定､ そこでHUDが消えてしまいました｡

85
00:07:14,730 --> 00:07:19,410
‫レベルを再起動すると､ Begin Playが再び呼び出されるため､ 再び表示されるようになります｡

86
00:07:19,650 --> 00:07:21,210
‫というわけで､ 今回の講義はここまで｡

87
00:07:21,210 --> 00:07:25,950
‫次回の講義では､ 実際のヘルスバーとクロスヘアをHUDに設定します｡

88
00:07:25,950 --> 00:07:31,980
‫しかし､ プレイ・コントローラーでUIを管理することで､

89
00:07:31,980 --> 00:07:41,310
‫配当を得ることができるようになったことがわかります｡

