MetaCreators · AdityaRaj-007 · Dec 30, 2024
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,13 +14,16 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",
+    "phaser": "^3.87.0",
+    "phaser-matter-collision-plugin": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/matter-js": "^0.19.8",
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,11 @@
+import { Game } from "./metaverse/Game";
 import VirtualSpace from "./pages/VirtualSpace";
 
 function App() {
   return (
     <div>
       <VirtualSpace />
+      {/* <Game /> */}
     </div>
   );
 }

diff --git a/src/assets/back.png b/src/assets/back.png
diff --git a/src/assets/front.png b/src/assets/front.png
diff --git a/src/assets/idle.png b/src/assets/idle.png
diff --git a/src/assets/left.png b/src/assets/left.png
diff --git a/src/assets/map/FinalTileSet.jpeg b/src/assets/map/FinalTileSet.jpeg
diff --git a/src/assets/map/TileSet.jpeg b/src/assets/map/TileSet.jpeg
diff --git a/src/assets/map/map.json b/src/assets/map/map.json
diff --git a/src/assets/right.png b/src/assets/right.png
diff --git a/src/metaverse/Game.tsx b/src/metaverse/Game.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+import { Game as PhaserGame } from "phaser";
+import { GameConfig } from "./main";
+
+export const Game = () => {
+  const gameRef = useRef<PhaserGame | null>(null);
+
+  useEffect(() => {
+    if (!gameRef.current) {
+      gameRef.current = new PhaserGame(GameConfig);
+    }
+
+    return () => {
+      gameRef.current?.destroy(true);
+      gameRef.current = null;
+    };
+  }, []);
+
+  return (
+    <div
+      id="game-container"
+      className="absolute"
+      style={{
+        width: "3000px",
+        height: "3000px",
+        backgroundImage:
+          "linear-gradient(#ddd 1px, transparent 1px), linear-gradient(90deg, #ddd 1px, transparent 1px)",
+        backgroundSize: "50px 50px",
+        left: "-1500px",
+        top: "-1500px",
+      }}
+    />
+  );
+};
diff --git a/src/metaverse/main.ts b/src/metaverse/main.ts
@@ -0,0 +1,49 @@
+import { AUTO, Scale, Types } from "phaser";
+import { Boot } from "./scenes/Boot";
+import { MainMenu } from "./scenes/MainMenu";
+import { Preloader } from "./scenes/Preloader";
+import PhaserMatterCollisionPlugin from "phaser-matter-collision-plugin";
+
+// Extend Phaser's GameConfig type to include our custom plugin
+interface GameConfigWithPlugins extends Types.Core.GameConfig {
+  plugins: {
+    scene: Array<{
+      plugin: typeof PhaserMatterCollisionPlugin;
+      key: string;
+      mapping: string;
+    }>;
+  };
+}
+
+export const GameConfig: GameConfigWithPlugins = {
+  type: AUTO,
+  backgroundColor: "#000000",
+  scale: {
+    mode: Scale.FIT,
+    autoCenter: Scale.CENTER_BOTH,
+    width: 2992,
+    height: 3352,
+    parent: "game-container",
+    // zoom: 2,
+  },
+  scene: [Boot, Preloader, MainMenu],
+  physics: {
+    default: "matter",
+    matter: {
+      debug: true,
+      gravity: { x: 0, y: 0 },
+    },
+  },
+  plugins: {
+    scene: [
+      {
+        plugin: PhaserMatterCollisionPlugin,
+        key: "matterCollision",
+        mapping: "matterCollision",
+      },
+    ],
+  },
+  input: {
+    keyboard: true,
+  },
+};
diff --git a/src/metaverse/scenes/Boot.ts b/src/metaverse/scenes/Boot.ts
@@ -0,0 +1,39 @@
+import { Scene } from "phaser";
+import leftSprite from "../../assets/left.png";
+import rightSprite from "../../assets/right.png";
+import upSprite from "../../assets/back.png";
+import downSprite from "../../assets/front.png";
+import idleSprite from "../../assets/idle.png";
+
+export class Boot extends Scene {
+  constructor() {
+    super("Boot");
+  }
+
+  preload() {
+    this.load.spritesheet("left", leftSprite, {
+      frameWidth: 64,
+      frameHeight: 64,
+    });
+    this.load.spritesheet("right", rightSprite, {
+      frameWidth: 64,
+      frameHeight: 64,
+    });
+    this.load.spritesheet("up", upSprite, {
+      frameWidth: 64,
+      frameHeight: 64,
+    });
+    this.load.spritesheet("down", downSprite, {
+      frameWidth: 64,
+      frameHeight: 64,
+    });
+    this.load.spritesheet("idle", idleSprite, {
+      frameWidth: 64,
+      frameHeight: 64,
+    });
+  }
+
+  create() {
+    this.scene.start("Preloader");
+  }
+}