Boxがジャンプする処理を作る
Root EntityにADD COMPONENTでScriptを追加し、「jumpfire.js」を作成し登録します。
jumpfire.js のコードを以下に書き換えます。
var Jumpfire = pc.createScript('jumpfire');
Jumpfire.prototype.initialize = function() {
var self = this;
self.app.on("jump", function(targetEntity){ // イベント作成
if(targetEntity.tags._list.includes("move")) return; // targetEntityにTagsに「move」が入っているかif文
targetEntity.tags.add("move"); // targetEntityのTagsに「move」追加
self.tPosition = targetEntity.getLocalPosition(); // targetEntityのPositionを変数に
var targetPos = { // targetEntityのPositionを保管
x: self.tPosition.x,
y: self.tPosition.y,
z: self.tPosition.z
};
var changePos = { // targetEntityのジャンプするPositionを保管
x: self.tPosition.x,
y: self.tPosition.y+1,
z: self.tPosition.z
};
// ↓ TweenでPositionをTweenさせる処理
targetEntity.tween(targetEntity.getLocalPosition()).to(changePos, 0.2, pc.SineOut).on("complete", function(){
targetEntity.tween(targetEntity.getLocalPosition()).to(targetPos, 0.1, pc.SineOut).on("complete",function() {
targetEntity.tags.remove("move"); // Tweenが終わったらTagsのmoveを削除
}).start();
}).start();
});
};
ここでTweenを使用しているので、PlayCanvasのTweenライブラリが必要です。
以下からtween.jsをダウンロードしてPlayCanvasにインポートします。
https://developer.playcanvas.com/en/tutorials/tweening/
jumpfire.js で作成したイベントを hoverMove.js のconsole.logが記載していた場所に書き換えます。
onMouseMove を以下に書き換えます。
HoverMove.prototype.onMouseMove = function(ev) {
var farClip = this.entity.camera.farClip; // カメラのfarClipの設定(Editorから設定可能)
var nearClip = this.entity.camera.nearClip; // カメラのnearClipの設定(Editorから設定可能)
this.entity.camera.screenToWorld(ev.x, ev.y, nearClip, this.rayStart); // 平面座標から3D空間へ座標を変換しRaycastの始まりの座標を作成
this.entity.camera.screenToWorld(ev.x, ev.y, farClip, this.rayEnd); // 平面座標から3D空間へ座標を変換しRaycastの終わりの座標を作成
// ↓ ここでレイキャストの処理を書いているよ
this.result = this.app.systems.rigidbody.raycastFirst(this.rayStart, this.rayEnd); // 作成した座標を元に当たり判定を持つEntityとぶつかったか結果を出す
if (this.result) { // raycastの結果が出ているか
var hitEntity = this.result.entity; // Raycastで取得したEntity
this.app.fire("jump", hitEntity); // jumpfireイベント
}
};
これでLaunchを確認してみましょう。
マウスオーバーでBoxがジャンプしているのが確認できたら完成です!
おつかれさまです。
ついでにPublishをしてしまいましょう。
Publishしてみる
左のメニューからPublishメニューを表示します。
PublishとDownload Zipとありますが、左のPublishをクリックします。
※Download ZipではPublishするデータをzipでダウンロードができ、自身のサーバーにホスティングすることが可能です。
Publishではtitleやdiscriptionなどheadタグに関連した項目を入力することができます。
入力ができたら一番下のPublish Nowをクリック
PublishするとBuilds画面に移り、PlayCanvas側のサーバーに自動的にホスティングされ発行されたURLが取得できます。
これだけでPublish完了です。
PlayCanvasはブラウザ上で開発からPublishまで行えるので他ツールを右往左往することがないので、とてもスッキリしています。
本チュートリアルはここまでで終わりです。
おつかれさまでした。
これより先は本チュートリアルの「3DコンテンツをWebページの背景に使うには」といったおまけになっています。
興味あれば次ページもご覧ください。
コメント
0件のコメント
サインインしてコメントを残してください。