日本語

English

日本語

English

外観

ブログ ·

ブラウザでピクセルアートのプラットフォーマーを作る方法 ​

プラットフォーマーは最初の 1 本の定番ですが、ちゃんと作るのは意外と大変です。ジャンプは理不尽に感じられてはいけないし、ピクセルはどの画面でもくっきりしていてほしいし、ステージもどこかから用意しなければなりません。このガイドでは、この 3 つを引き受けてくれる debuff のプラットフォーマーテンプレートを使います。あなたはステージ作りと手触りの調整に時間を使えます。

1. プラットフォーマーテンプレートから始める ​

bash
npm create debuff@latest my-platformer -- --template platformer
cd my-platformer
npm install
npm run dev

プレイヤー、コイン、タイル、一方通行の足場がそろった、遊べるステージが手に入ります。キーボード、ゲームパッド、タッチ操作も最初から動きます。

2. どの画面でもくっきりしたピクセル ​

ピクセルアートは壊れやすいものです。拡大するとぼやけてしまったり、カメラが動くと輪郭がちらついたり。debuff はピクセルアートのスプライトを整数ピクセルにスナップし、固定ステップの間でカメラを補間します。だから 60 Hz でも 120 Hz や 144 Hz のディスプレイでも、動きがなめらかなままです。

3. Tiled や LDtk でステージを作る ​

Tiled や LDtk でステージを描き、@debuffjp/tilemap で読み込みます。カリングとバッチ処理付きの描画、ソリッドタイル、着地の許容幅を持った一方通行の足場が使えるので、プレイヤーが足場の端に引っかかることもありません。

アートやステージのファイルは assets/ に置くだけです。マニフェストは自動で再生成され、実際に参照したファイルだけが出力に含まれます。

4. 気持ちいいジャンプを作る ​

プラットフォーマーの手触りの大部分は、ほんの数個の数字で決まります。テンプレートではそれをパラメータとして定義しています。

ts
const tuning = game.params.define("player", {
  gravity:    { type: "number", default: 900,  min: 100, max: 3000, units: "px/s²" },
  jumpSpeed:  { type: "number", default: 290,  min: 100, max: 600,  units: "px/s" },
  jumpCut:    { type: "number", default: 0.45, min: 0,   max: 1 },
  coyote:     { type: "number", default: 0.09, min: 0,   max: 0.3,  units: "s" },
  jumpBuffer: { type: "number", default: 0.1,  min: 0,   max: 0.3,  units: "s" },
});
  • コヨーテタイムは、足場から走り出た直後の一瞬だけジャンプを受け付けます。これがないと、プレイヤーは「ちゃんと間に合うように押した」と言い張りますし、実際その通りなのです。
  • ジャンプの先行入力は、着地の少し前に押したジャンプも有効にします。
  • ジャンプカットは、ボタンを早めに離すとジャンプを短くして、プレイヤーが高さを調整できるようにします。

` を押して開発パネルを開き、遊びながらこれらのスライダーを動かしてみましょう。行き過ぎても取り消せます。しっくりきたら、値をコードに書き戻してください。

5. うまくいったものをシナリオで固める ​

ジャンプがしっくりきたら、それを守りましょう。テンプレートには scenarios/run-and-jump.json が入っています。右に走ってジャンプし、プレイヤーが着地したことを確かめて、スクリーンショットを撮るシナリオです。

json
{ "press": "Space" },
{ "wait": 10 },
{ "expect": { "state.player.onGround": { "eq": false } } },
{ "release": "Space" },
{ "wait": 60 },
{ "expect": { "state.player.onGround": { "eq": true } } },
{ "capture": "landed" }

npx debuff scenario で実行します。実行は決定的なので、あとの変更で着地が壊れれば、ここで失敗します。

6. 公開する ​

bash
npx debuff build

出力フォルダを itch.io、GitHub Pages、Cloudflare など、好きな静的ホストにアップロードしましょう。

見下ろし型がお好みなら ​

見下ろし型アドベンチャーのスターターには --template mossfell を試してみてください。