[UE4] ブロック崩しを作る #1 壁とボール


# はじめに
UE4 を1ヶ月学んだ初心者が「ブロック崩し」を作成します。
あまりよろしく無い実装をしている箇所もあるかと思いますが、とりあえず学んだ知識で動くことを目指して作ってきます。

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

初回のこの記事では **プロジェクトの作成** から **壁** と **ボールの作成** までを行います。
[第２回の記事](https://qiita.com/jamaican/items/9730ef4c97ffed2783e4)でバーとブロックを追加して完成になります。
![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/9758eda0-ea7e-14bc-9579-ac695bb5d22c.gif)

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

# 目次
[プロジェクト作成](#プロジェクト作成)
[壁を作成](#壁を作成)
[カメラ位置の調整](#カメラ位置の調整)
[ボール作成](#ボール作成)
[ボールを動くようにする](#ボールを動くようにする)
[壁とボールの当たり判定](#壁とボールの当たり判定)

# プロジェクト作成
まずは 新規プロジェクト を作成します
UE4 を起動させ New Project Categories から で **Games** を選択し **Next** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/394f1b85-c13e-6ebc-a5cd-46dfa6e2a703.png)
Select Template で **Blank** を選択し **Next** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/8bc75fd7-79bf-62f6-fa11-6cfdbeeb10ee.png)
Project Settings では**「Blueprint」**, **「No Starter Content」**を選択します。  Project名は **BreakBlock**（何でも良い）を入力し、**Create Project** をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/46732bcd-c450-a676-2c83-08b573e27832.png)
エディタが起動し プレビューポート には黒い床だけがある 空のプロジェクト が作成できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/161b9f44-f5cd-dfa6-bc7e-0921347dc076.png)

# 壁を作成

まずは下記のような上左右の壁を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/7216472f-0169-10ac-aba6-f60dc9b1b0f5.png)
エディタの左にある **Place Actors** から **「Basic」** → **「Cube」** 選択し、プレビューポートにドラッグ&ドロップします。位置は後ほど修正するので、適当な位置に **計３個** Cube を配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/3917ea79-7d08-1c5d-6303-28cd63e2f67c.png)
その後、右上にある **World Outliner** 内に「Cube」「Cube2」「Cube3」が出来ます。それぞれ 右クリック →「Eidt」→「Rename」（もしくはショートカット F2 キー）から **「WallTop」「WallRight」「WallLeft」**にリネームします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/0482cd0a-a1e7-c2ef-b6a6-8dbfc82fb337.png)
右下にある **Details** から「WallTop」～「WallLeft」を以下のように設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/a11de2e9-55d4-5a14-9884-f8928c702cc1.png)

``` :WallLeft
Location (0.0, -500.0, 500.0)
Scale (1.0, 1.0, 10.0) 
```

``` :WallRight
Location (0.0, 500.0, 500.0)
Scale (1.0, 1.0, 10.0) 
```

``` :WallTop
Location (0.0, 0.0, 1000.0)
Scale (1.0, 10.0, 1.0) 
```

これで壁が作成できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/7216472f-0169-10ac-aba6-f60dc9b1b0f5.png)

## プレイしてみる
まだ壁だけですがプレイしてみます
上側真ん中のメニューから **Play** をクリックします（もしくはショートカット Alt + P ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/b5842a43-e7a2-19ac-0af6-f45bab946f47.png)
ゲームが起動しますが、先程作った壁が表示されません。これはカメラ位置が合っていないからです。カメラ初期位置を設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/5e48378d-2a63-bef9-de56-cb2bf19ef9c0.png)

# カメラ位置の設定
Escキーで Play を止めます
右側にある World Outliner から **Player Start** を選択し 下側の Details で下記を設定します

```:Player_Start
Location (-1300.0, 0.0, 600.0)
```

もう一度 Play をすると画面内に壁が映っています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/25535f28-60d9-2179-88a5-f389ab4301ea.png)

# ボール作成

次にボールを作成します

* 下側の Content 内で右クリックをしてます
* 表示されたメニューから **Blueprint Class** を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/d6343de2-3338-e099-cad9-dcc41686699a.png)

* 次に表示されるウィンドウから **Actor** を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/aee19b01-0fe3-c075-e5c6-b7223d5c706d.png)
* 作成した NewBlueprint を **BP_Ball** にリネームします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/11bebdd4-37a9-e94d-02df-3ae42082bf56.png)

この BP_Ball は白くて丸い形に見えますが、これは仮表示でこのままゲームに配置しても何も表示されません。
ゲーム画面でも丸い形に見えるように **メッシュ** を設定します。

* **BP_Ball** をダブルクリックして **Blue Print の編集画面** を開きます
* 真ん中にある Viewport / Construction Script / Event Graph のタブから **Viewport** のタブを選択します(デフォルトでこのタブで開いています)
* BP編集画面 左上の **+Add Component** をクリックし **Static Mesh** を選択し追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/9b2377d9-eae5-e623-e291-bad2edf9caee.png)

* 追加された **Static Mesh** を選択します
* 右側の **Details**メニュー から **Static Mesh** を探して None になっているところをクリックしてメッシュを設定します
  * 表示された選択肢から「Sphere」を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/54de9846-413d-8de8-afdc-f86f0db7e9ba.png)
  * 選択肢に何もでてこない場合は「View Options」をクリックして「Show Engine Content」にチェックをいれる事で表示されるようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/7c360bfd-8ede-cbeb-b315-1e455ffbba3f.png)

つぎにボールの色を白色にします

* Static Mesh の Detailメニュー から Materials を探し「BasicShapeMaterial」を設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/58c19217-aebc-e519-e2ce-3ca1da1e3ba6.png)

ボールを画面に配置します

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

``` :BP_Ball
Localtion (0.0, 110.0, 300.0)
```

これでボールが配置されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/b401c9ed-8871-0655-ebbd-1f6bd1e944b2.png)

# ボールを動くようにする

* BP_Ball の BP編集画面 から**ProjectileMovement** を追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/219f19f0-f5a2-0a23-614f-2b2ffc11ce5a.png)

* ProjectileMovement の Detail で下記のように設定します

``` :ProjectileMovement 
Projectile:
  Initial Speed 500.0 // 初期速度
  Projectile Gravity Scale 0.0 // 重力は無視する

Projectile Bounces:
  Should Bounce チェック // 跳ね返るかどうか
  Bounciness 1.0 // 反発係数
  Friction 0.0 // 摩擦

Velocity:
  Velocity (0.0, 1.0, 1.0) // 最初に動く方向（右上）
```

これで Play をするとボールは右上に飛んでいきますが、壁を突き抜けてしまいます。

# 壁とボールの衝突

壁とボールがぶつかったら跳ね返るように壁とボールにコリジョンを追加します

## 壁にコリジョンを追加

*「WallRight」を選択して +Add Component から「Box Collision」を追加します
* 同様の操作を「WallTop」「WallLeft」でも行います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/892d0e6e-e1f9-c8f9-1854-93fcc83573cf.png)

## ボールにコリジョンを追加

* BP_Ball に +Add Component から **Sphere Collision** を追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/9d7e0249-035d-3ca7-d191-67161e5035cb.png)

* 追加した Collision の Details から Collision Presets を「Block All」に変更します
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f33393238362f36326639363563622d663161662d636235622d386537392d6233383438336135643236312e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/73e5a577-6569-583b-d6c4-d16333f3eb79.png)

* コリジョンは一番親の要素に持ってくる必要があります
Sphere を DefaultSceneRoot にドラッグ＆ドロップして親要素になるようにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/f03e7eaa-f121-5e78-b711-f07ea5148001.png)

これで Play を行うとボールが壁に反射するようになります
![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39286/9758eda0-ea7e-14bc-9579-ac695bb5d22c.gif)

# 次回
ボールが動いて壁に跳ね返るところまで作成できました。
次回の記事ではブロックとバーを追加してブロック崩しを完成させます。
[[UE4] ブロック崩しを作る #2 バーとブロック](https://qiita.com/jamaican/items/9730ef4c97ffed2783e4)