Effekseerが使えるようになったので、PlayCanvasで映えるコンテンツが簡単に作れる用になった！

## ついに！PlayCanvasで映えるコンテンツが簡単に作れる用になった！

昨日 PlayCanvas Meetup #0が行われました。その中のLTでEffekseerというミドルウェアを制作されている_s_w_d_さんの登壇でPlayCanvasでEffekseerを使う方法というLTがあり、Effekseerで作成したエフェクトをPlayCanvasで簡単に使えるようになったので使ってみたいと思います。

### 詳しいLT資料はこちら
[PlayCanvasでEffekseerを使用する！PlayCanvasへのWebGLライブラリの組み込み方！-](https://docs.google.com/presentation/d/1jiTZkUjYcbqDNKM02zk7x0wgNm1eSxMai2ZEDVJXNso/edit#slide=id.g479f26d2ed_0_77)

## PlayCanvasでEffecseerを動かす

作成した、エフェクトはこちら

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">PlayCanvas x Effekseer サンプルがたくさんあるので色々できそう！<br><br>使用したのは投稿者 : project弾幕GIrlsさんの作成されたエフェクトです。<a href="https://t.co/IV6xRd7Zkk">https://t.co/IV6xRd7Zkk</a> <a href="https://t.co/ItYoR7NnfW">pic.twitter.com/ItYoR7NnfW</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1206879920560803840?ref_src=twsrc%5Etfw">December 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 1. playcavnas-effekseerからダウンロード
https://github.com/effekseer/playcanvas-effekseer

こちらのリポジトリから
- effekseer-emitter.js	
- effekseer-system.js	
- effekseer_asmjs.js

をダウンロードします。

### PlayCanvas Editorにアップロード

３つのJavaScriptファイルをアップロードします。
![](https://i.imgur.com/wYe6NNT.png)

## 1.Effekseerでエフェクトを作成する

Effekseerでエフェクトを作成すると、`texture`フォルダと`.efk`ファイルが出力されていますので、そちらをそのままアップロードします。

### a.エフェクトとを作成する

Effekseerはサンプルが方法にあるため今回はサンプルの魔法陣を使います。

![](https://i.imgur.com/ECVnIC7.png)



![](https://i.imgur.com/XmQboNh.png)

https://effekseer.github.io/jp/contribute.html

エフェクトを作成して`texture`フォルダと、`.efk`ファイルを保存します。

### PlayCanvas Editorにアップロード


エフェクトを依存関係を含んだままアップロードをします。

1. PlayCanvas上で`Texture`フォルダを作成して`texture`内にあるテクスチャをアップロードします。

2. 作成した `.efk`ファイルをアップロードします。


![](https://i.imgur.com/q7B8eBt.png)



#### EffekseerSystemをエンティティに追加

![](https://i.imgur.com/rAwBDbt.png)

- Rootエンティティ(またはEffekseerSystemエンティティを追加)を選択し、ADD COMPONENTS → SCRIPTS → ADD SCRIPTS →から、effekseerSystemを追加します


#### `camera`エンティティを作成する

- カメラの名前を`Camera` → `camera`に変更します。
※現在の仕様上こちらにしたほうが良いです。カメラの名前を変えたい場合にはソースコードを少し変更する必要があります。


### EffekseerEmitterエンティティを追加

エフェクトを出すための実態となるエンティティを追加します。

1. EffekseerEmitterエンテティを新規作成（名前は何でも良い）　→ ADD COMPONENTS → SCRIPTS　→ ADD NEW SCRIPTS → EffekseerEmitterを追加します。

2. EffekseerEmitterスクリプトの中にある`effect`に`.efk`ファイルを追加します。
 
![](https://i.imgur.com/Q7ys2WB.png)


3. PlayOnEnterにチェックを入れる


これでPlayCanvasにEffekseerで作成したエフェクトを組み込むことができます。（すごい）
![](https://i.imgur.com/4lB2Exn.png)



### LTの資料について

詳しい仕様などはLT資料を見ていただけるとわかりやすいです。

[https://docs.google.com/presentation/d/1jiTZkUjYcbqDNKM02zk7x0wgNm1eSxMai2ZEDVJXNso/edit#slide=id.g479f26d2ed_0_77](https://docs.google.com/presentation/d/1jiTZkUjYcbqDNKM02zk7x0wgNm1eSxMai2ZEDVJXNso/edit#slide=id.g479f26d2ed_0_77)





### 前回のARのデモにEffekseerを組み込んでみた。

[PlayCanvasで簡単に簡単なWebARコンテンツを作る！](https://qiita.com/yushimatenjin/items/6fe5963afc14f57ba40d)

こちらのプロジェクトにEffekseerを組み込んでみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">PlayCanvas x Effekseer サンプルがたくさんあるので色々できそう！<br><br>使用したのは投稿者 : project弾幕GIrlsさんの作成されたエフェクトです。<a href="https://t.co/IV6xRd7Zkk">https://t.co/IV6xRd7Zkk</a> <a href="https://t.co/ItYoR7NnfW">pic.twitter.com/ItYoR7NnfW</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1206879920560803840?ref_src=twsrc%5Etfw">December 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>






<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)