Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

594 views

Published on


part3は次の内容で学習する内容を算数ゲームに取り込むとよりゲームらしくなるといった内容になっています
どちらにいれるか迷っているうちに完成してしまったので、入れてしまいました
列挙型、構造体、ループ文といった内容を知っている人であれば問題なく出来る内容になっています

part1
https://www.slideshare.net/denshikousakubu/part1-ue41

part2
https://www.slideshare.net/denshikousakubu/part2-ue41

part3
https://www.slideshare.net/denshikousakubu/part3-ue41-80991439

Published in: Education
  • Be the first to comment

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

  1. 1. 算数ゲーム UE4のブループリントでプログラム⽂法を1⽇で体験する Part.3 1
  2. 2. Index 1. 作成するゲーム内容、得られる知識 2. プロジェクトを作成する 3. ブループリントでHello Worldを画⾯に表⽰する 4. ブループリント(BP)で⾜し算ゲームを作成する 5. 計算⽅法(⾜し算、引き算、掛け算、割り算)をランダムに修正する 6. UMGの作成・表⽰(ウィジェットブループリント) 7. UMGからゲームを実⾏できるようにする 8. テスト項⽬票の作成、デバッグ 9. パッケージ化 【零式】 1ゲーム10回計算したら、結果を表⽰する 2
  3. 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. 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. 5. 【零式】 1ゲーム10回計算したら、結果を表⽰する 309
  6. 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. 7. 10回の⼊⼒後、まとめて結果を判定するように修正 問題出⼒ ⼊⼒ 判 定 結果出⼒ (正解) 結果出⼒ (不正解) 問題出⼒ ⼊⼒ 311 1 0 回 10回分の結果出力 (結果,得点)
  8. 8. 【零式】 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 変数を初期化して問題を出⼒する 312
  9. 9. 新規レベルの作成 1. ファイル > 新規レベル(Ctrl+N) 2. [空のレベル]を選択する 3. ファイル > 現在のレベルを保存(Ctrl+S) 4. Mapsフォルダに、名前を[PrintPlusGame]に設定して保存 313
  10. 10. 【零式】 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 変数を初期化して問題を出⼒する 314
  11. 11. BP_RandomCalcGameを複製して、 BP_PrintMathGameを作成 315 プレイして確認 BP_RandomCalcGameと同じ処理BP_RandomCalcGameを複製して、 BP_PrintMathGameを作成 ビューポートにドラッグ&ドロップ
  12. 12. 【零式】 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 変数を初期化して問題を出⼒する 316
  13. 13. 列挙型:E_CalcTypeを作成 317 Blueprintsフォルダを選択 右クリック > ブループリント > 列挙型 名前をE_CalcTypeに設定
  14. 14. E_CalcTypeにパラメータを設定 318 パラメータ + - * / E_CalcTypeをダブルクリック [新規]をクリックして、パラメータを追加 パラメータを設定する
  15. 15. 【零式】 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 変数を初期化して問題を出⼒する 319
  16. 16. 構造体(ST_CalcResult)を作成 320 Blueprintsを選択 右クリック > ブループリント > 構造体 名前を[ST_CalcResult]に設定
  17. 17. ST_CalcResultに変数を設定 321 変数名 変数の型 NumA Integer NumB Integer Total Float CalcType E_CalcType ST_CalcResultをダブルクリック [新規変数]をクリックして、変数を追加 変数に変数名、変数の型を設定 (CalcTypeの変数の型だけ、E_CalcTypeで検索する)
  18. 18. 【零式】 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 変数を初期化して問題を出⼒する 322
  19. 19. 323
  20. 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. 21. ローカル変数: LocalCalcTypeの変数の型をE_CalcTypeに変更 325 ローカル変数名 変数の型 LocalNumA Integer LocalNumB Integer LocalTotal Float LocalCalcType E_CalcType ローカル変数: LocalCalcTypeの変数の型をE_CalcTypeに変更 E_CalcTypeで検索すると見つかる
  22. 22. 列挙型のランダムのランダム化 326 パラメータ Byte + 0 - 1 * 2 / 3 列挙型は数値(Byte)に 変換することができる Integer > Byte > E_CalcTypeにすることで、 E_CalcTypeをランダム化することができる 右クリック > E_Calcで検索 > 列挙型変数へのバイト数 E_CalcType
  23. 23. E_CalcTypeのスイッチを追加 327 Byte -> E_CalcTypeをドラッグ&ドロップ > Swithで検索 > [E_CalcTypeでスイッチ]を選択 種別が決まっているのであれば、 Integerではなく、列挙型(Enum) を作成すると可読性やエラーが減る
  24. 24. LocalCalcTypeを設定しなおす スイッチからの計算⽅法をつなげなおす 328 LocalCalcTypeを設定しなおす リストから選択できるようになる スイッチからの計算方法をつなげなおす
  25. 25. リターンノードのCalcResultから ST_CalcResultを作成する 329 リターンノードのCalcResultをドラッグ&ドロップ > [ST_CalcResultを作成]を選択 ST_CalcResultの作成にインプットに ローカル変数を設定
  26. 26. 【零式】 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 変数を初期化して問題を出⼒する 330
  27. 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. 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. 29. 配列の設定⽅法 SingleVariableへの戻し⽅ 333 変数の型のリスト右側のアイコンをクリック [配列]を選択 変数の型のリスト右側のアイコンをクリック [Single Variable]を選択 配列 Single Variable
  30. 30. 【零式】 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 変数を初期化して問題を出⼒する 334
  31. 31. RandomCalculationの結果を配列に追加し て計算式を出⼒ 335
  32. 32. 配列にRandomCalculationの結果を追加する(Add) 336 CalcResultsのゲットを追加する CalcResultsをドラッグ&ドロップ > addで検索 > Addを選択 Random CalculationのCalcResultをAddにつなぐ [配列の追加手順] [配列の追加ノード] 配列 構造体[0] 構造体[1] 構造体[2] Add
  33. 33. 配列の取得(Get(a ref)) 337 配列 構造体[0] 構造体[1] 構造体[2] Get[配列の取得ノード]
  34. 34. 配列の数を取得(Length) 338 [配列の数を取得] 配列 構造体[0] 構造体[1] 構造体[2] LENGTH: 3
  35. 35. ⼀番最後に追加した構造体を取得する 339 配列 構造体[0] 構造体[1] 構造体[2] LENGTH: 3 Length – 1 = 最後の配列のIndex
  36. 36. 構造体を分解 (構造体の分解, 構造体ピンの分解) 340 ドラッグ&ドロップ > ST_CalcResultを分解 構造体ピンを右クリック > 構造体ピンを分解 構造体を分解すると、構造体の変数別々にアクセスできる 構造体の分割方法 : 分割ノードを作る, 構造体ピンの分解
  37. 37. 追加した最後の構造体から計算式を作成 341
  38. 38. 【零式】 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 変数を初期化して問題を出⼒する 342
  39. 39. 配列Answersに⼊⼒値を追加 343
  40. 40. 配列AnswersのLengthとGameCountMaxを⽐較 344
  41. 41. ⼊⼒回数に応じて処理を分岐 345
  42. 42. 【零式】 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 変数を初期化して問題を出⼒する 346
  43. 43. 結果をまとめて出⼒する 347
  44. 44. CalcResultsとAnswersの値を⽐較する 348 構造体[0] 構造体[1] 構造体[9] Integer[0] Integer[1] Integer[9] CalcResults (ST_CalcResultの配列) Answers (Integerの配列)
  45. 45. 配列をループで処理する 349 [ForEachLoop] 配列をIndexの0から順番に処理をする 配列のゲットをドラッグ&ドロップ foreachで検索 > ForEachLoopを選択
  46. 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. 47. 351 例) Answer: 2 NumA : 2 NumB : 3 Total : 5 CalcType: + 文字列 : True | 2 | 2+3=5 文字列フォーマットを作成
  48. 48. 正解の時にPointを+1する 352
  49. 49. 【零式】 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 変数を初期化して問題を出⼒する 353
  50. 50. ForEachLoopが完了したら得点を出⼒する 354
  51. 51. 【零式】 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 変数を初期化して問題を出⼒する 355
  52. 52. 得点を出⼒後、変数を初期化する 356 [初期化] Point : 0 Answers : (Clear) CalcResults : (Clear)
  53. 53. 357
  54. 54. プレイして確認する 358 問題出⼒ ⼊⼒ 1 0 回 10回分の 結果出力 (結果,得点) プレイして確認 フロー

×