チュートリアル - 箱庭・ミニスケープなコンテンツを作ってみる 4/5

オブジェクトに触れて処理後にボタンを表示

以下の画像のようにオブジェクトの上にボタンを表示します。

例えば、「triggerCollision.js」の各イベントの処理でElementのEnabledを切り替えれば簡単に実装ができます。

下のコードは例えなので本チュートリアルでは使わず紹介までになります。

var TriggerCollision = pc.createScript('triggerCollision');

TriggerCollision.attributes.add("targetElement", {type: "entity" });　// 表示する３D ScreenのElementを設定

TriggerCollision.prototype.initialize = function() {
    this.entity.collision.on('collisionstart', this.onTriggerEnter, this);
    this.entity.collision.on('collisionend', this.onTriggerLeave, this);

};

TriggerCollision.prototype.onTriggerEnter = function(result) {
    console.log("Collision Enter");
    this.targetElement.enabled = true; // 設定したElementのEnabledをTrueにして表示
};

TriggerCollision.prototype.onTriggerLeave = function(result) {
    console.log("Collision Leave");
    this.targetElement.enabled = false; // 設定したElementのEnabledをFalseにして非表示
};

今回は「Template」を使ってボタンを実装します。
Hierarchyに3D Screen、Button、Textと入れ子で追加します。
ButtonはTagsに「cursor」を追加し、RotationのYを180に設定します。
必要に応じてFontやボタンの画像のアセットも設定します。

Fontデータはデフォルトで設定されていないので、今回は以下のM+を使用します。
https://mplusfonts.github.io/

設定ができたらTemplate化して、Hierarchyの「3D Screen」のEntityは削除します。

次はスクリプト「showCursor.js」を作成し、以下をコピーペーストします。

var ShowCursor = pc.createScript('showCursor');

ShowCursor.attributes.add("playerCamera", {type:"entity"}); // PlayerのCameraを設定
ShowCursor.attributes.add("cursorTemp", {type:"asset", assetType:"template"}); // 先ほど作成したTemplateを設定

ShowCursor.prototype.initialize = function() {
    this.instance = this.cursorTemp.resource.instantiate(); // Templateをインスタンス化する

    this.app.on('cursor:set', this.setCursor, this); // setCursor()を 'cursor:set' というイベント名で設定
    this.app.on('cursor:remove', this.removeCursor, this); // removeCursor()を 'cursor:remove' というイベント名で設定

    this.app.root.addChild(this.instance);
    this.instance.enabled = false; // 初期状態ではボタンは非表示にする
};

ShowCursor.prototype.update = function(dt) {
    this.instance.lookAt(this.playerCamera.getPosition()); // 常時カメラの方を向くように設定
};

ShowCursor.prototype.setCursor = function(targetEntity) { // ボタンが表示される処理
    this.instance.enabled = true;
    this.instance.setPosition( // ぶつかったオブジェクトのPositionを取得してボタンの表示場所を設定
        targetEntity.getPosition().x,
        3,
        targetEntity.getPosition().z
    );
};

ShowCursor.prototype.removeCursor = function() { // ボタンが非表示される処理
    this.instance.enabled = false;
};

作成した showCursor.js は、Entity「Root」 に設定します。

スクリプト属性にPlayerのCameraと先ほど作成したTemplateをそれぞれ登録します。
このTemplateはスクリプトでインスタンス化して使用されます。
PlayerのCameraを設定したのはボタンの向きが常にカメラの方を向くために設定しています。

ボタンを表示するイベントを作成し準備ができたので、次はPlayerがオブジェクトにぶつかった時にボタンを表示するイベントを呼ぶように書き足します。

「triggerCollision.js」 にPlayerがぶつかったときにボタンを表示する処理を追加します。

TriggerCollision.prototype.onTriggerEnter = function(result) {
    console.log("Collision Enter");
    this.app.fire('cursor:set', this.entity);　// showCursor.js で作成したイベントを引数に当たり判定のBoxを設定して処理して、このオブジェクト上にボタンを表示。
};

TriggerCollision.prototype.onTriggerLeave = function(result) {
    console.log("Collision Leave");
    this.app.fire('cursor:remove'); // showCursor.js で作成したイベントを処理してボタンが非表示に。
};

this.app.fire()は、this.app.on()で設定したイベントを呼ぶことができます。
ここでは、showCursor.js で this.app.on('cursor:set') を設定し、triggerCollision.js でthis.app.fire('cursor.set')でイベントを処理した、という処理が行われています。

スクリプトのコードが書き加えられたら、Launchで確認してみましょう。
当たり判定のオブジェクトの上にボタンが表示されていればOKです。

ここまでで、オブジェクトに当たったらボタンを表示までができました。

次は、ボタンをクリックしてDOM要素を使ってモーダルを表示してみましょう。