【ARKit】社長が好きすぎて駆逐するアプリを作った話 その3. 爆発の作り方編

## この爆発の作り方を解説します
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">社長駆逐FPSゲームの解説記事 その3「爆発の作り方編」を書きました♪<br><br>「うーるとーらっ &quot;ピューッ&quot; &quot;チュドォオオン....&quot;」<br><br>解説記事はこちら↓<a href="https://t.co/KKYwuhkhYt">https://t.co/KKYwuhkhYt</a><a href="https://twitter.com/hashtag/Swift?src=hash&amp;ref_src=twsrc%5Etfw">#Swift</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/iOS?src=hash&amp;ref_src=twsrc%5Etfw">#iOS</a> <a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#アプリ開発</a> <a href="https://twitter.com/hashtag/%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#個人開発</a> <a href="https://t.co/5X6rT9De19">pic.twitter.com/5X6rT9De19</a></p>&mdash; ウルトラ深瀬 (@UltraFukase) <a href="https://twitter.com/ultrafukase/status/1339320215855747074?ref_src=twsrc%5Etfw">December 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

※撃ち落とした金色の卵には弊社の社長の似顔絵が描かれています（本人公認）


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">社長駆逐FPSゲーム解説記事その3<br>「爆発の作り方編」動画その2 <a href="https://t.co/naNZ3liKLD">pic.twitter.com/naNZ3liKLD</a></p>&mdash; ウルトラ深瀬 (@UltraFukase) <a href="https://twitter.com/ultrafukase/status/1339321746235609089?ref_src=twsrc%5Etfw">December 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## はじめに
どうも！B'z大好き芸人のウルトラ深瀬です！
当記事ではARKitを使ったFPS風ゲームの作り方をシリーズで解説しています。
今回は その3 ということで「爆発の作り方」を解説していきます！（最終回です）

前回の記事はこちら[▶︎【ARKit】社長が好きすぎて駆逐するアプリを作った話 その2. ゆらゆらモーション編](https://qiita.com/Takamasa_Fukase/items/8f1f5225ddb4e0b3e4a5)

駆逐動画はこちら[▶︎【ARKit】社長が好きすぎて駆逐するアプリを作った話 その1. FPS視点への固定編](https://qiita.com/Takamasa_Fukase/items/87f267bd0e3a952300ba)

## 書いていること
・ParticleSystemとは？

・【注意】2020年12月現在、Apple公式のParticleSystemテンプレートは利用できないこと

・↑の現在入手不可な公式テンプレートファイルと、爆発のサンプルを[Github](https://github.com/Fukase-Takamasa/ARKit-ExplosionSample-ParticleSystem
)にあげたのでどうぞ

・手っ取り早い学習法おすすめ
　（→真っ新なParticleSystemの追加方法）
　（→コードへのファイルの読み込み方法）

・任意のタイミングで1回だけ発動させる方法

## ParticleSystemとは？
>パーティクル・システムとは、ゲーム物理、モーショングラフィックス、コンピュータグラフィックなどで使われる技術のひとつで、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、ある種の「ファジー」な現象をシミュレートするものである。（ウィキペディアより引用）

これがSwiftでも公式でSCNParticleSystemとして用意されています。
https://developer.apple.com/documentation/scenekit/scnparticlesystem

具体的にどんなものかはこの方の記事を見ると一目瞭然ですので、是非ご覧ください！↓
https://qiita.com/kboy/items/a1cd8dff40dff45d5b9e

## 【注意】 2020年12月現在、Apple公式のParticleSystemテンプレートは利用できないこと
多くの過去の記事で、NewFile -> SceneKit Particle System File から公式のサンプルファイル（炎や煙など）など7種類を開けると書かれていますが、
現在のXcode上からはアクセスができなくなっている模様です。
（.scnファイル上から真っ新なParticleSystemを追加することは可能です（後述します））
↓へ続きます。


## 公式テンプレと、爆発のサンプルをGithubにあげました
現在入手不可な公式テンプレートファイルと、爆発のサンプルを[Github](https://github.com/Fukase-Takamasa/ARKit-ExplosionSample-ParticleSystem)にあげました。
クローンしていただくとart.scnassetsフォルダ配下にParticleのファイルが入っていますので参考にお使いください。

## 手っ取り早い学習法おすすめ
真っ新なParticleSystemを1から自力で目的の特殊効果まで作り上げるのはあまりにも大変です。
まずは公式のサンプルファイル7種類から作りたいものに一番近いものを選びます。
今回は爆発を作りたかったので一番近い”炎”のサンプルを選びました。
それをエディタ上で開き、もう一つ真っ新なParticleSystemを開いて設定項目を1つずつ真似していくという方法です。
これでどこをいじればどう変わるのかが分かって手っ取り早いかなと思います。
![スクリーンショット 2020-12-17 5.01.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521005/07358905-d266-fd93-a803-cc890ae989af.png)
![スクリーンショット 2020-12-17 3.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521005/30ad8a85-002f-b29a-5abe-b4992a1c07d0.png)


### 真っ新なParticleSystemの追加方法
①NewFileを押すと.scnファイルが生成されます。
![スクリーンショット 2020-12-17 3.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521005/6b717624-5347-1dcb-3090-f7a69d72e796.png)
②「＋」からParticleSystemで検索すると出てきます。
これを①で追加した.scnファイル上にドラッグ＆ドロップします。
![スクリーンショット 2020-12-17 4.00.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521005/d9dbbae2-794c-9fb8-b212-382dd68e4dde.png)

### コードへのファイルの読み込み方法
公式サンプルの.scnpファイルと違い、今回の例では.scnファイルを使用しているので、下記の手順になります。

```swift
        //art.scnassets配下のファイル名までのパスを記載
        let explosionScene = SCNScene(named: "art.scnassets/ParticleSystems/ExplosionSamples/Explosion1.scn")
        
        //注意: withNameにはscnのファイル名ではなく、Identity欄のnameを指定する
        if let explosion = (explosionScene?.rootNode.childNode(withName: "Explosion1", recursively: false)) {
            
            //設置座標を指定したい場合はここで設定（↓ではカメラ位置よりも50cm前方を指定）
            let cameraPos = self.sceneView.pointOfView?.position ?? SCNVector3()
            explosion.position = SCNVector3(x: cameraPos.x, y: cameraPos.y, z: cameraPos.z - 0.5)
            
            //画面に反映
            self.sceneView.scene.rootNode.addChildNode(explosion)

        }
        
        //ParticleSystemへのアクセス方法
        sceneView.scene.rootNode.childNode(withName: "Explosion1", recursively: false)?.particleSystems?.first
```


## 任意のタイミングで1回だけ発動させる方法
炎のサンプルはずっと燃えっぱなしですが、爆発といえば一回爆発して終わりのイメージがあるかと思います。
この挙動の作り方を解説します。

実はParticleSystemには再生、停止のようなトリガーは無く、やるとすればbirthRateプロパティ（生成する粒々の量）を0にするか、戻すかになります。
ただし、今回のやり方では1度だけParticleのライフスパンを実行するという自然な見た目にするため、
birthRate = 0 でスタート（生成時に指定しておく）
↓
birthRate = 300（発火させたいタイミングで）（エディタ上で指定した値）
↓
loops = false にする
という方法をとります。

※前準備として、.scnファイルのエディタ上から設定項目の一番下、Looping項目を「Loops Continuously」にしておきます。
（炎みたいにずっと再生されっぱなしの状態です）
![スクリーンショット 2020-12-17 5.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521005/9413fdf6-98c9-b676-86e1-7c4e0c6fb71a.png)


実際にコードを見ていきます。


```swift

        //※生成時に　particleSystem.birthRate = 0 にしておくのを忘れずに！

        //任意の発火させたいタイミングで
        if let particleSystem = self.sceneView.scene.rootNode.childNode(withName: "Explosion1", recursively: false)?.particleSystems?.first  {
            
            particleSystem.birthRate = 300
            particleSystem.loops = false
            
        }
```
これだけです。

#### 備考
一度ライフスパン（エディタ上で設定している秒数）を終えたParticleSystemは死に、復活はしません。
Loops = false にして自然な見た目を作ることができますが、
一度終わったParticleは復活しないので、もう一度発火させたい場合は新しく生成し直す必要がある点に注意してください。
ちなみに、複数同じものを生成したい場合は clone()という公式メソッドが用意されていますので、[こちら](https://developer.apple.com/documentation/scenekit/scnnode/1408046-clone)も是非ご確認ください。


## さいごに
これにてARKitでの社長駆逐FPSゲームの解説シリーズは終わりになりますが、もし今後気が向いたら弾の発射、当たり判定、ジェスチャーの併用など執筆するかもしれません。
お楽しみに。

さて、続きまして、アルサーガパートナーズ Advent Calendar 2020 18日目の記事は、、、明日のお楽しみです！ :tada:

## おまけ
今回の駆逐アプリの元ネタになった個人ゲームアプリ「AR-GunMan」がAppStoreにて配信中です♪
https://apps.apple.com/jp/app/ar-gunman/id1542082005
![AR-GunMan_icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521005/30270504-6914-9ad9-e03a-633870054e96.png)