他のプログラミング言語を知っている人向けブループリント情報（Unreal Engine 4.25)

Unity とかスマフォアプリとか Web アプリとかで、GUIを使った Event Driven なプログラムを書いたことがある人が、少しUEを触ってみた後にブループリントでプログラム書こうとして「何これおいしいの？」みたいになった時に、役に立ちそうな情報を集めたものです。主に身内向けですが、誰かの役に立つかもしれないので公開しときます。

手続き的な、あるいはオブジェクト指向的なプログラミングは分かるという前提で、他の言語でこうかくときはブループリントではこう、みたいな感じで情報を羅列する予定です。

# 書く予定のコンテンツ(校了)

- ブループリントを書くために必要な最小限の知識と操作（この記事）
- [変数、演算、キャスト、条件分岐](https://qiita.com/mml/items/08b06b9cd59a6a692098)
- [ループ、配列、ゲート、シーケンス](https://qiita.com/mml/items/ddbfbabe65bdf3f5e601)
- [関数、マクロ、イベント、インターフェース](https://qiita.com/mml/items/d354104254d8c818669f)
- [基本的なイベント、タイムライン、タイマー](https://qiita.com/mml/items/43cc8af2d1529475ca0d)
- [アクター関連の関数、イベント](https://qiita.com/mml/items/6a552beadaedfaa81717)
- [2次元インタフェース（ウィジェット）関連](https://qiita.com/mml/items/c892707cc19d120fade2)
- [アクター関連の関数とイベント](https://qiita.com/mml/items/6a552beadaedfaa81717)
- [パーティクルの操作](https://qiita.com/mml/items/28a4260589cff41b6f03)
- [レベルの管理と音声再生](https://qiita.com/mml/items/d52940b70c3bcc27b0bb)
- [マテリアル、テクスチャの操作](https://qiita.com/mml/items/7ecea1c179c44a2c70f4)
- [ゲームの一時停止、再開、終了、リスタート](https://qiita.com/mml/items/33b7e24cb693e3875d48)
- [マウスを使ったアクターの操作](https://qiita.com/mml/items/ce2433d94b5ee497b7b8)


# 参考記事

このページでは説明が足りないと感じる場合は、下記の偉い方々の記事を読むと幸せになるかもしれません。

- [初心者のためのUnreal Engine ブループリント入門](https://www.tuyano.com/index2?id=10476003)
- [Unreal Engine 4 のブループリントの基本概念](https://qiita.com/James_KW/items/600ecfec53b9b18e242d)
- [ブループリント入門](https://docs.unrealengine.com/ja/Engine/Blueprints/GettingStarted/index.html)：公式記事です。この記事で理解できる方なら、以下に書いている情報は役に立たないでしょう…

# 準備

以下、Unreal Engine 4.25.3 を使う前提で記事を書いています。4.24 でも多分動きます。

文中のブループリントのサンプルは、FirstPersonExample をベースにスターターコンテンツ有りで作成したプロジェクトをベースにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/a493397a-e071-44f0-cbb5-bcb866a0a985.png)

# 最低限知る必要のあること

ブループリントでプログラムを書く方法としては、レベルブループリントを編集する方法と、自分で作成したブループリントクラスを編集する方法があります。ブループリントを書こうちした場合、どこに書けるのかは最低限知っておく必要があります。

## レベルブループリント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/3ba95694-9542-9b31-9116-e163dfe02b8a.png)


レベルブループリントは、UE のメイン画面の上に並んでるメニューの中にある「ブループリント」から「レベルブループリントを編集」を選ぶことで編集できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/41719615-d6a0-9f50-2ee9-8ee3618358f4.png)

レベルブループリントは、レベルに含まれるあらゆるオブジェクトにアクセスできる親玉のようなものです。レベル全体に影響を与えるようなプログラムはここに書きます。（プログラム全体にアクセスできる GameMode/GameModeBase というクラスもありますが、ここでは説明しません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/3722442b-0542-4937-97e2-995e2eb8ce11.png)

実際にブループリントでプログラムを書くとこんな感じになります。これで、Enter キーを押したら画面に Hello と表示されるというプログラムになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/70ddeecb-52ac-3f48-cd8c-2f2a56853b91.png)

プログラムを書いたら、Alt + P を押すか、画面の上にある「プレイ」のアイコンを押すと、プログラムを実行できます。実行中の画面で Enter キーを押しまくると、上のスクリーンショットのように、左側に Hello という文字がずらずらっと出ます。

Enter とか Print Text とか書かれたアイコン（ノード）を配置したり、線を引いたりする方法は、ブループリントクラスの説明の後で説明します。

## ブループリントクラス

ブループリントクラスは、レベルの中に配置されているアクターをベースに作るか、コンテンツブラウザの「新規作成」のメニューで作ることができます。ブループリントクラスには、画面内に配置されているオブジェクト（アクター）の挙動を、ブループリントで記述することができます。

画面の中に配置されているアクターをブループリントクラスにするには、アクターをアウトライナーで選択した状態にして「ブループリントスクリプトを追加」のボタンを押します。

### アクターからブループリントクラスを作る

実際にやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/bd085179-e539-07be-de23-d2c4bfc1313a.png)

画面内にキューブを配置して、適当に位置を調整します。右側にあるアウトライナから Cube を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/842263f2-a118-2565-a818-4116dbbefed9.png)

「ブループリント/スクリプトを追加」を押すと、上のようなウィンドウが出ます。このまま「選択」を押せば、Cube の挙動を記述するブループリントクラスを作成できます。デフォルトでブループリント名が Cube_Blueprint となっていますが、変更しても構いません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/5125cabd-c106-4909-7dae-9fc7d5eb1167.png)

作成直後は、こんな感じの画面になっているかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/c56a671b-cd09-b22d-e297-7fe9f61a8298.png)

画面上にある「イベントグラフ」というタブを押すことで、ブループリントを書けるようになります。

### コンテンツブラウザからブループリントクラスを作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/da239e17-434c-b411-caf3-c7e5dc61d8e1.png)

画面の下にあるコンテンツブラウザのところにある「新規作成」というボタンを押すと、メニューが出てその中に「ブループリントクラス」という項目があります。ここからブループリントクラスを作ることもできます。

画面の中に直接配置しないようなブループリントクラス（例えばゲームのスコアを管理するクラスや、プレイヤーのコントロールをするクラス）を作るときに、この方法で作ります。この方法はやや高度なので、ここではこういう方法もあるということだけ書いておきます（具体的な説明はここでは省略します）。

# ブループリントを書く（描く）基本操作

実際にブループリントでプログラムを書く操作について説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/dd871f89-06b0-2d50-feaa-b71a2b120a76.png)

以下、レベルブループリントを開いた状態から説明します。Enter キーを押したら、画面に Hello と表示するプログラムを書く手順を追いながら、操作方法について説明します。

## Enter キーを押したイベントを拾うノードを配置

他の言語の場合、キーを押したイベントを拾いたい場合は、コールバック関数を使う方法や、言語やAPIで用意されているイベント関数を使う方法のいずれかを使うことが多いかと思います。ブループリントでは、主に後者の方法でイベントを拾います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/af5df6a1-db66-2b85-1db8-9303db85e83b.png)

Enter キーを押したイベントを拾うためには、上の絵のような Enter キーイベントの**ノード**をレベルブループリントのイベントグラフの中に配置する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/1cf3bb06-d02b-90e0-400e-de90ef970076.png)

このノードを配置するためには、イベントグラフで右クリックして、出てくるメニューの上にある入力欄に「Enter」と入力します。すると検索結果の中に「キーボードイベント」という項目があって、その下に Enter という項目が出てきます。それを選ぶことで、Enter イベントを拾うノードを配置できます。

## 画面に文字を表示するノードを配置

画面に文字を表示するデバッグ用の機能として、ブループリントでは PrintText と PrintString という二つの機能が用意されています。他の言語でいうところのAPI関数みたいなものでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/5fe12449-1fdb-b462-22ab-7fbaa4b2e994.png)

PrintText ノードを配置する場合も、Enter キーイベントノードを配置するときと同様に、右クリックメニューに Print と入力することで、選ぶことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/596769eb-4640-cb22-3006-4cafaaa04bbf.png)

PrintText ノードの右下にある In Text というところは、いわゆる引数です。Hello はいわゆる引数のデフォルト値です。引数を指定しない場合、デフォルト値の Hello が画面に表示されることになります。デフォルト値を変更することで、表示する文字列を変えることもできます。

引数を指定する方法については、この後で説明します。

## 画面に文字を表示するノードを配置

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/c79549a1-51cc-76ae-5f6b-752b571fe54b.png)

Enter ノードの Pressed と書かれたピンをマウスの左ボタンでクリックして、そのままドラッグして線を引き出して Print Text ノードにつなぎます。こうして線をつなぐことで、ノードが線でつないだ順番で実行されるようになります。これで「プレイ」すれば、Enter キーを押したときに Hello と画面に表示されます。

ちなみに Released のほうをつなぐと、Enter キーを押して「離した」ときに Hello と表示されるようになります。

# 画面に表示する文字を設定できるようにする

Print Text の引数に変数を与えて、変数に設定された文字列を画面に表示するように修正してみます。

## 変数を作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/92e0781d-a430-fbed-a3a1-cf9277c0f47e.png)

変数を新たに作るには、左側の「マイブループリント」のタブの中にある「変数」と書かれた項目の右にある＋を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/169aa789-0fa7-adba-a981-78ea170ee1ba.png)

作成直後はこんな感じになります。ブループリントの変数は型があり、デフォルトでは Boolean 型になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/3f68eb0e-4802-3288-f0c6-02526831fe75.png)

右側にある「詳細」のところを編集することで、変数名や型を変更できます。ここでは、Print Text に与える引数にしたいので、Print Text の引数の型（Text 型）にして、名前は適当に HyoujiMoji とかにしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/eaf518dd-dac7-c5b0-2bb3-f6941f289093.png)

変数の型は、ブループリントで用意されているものはリストから選べます（ここでは Text にしてます）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/c2ed4f04-afd7-b6ca-1bd9-946f2804d024.png)

名前と型を設定すると、左側の表示も変わります。ブループリントでは、型ごとに色があり、型を変えると変数の表示色も変わります。たとえば、Text なら桃色、Integer なら緑色、Boolean なら赤色という感じです。

## 変数を引数に設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/3b60f0ac-5994-a04a-d0dc-ff75f88df1c4.png)

変数をプログラムの中で使う場合は、左側の変数名のところをクリックして、そのままドラッグしてイベントグラフの中にドロップします。すると、上のように Get か Set のどちらかを選ぶ選択肢が出ます。ここでは、変数の値を読み出して引数に指定したいので、Get のほうを選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/83998b03-fa52-4872-69dc-7fb44077841e.png)

すると、このようなノードができます。このノードの右側のピンを PrintText の InText につなぐことで、変数のを引数として指定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/0052723a-3b41-918c-ddfc-d74b81014458.png)

PrintText のピンにつなぐと、デフォルト値が表示されなくなります。これで、変数の値がPrintText の引数に使われるようになります。

ただし、変数には何も値が設定されていないので、このままでは Enter キーを押しても何も文字は表示されません。

## 変数のデフォルト値を設定できるようにする

変数の値を設定するには、ブループリントのプログラムで設定する方法と、UEのエディタでデフォルト値を入力できるようにする方法があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/bdccf9ab-5457-e370-f4ab-af9bd324e8c6.png)

デフォルト値を設定できるようにするには、変数を作成したあとに一度「コンパイル」ボタンを押す必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/ab875321-2524-8ce8-4934-d889f6b34632.png)

コンパイルすると、変数を選択したときに右側の詳細の中の「デフォルト値」の中で、値を直接入力できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/1d217ab9-7f99-08bd-9fb6-343fa2b1516f.png)

こんな感じで設定できます。

## 白い線をつなぐピンがないノードの実行(評価)タイミング

変数の値を読みだすノードには、白い線をつなげるピンがありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/ab875321-2524-8ce8-4934-d889f6b34632.png)

変数の値の読みだし、演算、キャストなどのノードは、白い線をつなぐピンがついていないことが多いです。このようなノードは、自身の右側につながっているノードのうち、一番最初に白い線がつながっているノードが実行されるタイミングで、実行(評価)されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/1d217ab9-7f99-08bd-9fb6-343fa2b1516f.png)

上の例の場合は、Print Text が実行されるタイミングで、Hyouji Moji 変数から値がよみ出されます。これについては、演算やキャストの説明のところで、実例を挙げて説明します。

# 覚えておきたい重要な操作

## ノード間のラインを消す

ノード間に引いた線は、Alt + クリックで削除できます。

![ue8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/00fb0e7f-8079-9aea-3d3b-dedbd504a211.gif)


## ノードの削除

ノードをマウスで選択してから、Delete キーを押すか、右クリックメニューで「削除」を選ぶと削除できます。

## ノードのコピーペースト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/9bfad5ea-8a63-33ed-c6a6-5ae36b5d358e.png)

ノードは、マウスでクリックして選択状態にしてから、Control + C または右クリックメニューで「ノードをコピー」でコピーし、Control + V または右クリックメニューで「ここに張り付け」（メニューのめっちゃ下のほうにある）でペーストできます。（MacではたぶんControlキーの代わりにCommandキーです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/5909748f-cc9b-3951-44c2-a63b4db99ea0.png)

まとめて複数のノードのコピペもできます。

# 続く

ブループリントの基本操作は大体こんな感じです。あとは（他のプログラミング言語でも同様ですが）制御構文の書き方と、どのようなノード（API関数）があるのかをひたすら覚えていくことになります…

次の記事からは、UE のエディタの操作方法についての説明は最小限にして、ブループリントで他言語と同じように描くにはどうするのかと、いう点に絞って書いていく予定です。