算数ゲーム Part3 UE4のブループリントでプログラム文法を1日で体験する
•
2 recomendaciones•2,919 vistas
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
Más contenido relacionado
La actualidad más candente
La actualidad más candente (8)
Similar a 算数ゲーム Part3 UE4のブループリントでプログラム文法を1日で体験する
Similar a 算数ゲーム Part3 UE4のブループリントでプログラム文法を1日で体験する (17)
Más de Tatsuya Iwama
Más de Tatsuya Iwama (15)
Último
Último (7)
算数ゲーム Part3 UE4のブループリントでプログラム文法を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 変数を初期化して問題を出⼒する
- 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
- 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. 新規レベルの作成 1. ファイル > 新規レベル(Ctrl+N) 2. [空のレベル]を選択する 3. ファイル > 現在のレベルを保存(Ctrl+S) 4. Mapsフォルダに、名前を[PrintPlusGame]に設定して保存 313
- 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
- 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. 列挙型:E_CalcTypeを作成 317 Blueprintsフォルダを選択 右クリック > ブループリント > 列挙型 名前をE_CalcTypeに設定
- 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. 構造体(ST_CalcResult)を作成 320 Blueprintsを選択 右クリック > ブループリント > 構造体 名前を[ST_CalcResult]に設定
- 17. ST_CalcResultに変数を設定 321 変数名 変数の型 NumA Integer NumB Integer Total Float CalcType E_CalcType ST_CalcResultをダブルクリック [新規変数]をクリックして、変数を追加 変数に変数名、変数の型を設定 (CalcTypeの変数の型だけ、E_CalcTypeで検索する)
- 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. 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を設定しなおす リストから選択できるようになる スイッチからの計算方法をつなげなおす
- 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. 変数の変更(変数の配列化) 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
- 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
- 32. 配列にRandomCalculationの結果を追加する(Add) 336 CalcResultsのゲットを追加する CalcResultsをドラッグ＆ドロップ > addで検索 > Addを選択 Random CalculationのCalcResultをAddにつなぐ [配列の追加手順] [配列の追加ノード] 配列 構造体[0] 構造体[1] 構造体[2] Add
- 35. ⼀番最後に追加した構造体を取得する 339 配列 構造体[0] 構造体[1] 構造体[2] LENGTH: 3 Length – 1 = 最後の配列のIndex
- 36. 構造体を分解 (構造体の分解, 構造体ピンの分解) 340 ドラッグ＆ドロップ > ST_CalcResultを分解 構造体ピンを右クリック > 構造体ピンを分解 構造体を分解すると、構造体の変数別々にアクセスできる 構造体の分割方法 : 分割ノードを作る, 構造体ピンの分解
- 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
- 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. 結果をまとめて出⼒する 347
- 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 文字列フォーマットを作成
- 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
- 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. 得点を出⼒後、変数を初期化する 356 [初期化] Point : 0 Answers : (Clear) CalcResults : (Clear)
- 53. 357