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

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

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

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

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

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

準備

PlayCanvasのアカウント作成

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

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

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

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

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

ユーザー名を入力

My First Projectが表示されます

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

アカウント画面について

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

2-1 展示会場を作ろう

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

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

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

プロジェクトの起動画面

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

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

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

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

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

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

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

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

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

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

3. シーンの選択

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

4. シーンが開かれます

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

2-2 PlayCanvas Editorについて

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

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

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

Untitled

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

1. ゲームを起動する

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

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

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

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

2.素材について

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

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

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

キャラクターについて

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

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

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

3人称視点: Third Person Controller

チュートリアルページ

Third Person Controller | Learn PlayCanvasdeveloper.playcanvas.com

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

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

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

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

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

モーダルについて

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

ステージについて

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

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

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

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

3-1-1 完成図

モデルを配置

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

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

PlayCanvas StoreFind and download best assetsstore.playcanvas.com

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

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

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

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

3. 角度の設定

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

Untitled

4. 起動してみよう

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

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

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

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

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

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

角度: Rotation

Untitled

大きさ:Scale

Untitled

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

3. Giftのモデル追加する

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

大きさ:Scale

Untitled

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

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

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

スクリプトについて

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

エンテティ（モデル）を回転させる

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

1. ADD COMPONENTをクリック

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

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

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

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

5. 起動してみよう

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

プログラムの中身を見る

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

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

参考リンク

PlayCanvas pc.Entity#rotate

pc.Entity | PlayCanvas API Referencedeveloper.playcanvas.com

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

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

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

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

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

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

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

テンプレート

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

1. Hotspotを土台に設置する

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

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

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

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

同じ方法で、中央と、右の土台にもホットスポットを追加します。
これで、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について

マウスのホバーがされると、大きさが変化するスクリプトが追加されています。
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について

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にドラッグアンドドロップ

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

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

フォントについて

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

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

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

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

3. PROCESS FONTをクリック

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

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

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

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

3-2-3 完成図

1.Hotspotエンテティを選択

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

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

a. Select Entityをクリック

b. モダルを選択

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

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

5. Launch画面を確認する

Launch画面を確認してみましょう。シーンを起動すると起動時のモーダルと、ProductModalの２つのモダルが表示されてしまいます。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のチェックを外します。

2. Launch画面を確認する

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

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

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

4. モデルが表示される

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

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

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

リンクについて

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

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

1. Linkエンテティを選択

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

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

4. 起動してみよう

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

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

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

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を作る

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

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で設定出来る値を決める

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のシーン上に配置する

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

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

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

2. 起動してみよう

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

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

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

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

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

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

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

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

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

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

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

3-3-3 完成図

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

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

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

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

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

3. 起動してみよう

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

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

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

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

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

Ray Castingについて

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

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

プロジェクト完成図

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

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

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

1. PUBLISH/DOWNLOADをクリック

2. PUBLISH NOWを選択

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

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

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

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

カスタマイズ

4-1. BGMを追加しよう

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

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

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

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

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

花吹雪を追加するとシーン上に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」を追加

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

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

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

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

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

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

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

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

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

準備

PlayCanvasのアカウント作成

ユーザー名を入力

My First Projectが表示されます

アカウント画面について

2-1 展示会場を作ろう

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

プロジェクトの起動画面

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

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

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

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

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

3. シーンの選択

4. シーンが開かれます

2-2 PlayCanvas Editorについて

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

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

1. ゲームを起動する

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

2.素材について

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

キャラクターについて

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

3人称視点: Third Person Controller

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

モーダルについて

ステージについて

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

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

モデルを配置

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

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

3. 角度の設定

4. 起動してみよう

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

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

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

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

角度: Rotation

大きさ:Scale

3. Giftのモデル追加する

大きさ:Scale

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

スクリプトについて

エンテティ（モデル）を回転させる

1. ADD COMPONENTをクリック

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

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

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

5. 起動してみよう

プログラムの中身を見る

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

2. Rotate.jsが表示される

PlayCanvasのライフサイクル

rotate関数

参考リンク

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

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

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

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

テンプレート

1. Hotspotを土台に設置する

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

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

hotspot.jsについて

スクリプト: initialize

a.this.entity.button.on

tween.jsについて

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

1. モーダルを配置

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

フォントについて

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

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

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

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

1.Hotspotエンテティを選択