算数ゲーム UE4 ブループリントでプログラム文法を1日で体験する
■概要
UE4のブループリントを使って簡単な算数ゲーム作成することで、プログラム文法を1日で体験できるような内容になっています
対象を何かしらの言語でプログラム文法を1度勉強したことがある人に設定しているため、基本的な説明(変数についてなど)を省いています
ブループリントだと触りながら動きを確認できるので、詳しい説明がなくても体感して分かるようになっています
プログラマ育成をかねて作成したので、作成して終わりではなく、テスト項目票作成やデバッグ手順も書きました
■MathGamePackage.zipの中身
- UE4プロジェクトファイル
- ゲームに使用する画像
- 手順書(MathGameDocument.pdf)
■Index
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 画像ファイルのインポート
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の表示/非表示
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 パッケージサイズをより小さくする
零式については、次に予定している「じゃんけんゲーム」で分かりやすく説明します。列挙型、構造体についての知識がある人であれば難しくない内容です
【零式】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 変数を初期化して問題を出力する
■お問い合わせ
長く繰り返し使っていけるように、内容に間違い・誤字を発見したらお知らせください
Mail: game@denshikousakubu.com
Twitter : https://twitter.com/gansaibow
■変更履歴
V1.2:2017/10/20
変数名の修正
分かりづらかった様子なので加筆
・6. UMGの作成・表示 (ウィジェットブループリント)
・7. UMGからゲームを実行できるようにする
V1.1:2017/10/18
誤字修正