開発の裏側:Mario.Game Adventureができるまで

Mario.Game Adventureは、ゲームエンジンも画像ファイルも音声ファイルも使わない、JavaScriptファイル1つだけでできています。ここではその作り方を紹介します。

コードで描くドット絵

スプライトはすべて、ソースコード上で色を表す文字の並びとして定義するか、小さな図形描画ルーチンで描いています。対象は、小さい姿と大きい姿の主人公、Walker、ノコノコ、トゲゾー、パックンフラワー、ボス、ブロック、雲、お城などです。ゲームの起動時に、これらをオフスクリーンのキャンバスに一度だけ描き込み、あとは毎フレーム画面にコピーします。ワールドごとに専用のパレットがあり、同じレンガでも、地下では青、夜は氷のような色、城の中ではグレーに変わります。

昔ながらの感触の物理演算

platformerの出来は、動かしたときの感触で決まります。主人公には、歩きと走りで別々の速度があり、加速と減速があります。方向転換するときにはしっかりブレーキ(スキッド)がかかり、ジャンプの高さも可変です。ジャンプボタンを押し続けて上昇している間は、重力が弱くなります。調整の目安は、走りジャンプなら3タイル分の穴を余裕で越えられ、歩きジャンプでは届かないことにしました。こうすると、走ることが身につける価値のあるテクニックになります。詳しくは移動ガイドをご覧ください。

8つのステージ、4つのテーマ

各ワールドでは、それぞれ1つの主なアイデアを取り上げています。

1. ワールド1 — 基本編:土管、穴、パワーアップ、そして天井の低い洞窟です。
2. ワールド2 — 踏めないトゲゾーと、雲の上で初めて登場する動くリフトです。
3. ワールド3 — すべてを組み合わせた夜のステージと、底なしの崖にかかる木のてっぺんです。
4. ワールド4 — 敵だらけの要塞の道と、ファイアバー、溶岩、ボスが待つお城です。

全ステージをプレイするボット

すべてのステージをクリアできるように、テスト用のボットを作りました。ボットは無敵状態で各ステージを進み、壁や穴の前でジャンプします。途中で詰まったら、その場所を調べました。1ピクセル分ジャンプが高すぎる場所や、届かないブロックが見つかったことが何度もあり、そのたびにステージを修正しました。さらにすべてのブロックについてジャンプの高さをチェックして、見つけられた限りの到達不可能な場所をつぶしました。

Web Audioで鳴らす音楽

サウンドトラックは、ブラウザのWeb Audio APIを使う小さなシーケンサーがリアルタイムに生成しています。メロディとベースには矩形波と三角波、ドラムにはノイズを使っています。ワールドごとにオリジナルの曲があり、パワーアップ、ゴールのフラッグ、ゲームオーバー、フィナーレ用のジングルも用意しました。タイマーが100になるとテンポが上がります。お約束どおりの演出です。

さっそく遊んでみよう

Mario.Game Adventureを遊ぶ。行き詰まったら、攻略ガイドもチェックしてみてください。