チュートリアル - PlayCanvasの基本操作 2020 - 5/7 – PlayCanvas

「戦車から弾を発射する」

キーボード入力が取得できて、弾のEntityが作成できたので、次はその二つを結び付けます。

PlayCanvasにはtemplateという機能(UnityでいうPrefab機能)があるので、bulletのテンプレートを作成し、スクリプトからインスタンシングします

shot.jsを以下のように書き換えます。

var Shot = pc.createScript('shot');
Shot.attributes.add("bulletTemplate",{type:"asset",assetType: 'template'});

// initialize code called once per entity
Shot.prototype.initialize = function() {
    
};

// update code called every frame
Shot.prototype.update = function(dt) {
    if(this.app.keyboard.wasPressed(pc.KEY_SPACE)){
        //Spaceキーを押したら
        this.shot();
    }
    
};

// swap method called for script hot-reloading
// inherit your script state here
Shot.prototype.swap = function(old) {
    
};

Shot.prototype.shot = function(){
    // //弾を発射する
    
    //bullet のテンプレートからインスタンスを作成
    var instance = this.bulletTemplate.resource.instantiate();
    //rootの子に加える
    this.app.root.addChild(instance);
};

shot.jsのattribute(属性)に"bulletTemplate"という値をasset型、template タイプで追加します。

保存後、Game EditorからTank_baseのSCRIPTSコンポーネントのshot.jsのParseボタンを押します。

するとshot.jsの属性にasset型でbulletTemplateが追加されます。

続いて、bulletエンティティをスクリプトから複製できるようにテンプレート化します。

ヒエラルキーからbulletを選択し、右クリックしてTemplate > New Template　をクリックします

するとAsset欄に「bullet」というテンプレートが作成されます

このアセットがEntityのテンプレートとなります。

テンプレートが作成できたら、shot.jsに先ほど追加されたbullet templateの項目に、作成したテンプレートをドラッグ＆ドロップでアタッチします。

実行後、スペースキーを押すと、戦車の位置から一方向に弾が発射されることが確認できます。

「向いている方向に弾を撃つ」

戦車の向いている方向にたまを撃つような処理を記述して行きます。

戦車の向いている方向はTank_base(entity).lookAtForにvec3型であらかじめ以下のように格納されています。

Tank_base

-> lookAtFor

-> x : -0.7938…

-> y : 0

-> z : 0.6081…..

この値を利用して弾の進行方向を変更します。

bullet.jsを開き、以下のように書き換えます。

var Bullet = pc.createScript('bullet');

// initialize code called once per entity
Bullet.prototype.initialize = function() {
    //tankの情報を取得
    var tank = this.app.root.findByName("Tank_base");
    //Tank_baseを探してlookAtForをthis.lookatforに代入する
    this.lookatfor = tank.lookAtFor;
    
    //タンクの座標を取得
    var tankPosition = tank.getLocalPosition();
    this.entity.setLocalPosition(tankPosition.x,tankPosition.y+0.5,tankPosition.z);//bulの位置をタンクの座標に合わせる
};

// update code called every frame
Bullet.prototype.update = function(dt) {
    //向いている方向に飛ばす
    this.entity.translate(this.lookatfor);
};

// swap method called for script hot-reloading
// inherit your script state here
Bullet.prototype.swap = function(old) {
    
};

保存して実行すると、向いている方向に弾が発射されることが確認できると思います。