※こちらのチュートリアルは古いチュートリアルとなっています。最新版は「PlayCanvasの基本操作編2020」からご確認ください！

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

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

playCanvasはPrefabの機能を持っていませんが、"Template"という考え方があるので、それで実装します。

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

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

// 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(){
    //弾を発射する
    var bul = this.bulletTemplate.clone();//bulletTemplateのクローンを作成し変数bulに格納
    var pos = this.entity.getPosition();//タンクの座標を取得
    bul.setName("clone");//bulのNameをcloneに設定
    this.app.root.addChild(bul);//rootの子オブジェクトとして追加
    bul.setLocalPosition(pos.x,pos.y+0.5,pos.z);//bulの位置をタンクの座標に合わせる
    bul.enabled = true;//bulを有効化
};

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/

shot.jsのattribute(属性)に"bulletTemplate"という値をentity型で追加します。

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

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

HIERARCHYからbulletをbulletTemplateにドラック＆ドロップし、適用させます。

Templateの元になっているbulletは必要ないので、INSPECTORのENTITY内のEnabledのチェックをはずします。

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

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

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

戦車の向いている方向は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_baseを探してlookAtForをthis.lookatforに代入する
    this.lookatfor = this.app.root.findByName("Tank_base").lookAtFor;
};

// 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) {
    
};

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/

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