PlayCanvasとTween.jsを使用して、設置したピンが押されたときにピンの位置にカメラを移動させます。
まず実行結果はこちらになります。
（ブラウザで実行できます）
https://playcanv.as/p/ZsHC33Oc/
Tween.jsについてはこちらを使用しています。使用する場合には、こちらからtween.jsをダウンロードし、プロジェクトに追加してください。
https://github.com/playcanvas/playcanvas-tween
ピンを設置
こちらがPlayCanvasのプロジェクトです。このプロジェクトはCameraにはFlyCameraの設定がされているプロジェクトになります。
- Elementコンポーネント
- Buttonコンポーネント
- Scriptコンポーネント
この3つのコンポーネントを持ったエンテティを作成します。
Elementコンポーネント
Elementコンポーネントを追加し設定を行います。今回は、マウスでクリックされた際にボタンの反応をさせるためにUse Inputにチェックを入れます。
- 画面上にピンとして表示させたい画像をElementコンポーネントの
Textureに設定 -
Width,Heightの大きさを設定（画像をアップロードした場合、そのままテクスチャの解像度が設定されますのでそちらを表示させたい大きさに変更) -
Use Inputを有効にする
Buttonコンポーネント
Buttonコンポーネントの設定をします。HoverやPressedのTint Colorをここで設定することができます。
-
Imageプロパティに自身のエンテティを設定します。
Scriptコンポーネント
下記のpin.js、を適用し、ピンがクリックされた際に移動、常にカメラを向き続ける処理の機能を追加します。
-
pin.jsを保存
const Pin = pc.createScript('pin');
Pin.attributes.add("camera", {type: "entity"}) // CameraをAttributeとして設定
Pin.prototype.initialize = function() {
//ボタンがクリックされたらthis.moveの関数を呼び出す
this.entity.button.on(pc.EVENT_MOUSEUP, this.move, this)
this.entity.button.on(pc.EVENT_TOUCHSTART, this.move, this)
};
Pin.prototype.move = function(){
//tweenを使用してカメラを移動させる
const {x, y, z} = this.entity.getPosition().scale(1.2) //ピンの位置を取得
const cameraPosition = this.camera.getLocalPosition() // カメラの位置を取得
const tween = this.camera.tween(cameraPosition).to({x, y: cameraPosition.y, z}, 2, pc.QuinticIn) // カメラの位置からピンの位置へ移動
tween.start() // tween開始
}
Pin.prototype.update = function() {
this.entity.lookAt(this.camera.getPosition()); // ピンを常にカメラを向き続ける
this.entity.rotateLocal(0, 180, 0); // LookAtでは逆向きになっているので反転させる
}
- Parseボタンをクリックしスクリプトの更新をします
- cameraの
Attributesに移動させるカメラを追加します。
このような形でクリックされた場所にカメラを移動させることができます。
https://playcanv.as/p/ZsHC33Oc/
- PlayCanvasのコードエディターでes6に対応する
- Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
- PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む
- React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
- PlayCanvasのエディター上でHTML, CSSを組み込む方法
- 【iOS13】新しくなったWebVRの使い方
PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！