PlayCanvasで線を書く


### PlayCanvasで線を書く方法について

こんな感じの線
<img width="600" alt="スクリーンショット 2019-12-26 16 56 43" src="https://user-images.githubusercontent.com/39250588/71465722-477a9080-27b5-11ea-8483-92b4dcb8ac17.png">

### 動作画面
https://playcanv.as/p/F6ioLggP/

PlayCanvasで線を引くためには`renderLine`関数と`renderLines`関数があります。今回の動作画面で表示されているものは`renderLines`関数を使用して描画したものになります。

### app.renderLine関数で線を書く
[https://developer.playcanvas.com/en/api/pc.Application.html#renderLine](https://developer.playcanvas.com/en/api/pc.Application.html#renderLine)

renderLine関数

|Name |Type |
|---|---|
|start | pc.Vec3 |
|end | pc.Vec3 | 
|color | pc.Color | 
|endColor | pc.Color |
|options | Object | 
|options.layer|pc.Layer | 



### app.renderLines関数を使う

renderLines関数

|Name| Type|
|---|---|
|position | pc.Vec3[] |
|color | pc.Color[] |
|options | Object |
|options.layer | pc.Layer |


表示するためにrenderLines関数を使用したスクリプトを`renderline.js`という名前で追加します。

```renderlines.js
const Renderlines = pc.createScript('renderlines');

// フレームごと
Renderlines.prototype.update = function(dt) {

        var points = [new pc.Vec3(Math.random(),Math.random(),0), new pc.Vec3(1,0,0), new pc.Vec3(3,3,0), new pc.Vec3(1,1,1)];
        var colors = [new pc.Color(1,0,0), new pc.Color(1,1,0), new pc.Color(0,1,1), new pc.Color(0,0,1)];
        this.app.renderLines(points, colors);
};
```


### ① レイヤーを追加
線が他のオブジェクトとかぶってしまうので線だけを表示する為のレイヤーを追加します。
今回は`line`という名前でレイヤーを追加し、SUBLAYERに、`line`を追加します。

![Group 13](https://user-images.githubusercontent.com/39250588/71466674-33845e00-27b8-11ea-9e5a-9454a36f0309.png)

### ②CAMERAのClear Buffersのチェックを外す
線を表示するためのカメラを追加して、Clear Buffersのチェックを外します

![Group 11](https://user-images.githubusercontent.com/39250588/71466672-33845e00-27b8-11ea-91ee-9e2c9fef7f96.png)

### カメラの表示するレイヤーをLayersに変更
カメラの表示するレイヤーを`line`だけにします。

![Group 12](https://user-images.githubusercontent.com/39250588/71466673-33845e00-27b8-11ea-92f5-7fafcad5714a.png)

### renderScriptsをSCRIPTに追加
カメラに先ほど作成した`renderScripts`を追加します。

![Group 14](https://user-images.githubusercontent.com/39250588/71466675-341cf480-27b8-11ea-956d-8ebea9a5175c.png)


### ヒエラルキーについて



<img width="1490" alt="スクリーンショット 2019-12-26 17.24.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/f1a68f3b-f094-bcf9-ad0d-4a02b7d1612b.png">


PlayCanvas上のヒエラルキーはこのような形です。

- Box
- Camera (ワールドのレイヤーを表示するようにする)
- Camera (線を表示するカメラ）

### 表示について

<img width="1287" alt="スクリーンショット 2019-12-26 17.24.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/0b8baf5e-4efe-9c36-d2f5-cb1b436b2721.png">


このような形で表示することができました。

<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)