revamped the collision example into a sprite benchmark example

Author: obiot

packages/examples/src/examples/benchmark/ExampleBenchmark.tsx

@@ -0,0 +1,72 @@
+import { DebugPanelPlugin } from "@melonjs/debug-plugin";
+import {
+	ScaleMethods,
+	device,
+	event,
+	game,
+	input,
+	loader,
+	plugin,
+	video,
+} from "melonjs";
+import { createExampleComponent } from "../utils";
+import { Fruit } from "./Fruit";
+import { assets } from "./assets";
+
+const FRUIT_STEP = 50;
+
+function addFruits(numberOfFruits: number, fruitType?: string) {
+	const selectedFruitType =
+		fruitType || assets[Math.floor(Math.random() * assets.length)].name;
+	for (let i = 0; i < numberOfFruits; i++) {
+		game.world.addChild(new Fruit(selectedFruitType));
+	}
+}
+
+const createGame = () => {
+	// Initialize the video.
+	if (
+		!video.init(1024, 768, {
+			scaleMethod: ScaleMethods.Flex,
+			renderer: video.AUTO,
+			transparent: false,
+		})
+	) {
+		alert("Your browser does not support HTML5 canvas.");
+		return;
+	}
+
+	// register the debug plugin
+	plugin.register(DebugPanelPlugin, "debugPanel");
+
+	// load our monster image and populate the game world
+	loader.preload(assets, () => {
+		// add some keyboard shortcuts
+		event.on(event.KEYDOWN, (_, keyCode) => {
+			// toggle fullscreen on/off
+			if (keyCode === input.KEY.F) {
+				if (!device.isFullscreen) {
+					device.requestFullscreen();
+				} else {
+					device.exitFullscreen();
+				}
+			}
+
+			if (keyCode === input.KEY.ENTER || keyCode === input.KEY.SPACE) {
+				addFruits(FRUIT_STEP);
+			}
+		});
+
+		// register on pointer down
+		input.registerPointerEvent("pointerdown", game.viewport, () => {
+			addFruits(FRUIT_STEP);
+		});
+
+		// reset/empty the game world
+		game.world.reset();
+
+		addFruits(FRUIT_STEP, "watermelon");
+	});
+};
+
+export const ExampleBenchmark = createExampleComponent(createGame);

packages/examples/src/examples/benchmark/Fruit.tsx

@@ -0,0 +1,53 @@
+import { Sprite, game, math } from "melonjs";
+
+export class Fruit extends Sprite {
+	gravity: number;
+	speedX: number;
+	speedY: number;
+
+	constructor(fruitType: string) {
+		super(
+			math.random(-15, game.viewport.width),
+			math.random(-15, game.viewport.height),
+			{
+				image: fruitType,
+			},
+		);
+
+		this.gravity = 0.9;
+		this.speedX = Math.random() * 10;
+		this.speedY = Math.random() * 10 - 5;
+		this.alwaysUpdate = true;
+	}
+
+	override update() {
+		const viewport = game.viewport;
+		const pos = this.pos;
+
+		pos.x += this.speedX;
+		pos.y += this.speedY;
+		this.speedY += this.gravity;
+
+		if (pos.x > viewport.right) {
+			this.speedX *= -1;
+			pos.x = viewport.right;
+		} else if (pos.x < viewport.left) {
+			this.speedX *= -1;
+			pos.x = viewport.left;
+		}
+
+		if (pos.y > viewport.bottom) {
+			this.speedY *= -0.85;
+			pos.y = viewport.bottom;
+			const rand = Math.random();
+			if (rand > 0.5) {
+				this.speedY -= rand * 6;
+			}
+		} else if (pos.y < viewport.top) {
+			this.speedY = 0;
+			pos.y = viewport.top;
+		}
+
+		return true;
+	}
+}

packages/examples/src/examples/benchmark/assets.tsx

@@ -0,0 +1,75 @@
+import AppleGreenPng from "./assets/Apple_Green.png";
+import AppleRedPng from "./assets/Apple_Red.png";
+import AppleYellowPng from "./assets/Apple_Yellow.png";
+import BananaPng from "./assets/Banana.png";
+import BerryPng from "./assets/Berry.png";
+import CherryPng from "./assets/Cherry.png";
+import LemonPng from "./assets/Lemon.png";
+import LimePng from "./assets/Lime.png";
+import OrangePng from "./assets/Orange.png";
+import PearPng from "./assets/Pear.png";
+import PlumPng from "./assets/Plum.png";
+import WatermelonPng from "./assets/Watermelon.png";
+
+export const assets = [
+	{
+		name: "apple_green",
+		type: "image",
+		src: AppleGreenPng,
+	},
+	{
+		name: "apple_red",
+		type: "image",
+		src: AppleRedPng,
+	},
+	{
+		name: "apple_yellow",
+		type: "image",
+		src: AppleYellowPng,
+	},
+	{
+		name: "banana",
+		type: "image",
+		src: BananaPng,
+	},
+	{
+		name: "berry",
+		type: "image",
+		src: BerryPng,
+	},
+	{
+		name: "cherry",
+		type: "image",
+		src: CherryPng,
+	},
+	{
+		name: "lemon",
+		type: "image",
+		src: LemonPng,
+	},
+	{
+		name: "line",
+		type: "image",
+		src: LimePng,
+	},
+	{
+		name: "orange",
+		type: "image",
+		src: OrangePng,
+	},
+	{
+		name: "pear",
+		type: "image",
+		src: PearPng,
+	},
+	{
+		name: "plum",
+		type: "image",
+		src: PlumPng,
+	},
+	{
+		name: "watermelon",
+		type: "image",
+		src: WatermelonPng,
+	},
+];

packages/examples/src/examples/benchmark/assets/Apple_Green.png

@@ -1,9 +1,9 @@
 import React, { type ReactElement } from "react";
 import ReactDOM from "react-dom/client";
+import "./index.css";
 import { Link, RouterProvider, createBrowserRouter } from "react-router-dom";
 import { ExampleAseprite } from "./examples/aseprite/ExampleAseprite";
-import { ExampleCollisionTest } from "./examples/collisionTest/ExampleCollisionTest";
-import "./index.css";
+import { ExampleBenchmark } from "./examples/benchmark/ExampleBenchmark";
 import { ExampleDeviceTest } from "./examples/deviceTest/ExampleDeviceTest";
 import { ExampleDragAndDrop } from "./examples/dragAndDrop/ExampleDragAndDrop";
 import { ExampleGraphics } from "./examples/graphics/ExampleGraphics";
@@ -21,9 +21,9 @@ const examples: { label: string; path: string; component: ReactElement }[] = [
 		path: "aseprite",
 	},
 	{
-		component: <ExampleCollisionTest />,
-		label: "collision test",
-		path: "collision-test",
+		component: <ExampleBenchmark />,
+		label: "Sprite benchmark",
+		path: "benchmark",
 	},
 	{
 		component: <ExampleDeviceTest />,