Skip to content

Neuer Kurs Zeichnen, Character Design & Pixelart für Handy und PC (LRN-24) - #23

Open
hernstev97 wants to merge 3 commits into
mainfrom
feat/lrn-24-drawing-pixelart-course
Open

hernstev97 wants to merge 3 commits into
mainfrom
feat/lrn-24-drawing-pixelart-course

Conversation

@hernstev97

Copy link
Copy Markdown
Owner

Neuer Bereich Zeichnen, Character Design & Pixelart (/pixelart) für LRN-24: 14 Module, 178 Übungen, 47 Karten, 53 Glossarbegriffe, vier Projekte mit Abschlussprojekt, Spickzettel und Berufsseite. Der Kurs setzt keine Zeichenerfahrung, kein Tablett und keinen Kauf voraus. Er beginnt mit Papier, Handy und Maus und führt bis zu einem eigenen, zusammenpassenden Asset-Set für eine Top-down-Begegnung.

Was drin ist

Track Module Ort
Sehen und Formen Beobachten, Messen und Referenzen · Grundkörper, Perspektive und Draufsicht · Figur, Geste und Proportion · Licht, Schatten und Tonwerte alle unterwegs
Pixel für Pixel Pixel-Editor einrichten (PC) · Linien, Kurven und Cluster (unterwegs, Karopapier) · Farbe, Rampen und Paletten (unterwegs) · Schattieren, Dithering, Textur (PC) gemischt
Figuren entwerfen Silhouette und Formensprache (unterwegs) · Pose und Ausdruck im Standbild (unterwegs) · Vom Entwurf zum Sprite (PC) · Ansichten, Maßstab und große Kreaturen (PC) gemischt
Umgebung und Asset-Set Umgebung und Tiles (PC) · Prüfen, überarbeiten, dokumentieren (unterwegs) gemischt
  • Unterwegs (9 Module): Beobachten, Silhouetten, Tonwertstudien, Referenzanalyse und Pixel auf Karopapier. Alle Lektionen und Übungen gehen bei 360 px, Schreibaufgaben haben wenige Sätze. Am PC (5 Module): die Arbeit im Editor.
  • Werkzeuge: Jeder Bedienschritt nennt Pixelorama 1.2.3 oder LibreSprite 1.3 neben Aseprite 1.3.18.6, für Skizzen Krita 5.3. Die Installation unter CachyOS steht im Editor-Modul. Aseprite selbst zu kompilieren ist nach EULA §2(g) für den eigenen Gebrauch erlaubt.
  • Kreative Arbeit: 38 practice-Aufgaben, die kreativen davon als prose ohne Musterlösung, mit überprüfbaren Checklisten statt Geschmacksurteilen. Nichts schlägt Figuren, Gegner oder Stil für Delicate Flower vor.
  • KI-Regel: Sie steht im Kurs, in Projekten und Karten. KI darf nur technische Arbeit beschleunigen. Jede Zeichnung, Palette und jedes Tile ist eigene Arbeit, generierte Bilder sind weder Vorlage noch Ersatz.
  • Anschlüsse: Import, Pixelraster, TileMap und SpriteFrames werden auf den Godot-Kurs verlinkt (/godot/…, PR Neuer Kurs Godot 4 für Gestaltung & 2D-Prototypen mit Screenshots aus Editor und Spiel (LRN-23) #22). Bewegung, Timing und Schlüsselposen übergibt der Kurs ausdrücklich an den Animationskurs (LRN-25). Kampflesbarkeit verweist auf /combat, Erzählen über Umgebung auf /narrative.
  • Abschlussprojekt: Ein Art-Test eines kleinen Studios. Geliefert werden Spielfigur in vier Richtungen, Gegner, große Kreatur, Tiles und Requisiten mit gemeinsamer Palette, dazu ein Mockup und ein Entscheidungsprotokoll mit zwei dokumentierten Überarbeitungen. Neun Abnahmekriterien, zwölf Meilensteine.

Entscheidungen

  • Bereich, Farbe, Reihenfolge: Bereichs-ID pixelart, Farbe #FFC6A8 (Apricot, im Handbuch als frei geführt), order: 13. Neuer Kurs Godot 4 für Gestaltung & 2D-Prototypen mit Screenshots aus Editor und Spiel (LRN-23) #22 belegt #B5E3FF und 12.
  • Bildunterstützung: Sie kommt als unveränderter Commit 7ef59f9 aus Neuer Kurs Godot 4 für Gestaltung & 2D-Prototypen mit Screenshots aus Editor und Spiel (LRN-23) #22 („Bilder in Lektionen und Übungen“). git range-diff zeigt ihn als identisch. Wird Neuer Kurs Godot 4 für Gestaltung & 2D-Prototypen mit Screenshots aus Editor und Spiel (LRN-23) #22 zuerst gemergt, fällt der Commit hier beim Rebase weg und umgekehrt.
  • Eigene Schaubilder aus Code: tooling/pixelart-figures.ts erzeugt 33 PNG-Abbildungen von zusammen rund 150 KB. Sie sind deterministisch und bei 330 px lesbar. Gezeigt werden Prinzipien wie Läufe, Cluster, Rampen, Licht, Silhouetten aus Grundformen und eine neutrale Gliederpuppe, keine Figuren oder Assets. Bilder Dritter sind nur verlinkt.
  • Pixel als Textraster: In Übungen stehen Pixel als text-Blöcke (# + - ., höchstens 16 Pixel breit). So lassen sich bei bug fehlerhafte Pixelreihen anklicken, ohne neue Übungsart. Das Handbuch beschreibt das unter „Kurse ohne Code“.
  • Python nur, wo es echt hilft: In farbe-paletten und lesbarkeit-pruefen rechnet ein kleines Programm die relative Leuchtdichte und das Kontrastverhältnis nach WCAG. verify führt es aus. Sonst sind Vorhersagen Zahlen wie Lauflängen, Kopfeinheiten, Maßstab und Faktoren.
  • Arbeitsweise: Zwei Recherche-Agenten haben Quellen und Werkzeugversionen geprüft, drei Autoren-Agenten je vier Module geschrieben. Die Module linien-cluster, lesbarkeit-pruefen und alle Bereichsdateien stammen von mir. Zwei unabhängige Reviewer haben 53 Befunde gemeldet, alle sind eingearbeitet. Darunter waren zwei falsch zugeordnete Zitate, eine falsch markierte Option, Rechenfehler in Erklärungen und Bilder, die nicht zum Text passten.
  • README: Die Bereichsliste nennt jetzt auch Erzählhandwerk, das dort fehlte.

Überschneidungen mit offenen PRs

Prüfungen

  • pnpm content:check pixelart ohne Hinweis. Der Gesamtcheck meldet nur die 11 bestehenden Hinweise aus narrative.
  • pnpm verify pixelart: 6 Prüfungen, 0 fehlgeschlagen.
  • pnpm lint, pnpm typecheck, pnpm test (330 Tests), pnpm bear:check und pnpm build. Die Chunk-Warnung (Suchindex > 4 MB) gibt es auf main schon (4,4 MB).
  • pnpm links pixelart: 178 URLs, 0 Probleme. Nicht automatisch prüfbar sind Drawabox (bis etwa 23.10. offline nach einem Sicherheitsvorfall, 429), ArtStation Magazine und itch.io (403 für Bots, über die Wayback Machine gelesen).
  • E2E learning-paths für pixelart: alle Lektionen und Seiten, je eine Übung pro Art gelöst, Entwürfe und Abschlussprojekt.
  • Im Browser durchgeklickt, auch mobil. Alle 14 Lektionen, Karten, Projekt, Spickzettel, Glossar und Beruf liefen bei 360 px ohne seitliches Überlaufen und ohne Konsolenfehler. Alle 178 Übungen wurden bei 360 px per Skript mit den hinterlegten Antworten gelöst, jede mit „Richtig.“.
  • Schaubilder neu erzeugt: byte-gleich zu den eingecheckten.
Handy: Bereich Handy: Lektion mit Schaubild Handy: bug mit Textraster
Lernpfad bei 360 px: Modul „Beobachten, Messen und Referenzen“ mit Marke Unterwegs Lektion Linien, Kurven und Cluster bei 360 px mit dem Schaubild der Steigungen A bis D Übung „Der Bogen hat einen Buckel“: Zeilen 2 und 3 des Pixelrasters markiert, Rückmeldung Richtig
Handy: kreative Aufgabe ohne Musterlösung Desktop: Bereichsseite
Praxisaufgabe „Drei Proben im Bus“: Textfeld und Checkliste zur Selbstkontrolle, kein Lösungsknopf Bereichsseite in Apricot mit 14 Modulen, 178 Übungen und 27 Stunden Lernzeit

Desktop: Lektion Ansichten, Maßstab und große Kreaturen mit dem Schaubild zur Pixeldichte, A Kreatur verdoppelt, B in voller Auflösung

Offen

  • CI-E2E: Der Viewport-Test scheitert auch auf main (LRN-31). Er ist hier nicht behoben.
  • Drawabox: Die Links bitte nach dem 23.10. einmal mit pnpm links pixelart nachprüfen.
  • Nicht geprüft habe ich die Werkzeuge selbst. Bedienschritte stammen aus der offiziellen Doku von Aseprite, Pixelorama und Krita, einzelne Menüpfade aus Aseprites gui.xml. LibreSprite hat keine eigene Doku, dort steht nur „ähnelt dem alten Aseprite“.

🤖 Generated with Claude Code

hernstev97 and others added 3 commits October 22, 2026 09:39
Markdown-Bilder `![Alt](/media/…png "Unterschrift")` werden zu Abbildungen:
Breite und Höhe liest der Build aus der PNG-Datei, damit die Seite beim Laden
nicht springt; `…@2x.png` zeigt halb so viele CSS-Pixel. Ein Bild ist nie
breiter als die Spalte, ein Tipp öffnet es in voller Größe zum Zoomen. Ein
Bild allein im Absatz bekommt seinen Titel als Bildunterschrift.

content:check meldet fehlende Dateien, Bilder außerhalb von public/media/
und fehlende Alt-Texte als Fehler. Der Service Worker legt PNG-Dateien aus
public/ schon beim Installieren ab, die Bilder gehen also offline. vercel.json
nimmt /media/ von der Umleitung auf index.html aus, wie /assets/ und /fonts/.

Anlass ist LRN-23: Die Godot-Module sollen unterwegs Screenshots aus Editor
und Spiel diagnostizieren. Das Handbuch beschreibt Ablage, Alt-Text, Größe
und Prüfung.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
tooling/pixelart-figures.ts zeichnet 33 Abbildungen nach
public/media/pixelart/<modul>/<name>@2x.png: Läufe und Steigungen,
Doppelpixel, Cluster, Banding, Kantenglättung, Licht auf einer Kugel,
Wertegruppen, Farbrampen, Graustufen gleicher Leuchtdichte, Dithering,
Konturen, Silhouetten aus Grundformen, eine neutrale Gliederpuppe in
Proportionen, Posen und Ansichten, Pixeldichte, Kachelnähte und eine
Kontrastprobe im Mockup.

Jede Abbildung zeigt ein Prinzip, keine fertige Figur und kein
Spielasset; die Kreatur ist aus Ellipsen ohne Art gebaut. Der
Generator schreibt PNG selbst (indiziert, zlib aus Node), braucht
keine Abhängigkeit und ist deterministisch: ein erneuter Lauf ergibt
dieselben Bytes. Alle Bilder sind bei 330 CSS-Pixeln lesbar, zusammen
rund 150 KB, und gehen über den Precache offline.

Aufruf: node tooling/pixelart-figures.ts

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Neuer Bereich /pixelart: 14 Module in vier Tracks, 178 Übungen
(choice 31, order 14, output 40, gap 14, bug 27, explain 14,
practice 38), 47 Interview-Karten, 53 Glossarbegriffe, vier Projekte
mit Abschlussprojekt, Spickzettel und Berufsseite. content:check ohne
Hinweis, verify mit 6 Prüfungen, 178 externe Links ohne Fehler.

- Sehen und Formen (unterwegs): Beobachten und Messen, Grundkörper und
  3/4-Draufsicht, Figur und Proportion, Licht und Tonwerte.
- Pixel für Pixel: Editor einrichten (PC), Linien, Kurven und Cluster
  (unterwegs, Karopapier und Textraster), Farbe, Rampen und Paletten
  (unterwegs, Leuchtdichte nach WCAG in Python), Schattieren, Dithering
  und Textur (PC).
- Figuren entwerfen: Silhouette und Formensprache, Pose und Ausdruck im
  Standbild (beide unterwegs), vom Entwurf zum Sprite, Ansichten,
  Maßstab und große Kreaturen (beide PC).
- Umgebung und Asset-Set: Tiles, die Figuren tragen (PC), Prüfen,
  überarbeiten, dokumentieren (unterwegs).

Keine Vorkenntnisse, kein Tablett, kein Kauf: Bedienschritte nennen
Pixelorama 1.2.3 oder LibreSprite 1.3 neben Aseprite 1.3.18.6, Krita
5.3 für Skizzen. Kreative Aufgaben sind prose ohne Musterlösung, mit
überprüfbaren Checklisten. KI-Regel im Kurs und im Abschlussprojekt:
jede Zeichnung, Palette und jedes Tile stammt vom Lernenden.
Godot-Import, Pixelraster und TileMap werden auf /godot (PR #22)
verlinkt, Bewegung und Timing dem Animationskurs (LRN-25) übergeben.

Pixel stehen in Übungen als Textraster (# + - .), ein bug lässt die
fehlerhafte Reihe anklicken; das Handbuch beschreibt das unter „Kurse
ohne Code“. Farbe #FFC6A8, order 13. README nennt jetzt auch den
Bereich Erzählhandwerk, der dort fehlte.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Oct 22, 2026

Copy link
Copy Markdown

Important

  • 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 67c82780-bdf3-48d6-88bc-e1fafd3829f8
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant