【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上にクリック出来るエンテティを作ることができます。

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

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

• 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

 

 

チュートリアル - PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう！

• 【1-1】 準備 - アカウントの準備
• 【2-1】プロジェクト紹介 - 展示会場をつくろう！
• 【2-2】プロジェクト紹介 - PlayCanvas Editorについて
• 【2-3】プロジェクト紹介 - スターターキットの中身について
• 【3-1-1】スクリプトについて - モデルを配置しよう
• 【3-1-2】スクリプトについて - 回転させるスクリプトを追加しよう
• 【3-2-1】3D空間のUIについて - ホットスポットを追加しよう
• 【3-2-2】3D空間のUIについて - モーダルを作ろう！
• 【3-3-1】リンクの設置 - モーダルのボタンにリンクを追加しよう
• 【3-3-2】リンクの設置 -　オンラインミーティングに参加ボタンを追加しよう！
• 【3-2-3】3D空間のUIについて - ホットスポットをクリックしたらモダルを表示させよう！
• 【3-4】プロジェクトの公開 - 作ったプロジェクトを公開しよう！