Skip to content
BranchesTags

Repository files navigation

Pixel Character Creator 2D

Ein browserbasiertes Pixel-Art-Tool zum Zeichnen, Animieren und Exportieren von 2D-Charakteren.

Optimiert für iPad + Apple Pencil · Vanilla JS · Docker-ready · Keine Dependencies

License: MIT Docker Vanilla JS PRs Welcome

Features · Quick Start · iPad-Nutzung · Architektur · Contributing

Features

Zeichenwerkzeuge

  • Stift — Pixel-genaues Zeichnen mit einstellbarer Brush-Größe (1–4px)
  • Radierer — Pixel löschen
  • Fülleimer — Flood-Fill-Algorithmus
  • Linie — Bresenham-Linien in Echtzeit
  • Rechteck — Pixel-perfekte Rechtecke
  • Kreis — Bresenham-Kreise
  • Auswahl — Bereich auswählen
  • Verschieben — Canvas verschieben (Pan)
  • Pipette — Farbe aufnehmen
  • Spiegel-Modus — Symmetrisches Zeichnen entlang der Y-Achse

Farbsystem

  • Integrierter Color-Picker mit Alpha/Deckkraft-Regler
  • Primär- & Sekundärfarbe mit Schnellwechsel (X)
  • 30+ vordefinierte Pixel-Art-Farben
  • Eigene Farben zur Palette hinzufügen
  • Rechtsklick zum Entfernen von Palettenfarben

Ebenen-System

  • Unbegrenzte Ebenen pro Frame
  • Sichtbarkeit ein/ausschalten
  • Deckkraft pro Ebene (0–100%)
  • Ebenen zusammenfügen (Merge Down)
  • Ebenen-Reihenfolge anpassbar

Animation

  • Frame-basierte Timeline
  • Echtzeit-Vorschau mit einstellbaren FPS (1–60)
  • Frames duplizieren
  • Onion Skinning — Vorherige/nächste Frames halbtransparent anzeigen
  • Loop-Wiedergabe

Export & Projekte

  • PNG Export — Einzelframe mit wählbarer Skalierung (1x–16x)
  • Spritesheet — Alle Frames als Spritesheet-Atlas
  • Animiertes GIF — Komplette Animation als GIF (eigener Encoder, keine Library)
  • Projekt speichern/laden — JSON-Format, alle Frames + Ebenen + Palette

iPad & Touch

  • Apple Pencil — Volle Pointer-Events-Unterstützung mit Druckempfindlichkeit
  • Pinch-to-Zoom — Zwei-Finger-Zoom auf Touch-Geräten
  • Responsive UI — Angepasst für iPad-Bildschirmgrößen
  • Kein ungewolltes Scrolling oder Zooming des Browsers

Sonstiges

  • Undo/Redo — 50 Schritte History
  • Zoom — 1x bis 32x, Mausrad oder Pinch
  • Pixel-Grid — Ein-/ausschaltbar, automatisch ab 4x Zoom
  • Live-Vorschau — Schwebendes Vorschau-Fenster mit skalierbarer Ansicht
  • Canvas-Größen — 16×16, 32×32, 64×64, 128×128 oder frei wählbar (bis 512×512)
  • Tastaturkürzel — Vollständige Shortcut-Unterstützung

Quick Start

Voraussetzungen

Installation & Start

# Repository klonen
git clone https://github.com/DEIN-USERNAME/pixel-character-creator-2d.git
cd pixel-character-creator-2d

# Container starten
docker compose up -d

# Öffne http://localhost:8080

Stoppen

docker compose down

Neu bauen (nach Änderungen)

docker compose up -d --build

📱 iPad & Apple Pencil

  1. Gleiche Netzwerk: iPad und Server müssen im selben WLAN sein
  2. IP-Adresse finden: Auf dem Server hostname -I ausführen
  3. Safari öffnen: http://<SERVER-IP>:8080 eingeben
  4. Zum Home-Screen hinzufügen: Teilen → "Zum Home-Bildschirm" für App-Feeling

Tipp: Die App unterstützt apple-mobile-web-app-capable — als Web-App auf dem Home-Screen läuft sie im Vollbild ohne Safari-UI.

Tastaturkürzel

Taste Aktion
B Stift (Brush)
E Radierer
G Fülleimer
L Linie
R Rechteck
C Kreis
S Auswahl
V Verschieben
I Pipette
M Spiegel-Modus
X Primär-/Sekundärfarbe tauschen
[ / ] Brush-Größe kleiner/größer
Ctrl+Z Rückgängig
Ctrl+Shift+Z Wiederholen

Architektur

Siehe ARCHITECTURE.md für die vollständige technische Dokumentation.

Projektstruktur

pixel-character-creator-2d/
├── Dockerfile                 # Nginx Alpine Container
├── docker-compose.yml         # Container-Orchestrierung
├── nginx.conf                 # Webserver-Konfiguration
├── LICENSE                    # MIT License
├── README.md                  # Diese Datei
├── CONTRIBUTING.md            # Beitragsrichtlinien
├── CHANGELOG.md               # Versionshistorie
├── docs/
│   └── ARCHITECTURE.md        # Technische Architektur
└── src/                       # Website-Dateien
    ├── index.html             # Haupt-HTML mit vollständiger UI
    ├── css/
    │   └── style.css          # Responsive Styling, Dark Theme
    └── js/
        ├── utils.js           # Hilfsfunktionen (Bresenham, FloodFill, Farbkonvertierung)
        ├── history.js         # Undo/Redo-System (Snapshot-basiert)
        ├── layer.js           # Ebenen-Management (CRUD, Compositing)
        ├── drawing.js         # Zeichen-Engine (Pointer Events, Brush, Shapes)
        ├── tools.js           # Werkzeug-Definitionen & Shortcuts
        ├── animation.js       # Frame-System (Timeline, Onion Skinning)
        ├── export.js          # Export (PNG, Spritesheet, GIF-Encoder, Projekt-IO)
        ├── ui.js              # UI-Rendering (Canvas, Panels, Overlays)
        └── app.js             # Haupt-App (State, Event-Binding, Init)

Technologie-Stack

Komponente Technologie
Frontend Vanilla JavaScript (ES5-kompatibel), HTML5 Canvas, CSS3
Backend Nginx Alpine (nur statische Dateien)
Container Docker + Docker Compose
Abhängigkeiten Keine — Zero Dependencies

Design-Prinzipien

  • Keine Dependencies — Kein npm, kein Webpack, kein Framework
  • Self-Contained — Alles in einem Docker-Container
  • Pixel-Perfect — image-rendering: pixelated überall
  • Touch-First — Pointer Events API für Stylus + Touch + Maus
  • Performant — requestAnimationFrame, minimale DOM-Updates
  • Privacy — Alles lokal, keine externen Requests

Nutzung

Neues Projekt erstellen

  1. Klicke auf ☰ Menü → Neu erstellen
  2. Wähle eine Vorlage oder gib eine eigene Größe ein
  3. Klicke Erstellen

Character zeichnen

  1. Wähle den Stift ✏️ (oder drücke B)
  2. Wähle eine Farbe aus der Palette oder dem Color-Picker
  3. Zeichne auf dem Canvas — jeder Pixel zählt!
  4. Nutze den Spiegel-Modus 🪞 (M) für symmetrische Charaktere
  5. Füge Ebenen hinzu für separate Körperteile (z.B. Kopf, Körper, Waffe)

Animation erstellen

  1. Zeichne den ersten Frame deines Charakters
  2. Klicke + Frame in der Timeline
  3. Aktiviere Onion Skinning 🧅 um den vorherigen Frame durchscheinen zu sehen
  4. Zeichne die nächste Pose
  5. Klicke ▶ Play und stelle die FPS ein
  6. Exportiere als GIF oder Spritesheet

Exportieren

  • Einzelbild: Export-Button → Skalierung wählen → Herunterladen
  • Spritesheet: ☰ Menü → Spritesheet exportieren
  • Animation: ☰ Menü → Als GIF exportieren
  • Projekt sichern: ☰ Menü → Projekt speichern (JSON)

🐳 Docker-Konfiguration

Ports ändern

In docker-compose.yml:

ports:
  - "3000:80"    # Statt 8080 nun Port 3000

HTTPS (Produktion)

Für HTTPS empfehlen wir einen Reverse-Proxy wie Traefik oder Caddy vor dem Container.

Ohne Docker

Die App benötigt nur einen statischen Webserver:

# Mit Python
cd src && python3 -m http.server 8080

# Mit PHP
cd src && php -S localhost:8080

Contributing

Beiträge sind willkommen! Siehe CONTRIBUTING.md für Details.

Schnell-Einstieg für Contributors

# Fork & Clone
git clone https://github.com/DEIN-USERNAME/pixel-character-creator-2d.git
cd pixel-character-creator-2d

# Starten
docker compose up -d

# Änderungen machen...
# Neu bauen
docker compose up -d --build

# PR erstellen

Roadmap

  • Touch-Gesten für Ebenen-Neuordnung (Drag & Drop)
  • Benutzerdefinierte Paletten importieren/exportieren (.gpl, .ase)
  • Tilemap-Editor-Modus
  • Skelett-Animation (Bone-basiert)
  • Kollaboratives Zeichnen (WebSocket)
  • PWA mit Offline-Support
  • Pixel-Art-spezifische Filter (Outline, Shadow, Dithering)
  • Referenzbild-Overlay
  • Animationsvorschau im Spritesheet-Format

Lizenz

Dieses Projekt ist unter der MIT License lizenziert — frei für private und kommerzielle Nutzung.

Danksagung

Erstellt mit ❤️ für die Pixel-Art-Community

⬆ Nach oben

About

Ein browserbasiertes Pixel-Art-Tool zum Zeichnen, Animieren und Exportieren von 2D-Charakteren.

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages