🗺️ React Super Tilemap

React Super Tilemap is a low-level tilemap rendering engine for React, optimized for browser performance.

Ideal for games and apps that require:

• Grid-based map rendering.
• Camera control and zooming.
• Support for animated, oversized, and offset sprites.
• Dynamic movable elements.

---

🚀 Installation

npm install react-super-tilemap
# or
yarn add react-super-tilemap

---

🧱 1. Define your sprites

API Reference: 📜 SpriteDefinition

🔹 Basic

🕹 Demo · 📄 Code

const sprites: SpriteDefinition[] = [
  {
    key: 'grass',
    imageSrc: ['path/to/grass.png'],
  },
]

🔄 Animated

🕹 Demo · 📄 Code

{
  key: 'ocean',
  imageSrc: [ocean_1, ocean_2, ocean_3, ocean_4],
  animationDelay: 400,
}

⚠️ All animation images must be the same size.

📏 Oversized

🕹 Demo

{
  key: 'building',
  imageSrc: [building_1],
  animationDelay: 800,
  size: { width: 1, height: 2 },
}

🎯 Offset

🕹 Demo

{
  key: 'selector',
  imageSrc: [selector1, selector2],
  animationDelay: 800,
  size: { width: 2, height: 2 },
  offset: { col: -0.5, row: 0.5 },
}

---

🗺️ 2. Create your tilemap

API Reference: 📜 Tilemap API

🕹 Demo

<Tilemap tilmapScheme={scheme} spriteDefinition={sprites}>
  ...
</Tilemap>

---

🎥 3. Add a camera

🔧 ManualCamera

🕹 Demo

<ManualCamera position={{ col: 0, row: 0 }} zoom={0} />

🧲 ThirdPersonCamera

🕹 Demo

<ThirdPersonCamera />

🧠 Camera Context

🕹 Demo

const { addZoomMotion } = useThirdPersonCameraContext()

---

🧍 4. Add elements

🛠 ManualElement

🕹 Demo

<ManualElement
  elementKey="unit"
  spriteKey="armyIdle"
  layer={1}
  tilePosition={{ x: 0, y: 0 }}
/>

🌀 MotionableElement

🕹 Demo

<MotionableElement
  elementKey="unit"
  spriteKey="armyIdle"
  layer={1}
  tilePosition={{ x: 5, y: 5 }}
  motionSettings={{ speed: 1, easing: 'linear' }}
/>

---

📚 Additional Resources

• 📘 Full API Documentation
• 🧪 Interactive Storybook
• 🧾 Source Code