UI

Hiber3D works well with React and Tailwind CSS, making it easy to build UI on top of the game. The engine renders everything in a <canvas> element, and your React components sit above it in the DOM. This works seamlessly with the engine’s event-based communication

Examples

Health Bar Component

Below is a simple example of a health bar UI that listens to an in-game event (PlayerHealthChange) and updates accordingly.

import { useEffect, useState } from "react";
import { Hiber3D, useHiber3D } from "@hiber3d/web";
 
const HealthBar = () => {
  const [playerHealth, setPlayerHealth] = useState(100);
  const { api } = useHiber3D();
 
  useEffect(() => {
    const healthListener = api.onPlayerHealthChange((payload) => {
      setPlayerHealth(payload.health);
    })
 
    return () => {
      api.removeEventCallback(healthListener);
    }
  }, [api])
 
  return (
    <div className="absolute top-0 left-0 p-4">
      <div className="bg-gray-200 rounded-full w-32 h-4">
        <div
          className="bg-green-500 h-full rounded-full"
          style={{ width: `${playerHealth}%` }}
        />
      </div>
    </div>
  );
}
 
export const App = () => {
  return (
    <Hiber3D>
      <HealthBar />
    </Hiber3D>
  );
}

Common Pitfalls & Tips

• Layering: Use absolute, fixed, or z-index positioning for UI elements to ensure they overlay correctly on the game canvas.
• Access: UI components that rely on useHiber3D() must be rendered inside the <Hiber3D /> provider.
• Pointer handling: If you use pointer-events: none on overlay elements, ensure you don’t block engine input unintentionally.
• Event Cleanup: Always clean up event listeners to avoid memory leaks. Use the api.removeEventCallback method in the cleanup function of useEffect.
• Immersive features: Don’t forget to utilize Web APIs like Fullscreen API and Pointer Lock API for a more immersive experience.