PlayCanvas

PlayCanvasのTutorial記事をつくるときに実行画面をステップごとに埋め込む方法

この記事はPlayCanvas | GWアドベントカレンダー 6日目の記事です。

前回、「PlayCanvasでつくったプロジェクトをブログに埋め込んで動作させる方法として記事を書いたのですが、ひとつのプロジェクトを作り上げる様子をブログで紹介する場合、記事に埋め込むPlayCanvasのプロジェクトは、プロジェクト進捗ごとにわけてつくる必要があります。

同じプロジェクトをForkして更新すればよいのですが、それだと手間もかかるし、プロジェクトの数も増えてしまいます。

ということで、PlayCanvasJPのSlackで質問したところ、はが(@mxcn3)さんから方法を教えてもらいました。

Slack | プロジェクト相談 | PlayCanvasJP 2022 04 30 12 58 14

曰く、ビルドごとにURLが変更されるので、これを使えばよいとのこと。

ビルドについて

OfficeDigitalTwin | Editor 2022 04 30 13 04 18

EDITORを起動して表示される画面左にある”BUILDS”をクリックした画面です。

OfficeDigitalTwin | Editor 2022 04 30 13 05 19

一番上に”Your primary build is available at https://playcanv.as/p/YXUqIb2J/と書かれているこのURLがこのプロジェクトの代表URLですが、ビルドごとに別のURLが存在しています。

OfficeDigitalTwin | Editor 2022 04 30 13 08 54

なので、ここをクリックしてプロジェクトのLaunch画面をひらいてみると

SmartLight   PLAYCANVAS 2022 04 30 13 10 20
https://playcanv.as/b/n7PclSZ

のとなり、先程とは別のURLであることがわかります。

なので、記事に埋め込む場合は

<iframe style="border: none" target="_blank" width="720px" height="300px" src="https://playcanv.as/b/n7PclSZ"></iframe>

とすることで、このBUILDの動作画面を記事の中で見せることができます。

ビルドの作り方

OfficeDigitalTwin | Editor 2022 04 30 13 21 05

ビルドを区別するために、PlayCanvasのアセットストアから無料のPlaybotをASSETに読み込み、事務所の中に配置しました。

OfficeDigitalTwin | Editor 2022 04 30 13 22 30

これでPublishをして別のビルドを作成します。

OfficeDigitalTwin | Editor 2022 04 30 13 38 41

OfficeDigitalTwin-BUILD2ができましたので、ここをクリックしてURLを確認します。

https://playcanv.as/b/5K4NLQxz/

このBUILDのURLです。

記事に埋め込んで表示

これで別BUILDの表示ができます。

まとめ

Tutorialの記事などで、ステップごとの動作画面をみせるのに、BUILDをわけて表示できるのは便利ですね。

ABOUT ME
中畑 隆拓
スマートライト㈱ 代表取締役。IoTソリューションの開発、スマートホーム&オフィスのコンサルティング、DALI,KNX,EnOceanなどのインテグレーションを行っています。

COMMENT

メールアドレスが公開されることはありません。