PlayCanvasで線を書く

9442 ワード
PlayCanvas Line Line テキストリンク

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タグの付いた記事一覧

PlayCanvasのユーザー会のSlackを作りました！

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

日本PlayCanvasユーザー会 - Slack