AR年賀状を作る

### PlayCanvasでAR年賀状を作ります。

PlayCanvasでARを作成するには[こちら](https://qiita.com/yushimatenjin/items/6fe5963afc14f57ba40d)の記事をご覧ください。

前回の記事で紹介されているのは

- PlayCanvasでARコンテンツを作る
  - PlayCanvasについて
  - ARマーカーについて
  - プロジェクトの作成方法について
 
[https://qiita.com/yushimatenjin/items/6fe5963afc14f57ba40d](https://qiita.com/yushimatenjin/items/6fe5963afc14f57ba40d)
今回紹介するのはAR年賀状を作るための機能を作ります。

- 3D空間上にPlayCanvasで文字を表示する
- 3Dモデルをインポートする方法
- エフェクトを追加する方法

説明しないこと
- 年賀状に印刷すること
年賀状を書いたことがないので、年賀状の印刷方法については分かる人に聞いていただけると嬉しいです。

## 動画

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/1d64afc6-e113-7314-5f88-09d9d3454065.gif)


## 3D空間上にPlayCanvasで文字を表示する

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

「あけおめ」メッセージを追加をします。あけおめメッセージを追加するにはフォントとスクリーンを作ること作ることができます。
 PlayCanvasでは`.ttf`形式のフォントを使用することが出来るので、その形式のフォントを使用します
#### 準備


##### フォントを追加する

 1. [M Plusフォント]( https://mplus-fonts.osdn.jp/about.html)をダウンロード
 

 1. `mplus-1m-bold.ttf`をドラッグアンドドロップでPlayCanvasのエディター上にアップロードします。
 
 1. フォントに日本語を対応させる
![](https://i.imgur.com/Tb352lA.png)
アップロードしたフォントをASSETからクリックすると、FONT → Charactersに使用したい文字列を追加して、Process Fontをクリックします。文字列を一度に追加したい場合は16進数で指定した、RANGEで追加もできます。

日本語を使用するための準備これでできました。次からはフォントをゲーム画面（AR)に表示出来るようにします。


#### 追加

3. 2D Screenと文字を追加する

HIERARCHYの中から　→　➕　→　User Interface →　2D Screenを追加します。

2DScreenを使用することでカメラの影響を受けない配置が可能になります。


4. 2D スクリーンにText Elementを追加します。
（画像は追加後のHIERARCHY）

a. HIERARCHYから2D Screenを選択
b. ➕　→　User Interface → Text Elementを追加

これで2D Screenの中にText Elementを追加することができました。


##### Text Elementについて

Text Elementを選択肢　→　ELEMENT　→　Fontの中に先程設定した M Plusのフォントを追加します。

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

これでPlayCanvasエディター上で文字を表示することが出来るようになりました。


## 3Dモデルをインポートする方法

PlayCanvasでは`Fbx`, `Obj`についてはドラッグアンドドロップすることで使用することができます。


1. 3Dモデルをダウンロードする
3Dモデルをダウンロードするのには Google Polyなどは可愛い動物などのモデルが比較的自由に利用可能なモデルが配布されています。

今回使用した3Dモデルは[Rat](https://poly.google.com/view/9h_k4Jkm3Le)になります。




2. PlayCanvas Editorにドラッグアンドドロップでアップロードする

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

FBX, OBJ形式の、3DモデルについてはPlayCanvasにドラッグアンドドロップをすることで配置することができます。



FBX, OBJ形式でテクスチャがうまく反映されない場合にはBlenderなどの3Dのソフトウェアで設定して保存し直すと反映されるようになります。

#### 参考
- [VRoid→Blender→PlayCanvasでwebに3Dキャラクターを表示してみる
](https://qiita.com/shujimuna1102/items/15c5fde90e76f30e76dc)

- [ARでサイコロを投げるまで ～Blenderを使って３Ｄモデルの作成~JavaScriptでサイコロを動かす～[PlayCanvas / 8th Wall]](https://qiita.com/yushimatenjin/items/143c0aa22953864fa2fd)




## エフェクトを追加する

PlayCanvasでエフェクトを使用するにはParticle Systemを追加します。

#### Particle Systemを追加


1. ➕　→ Particle Systemを追加します

#### Particle Systemの設定について



![https://support.playcanvas.jp/hc/article_attachments/360050770994/smoke.gif](https://support.playcanvas.jp/hc/article_attachments/360050770994/smoke.gif)


このようなエフェクトは簡単に作れます。作り方についてはこちらが参考になります。

[https://support.playcanvas.jp/hc/ja/articles/360038579874](https://support.playcanvas.jp/hc/ja/articles/360038579874)


### PlayCanvasにARを追加する
[前回](https://qiita.com/yushimatenjin/items/6fe5963afc14f57ba40d)の記事と今回の記事を合わせることでリッチなARコンテンツを作れるようになります。
PlayCanvasはARToolKitの他にも8thwallというWebARのライブラリに対応していますので他のコンテンツもご覧ください



#### 以下PlayCanvas開発で参考になりそうな記事の一覧です。

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

応用
- [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)

その他の記事はこちらになります。
- [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)
### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

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