PlayCanvasで線を書く方法について
こんな感じの線
動作画面
PlayCanvasで線を引くためにはrenderLine関数とrenderLines関数があります。今回の動作画面で表示されているものはrenderLines関数を使用して描画したものになります。
app.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を追加します。
②CAMERAのClear Buffersのチェックを外す
線を表示するためのカメラを追加して、Clear Buffersのチェックを外します
カメラの表示するレイヤーをLayersに変更
カメラの表示するレイヤーをlineだけにします。
renderScriptsをSCRIPTに追加
カメラに先ほど作成したrenderScriptsを追加します。
ヒエラルキーについて
PlayCanvas上のヒエラルキーはこのような形です。
- Box
- Camera (ワールドのレイヤーを表示するようにする)
- Camera (線を表示するカメラ）
表示について
このような形で表示することができました。
PlayCanvas開発で参考になりそうな記事の一覧です。 入門 応用- PlayCanvasのコードエディターでes6に対応する
- Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
- PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む
- React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
- PlayCanvasのエディター上でHTML, CSSを組み込む方法
- 【iOS13】新しくなったWebVRの使い方
PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！