search
LoginSignup
2

More than 1 year has passed since last update.

posted at

updated at

【JavaScript】PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう!【WebGL / JavaScript】

※ この記事は11月Ⅱ開催したハンズオン資料をQiitaに掲載したものになります。
特に掲載をしていなかったため、資料としてQiitaに掲載いたしました。

質問などがありましたらTwitter: mxcn3へお願いします。

PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう!

PlayCanvasはオープンソースのゲームエンジンです。HTMLとWebGLを使ってブラウザゲームや3Dのコンテンツを作ることのできるJavaScriptのライブラリです。豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。

PlayCanvas | 日本公式サイト https://playcanvas.jp/

このハンズオンはオンラインの展示会場を作るハンズオンとなっております。内容としては、基本的なPlayCanvas Editorの使い方やPlayCanvasで開発を始めるために必要な基本的な流れを手を動かしながら体験できるようになっております。

準備

PlayCanvasのアカウント作成

PlayCanvas Editorを利用するためには、アカウント作成が必要です。

まずはじめにアカウントの作成を行います。

1.PlayCanvas公式サイトにアクセス

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKJtJyT18Wl4lD1c0St%2F-MKJtSrNl3-p3N7LPHqP%2Fimage.png?alt=media&token=b3bb534b-5d49-4c3d-a9fe-2836ae8a0e7c

利用規約に同意しアカウントを作成します。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKJtJyT18Wl4lD1c0St%2F-MKJuHG7gTOH3Nrb_MFh%2F12.png?alt=media&token=48abe5dd-a525-45d6-a461-7fff50272b16

メールアドレス、Googleアカウントのどちらかを使用してアカウントを作成します。

ユーザー名を入力

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKJtJyT18Wl4lD1c0St%2F-MKJv37zPkYa73RlvECq%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-23%2019.04.59.png?alt=media&token=0e720b10-4976-4aa9-bd0a-bc191dd657d5

My First Projectが表示されます

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKJtJyT18Wl4lD1c0St%2F-MKJwMFcwLBFsY8T0NED%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-23%2019.11.29.png?alt=media&token=1ea79df7-68ab-415f-a0aa-e9c6fec09fcd

アカウントの作成が成功するとMyFirstプロジェクトが表示されます。
今回のハンズオンではこちらのプロジェクトは使わないので、タブを閉じてしまって大丈夫です。

アカウント画面について

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKiRweX9lsOAagGZvR6%2F-MKiRy-C4hmY8MA8DdWp%2Fimage.png?alt=media&token=3ab66aa9-a22c-40ea-9b51-e711315c708e

  • HOMEはPlayCanvasのフォーラムでのやりとりを見ることができます
  • PROJECTは自分の作成&参加しているプロジェクトの一覧を見ることができます
  • ACCOUNTはプロフィールの編集などの各種設定や、REST APIAPI キーを取得できます
  • フォーラムはPlayCanvasの公式フォーラムにアクセスできます。公式フォーラムはフォーラム用のアカウントが別途必要です
  • DocsではPlayCanvasの公式ドキュメントを見ることができます。日本語のドキュメントを表示するには左下の言語を日本語に変更をすることで日本語に翻訳されたドキュメントを見ることができます
  • ブログはPlayCanvasの最新情報を確認できます

2-1 展示会場を作ろう

オンライン展示会の完成図

今回のオンライン展示会は以下の機能を持っているものを作ります。
3Dモデルやスクリプト、アセットについてはあらかじめ用意されているものを使用します。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_mu3646t-VUlJPxBT%2F-MK_n1odCmelySclH4Dx%2Fimage.png?alt=media&token=7fd2fce5-66e2-49fc-8bc1-23052eca96da

  1. キャラクター操作
  2. モデルの配置
  3. ホットスポット機能・モーダルの表示
  4. URLへジャンプ機能
  5. モデルをクリックでページ遷移

プロジェクトの起動画面

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_hBIXQpwH5aV4b-aY%2F-MK_iLxvhZgTx9edVJ_g%2Fv.gif?alt=media&token=18ab9aee-096e-4716-855f-cfdb7451764d

デプロイされたプロジェクト

https://playcanv.as/p/eMWOGIkt/

このハンズオンのゴールについて

  • PlayCanvasの基本的な操作方法を行えるようになる
  • PlayCanvas Editorの機能を使用してプロジェクトの公開

1.フォーク(プロジェクトの複製)

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKT4gwda9PRauCtxt17%2F-MKT5bgBb_p3uEeFu_TP%2F3-%E7%B4%A0%E6%9D%90%E3%81%AE%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99.png?alt=media&token=df6700cb-1fce-43a3-98b8-b1edc7eaf884

https://playcanvas.com/project/731591/
上記リンクからプロジェクトにアクセスして「Forkボタン」をクリックします。

2. プロジェクトのフォーク

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKT4gwda9PRauCtxt17%2F-MKT5dr8Ipi47rRTbEoM%2F3-2.png?alt=media&token=c821f1b3-46b5-4a3f-8755-621dd8177f2f

プロジェクトの名前とを入力して(好きな名前で大丈夫です)FORKをしてください。

2. プロジェクトからエディタを起動

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKT4gwda9PRauCtxt17%2F-MKT5drAfNCEHLexrxkQ%2F3-4.png?alt=media&token=4d5d5293-a1ac-4749-8ab4-23bdc40fdcec

プロジェクトページの中にある、EditorボタンをクリックしPlayCanvas Editorを起動します。

3. シーンの選択

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKT4gwda9PRauCtxt17%2F-MKT5drB-hjDaWGu7xpS%2F3-5.png?alt=media&token=1ba2d831-0641-489d-add6-9b4d53a35d35

シーンの選択画面がでてきますので、Mainというシーンを選択してください。

4. シーンが開かれます

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcdT11RRjRTRd5bySs%2F-MKcdi3pyrTrAU8SS8Oy%2Fimage.png?alt=media&token=f0a7d354-eead-498a-a85f-d158ee50b178

これでシーンが開かれました、次にはPlayCanvasのエディタの紹介になります。

2-2 PlayCanvas Editorについて

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKKbH5FmpKVzj2ac0fX%2F-MKKgI8sfVivrcxQAybS%2F221.png?alt=media&token=5ae12b85-8597-4779-bb8c-b62f219e85a7

  1. シーン(SCENE) シーンビューには製作中のゲーム世界(シーン)が表示され、自由な位置・角度から眺めることができます。
  2. インスペクター(INSPECTOR) シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュといった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。
  3. ヒエラルキー(HIERARCHY) シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。
  4. アセット(ASSETS) 製作中のプロジェクト(ゲーム全体)に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。
  5. メニュー(MENU) シーンのビューモードやプロジェクトセッティング等の作業が行えます。

エンティティの操作をするショートカット

移動・回転・拡大・縮小についてはそれぞれショートカットが設けられており以下の通りとなっています。

Untitled

2-3 スターターキットの中身について

1. ゲームを起動する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKKbH5FmpKVzj2ac0fX%2F-MKKgm_CvULzJMw19yl2%2F1222.png?alt=media&token=0e8373e4-aaf8-402d-8550-5ca0d69dbf4e

ゲームの起動については別ウィンドウで確認をすることが出来ます

今回のハンズオンでは、このスターターキットを使用してプロジェクトの作成をしていきます。

スターターキットはこのようなものが入っています。
・キャクター操作
・展示会場のモデル
・起動時のモーダル

作り始める前に、現状の機能を確認しておきましょう。 PlayCanvasは「ゲーム再生ボタン」をクリックすることで、ゲームの挙動を確認することが出来ます。

2.素材について

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWIxlHKWP6gnCQbP_d%2F-MKWLSNg4KZyANipg-IY%2F2-2-b.png?alt=media&token=0d92cb90-e977-4d09-873a-1b6804735229

必要な素材については、アセッツ(ASSETS)にハンズオン資料と同じ名前のファイルにあります。基本的に今回のハンズオンはこの中のアセットを使用して展示会場を作成していきます。
小文字の(Assets)については、ハンズオンでは直接使用しませんが、ハンズオン・スターターキットで使用しているアセットが入っています。

3. ヒエラルキー(HIERARCHY)について

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWIxlHKWP6gnCQbP_d%2F-MKWLV-JQ5VswyDycKIV%2F2-1-a.png?alt=media&token=2f48dc8e-354b-46b7-9b6b-ebb2bed8ec88

ブース
今回ハンズオンでメインで使用するためにブースです。fbxのモデルをPlayCanvasにインポートしたものになります。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWMNEeZxxQMaUy9tVf%2F-MKWOSvbe1URG2fqRi_5%2Fimage.png?alt=media&token=0f2b5f2f-c57d-4a91-aedd-0a080e23c85b

キャラクターについて

キャラクター操作・アニメーションが入っています。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWMNEeZxxQMaUy9tVf%2F-MKWNjIKs-4gPBK0ASRS%2Fimage.png?alt=media&token=c723ede4-065f-4846-a079-af140be1f071

キャラクター操作について

PlayCanvasでキャラクター操作を行う場合には、キャラクター操作のスクリプトを記述する必要があります。今回のプロジェクトは、「Third Person Controller」プロジェクトを元に作成しております。

3人称視点: Third Person Controller

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcjs724v3nAba53iXG%2F-MKckHy_McCmpwyicDal%2Fmeme.gif?alt=media&token=9cf11a4d-6b54-424b-95d4-8fe2bbbe3b56

チュートリアルページ

Third Person Controller | Learn PlayCanvasdeveloper.playcanvas.com

Third Person Controllerは、カメラの操作からアニメーションの制御までが含まれたサンプルになります。本日使用するプロジェクトは、このプロジェクトに対して

  • 3Dモデルをサンディちゃんに置き換え
  • 展示会場のモデルを追加
  • モバイル対応

を行ったプロジェクトになります。

※ 1人称のサンプルはこちら

https://github.com/playcanvas/playcanvas.github.io/blob/master/camera/first-person.html

モーダルについて

起動時に表示されるモーダルです。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWMNEeZxxQMaUy9tVf%2F-MKWNoY1u5N85IEH5xwj%2Fimage.png?alt=media&token=97a62f89-2e0e-4336-8ae0-14b568cfa584

ステージについて

床やライトの設定が入っています。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWMNEeZxxQMaUy9tVf%2F-MKWNthdj5fzRBaEGrNX%2Fimage.png?alt=media&token=cc1960d5-8b8b-48f6-b3b6-110e84e2f491

3-1 スクリプトに触れる

3-1-1モデルを配置しよう

3-1-1では、PlatCanvasの基本の操作である3DモデルをPlayCanvasの空間上に配置します。

3-1-1 完成図

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_yMIFtFFhJrwQ3dFh%2F-MK_zAbGdh0mu7b9pLz0%2Fimage.png?alt=media&token=223b97a4-66ed-47de-bed3-aebc76af73e9

モデルを配置

PlayCanvasでは、BleanderやMayaなどの3Dモデリングのソフトを使用して作られたモデルを読み込むことができます。FBXやOBJ形式のデータについては、エディタにドラックアンドドロップをすることですぐに利用することができます。GLTF(GLB)については、ドラックアンドドロップ後スクリプトを追加することで表示することができます。アニメーションを含むファイルをアップロードをした場合には、アニメーションもアセッツ上に展開されます。

今回のハンズオンではあらかじめ用意されている、素材を使って進めていきます。今回追加するモデルはPlayCanvasのStore機能で無料で公開されているアセットを使用しています。

PlayCanvas StoreFind and download best assetsstore.playcanvas.com

1. モデルデータ(Punpkin)を選択 → 土台(中央)にドラックアンドドロップする

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWOcAv0KH6-tPKb6qM%2F-MKWPOQPqHlHGnv9mKu8%2Fimage.png?alt=media&token=82a388b1-1927-416e-ba62-795263ab7494

アセッツ(ASSETS) → ハンズオン資料 → 3-1-1 モデルデータとファイルの階層をたどっていき、Punpkinを選択し、土台(中央)にモデルをドラックアンドドロップします。

2. モデルがシーンに追加される

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWPQYhcxfhJY_5NmAx%2F-MKWRF4X5qWftK2IW9XJ%2Fimage.png?alt=media&token=014094cf-f6c0-4e27-93a3-63545e5ff897

モデルをドラックアンドドロップするとシーン上にモデルが追加されます。かぼちゃのモデルの向きがずれているため、次の操作で角度を設定します。

3. 角度の設定

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWPQYhcxfhJY_5NmAx%2F-MKWR2efdImwPCpBwv1Y%2Fimage.png?alt=media&token=1f85b47e-1092-4c9c-8285-0d605f585cc1

PunpkinのエンテティのRotationの値をそれぞれ以下に設定し、モデルを正面に向かせます。

Untitled

4. 起動してみよう

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_zz1LMJJdCYr1GufD%2F-MKa1MRM0hQgx7L81Pzk%2Fimage.png?alt=media&token=d1de1bef-8624-4856-8964-3ca7e2ca7ee3

5. Launch画面で現在のシーンの状況を確認することができます

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWPQYhcxfhJY_5NmAx%2F-MKWPfE3EDvEhOBDEphA%2Fimage.png?alt=media&token=6cbc8b5e-b867-411b-83f1-080f38a68d17

残り2つのモデルをシーンに追加する

1.モデルをドラッグアンドドロップします

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWPQYhcxfhJY_5NmAx%2F-MKWS8SSypkcajUueTyU%2Fimage.png?alt=media&token=5d4819d0-b324-406c-88dc-4476dbd87aa5

Bearモデルをブース(中央)の土台(左)に先程と同じくドラックアンドドロップします。
大きさと角度を変更したいので両方を変更します。

2.角度と大きさを調整する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWPQYhcxfhJY_5NmAx%2F-MKWS5ajAMhi5A8TWvCh%2Fimage.png?alt=media&token=1433da7d-8356-400c-9251-a0f28177bbdf

追加したクマのモデルのエンテティ2つの値をテーブルのように設定をします。

角度: Rotation

Untitled

大きさ:Scale

Untitled

これで丁度いい大きさになりました。

3. Giftのモデル追加する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWPQYhcxfhJY_5NmAx%2F-MKWStaPRIBHFQbB-ktC%2Fimage.png?alt=media&token=d37f40fa-7a53-4a62-a76e-1b9a41bf8784

最後に同じくGiftのモデルを土台(右)にドラックアンドドロップします。
少し小さいので大きくします。

大きさ:Scale

Untitled

これで3つの3Dモデルを追加する事ができました。ハンズオンではストアのモデルを使用しましたが、用意されたアセット以外にも好きな3Dモデルでも、ドラックアンドドロップで簡単に配置することができます。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKa3J_zDGYFi02BnmzL%2F-MKa3rWPFs9WA8OyvjjU%2Fimage.png?alt=media&token=11e6292c-06a8-49bf-8a41-e45c7d4056a0

Launch画面ではリアルタイムでシーンの状態が同期されます。一部スクリプトの追加などを行った際には、ウェブページ更新する必要がありますが、基本的にはLaunch画面は最新のシーンの情報が常に同期されています。

3-1-2 回転させるスクリプトを追加しよう

スクリプトについて

PlayCanvasではJavaScriptを使用してエンテティの操作を行うことができます。スクリプトから制御できることはエンテティの移動・回転・拡大縮小やマテリアルの切り替えなどを行うことができます。
PlayCanvasのスクリプトの参考になるものついては、APIリファレンスや、サンプル集があります。

エンテティ(モデル)を回転させる

SCRIPTコンポーネントを使い、モデルを回転させていきましょう。
このハンズオンでは、ソースコードについては記述をしなくても作れるように、アセットにサンプルコードが入っています。

1. ADD COMPONENTをクリック

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWTvBxlBNip7aCQM5h%2F-MKWUcOuDcxQ4vztVKfD%2Fimage.png?alt=media&token=30c5ed04-2634-44fe-af00-13d42066a8af

2. SCRIPTコンポーネントをを追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWTvBxlBNip7aCQM5h%2F-MKWUfNRcI-JpWJ8VUGU%2Fimage.png?alt=media&token=7e3cebd7-52c9-438b-9328-e97aafbc865e

3. Rotate.js スクリプトを追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWTvBxlBNip7aCQM5h%2F-MKWUiTGXpkcSR77MRWU%2Fimage.png?alt=media&token=b75a06dd-b583-4e47-9345-21c7e93cafcf

ADD SCRIPTをクリックするとプロジェクト内に入っているスクリプトの一覧が表示されます。
SCRIPTの検索欄から Rotateを選択します。

4. 追加されたスクリプトについて

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWTvBxlBNip7aCQM5h%2F-MKWUxPG9Lro53NQGKrv%2Fimage.png?alt=media&token=69faa538-d459-494f-b864-b097e4de3858

5. 起動してみよう

▶のボタンで作成したプログラムの起動(Launch)ができます。この起動をした際に発行される(https://launch.playcanvas...)から始まるURLについては、ログインし、権限のあるユーザーしかアクセスできません。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWTvBxlBNip7aCQM5h%2F-MKWV4EK-8OU2P0M5v3c%2Fimage.png?alt=media&token=9d61c9b6-4bf8-4cf3-92d4-e2d626c2cac5

プログラムの中身を見る

1. アセットからRotate.jsをダブルクリックする

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKa4AwaeKz181kJAorJ%2F-MKa5BltdRh6SZmix6sa%2Fimage.png?alt=media&token=34d23323-d911-4d5f-a911-c92784019eb3

2. Rotate.jsが表示される

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Rotate extends pc.ScriptType{    
    update(){ // updateはフレーム毎に呼ばれる
        this.entity.rotate(this.speed) // rotate関数に{x:0, y:0.1, z:0}のVec3の値を渡している 
    }
}
pc.registerScript(Rotate) // PlayCanvas Editorにスクリプトを追加
Rotate.attributes.add("speed", {type:"vec3", default:[0, 0.1, 0]}) // エディタ上でspeedを変更出来るようにする

追加したスクリプトはこちらになります。

  • update()
  • this.entity.rotate

a. update()
エンテティが表示されていて、スクリプトがアタッチされている場合にはupdate関数は毎フレーム呼ばれます。

PlayCanvasのライフサイクル

Untitled

PlayCanvasでは指定した関数が一定ライフサイクルで呼び出される関数があり、rotate.jsではとupdate毎rotate関数実行されています。 swapはコードエディタプログラムの更新を取ることができるので、開発中にSwapに対して変更をされたらページを更新するなどのコードを入れておくと、画面の更新することなどということもできます。

b. this.entity.rotate()
entityの角度を変えるための関数になります。移動する場合や、拡大縮小する際はtranslate, scaleなどを使うことができます。

rotate関数

今回使用した関数としては、this.entity.rotateという関数を使用しました。このthis.entityというのはスクリプトを追加したエンティティ自身のこととなります。
その中のrotate関数を使用することでエンティティを移動させることができます。

//rotate関数のサンプル
//使い方
//this.entity.rotate(xの回転, zの回転, yの回転);
// 例 z方向に90度回転する
this.entity.rotate(0, 0, 90);

参考リンク

  1. PlayCanvas pc.Entity#rotate

pc.Entity | PlayCanvas API Referencedeveloper.playcanvas.com

最後に、Rotate.jsを2つのモデルにも追加をしましょう。

3-2 3D空間のUIについて

3-2-1 ホットスポットを追加しよう

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKaBdD60vNfX5okPXpF%2F-MKaClud5uzEPAZWsVUI%2Fmobbbb.gif?alt=media&token=78cc882c-cffe-4083-ab26-9c09b6240bf3

3-2-1 完成図ホット・スポット

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKa5l4nVVzbI-IPPQyo%2F-MKa6T8EYhG8APqro0u9%2Fimage.png?alt=media&token=0f9b178e-be60-4202-8e15-ef818fae6ee2

3D空間でクリックできるホットスポットを追加する

3-1ではモデルを追加してエンテティの動きを制御することができました。3-2からはモデルを展示物に見立てて、3D空間のUIを作成していきます。まずは、ホットスポットとしてモデルの付近をクリックできるようにしていきます。ホットスポットについてはPlayCanvasでチュートリアルがあります。

今回のハンズオン以外の利用では3Dのモデルビューワーの中での利用例がチュートリアルとして紹介されています。またこちらのチュートリアルのスクリプトについては、MITライセンスで公開されています。
https://developer.playcanvas.com/ja/tutorials/information-hotspots/

テンプレート

テンプレート

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKa5l4nVVzbI-IPPQyo%2F-MKa8H4jcMA2bOuGrry8%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-27%203.21.11.png?alt=media&token=47311ec4-1038-403a-9d48-e0868fabd940

◇のマークのアイコンはタイプがテンプレートのアセットとなります。
テンプレートのアセットを利用することで同じエンテティを再利用する際に効率的に再利用することができます。

1. Hotspotを土台に設置する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKWV6AGV1vyr4R4sbop%2F-MKWVh71aP7AJNQSXMsX%2Fimage.png?alt=media&token=210151ea-6a09-4609-8667-a6c440bd60c2

Hotspotを土台(左)にドラッグアンドドロップします。

2. テンプレートのインスタンスがシーンに追加される

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKa8nMOohhOTCsVeiVs%2F-MKaAli6G_23EXN16VkB%2Fimage.png?alt=media&token=07500d20-d121-443a-ba1f-39482787eeaf

ドラックアンドドロップしたものはテンプレートと呼ばれ、モデルとは違い、テンプレート保持しているコンポーネントの状態などをそのままコピーすることができます。Hotspot.jsが設定された状態で追加されました。

3. 残りのモデルにもホットスポットを設定する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKaEm_2sLrX8Ng2qXg_%2F-MKaFAFON8tsJmGg7m_K%2Fimage.png?alt=media&token=d5bc2e85-0f54-4e41-938e-0ebbe55d6b24

同じ方法で、中央と、右の土台にもホットスポットを追加します。
これで、3-2-1で行う設定は終わりです。

HotspotエンテティははBUTTONコンポーネントとELEMENTコンポーネントを持つエンテティです。2D Screen上にクリック出来るエンテティを作ることができます。

1. BUTTONコンポーネント
ボタンコンポーネントを使うことで、ELEMENTコンポーネントにボタンの振る舞いを追加することができます。ホバーをされた際に色を変えることやテクスチャを変更することができます。
https://developer.playcanvas.com/en/user-manual/packs/components/button/2. ELEMENTコンポーネント
2DScreen上で要素表示するための基本的なコンポーネントになります。画像や文字の表示などを行うことができます。
また、クリックをする処理などをスクリプトから追加する場合やBUTTONコンポーネントを使用する場合には、USE INPUTにチェックを入れる必要があります。
https://developer.playcanvas.com/en/user-manual/packs/components/element/

hotspot.jsについて

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKaBdD60vNfX5okPXpF%2F-MKaClud5uzEPAZWsVUI%2Fmobbbb.gif?alt=media&token=78cc882c-cffe-4083-ab26-9c09b6240bf3

マウスのホバーがされると、大きさが変化するスクリプトが追加されています。
hotspot.jsのSCRIPTファイルの中身についてはこちらになります。tween.jsというライブラリを使っています。

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Hotspot extends pc.ScriptType {
  initialize () {
    const tween = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1.1, 1.1, 1.1), this.duration, pc.Linear).loop(true).yoyo(true)
    const tween2 = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1, 1, 1), this.duration, pc.Linear).loop(false).yoyo(false)
    this.entity.button.on('hoverstart', () => {
      tween.start()
    })
    this.entity.button.on('hoverend', () => {
      tween.stop()
      tween2.start()
    })
  }
}
pc.registerScript(Hotspot)
Hotspot.attributes.add('duration', { type: 'number', default: 0.5 })

スクリプト: initialize

  initialize () {
    const tween = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1.1, 1.1, 1.1), this.duration, pc.Linear).loop(true).yoyo(true)
    const tween2 = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1, 1, 1), this.duration, pc.Linear).loop(false).yoyo(false)
    this.entity.button.on('hoverstart', () => {
      tween.start()
    })
    this.entity.button.on('hoverend', () => {
      tween.stop()
      tween2.start()
    })
  }

  • this.entity.button.on
  • this.entity.tween

a.this.entity.button.on

起動時、マウスホバーに対するイベントリスナーを追加しています。
マウスホバーがあった場合に、スケールをtween関数を実行しています。

b. this.entity.tween

tween.jsを使用して、マウスホバーがあった場合には、大きさを1.1倍にし、マウスのホバーが戻った場合にはエンテティの大きさをもとの大きさに戻しています。

this.entity.tweenについてはライブラリをPlayCanvasに追加することで使えるようになります。

tween.jsについて

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKaDAgdrsxXsl1c5B4C%2F-MKaDlOcW-ICfKcHMk8e%2Fmama.gif?alt=media&token=2ede12c5-ebd1-42c6-87b8-7f565704b947

tween.jsはPlayCanvasで移動や回転を制御する際に便利なライブラリです。

https://developer.playcanvas.com/en/tutorials/tweening/

https://github.com/playcanvas/playcanvas-tween

3-2-2 モーダルを作ろう!

1. モーダルを配置

ASSETSのハンズオン資料 3-2-2からProductModalをHIERARCHYにドラッグアンドドロップ

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_0bJKeI3Mk7jbwAuZ%2F-MK_44xVGwQHeEdWqQdG%2Fimage.png?alt=media&token=85f8813f-9c93-4d48-a0b4-0bd3d7c8d122

2D SCREENコンポーネントについて

2Dスクリーンは通常のコンポーネントと違い、カメラにオーバーレイをされる形で表示され、画面サイズに応じたリサイズなどもおこなってくれます。2DScreenを使うことでゲームのUIやモーダルなどをつくることができます。

フォントについて

PlayCanvasで日本語を表示するためには、事前にフォントを準備を行う必要があります。

このプロジェクトではmplusフォントを事前に追加しています。

1. ELEMENTコンポーネントのフォントをクリック

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKeeXDuddyRIPvzXNB7%2F-MKehMVB9-d1fADAXzDI%2Fimage.png?alt=media&token=0f06bfdb-c127-4b4e-b70a-658398a0f295

2. Charactersに使用する文字列を追加

3. PROCESS FONTをクリック

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKeeXDuddyRIPvzXNB7%2F-MKehYh7HTviwppSG0rX%2Fimage.png?alt=media&token=17d43719-97dd-4ea7-b0c6-1ef8b4624c11

フォントを追加し、フォントを追加する必要があります。これはPlayCanvasがフォントを利用する際に一度画像へ変換をしているためです。

3-2-3 ホットスポットをクリックしたらモダルを表示させよう!

クリックでモダルを表示する

作成したホットスポットとモダルをつなぎ合わせます。ホットスポットがクリックしてモーダルを表示させます。

3-2-3 完成図

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_PR9zue5cxr-YgDf8%2Fimage.png?alt=media&token=9802bd73-b1c8-4958-9c78-850909d5b2fa

1.Hotspotエンテティを選択

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKaG9OMoDawRp6qx2GH%2F-MKaGTe9Pafd9LCDU0R8%2Fimage.png?alt=media&token=4391d2bb-5f03-4bb0-b83f-d5b767be73de

2. ShowModalスクリプトをHotspotに追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKaHNsnKljuIgd6JIUO%2F-MKaHlPUIwqzzZj-fZfp%2Fimage.png?alt=media&token=1fdf8342-784b-4b5b-aaf3-2467bfc94190

3. スクリプトの属性を設定する

a. Select Entityをクリック

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_T7MWDRmcHZkIPvZT%2Fimage.png?alt=media&token=1a9ea1f5-6293-483e-90d7-10e2e273cc93

b. モダルを選択

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_TBqEqexnAZETzW4a%2Fimage.png?alt=media&token=c2edde6d-dbb9-4801-93d7-42aa9fc347fd

4.スクリプト属性が追加される

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_TSXVlEp_uOi8lN4H%2Fimage.png?alt=media&token=07a1ce3f-3ed3-46c3-a1aa-ce2da203108f

属性が設定できると、エンテティの名前がmodalの属性にセットされます。

5. Launch画面を確認する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_U9NdZ-FSmGzSI4hv%2Fimage.png?alt=media&token=5fe8c9ef-a321-4b0f-807d-51c2465e03d9

Launch画面を確認してみましょう。シーンを起動すると起動時のモーダルと、ProductModalの2つのモダルが表示されてしまいます。ProductModalはホットスポットがクリックされるまで表示する必要はないので、起動時には非表示にします。

スクリプトについての解説

クリックでモダルが表示されるようになりました。ホットスポットに追加したSCRIPTはこちらになります。3-2-2で追加されていた、hide-modal.jsと反対の動きをしています。

show-modal.js

/*jshint esversion: 6, asi: true, laxbreak: true*/
class ShowModal extends pc.ScriptType {
  initialize () {
    this.entity.element.on(pc.EVENT_MOUSEDOWN, this.show, this) // マウスが押されたらthis.show関数を実行
    this.entity.element.on(pc.EVENT_TOUCHSTART, this.show, this) // タッチされたらthis.show関数を実行
  }
  show () {
    this.modal.enabled = true // this.modalを表示している
  }
}
pc.registerScript(ShowModal)
ShowModal.attributes.add('modal', { type: 'entity' }) // スクリプト属性を使用してエディタからエンテティを設定、エディタで設定しなかった場合にはundefinedとなる

  • this.entity.element.on
  • pc.EVENT_MOUSEDOWN
  • pc.EVENT_TOUCHSTART
  • show()

this.entity.element.on

pc.EVENT_MOUSEDOWN, pc.EVENT_TOUCHSTARTはそれぞれボタンが押されたときに発火されるイベントのイベントリスナーになります。this.entity.element.onで、エンテティが押されときの処理を記述しています。
show()
スクリプト属性で追加されたモデルの表示(enabled)を表示に変更します。

イベント

PlayCanvasにはイベントを管理するためのメソッドが複数用意されています。これらを利用すると、イベント駆動でスクリプトを書くことができます。

Untitled

モダルを起動時に表示させなくする

1. エンテティを選択し、モダルのenabledのチェックを外します。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_UQEX3lTUborZxbS2%2Fimage.png?alt=media&token=e651f177-5de6-446e-8bc0-e1cdf4d3246e

2. Launch画面を確認する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_UzDqRpzplMQhYnyN%2Fimage.png?alt=media&token=9ec105cd-a301-4ccc-b703-2085de1b26ab

ボタンが押されるまでモーダルが表示されなくなりました

3. 近づいてホットスポットをクリックします。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_V798PEmw7ektCKtB%2Fimage.png?alt=media&token=1b017ba6-d31a-41a0-a01a-e594dbef4e18

ホットスポットをクリックします。

4. モデルが表示される

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_OWzG-fCioqTaRmy1%2F-MK_VGE2UnN1bgogqRp0%2Fimage.png?alt=media&token=e64b6893-3454-4e55-a471-eec9f76a0eff

これで展示物の近くのホットスポットをクリックするとモーダルを表示させることができるようになりました。3-3ではモーダルにURL遷移をする仕組みを作っていきます。お気づきの方もいるかもしれないですが、今回のハンズオンではモーダルが一つしか無いので、3つの展示物とも同じモーダルが表示されています。
3つのモーダルを出し分ける際には、3つモーダルのエンテティを作る方法や、SCRIPTからテンプレートのインスタンスを生成などもすることもできます。

3-3 リンクの設置について

3-3-1.モーダルのボタンにリンクを追加しよう

リンクについて

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKbg-jp8LlFq-T1dax9%2F-MKbg_QS6g4sc_LlqHjQ%2Fimage.png?alt=media&token=b6936ba3-bf35-4d11-a405-c7e284d17d93

前回まででホットスポットをクリックしたらモーダルを表示する事ができました。3-3では、URL遷移をさせるための方法を実際に手を動かしながら確認していきます。PlayCanvasでは、URLにジャンプをするためのコンポーネントのようなものは無いので、JavaScriptの制御によって実装をしていきます。

3-3-1では、ボタンがクリックされたらページ遷移をする方法を紹介します。

1. Linkエンテティを選択

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_XA21EFWwOtBZm5LC%2F-MK_XtybVgy5nyCca6OJ%2Fimage.png?alt=media&token=be5ef430-8fef-4509-80bd-ff620cbaf620

2. SCRIPTコンポーネントを追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_XA21EFWwOtBZm5LC%2F-MK_XvLp8HQ7E2ArKyHj%2Fimage.png?alt=media&token=ea7522d9-84ca-4733-98b8-2d5ae0bae51b

3. ADD SCRIPTでスクリプトを追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKbf9lB0dmNt8O4t8J8%2F-MKbfxK1hqTniMKnS1mO%2Fimage.png?alt=media&token=95ea30f2-051b-4c5f-9ce3-efbe13591f55

4. 起動してみよう

モーダルについて起動してモーダルのボタンを押してみましょう。

ボタン(Linkエンテティ)について

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKbmCtpddMdsLp4RFry%2F-MKbnahsxhiJzArQXm9r%2Fimage.png?alt=media&token=65d8a6bc-e5f8-4795-b2dc-c6535074c685

LinkエンテティはBUTTONコンポーネントとELEMENTコンポーネントを持つエンテティです。
この2つのコンポーネントを設定することで、2D Screen上にクリック出来るエンテティを作ることができます。

1. BUTTONコンポーネント
ボタンコンポーネントを使うことで、ELEMENTコンポーネントにボタンの振る舞いを追加することができます。ホバーをされた際に色を変えることやテクスチャを変更することができます。
https://developer.playcanvas.com/en/user-manual/packs/components/button/2. ELEMENTコンポーネント
2DScreen上で要素表示するための基本的なコンポーネントになります。画像や文字の表示などを行うことができます。
また、クリックをする処理などをスクリプトから追加する場合やBUTTONコンポーネントを使用する場合には、USE INPUTにチェックを入れる必要があります。
https://developer.playcanvas.com/en/user-manual/packs/components/element/

Link.jsについて

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Link extends pc.ScriptType {
  initialize () {
    this.entity.element.on(pc.EVENT_TOUCHEND, this.open, this) //タッチが押されたときにthis.open関数を実行
    this.entity.element.on(pc.EVENT_MOUSEDOWN, this.open, this)//クリックがされたときにthis.open関数を実行
  }
  open () {
    window.open(this.url, this.name) // window.open(target, name)
  }
}
pc.registerScript(Link)
Link.attributes.add('url', { // url属性を追加
  type: 'string', // 文字列を指定
  default: 'http://playcanvas.jp/' // default値を設定
})
Link.attributes.add('name', { // name属性を追加
  type: 'string', 
  enum: [ // enum、属性に指定する文字列を制限することが出来る
    { _blank: '_blank' },
    { _parent: '_parent' },
    { _self: '_self' },
    { _top: '_top' }
  ],
  default: '_blank' // default値を設定
})

Linkスクリプトでは、ボタンがクリックされたらスクリプト属性に指定されているURLをnameの方法で開く処理が記述されています。

1. Link.js: タッチかクリックがされたらリンクへジャンプする処理について

// Link.js 行数 3行 - 9行
initialize () {
    this.entity.element.on(pc.EVENT_TOUCHEND, this.open, this) //タッチが押されたときにthis.open関数を実行
    this.entity.element.on(pc.EVENT_MOUSEDOWN, this.open, this)//クリックがされたときにthis.open関数を実行
}
open () {
    window.open(this.url, this.name) // window.open(target, name)
 }

a. Initializeの処理

  • モバイル用 element.on(pc.EVENT_TOUCHEND)
  • パソコン用:element.on(pc.EVENT_MOUSEDOWN)

パソコンでの表示とモバイルでは、エレメントが押されたとき発火されるイベントが異なります。それぞれのイベントに対してInitialize時にイベントリスナーを追加します。

b. リンクへジャンプする関数
クリックされた場合にwindow.open関数を実行する処理を追加しています。
第一引数に与えられたURLを第二引数のname(self,*blank,_*parent, _top)の方法で開くことができます。

window.open関数について
https://developer.mozilla.org/ja/docs/Web/API/Window/open

2. Link.js: スクリプト属性について

Link.attributes.add('url', { // url属性を追加
  type: 'string', // 文字列を指定
  default: 'http://playcanvas.jp/' // default値を設定
})
Link.attributes.add('name', { // name属性を追加
  type: 'string', 
  enum: [ // enum、属性に指定する文字列を制限することが出来る
    { _blank: '_blank' },
    { _parent: '_parent' },
    { _self: '_self' },
    { _top: '_top' }
  ],
  default: '_blank' // default値を設定
})

Link.jsではスクリプト属性を指定します。スクリプト属性はこのような機能となっております。

スクリプト属性

スクリプトのアトリビュート機能は、スクリプト内で使用する変数をPlayCanvasエディタ内で編集することができるようにする便利な機能です。この機能を使うことで、一度コードを書いた後にエンティティごと作られるインスタンスにそれぞれ違うパラメータを設定する調整ができるようになります。これにより、アーティスト、デザイナーやその他のプログラマーではないチームメンバーがコードを書かずに値を変更できるにプロパティを露出させることができます。スクリプト属性 | Learn PlayCanvasdeveloper.playcanvas.com

a. this.url: エディタから変更できるURLを作る

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKbpjBKxQVrE9u0yP-4%2F-MKbsfw7Uxs9A05ypx_r%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-27%2011.28.11.png?alt=media&token=52abe0a5-bd23-4c21-bb40-4cfa70dd0cef

スクリプト属性は値を動的にエディタから変更できるものになります。

  • type: string
  • default値

this.urlはtypeがstringの値を設定できます。指定できるtypeには"boolean", "number", "string", "json", "asset", "entity", "rgb", "rgba", "vec2", "vec3", "vec4", "curve"があります。assetやentityを活用することでマテリアルやモデルを変更することもできます。

default値の値を設定するとEditorで変更するまで、デフォルトでこの値が使われます。

b. this.name: enumで設定出来る値を決める

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKbpjBKxQVrE9u0yP-4%2F-MKbuVNvN2U-4HJiRCg0%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-27%2011.36.22.png?alt=media&token=fb0f943e-e856-40e3-902d-483a38fd100c

  • enum

this.nameはtypeがstringの値を設定できます。urlの属性と同じですがenumの指定をすることで設定できる値をプルダウンで制限することができます。また、enumでもdefaultの値も設定することができます。

指定できる値についてはAPI Referenceから確認することができます。
https://developer.playcanvas.com/en/api/pc.ScriptAttributes.html

3-3-2. オンラインミーティングに参加ボタンを追加しよう!

Elementコンポーネントを3Dのシーン上に配置する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKbxknMJDgJtxVuHpcI%2F-MKc8mBtZWMAbBZgaK49%2Fmamama.gif?alt=media&token=6cc487cb-6171-4c3c-8314-38878beff3ab

前回まででElementコンポーネントを2D Screeに配置をしてきました。
ELEMENTコンポーネントは3D空間にも配置することが出来るので、オンラインミーティング3Dのシーン上に配置をします。

1. join-meeting-buttonをブース(左)に追加する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_YOLNqE2gULGJc_l1%2F-MK_Yiaa6OcBO0XNr1lW%2Fimage.png?alt=media&token=8e1b32c1-0ca3-419f-a209-41b5fb4eb283

テンプレートをブース(左)に設定します。

2. 起動してみよう

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_YOLNqE2gULGJc_l1%2F-MK_YqA4D_n-DP7FC87L%2Fimage.png?alt=media&token=1b735c7a-75a0-4847-9f7c-d0dffeeeb0a5

3. スクリプト属性からリンク先をオンラインミーティングのURLに変更

※ ハンズオンではここは省略します

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_YOLNqE2gULGJc_l1%2F-MK_YmhT4375Yim8wMeP%2Fimage.png?alt=media&token=a346fa8b-e3b1-45e9-a72c-ebde0b0a6b42

これでオンラインの展示会場にオンラインミーティングへ参加ボタンを追加することができkました。
join-meeting-buttonではSCRIPTコンポーネントにHotspot.jsとLink.jsが設定されています。
このスクリプト属性の値をオンラインのミーティングを指定することで参加者とのコミュニケーションを取ることが出来るようになりました。

ここまでで下記の機能を追加することが出来るようになりました。

  • 歩き回れる展示会場を作る
  • 展示物を閲覧・詳細へジャンプすることができる
  • オンラインミーティングのURL

次は3Dモデルがクリックされた際にURLにリンクを移動させる方法を紹介します。

3-3-3. 3Dモデルをクリックしたら飛ぶリンクを追加しよう!

3D空間にリンクを追加する

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKc8q17QN5227znN8AZ%2F-MKcB1NbfSEEG2ZZeBNN%2Fmeme.gif?alt=media&token=5b971632-47a7-4e21-9842-3fbc801e844b

前回までで2つの方法でPlayCanvasのシーン上にリンクを追加をしました。

  • 2D Screenに設置したボタンをクリックでイベントの発火【3-3-1】
  • シーン上にELEMENTコンポーネントをクリックでイベントの発火【3-3-2】

モデルをクリックでURLにジャンプ

3-3-3 完成図

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcCsIMiHoIgmAwsbw_%2F-MKcGn-BMaw5kLZ3ZgoB%2Fimage.png?alt=media&token=e48a54b9-3f82-4576-8d72-8f43727dfef7

3-3-3では、3Dモデルをクリックをするとイベントが発火されURLへ移動するスクリプトを追加します。

1. Tresure Chestをブース(右)に追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_ZhpcB7kgRERdeloI%2F-MK__09cv_c9ibnXO20F%2Fimage.png?alt=media&token=459d2c59-55d3-41a2-ba12-5a24c5bf405e

ターゲットとなるTresure Chestを追加します。

2. TouchableSpaceをブース(右)に追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcH3nE0gxSM_PE0O9f%2F-MKcKgJPTPCqN-euVapf%2Fimage.png?alt=media&token=e1f8c51c-c77a-45af-a63b-8f3ffe794da2

ブース(右)に、テンプレートを追加します。

3. 起動してみよう

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcH3nE0gxSM_PE0O9f%2F-MKcN4uZjTvGQUFDqZpP%2Fimage.png?alt=media&token=744df025-ae93-4ed3-baae-44ac7651ee2e

3Dモデルをクリックするとリンク先へ移動することができます

これでハンズオンの3-3まで作りきることができました。
3-3では下記のコンポーネントを使ってPlayCavasでリンクを設置しました。

  • SCREENコンポーネント
  • ELEMENTコンポーネント
  • BUTTONコンポーネント

これで一通りのハンズオンのプロジェクトを作る切ることができました。
次は、PlayCanvasのプロジェクトを使って作成したプロジェクトを公開します。

※3Dスクリーンを利用したリンクの設置についてとその他の方法について

Ray Castingについて

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcH3nE0gxSM_PE0O9f%2F-MKcQyx3AND0L9u-fyeK%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-27%2014.02.16.png?alt=media&token=310b9300-2aa6-4ba1-9bff-0cc487cc7904

このプロジェクトではクリックすることで指定したURLにジャンプをすることができます。
今回は、3Dモデルへの当たり判定として3D Screenを使用しました。3D Screenを使った方法はコードがシンプルに成るため使いやすいですが展示会以外に使用する場合にはカメラを使用して、レイキャスティングという方法で3Dモデルがクリックされたかの判定をする方法が一般的にもちいられます。
https://developer.playcanvas.com/en/user-manual/physics/ray-casting/

3-4 作ったプロジェクトを公開しよう!

プロジェクト完成図

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MKcR4z_GWB8YeTuT8k_%2F-MKcSZ9b4iC8v7ZVHqMP%2Fmeme.gif?alt=media&token=5efeb98b-d919-427f-a16c-24d134d93f73

お疲れさまでした。ここまでで基本的なPlayCanvasを使ってオンラインの展示会場をつくることができました。

プロジェクトを公開しよう

プロジェクトを作成する事ができました。作ったプロジェクトをウェブ上で共有します。PlayCanvasでは作成したゲームをウェブ上ですぐに公開できます。

1. PUBLISH/DOWNLOADをクリック

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_avyNOkH8rGogLpH1%2Fimage.png?alt=media&token=e7506a74-997d-4599-85e3-814781c6cb42

2. PUBLISH NOWを選択

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_azqLnQLDBrILl2xz%2Fimage.png?alt=media&token=77e09f9f-af8e-4a7a-8c37-ab589ff28564

3. URLを共有しよう!
PUBLISHが成功するとBUILDSに共有できるURLが生成されます。 こちらを共有することで、第三者に完成したプロジェクトを公開できます。

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_bFNbAy28uHTbLg_t%2Fimage.png?alt=media&token=20b3e134-0c58-42e0-afe9-346ff3032aec

時間が余った方につきましては、【4】のカスタマイズまで進めてみましょう。

今回の完成品となるプロジェクトはこちらになります。ハンズオンで完成できなかった部分については、こちらのプロジェクトをご参考にしてください。

https://playcanvas.com/editor/project/731276

カスタマイズ

4-1. BGMを追加しよう

1.サウンドコンポーネントを追加して、展示会場にBGMを追加しよう

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_cE4HhN-5Ld_5wlBI%2Fimage.png?alt=media&token=a579f229-d2f4-4edd-9552-761b696b37a0

2. サウンドコンポーネントのSlotにBGMを追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_cFt7A_YnlvvSKlp6%2Fimage.png?alt=media&token=1485ee71-e7a2-41d3-b4f5-7569f9c4e1f3

3. Volumeを変更して音量を調整しよう

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_cHj64VY5SWmDVTyZ%2Fimage.png?alt=media&token=5637c5a4-3196-4b76-a86f-e1be40ed1351

4-2. パーティクルを入れよう!

1.花吹雪のパーティクルを追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_aoacGgBX9nvm5wSa%2F-MK_cVM0OVB9ULLYHL3u%2Fimage.png?alt=media&token=b240b4f1-9126-4fd6-ad7c-bf1a1e2a3044

花吹雪を追加するとシーン上にPARTICLEコンポーネントの入ったエンテティが表示されます。

PlayCanvasのパーティクルシステムについてはこちらのユーザーマニュアルに記載があります

https://developer.playcanvas.com/ja/user-manual/packs/components/particlesystem/

パーティクルについてはこちらのハンズオンで拘った表現についての紹介をしています。

https://support.playcanvas.jp/hc/ja/articles/360038014674-チュートリアル-PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する-1-10

4-3. 展示会場をテンプレート化して増やそう!

1. ブースを右クリックし、「New Template」を追加

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_d5wRK_i8ufwSPXpO%2F-MK_dHBt2ZMw4mVi2K5g%2Fimage.png?alt=media&token=9680ee39-ef40-4d22-bab7-512c83b5b096

2. テンプレートが生成されます

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_d5wRK_i8ufwSPXpO%2F-MK_dKFSgoBzPBSnEHq4%2Fimage.png?alt=media&token=9e531f5a-0a33-4905-a1f4-6d1c908e52cb

3. アセッツ(ASSETS)からテンプレートをドラックアンドドロップで配置

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_d5wRK_i8ufwSPXpO%2F-MK_dTJBjcs6P6Z_P5kP%2Fimage.png?alt=media&token=82702fec-660a-44f4-b5ba-a90a3f481d2f

4. 同じエンテティが複数追加されました

https://gblobscdn.gitbook.com/assets%2F-MJ_x2Gg4yv86PwJX5Yu%2F-MK_d5wRK_i8ufwSPXpO%2F-MK_dMtustVnqCx1SJCw%2Fimage.png?alt=media&token=26e56a93-71e0-47dd-ad57-4ee72aba0a3c

テンプレートを使用することで、エンテティをアセッツから扱うことが出来るのでシーンをまたいだ編集をすることが可能になります。また、ブラウザのコピーアンドペーストをすることで別プロジェクトにコピーをすることができます。

テンプレート機能について

テンプレート機能は2020年の9月に公開された新機能になります。
この機能の詳細についてはブログをご参考ください。

https://support.playcanvas.jp/hc/ja/articles/360054985454-テンプレートアセットでワークフローを加速-

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2