チュートリアル - PlayCanvasでプッシャーゲームを作る 3/7

現在のシーンについて

現在のプロジェクトを確認するには、▶のLaunchをクリックし起動します。

ハンズオン プロジェクトの中身について

ハンズオンのプロジェクトの中身には予めエンテティが（Coin, Field, Castle, Camera)が配置されています。アセットにはこのハンズオンで使用するアセットが入っています。このハンズオンではハンズオン資料内のアセットを使用します。

3-1 Pusherエンティティを配置

Assetsの中に、テンプレート化されたPusherというエンティティがあります。こちらをシーン上に配置します。「ASSETS」 -> 「ハンズオン資料」 -> 「3」 -> 「3-1」にあるPusherというテンプレートをシーン上にドラッグアンドドロップします。

ドラッグアンドドロップをすると、テンプレート化されていたエンティティがヒエラルキーに追加されシーン上に配置されます。

位置の調整

エンティティの位置を調整します。

インスペクター上からPositionを下記の値に変更します。

x:0, y:1.3, z:0

これでPusherの配置をすることができました。

次にこのPusherをスクリプトを使用して動かします。

スクリプトの追加

Pusherエンティティにコンポーネントを追加します。

「ADD COMPONENT」 -> 「SCRIPT」を追加

Pusher.jsを追加

次にScriptコンポーネントにPusher.jsという、Pusherを動かすスクリプトを追加します。

① ADD SCRIPTをクリック

② Pusherを追加

Pusher.js

Pusher.jsでは、エンティティの位置を移動する処理を記述しています。予め、プロジェクト内に追加しているtweenライブラリを使用して記述をしています。

initialize内でtween.yoyo(true).loop(true).start();としてループをする処理を記述しPusherの動きを開始しています。この処理では1.5秒毎にz方向の移動を繰り返す処理となっています。

class Pusher extends pc.ScriptType {
  initialize(){
    const {x, y, z} = this.entity.getLocalPosition();
    const tween = this.entity.tween(this.entity.getLocalPosition()).to({x:x , y: y, z: 1}, 1.5, pc.Linear);
    tween.yoyo(true).loop(true).start();
  }
}

pc.registerScript(Pusher);

 

3-2 クリックでコインを生成してシーン上に配置

①ヒエラルキーから「ハンズオンシーン」を選択

 

②coin-pusher.jsのスクリプトを追加

スクリプトを適用するためにまず、「ADD COMPONENT」をクリックし「Script」を追加します。

次に、「ADD SCRIPT」をクリックし「coin-pusher.js」を追加します。

coin-pusher.js

追加した、coin-pusher.jsの中身はこちらです。

class CoinPusher extends pc.ScriptType {
  initialize() {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPress, this);
  }
  createCoin(x, y) {
    const coin = this.Coin.resource.instantiate();
    coin.setLocalPosition(x, y, 0);
    this.app.root.addChild(coin);
  }
  onPress(event){
    const {x, y} = event;
    const position = this.Camera.camera.screenToWorld(x, y, this.Camera.getPosition().z);
    this.createCoin(position.x, position.y);
  }
}

pc.registerScript(CoinPusher);
CoinPusher.attributes.add("Coin", { type: "asset", assetType:"template" }); 
CoinPusher.attributes.add("Camera", { type: "entity" });

this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPress, this);でタッチをされたときの処理を記述しています。createCoinでアセット内のテンプレートをインスタンス化しヒエラルキーに追加をする処理を記述しています。また、タッチされた画面の位置の取得にはクリックをされた場所とカメラコンポーネントの位置を使用してscreenToWorld関数にてPlayCanvas上の座標へ変換をしています。また、CoinPusher.attributes.add...としているスクリプト属性の部分についての解説はこちらをご覧ください。

 

スクリプト属性をエディタから追加

スクリプトから複製するためのコインをエディタ上で設定することができます。

 

①「ハンズオン資料」->「3-1」->「Coin」の中にあるコインを選択し、ドラッグアンドドロップで「スクリプト属性」に「Coin」を追加します。

 

②次に、カメラもスクリプトから使用するのでヒエラルキーにあるCameraを選択し、「スクリプト属性」に「Camera」を追加します。

3-3 フィールドに触れたコインを消す

次には、フィールドに触れた場合にコインを消す処理を追加します。

①ヒエラルキーから「Field」-> 「Floor」を選択し、「ADD COMPONENT」-> 「Script」を追加

 

②「ADD SCRIPT」をクリックし「Floor」を追加します。

 

floor.js

このスクリプトでは、起動時にthis.entity.collision.on('triggerenter', this.onTriggerEnter, this);を指定し、コインと床が触れた場合に発火する処理を記述しています。onTriggerEnter内では床に触れた対象(target)のエンティティを削除するための処理を記述します。

 

class Floor extends pc.ScriptType {
  initialize() {
    this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
  }

  onTriggerEnter(target){
    target.destroy();
  }
}

pc.registerScript(Floor);

 

これで床に触れるとコインが消えるようになりました。

次はコインの増減の機能を追加します。

 

チュートリアル - PlayCanvasでプッシャーゲームを作る

• チュートリアル - PlayCanvasでプッシャーゲームを作る 1/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 2/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 3/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 4/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 5/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 6/7
• チュートリアル - PlayCanvasでプッシャーゲームを作る 7/7