[UE4] ブロック崩しを作る #2 バーとブロック

# はじめに
この記事は [[UE4] ブロック崩しを作る #1 壁とボール](https://qiita.com/jamaican/items/9dae2dc581589f50a921) の続きの記事になります。
第２回では バー と ブロック を追加しブロック崩しを完成させます。

# 完成ゲーム
![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/ecf3ddd0-3e17-d440-89b1-69dd24a690f9.gif)

# 環境
Windows 10
Unreal Engine 4.27.1
エディタ言語 英語

# 目次
[バーを作成](#バーを作成)
[バーをキーボード矢印キーで操作できるようにする](#バーをキーボード矢印キーで操作できるようにする)
[ブロックを作成](#ブロックを作成)
[ブロックの破壊処理](#ブロックの破壊処理)
[次回](#次回)

# バーを作成

ブロック崩しでボールをはじく「バー」を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/9f33bc9d-edce-e1af-ba6c-bfa3dfb31ea5.png)
ボールの時と同様にバーのブループリントを作成します。

* Content 内で右クリックをして「Blueprint Class」を選択
* 次のウィンドウで Actor を選択
* 作成された NewBlueprint を **BP_Bar** にリネーム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/a1c1a7e2-d176-27c0-bcb5-9a6edf3e15e4.png)

この BP_Bar が「立方体の形」で表示されるように Static Mesh を設定します。

* BP_Bar をダブルクリックして Blue Print の編集画面を開く
* +Add Component ボタンをクリックし StaticMesh を追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/21f58ea0-fa0c-af40-001c-e117f90e4ffd.png)

* StaticMesh を選択し 右にある Details から Static Mesh に **Cube** をセットします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/0f6a91dd-551c-bdf5-0765-207bfa730b45.png)

* 長方形になるよう StaticMesh の Details から Transform を変更します

``` :StaticMesh
Transform:
  Rotation (0°, 0°, 90°)
  Scale (2.0, 1.0, 0.5)
```

* 白色にするため StaticMesh の Details から Materials を探し「BasicShapeMaterial」を設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/58c19217-aebc-e519-e2ce-3ca1da1e3ba6.png)

* マップのエディタに戻り BP_Bar を ViewPort にドラッグ＆ドロップします
Location を下記のように変更します。

``` :BP_Bar
Location (0.0, 0.0, 150.0)
```

これでバーが設置することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/9f33bc9d-edce-e1af-ba6c-bfa3dfb31ea5.png)


# バーをキーボード矢印キーで操作できるようにする

バーをキーボード矢印キーで動くようにするため下記のようなイベントを作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/1ff8d15a-7552-c90d-07d3-35116edc876d.png)

* まずは BP_Bar の Blue Print の編集画面開き Event Graph のタブを選択し、イベントグラフ編集画面を開きます
* 次にキーボードの矢印が押された時に呼ばれるノードを追加します
  * 右クリックでノード追加メニューを開き、検索ウィンドウに Keyboard Event Right と入力して候補を絞り**Rightノード** を追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/5d2dabea-2bae-7e19-b616-9cf1eac35732.png)
* 同様にして **GetActorLocationノード** を追加します(これはバーの３次元位置を取得するものです)
  * Return Value が vector になっているので、Return Value を右クリックして Split Struct Pin を実行します(Return を X, Y, Z に分割できます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/cb31225c-29b7-3aae-87bb-aa0a6050a3c6.png)
* **float + floatノード** を追加し加算値を 50.0 にします。
* **SetActorLocationノード** を追加します
  * New Location を右クリックから Split Struct Pin して X, Y, Z に分割します
* それぞれのノードを下記のように接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/1ff8d15a-7552-c90d-07d3-35116edc876d.png)
左矢印キーのイベントも同様に組みます(float + floatノード の加算値は -50.0 となります)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/8361a36f-a125-9fb3-6c49-0d3cb32ebb52.png)
キーボード入力を受け付けるにはもうひと作業必要です
Viewport に戻って Components から BP_Bar(self) を選択し Details から Input / Auto Receive Input を Player 0 に変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/134e9115-1eb5-e54d-0948-3e3e6bd16011.png)
最後に実行してみます。

* 上部メニューから Save, Compile を行い Play を実行
* 起動した画面を右クリックで選択
* すると矢印キーでバーが移動するようになります
![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/daad533b-7cc1-fd3f-0208-6f18ca827240.gif)

# ブロックを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/ae36d2d8-7b5a-62d3-f759-d5f055c11f4b.png)
ブロックのブループリントを作成します

* Content 内で右クリックをして「Blueprint Class」を選択し Actor を選択します
* NewBlueprint を **BP_Block** にリネームします

BP_Block のブループリントを編集します

* BP_Block をダブルクリックして Blue Print の編集画面を開く
* +Add Component ボタンをクリックし **StaticMesh** を追加
* 追加した Static Mesh を選択して、Details から Static Mesh を **Cube** 変更
* 同じく Static Mesh の Details から Materials を **BasicShapeMaterial** に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/b6521e2c-d7f0-a3f7-c3ed-fbccd994b45c.png)

BP_Block をゲームに配置します

* マップのエディタに戻り BP_Block を ViewPort に 10個ドラッグ＆ドロップします
* BP_Block ～ BP_Block10 の Location を下記のように変更します。

``` :BP_Block～BP_Block10
Location (0.0, -350.0, 850.0)
Location (0.0, -175.0, 850.0)
Location (0.0, 0.0, 850.0)
Location (0.0, 175.0, 850.0)
Location (0.0, 350.0, 700.0)
Location (0.0, -350.0, 700.0)
Location (0.0, -175.0, 700.0)
Location (0.0, 0.0, 700.0)
Location (0.0, 175.0, 700.0)
Location (0.0, 350.0, 700.0)
```

ブロックを配置できました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/ae36d2d8-7b5a-62d3-f759-d5f055c11f4b.png)

# ブロックの破壊処理

ブロックとボールがぶつかった時に、ブロックが破壊されるようにイベントを組みます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/47e837a2-d3da-b275-b81d-3c22dfa6d7d5.png)

* BP_Block の Event Graph を開く
* 「Event Hit ノード」を追加
* 「DestroyActor ノード」を追加
* ２つのノードをつなげる

プレイすると、ボールがブロックとぶつかると消滅するようになります
![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/ecf3ddd0-3e17-d440-89b1-69dd24a690f9.gif)

# 次回
最低限ですが、これでブロック崩しは完成しました。
（床にボールがついてもゲームオーバーにならない、全部消してもクリアにならないなど足りない点もまだまだありますが..）
次回の記事では ブループリント の イベントグラフ で作成した処理を C++ で作成する方法をまとめます。
[[UE4] ブロック崩しを作る #3 C++](https://qiita.com/jamaican/items/6303fe259bbf92a7c4ed)