⇒ 動作確認はこちらからどうぞ。
Sキーでゲームスタート、← →キーで移動、スペースキーでミサイル発射です。
以前、作成したレーダースコープのようなゲームを作成します。
Contents
自機を作成する
まず自機を作成します。
最初にプロパティとコンストラクタを示します。
コンストラクタ内では画像をdataURLに変換した文字列からスプライトを作成してSpriteに格納しています。それと同時に描画する位置の設定をおこなっています。Y座標とZ座標は固定でX座標だけが変わります。
dataURLに変換した文字列はここからダウンロードしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class Jiki { Radius: number = 1.0; static SpriteMaterial: THREE.SpriteMaterial = null; Sprite: THREE.Sprite = null; constructor() { if (Jiki.SpriteMaterial == null) Jiki.SpriteMaterial = this.GetMaterial(DataURLs.dataURL_Jiki); this.Sprite = new THREE.Sprite(Jiki.SpriteMaterial); // 描画位置の設定 this.Sprite.position.x = 0; this.Sprite.position.y = 0; this.Sprite.position.z = this.Z; // 常に18 // 半径なので2倍にする this.Sprite.scale.set(this.Radius * 2, this.Radius * 2, this.Radius * 2); this.IsDead = false; } } |
Spriteマテリアルを取得するための関数です。
|
1 2 3 4 5 6 7 8 9 |
class Jiki { GetMaterial(dataURL: string): THREE.SpriteMaterial { let img = new Image(); img.src = dataURL; var texture = new THREE.Texture(img); texture.needsUpdate = true; return new THREE.SpriteMaterial({ map: texture }); } } |
シーンに自機を追加します。sceneは別のところで作成します。
|
1 2 3 4 5 |
class Jiki { AddScene() { scene.add(this.Sprite); } } |
自機の移動に関する関数とプロパティを示します。Jiki.XとJiki.Zに値をいれるとスプライトが移動させることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class Jiki { Move(x) { this.X = x; } set X(value: number) { this.Sprite.position.x = value; } get X() { return this.Sprite.position.x; } get Z() { return 18; } } |
自機が死亡したときにJiki.IsDead = true;とすれば非表示にできます。Jiki.IsDead = false;とすれば復活させることができます。
|
1 2 3 4 5 6 7 8 9 |
class Jiki { set IsDead(value: boolean) { this.Sprite.visible = !value; } get IsDead() { return !this.Sprite.visible; } } |
自機から発射された弾丸を作成する
自機から弾丸を発射させ、これを描画するクラスを作成します。
コンストラクタとプロパティを示します。やっていることはJikiクラスとあまり変わりません。JikiBurretsのなかに生成した弾丸を追加していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
class JikiBurret { Radius: number = 0.3; static SpriteMaterial: THREE.SpriteMaterial = null; Sprite: THREE.Sprite = null; static JikiBurrets: JikiBurret[] = []; constructor(x, z) { if (JikiBurret.SpriteMaterial == null) JikiBurret.SpriteMaterial = this.GetMaterial(DataURLs.dataURL_JikiBurret); this.Sprite = new THREE.Sprite(JikiBurret.SpriteMaterial); this.Sprite.position.x = x; this.Sprite.position.y = 0; this.Sprite.position.z = z; this.Sprite.scale.set(this.Radius * 2, this.Radius * 2, this.Radius * 2); } GetMaterial(dataURL: string): THREE.SpriteMaterial { let img = new Image(); img.src = dataURL; var texture = new THREE.Texture(img); texture.needsUpdate = true; return new THREE.SpriteMaterial({ map: texture }); } // 新しく生成した弾丸を追加する static Add(burret: JikiBurret) { JikiBurret.JikiBurrets.push(burret); scene.add(burret.Sprite); } } |
弾丸を移動させる関数とプロパティを示します。弾丸はまっすぐに飛び、Z座標が0.5ずつ小さくなっていきます。-16より小さくなったら弾丸を描画するのをやめます。シーンからremoveしてJikiBurret.JikiBurretsからも外します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
class JikiBurret { Move() { this.Z -= 0.5; if (this.Z < -16) this.Dead(); } set X(value: number) { this.Sprite.position.x = value; } get X() { return this.Sprite.position.x; } set Z(value: number) { this.Sprite.position.z = value; } get Z() { return this.Sprite.position.z; } // 弾丸を死んだことにしてシーンと配列から取り除く Dead() { scene.remove(this.Sprite); JikiBurret.JikiBurrets = JikiBurret.JikiBurrets.filter(burret => burret != this); } } |
MoveAll関数はJikiBurret.JikiBurretsに格納されている弾丸をまとめて移動させます。RemoveAll関数はシーンと配列のなかからすべてのオブジェクトを取り除きます。
|
1 2 3 4 5 6 7 8 9 10 |
class JikiBurret { static MoveAll() { JikiBurret.JikiBurrets.forEach(burret => burret.Move()); } static RemoveAll() { JikiBurret.JikiBurrets.forEach(burret => scene.remove(burret.Sprite)); JikiBurret.JikiBurrets = []; } } |
