算数ゲーム Part3 UE4のブループリントでプログラム文法を1日で体験する

1. 算数ゲーム UE4のブループリントでプログラム⽂法を1⽇で体験する Part.3 1

2. Index 1. 作成するゲーム内容、得られる知識 2. プロジェクトを作成する 3. ブループリントでHello Worldを画⾯に表⽰する 4. ブループリント(BP)で⾜し算ゲームを作成する 5. 計算⽅法(⾜し算、引き算、掛け算、割り算)をランダムに修正する 6. UMGの作成・表⽰（ウィジェットブループリント） 7. UMGからゲームを実⾏できるようにする 8. テスト項⽬票の作成、デバッグ 9. パッケージ化【零式】 1ゲーム10回計算したら、結果を表⽰する 2

3. 1. 作成するゲーム内容、得られる知識 2. プロジェクトを作成する 3. ブループリントでHello Worldを画⾯に表⽰する 4. ブループリントで⾜し算ゲームを作成する 4.1 新規レベル（RandomPlusGame）を作成・保存 4.2 ブループリント(BP_RandomPlusGame)を作成 4.3 ⾜し算の実装 4.4 ⾜し算の引数を変数化 4.5 ⾜し算を関数化 4.6 ランダムの数値を⾜し算する関数(RandomCalculation)を作成 4.7 キーボード⼊⼒で答えを⼊⼒ 4.8 正解判定 4.9 算数ゲーム(⾜し算のみ)化 5. 計算⽅法(⾜し算、引き算、掛け算、割り算)をランダムに修正する 5.1 新規レベル（RandomCalcGame）を作成・保存 5.2 BP_RandomPlusGameを複製して、BP_RandomCalcGameを作成 5.3 引き算、掛け算、割り算を実装 5.4 関数RandomCalculationの修正 5.5 算数ゲームの計算⽅法のランダム対応 6. UMGの作成・表⽰（ウィジェットブループリント） 6.1 新規レベル（DispWidget）を作成・保存 6.2 画像ファイルのインポート 3 6.3 ウィジェットブループリント(WBP_MathGameOutline)を作成 6.4 ウィジェットブループリントエディタについて 6.5 ウィジェットの配置 6.5.1 Imageを使⽤してアウトライン背景を表⽰ 6.5.2 Textを配置して計算式を作成 6.5.3 HorizonBoxを使⽤して、1~9のButtonを横並びに配置する 6.5.4 Imageを使⽤して結果判定の画像を配置 6.6 レベルブループリントの編集 6.6.1 ウィジェットを表⽰ 6.6.2 マウスカーソルを常に表⽰ 6.6.3 ESCキーでゲームを終了 7. UMGからゲームを実⾏できるようにする 7.1 新規レベル（MathGame）を作成・保存 7.2 WBP_MathGameOutlineを複製して、WBP_MathGameを作成 7.3 背景をアウトラインがない画像に変更 7.4 WBP_MathGameOutlineからWBP_MathGameを表⽰するようにレベルブループリントを修正 7.5 ウィジェットブループリントの基本機能を実装 7.5.1 ButtonのClickイベント 7.5.2 TextのTextプロパティの値を変更 7.5.3 Imageの画像切り替え 7.5.4 Imageの表⽰/⾮表⽰

4. 7.6 BP_RandomCalcGameの処理を参考にWBP_MathGameを実装 7.6.1 BP_RandomCalcGameから変更するポイント 7.6.2 BP_RandomCalcGameから変数、RandomCalculationを移植 7.6.3 ボタンのクリックイベントをTextBlock_NumAのTextに設定 7.6.4 計算とボタンの⼊⼒値を判定して結果画像と答えを表⽰ 7.6.5 計算と⼊⼒判定のループ化 8. テスト項⽬票の作成、デバッグ 8.1 そのゲームちゃんと動くの？ 8.2 ゲーム内容からテスト項⽬の抽出 8.3 テスト項⽬票を作成して、テストを実施 8.4 ブループリント、関数単位のテストするためのデバッグ⽅法について 8.5 ブラックボックステスト、ホワイトボックステスト 8.6 作りたいゲームの作り⽅、⼯程に対応するテスト 9. パッケージ化 9.1 配布⽤パッケージにするためのプロジェクト設定 9.2 Windows(64ビット)でパッケージ化 9.3 パッケージサイズをより⼩さくする 4 【零式】1ゲーム10回計算したら、結果を表⽰する 1. 新規レベル（PrintMathGame）を作成・保存 2. BP_RandomCalcGameを複製して、BP_PrintMathGameを作成 3. 列挙型：E_CalcTypeを作成 4. 構造体：ST_CalcResultの作成 5. 構造体,列挙型を関数RandomCalculationに組み込む 6. 1ゲーム10回計算したら、結果を表⽰する 6.1 変数の変更(変数の配列化) 6.2 RandomCalculationの結果を配列に追加して計算式を出⼒ 6.3 ⼊⼒後の判定を変更 6.4 結果をまとめて出⼒ 6.5 結果をまとめて出⼒したら、得点を出⼒ 6.6 変数を初期化して問題を出⼒する

5. 【零式】 1ゲーム10回計算したら、結果を表⽰する 309

6. 【零式】 1ゲーム10回計算したら、結果を表⽰する 1 新規レベル（PrintMathGame）を作成・保存 2 BP_RandomCalcGameを複製して、BP_PrintMathGameを作成 3 列挙型：E_CalcTypeを作成 4 構造体：ST_CalcResultの作成 5 構造体,列挙型を関数RandomCalculationに組み込む 6 1ゲーム10回計算したら、結果を表⽰する 6.1 変数の変更(変数の配列化) 6.2 RandomCalculationの結果を配列に追加して計算式を出⼒ 6.3 ⼊⼒後の判定を変更 6.4 結果をまとめて出⼒ 6.5 結果をまとめて出⼒したら、得点を出⼒ 6.6 変数を初期化して問題を出⼒する 310

7. 10回の⼊⼒後、まとめて結果を判定するように修正問題出⼒⼊⼒判定結果出⼒ (正解) 結果出⼒ (不正解) 問題出⼒⼊⼒ 311 １０回１０回分の結果出力 (結果,得点)

9. 新規レベルの作成 1. ファイル > 新規レベル(Ctrl+N) 2. [空のレベル]を選択する 3. ファイル > 現在のレベルを保存(Ctrl+S) 4. Mapsフォルダに、名前を[PrintPlusGame]に設定して保存 313

11. BP_RandomCalcGameを複製して、 BP_PrintMathGameを作成 315 プレイして確認 BP_RandomCalcGameと同じ処理BP_RandomCalcGameを複製して、 BP_PrintMathGameを作成ビューポートにドラッグ＆ドロップ

13. 列挙型:E_CalcTypeを作成 317 Blueprintsフォルダを選択右クリック > ブループリント > 列挙型名前をE_CalcTypeに設定

14. E_CalcTypeにパラメータを設定 318 パラメータ + - * / E_CalcTypeをダブルクリック [新規]をクリックして、パラメータを追加パラメータを設定する

16. 構造体(ST_CalcResult)を作成 320 Blueprintsを選択右クリック > ブループリント > 構造体名前を[ST_CalcResult]に設定

17. ST_CalcResultに変数を設定 321 変数名変数の型 NumA Integer NumB Integer Total Float CalcType E_CalcType ST_CalcResultをダブルクリック [新規変数]をクリックして、変数を追加変数に変数名、変数の型を設定 (CalcTypeの変数の型だけ、E_CalcTypeで検索する)

19. 323

20. アウトプットをST_CalcResultのみに変更 324 CalcResultの変数の型を ST_CalcResultに設定する (ST_CalcResultで検索すると見つかる) 関数名 Input/Output パラメータ名型 RandomCalculation Output A Integer Output B Integer Output Total Float Output CalcType String 関数名 Input/Output パラメータ名型 RandomCalculation Output CalcResult ST_CalcResult

21. ローカル変数: LocalCalcTypeの変数の型をE_CalcTypeに変更 325 ローカル変数名変数の型 LocalNumA Integer LocalNumB Integer LocalTotal Float LocalCalcType E_CalcType ローカル変数: LocalCalcTypeの変数の型をE_CalcTypeに変更 E_CalcTypeで検索すると見つかる

22. 列挙型のランダムのランダム化 326 パラメータ Byte + 0 - 1 * 2 / 3 列挙型は数値(Byte)に変換することができる Integer > Byte > E_CalcTypeにすることで、 E_CalcTypeをランダム化することができる右クリック > E_Calcで検索 > 列挙型変数へのバイト数 E_CalcType

23. E_CalcTypeのスイッチを追加 327 Byte -> E_CalcTypeをドラッグ＆ドロップ > Swithで検索 > [E_CalcTypeでスイッチ]を選択種別が決まっているのであれば、 Integerではなく、列挙型(Enum) を作成すると可読性やエラーが減る

24. LocalCalcTypeを設定しなおすスイッチからの計算⽅法をつなげなおす 328 LocalCalcTypeを設定しなおすリストから選択できるようになるスイッチからの計算方法をつなげなおす

25. リターンノードのCalcResultから ST_CalcResultを作成する 329 リターンノードのCalcResultをドラッグ＆ドロップ > [ST_CalcResultを作成]を選択 ST_CalcResultの作成にインプットにローカル変数を設定

27. 変数の変更(変数の配列化) 331 変数名変数の型デフォルト値 NumA(削除) Integer 8 NumB(削除) Integer 5 Total(削除) Integer - PrintStringDuration Float 10.0 Answer Integer - CalcResults ST_CalcResult(配列) - Answers Integer(配列) - GameCountMax Integer 10 Point Integer -

28. SingleVariable,配列,構造体の違い 332 変数 (Integer) 配列 (Integer) 変数[0] (Integer) 変数[1] (Integer) 変数[2] (Integer) Single Variable 配列構造体変数 (Integer) 変数 (Float) 変数 (String) 構造体配列構造体[0] 構造体[1] 構造体[2] 構造体の配列ローカル変数名特徴 Single Variable 1つの型配列 1つの型を複数持てる(1からではなく,0から始まる) 構造体 1つの変数で複数の型が持てる構造体の配列 1つの変数で複数の構造体を持てる

29. 配列の設定⽅法 SingleVariableへの戻し⽅ 333 変数の型のリスト右側のアイコンをクリック [配列]を選択変数の型のリスト右側のアイコンをクリック [Single Variable]を選択配列 Single Variable

31. RandomCalculationの結果を配列に追加して計算式を出⼒ 335

32. 配列にRandomCalculationの結果を追加する(Add) 336 CalcResultsのゲットを追加する CalcResultsをドラッグ＆ドロップ > addで検索 > Addを選択 Random CalculationのCalcResultをAddにつなぐ [配列の追加手順] [配列の追加ノード] 配列構造体[0] 構造体[1] 構造体[2] Add

33. 配列の取得(Get(a ref)) 337 配列構造体[0] 構造体[1] 構造体[2] Get[配列の取得ノード]

34. 配列の数を取得(Length) 338 [配列の数を取得] 配列構造体[0] 構造体[1] 構造体[2] LENGTH: 3

35. ⼀番最後に追加した構造体を取得する 339 配列構造体[0] 構造体[1] 構造体[2] LENGTH: 3 Length – 1 = 最後の配列のIndex

36. 構造体を分解 (構造体の分解, 構造体ピンの分解) 340 ドラッグ＆ドロップ > ST_CalcResultを分解構造体ピンを右クリック > 構造体ピンを分解構造体を分解すると、構造体の変数別々にアクセスできる構造体の分割方法 : 分割ノードを作る, 構造体ピンの分解

37. 追加した最後の構造体から計算式を作成 341

39. 配列Answersに⼊⼒値を追加 343

40. 配列AnswersのLengthとGameCountMaxを⽐較 344

41. ⼊⼒回数に応じて処理を分岐 345

43. 結果をまとめて出⼒する 347

44. CalcResultsとAnswersの値を⽐較する 348 構造体[0] 構造体[1] 構造体[9] Integer[0] Integer[1] Integer[9] CalcResults (ST_CalcResultの配列) Answers (Integerの配列)

45. 配列をループで処理する 349 [ForEachLoop] 配列をIndexの0から順番に処理をする配列のゲットをドラッグ＆ドロップ foreachで検索 > ForEachLoopを選択

46. 350 Integer[0] Integer[1] Integer[2] Answers (Integerの配列) 9 3 5 9|0 3|1 5|2 Completed 出力される順番 Index 値 LoopBodyの処理 Completedの処理例） Answers[0] Answers[1] Answers[2] サンプル）配列をForEachLoopを出力する処理

47. 351 例） Answer: 2 NumA : 2 NumB : 3 Total : 5 CalcType: + 文字列 : True | 2 | 2+3=5 文字列フォーマットを作成

48. 正解の時にPointを+1する 352

50. ForEachLoopが完了したら得点を出⼒する 354

52. 得点を出⼒後、変数を初期化する 356 [初期化] Point : 0 Answers : (Clear) CalcResults : (Clear)

53. 357

54. プレイして確認する 358 問題出⼒⼊⼒１０回１０回分の結果出力 (結果,得点) プレイして確認フロー

算数ゲーム Part3 UE4のブループリントでプログラム文法を1日で体験する

Tatsuya Iwama

算数ゲーム Part3 UE4のブループリントでプログラム文法を1日で体験する