JavaScriptでゲームを作ろう！ハンズオン！参加してみた。【イベント】#0001

こんにちは！こーたろーです。

本日は、PlayCanvasさん主催の「JavaScriptでゲームを作ろう！ハンズオン」に参加してみました。

Pythonをやる傍らでJavaScriptも勉強していきます。

駆け出しエンジニアというわけではないのですが、ネットワーキングの一環として、イベントに積極的に参加していきたいと考えています。

ということで、本年度１回目のイベント参加です。

内容としては、

コミュニティの紹介(https://playcanvas.jp/joincommunity)

アカウント作成(PLAYCANVAS | 日本公式サイト)

JavaScript基礎知識

ゲーム開発の基礎知識

ハンズオン

といったものでした。

今回は、PlayCanvasさんが提供しているゲーム制作プラットフォームの「PlayCanvas」を使用しました。
Web上でコーディングができるプラットフォームで、ゲーム制作までは無料で楽しめます。
リリースしたらどうのこうのというのがありましたが、取り敢えず会員登録してログインしました。

JavaScript初心者向けにチュートリアルをみんなでやるような形でした。

私はというと、JavaScriptをやる一方で、ゲーム開発の基礎も教えてもらえるので、ちょっと興味がありました。

【ゲーム開発の３大要素】

- レンダリング
2D/3Dの要素を画面に表示する要素。
- インスタンシング
ゲームのオブジェクトを複製したり消去したりする要素。
- メインループ
常に一定の回数で処理を繰り返す要素。

ほうほう。初めて聞いたな。。。（汗

【Web開発との違い】
　　
- イベントドリブンとループドリブン

Web開発では「フォームが入力されたら」「Submitが押されたら」などイベントに応じて処理を実行していくイベントドリブンが主流。ゲーム開発では毎フレーム(1秒間に60回など)この処理を実行する　といったループドリブンに、「敵に衝突したら」「マウス入力があったら」などイベントドリブンを組わせて開発していく。

- レンダリング

Web開発ではHTMLを生成することをレンダリングと呼ぶことが多い(SSRなど)。ゲーム開発では3次元情報から光学的な計算プロセスを経て2Dデータを作成しターゲットのピクセル列に正しく画素を当てはめていくことをレンダリングと呼ぶ。

チュートリアルがあり、それを動かしていきます。※全７ページ
チュートリアル - PlayCanvasの基本操作 2020 - 1/7 – PlayCanvas

f:id:dsf-kotaro:20210208165920p:plain

このようなゲームが表示されます。

戦車で砲撃して、UFOを倒すものらしい。。。

ということで、戦車で球を打つScriptを記述していきます。

【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);
};

スペースキーを押すと、弾を打つコードを付加しました。

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

【enemy.js】：敵（UFO）の挙動を制御

var Enemy = pc.createScript('enemy');

// initialize code called once per entity
Enemy.prototype.initialize = function() {
    //衝突判定のイベントを設定
    this.entity.collision.on("triggerenter", this.death, this);
};

// update code called every frame
Enemy.prototype.update = function(dt) {
    //回転する力を加える
    this.entity.rotate(0,1,0);
};

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

Enemy.prototype.death = function(result){
    console.log(result);
    if(result &&
       result.name === "bullet"){
          //衝突したコリジョンを持った相手の名前が"bullet"だったら
          this.entity.destroy();//自分自身をdestroy
          result.destroy();//衝突した相手をdestroy
      }
};