1
00:00:04,470 --> 00:00:05,770
‫やあ､ お帰りなさい｡

2
00:00:05,790 --> 00:00:12,240
‫このビデオでは､ ゲームの開始を知らせるテキストを画面に表示する作業を行います｡

3
00:00:12,240 --> 00:00:21,140
‫そして､ これはカウントダウンタイマーを表示して､ 「まだゲームは始まっていないけど､ もうすぐ始まるよ」ということをプレイヤーに知らせるための第一歩なのです｡

4
00:00:21,150 --> 00:00:24,900
‫さて､ これにはブループリントの実装可能なイベントが関わってきます｡

5
00:00:24,930 --> 00:00:35,070
‫ブループリント実装可能イベントは､ C++ から呼び出せる C++ 関数ですが､ 実際にはブループリント側で機能を実装しています｡

6
00:00:35,070 --> 00:00:41,910
‫つまり､ ゲームモードのようなC++クラスがあり､ ブループリント､ 実装可能なイベントとしてマークされた関数があり､

7
00:00:41,910 --> 00:00:47,310
‫その動作をブループリントで実装することができます｡

8
00:00:47,310 --> 00:00:55,920
‫つまり､ ブループリントの実装可能なイベントとしてマークされた C++ 関数を呼び出すと､ ブループリント内のイベントが発火するのです｡

9
00:00:55,920 --> 00:01:01,890
‫そして､ ブループリントでそのイベントに接続したブループリントのロジックはすべて呼び出されます｡

10
00:01:02,160 --> 00:01:11,310
‫そこで､ チューンタンク､ ゲームモード､ ブループリント実装可能なイベントを非公開にすることはできないので､ ここにブループリント実装可能なイベント関数を作成することにします｡

11
00:01:11,310 --> 00:01:14,220
‫そこで､ これをプロテクトの項目に追加することにします｡

12
00:01:14,220 --> 00:01:19,080
‫では､ これをvoid関数にして､ 単純にstart gameと呼ぶことにします｡

13
00:01:19,080 --> 00:01:26,160
‫さて､ これを設計図に実装可能なイベントにするためには､ U関数でマクロを付与する必要がありますね｡

14
00:01:26,160 --> 00:01:30,570
‫ブループリントの実装可能なイベントを指定します｡

15
00:01:30,690 --> 00:01:37,800
‫さて､ このブループリントに実装可能なイベントをマークすると､ C++ではこのイベントに関数ボディを与える必要すらありません｡

16
00:01:37,800 --> 00:01:43,680
‫Unreal Engine は､ この機能をブループリントに実装することを想定していますが､ C++ から呼び出すことができますので､

17
00:01:43,680 --> 00:01:49,110
‫この Handle Game Start でまさにそれを行います｡

18
00:01:49,110 --> 00:01:57,840
‫戦車とプレイヤーのコントローラ変数を設定した後､ start gameを呼び出すと､ これをコンパイルすることができます｡

19
00:01:57,840 --> 00:02:05,700
‫そして､ エディターに戻って､ BP tune tanksゲームモードを開き､ ここで関数を実装します｡

20
00:02:05,700 --> 00:02:13,380
‫右クリックして､ start game と入力すると､ 関数を宣言して､ ブループリント実装可能なイベントを持つ関数マクロを与えると同時に作成されたイベント

21
00:02:13,380 --> 00:02:19,980
‫start game が表示されるわけです｡

22
00:02:19,980 --> 00:02:26,580
‫つまり､ C++側ではこれを呼び出し､ blueprintsではこのイベントが応答しているわけです｡

23
00:02:26,610 --> 00:02:33,390
‫単純なprint stringノードでこれをテストすることができ､ 文字列にはStart gameと書くことができます｡

24
00:02:33,600 --> 00:02:37,650
‫さて､ 再生ボタンを押すと､ 左上にゲームの開始が表示されますね｡

25
00:02:37,650 --> 00:02:41,370
‫つまり､ ブループリントの実装可能なイベントが機能していることがわかります｡

26
00:02:41,370 --> 00:02:49,530
‫さて､ このイベントで行いたいことは､ ゲームが始まることを知らせるテキストを含むウィジェットを表示することです｡

27
00:02:49,530 --> 00:02:53,880
‫つまり､ 表示するウィジェットを作成する必要があります｡

28
00:02:53,880 --> 00:03:02,370
‫そこで､ blueprints フォルダに新しいフォルダを作成し､ これを widgets と名付け､ widgets をダブルクリックすることにします｡

29
00:03:02,370 --> 00:03:05,730
‫そしてここで､ 新しいウィジェット設計図を作成します｡

30
00:03:05,940 --> 00:03:11,010
‫右クリックでユーザーインターフェースに移動すると､ ここにWidget Blueprintがあります｡

31
00:03:11,040 --> 00:03:17,520
‫これをクリックすると､ 新しいウィジェット設計図が作成されます｡ これをW BP（Widget Blueprint）と呼び､

32
00:03:17,520 --> 00:03:21,540
‫アンダースコアでゲームウィジェットを開始します｡

33
00:03:21,960 --> 00:03:31,560
‫これをダブルクリックすると､ ウィジェット・ブループリント・エディタが開かれます｡

34
00:03:31,560 --> 00:03:33,840
‫しかも､ これはウィジェット用だからです｡

35
00:03:33,840 --> 00:03:37,860
‫ウィジェットは､ 文字などの画面上のものを表示するのに適しています｡

36
00:03:37,890 --> 00:03:43,590
‫ここでは､ テキストを表示する非常に基本的なウィジェットのみを作成します｡

37
00:03:43,620 --> 00:03:50,310
‫ウィジェット設計図に追加できる要素には､ ボーダー､ ボタン､ チェックボックス､

38
00:03:50,310 --> 00:03:53,580
‫画像など､ さまざまな種類があります｡

39
00:03:53,580 --> 00:03:58,140
‫しかし､ 私たちが注目するのは､ この「テキスト」と書かれたものです｡

40
00:03:58,140 --> 00:04:06,180
‫さて､ この階層パネルを見てみると､ 一番上に全体的なWBスタートゲームウィジェットがあるのがわかります｡

41
00:04:06,180 --> 00:04:10,500
‫そして､ それをクリックすると､ このウィジェットのプロパティを変更することができます｡

42
00:04:10,530 --> 00:04:14,040
‫あとは､ この階層にウィジェットエレメントをドラッグしていけばいい｡

43
00:04:14,040 --> 00:04:20,070
‫そこで､ パレットからキャンバスパネルを検索し､ それを階層にドラッグします｡

44
00:04:21,590 --> 00:04:33,020
‫キャンバスパネルでウィジェット要素を配置し､ 画面上の好きな位置に設定できるようになったので､ テキスト要素をそのままグラフ上にドラッグできるようになりました｡

45
00:04:33,020 --> 00:04:37,910
‫そして､ キャンバスパネルの下の階層に､ この新しい項目が表示されます｡

46
00:04:37,910 --> 00:04:39,360
‫そして､ テキストと書かれています｡

47
00:04:39,360 --> 00:04:40,310
‫テキストブロック｡

48
00:04:40,310 --> 00:04:47,450
‫さて､ この引用符で囲まれたテキストブロックは､ このテキストウィジェットに自動的に設定されたテキストです｡

49
00:04:47,450 --> 00:04:54,740
‫そして､ この詳細パネルで､ コンテンツの下でこのテキスト・ウィジェットを選択すると､ テキストのプロパティが表示され､

50
00:04:54,740 --> 00:04:57,170
‫テキスト・ブロックに設定されています｡

51
00:04:57,170 --> 00:05:00,860
‫しかし､ これをget readyのような好きなテキストに設定することができるのです｡

52
00:05:01,250 --> 00:05:06,620
‫さて､ これをget readyに設定すると､ 画面上のこのテキストに､ Get readyと表示されるのがわかります｡

53
00:05:06,710 --> 00:05:13,940
‫Widget Blueprintエディタでは､ ウィジェットをカスタマイズすることができます｡ 画面の左上にあるこのメダル状のものは､

54
00:05:13,940 --> 00:05:17,810
‫アンカーと呼ばれています｡

55
00:05:17,840 --> 00:05:22,100
‫テキストウィジェットは､ アンカーと相対的に画面上に配置されます｡

56
00:05:22,100 --> 00:05:27,560
‫つまり､ 画面サイズが変わっても､ そのアンカーからの距離は一定に保たれるのです｡

57
00:05:27,560 --> 00:05:29,990
‫アンカーも変えようと思えば変えられるしね｡

58
00:05:30,020 --> 00:05:35,690
‫例えば､ テキストウィジェットを画面中央のアンカーに相対的に設定するには､ 詳細パネルに移動して､

59
00:05:35,690 --> 00:05:39,470
‫スロットの下にあるアンカーを表示させます｡

60
00:05:39,470 --> 00:05:45,500
‫そして､ ドロップダウンをクリックすると､ 真ん中に四角いものがあるこのアイコンを選択することができるのです｡

61
00:05:45,500 --> 00:05:51,080
‫今これを選択すると､ アンカーは画面の中央にあります｡ ウィジェットを完全に中央に配置したい場合は､

62
00:05:51,080 --> 00:05:58,430
‫スロットカテゴリの下にある位置XとYを変更できますので､ これを位置Xと位置Yにゼロに設定して､

63
00:05:58,430 --> 00:06:08,510
‫マウスホイールでスクロールして拡大すると､ 画面の中央のように左上隅にあることがわかります｡

64
00:06:08,510 --> 00:06:21,350
‫このアライメントフィールドの値を0にすると､ 完全に中央に配置することができます｡  54 Xと0. 54 Yで､ 完全に画面の中央に表示されるようになりました｡

65
00:06:21,440 --> 00:06:28,250
‫さて､ ゲーム開始ウィジェットでは､ このテキストをもう少し上の方に配置するのが適切でしょう｡

66
00:06:28,250 --> 00:06:35,840
‫位置 Y の場合､ これをクリックして左にドラッグすると､ 位置 Y の値がマイナスになり､ ウィジェットのブループリント・エディターでは､

67
00:06:35,840 --> 00:06:40,250
‫Y 軸が下向きになります｡

68
00:06:40,250 --> 00:06:46,250
‫つまり､ テキストウィジェットを上に上げたい場合は､ その位置yを低い値にすることになります｡

69
00:06:46,250 --> 00:06:49,130
‫ここで-300くらいに置いておく｡

70
00:06:49,130 --> 00:06:55,460
‫さて､ 外観のカテゴリーでは､ このテキストのプロパティをいくつか変更することができます｡

71
00:06:55,460 --> 00:07:01,730
‫フォントのドロップダウンをクリックすると､ フォントサイズを42のように変更することができるんだ｡

72
00:07:01,730 --> 00:07:04,070
‫今度はボールドではなく､ 書体で｡

73
00:07:04,070 --> 00:07:06,140
‫普通の書体が好きです｡

74
00:07:06,140 --> 00:07:07,970
‫少しは見栄えが良くなったと思います｡

75
00:07:07,970 --> 00:07:15,230
‫テキストウィジェットのテキストは､ この緑の長方形よりも大きいことに注意してください｡

76
00:07:15,230 --> 00:07:22,880
‫矩形を変更すると､ この詳細パネルでサイズXとサイズyが変化していることがわかります｡

77
00:07:22,880 --> 00:07:26,270
‫さて､ 私が変更した後､ ポジションXが少し移動していることに注目してください｡

78
00:07:26,270 --> 00:07:32,180
‫0に戻せるし､ xのアライメントが0なので｡  5､ 完全に中央に配置されている｡

79
00:07:32,180 --> 00:07:35,540
‫だから､ 今はGet readyというウィジェットを用意しています｡

80
00:07:35,570 --> 00:07:40,400
‫あとは､ これをビューポートに追加して､ 画面上で確認できるようにするだけです｡

81
00:07:40,400 --> 00:07:46,370
‫再生ボタンを押してゲームを始めると､ 画面にそのウィジェットが表示されていないことに気づくでしょう｡

82
00:07:46,370 --> 00:07:51,530
‫これは､ 積極的にこれを画面に追加する必要があるからです｡ そのため､ ゲーム モードでこのブループリントの実装可能イベントを作成し､

83
00:07:51,530 --> 00:07:56,960
‫ここでこのウィジェットを画面に追加できるようにしました｡

84
00:07:56,960 --> 00:07:59,090
‫では､ その方法についてお話ししましょう｡

85
00:07:59,420 --> 00:07:59,840
‫今すぐ

86
00:07:59,840 --> 00:08:05,930
‫ブループリントからウィジェットを作成する方法は､ create widgetノードを使用することです｡

87
00:08:05,960 --> 00:08:13,760
‫任意のブループリントのイベントグラフで右クリックして､ ノードの名前を入力し始め､ その特定のノードを選択することができます｡

88
00:08:13,790 --> 00:08:16,040
‫必要なノードはcreate widgetです｡

89
00:08:16,040 --> 00:08:20,990
‫これで､ Create Coolness Widgetと書かれているのがわかると思います｡

90
00:08:20,990 --> 00:08:29,150
‫これは､ Create Widgetノードを追加すると同時に､ クラス・ドロップダウンでWidget Blueprintクラスを選択したためです｡

91
00:08:29,150 --> 00:08:34,340
‫これは､ Unreal Engine がどのウィジェットクラスを作成すべきかを知るために必要です｡

92
00:08:34,370 --> 00:08:40,880
‫さて､ create widgetノードを使った後､ add to viewportノードを使い､ 実際にこのウィジェットをビューポートに追加すると､

93
00:08:40,880 --> 00:08:45,290
‫ゲーム内の画面上に表示されるようになります｡

94
00:08:45,320 --> 00:08:52,700
‫これは､ add to viewportがどのウィジェットをビューポートに追加するかを知っている必要があり､

95
00:08:52,700 --> 00:09:06,290
‫create widgetノードがそのウィジェットの値を返すからです｡

96
00:09:06,290 --> 00:09:11,570
‫ブループリントでウィジェットを作成する方法が分かったので､ BP tune tanks ゲームモード

97
00:09:11,570 --> 00:09:14,960
‫クラスに入り､ create widget ノードを使用します｡

98
00:09:14,990 --> 00:09:20,390
‫これをブループリントの実装可能なイベント実行ワイヤーからフックするつもりです｡

99
00:09:20,500 --> 00:09:21,910
‫私たちは､ Start Gameと呼びました｡

100
00:09:21,910 --> 00:09:29,800
‫次に､ Create Widget ノードで､ 作成するウィジェットクラスを選択する必要があります｡ WB start game ウィジェット､

101
00:09:29,800 --> 00:09:36,700
‫つまり先ほど作成した新しいウィジェットブループリントを選択し､ add to viewport ノードでこの新しいウィジェットを実際にビューポートに追加し､

102
00:09:36,700 --> 00:09:40,960
‫実行ワイヤーをフックします｡

103
00:09:40,960 --> 00:09:47,560
‫また､ viewportへの追加で､ create widgetの戻り値をターゲット入力にフックすることを忘れないでください｡

104
00:09:47,560 --> 00:09:52,900
‫そこで､ ビデオを一時停止して､ 今すぐチューンタンクのゲームモード設計図にこれらのノードを追加してください｡

105
00:09:56,670 --> 00:10:03,090
‫ここでは､ Tune Tanks Game Mode Blueprintで右クリックし､ create widgetと入力して､

106
00:10:03,090 --> 00:10:05,700
‫Create Widget Nodeを選択します｡

107
00:10:05,730 --> 00:10:07,830
‫ここで､ Construct Noneと書かれていることに注目してください｡

108
00:10:07,830 --> 00:10:13,600
‫これは､ クラス・ドロップダウンで適切なウィジェットクラスを選択するまで､ このように表示されるからです｡

109
00:10:13,620 --> 00:10:18,210
‫でもその前に､ イベントスタートゲームからの実行配線を繋ぎます｡

110
00:10:18,210 --> 00:10:26,700
‫つまり､ C++からブループリント実装可能なイベント開始ゲームが呼び出されると同時に､ この機能が実際に実行されるのです｡

111
00:10:26,970 --> 00:10:34,830
‫クラス・ドロップダウンで､ WP Start Game Widgetを選択すると､ ノードのタイトルがCreate

112
00:10:34,830 --> 00:10:38,700
‫WP Start Game Widgetに変更されます｡

113
00:10:38,820 --> 00:10:41,880
‫これで､ これはcreate widgetノードであることがわかります｡

114
00:10:41,910 --> 00:10:48,660
‫では､ 実行線をクリックしてドラッグアウトし､ add to viewportと入力します｡

115
00:10:48,660 --> 00:10:54,720
‫そして､ add to viewportを選択すると､ 実行配線は自動的に接続されますが､ create

116
00:10:54,720 --> 00:11:01,410
‫widgetからの戻り値がadd to viewportのターゲット入力に接続されません｡

117
00:11:01,410 --> 00:11:04,070
‫だから､ 自分でクリックしてドラッグする必要があるんだ｡

118
00:11:04,080 --> 00:11:10,920
‫これで､ Start Game が C++ とゲーム モード クラスから呼び出されると､ このブループリント ロジックを実行して､

119
00:11:10,920 --> 00:11:19,500
‫WP Start Game ウィジェットに基づいて新しいウィジェットを作成し､ それをビューポートに追加することができます｡

120
00:11:19,500 --> 00:11:23,220
‫再生ボタンをクリックすると､ Get Readyウィジェットが表示されます｡

121
00:11:23,400 --> 00:11:32,220
‫カウントダウンタイマーを表示すると言いましたが､ まだその機能は実装されていません｡

122
00:11:32,490 --> 00:11:39,930
‫まとめると､ Start Game Widget Blueprint を作成し､ 今のところ Get ready というテキストが表示されるだけです｡

123
00:11:40,260 --> 00:11:48,990
‫また､ create widgetノードとadd to viewportノードを使用して､ このウィジェットをビューポートに追加し､ ゲーム開始と同時に表示できるようにしました｡

124
00:11:48,990 --> 00:11:55,620
‫この機能は､ ゲーム モード C++ クラスで作成した「Start Game」というブループリント実装可能なイベントを使って開始しました｡

125
00:11:55,620 --> 00:12:02,460
‫次の動画では､ このウィジェットのテキストを実行時に変更して､ ゲーム開始タイマーの残り時間を表示し､

126
00:12:02,460 --> 00:12:13,140
‫プレイヤーが実際にゲームを開始できるまでの待ち時間が分かるようにします｡

127
00:12:13,860 --> 00:12:14,850
‫また､ お会いしましょう｡