feat(examples): waterOverworld — debug panel + arrow-key controls

- register @melonjs/debug-plugin (press "S" to toggle), like the other
  examples and the original demo build
- arrow keys as movement aliases: ←/→ walk, ↑ jump (alongside A/D/W)
- controls hint updated

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019t8kP8vp58ZrvaD2FqJU6A

Author: obiot

packages/examples/src/examples/waterOverworld/ExampleWaterOverworld.tsx

@@ -30,9 +30,9 @@ export const ExampleWaterOverworld = () => {
 				borderRadius: 4,
 			}}
 		>
-			A/D move · W jump · hold Shift to run — the pond refracts the scene via{" "}
-			<code>screen_texture</code> / <code>screen_uv</code> /{" "}
-			<code>noise_uv</code>
+			A/D or ←/→ move · W/↑ jump · hold Shift to run · S toggles the debug panel
+			— the pond refracts the scene via <code>screen_texture</code> /{" "}
+			<code>screen_uv</code> / <code>noise_uv</code>
 		</div>
 	);
 };

packages/examples/src/examples/waterOverworld/entities.ts

@@ -244,8 +244,11 @@ export class Male extends me.Sprite {
 		this.body.setFriction(0.5, 0);
 
 		me.input.bindKey(me.input.KEY.A, "left");
+		me.input.bindKey(me.input.KEY.LEFT, "left");
 		me.input.bindKey(me.input.KEY.D, "right");
+		me.input.bindKey(me.input.KEY.RIGHT, "right");
 		me.input.bindKey(me.input.KEY.W, "jump", true);
+		me.input.bindKey(me.input.KEY.UP, "jump", true);
 		me.input.bindKey(me.input.KEY.SHIFT, "runLock");
 
 		this.alwaysUpdate = true;
@@ -294,8 +297,11 @@ export class Male extends me.Sprite {
 
 	override onDeactivateEvent() {
 		me.input.unbindKey(me.input.KEY.A);
+		me.input.unbindKey(me.input.KEY.LEFT);
 		me.input.unbindKey(me.input.KEY.D);
+		me.input.unbindKey(me.input.KEY.RIGHT);
 		me.input.unbindKey(me.input.KEY.W);
+		me.input.unbindKey(me.input.KEY.UP);
 		me.input.unbindKey(me.input.KEY.SHIFT);
 	}
 }

packages/examples/src/examples/waterOverworld/game.ts

@@ -3,7 +3,8 @@
  * Copyright (C) 2011 - 2026 AltByte Pte Ltd — MIT License.
  * See `packages/examples/LICENSE.md` for full license + asset credits.
  */
-import { loader, state, video } from "melonjs";
+import { DebugPanelPlugin } from "@melonjs/debug-plugin";
+import { loader, plugin, state, video } from "melonjs";
 import { registerEntities } from "./entities";
 import { WaterOverworldStage } from "./play";
 
@@ -49,6 +50,9 @@ export const createGame = () => {
 		return;
 	}
 
+	// register the debug plugin (press "S" to toggle the panel)
+	plugin.register(DebugPanelPlugin, "debugPanel");
+
 	registerEntities();
 
 	loader.preload(resources, () => {