UE4のブループリント使ってPONGを作成するチュートリアル

1. Pong

2. PONG
TVゲームの本当に初期のゲーム
https://www.youtube.com/watch?v=XNRx5hc4gYc
https://bit.ly/2MhK60y
Wikipedia

3. Index
1. アセットの取り込み
2. タイトル画面の作成
3. 選択画面の作成
4. ゲーム画面の作成
5. 最終確認

4. Index
1. アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
2. タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
3. 選択画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理4. ゲーム画面の作成
4. ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
5. 最終確認

5. 1.アセットの取り込み

6. 1.アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
6

7. 1.アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
7

8. プロジェクトを作成する
パラメーター 値
BP or C++ ブループリント
テンプレート 空のプロジェクト
スターターコンテンツ なし
フォルダ （任意）
名前 Pong
https://docs.unrealengine.com/latest/JPN/Engine/Basics/Projects/Browser/index.html
プロジェクトブラウザの詳細

9. 1.アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
9

10. アセットをダウンロード
https://1drv.ms/u/s!AsyaT0uIFWqQi7JeLq844wxkundpAA
ダウンロードリンク

11. 1.アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
11

12. 画像の設定
T_Arrows, T_Arrows2, T_Arrows3, T_Bars,
T_Paddle ,T_Selection1,, T_Selection2
プロパティ 値
Compression Settings UserInterface2D(RGBA)
Texture Group 2D Pixels(unfiltered)
Alpha Coverage
Thresholds
X:0.0 Y:0.0 Z:0.0 W:0.0
Use Legacy Gamma チェック
Never Stream チェック

13. 画像の設定(T_Ball,T_Enter)
プロパティ 値
Compression Settings UserInterface2D(RGBA)
Texture Group 2D Pixels(unfiltered)
Alpha Coverage
Thresholds
X:0.0 Y:0.0 Z:0.0 W:0.0
Use Legacy Gamma チェック
Never Stream チェックはずす

14. 画像の設定(T_SelectionBackground)
プロパティ 値
Alpha Coverage
Thresholds
X:0.0 Y:0.0 Z:0.0 W:0.0
Use Legacy Gamma チェック
Never Stream チェックはずす

15. スプライトSPR_Ballを作成する

16. SPR_Ballの設定
プロパティ 値
Source Texture T_Ball
Pixel per unit 4.8

17. Sprite:SPR_Paddleを作成する

18. SPR_Paddleの設定
プロパティ 値
Source Texture T_Paddle
Pixel per unit 4.8
Pivot Mode Bottom Center

19. 1.アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
19

20. Soundsのアセットをインポートし
キューを作成する

21. 1.アセットの取り込み
1.1 プロジェクトの作成
1.2 アセットのダウンロード
1.3 画像ファイルからスプライトの作成
1.4 サウンドファイルからキューの作成
1.5 フォントをインポート
21

22. フォントをインポートする

23. 2.タイトル画面の作成

24. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
24

25. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
25

26. 新規レベル[MapTitle]を作成する 1

27. 新規レベル[MapTitle]を作成する 2

28. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
28

29. ウィジェットブループリントWBP_Titleを
作成する

30. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
30

31. ウィジェットを配置する

32. Text:TextBlock_Title
プロパティ 値
変数名 TextBlock_Title
Size To Content チェック
Text PONG
Font > Font Family PixelMplus12-
Bold_Font
Font > Size 200

33. Image:Image_Enter
プロパティ 値
変数名 Image_Enter
サイズX 48
サイズY 48
Brush > Image T_Enter

34. Text:TextBlock_PressToStart
プロパティ 値
変数名 TextBlock_PressToStart
Is Variable チェック
Size To Content チェック
Text PRESS TO START
Font > Font
Family
PixelMplus12-Bold_Font
Font > Size 200

35. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
35

36. アニメーション:TextStartAnimationを作成
する

37. TextBlock_TitleのTransformを動かすアニ
メーションを作成する

38. Translation:Yのアニメーションを設定する

39. TextBlock_PressToStartのTransformを動
かすアニメーションを作成する

40. Translation:Yのアニメーションを設定する

41. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
41

42. イベントConstructの処理を実装

43. 2.タイトル画面の作成
2.1 新規レベルMapTitleを作成
2.2 ウィジェットブループリントWBP_Titleを作成
2.2.1 ウィジェットブループリントWBP_Titleを作成
2.2.2 ウィジェットの設定
2.2.3 アニメーションTextStartAnimationを作成
2.2.4 イベントConstructの処理を実装
2.3 レベルブループリントの実装
43

44. レベルブループリントを開く

45. 変数を追加する
変数名 変数の型
Title WBP_Title

46. レベルブループリントの処理

47. レベルブループリントの処理 1

48. レベルブループリントの処理 2

49. 3.選択画面の作成

50. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
50

51. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
51

52. 新規レベルMapSelectionModeを作成 1

53. 新規レベルMapSelectionModeを作成 2

54. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
54

55. 列挙型EGameTypeを作成 1

56. 列挙型EGameTypeを作成 2
表示名 説明
Player1 VS CPU Player1 VS CPU
Player1 VS Player2 Player1 VS Player2
エニュメレータ
Description
Enum Description
GameType

57. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
57

58. ブループリントBP_GameInstance
(親：GameInstance)を作成する

59. 変数を追加する
変数名 変数の型
GameType EGameType

60. カスタムイベントSetNextGameTypeを作成する 1
変数名 変数の型
GameType EGameType
インプット

61. カスタムイベントSetNextGameTypeを作成する 2

62. プロジェクト設定
GameInstanceClassにBP_GameInstanceを設定する

63. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
63

64. ウィジェットブループリント
WBP_SelectionModeを作成する

65. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
65

66. ウィジェットを配置する

67. Image:Image_Background
プロパティ 値
変数名 Image_Background
左オフセット 0.0
上オフセット 0.0
右オフセット 0.0
下オフセット 0.0
Brush > Image T_SelectionBackground

68. Image:Image_SelectionBox
プロパティ 値
変数名 Image_SelectionBox
左オフセット 0.0
上オフセット 0.0
右オフセット 0.0
下オフセット 0.0
Brush > Image T_Selection1

69. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
69

70. インベントConstructの処理

71. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
71

72. カスタムUpdateSelectionBoxを作成する
変数名 変数の型
GameType EGameType
インプット

73. UpdateSelectionBoxの処理

74. TextureのSelectノードを追加する手順

75. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
75

76. レベルブループリントを開いて変数を追加する
変数名 変数の型
SelectionMenu WBP_SelectionMenu
Index Integer
SelectionGameType EGameType

77. イベントBeginPlay,Enterキーイベントの処理

78. イベントBeginPlay,Enterキーイベントの処理 1

79. イベントBeginPlay,Enterキーイベントの処理 2

80. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
80

81. 左右矢印キーの入力

82. 3.タイトル画面の作成
3.1 新規レベルMapSelectionModeを作成
3.2 列挙型EGameTypeを作成
3.3 ゲームインスタンス:BP_GameInstanceを作成
3.4 ウィジェットブループリントWBP_SelectionModeを作成
3.4.1 ウィジェットブループリントWBP_SelectionModeを作成
3.4.2 イベントConstructの処理
3.4.3 カスタムイベントUpdateSelectionBoxを作成
3.5 レベルブループリントを実装する
3.5.1 イベントBeginPlay,Enterキーイベントの処理
3.5.2 左右矢印キーの入力でゲームタイプを選択する処理
3.5.3 Qキーの入力でゲームを終了する処理
82

83. Qキー Pressed の処理

84. 4.ゲーム画面の作成

85. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
85

86. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
86

87. 新規レベルMapMainGameを作成 1

88. 新規レベルMapMainGameを作成 2

89. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
89

90. ウィジェットブループリント
WBP_InGameを作成する

91. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
91

92. Image:ImageBordersを追加する
プロパティ 値
変数名 Image_Borders
左オフセット 0.0
上オフセット 0.0
右オフセット 0.0
下オフセット 0.0
Brush > T_Bars

93. Text:TextBlock_Player1Scoreを追加する
プロパティ 値
変数名 TextBlock_Player1Score
Is Variable チェックする
位地X 650.0
位地Y 30.0
サイズX 300.0
サイズY 140
Text 0
Font Family PixelMplus12-
Bold_Font
Size 100
Justification 中央揃え

94. TextBlock_Player1Scoreから
TextBlock_Player2Scoreを複製する
プロパティ 値
変数名 TextBlock_Player2Score
Is Variable チェックする
位地X 974.0
位地Y 30.0

95. Text:TextBlock_Pausedを追加する
プロパティ 値
変数名 TextBlock_Paused
Is Variable チェックする
左オフセット 0.0
位地Y -60
右オフセット 0.0
サイズY 120.0
Text PAUSED
Font Family PixelMplus12-
Bold_Font
Size 100
Justification 中央揃え

96. TextBlock_PauseからTextBlock_Readyを複製する
プロパティ 値
変数名 TextBlock_Ready
位地Y -60.0
Text

97. Text:TextBlock_Player2を追加する
プロパティ 値
変数名 TextBlock_Player2
Is Variable チェックする
位地X 30.0
位地Y 0.0
サイズX 200.0
サイズY 24
Text CPU
Color And
Opacity
R:0.0 G:0.0 B:0.0 A:1.0
Font Family PixelMplus12-
Bold_Font
Size 17
Justification 中央揃え

98. TextBlock_Player2からTextBlock_Player1
を複製する
プロパティ 値
変数名 TextBlock_Player1
位地X -230.0
Text PLAYER1

99. テキスト：Pを押したときのアナウンス
プロパティ 値
位地X -200.0
サイズX 400.0
Text Press 'P' TO PAUSE
THE GAME

100. テキスト：Mを押したときのアナウンス
プロパティ 値
位置X -300.0
位置Y -24.0
サイズX 600.0
Text Press 'M' TO GO BACK
TO SELECTION MENU

101. CanvasPanel_GameHUD
プロパティ 値
変数名 CanvasPanel_GameHUD
Is Variable チェックする

102. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
102

103. イベントConstruct

104. イベント Tick

105. カスタムイベント UpdateScoreTextを追加
変数名 変数の型
bPlayer1 Boolean
Value Integer
インプット

106. カスタムイベント UpdateScoreText

107. カスタムイベント InitializePlayer2Text
変数名 変数の型
GameType EGameType
インプット

108. カスタムイベント InitializePlayer2Text

109. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
109

110. ブループリントBP_MainGame(親:Actor)

111. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
111

112. コンポーネントを追加する

113. Camera:MainCameraを追加する
プロパティ 値
変数名 MainCamera
位置 X:0.0 Y:400.0 Z:0.0
回転 X:0.0 Y:0.0 Z:-90.0
Projection
Mode
Orthographic
Ortho Width 2048
Constrain
Aspect Ratio
チェックする
Use Pawn
Control
Rotation
チェックする

114. PaperSprite:Sprite_Player1Paddleを追加する
プロパティ 値
変数名 Sprite_Player1Paddle
位置 X:800.0 Y:400.0 Z:-75.0
拡大・縮小 X:1.25 Y:1.0 Z:1.25
Source Sprite SPR_Paddle

115. PaperSprite:Sprite_Player2Paddleを追加する
プロパティ 値
変数名 Sprite_Player2Paddle
位置 X:-800.0 Y:400.0 Z:-75.0
拡大・縮小 X:1.25 Y:1.0 Z:1.25
Source Sprite SPR_Paddle

116. PaperSprite:Sprite_Ballを追加する
プロパティ 値
変数名 Sprite_Ball
拡大・縮小 X:1.25 Y:1.25 Z:1.25
Source Sprite SPR_Ball

117. PaperSprite:Sprite_BallFakeを追加する
プロパティ 値
変数名 Sprite_Ball
Source Sprite SPR_Ball

118. Scene:SceneLimitsを追加する
プロパティ 値
変数名 SceneLimits

119. Arrow:Topを追加する
プロパティ 値
変数名 Top
位置 X:0.0 Y:0.0 Z:560.0
回転 X:0.0 Y:-90.0 Z:0.0
拡大・縮小 X:0.1 Y:1.0 Z:1.0
Arrow Color R:255 G:212 B:0 A255
Arrow Size 10.0

120. Arrow:Bottomを追加する
プロパティ 値
変数名 Bottom
位置 X:0.0 Y:0.0 Z:-560.0
回転 X:0.0 Y:90.0 Z:0.0
拡大・縮小 X:0.1 Y:1.0 Z:1.0
Arrow Color R:255 G:212 B:0 A255
Arrow Size 10.0

121. Arrow:Leftを追加する
プロパティ 値
変数名 Left
位置 X:-1000.0 Y:0.0 Z:0.0
回転 X:0.0 Y:180.0 Z:0.0
拡大・縮小 X:0.3 Y:1.0 Z:3.0
Arrow Size 10.0

122. Arrow:Rightを追加する
プロパティ 値
変数名 Right
位置 X:1000.0 Y:0.0 Z:0.0
回転 X:0.0 Y:0.0 Z:0.0
拡大・縮小 X:0.3 Y:1.0 Z:3.0
Arrow Size 10.0

123. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
123

124. インプット設定
プロパティ 値 Scale
MoveUpPlayer1 上 1.0
下 -1.0
MoveUpPlayer2 W 1.0
S -1.0

125. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
125

126. 変数を追加
する
変数名 変数の型 デフォルト値 インスタンス編集可能
BallSpeed Float 900.0 〇
PlayerPaddleSpeed Float 900.0 〇
AIPaddleSpeed Float 450.0 〇
BallFakeSpeedMultiplier Float 2.0 〇
bShowFakeBall Boolean - 〇
PadddleHeight Float -
PaddleHalfWidth Float -
BallRadius Float -
bGamePaused Boolean -
RefWBPInGame WBP_InGame
(ObjectReference)
-
CurrentGameType EGameType -
DeltaTime Float -
BallMovementDirection Vector2D -
FakeMovementDirection Vector2D -
Player1Score Integer -
Player2Score Integer -

127. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
127

129. イベントBeginPlay 1

130. イベントBeginPlay 2

131. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
131

132. Arrowによる範囲

133. TopLimitZの求め方

134. マクロ:GetTopLimitZ
変数名 変数の型
ReturnValue Float
アウトプット

135. BottomLimitZの求め方

136. マクロ：GetLimitBottomZ
変数名 変数の型
ReturnValue Float
アウトプット

137. LeftLimitXの求め方

138. マクロ:GetLeftLimitX
変数名 変数の型
ReturnValue Float
アウトプット

139. RightLimitXの求め方

140. マクロ:GetRightLimitX
変数名 変数の型
ReturnValue Float
アウトプット

141. Paddleが動ける範囲(最小値,最大値)

142. マクロ:ClampPaddleLocationZ
変数名 変数の型
ReturnValue Float
アウトプット
変数名 変数の型
Value Float
インプット

143. BallとPaddleの位置

144. マクロ:GetPlayer1PaddleRelativeLocation
変数名 変数の型
RelativeLocation Vector
アウトプット

145. マクロ:GetPlayer2PaddleRelativeLocation
変数名 変数の型
RelativeLocation Vector
アウトプット

146. マクロ:GetBallRelativeLocation
変数名 変数の型
RelativeLocation Vector
アウトプット

147. マクロ:GetBallFakeRelativeLocation
変数名 変数の型
RelativeLocation Vector
アウトプット

148. マクロ:BallPaddleCollision
変数名 変数の型
CollisionDetected 実行
None 実行
アウトプット
変数名 変数の型
CollisionTest 実行
PaddleLocationX Float
PaddleLocationY Float
インプット

150. Paddleとボールがぶつかっているか
Ball LocationX
BallRadius
Paddle LocationX
PaddleHalfWidth
X＋
Z＋

151. Paddleとボールがぶつかっているか
Ball LocationX
BallRadius
Paddle LocationX
PaddleHalfWidth
X＋
Z＋

152. Paddleとボールがぶつかっているか
Ball LocationX
BallRadius
Paddle LocationZ
X＋
Z＋

153. Paddleとボールがぶつかっているか
Ball LocationX
BallRadius
Paddle LocationZ
X＋
Z＋
PaddleHeight

154. マクロ:GetRandomVerticalVelocity
変数名 変数の型
RandomVelocity Float
アウトプット

155. Sign(Float)
https://api.unrealengine.com/INT/BlueprintAPI/Math/Float/Sign_float/index.html
Sign (float)
変数名 ReturnValue
A < 0 -1.0
A = 0 0.0
A > 0 1.0

156. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
156

157. カスタムイベント:UpdateScore
変数名 変数の型
bPlayer Boolean
インプット

158. カスタムイベント ResetBallFake

159. カスタムイベント
ResetBallLocationAndVelocity

160. カスタムイベント
BounceBallOnPaddleContact
変数名 変数の型
bBallFake Boolean
NewMovementDirectionX Float
インプット

161. 変数名 変数の型
bBallFake Boolean
NewMovementDirectionZ Float
インプット

162. カスタムイベント BallMovement

163. カスタムイベント:PlayerPaddleMovement

164. カスタムイベントRunCPUBasicAI

165. Player2のPaddleの位置設定

166. ボールを中心に捉える位置の算出
Ball LocationX
PaddleHieght/2
X＋
Z＋
BallMovementDirectionX
(Xが-の時にCPUの方にボールが近づいている)
Paddle LocationZ
このポイントに
移動するように動く

168. Topに接触したらMovementDirectionのZを反転する
BallFake LocationZ
X＋
Z＋
GetTopLimitZ
Top
Bottom

169. Bottomに接触したらMovementDirectionのZを反転する
BallFake LocationZ
X＋
Z＋
GetBottomLimitZ
Top
Bottom

170. Bottomに接触したらMovementDirectionのZを反転する
BallFake LocationZ
X＋
Z＋
GetBottomLimitZ
Top
Bottom

171. BallFakeがPaddleより右にいるか判定する
BallFake
LocationX
X＋
Z＋
Paddle
LocationZ
PaddleHalfWidth

172. BallFakeを移動する
X＋
Z＋
FakeMovementDirection Normalize Normalize x BallSpeed x BallFakeSpeedMultipler x DeltaTime
斜辺を1.0にする

173. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
173

175. イベントTickの処理 1

176. イベントTickの処理 2

177. Topに接触したらMovementDirectionのZを反転する
Ball LocationZ
X＋
Z＋
GetTopLimitZ
Top
Bottom

178. Bottomに接触したらMovementDirectionのZを反転する
Ball LocationZ
X＋
Z＋
GetBottomLimitZ
Top
Bottom

179. イベントTickの処理 3

180. Player1のPaddleに接触した時の処理
Ball LocationX
X＋
Z＋
Top
Bottom
BallFakeをBllの位置に移動
BallMovementDirection X を-1.0にして反転

181. Player2のPaddleに接触した時の処理
Ball LocationX
X＋
Z＋
Top
Bottom
BallMovementDirection X を1.0にして反転

182. イベントTickの処理 4

183. ボールが右端を越えた時の処理
X＋
Z＋
Right
BallLocationX
Left
GetRightLimitX
Center
+1
MovementDirection

184. ボールが右端を越えた時の処理
X＋
Z＋
Right
Ball
LocationX
Left
GetLeftLimitX
Center
+1
MovementDirection
BallFakeをBllの位置に移動

185. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
185

186. Pキー Pressed:GamePaused

187. Mキー Pressed : MapSelectionModeに戻る

188. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
188

189. BP_MainGameをビューポートに配置する

190. スタンドアローンゲームでプレイして確認する

191. 4.ゲーム画面の作成
4.1 新規レベルMapMainGameを作成
4.2 ウィジェットブループリント:WBP_InGameを作成
4.2.1 ウィジェットブループリント:WBP_InGameを作成
4.2.2 ウィジェットを配置
4.2.3 イベントグラフの処理
4.3 ブループリント:BP_MainGameを作成
4.3.1 ブループリント:BP_MainGameを作成
4.3.2 コンポーネントを追加
4.3.3 変数を追加
4.3.4 イベントBeginPlay
4.3.5 マクロ作成
4.3.6 カスタムイベントを作成
4.3.7 イベントTick
4.3.8 入力イベント(P,M)を作成
4.4 ブループリントBP_MainGameを配置しプレイして確認
4.5 BallFakeで予測するように修正
191

192. 変数bShowFakeBallをチェックする

193. プレイして確認する

194. BallFakeを追いかけるように修正する

195. プレイして確認する

196. BallFakeが表示されないように戻す

197. 5 最終確認

198. MapTitleを開く

199. MapTitle
・EnterキーでMapSelectionModeに移動

200. MapSelectionMode
・Qキーでゲーム終了
・左右→キーで選択
・Enterキーでゲーム開始

201. MapMainGame
・Pキーでポーズ
・MキーでMapSelectionModeに移動
・上下→キーでPlayer1のPaddleが移動
・得点が入った時に得点が更新される
・左上にCPUと表示される(P1 vs CPU)
・左上にPLAYER2と表示される(P1 vs P2)
・ SWキーでPlayer2のPaddleが移動(P1 vs P2)