2023 ソフトウェア設計及び演習用の班Wiki

ゲームの画面を表示し、プレイヤーの操作を反映させるモジュール

• game_easy.js
• game_normal.js
• game_difficult.js
• engine_copy.js

TextLabel extends Actor

Actorを作るクラス

Titleはタイトル表示用のActor

class Enemy5 extends SpriteActor

背景を表示させる

Bullet extends SpriteActor

毎フレームspeedだけ進んで、画面外に行くと破棄される。

Fighter extends SpriteActor

Fighterは自機になるActorである。キーボード入力を受け取り動くことができる。

画面外に移動できないようにして、スペースキーを押すと弾を撃てるようにする。

画面外からの押し戻しを簡単にするため、移動の仕組みを変更している。押し戻しは、移動距離を巻き戻すだけ。

スペースキーで弾を撃てるようにしたが、インターバルを取り入れている。単に「押したから撃つ」にすると毎フレーム発射されて、秒間60発も撃ってしまうからである。

Fighter2 extends SpriteActor

Fighter2はHPを持つActorである。

HPは難易度によって異なる。

’かんたん’はHPが30、’ふつう’はHPが25、’むずかしい’はHPが20になっている。

敵の弾に当たるとHPが減る。

HPが0になったら消える。

EnemyBullet extends SpriteActor

Fighter（自機）に当たったら消えるようにする。

EnemyBulletクラスは初期座標とX軸・Y軸の速度が与えられると、その方向に向かって動く。画面外に出た時に消える処理を実装した。また、タグenemyBulletを割り当てておく。

FireworksBullet extends EnemyBullet（game_difficult.jsのみ）

Fighter（自機）に当たったら消えるようにする。

EnemyBulletクラスは初期座標とX軸・Y軸の速度が与えられると、その方向に向かって動く。画面外に出た時に消える処理を実装した。また、タグenemyBulletを割り当てておく。

弾は花火のように広がるように実装した。

Enemy extends SpriteActor

EnemyクラスはHPを持つ。

体力は難易度ごとに異なる。

’かんたん’のHPは130、’ふつう’のHPは150、’むずかしい’のHPは200である。

HPが減ったときにchangehpイベントを発火しておく。これはHPバーで利用するため。

HPが0になったら消える。

Enemy2 extends SpriteActor

弾を撃てるようにする。

Enemy自身も動くようにする。

難易度によって弾の発射方向や速度は変更してある。

Enemy3、4、6〜9 extends SpriteActor

Enemy2 extends SpriteActorとほぼ同様。

弾の発射方向や速度はそれぞれ異なる。

EnemyHpBar extends Actor

長方形を描画し、敵のHPが変わったら長さを変える。

fighter2HpBar extends Actor

長方形を描画し、自身のHPが変わったら長さを変える。

DanmakuStgMainScene extends Scene

DanmakuStgMainSceneはメインとなるシーンで、Fighter、Enemy、背景を追加する。

DanmakuStgTitleScene extends Scene

DanmakuStgTitleSceneはタイトル画面のシーンで、Titleを追加し、update時にスペースキーが押されたらメイン画面に移行する。

DanamkuStgGame extends Game

タイトル画面を作りシーンを変更する

Rectangle

座標と幅・高さ、当たり判定を実装したクラス。

ゲームを制作する上で重要な要素である矩形、javaではこのクラスがないため自作する必要がある。

Sprite

2Ｄゲームを作る時に不可欠なスプライトクラス

1枚の画像と、範囲を表すRectangleオブジェクトを受け取る。

＊スプライト：ゲームで使われる2D画像のこと

AssetLoader

画像を読み込んで、名前をつけて格納しておくだけのクラス。

読み込んだアセットはgetメソッドで取り出すことができる。

EventDispatcher

addEventListenerでコールバック関数を登録し、dispatchEventでイベントを発火（コールバック関数を実行する）させる。

GameEvent

EventDIspatcherから発火させるイベント用のクラス

Actor extends EventDispatcher

座標と当たり判定とタグを持つ。

タグは当たり判定などのときに使い、ゲームを動かす上で必須ではないので初期値は空になっている。

Actorクラスは毎フレームupdateメソッドが呼び出され、ゲーム情報と入力を受け取って、いろいろな動きをする。メソッドが空なのは、各Actorごとに挙動が異なるからである。実際に使用するときは、Actorを継承したクラスを作り、updateメソッドをオーバーライドする。

renderメソッドは描画処理で、このメソッドもActorごとに描画処理が異なるから空である。

spawnActorは他のActorを発生させるときに使用する。ですがActor自身が他のActorの管理をすることはできないため、単にspawnactorイベントを発生させるだけにして、実際の処理は他のクラスに任せている。

destroyも同様に自身を破棄するメソッドであるが、自身を消すことはできないので、イベントだけ発生させてより上位のクラスに実際の処理を任せる。

SpriteActor extends Actor

スプライトなActorであるクラス

Actorと異なるのは、スプライトを持つため幅・高さを持つこと、具体的なrenderメソッドを記述できることである。

オーバーライドしたrenderメソッドでは、canvasのdrawImageメソッドを使って自身を描画する。

isOutOfBoundsメソッドはRectangleオブジェクトの外であるかどうかを判定することができる。SpriteActorクラスでは座標と幅と高さがわかっているため、「Rectanlgeの外か否か」の処理が簡単にできる。

Input

キー入力を保持するだけのクラス

このクラスのオブジェクトがActorのupdateメソッドに渡される。

前回のキー入力と現在のキー入力を保持する。

押下しているかどうかを判定をするgetKeyメソッド、キーを押し込んだかどうかを判定するgetKeyDownメソッド、キーを話したかどうかを判定するgetKeyUpメソッドがある。

InputReceiver

実際にキー入力を検知してInputクラスを生成するクラス

ブラウザ上でキーを押すと、keydownイベント、keyupイベントが発生し、それを受け取って記録する。

getInputメソッドが呼び出されると、前回の入力と現在の入力を使って、Inputオブジェクトを作る。

Scene extends EventDispatcher

Actorをまとめあげるクラス

Actorたちを保持する（追加・削除）

Actorたちを更新する

当たり判定を処理する

Actorたちのイベントを処理する

addメソッドでシーンにActorを追加できる。追加されたActorのspawnactorイベントとdestroyイベントを監視しておき、spawnactorイベントが発生した場合はシーンにActorを追加、destroyイベントが発生した場合はそのActorを削除する。

changeSceneメソッドはSceneを変更するが、Scene自身がSceneを変更することはできないため、Actorのときと同じようにイベントだけ発生させて、実際の処理は他のクラスに任せる。

updateメソッドではシーンに登録されているActor全てを更新し、当たり判定を行い、描画する。

当たり判定処理は単純な総当り方式を使用している。

GameInformation

ActorやSceneのupdateに渡すゲーム情報クラス

Game

メインループを持つクラス

Gameクラスのループが始まるとSceneのupdateメソッドが呼びだされ、Sceneは各Actorのupdateを呼び出し……という仕組みでゲーム全体が動く。

メインループにはrequestAnimationFrameを利用している。これは次のフレームの描画タイミングのとき1回だけコールバック関数を呼び出してくれるものである。1回だけなので毎回呼び出す必要がある。

メインループ内ではfps制限をかけている。通常requestAnimationFrameは60fpsで実行されるが、例えば120Hzのモニタを使っていると120fpsで実行される可能性があり、倍速で動いてしまう。そのため、制限をかけている。