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

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

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

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の表⽰/⾮表⽰

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 変数を初期化して問題を出⼒する

1.作成するゲーム内容、得られる知識
5

作成するゲーム内容
数値A、数値Bの数字、
計算⽅法(+,-,x,÷)がランダム
計算式の数値Aは？で
表⽰されていて分からない
正解
不正解
繰り返し
6
数値Aの数字と⼀致する
ボタン(1〜9)をクリック
入力問題出力
ESCキー：ゲーム終了
数値Aの値と解答に表⽰されるランダムで出した
数値が⼀致するかどうかで正解か不正解か分かる
解答出力

得られる知識
• ブループリントの作り⽅（基本操作）
• 変数
• 計算ノード
• 関数
• If⽂(ブランチ)
• キーボード⼊⼒
• UIの作り⽅(ウィジェットブループリントのデザイン)
• ウィジェットブループリントの処理（ボタン⼊⼒、表⽰の切り替え）
• 設計書からのテスト項⽬作成
• デバッグ
• パッケージ化(Exeの書き出し)
【零式】
• 構造体
• 列挙型
• 配列（作成、取得、ループ)
7

使⽤するアプリケーション
• UnrealEngine4(Winsows 10) Version 4.17.2
8

アセットのダウンロード
9
https://gumroad.com/l/BpAfG
gumroadからアセットのダウンロード
MathGamePackage.zipの中⾝
• UE4プロジェクト
• ゲーム作成時に使⽤する画像
• ドキュメント(PDF)
Donate(寄付)方式
無料からダウンロード可能になっています
お⾦を払ってもいいという⼈がいましたら
適正価格を⼊⼒してダウンロードをお願いします
今後の資料作成のために、マーケットプレースの
アセット購⼊に使わせていただきます

2.プロジェクトを作成する
9

Epic Games Launcherにログイン
メールアドレス・パスワードを⼊⼒してログイン
Epic Games Launcherを
⽴ち上げる 10

バージョンを選択して起動
1. UNREAL ENGINEを選択
2. 起動横の▼をクリック
3. 指定のバージョンを選択
[4.17.2]を選択
4. 起動ボタンをクリック
11

作成するプロジェクトの設定
1. 新規プロジェクトを選択
2. ブループリントタブを選択
3. 空のプロジェクトを選択
4. スターターコンテンツ無し
5. フォルダを設定
6. プロジェクト名を設定
プロジェクト名：MathGame
7. プロジェクトを作成をクリック
https://docs.unrealengine.com/latest/JPN/Engine/Basics/Projects/Browser/index.html
プロジェクトブラウザの詳細
12

フォルダの作成
[フォルダの作り方]
サブフォルダを作るフォルダを選択
右クリック > 新規フォルダ新規追加 > 新規フォルダ
作成するフォルダ構成
13

3.ブループリントでHello Worldを画⾯に表⽰
する
14

ブループリント作成の流れ
15
作成するフォルダを選択
> 新規追加 or 右クリック
> ブループリントクラス
親クラスを選択
[Actor]ボタンをクリック
名前を設定する
名前を[BP_HelloWorld]に設定
作成するフォルダブループリント名親クラス
Blueprints BP_HelloWorld Actor

ブループリントエディタを開く
16
ブループリントをダブルクリックブループリントエディタが開く

ブループリントエディタの構成
17
ビューポート
コンポーネントを設定する
Construction Script
画⾯に配置した時に
変更できる処理を実装する
イベントグラフ
処理を実装する
タブで機能を切り替える

イベントグラフにPrint Stringを追加する
1. イベントグラフタブを選択
2. 右クリック
3. Printstringで検索
4. Print Stringを選択する
18

PrintStringのIn StringをHello World!に設定
イベントBeginPlayとPrintStringをつなげる
19

ビューポートにブループリントを
ビューポートにドラッグ＆ドロップ
20

プレイをクリック
ビューポートの左上にHello World!が表⽰される
21
プレイをクリックビューポートの左上にPrint StringのIn Stringに
設定した文字列が表示される

Print Stringの▼をクリック
Durationを10に設定してプレイ
22
▼をクリックする（ノードによってプロパティが隠されている）
Duration(表示期間：単位(秒))を10に設定する
ノードを選択してCキーでコメントを設定できる
10秒間表示される

マップを保存
23
ファイル > 現在のレベルを保存
ショートカットキー：Ctrl + S
MapsフォルダにHelloWordlを保存する

24

4.8 正解判定
25

4.8 正解判定
26

新規レベルの作成
27
ファイル > 新規レベル
ショートカット：Ctrl+N
[空のレベル]を選択する

現在のレベルを保存
名前を[RandamPlusGame]に設定して保存
28
ショートカット：Ctrl+S
Mapsフォルダを選択
> 名前を[RandomPlusGame]に設定
> [保存]をクリック

4.8 正解判定
29

作成するフォルダブループリント名親クラス
Blueprints BP_RandomPlusGame Actor
4.2 ブループリント
(BP_RandomPlusGame)を作成
30
親クラス > Actor をクリック名前を[BP_RandomPlusGame]に設定
Blueprintsフォルダに
ブループリントを作成

4.8 正解判定
31

イベントグラフにinteger + integerを追加
1. イベントグラフを選択
2. 右クリック
3. 検索バーに[+]を⼊⼒
4. [integer + integer]を選択
32
イベントグラフに足し算[integer + integer]を追加する

+ノードの上下に数値を設定
Print Stringノードを追加
33
1. 足し算の上下に数値を設定する
2. Print Stringを追加する

+ノードの結果をPrint StringのIn Stringに
つなげる
34
足し算ノードの結果をPrintStringのIn Stringにつなげる
整数値(Integrer)が文字列(String)に変換されるノードが追加される

イベント BeginPlay とPrintStringをつなげる
コンパイル > 保存
35
1. イベントBeginPlayとPrintStringをつなげる
2. コンパイル > 保存ボタンの順でクリック
（落ちた時の為にこまめに保存は行う）

ビューポートにBP_RandamPlusGameを追加
プレイをクリックして、⾜し算の結果を確認
36
ビューポートにBP_RandomPlusGameを
ドラッグ＆ドロップ
足し算の結果を確認

4.8 正解判定
37

⾜し算の引数を変数化
[C#]
int NumA = 8;
int NumB = 5;
float PrintStringDuration = 10;
int Total = NumA + NumB;
PrintString(Total, PrintStringDuration);
[ブループリント]
38

変数の追加し、変数の型をIntegerに設定
39
マイブループリントタブ
[+変数]をクリック
名前を[NumA]に設定] 変数の型をIntegerに設定
変数名変数の型デフォルト値
NumA Integer 8

デフォルト値を設定する
40
[コンパイル]をクリック
(コンパイルしないと
デフォルト値が設定できない)
ソースコード(C#)で書くと
int NumA = 8;
デフォルト値に[8]を設定する
NumA Integer 8

使⽤する変数を設定する
41
NumA Integer 8
NumB Integer 5
Total Integer -(設定なし)
PrintStringDuration Float 10.0

変数(NumA,NumB)のゲットを追加する
1. NumAをドラッグ＆ドロップ
2. ゲットを選択
3. NumBをドラッグ＆ドロップ
42

変数Totalのセットとゲットを追加
43
1. Totalをドラッグ＆ドロップ
2. セットを選択
3. Totalをドラッグ＆ドロップ

ノードをつなげる
PrintString((0+1).ToString());
44
int NumA = 8;
int NumB = 5;
PrintString(Total.ToString());

PrintStringDurationのゲットを追加し、
PrintStringのDurationにつなげる
45
1. PrintStringDurationの
ゲットを追加する
2. PrintStringDurationのゲットを
PrintStringのDurationにつなげる
int NumA = 8;
int NumB = 5;
float PrintStringDuration =10;
PrintString(Total.ToString(), PrintStringDuration);

プレイして確認
46
int NumA = 8;
int NumB = 5;
float PrintStringDuration =10;
PrintString(Total.ToString(), PrintStringDuration);

⽂字列を連結するAppendノードで計算式
を表⽰する
47

4.8 正解判定
48

関数 Plusの作成
49
関数名 Input/Output パラメータ名型
Plus Input A Integer
Input B Integer
Output Total Integer
マイブループリントタブ
[+関数]をクリック

インプット、アウトプットのパラメータ設定
50
インプットを設定アウトプットを設定
Plus Input A Integer
Input B Integer

処理を実装
int Plus(int A, int B)
{
return A + B;
}
51

関数 Plusをドラッグ＆ドロップ
52

関数 Plusを使⽤するようにつなぎ変える
53
プレイして結果を確認
関数Plusを使用するようにつなぎ変える

4.8 正解判定
54

関数:RandomCalculationの作成
55
RandomCalculation Output A Integer
Output B Integer
[+関数]をクリック
名前を[RandomCalculation]に設定
アウトプットのパラメータを設定する

ローカル変数を追加する
56
ローカル変数名変数の型
LocalNumA Integer
LocalNumB Integer
（ローカル変数は関数内のみ有効）

指定した範囲内のRandam値を返す
Random Integer in Rangeを追加・設定
57
1~9のランダム値を返すように
Min,Maxの値を設定
右クリック > randomintegerで検索
> Random Integer in Rangeを選択

ローカル変数に
Random Integer in Rangerの値を設定
58

ローカル変数のゲットを追加して⾜し算
を実装する
59

リターンノードに
ランダム値と⾜し算結果をつなげる
60

RandomCalculationをイベントグラフに追加
61

RandomCalculationのアウトプットを
変数に設定する
62

PlusからRandomCalculationを実⾏するよ
うにつなぎ変える
63

プレイするたびに
計算結果が変わることを確認
64

4.8 正解判定
65

キーボード⼊⼒を受け付ける設定 1
Get Player Controllerの追加
66
右クリック > getplayerconで検索 > Get Player Controllerを選択

Enable Inputを追加する
67
右クリック > enableInputで検索 > Enable Inputを選択

⼊⼒を受け付ける処理につなげ変える
68
BeginPlayとRandomCalculationの間にEnable Inputを処理するようにつなげ変える

キーボードイベント 1を追加
キーイベントの確認
69
右クリック > 1で検索
>キーボードイベント 1を選択
PrintStringで
Pressed,Releasedの確認を⾏う
１

変数: Answerを追加する
70
NumA Integer 8
NumB Integer 5
Total Integer -
Answer Integer -[+変数]をクリック
> 名前を[Answer]に設定

1を⼊⼒した際にAnswerに1をセットする
PrintStringでセットした値を出⼒
71
１
Answerのセットを追加し、1イベントのPressed時にAnswerに1をセットする
Answerのゲットを追加し、PrintStringでAnswerの値を出⼒する

キーボード2〜9のイベントを作成
Answerに値を設定する
72
キーボード1イベントと同様に、キーボード2〜９イベントを追加して、Answerに値をセットする

イベント2~9のAnswerセット後に
PrintStringを呼び出すようにつなげる
73
キーボード2〜９イベントのAnswerにセットした後にPrintStringにつなげる
１ 9〜

Rerouteノードで処理を⾒やすくする
74
Rerouteノードを使うと線の中継地点をつくれる
ノードに被っている線を被らなくしたり、
同じ処理をする線をまとることができる
[Rerouteノードの追加方法]
• Routeノードを追加したい箇所を
ダブルクリック
• 右クリック > Rerouteノードを追加

4.8 正解判定
75

ブループリントのif⽂
76
if =ブランチ
⽐較演算⼦ノードブループリントのIF⽂の組み⽅
⽐較演算⼦ノードで⽐較した結果を
ブランチのConditionに繋げる

NumA,Answerが⼀致するか⽐較する 1
NumA,AnswerのゲットとEqual(integer)を追加する
78
1. NumA,Answerのゲットを追加する
2. Equal(integer)を追加する

78
ブランチを追加する
右クリック > branch or ブランチで検索 > ブランチを選択

ブランチの結果をPrintStringで出⼒する
79
1. Equal(integer)の結果をブランチのConditionにつなげる
2. ブランチの結果をPrintStringで出⼒する
3. ブランチの処理を実⾏するようにキーイベントのPrintStringとつなげる
⼊⼒したキーに
応じて出⼒結果が変わる
正解
不正解

4.8 正解判定
80

ゲーム化（計算式の問題化、無限ループ）
計算式出⼒⼊⼒
判
定
結果出⼒
(正解)
結果出⼒
(不正解)
81
問題出力⼊⼒
判
定
結果出⼒
(正解)
結果出⼒
(不正解)
無限ループ

計算式の問題化
計算式のNumAの値を？に変更する
82
計算式のNumAの⽂字列を追加しているAppendのAの値を[?]に変更する
?+(NumB)=(Total)

無限ループ
正解を判定後RandomCalculationを呼び出す処理を
実⾏する
83
正解、不正解を出⼒後にRandomCalculationを呼び出す
問題 > ⼊⼒ > 結果を繰り返す

5. 計算⽅法(⾜し算、引き算、掛け算、割り
算)をランダムに修正する
84

5. 計算⽅法(⾜し算、引き算、掛け算、割り算)を
ランダムに修正する
5.2 BP_RandomPlusGameを複製して、BP_RandomCalcGame
を作成
85

を作成
86

新規レベルの作成
87
ファイル > 新規レベル
ショートカット：Ctrl+N
[空のレベル]を選択する

現在のレベルを保存
名前を[RandamCalcGame]に設定して保存
88
ショートカット：Ctrl+S
Mapsフォルダを選択
> 名前を[RandomCalcGame]に設定
> [保存]をクリック

を作成
89

BP_RandomPlusGameを複製し、
BP_RandomCalcGameを作成
90
BP_RandomPlusGameを右クリック > 複製
名前を[BP_RandomCalcGame]に設定

ビューポートに追加し、BP_RandomPlusGameと
同様の処理をすることを確認
91
BP_RandomCalcGameをビューポートにドラッグ＆ドロップ
BP_RandomPlusGameと
同様の処理

を作成
92

BP_RandomCalcGameを開く
NumA,NumBのゲットを追加
引き算するノード(integer - integer)を追加する
94
BP_RandomCalcGame
をダブルクリックしてエディタを開く
NumA,NumBのゲットを追加
右クリック > - で検索 > [integer – integer]を選択

引き算の結果を出⼒するように修正
95
引き算結果をTotalにセットし、Totalを出力するように修正
3が出力される (8-5=3)

掛け算ノードの結果を出⼒
96
掛け算の結果をTotalにセットするように修正
NumAのゲットをドラッグ＆ドロップ
> * で検索 > [integer * integer]を選択プレイして確認
40が出力される (8x5=40)

割り算ノードの結果を出⼒
97
NumAのゲットをドラッグ＆ドロップ
> / で検索 > [integer / integer]を選択
割り算の結果をTotalにセットするように修正
1が出力される (8x5=1)

Integerは整数しか保持できない
変数：Totalの型をFloatに変更する
98
NumA Integer 8
NumB Integer 5
Total Float -
Answer Integer -
Totalの変数の型を
Floatに変更する
integer / integer : 8 ÷ 5 = 1
float / float : 8 ÷ 5 = 1.6

Total をIntegerとしてにつないでいる箇所
がError(⾚く)なるので接続を切る
99

割り算(float / float)の結果を出⼒
100
右クリック > / で検索
> float / floatを選択
1.6が出力される (8÷5=1.6)
割り算(float / float)の結果を
Totalにセットするように修正

を作成
101

関数:RandomCalculationの修正
アウトプットにCalcType(String)を追加
102
RandomCalculation Output A Integer
Output B Integer
Output Total Float
Output CalcType String
[RandomCalculation]をダブルクリックアウトプットのパラメータを設定する

103
ローカル変数名変数の型
LocalNumA Integer
LocalNumB Integer
LocalTotal Float
LocalCalcType String
（ローカル変数は関数内のみ有効）

計算⽅法をランダムで決める
104
右クリック > random integerで検索
> Random Integerを選択
Maxに４を設定
0:足し算
1:引き算
2:掛け算
3:割り算

整数型のスイッチを追加
105
Random IntegerのReturn Valueをドラッグ＆ドロップ> switch で検索
> [整数型でスイッチ]を選択

スイッチのピンを追加する
Defaultは使わないのでチェックを外す
106

Sequenceノードを使って横への間延びを
縦に順々に処理をするように修正
107
処理1 処理2 処理3
処理1
処理2
処理3
Sequence
ブループリントを組んでいくと横に間延びしていく
Sequenceノードを使うと、
処理を縦にかける

Sequenceノードを追加して処理を3段階
に分ける
108
1.ランダム値をローカル変数にセット
2. 計算⽅法をランダムで変える
3. リターンノードに結果を設定
Sequence
右クリック > sequence で検索
> Sequenceを選択

0の時に⾜し算をするように実装
109

2の時に掛け算を実装
111

3の時に割り算を実装
112

ローカル変数を
リターンノードのパラメータにつなげる
113
ローカル変数のセットを追加
リターンノードのパラメータを設定

を作成
115

RandomCalculationの結果を設定する
116
ローカル変数のセットを追加
リターンノードのパラメータを設定

イベントBeginPlayの接続を元に戻して、
117
イベントBeginPlayの接続を元に戻す
ランダムで計算が行われる

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

More Related Content

Similar to 算数ゲーム Part1 UE4のブループリントでプログラム文法を1日で体験する (10)

More from Tatsuya Iwama (15)

Recently uploaded (17)

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