1. notion9999

    Posted

    notion9999
Changes in title
+ARKitのパーティクル・システムをコードで書く
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,141 @@
+
+#はじめに
+ARKitを勉強する上で、より表現の幅を広げるためにパーティクル・システムの使い方が必要だと思ったので、
+今回はXcodeのインスペクタ設定ではなく、コードでの設定方法を調査しました。
+
+# ファイルの作成
+パーティクル・システムのファイルを作成
+XcodeでNewFile -> SceneKit Particle System Fileで.scnpファイルを新規に作成します。
+テンプレートとしてbokeh、confetti、fire、rain、reactor、smoke、starが用意されているので、作成したいパーティクルに近いものを選択してパラメータを調整します。
+今回はfireテンプレートを選択しました。
+![Screen Shot 2019-01-03 at 10.27.07.png](https://qiita-image-store.s3.amazonaws.com/0/99869/1cfa0305-af6e-a7ad-7b3f-289689144ebe.png)
+![Screen Shot 2019-01-03 at 10.27.20.png](https://qiita-image-store.s3.amazonaws.com/0/99869/7bcd38a6-fa9f-1afe-33ad-fd1196fb93a1.png)
+
+今回はviewDidLoad内に、新規で作成したSCNNodeにパーティクル・システムを設定しています。
+(ship.scn内のオブジェクトは削除してあります。)
+![Screen Shot 2019-01-03 at 10.33.05.png](https://qiita-image-store.s3.amazonaws.com/0/99869/bb88848f-611d-fda3-afdf-e98170831818.png)
+
+#パーティクルの色
+![Screen Shot 2019-01-03 at 10.56.05.png](https://qiita-image-store.s3.amazonaws.com/0/99869/72f31198-4e52-5e9c-f268-d0ef756952ed.png)
+[particlecolor](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1523248-particlecolor)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルの色を変更<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/vnEhaB10o9">pic.twitter.com/vnEhaB10o9</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080644456473186304?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルの放出量
+値が大きいほど放出される粒子の量が多くなる。
+![Screen Shot 2019-01-03 at 11.01.15.png](https://qiita-image-store.s3.amazonaws.com/0/99869/519d8a45-05ed-0c55-f174-0ac440141cf5.png)
+[birthrate](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1522857-birthrate)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルの放出量を変更<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/OKp9Mp9HPN">pic.twitter.com/OKp9Mp9HPN</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080646322829455360?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルの全体形状 
+emitterShapeに放出したい形状を設定すると、パーティクルの全体形状がプレート型、ボックス型に出力できる。
+![Screen Shot 2019-01-03 at 11.21.55.png](https://qiita-image-store.s3.amazonaws.com/0/99869/a19641fb-268b-61e2-6164-3d296022d189.png)
+[emittershape](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1522737-emittershape)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルの全体の形状を変更<br>(円筒)<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/nveySbJ7po">pic.twitter.com/nveySbJ7po</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080651460520554496?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルのサイズ
+粒子のサイズを設定。デフォルト設定は1。
+![Screen Shot 2019-01-03 at 11.46.57.png](https://qiita-image-store.s3.amazonaws.com/0/99869/0fcf5b3b-634e-1f33-9e71-d3f767568be1.png)
+
+[particlesize](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1523508-particlesize)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルサイズ変更<br>(デフォルトサイズ1)<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/gdwQUFMErw">pic.twitter.com/gdwQUFMErw</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080657919476039680?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+#新規パーティクルの生成期間
+デフォルト設定は1秒。0秒の場合すべてのパーティクルが瞬時に出現する。
+![Screen Shot 2019-01-03 at 11.59.41.png](https://qiita-image-store.s3.amazonaws.com/0/99869/ae4c934b-1304-caeb-8460-d05c056f0f4d.png)
+
+[emissionduration](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1523998-emissionduration)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">新規パーティクルの生成時間変更<br>(5秒間隔)<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/oSwMdTM1pR">pic.twitter.com/oSwMdTM1pR</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080661281344937984?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルを生成しない時間
+生成しない時間を設定する。
+![Screen Shot 2019-01-03 at 13.31.52.png](https://qiita-image-store.s3.amazonaws.com/0/99869/f5cc88d8-5b18-4db2-8f76-1258fd7a702a.png)
+
+[idleduration](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1522998-idleduration)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルを1秒間隔で生成しないように設定<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/wpuxaSpKwj">pic.twitter.com/wpuxaSpKwj</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080684586114285569?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルの表示期間
+パーティクルが生成されてから、消えるまでの時間。デフォルトが1秒。
+![Screen Shot 2019-01-03 at 13.41.47.png](https://qiita-image-store.s3.amazonaws.com/0/99869/027109b0-9daa-e666-a952-5b89a78f0459.png)
+
+[particlelifespan](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1523575-particlelifespan)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルのライフサイクル設定<br>粒子の生成から消滅までの時間を0.5秒に設定<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/f7sMinJq4W">pic.twitter.com/f7sMinJq4W</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080687691635683329?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルの動作スピードを変更
+デフォルト値1秒。値を大きくするとパーティクルの動きが早くなり。小さくすると動作が遅くなる。
+![Screen Shot 2019-01-03 at 13.55.02.png](https://qiita-image-store.s3.amazonaws.com/0/99869/d57da16c-978f-03b9-d3d0-11ea6dcffeb6.png)
+
+[speedfactor](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1522988-speedfactor)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルの動作スピードを0.1秒に設定<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/9a0QebYCvA">pic.twitter.com/9a0QebYCvA</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080689817166348288?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#パーティクルの引き伸ばし
+移動方向に対してパーティクルを引き伸ばす。デフォルトは0。
+![Screen Shot 2019-01-03 at 14.03.23.png](https://qiita-image-store.s3.amazonaws.com/0/99869/6414f203-3f9c-7f49-5b09-2953f8f00156.png)
+
+[stretchfactor](https://developer.apple.com/documentation/scenekit/scnparticlesystem/1523338-stretchfactor)
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">パーティクルの引き伸ばし設定<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</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/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/pITDpgNDpz">pic.twitter.com/pITDpgNDpz</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1080691772655714305?ref_src=twsrc%5Etfw">2019年1月3日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+
+#まとめ
+他にもいろいろ設定はありますが、きりがないのでこのくらいにして、機会があれば別途調査したいと思います。
+オブジェクトを配置しただけだと、視覚的にインパクトが欠ける場合や、アニメーションを加えることで表現の幅をもたせたい時に上手く使用できると武器になりそうです。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+