Developer Guide

Developer Documentation

Build amazing 2D games and contribute to the open-source platform. 🚀

Setup

Game Structure

Integration

Submit PR

Tech Stack

2D Champion is built with modern web technologies to ensure great performance and developer experience:

Next.js 14

React framework with App Router

TypeScript

Type-safe development

Supabase

Authentication & database

Tailwind CSS

Utility-first styling

Development Setup

Local Environment Setup

1
Fork & Clone the Repository
git clone https://github.com/YOUR_USERNAME/2DChampion.git cd 2DChampion/web
2
Install Dependencies
npm install
3
Set Up Environment Variables
Create a .env.local file with:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
4
Run Development Server
npm run dev
Access the app at http://localhost:3000

Game Component Structure

Basic Game Template

Games should be created as React components in web/src/components/games/

'use client'

import { useEffect, useRef, useState } from 'react'

interface YourGameProps {
  gameId: string
  userId: string | null
  onScoreUpdate: (score: number) => void
}

export default function YourGame({ 
  gameId, 
  userId, 
  onScoreUpdate 
}: YourGameProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [score, setScore] = useState(0)
  const [gameOver, setGameOver] = useState(false)

  // Game logic here
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    // Your game loop
    const gameLoop = () => {
      // Update game state
      // Draw game
      requestAnimationFrame(gameLoop)
    }

    gameLoop()
  }, [])

  // Update score
  useEffect(() => {
    if (gameOver && score > 0) {
      onScoreUpdate(score)
    }
  }, [gameOver, score, onScoreUpdate])

  return (
    <div>
      <canvas 
        ref={canvasRef} 
        width={800} 
        height={600}
        className="border border-white/10 rounded-lg"
      />
    </div>
  )
}

Required Props

•
gameId - Unique identifier for the game
•
userId - Current user ID (null if not logged in)
•
onScoreUpdate - Callback to update player score

Platform Integration

Score Tracking

Call onScoreUpdate(score) when the game ends:

// When game ends
useEffect(() => {
  if (gameOver && score > 0) {
    onScoreUpdate(score)  // Automatically saves to DB
  }
}, [gameOver, score, onScoreUpdate])

Mobile Support

Add touch controls for mobile players:

•Support both keyboard and touch events
•Use responsive canvas sizing
•Test on different screen sizes

Game Assets

•Place thumbnails in web/public/
•Recommended thumbnail size: 512x512 pixels
•Use optimized image formats (WebP, PNG)

Submission Process

How to Submit Your Game

1
Create a GitHub Issue
Propose your game idea and get feedback from maintainers.
2
Build Your Game
Create your game component following the structure above.
3
Test Thoroughly
Ensure it works on desktop and mobile devices.
4
Submit Pull Request
Include in your PR:
- • Game component file
- • Thumbnail image
- • Game instructions/controls
- • Description of gameplay
5
Maintainer Review
Maintainers will review, test, and integrate your game into the database.

Best Practices

Write clean, well-commented code
Follow TypeScript best practices
Ensure game is fun and engaging
Test across different browsers
Optimize performance (60fps target)

Ready to Build?

Join our community of developers and start building amazing 2D games!

View on GitHub Propose Game Idea