※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります
続き）シンプルなブラウザゲームのつくり方
また、レンダリングするときは一度画面をオールクリアしてから、表示するオブジェクトをひとつずつ描画するという手順を踏みます。これを1サイクルとして、60fpsであれば1秒間に60回行います。
こうすることで、パラパラ漫画の要領でオブジェクトが動いてみるというわけです。
まずCanvas要素を生成、またはDOMから取得します。次にCanvas要素から、CanvasRendering2DContextを取得します。このContextにはCanvasの状態や、描画に必要なメソッドが含まれており、これを持ち回ってオブジェクトを描画することになります。
そして、clearRectを使って範囲指定した部分をクリアします。
矩形を描画するにはfillRect、画像を描画するにはdrawImageを使います。ただ、Canvasで簡単に描画できるのは矩形と画像だけで、多角形や円はパスを使って描いていきます。
オブジェクトをどこに描画すればよいか計算するときは、みんな大好きExcel方眼紙をつかうとかなりわかりやすくなるのでオススメです。
たとえば15個のオブジェクトからなる背景があったとして、ひとつのCanvasを使わない場合ですと、1フレームにつき背景のために15回も描画処理を行わなくてはなりません。そこで、負荷の高い描画処理を減らすためにオフスクリーンを活用します。
このオフスクリーンはメモリ上で管理しているだけですので、高負荷なブラウザへの描画処理は行いません。背景用にオフスクリーンを用意し、あらかじめ背景をレンダリングしておき、あとは毎フレーム、可視領域にあるCanvasに背景用のオフスクリーンを描画すれば、15回描画していた処理が1回だけになります。
このようにオフスクリーンを活用することでパフォーマンス向上に繋がります。
ちなみにゲームパッドに対応する場合は、Gamepad APIが使えます。
前説明したようにゲームでは1秒間に60回更新されますので、この場合は1秒間かけて右に300px動いているように見えます。
ブロック崩しゲームなど、壁にあたったオブジェクトを反射させたい場合は、壁にあたったときに速度を反転させることで実現できます。入射角と反射角を同じにするため、左右の壁に当たったらx軸方向の速度を反転させ、同様に上下の壁に当たったらy軸方向の速度を反転させます。
ただ、このままではある問題が生じます。
それは、斜めに移動したとき通常の上下左右の移動より速く動いているように見えてしまう点です。
なぜ斜めに移動したときに速く動いているように見えてしまうのかは、ピタゴラスの定理を思い出してみてください。x軸方向に+1、y軸方向に+1の速度で動いた場合、ピタゴラスの定理より斜めの移動速度が√2（約1.41）になります。そのため、斜めの移動速度は通常と比べて1.41倍速く動いているように見えるというわけです。
そのため、斜め方向に速度+1で動かすためには、x軸方向の速度とy軸方向の速度に1/√2をかけて速度を補正してあげる必要があります。
たとえばオブジェクトを反時計回りにぐるぐる回したい場合には、三角関数のcos/sinを使います。x軸にcos、y軸にsinを当てはめることで回転できます。
ただし、円周率のような小数点を含む値を使っていますので誤差が発生し、ピッタリ1や0にならないことに注意してください。
左の「重力あり」では、投げ上げの公式を使っており重力があるため、頂点でゆっくりになって、落下するときに加速していきます。ただ、我々の住む世界の重力加速度（9.8m/s^2）をそのまま使っても良いジャンプにはならないので、ゲーム用に調整する必要があります。
右の「擬似重力」ではsin関数を使っています。sinは0→1→0→-1→0のような値をとるので、プラスになる部分だけを使い、それに係数をかけることで放物線状にジャンプできます。
(self.top >= target.bottom || target.top >= self.bottom || self.left >= target.right || target.left >= self.right)となります。これは「衝突していない」ときの条件なので、「衝突している」条件に書き換えると
!(条件)になり、ド・モルガンの法則をつかって展開するとself.top < target.bottom && target.top < self.bottom && self.let < target.right && target.left < self.rightとなり、さきほどのサンプルコードと同じになります。
矩形同士の衝突判定は簡単でしたが、円オブジェクトが入ってくるとちょっとだけ難しくなります。
円と矩形が重なったと判定するためには、ピタゴラスの定理を使います。円の中心と矩形の角を頂点として直角三角形をつくって考えると、円の半径より斜辺の長さが短くなった場合、円と矩形が衝突したと判定できます。
おまけ: 「さくらのINFRA WARS」のサウンドデザイン
ここからJavaScriptと全然関係ない話をします。
実はゲーム開発の話とかはどうでもよくて、「サウンドデザイン」の話が一番伝えたかった内容ですｗ
ということで、「さくらのINFRA WARS」のサウンドデザインについてちょっとだけ話そうと思います。
もともと音響エンジニアになりたくて上京し、大学では音響効果やMA（映画やアニメーションに音をつける作業）を専攻していました。しかし、ゲームのサウンドデザインについては初挑戦だったので、自分にいくつか課題をかしました。
ひとつは、弊社は「さくらインターネット」なのでBGMはすべて「さくらさくら」のメロディをモチーフにすること。ひとつは、ファミコンは矩形波2つ、三角波1つ、ノイズ1つしか同時に発音できないので、この制約を守ること。ひとつは、ゲームの邪魔にならないけど耳に残りやすい楽しいサウンドにすることです。
すべてのBGMに「さくらさくら」のモチーフを使うため、いくつかのアレンジパターンを考えました。リズムを変える、リハーモナイズする（コードを変える）、短調から長調に移調する、モチーフを反転させるなどです。
※ 「さくらさくら」は正確には短調ではなく日本音楽で使われている陰音階
メインテーマは「さくら、さくら、やよいのそらーは」の部分をモチーフとして使用し、リズムを変えてアレンジしました。ゲーム中ずっと流れている曲ですので、曲に意識を奪われないように音を詰め込みすぎないようにしたり、サイバーなカッコいい雰囲気を出すために短調のまま利用したりしています。
ゲームオーバーは、最後の「みにゆーかん」の部分をモチーフとして使用し、sus4→sus2→マイナーで終止することでゲームオーバー時の沈む心情を表現しました。
コーヒーブレイクは、「いざや、いざや、みにゆーかん」の部分をモチーフとして使用しています。この曲はステージ間の小休止する部分で、効果音とは一緒に発音させないため、細かなシーケンスフレーズで楽しそうな雰囲気を演出しています。また、かわいいキャラクターたちが登場するのに合わせて、短調→長調に移調しています。
ゲーム中の効果音はプレイヤーの動きに依存する部分が多く、発音タイミングが予期できません。そのため、不協和音にならないBGMと同じスケール内に収まる音のみを使用しました。ですので、どんなタイミングで発音されても、音は濁らないはずです。
ファミコンには厳しい同時発音数の制約がありますが、ブラウザゲームには制約はありません。好きなだけ音を出せてしまうのです。しかし、それをしてしまうとレトロゲームの雰囲気を壊しかねません。そのため、すべての効果音に優先順位をつけ、優先度が高い効果音が発音されるときは、優先度の低い効果音を止めるなど最大同時発音数を超えないように工夫しています。
関連記事
- オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する
- Canvasに表示したオブジェクトをキーボード操作で移動させる方法
- 押しっぱなしのkeydownまたはkeypressイベントの初動をスムーズにする
- [JS]ゲーム内に重力を追加し自然なジャンプモーションを実装する（3パターンで実装）
- Canvasに表示したオブジェクトに当たり判定（衝突判定）をつける方法
以上
written by @bc_rikko
0 件のコメント :
コメントを投稿