Earthquake (screen shake)

Project Story: Orbball Arena 🔮⚔️

💡 What Inspired Us

When we entered the hackathon, we had two main goals: we wanted to make a game, and we were told to push the MeDo platform to its limits. We didn't want to build just another standard web app or basic 2D clicker. Instead, we aimed for a real-time, competitive, high-action experience.

This led to the creation of Orbball Arena: a fast-paced, 1v1 third-person 3D Online Multiplayer Football x Recycling Education game. The core fantasy is a "duel football with body physics" experience where players race, dash, block, and tackle each other to shoot a glowing energy orb into the opponent's goal. We wanted the gameplay to feel tight and responsive, testing the boundaries of what browser-based multiplayer games can achieve within the MeDo environment.

🏗️ How We Built It

We structured the project around a compact, tightly-looped arena game to keep state synchronization manageable but highly interactive. The development broke down into a few main pillars:

The Visualization: We used React Three Fiber (R3F) to render our 3D arena. This allowed us to build out the Arena, Player, Orb, and spectacular interactive VFX entirely within a React-driven ecosystem.
The Physics: To make the game feel heavy and arcade-responsive, we integrated Rapier (via @react-three/rapier). We specifically avoided "hard attaching" the ball to the player. Instead, the orb is a dynamic rigid body controlled through physics impulses, "soft possession" bounds, dashes, and deflections.
The Networking & State: A competitive 1v1 physics game requires immediate input response. We separated our state layers using Zustand. A transient, high-frequency store (matchStore / useGameStore) handles the simulation ticks, positions, and dash cooldowns without triggering expensive React re-renders, while a lower-frequency store (useUIStore) handles the HUD, scoreboards, and menus.
The MeDo Platform Integration: We leveraged MeDo-specific plugins and real-time backend synchronization boundaries, keeping authority centralized to validate scores and prevent cheating.

⚠️ Challenges We Faced

Building a 3D real-time multiplayer physics game in a weekend hackathon is extremely tough.

Network Sync & Physics Reconciliation: Ensuring that the orb's physics behave predictably on both clients when collisions happen was tricky. Desyncs are common in fast web games, so we had to tune the client-side prediction and server-authoritative scoring models.
Input Feel vs. Reality: Making the "dash tackle" and "soft possession" mechanics feel satisfying required heavy iteration. If the orb responds too strictly to physics, it feels chaotic. If it's too controlled, it stops feeling like a physics game.
React + Three.js Performance: React is great for UI but managing high-frequency 60+ FPS game ticks via React state can destroy performance. We had to carefully manage our Zustand subscriptions and keep physics calculations outside the main React render cycle.
Pushing MeDo: Running high-tick WebSocket networking and heavy Rapier physics calculations pushed the capacity of the provided MeDo template to its peak.

🧠 What We Learned

High-Frequency React State: We learned the absolute necessity of bypassing standard React rendering for game loops. Leveraging Zustand's transient updates allowed us to map 3D transforms successfully without component thrashing.
Multiplayer Physics Nuance: We discovered that treating player collisions as "stun and displacement" loops with ~300ms recovery windows makes multiplayer interactions feel drastically more fair compared to raw continuous physics bumping.
Platform Limits: By aiming high (3D, physics, real-time networking), we learned exactly what the browser and MeDo constraints are, forcing us to become better at optimization and clever client-side prediction.

🛠️ Built With

This project was an ambitious blend of web UI, 3D rendering, and physics:

Framework: React 19, TypeScript, and Vite.
3D & Graphics: Three.js, React Three Fiber (R3F), Drei, React Spring, React Three Postprocessing.
Physics Engines: Rapier (@react-three/rapier), Matter.js.
State Management: Zustand.
Database & Auth: Supabase.
Styling & UI: Tailwind CSS, Framer Motion, GSAP, Radix (via UIKit/Lucide).
Platform: MeDo Platform.