算数ゲーム 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日で体験する

Recomendados

Recomendados

Mais conteúdo relacionado

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

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

Mais de Tatsuya Iwama

Mais de Tatsuya Iwama (15)

Último

Último (20)

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