From 25546c51460ce71c5cefd78e7d929b3255291aa3 Mon Sep 17 00:00:00 2001 From: Steven Hernandez Date: Thu, 22 Oct 2026 06:44:17 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Bilder=20in=20Lektionen=20und=20=C3=9Cbunge?= =?UTF-8?q?n,=20offline=20verf=C3=BCgbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- HANDBUCH.md | 14 ++++++++++++++ src/styles/content.css | 6 +++++- tooling/content.test.ts | 28 +++++++++++++++++++++++++++- tooling/content.ts | 2 ++ tooling/markdown.ts | 40 +++++++++++++++++++++++++++++++++++++++- vercel.json | 2 +- 6 files changed, 88 insertions(+), 4 deletions(-) diff --git a/HANDBUCH.md b/HANDBUCH.md index aea57cea..cf9902be 100644 --- a/HANDBUCH.md +++ b/HANDBUCH.md @@ -240,6 +240,20 @@ lesson: | Tabellen (GFM) sind erlaubt und im Spickzettel ausdrücklich erwünscht. +### Bilder + +Screenshots und Abbildungen gehören dorthin, wo Text nicht reicht: ein Editor-Dock, das man wiedererkennen soll, ein Spielbild mit einem Darstellungsfehler, den man diagnostiziert. Sie gehen in Lektionen und in allen Markdown-Feldern der Übungen. + +```markdown +![Inspektor eines Sprite2D mit Filter Linear: die Figur ist verwaschen](/media/godot/pixelraster/filter-linear@2x.png "Godot 4.7.2, Filter Linear, vierfach skaliert") +``` + +- **Ablage:** nur PNG unter `public/media///`. Der Service Worker legt alle PNG-Dateien aus `public/` beim Installieren ab, Bilder gehen also offline. Halte sie klein (Pixelart und Editor-Ausschnitte als PNG mit wenigen Farben, meist unter 100 KB). +- **Alt-Text ist Pflicht** und beschreibt, was zu sehen ist, auch das, worauf es ankommt. Der Titel in Anführungszeichen wird zur Bildunterschrift; nenne dort Quelle und Version. +- **Größe:** Der Build liest Breite und Höhe aus der Datei, damit die Seite beim Laden nicht springt. Eine Datei `…@2x.png` hat doppelt so viele Pixel, wie sie anzeigt, und bleibt auf hochauflösenden Displays scharf. Ein Bild ist nie breiter als die Textspalte; ein Tipp öffnet es in voller Größe zum Zoomen. Gestalte Bilder für Unterwegs-Module deshalb so, dass sie bei 330 px Breite lesbar bleiben: lieber einen Ausschnitt als den ganzen Bildschirm. +- **Prüfung:** `content:check` meldet fehlende Dateien und fehlende Alt-Texte als Fehler. Bilder von außerhalb (`https://…`) sind nicht erlaubt: Sie gingen offline nicht und könnten verschwinden. +- Ein Bild allein in einem Absatz wird eine Abbildung mit Unterschrift; mitten im Text erscheint es als Block ohne Unterschrift. + ## 7. Übungen Gemeinsame Felder aller Übungen: diff --git a/src/styles/content.css b/src/styles/content.css index 526bee12..2a169e3f 100644 --- a/src/styles/content.css +++ b/src/styles/content.css @@ -16,7 +16,11 @@ .prose a.external::after, .external-link::after { content: '↗'; font-family: var(--mono); font-size: .8em; margin-left: 2px; } .prose blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 8px solid var(--ink); } .prose hr { border: 0; border-top: var(--border); } -.prose img { border: var(--border); } +.prose img { border: var(--border); display: block; max-width: 100%; height: auto; background: var(--white); } +/* Screenshots from public/media/: never wider than the column, a tap opens the full image for zooming. */ +.prose .figure { margin-left: 0; margin-right: 0; } +.figure-link { display: block; width: fit-content; max-width: 100%; box-shadow: var(--shadow-sm); } +.figure figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); } .compact.prose { font-size: 16px; } .compact.prose > * + * { margin-top: .75em; } diff --git a/tooling/content.test.ts b/tooling/content.test.ts index d3dadd8f..5df4f05d 100644 --- a/tooling/content.test.ts +++ b/tooling/content.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it } from 'vitest'; import { join } from 'node:path'; -import { cpSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; +import { cpSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; import { tmpdir } from 'node:os'; import { formatIssues, lessonBlocks, loadContent } from './content.ts'; import { codeBlock, createMarkdown } from './markdown.ts'; @@ -127,6 +127,32 @@ describe('content', () => { const module = loadContent(undefined, join(import.meta.dirname, 'fixtures')).areas.beispiel.modules['alle-typen']; expect(module.toc.every((entry) => module.lesson.includes(`id="${entry.id}"`))).toBe(true); }); + it('renders images from public/media as sized figures and reports missing files and alt texts', () => { + const root = mkdtempSync(join(tmpdir(), 'learning-media-')); + try { + // Smallest valid PNG header: signature, IHDR length and type, then width 640 and height 360. + const png = Buffer.alloc(33); + Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0, 0, 0, 13, 0x49, 0x48, 0x44, 0x52]).copy(png); + png.writeUInt32BE(640, 16); + png.writeUInt32BE(360, 20); + const media = join(root, 'public'); + mkdirSync(join(media, 'media', 'kurs'), { recursive: true }); + writeFileSync(join(media, 'media', 'kurs', 'szene.png'), png); + writeFileSync(join(media, 'media', 'kurs', 'pixel@2x.png'), png); + const md = createMarkdown({ media }); + const figure = md.block('![Szenen-Dock mit drei Nodes](/media/kurs/szene.png "Der Baum der Testszene")'); + expect(figure).toBe('
Szenen-Dock mit drei Nodes (in voller Größe, neuer Tab)
Der Baum der Testszene
\n'); + expect(md.block('![Spielbild, doppelt aufgelöst](/media/kurs/pixel@2x.png)')).toContain('width="320" height="180"'); + expect(md.takeImageProblems()).toEqual([]); + md.block('Text mit ![](/media/kurs/szene.png) und ![Fehlt](/media/kurs/fehlt.png) und ![Außen](https://example.com/a.png)'); + expect(md.takeImageProblems()).toEqual([ + 'Bild /media/kurs/szene.png braucht einen Alt-Text, der beschreibt, was zu sehen ist', + 'Bild /media/kurs/fehlt.png fehlt: erlaubt sind PNG-Dateien unter public/media/', + 'Bild https://example.com/a.png fehlt: erlaubt sind PNG-Dateien unter public/media/', + ]); + expect(md.takeImageProblems()).toEqual([]); + } finally { rmSync(root, { recursive: true, force: true }); } + }); it('highlights GDScript without making it runnable', () => { const html = codeBlock('@export var windup := 12 # Frames\nfunc _ready() -> void:\n\t$Hitbox.monitoring = false\n\tplay(&"attack")', 'gdscript run'); expect(html).toContain('GDScript'); diff --git a/tooling/content.ts b/tooling/content.ts index ad64228c..57399585 100644 --- a/tooling/content.ts +++ b/tooling/content.ts @@ -415,6 +415,7 @@ function loadModule(areaId: string, moduleId: string, report: Reporter, raw: Raw if (choices > exercises.length / 3) report.warn(where, `${choices} von ${exercises.length} Übungen sind Multiple Choice – mehr aktive Formate`); const noResources = exercises.filter((e) => !e.resources.length).length; if (noResources > exercises.length / 2) report.warn(where, `${noResources} Übungen ohne Doku-Link (resources)`); + for (const problem of md.takeImageProblems()) report.error(where, problem); return { id: moduleId, title: f.str('title'), summary: f.str('summary'), level: level(data.level, where, report), minutes: f.num('minutes', 60, 5, 600), goals: f.texts('goals').map((goal) => inline(goal)), lesson, toc, resources: resources(data.resources, where, report), exercises, lab, vm, bear: false, place, @@ -611,6 +612,7 @@ function loadArea(dir: string, raw: RawExercise[], sink: { errors: Issue[]; warn const page = (name: string) => existsSync(join(dir, name)) ? md.document(readFileSync(join(dir, name), 'utf8')).html : null; const cheatsheet = page('cheatsheet.md'); const career = page('career.md'); + for (const problem of md.takeImageProblems()) report.error('Bereich', problem); const moduleSummaries: ModuleSummary[] = tracks.flatMap((track) => track.modules).map((mid) => { const m = modules[mid]; diff --git a/tooling/markdown.ts b/tooling/markdown.ts index 901c2e2c..530380f7 100644 --- a/tooling/markdown.ts +++ b/tooling/markdown.ts @@ -1,9 +1,26 @@ +import { existsSync, readFileSync } from 'node:fs'; +import { join } from 'node:path'; import { Marked, type Tokens } from 'marked'; import { escape, highlight, languageOf } from '../src/engine/highlight.ts'; import type { TocEntry } from '../src/content/types.ts'; // Build-time Markdown. Content is authored in this repository and therefore trusted. +const PUBLIC = join(import.meta.dirname, '..', 'public'); + +/** + * Width and height of a PNG under public/media/, in CSS pixels: a name ending in `@2x.png` holds twice as many + * pixels as it shows. Null if the file is missing or no PNG. + */ +function pngSize(root: string, src: string): { width: number; height: number } | null { + const file = join(root, src); + if (!/^\/media\/[\w\-/.@]+\.png$/.test(src) || src.includes('..') || !existsSync(file)) return null; + const head = readFileSync(file).subarray(0, 24); + if (head.toString('latin1', 1, 4) !== 'PNG') return null; + const density = Number(src.match(/@(\d)x\.png$/)?.[1] ?? 1); + return { width: Math.round(head.readUInt32BE(16) / density), height: Math.round(head.readUInt32BE(20) / density) }; +} + const CALLOUTS: Record = { NOTE: 'Hinweis', TIP: 'Tipp', WARNING: 'Achtung', INTERVIEW: 'Im Interview', PRAXIS: 'Aus der Praxis', MERKE: 'Merksatz', DEEP: 'Tiefer graben', }; @@ -39,13 +56,28 @@ export function codeBlock(text: string, info = ''): string { return `
${escape(label)}
${body}
`; } -export function createMarkdown() { +export function createMarkdown({ media = PUBLIC }: { media?: string } = {}) { let toc: TocEntry[] = []; const used = new Set(); + let imageProblems: string[] = []; + /** `![Alt](/media/…png "Caption")`: the size comes from the file, so the page does not jump while it loads. A tap opens the full image. */ + function image({ href, title, text }: Tokens.Image): string { + const size = pngSize(media, href); + if (!size) imageProblems.push(`Bild ${href} fehlt: erlaubt sind PNG-Dateien unter public/media/`); + if (!text.trim()) imageProblems.push(`Bild ${href} braucht einen Alt-Text, der beschreibt, was zu sehen ist`); + const img = `${escape(text)}`; + return `${img} (in voller Größe, neuer Tab)${title ? `
${escape(title)}
` : ''}`; + } const marked = new Marked({ gfm: true, renderer: { code({ text, lang }: Tokens.Code) { return codeBlock(text, lang ?? ''); }, + image, + // An image on its own line is a figure; its title becomes the caption. + paragraph(this: any, { tokens }: Tokens.Paragraph) { + if (tokens.length === 1 && tokens[0].type === 'image') return `
${image(tokens[0] as Tokens.Image)}
\n`; + return `

${this.parser.parseInline(tokens)}

\n`; + }, heading(this: any, { tokens, depth }: Tokens.Heading) { const html = this.parser.parseInline(tokens); const level = Math.min(depth + 0, 6); @@ -104,5 +136,11 @@ export function createMarkdown() { inline(source: string): string { return marked.parseInline(source, { async: false }) as string; }, + /** Missing files and alt texts of the images rendered since the last call. */ + takeImageProblems(): string[] { + const problems = imageProblems; + imageProblems = []; + return problems; + }, }; } diff --git a/vercel.json b/vercel.json index 6d5a8485..5761c328 100644 --- a/vercel.json +++ b/vercel.json @@ -5,7 +5,7 @@ "buildCommand": "pnpm build:production", "outputDirectory": "dist", "git": { "deploymentEnabled": { "**": false, "main": true } }, - "rewrites": [{ "source": "/((?!assets/|fonts/|pyodide/|vm/|icons/|sw\\.js|manifest\\.webmanifest).*)", "destination": "/index.html" }], + "rewrites": [{ "source": "/((?!assets/|fonts/|media/|pyodide/|vm/|icons/|sw\\.js|manifest\\.webmanifest).*)", "destination": "/index.html" }], "headers": [ { "source": "/(.*)", From 357c245c0a80eb18e7e82cf2601f1ed6d1b5e533 Mon Sep 17 00:00:00 2001 From: Steven Hernandez Date: Thu, 22 Oct 2026 11:07:24 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Schaubilder=20f=C3=BCr=20den=20Bereich=20Pi?= =?UTF-8?q?xelart,=20erzeugt=20aus=20Code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit tooling/pixelart-figures.ts zeichnet 33 Abbildungen nach public/media/pixelart//@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 --- .../ansichten-massstab/pixeldichte@2x.png | Bin 0 -> 3390 bytes .../ansichten-massstab/vier-richtungen@2x.png | Bin 0 -> 1097 bytes .../pixelart/beobachten/negativraum@2x.png | Bin 0 -> 609 bytes .../editor-einrichten/skalieren@2x.png | Bin 0 -> 16295 bytes .../pixelart/farbe-paletten/graustufen@2x.png | Bin 0 -> 766 bytes .../pixelart/farbe-paletten/rampen@2x.png | Bin 0 -> 1166 bytes .../figur-proportion/handlungslinie@2x.png | Bin 0 -> 1366 bytes .../figur-proportion/kopfeinheiten@2x.png | Bin 0 -> 1035 bytes .../draufsicht-projektionen@2x.png | Bin 0 -> 871 bytes .../grundkoerper-raum/grundkoerper@2x.png | Bin 0 -> 1143 bytes .../lesbarkeit-pruefen/drei-proben@2x.png | Bin 0 -> 4359 bytes .../licht-werte/licht-auf-kugel@2x.png | Bin 0 -> 1367 bytes .../pixelart/licht-werte/wertegruppen@2x.png | Bin 0 -> 1498 bytes .../pixelart/licht-werte/werteskala@2x.png | Bin 0 -> 493 bytes .../pixelart/linien-cluster/banding@2x.png | Bin 0 -> 482 bytes .../pixelart/linien-cluster/cluster@2x.png | Bin 0 -> 1221 bytes .../linien-cluster/doppelte-pixel@2x.png | Bin 0 -> 568 bytes .../linien-cluster/kantenglaettung@2x.png | Bin 0 -> 434 bytes .../linien-cluster/kurven-laufstrecken@2x.png | Bin 0 -> 425 bytes .../pixelart/linien-cluster/steigungen@2x.png | Bin 0 -> 989 bytes .../pixelart/pose-ausdruck/gesichter@2x.png | Bin 0 -> 654 bytes .../pixelart/pose-ausdruck/haltung@2x.png | Bin 0 -> 1391 bytes .../schattieren-textur/detailgrad@2x.png | Bin 0 -> 1693 bytes .../schattieren-textur/dithering@2x.png | Bin 0 -> 1295 bytes .../schattieren-textur/kissen-und-form@2x.png | Bin 0 -> 1027 bytes .../schattieren-textur/umrisse@2x.png | Bin 0 -> 1119 bytes .../silhouette-formsprache/grundformen@2x.png | Bin 0 -> 1079 bytes .../negativraum-silhouette@2x.png | Bin 0 -> 896 bytes .../sprite-entwerfen/arbeitsschritte@2x.png | Bin 0 -> 1203 bytes .../pixelart/sprite-entwerfen/groessen@2x.png | Bin 0 -> 806 bytes .../pixelart/umgebung-tiles/kachelnaht@2x.png | Bin 0 -> 945 bytes .../umgebung-tiles/kontrast-ebenen@2x.png | Bin 0 -> 4510 bytes .../umgebung-tiles/wiederholung@2x.png | Bin 0 -> 1519 bytes tooling/pixelart-figures.ts | 770 ++++++++++++++++++ 34 files changed, 770 insertions(+) create mode 100644 public/media/pixelart/ansichten-massstab/pixeldichte@2x.png create mode 100644 public/media/pixelart/ansichten-massstab/vier-richtungen@2x.png create mode 100644 public/media/pixelart/beobachten/negativraum@2x.png create mode 100644 public/media/pixelart/editor-einrichten/skalieren@2x.png create mode 100644 public/media/pixelart/farbe-paletten/graustufen@2x.png create mode 100644 public/media/pixelart/farbe-paletten/rampen@2x.png create mode 100644 public/media/pixelart/figur-proportion/handlungslinie@2x.png create mode 100644 public/media/pixelart/figur-proportion/kopfeinheiten@2x.png create mode 100644 public/media/pixelart/grundkoerper-raum/draufsicht-projektionen@2x.png create mode 100644 public/media/pixelart/grundkoerper-raum/grundkoerper@2x.png create mode 100644 public/media/pixelart/lesbarkeit-pruefen/drei-proben@2x.png create mode 100644 public/media/pixelart/licht-werte/licht-auf-kugel@2x.png create mode 100644 public/media/pixelart/licht-werte/wertegruppen@2x.png create mode 100644 public/media/pixelart/licht-werte/werteskala@2x.png create mode 100644 public/media/pixelart/linien-cluster/banding@2x.png create mode 100644 public/media/pixelart/linien-cluster/cluster@2x.png create mode 100644 public/media/pixelart/linien-cluster/doppelte-pixel@2x.png create mode 100644 public/media/pixelart/linien-cluster/kantenglaettung@2x.png create mode 100644 public/media/pixelart/linien-cluster/kurven-laufstrecken@2x.png create mode 100644 public/media/pixelart/linien-cluster/steigungen@2x.png create mode 100644 public/media/pixelart/pose-ausdruck/gesichter@2x.png create mode 100644 public/media/pixelart/pose-ausdruck/haltung@2x.png create mode 100644 public/media/pixelart/schattieren-textur/detailgrad@2x.png create mode 100644 public/media/pixelart/schattieren-textur/dithering@2x.png create mode 100644 public/media/pixelart/schattieren-textur/kissen-und-form@2x.png create mode 100644 public/media/pixelart/schattieren-textur/umrisse@2x.png create mode 100644 public/media/pixelart/silhouette-formsprache/grundformen@2x.png create mode 100644 public/media/pixelart/silhouette-formsprache/negativraum-silhouette@2x.png create mode 100644 public/media/pixelart/sprite-entwerfen/arbeitsschritte@2x.png create mode 100644 public/media/pixelart/sprite-entwerfen/groessen@2x.png create mode 100644 public/media/pixelart/umgebung-tiles/kachelnaht@2x.png create mode 100644 public/media/pixelart/umgebung-tiles/kontrast-ebenen@2x.png create mode 100644 public/media/pixelart/umgebung-tiles/wiederholung@2x.png create mode 100644 tooling/pixelart-figures.ts diff --git a/public/media/pixelart/ansichten-massstab/pixeldichte@2x.png b/public/media/pixelart/ansichten-massstab/pixeldichte@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ee221ac4be8f69ca4128ac37491d2c25faed8260 GIT binary patch literal 3390 zcmbVP3s6&M7EVEwATPs1fk12}-2{282Oqz$K!wM1+B5M5(%spdetD5JY8) zL%q~CGLr;FQ5XsvaIulP%|2aLt)0Gev5)iPKIQh7xRg{*)3M2XYlY%*)H@!|2$Wv&6()^T-JI@Ax z;9W1uKF-^kzc%p<4(Ir79E+Zu|3srwRbJ?@Ir+n7f8Am6ZDm5C=~xOri8tgphANR%VXNaXbIk>v7%di`GQr;ia>{3@uNzK*&Zz8(|FU`*l zZ}q9J;G`_KeiGgw!y}8#tp^zUN$m0iB(@%CdkrrOKtnKLiIWb9ve}G)1x`t+07b(b z0%W3o8tD9x2Jh9xQom!rIBMOoVJKEuyr>U2FNrlLPNey-%5JXX42q zz*t&5et9DP&xQ06H}>>q|975-ZD~d%_zcMpk*D5e8M#;6Bq(#)`{^%IlP+hawKE0b zpx6b{^*6#nFZ5CU5NIQZ9Sk{D7`P@IV@fv4s%lgK-L})G+ z5x)`tri6<4Aw@j;Z*kxQ=q!C-jF)!Q?p6rEmF5k2qN)WIR7!*|_b&`}*1e(fNcEct z%EuE$q&I(m?+N#M!y0rLWT4Vj?%3&A>b-ts~O`84=&LEY(ZBYfJmd_E@xeJ{8h+ITgEj3;69t+>cweXXtZjv{Y@c zQ`TF_*t)-w=szX$4_)o>ykQKIJ+ie=`My~KA(Q-Zq`fu}tt23dyc7pULCM!<6#(_X2zN~ z@#YzwI*;PB15V%PX)BCfyC*fhLKwJ$+Ylris(o5+o)~tk7J=?AyTd}g6rn+d=Xlh1N)~eYJA0KHMM(I zgK%gJD#eZrwt2IglShu7)8gaP)Uboo4_G9gxAG(PMVvE>q;DQU#m``XdH|vhEwZTytti+{A)F8+6md?J2kEEjs0Q2hO_Hb?SbDCoTV5 zk6v24F2wdPXk>!wC=YUd>WOy>uwF)}Hc$12+%Eg78}(|&#T1VQyUIMjFvY>-w@omC zE`+-dxR9a@P1#L#?0;T8Th5nQZ;J>}am4M3okz)jGb>QelEGh+XxExYOHG)U7J4!? z>K~b_t}pU}CzAXc#A&%$V_atI>ez*@ncr*Fdgz35oP@~~8GI#u?9Fod5ru4lCF7Z{ zV63Pm2xALIb;gW)SmFe+x#mFs$jSkaY!x~kqR_IRUP;&7+gSV}lP50zuB{t|&WulN z)b?Y2iay1FY`v5?>~o{R&$@q6EExW;aSxf&f=kpS^9|D1QqW; z`cWPU%@Q}mpsE+!6xB&zUVa>|j7Gydlt)qO|DcP`p1G?T&%3gIrt@XejrI)GJzVD3 z#(gtee~wkWIak9AXe?_u(nmd-ANzjGuMzYVPkSl_H@1`ue|W#5Jj2R?hHRb ztRs*+I6-VYeNzHf@`rNH*Y0Uf({`f!0-r^LhPd5VF2)rcbcS?`nJK6g2#eO*VpDPb zG{37LY>7l*^2z6cL!B{gS-O-KUNy(L@lMWJJ(}i;^k#k9&hcD*9+?1`oh0{zj0{4o|4pxmW--skDl|4Z zLn>~)z3c1$*g&N1;-{<292)=s&%SwNwsvHnuzKn1&pO%(@Ag=7Us-9ge6ot?BnVn^ zc5leHs1@Iy=k8T6zkX|e^88)ZJgh<<3XLp4;wHPw1P3NgAaP3eQ`m}c7sB}SUdu+m zmn@Zc1}gv&-xxs(K&l=ozMraVyX9+hboKFD)zg@wek*K$C;UBwR~lvv*enR4`PHy| z-tIGVoj-p4QtR&M<$Sby+P#lC6E5Aiwwunug+<3o(b-{Tt7Ev}W@`Tsq=7ZCTm(H`n2WKBzMHS4v0 zt79&B8SCySRg2YoN%M>2TQ6OgH4S;U?w0kod&aNq+TdoqVTJ|TQS&XA81J{{6}#7N z(B&0+Z^3ox#cv6?hc@v;1Gh0n<97onltF=rWKgmO%zY>AAkomsGHD^gd`W~+{R`pV zM=}az!&f%Vf9-`^o##IHYPQu8wqU>0*7j{}SE{fEhJ%p^JhYG< zBgr20Zrxt{8);Z0iYFCGEj$QoZ#j0!PhrYDQ;RKuYsqf=@^x|BsnYe;Za0qyAap@P zI8(+0nq^daubB7-`)~hJ;-7E+bq6duZIzdlg!nsut>}La%Ri4DKb=;Axu0cH{5D5O zaye-`@4B*`#s7@o5wK{xWb6bp9+Wl9U(5eD;=U~tHB$;$HZXX)`njxgN@xNAzXpz$ literal 0 HcmV?d00001 diff --git a/public/media/pixelart/beobachten/negativraum@2x.png b/public/media/pixelart/beobachten/negativraum@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..8a6de8c4af9d5e47b54fb04b3cf1af3399e4b5b6 GIT binary patch literal 609 zcmeAS@N?(olHy`uVBq!ia0y~yV0-~&Kj2^nlK)q+J_k}f0X`wF|NsAg_xh>4tjdQ3 zt~)z2nH$Vj$w;xcK}2%{v5Qx)g8OU$b_coTT7$Aa$aO=Ohry zTy$&c*P!1kPW={Q;*~PVxUj&nnQc%p(i`eFt6%8+?SS1~U-rwHRxR9q@T*h*J$9;j zpu}oR|J5H_g4n|&y#3pXhhMp<7FsW?FMuP%bJD!>KY=s$=vKy0?Oot#?Q(%{quduu zgVKztwW)Py7dYN#zqK#u!pZ5KU%L4qPJ3(g%!m!*?cF_Rw+otNv~%22yw*Go8o!>C ctZp%GY2LbF;nEvEz%;|)>FVdQ&MBb@0EJuS;s5{u literal 0 HcmV?d00001 diff --git a/public/media/pixelart/editor-einrichten/skalieren@2x.png b/public/media/pixelart/editor-einrichten/skalieren@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d2133cead8761c07e3c2f17257a0974fc261f35a GIT binary patch literal 16295 zcmb_@1yogCx3-7~f`AADf^@fpAa!^Z5NYW+0#YKKhdh9SbV)ZyK)PGHBqgM~yE_i~ zFZ6xCd;c;1alh}5@jLdAz0Y22?GGwuX0vnSA^VY3f*pjcs6mQ)^$prVO z7`MUyyi7}jw{D48NQ%8sb{yZDI#JU+ujV*A2uUalBNoSgA%-WGD^}DJ+!`F}`^Y7C zRGI+Ge)CZw(GPF`M_8jSJhcogriMF$t&bN14}R9_uM5n$?vS6eo=&&)lneDbUYB~i z-PT<$TQ=xfIk>2}CdI_WT=yPw_pHCo$jJB+7d&FldU|+x+&=vZ{@sFrU;l%j&-`{T z&t`UBQeM{|^pZ#H^4&%DLZ)v)FdEQNPG|r6d<*{IBQB2E??*~-dwcf<Ukvz~tq z;>_gf@K|1F!&V5_d)Ojc&9|x@?0BBtTxHwSqQ)s@WnaGX^l3Wm7@Mq`n5<6Lrlwj$ z&*xWe>TD2oBkFoC1BObUg`!>SRA#`4QcS+c&joL{WbE!heBI%Mw$p)IFvz18{Gr z!cLM}&CNgJ+9b|Z+hTe3i>1Pjtkr35Pk)vvE-Wrg*PIX>7pxX=aqO$Pgx|h^->&&E zo!>(qeB7gK>cWC$%GKckCQCQySJfG#>|u*azdV$oA!K_;`sCo=?$Pnd-oE?d+J^YS z(cx}-rIX8dh>h)@9cd3B*Hx><+-Wx3&q#G3taP=#WGRY5wJygP92w%_-n@_>lPnp-4 zvsRcZ`cnVe5rZYB=kVm-zTFATX;s%~L9FO&m}JzeyR^0E-bB~P#n69s=L{W`;vePL&``$@YA5E|-X=>#RLaS!!00Ocp{;BzOdL$iZ0w5!%a4{; z2$tVJGAKFV>bL1vD((;CqH+)Y_PI2s{qrw|P&@Zlnz;HL{O;g&149c@>Nv2Qw9JKr zCdO}3G&q>g4GjKj(YxP4i_&U%%E;6*6X?}2M(7v?Hp|osdXwb(0 zxyIu$zdiZp7(5g=J3b-4Iiq!GwW!+z_5BXRJeM>8f(+ zePAS0^sTDW@fRw23AO&Hv6-BLBx*q&lrn*sG@OmCGm4O*wY3VZ>8`eLM&{?l*7xGA zplEfa;~Um2@8=5v=z8ws0{%y3Ws#9fEiGP^PHUxh&M&#Bk_bWqgYF079OIl|qJK_w z^*APP*ZG#0Rg&(Z_V!I&XdFI8B0;AwkUksR<8KhFr<~;tdb?nI{^=S}%s_8umw6I( z$0KQZm^dq+))(fd%e4~)2DIc9FD*1*f=gv=|GPTtBG$UeI_3dZ_`~p6`IogHrjgQ)b8BeX0KN5S;bVd|dM+=w3RGy__2aCAWQ5 z#$FW&dupC2>%)#H!Vuh(didGy(tyuGv+G!YiaPE3hmB0emG{LZ>Y;t02B_D1XW)Rm z7*Wv^GE;wfd~~paOEF#VbiTZlL&T8LhTe8Acs}7j6;zg2W{BLMT%XUqzfTlP9*qOK z_Y9^QHMDF*MAwo5#LaEm&Pc*R+Ljd6HD!3pEgf-R19X&B5~IT@ zDB>SHIsDP>_1@SbsAaZ@xF)T#3~Y|)tCDcDm)de}vMOa?1Kh3S>}~9Jk4naek$dNs zGxe^>v$chclbxAbxAU{jrLm5&j=7G;p1JMit0=fcQ87$h=O6>{29_QtG`jjTLeMD707-z7oCxPpNL2mjBkX+6M84iW zMj3QD#fGrF5-OdUFF*N)Lm7t&{8cL9DxVC*siMtuf99_<)Y<1xqdApe*vE&5oKjO}MwrNBNLAcln zak1}XAU%ecRkhhdfZk(hxGePd^%tBvi z>(bD^W<1mj-uSDb;k$ZnJ}f;W{XOkK$pE)4cRz9riMG}>KiS`ZvA=)O**QPH-hVb8 zHqY!fpCjE~Iejs?+_ky9co^kqVrrmg`p&G{$Sz)_W`OhiK!5$fV1^LeWjpSHkArg$ z+LPG7qT&*!@GO#v+}*L-+$y8UvZCCjLa`7! zU6#QUd3(`^^xS^p!POV>yKUtX40z}7jY7jAH`5&TEK>7FHgh&}W#lB6g_E%pQ%32x z@83=}tQB+>blr4cXukma4P4*`Jc1whO6J4n!xZI=os9V_0-+swx!IZ7S=p*10z??) zWu<$9r@|i7pQal_8~Zr>J{!PaF>9!Yb*d6AsqNwGXiUZ+MDwj$lzg41Qnq@M6PK?N ztCFTLugEj>IqG2?8BRLJ`_NE|{MntMqfOqE9Xp&YyMPDhKa|>^?SO^poLBj{!#wY( z#n~SKQIclIg=d>#?s6+A876wvG=h*EERD9I*bWoZFXl<&mv#hJ&v!GJ|JZMCDu2u&p5s zhxoGx=gtxp60M;-=gZ&XSpwq!Xe}i}(oBTYu}yiT>hM6?-RWe-{WILQMVo%LrYH0zP}+e;POC8RhHO>tA0ahf|L z8M5b}79D?_vidSpr8Dj~Ix-moU*e;jCXauaZ*K@bi@wV=b$Vbl{r!z~V!M^9-dn|2 znyR|mcopBm)TTzKCx=*wiOHTIVq>baciGH(y3G9P%bmq0%uxklQ`LrvE=V?)HEi^~ zXFj@=JJ7Y!tzxX9|C!0^>nh(7_FQRITdupq;r^-JilJ}K=&@+AiUa9;RP#Jur z5S4Q0>)4R&%sM#?8rG=DFG*nvU!XtOvP?3~w@o(4*YPD=-$$*e7R>jR)f6(tPLq(& z%;Q?}9aGJ0JSyKRB0XL(#S#4(a@#*xXg@fyL_VUGX6O0WRmRc_#=7M%Q-wOC-td`` z(TblG(?BPL$ylN5LbXTNkFJC|Jp92Qoc&y8j!NfPW%oq$EEM_#UkNIG@OzC>;L)jV z_V$F82rw7dXs+O@u3#I`ZHP)ZY0xLCGn#J6R{vzakOK|4fs+@eZW z%#7PyxqFKn$nlGx<4Yejl+;4Z<+$gyRPk-{qx%YbEk@-FL|*4fX#NV@cz~j^rdADM zGcA;C9J-Cg%kj>F40!n>;`nSjXied9bsu`Gu4q!G2MbxIFDP80o0*p`w{sHW=y0 z6q;8Z3hGE*J32ib<{iosJcWWxvbkK%?-ReOu}DL2!*5ZT3A;0uC#k80?>3xnCPh~?T5t4Am9tsaCjLkQKB7tgRR>_`RsU9ajbXBR{nNCFwJ)#$ue~Q?)C%5 zquO>g7*Jg$CD5nZ4{r{ex_Ydc$c-YEkv_DWgFVYdlmk|v7s3W+_~x8nu$-Fw?k`;a zTdW!vSlu_QqjE;|vB1k)6haLb73A;g{&@{nWX43J8a(o0)Wz3GHmcm&FllrM=VSV> z7Rr^~O`+NUYQaqGtb&)i_Ma9ShY#FMH<15&eV_CU+U%YGPj{Yb?^^~%*Zfm@>g}n_ z>!@;Gxuos7kTu;t1)xN25Ra4xmCNkPkFc?2x?ij2oBll%z7xff>7JJ6DUPR{&gJr#QOCiIrR5tvRGYU4Oye2>RR>9TpazpnPHqzy1Aa)w0xncYkl;z z!aBRkwW!Wzq3U?_Mh+SrL@C|{hq%U_^3X7qQ9dgPOoYZGbLpzZzO<3CWy=(ak>pxZ`ahO*eZ|3d7+k4;d`?uVf2PXpQwaL*`a3m5!HX4Ec|CZeeU+{kQUB zz}S378;6I}Q+CWgcrU6`P!$t8%uPxlSqANk6ihZeKb&vg82=+WGuTtkZssbG>aP!E zE$u_h%kP`39c>D2Om=@54=E7FSRlVkptJJNxK|64R~U@^6S>#M$J#H9M;48zei;|- zMoig|C^?Y4y_zhUtu${v_^-yvIFLshCj%ohi#|GZ{=KeP6r^n;R%bIA74<>6E(>aB z>$*Ky1B)g9)Id1T0tkv+;QO6Zw3b3W+hQBj>}+8B4W536n{O?Rt=)JnrgfQRxzB#u_TJ%5)dg|pFxYLb&EMygq`NU{ab2H z1Q%?9|9p}rA<<%BxTtK+QY}!`D$$a|HMX|5XQ?CNeto>uvUU)3bo98x&fU^oNmNNv z!PuEukSk$nN7SLzfhwG}gH~F?g~*-4+2A>gaHN)^^7!Dd!I=pWn%HS|9e3-qi}MPO zbk<*L4<`H=cd3ia4js3B;*yO9^1i(Tx_gt>4dh|YVh8$MP5298!0-W9&p344`^@Kkh7qVY5FTEDfMlB|a?I$|Aj@43 zVY(aP>cYa|%a!JZvm;M9G1O`90XJiOQ&5-d{ZQjiaWxL(+t?H>#`X0&vlEEGG` za$7=w6tJA@JhH2OZ7yJ_BI5qm2L7+QX-$=poL{6i$|p>vkjvB~C#Qp`6`B-$ zliNx34GVw10~qB!yl$@MG!@^9DbYDuf{%E>CCpz!iT?OfNoQhotd(MwEa8DX`)eYC zoc-on&k-Yzq4J)e4iasad=AsBEZUL=91`C+su+4T#WTt-8R$F~CWli8&u&zMi|1^0 z$Mq>n9pdx}g5yBaQBltXj8+R)TbSeWQmC@L#@@yXZf{dwU(2DR!rH?o*_t8lnJRoy zcf2g8ElX2Tn*B5+JT@slHVGQjHW#J3XYxfiMEC;IH=7BZ9%~E9x@_PJiwN>7jRzEJ`Szb29nGAy?F((KY^;i_D;abYSi66|&-k{G;+I?(x}86Lyqw=! z6~%0!WsFx*>I-ejGtD(Mw%it=uomQEkBdnRWAFaC$l^cMT^sI+UzTUK|lB6b-YxWLWD z@wRqj!yCj0Gsl-)5N=QwsvcUvSpKM;dL6oAV6>s0{9Ic@P*WX}pz%EB3%M`tIV%47 z)O>Bv+*H&j(+Qx_U)+Km9j?z~zsAko6naa6HXsTx*OD=(CAvtqpe@hZ<`N}a(wz9} z_;cvSgiWlTp|!a}6>B8x>sBKMF{M<|1yR=&$lTY$68X`w5r!vE*71XIg5-VEX%|Wq zJDO7LoD8jH*_F)lEO#unb4(L!^E}yFKEW^F!C>yjPL^)gmhUYrP3#@aoYiZ zu%F9n(cg-Zv2<&LO|%XA46apP z1S*%+rIy1Mt4U3(_lKs+A`>H*5|`2vy}Y(6ky{#T$6${S-tQN3`K<~t8ZyeKG;&!p zEqapd-0!kbvkUX*eE%A#HZV9fCJ5mw6ROBoAB*_;r+*n8ay>Sj>C9e-QpWPhsl(!H9bGEP)v@c5I+;2HL$n78+Uc}0Iy{ty?+JMOBayde z3>DaegY6R-xm^W0Mto#OHLSkC*7C3Kf`irIEnz@8eJfuEEh)DmXsoW##;yPF zE-5xtQI!zl7JN!ES)_TQjwdQTKAGac#+HojIbCDiz@$R;Rh zUul>J_b2S{BlxUAgTbJ|D(LZf)fc7uKHbF{d9KtL=t~Pb5dIrF;IPvw0};OqiQPQ& z*F;|ig!fjrtte8G3fD4Im%pWLme%d&(jUH5km$^!$e7?5oEBzCm8V$ z&b`meTTfAW9Y9!S%~1|ulAAv}OO>?AZKg*$1Xs;x$kr#w z@hy8^FJa}}>}Awbc5wnMmiPhgiBuXF)Fx5g0c&WBv1?;M_TdO!(awG>1=l5nuG&q~ zPB~7#BOg3XFVP&=W=e_VaXh!kc}~E)g^f`mA;Al53@nzvo5Y5Pt&#Q3y6LPas7)Qv z_h`s2=M;Z-K=XA*glpBc3Z1fb${64LP1y7pRcnB&L|LhZBWwI@2URL&Mk;AYCL?4} z|A-sUZuigf^mKclbFg3`6D;yhNRG-5OMhyJ0UBJ+{*v%~)`f8n*SoGCj!Op*aNXq} zI}%lGh)?m2o?HaWZtb%4!eL|EYG!yaLQnhdpUt3nIBL<;WgZ~za(U6rJ`H*puzr7$ znlEIJb817{quDYv-TmpI3V+qryVYw#<1@O(IsK}UYN5L}jnKqB(9hA9iH#M@0P*-0 z`Gc&q6{6o>A1M~X+1bqDM+y*Ps`|NaX&1TdD=JR?@kV$%C8#24-`#^sF3De9d45vC zhHRc-?2kO3kZ0Nk??U5imL!c}{0wYMJ{NZvkMq^PnAgHyPi%@v{PrEtQbM4`zpntr`ccwLL8JNWg>+yVPehpAlG&ran< zkBYL3H@^yJdezi=Iet5#d;}2K(I`1=Pfqi}k+yPrEqjm)^uZZKa8{pWOFE^w;zQ1k z?hlGa=j{Q0;4taF2(Z6nI!6o0ZjeEDmdBvFJCIO3Taq*^to+2m zG*p?PoaQTqY=JGq*GoOUBDeJk8nP{dm=u0g4@>qUIw2-kUbx_ynOw+p5i z8qqSMPP!QS{zshzShE>W>40?}CYk%MUN-J#rM4YwkuSK~&-&a)$QzgTcChO_d{Wms z4%gQJAW`yXk)+wHd#6dWZn$)m46dxwKkDxIfI^7=4-{PR9;AL|&fmfmkBNwLHWNvA zag~ByCoBdgthOlBQ@N55uB_u-V{l$HHe6x6%(dSc69N#cRUBMovr9Q=LOc~GkUpTO)m)zuY^4=geQslN3b|A zJd;Bv$1tig`aj{>?MOVmyEgyVCJh{y53Al?8qbslaG4ITW3D`v30<;jH0 z>&4@e^d-)O15d$TbfCWqd4Rfz8U5)JFYraat%}dip6j9-@#xLiF*r{X{UiwQ)41U> zP+`1^%l^N|d;RWRZ_t1s?sA*{ood^iUl>lz*(dc|g1BdTXa-sDx)3bfh3=FJ^1sD+ z%I@_3p&x~oLt8WUe!y4 zuna4ci+eZl@mC5Cx=@-yjM+qTx}8*_cFR8^L$@yJ`t~XqxgWWhaX`N$%`ld5_yq%P zYRMsYW@0O+`4jhZceQ9OG(7x96%X7*iHAnGxoDK0m?hQ+VG1th6?%AW7 zbN=$HYB-mot^a{Eh$foLCW4Tc^dns(%Yt|BzPdPmx3sgfg2N3= zq=dM+Ir$hg-X=tLERTTG{sxDIIs#>qAy!sSt8=mkxR@CCjEd*=!$7=qza+qaUz$TjD#@Bf%G4wW#9Q*V zy5YJKmi1O2zUc_Dhjqzxv30Q)u;%{L>LYm7xbt(?Phvb3TopyB0+j-Nk3w9xtP?ra0GIZEA3Qw9#^BjR?o@Zd=9=Zrd>Nk2?Yl4v$cG zwH}>rPrd{k4S*2`-G6NmM%UtDVzjWh|EqamYGj6iF{bA}uCBOOn|Ah(S9J6YfZ%YD zv=nJ2oxPq-0woo=Lssi4OtV0v)Srbmc0ux6W8Rw4Y4rI+KXHC_M<`aNxRk5nX8fhL zFx%rB5BDG){R~Yf`_4dYs4l0UHPhoPey_@w$uMSZn34;3eYD6^f#(oz&fkko(Qu;H zHnF8s2FOFOH^g1SPvm;r+dqm?$Hd3J0c;aq0(2Ls5eUkvF^s4AXH?676`^7M9QhzT zAvErQ6)aq7dRD&5uW9Z{KIX^qT1n8~2ovt?xd^#sg-t{j9mn8BT;|V%>RWVLAioQceemt7N1}%0>0WzfawGECe&s zfs2~eWc6*KZ@-wSX>wWFb`H~r2zt$pZDCn#Ex<*(VQN{J>ReO;%1+f$z_Lh5kw;i; z<$9ct%i}pEUW9{_iAAoZ*l2&t!Z6_qK^jAP(Mt_GimDA!2NqjWQCDivbD(b6*?q39 z*#iHNvX1aPvSG&vi|icn5}g0Z7@b? z{fF$ki2Xm`M9wNf5DqXgp0Splyc|nbb~arj!ymL_+%G+A;8UB4Oz8wdQD0$dH+F>u z4}8VJ4QBV|q_65sJusOn_%#o8xa9J3I)Q&0_Ru&$57q#AM|1w&idb2BhWdC+yka}8 zZ3^Dl1BoAc_dz9r%=0)B0WfmKdyq%(m$OaDx6?f3y^uBgH&&Le|m=B!zCY<`m zi<9STh64#K;4-`ik_q*eg*iDs*h6s!{%yoxdF*c7mh|Qf&n6&bV4efbjAe^pr4BZ> z$xbfFK2&mU#OEUFRQ=S2!H22_JO`4*!m~vc(Fnl3>YMI}(=&ZlPCF}GNL+)1naTz4 zH2OX8B~N)Id^*v&=cPu^YYQm}8yUKQSkfn7W@YuC^Y=3nm{NDFLU7WOv4KkFBY^;s zKd~$Heoh^0petMCx;i_*w#Nv_Kus8i;;poF^hU)c0B9Qw1LO@wJuVh5`pTSuD}$bq9GlR$?^8kzQqLP=J*o>iV8 zEK^5{J%fCo=4}v$1_ZC$ix9BN^k31oigb6jFB4d=o0tfWk5{9;Ec=$4SDT+6rSzkt zvt2IGouoAoV>h+B@>k~YF{n$Z@3?nANNSfUJ~k)c>3cLD#PGlgVZ=SGbUR(I#wBL^ z2t}^@H|1$|HG0$m&fK-)8aiKwx4}!cJV<0PvudujX%cH*OB&wInQ*h1OZ zfVr0!ulgx>S?DA!xkMXO#o>N8WlL<^xU5~w%)GbZ{u?XHjy05fsn-pILa5(|V z5>Su;gAma3B%nU(v|(&)}dQ1+@71G zmqryuMIGl=|FO9K4k?_Wx4ddwdcQKHI%0?QIjo}t8+o=7ZFGIMP+b+A?|!*=dGxac z8(C#wQw*id&CBoT?g?nD?Lj0ZZ#Ci}^16_6@kAvD;X#T*&t5 zX3E7*-_a)Pzv{><_>xROvWwWw;Twf)n7aD>j<605mq z%jNUrZcyqKa0gr%Q7Y@LAI)L4UXV)xPyNF5$&qa_7KjDoAC^De1U?<8R#G(yV3mKX zM^S!TwnLus>^kZSuZj5He~VWN%k$eaFZv+CQwjhgKFZ0R4WU&F;r02%(g>Oiw@Bjx z>4h%`b(kt@1jo*tJm1KPTEw%Jr6@WEqgSt5`YA+?ckL=*j(?Rm zY|NGM*!}UFO?KH>dgRZB7Y|tcD-FHujP>nN@T@eem||Z%NJtpR3pl=e$LGQuc-tja z32IA{H&{_G&PBxh)w7;smpe$@)}hZKpKj0v5~FjbmP_D)0@$ITGrVWrMozO67l{p^ zGqR!&|JLUC17+l(&$ONu>$yr6)zL&(*?Vro9 zjmh;l6A^t^OZ+rqvC6{WV*`=lG4Ri5Ce8t{rJ~WKVcsKYiu_dQCya{~#sBY?YXi#L37Kk|v=0UWH|TX`!IeJZcI z*%hj!^xIlz!j;08ZHRx9M+T_yT@1;RejQ#&FW58K%er@OS+yhCC@8k;-JH^+z}E{p zquN^ZsC3?_DXGQi#6-k&!5^-RAEavvKG>xPrtA2ulHsvMMC^X1DWm}Nz)HnQSVx~6 zz;4JdYbV?Db_MhYPWUUCITir$1voNOtSW0RKszZKGH8i@0a~vGJNe1v9J!wGBMVN_mCcUwOyGqcvxs|ETzwQ>sw13A9l=i zUxADP;F%4fA*4zi#-=+{(~&jVUCk;>M>V~ej?j;pClAL=Av*vI&J1_>HBl!xSRqV5 zoe z{Nf3@ftw(}t=r{$OQb3uE6BuLo?hb}r}z42d9Sf*ORN~F)ck)sKnZ1!Zm9?G>%vkZ zPc-=r;tc%~6fG_a#m6TtIoNM`_FG&d7XJfsy*VsMQ&FLZt&77Tqi8`NzbOXq)71-} z6A3^rRwW!3qv5(61TX}NL}01ao@cYZFdlq{P>Xc>o?Vj!(AAQ-u7R_ci*Ioi3XJOu zOdY;kLWQdM>BhdWzoj^3hYq667@{5;)h+)-{ZCR7D#x5mBmMMg0odc~z;NB1Dj9#0rZ586R#~3Q-glOBLiWZ#2ht#s2t%J@ z^K}-j6-;f0;xEL9Jq8{)+?wq7IZjt;i7+vU7BS-{+r-k5%fT5%u{;IHd4{hKJg8gMf#`)zQ@16lY?-^I>Nb zxKH8-KmlMJ;wno2n_QMs%{e8A%gJA(xjgG}y*ZsiZ&kE=0n!aH_vw!h`1|m&0lW<& z11U+$R9X=nx$V)5f7CfpxE_7?S5R7Z^EwcL%Bf9Hk)4 zAS+`gC&^1!(q5TlhsQq!eGAo5{98ZVc>iEEz+UYa+xYtQgBI)Epk}@M*6O#X8)824 zani?x`Mx*t`!~r>07ftYuIyMffaLz$CNYzhOVsBp;b)tQiJgeidhyh80 zuomf7P2$}i;3_I8Y#uym{Yg;3S9HA7EGu$XSLA$yxx0;W^W16x{KlbFleF?Q*kA92 zh0C7gIq8;=ll(~b>r$b#@{?!6>|~pdjZN2cS#!F3*`@sDv5bl@YSsX33c%C5YKC8* z-`JZ83$g%w(dlgul(8;^9q;dAr*rF5;{!wwU}J;IyW{alfQrp0`yrzCu0kd2-c?n) zm6w|(3mH}Ju1Tq$I!n#I%AK%(4&xYIY*5=-4Gr#pa=N~S7H{UG#HTj}oIADRrf4h# zd&ElDaFi_Hi2OdHM z{dO0mtKsWot)rsz8OggNz5;X*Zm0OlM9$jHSQf1yFH7my^uYkN+1lpP5HPy130Hy^ z(|pHr_c9ulIH$RF<@#sQ58PU%dAf?@gZo+go`MJP6LY96AEIdD&*DO_pobp=Pn40jDK*G#^WGZt1e z-^l^!En@*KHyZ=Ma}zoM<|ZTz5`DDtSTn_Fl3QbPTo&`q}DTafJ<<-V7YSvic^f z#+plq#tOS}rd|xG#_rgp6Ff`n(dk^4!k(EJYLmfkY z$G*$*Cq|#SsDS{6J?sa`Tke|u_yb&e_*^up#iF7%o~Zk%wV3b(gwr@-wPutMZRGfT zC)3IID8@9Vj7gTVmPjGmN7b5;gHpC#>mJ<0PHdcZ9PEz3z)oM;*Ye5}=TcIy1N>w# z48{5{ABTLn0wyA$5=T~I`+W#*erQ*AbPLkH)ZP7gC&f!{r!F}Z#ZRXAoBEqAvxK+g z&W=^*Knl%qs?)5{k{PSA~E=#{g7`i(uLd+l=2Qb zAOp;vSB?OSIo80~;IIB_OUFJE3=qPs`-wJ#V6*$5favSeU#_b!wB164g*>&i9?Jz& z9V^ohF&}<1j-lh6?4sYg9~45oKj|l(s1?t?D{d# zl<+FqQC(@uoNRJ4QHugh6u)5A#Du`aoBugG^VSSqC&=67;LQ-&K@5ykyY~r6P?N;Q z5kq5Q->`O@0osTN8-XpUKhx4DKd)yUgWj);IjI%*9J5h+RCRjgaLq&diX>8>Y#TEN z36mIthXK)v^$i7VD`lbSR^Jbzv>M?u6fx>=WS9tS%W65Kxk2dFzD&sS0_jJKCsS_dw&g}U!SBg*&t4R)2gZ28W-1@nr0aI60Z#AD{z8Q^}zs- zXLz-)4zKlAfse!$#!)Q?sw=fzFGfJ4{;#_qv@Tu7ov%Om)~({*x#@sm>CQ|U?)BIU zxWq|{=c$o|sG77WQChNRRjMmF!8$J{42spkCTmXXpyErv9<_|9hmm@*+7!ik_q3d? zyLP|kJ0zP5uvm2;d2mUQ{hQB$@x<~b`tRAW_dCcAAP{tF@OTSuMfvh~e)XqY@GtSV zDF_G%24T#<6S)7E`PE93L1F8)`k|6OLG<9b%7 literal 0 HcmV?d00001 diff --git a/public/media/pixelart/farbe-paletten/graustufen@2x.png b/public/media/pixelart/farbe-paletten/graustufen@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..bd4f724ca20ee6437257d1d91f8b0684b0fdc71c GIT binary patch literal 766 zcmeAS@N?(olHy`uVBq!ia0y~yU@`%+PjE1U$XVT0K*}t@C&cyt|Nq)5t|#1V?0Q_S z^KZP^;8lO*Mpu;0r}rz~y?&~xsaafHTvJoCbLY-oyLP3froMjtT3%L#L#d<~Xk@de zi(^Q|t+zK%=N)noaCPJm`1Hu||NqT_?*pdXl|9|Na`W?3K3bPfyeXTc;t4^QnBE@F zdaS#~j4yF(A%j*Lf41C%wMynf4m9eL%0P=Ugj}Ih6HSDolF&hFd$@9hrGeE;tMgq8Ap6 z|4olcynMbpXUY9^n=Q}2&-^I^^}=Vaj5M1YXV`uCtFF0Cx4&}hIV042=bM&Yc09YQ z=G=~kvLEhm*d(A)y{&KA>7)7H;-6;D@gQS32t#R+x{(T%ZeR@yy?jw4?npL4; mWK!*~3{6SE^mOUeU#1_G%kDU*1YjFUrNf zCMIlNS?#{5oA2(I_4Lt64hxx=P<=dq@9Wv`UO$zWRcWcH{=vY&BJb(q7*cWT?OorZ zCI^w$iyaadTmI&oE33tdKK;sXQnXJrV7hU`#oxassdz%slIC(wGnU-gydo5hTu6$2+fd_v?4lh5%NvK-4*d)B?Tkp0|SGPSdy7_k2`u_=2 zouZ?@W${9NfTn!cg`&o}qEUL-UGS?Vj7x`Wt?7Fft;B@j^;`;3sm<&HQ#cO4rjY%m4G!N)Us_cyb+Z! zpX;q)jxKh0e`_@h)8cxw;)2}NE+%+*A_wo=85h=RGru*}!D|1nwrSk!M8dQa)-HV7 zq}_UzO9E?}th}(UmG@vD-`bM(n%GtRcG70O&b?vnf~iffS+Oh0UBEllihIk-AgrGK z%Bst{J%l?fJ0aTH`=IXCrmIpojCtsK`&Z@nd#~ee+^fc#f6Dsau!2%wn*L$1JS=f8 zfaOY+w>NFhZx+3lpQ;ZImB*5NTh>mHJRjG#dHTaQs)ui`-rpa6_@^WTG`;`av32^x y6#c_DPZxZf^zaW)12ETu(my<#0~uFh>-V>xJs>VvUj-~+7(8A5T-G@yGywn*6tA-Y literal 0 HcmV?d00001 diff --git a/public/media/pixelart/figur-proportion/handlungslinie@2x.png b/public/media/pixelart/figur-proportion/handlungslinie@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7ec9effd123438a46f7abe9e040b191e09b99971 GIT binary patch literal 1366 zcmeAS@N?(olHy`uVBq!ia0y~yVB%n4V4T6h3=|Pq^Qs?62?h9sxc>kD|K01SU9A&7 zBxs#Haz2A?^BL0R7;a?Z*c-d|;}Jc9cfXh#(LHd8 zL*U-rqmAcoi8_4~=Roy1(EV;rA2N0R9awtpl|a?QW^~O!M_+liZf*xN%%@1c&$xU0 zDt85v05n8fzAC1?<;JkcVFtg`wSA9XW4Qj%34tp1SFICxlSDZR<<}};F|k(R$~P=d zTf?sS+a*Y!10^!SE={cESo;~9Z@!$1XJ*8R3T4L=y98a|%X{|mDZX}_kCFgDiZ?K| zY_@O6X$`2J8>^U7Z-=1(=(zCb>{tQ`DV4!wuQdzI-~a2l1g0T}b_qPPS^FD{9)}L~ zNf_ah=*qFSIlgtm-3)<8{E_GM5*T4tASunbdw=_HEE3O}FZ^nsbyIv5Mtm@F{C4#E2ov#PQm32R8$8`DlZD z%WiB&e0Hwj!eWGhe#>%f%3nKZ6yN!}Z*$%sPKC4;A{pUXO@geCyL CT2A%= literal 0 HcmV?d00001 diff --git a/public/media/pixelart/figur-proportion/kopfeinheiten@2x.png b/public/media/pixelart/figur-proportion/kopfeinheiten@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c97cfc0fa69cb51674dc2f210c99f84c7f7991f7 GIT binary patch literal 1035 zcmeAS@N?(olHy`uVBq!ia0y~yV5|UQ9S&xo$iJ9~QXs`2;1lBd|NsAYub*B%cT8SZ zrK@$q^-Bp87#Nthd%8G=RNQ)d_hDYMf(YA%ytlvYKW|F$og=ujf%VGgzqhPp3wAwO z*YTsG0}4(|`T0sDSK6lH!-L<4>&2h!^g6lo!NF#B{z+O0 zLU#!}|GicLB#j5R^WW>`1essYQ^WmBu8Vgm$bxWo(Js~vSKVM-nHtTUljmbO7~#=Z@A~5fZ-gp$ z$YS%vvt0I1j80!xItFFXONf8;jLNs_Qf&5 zosVYye$E7T$oKaBUytU2^q%)|d#bh)96n%~W_EiyyK+ZKCX#`R< zU*4`NaLLnU)?gj;084;n$q^vC%_+UtPo_A~!E;kr7#DL$W%9Ta8h z4dF4TkJTMfs{q*z4Uqa@%vXw(f4_L`ekVcZri6V}%jECY6Ua+4+%=+UUFn2R}y85}Sb4q9e09xz{VgLXD literal 0 HcmV?d00001 diff --git a/public/media/pixelart/grundkoerper-raum/draufsicht-projektionen@2x.png b/public/media/pixelart/grundkoerper-raum/draufsicht-projektionen@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..aba3f5942272234cec3c824bcf11153c6fbd7a11 GIT binary patch literal 871 zcmeAS@N?(olHy`uVBq!ia0y~yV5$JJe{e7ZNsqMbpFoN~z$e7@|NsB*UO$zWRXKU& zOjqlKV@K~EU|?Vt_H=O!skrs_b|BXw2LYFZrd9uqz4wW$xWuGay}r9(rjt-dvd1J9 zPbm6#YjNebFSi~Cd~0|f@W674?E_1Z3cghSiU*C)fnw?WU=CRF?BPDOSlcPKU%y!( zl<~37bH2$eR{_>~lNrRB2R37VyKVQ^w+kuEaktaqI1!Xurn}BCZz`JZ%0;D%TzIKUugp z_Ift|g2j_}OEvOT+NgL=f}vdn@s69a-^TK#i%$UIGRBt$WsI2+jsp{j^RmFfYECQ& zqblN50qfvnUvl^+>ytZ&b9xBZ2Cyn|$`B zW!J2CDgM9ss*Qn9=zeZ|-eUQ5W_JBIljFV2k)Pi^U(bfi`yeZ;8*2QxPRxvV__Q6T z*C7&?j|>&@gbzrOsY0|q9)Ez`T(mV7f8Z55^xa^<7ZFUHDYL8h&SJrk*aym9SbD5dUdPaN!WzYZTzx#IXt@2^JUVABcm&@kAEkFA=1)pb9 zBu|uT-JM#sIJ$X_Wt!ZH)$yG8qb+!|+{UZTd!F&yTHy)C6Px-UN0&diTYfhF#?#M= zxRW=_r)3K6XVzE7?!Lz5u^XJi-ZG*1QI-$npdfhO+xYvp!>*3mO7FV%@p{~DC^5O+ zuq9Ww=OUZiebIlbl_!9+9TVphq5BH%HZfP^uOX6c?dN=PVDf-xPx-7IQ09|8Yo;Lk lmT&(8ZA1>Aq_T2HyxR`1c;1fl3xFjFgQu&X%Q~loCIH@qW-9;y literal 0 HcmV?d00001 diff --git a/public/media/pixelart/lesbarkeit-pruefen/drei-proben@2x.png b/public/media/pixelart/lesbarkeit-pruefen/drei-proben@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..e25df98032d5e1a37291352db664e7593aedb1fc GIT binary patch literal 4359 zcmY*d2{@E(7oIU@tW%P$VQ4|~%Pz7vqpTAqyAaLTvLv#WWs>qCOZGL>BKtDPE=-mz z5weW&AtT9FUl=6$hd#b~ujiV1u6LgIoafxu^0AN4> z0Kl8fAo`u0*_&nbuQbdh6V08Soybg|pjemG{Lq}L7#nlL+OlWqkHUC3I8~*@0==EZ zjtjV6JWC_j)P~s#!G)qJ%L{Y9ZKY#-1CyMb91#)m?Af!j zva;_RYZew3k@w?>L}Gk=JSQiotgNh$kI%`IC-wF9CnhFhV`Bvc1z){-B_$@x=!e0TH}tp`9gNp`s2Kig-=)@5|~I%7j%_uZzn~M#b$hf#?jn= z6vNkFpflt>3K~8Gxpr3|KS#%&nif^a9l|@~Yskf?0!$yf~a=w0`T?4L&viE1^gD)|tjjL~ zJqI`NZq>3=<{MUBTX4P*wrgpY!GS$y?ZHPAuJG;gV{4~wLvMxr4W~_R92+jXwucVG zjaj?&T0_H~vOzMLY^m+Qp6GKb`-^>V0jmG+$%*&=UnlyEYsvrwK$kUPZp!vt`CTvH zVU)~>X>@R4VDQh5EST6ZVU-a4%ibK%b3>cHNj+Q*Gl3Q~#kxkJd%5Dqxp znVr3(>m6KTtR?`{)_U!&d>yn0-E7Yo2cedbn;WAGYU4ls1!8MG-n28-vc0vvGEI76 z=X{PVFz)NVbaM-NlCX>Q@T&hwe0?Ua`7Mm~3rztds9MwDmRi{t6&0K`(d_RuI!+$_ zK$~Uyl^A{9fzDa#s+azw#pBl2s)7DHKVOIMT2}6(22^pYj3>i%2SEtDtnDE6Lf{Rg zK5jlHU*z0c`=^=b^6EBklh#(RQ;e7bnqKQSL+Mm7z+k3+lw;Qa!&2zHEZ zM+G~=T$-Npw3TuEB7@A7<1Byo+^C84!hD@^{o%;kys<{#vawp+BX%U6=4pn+H_5qN zN?cdok(A#Y;mTP4khP$0`Z~U-1IuR?oXDZRo8hi**MQEIqB2_{4in6k`FI73G5O`U zG0B?)VUWFz@FJ9htW{cx!Z8MBeMn;G)vE)gDU1Rs?nKefbj040Lb(N9@F{Uz=POpO z1;IN{nkO8pRQ!qXCXoK&T_3PqGmC;pDw&>L0q5?3KF-hoV_;ePj)#LwyR- zxRIL-g1=tJb&yr63?Kh+$UPKM*G5DQ7RI82ex+mGpS|2t4{sp0bi&^zH9trU@#^Bo z&Iozz#E;PBIA9Yhm$t@QCTOUtiyY8bk3iF3micgr&-tATuIMP@s}?|Fm2rrTUwuJ9X(sR z-JGQ{8-b?U%k4#BXM5twEZwpBwO$$sv4+jk~VX`()2Wg@PInb{!%tCG2*T zL`$i7*&Jfq;}F&}Q0YUq-s2CHi>)deyzO?4LX5jPybVtorjdBI;y%B0=ie(c?wc#R z&(${vGskA*U7FpknQvJ8I=JC!CsrJ)8W)951k!W5S=Zrt?exwI?U&x>;t~bm2Gtz9 zF!AX(MxOL20xe6@MfONYfR9M4ysL9_gQD+uh>v-`I1*(AYHOt+@u2`Pkd>6C`D?QK!>`$&-Rr+T_R9La z$Zgspxq`O7x$>!xYOC^M%eKM)AC2`69BqX5*~86NwJ9ieeQ?2HePC%LGulx)_|GL2HZ zI{0h2QPQFfsPV5;k0JYFA3U@hCFU%&ugE#od6DFtlx{ihwy%G!QwVt%GFl!TI}LgF z^aJ!^&tLshw@Z{u`upF~+U#t(H=_Dj5%f&_8WczltSHJL=g>e~vzg<=9z`^ec%hUy zb5lFq2l`EPmlVGSSrj3|oCJN}*3vu&;71lPC)tb;DsbV7*+(9yCURxj2epf_bT1$N z&9txMVHr$v+4B||=tBt+R0ocX$I|M>j})*193xD~Na5eYyMw_njg~VC!OOZKOR}Hj zMdge20fV33KwuRp60@FyVr^n7_&3|&99EsS&a3HXvqWH;7oN8fVJBScpZi7kY41IrOJLlb)aEbU-QkJorHv7B-s%cS~toHQOPZ2_cIOBh|Z4c>j zr$%bIB7eYET~6P3_}^t6=;{c8PdW zcfX0v&CbrgfOoTJh@3xn{O8p?cp;DL8$j1oe*E(SFxM-2M9LY4{hZVm5?Y0yi2X0G zB@Trp*dOv#c(eX}ZDGV?q9I^~wnVA+@GW2R6_>n$fpWGtXR7(h-%Qg#ThB%aTwXbF z?gmbDdFsd0a7E8LG6t*gmlNTv^hD#G_1@#eCErWgn(#rlW+}+u!w^ZiT$fuqKNc4Kt7X4wIOtZu#0BC>f zz(fZpg^bLk#?gW|F%S|KCFtW!k-6n;%H!4@$=VTQYWFqnZZ}2G`n#Il=9LzOeIh1) z0Vlo;_4gd`6QAZ~+me8CR4pAAQV-nF#!#xy9#3t7ees!V&iNVgTR~(HOxX0akOf%z zp=qXn{AM32j6m1*xgO zR@MIQyvq^M`kyd_C#N~jYIo)sD^0$}iRt6516r2LV+v3WF2MO5mKpL?mI1&DBywiF z+QeV+PJ7XDjOr&z#fk&mCRGq*y!9oGE*__W`)Sj5HavJ0#za1WLWqbQ$I>hEwp`vH zA&7(Xr|qVULX8zz#QFKGK_Zf4aZsIkEDI6o$^A8|joqDpUje|FDweKvY6^E*KaljY zMFadsG}x42A(PeRSpoqKMMMLeiY)#y%OrP$4)*S4j>_jrDuMhg$GJw?x;|-=$4rOn zA7S;;S=%g}R+;~y^@;Bf`vW9KbV5nN-Ks9=J+*TbVNSd#CL^R3{5Y2koO%Y%e1 z-7Bx;Ly4OufJ=sXO3hBe5XH{D9fYdB$e(R9x$JR@0gZZ3V>+j-(g6psGa$mbw~RkY zv$YmW1ZU~j3@n8#*;95Vbl1r=BL<`7_r;SHP7imoCAfsmIAj(7RX#9gSs4M*P7+9z z(5W?%K5b=<>T{R=aasqMABuO4@mpI&vy95|3PbiuxcL}$8Ck$v+SxtCkeEI$5X}wm zVol^5HU6uR@#g&#>S!MSsJ=t{Twp*@d>ku~mg6ZBfMdK5-V4vBN_*$Y)z9*s@rK!3 zpRQrZCD^@(yS|Sg*d(!+@wd)Bc zQCM@$;FQdXxypHbrVVv4*D#x%3vEI#;Ud=IHj>&g9rCov(D4^){J#n3(Zr4Ea$r@D zGg|i|cVPBKh}QUxE(YKJmZ48Y0^|#kKzAV5JrT-5%yiALm%80aj5e5&x-XWyIv82N z(1F&B9T6BUDvMPcbienl{9WHr5)1i?>Mur$tvp_C%KtU1A(&`syQ-rNAp9 z=N$mOfG+n5-UA5E5KMaAE*bO+pyfsj2^sW@SytL#;t02y6XIkDyvLg zOUK<|CiJ8FM0-MtXXYiK%nbXA+#`)h1y_l^HjPr35Mg#WT9YhVZ9Y=ngvOVkO1G+I zfs6IJ)(1MgnT3pC(MyuE)aUHx(aaMKkpNmM)uO?--%p|MC#HmYRN%d=4px&{5ox#b z@2@0Z^#&&y%tdZd@i@j}G2e!nOvi}JNk`%9p#5zCx)e|mx*C?3(=F^uWliME%q4;` z;1MjbiJj21L7pM9XBJB={?@zx_|Lsu?$&QM!T2RCg{1N!=c|GL{~8jC8@aZ-x2Dt% z4i-~22c6)nx;Ct-zx+t(4_SX6t#(~~zp-Zf+#FOg6y7mRf3pG5)ik(R IqG1>Me`U6ty#N3J literal 0 HcmV?d00001 diff --git a/public/media/pixelart/licht-werte/licht-auf-kugel@2x.png b/public/media/pixelart/licht-werte/licht-auf-kugel@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ec95217fa7bced8453082546973b3fa13ec186a9 GIT binary patch literal 1367 zcmeAS@N?(olHy`uVBq!ia0y~yVCrCCVD#W%28ukH{(m8mk_+$&asB`Q|GU>uPaZk* z>&Mrw)(Li2u2G>$d6{KiZb9<0Dqkj^nZm%p^2O7|F{I+w+q=Gb%?2W^7pJMPeB1wU zRnQEV-c#o{&*y!9o8j71o(9hN_(>|BFeLjTdiJLHH+5|+f-VAY*_ApJnluC)ft*GT zAe+kt$PQF!0GeN1_xKf0vfx#*hZ9R#x1`R`BxUs?rYU#l7pn&P6lDk>%rw38x#g z8Sij!6gjctZ&Z5(mkQ9&pnyRm(wI;kfH3KHbA&d!^PsXDHS;SpmZ~h~*Ws9TyoKdl<1e2c$rkCsInG<2VDFOQGDPV-vnF!0u_mBi|JC7&bk4 z%gXV{umRnt5dAxzAHV*6iJZ1J>j#Y^ITLO&AUhcmABMtlYx!^Pb(Coaryh(jIwGd% z#<)l8h#`*jaK|{speIf zqX*0*Qw2R+uB%)Jf&``?d$Q>pGs2+=*2gG;#SV7nW_w@BCW)PRgWbYCYDcyz%x9n7 zl+Bu?J7Mh`?AC2ntjp5g@zXi@;U=Irb8CUw03!r|Y4gw9zYWC&!AmzO%&WC`28A!g zW#Ie;$w^1{x7k>|nG&KcaDLl-MUW}rEU0jcAC$H))&V2w(JaO4m7yJb-=}-Pgis8+ z@p;4ibNTyk{N>>UCSN3tP*v4ZWp69ritol@e9~Fzz}HpZy6D&9ryE<=?htzT(^E-`jJYt0Ebp1<$F& z+y3%o+Dl%l1IqHeOl5Tu02$b%0WY|KjF&8b8MFmkD-^(qit98Q3 zBWHg7_$n`}BJ=mmI|c^UW=|K#kcwMx@80fP?8U=+VdlO+|Mlg2uS|5i_Ay6XVA6!G z_nAZ$(p+C{>$Fd#jcigFgfCZkeoa=*I{ z%kkhYSsc#Kf0UdxqfA&nn0b5Of4#`oDVKWROKrRRExmEu);O$gk-fbkHn+u3-LC9* z_QPfN3>LX6?^~~l^5L+cbn&jjYVI&@^SLW-yq#Yc7_|6%@{i~F?QuEgJaB{0$o zD6-DAZu{PNTXV_Prlp;|cT1OXPF^{&dVOo+@~>5)3D`XQo=I2tO+kp_YhM2a;nG_< zL(2bEo9Ar5_WJQrCM=1kEHvY?v~BE)MbQG=?mf8jV6W_QvyjW|bNyQ8ukFOo7xB4XTP}7`~KL~^FK8*)>|10VF}u|t1g5|&t1)XdtIZo z?vIj#T`yfud^u2P`){%Iw$<433iDgL3w^&DqNR66-=FS~FB@LGzADxfo2SFu&2($F zI~*xt?8#e{R6b{yZKL=6@rrj`g6zl99NyN{rb!H z=a)*Cx#dcIe|6y;8#@*a-`-uwI&5Z|lD&9qwZrz?^SQ#gcWh0ZeJq~!R^$WptPYC4 zbzHe$9b%KW&OR`s?t#AVoH=?=Hf(qNt#{!aFSgVN4x(*$oz`*&&3dpSYDZq;&6i*E zb?<~OxXUerB|Y5=UAR>GlBtdGl$TCxFLzGnjJUh6{L$m9ate0X)$exjKCn%1Pt})0 z8{K8?WzQelfGs!|bao(sjZwXt=;}jz!d|h0LS$J57yGTq6C(b5Mf^a><>8grKmY9r zwfN7|04l_Q+56|?Frds8?}uO{a?YL^Xvr*)EJ^_iX7F_N Kb6Mw<&;$Uw#(b9m literal 0 HcmV?d00001 diff --git a/public/media/pixelart/licht-werte/werteskala@2x.png b/public/media/pixelart/licht-werte/werteskala@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..767d667a0f7da7497a61219d526a548975347445 GIT binary patch literal 493 zcmeAS@N?(olHy`uVBq!ia0y~yV2S{;D>#^eq-1x^M<68^;1lBd|NsAAKfXS?_weMA zGpm-a>uQ~ll~(BG7G!E`c6^;yDS5bnolFk^9C`-M078y~OGp>Tfuhxpg)iU>a(~8tua{FM00Q z-nqqJ|F8Bn_39Nr3MQ^uUsZSgXEUo%-$P zo^vlh-1(X07r_rzoN%`3s_mYCzvs8F+M2BIc@PpV*?|$Ehx4z0h+%xpb@=;5(y)zif>q~g}wTaJE*9e5lrI%)3x-y0dCA((MUMe=dy z*MC~xudgmLefw6;bCQbZq(fENU*=u8`s{c0h2NLz?c#IoCMY;Iv2Y5hcz_r>EI%)5 zygv5V^8VtBI-hkX%=do%e2wo9)}Jv^_UDb{!D?WN#hP;NZi+OocwYk~q&I!+O3%## zvS)Ka&4Q?#s#q>o+nitf{+~tQm74bWk1u@h{(67qUZk>_D8x>vdD_l=Syy=P{g(b7 zSUi93`wwnz`C0Gv9o^2>mZ7?F4U6QRd(wNpU+dekyE^Z~hhCYjEB8uEZk%h2VfEy! zyJy|=-oDsf9ec~|-Q6q7(vo}UzD`H=GLI%GWU99QbbZRQ`K%4dliAL7{FbjbY(CE} zq;lfd1mpjX`>)LA1xnQRnScYKYBM7!$iP9Wa`u||#v^mTa6M@j1V$Qzr>mdKI;Vst E02jZ@RsaA1 literal 0 HcmV?d00001 diff --git a/public/media/pixelart/linien-cluster/cluster@2x.png b/public/media/pixelart/linien-cluster/cluster@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7800311456281c28d3460e47af6701bac7efe44b GIT binary patch literal 1221 zcmeAS@N?(olHy`uVBq!ia0y~yV7vju0vyah5tThti$GL>Pl)UP|Nk$ZJN54MQ+ZjH z+c$4)T)XAhkFO_>oT)Br>}s9h;^5=u7G%Zt?>GYkON^(BV@SoVw|5-#ZW{=&Uf8ly z`s&{QwcYF1xN;O9k?b_PAD@}X@~_hQumtz79|D4KaP#T$*=bkj^&hgAuU!5*w7Q9v zTTCZnL&8BMMl|p2Dd(4**{3~kZ~8Bl<)ZWc965JS7+n=m-;I-HN7tJFT0Jq^AaeKB z&}zAPPtqRV?|-vCKfeDgv$H%+wJ>ZmhW1Xey#Iv`RO;D7*6CC%Q1b^S$%ol^&HukH{JFNCLAm4LlZMaSK`7fSwGw+34ZQT5w z1?E7cF!^>Q_G4)E<==YI25W0y_1G@H`|bbqd-Lx5eG0u?{r|Ved6n-zU*W>oEi)@y zvHelc8{hsn0pTxymQ32bY)evAzt1Nv9HH~}#=>{yGuQskUA(^YUicrc-H&n=mcQ%z zE`0UZRpno^UaYrXUy`(V`Ik-oNvIJAasTrj>vwDwmb*E-&u;d@s_>YN^7G#9dvxuj z%*=Zit)Hy+&pE0&_g%U*Hm#4XuUs>(UHtpvJlpJNe5TpqdsLsw`TShB<7>*)7gN6Z zR6kQmpL=8CWXZQ>uiOpMk`37Q`inv?sRk%gv+d@4TwNE!(^Mk@5G(>EHj9OUV3s=s#chmok4%T4an-PBJ*7AG$Ugz(9 zIkE1?-734ePp*Z8`=nj_B4@er{WYxVJ?ln-o%G3F>vw$pzWDv;o_Ueh56=J-ZJuvw z_My%5mdMV%cTrgS?aWdmV>}rvW$%1&R(a9V&aDn&BV|2!3XJCcy)1GoF#DY^+na^e z%iW2tE>I9>`#*nI%)-Z95TCxOS@AxuYAP`4zgoFr-sjqt5sYO!_5Hz#^V)PSThVL5 si5n6`zdhxIM1v^2bPyDr`05Yy=h&%_LIWfA0?Q=^Pgg&ebxsLQ01i?^ZvX%Q literal 0 HcmV?d00001 diff --git a/public/media/pixelart/linien-cluster/doppelte-pixel@2x.png b/public/media/pixelart/linien-cluster/doppelte-pixel@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..93bab9d65b4b074711c9e0ad7d15d1c69b27d5bb GIT binary patch literal 568 zcmeAS@N?(olHy`uVBq!ia0y~yVDtd8PjD~;$-TTCxj;%Nz$e7@|NsB;vMLwPoqG5B z>E&?E4+&Zpq1z3B${%{VIEGZ*dV9+-@2~-n!^JJW@9UrXt=!8oAt!iI$M@wuM<(By z;u)v!IZ4HHlE}5|3HJ}aHM{@SvA$0!?!B43#{>n(CKgU16%a$L>CH|3`^y)V-_ia& zced?)!;Isad+Pfa4; z)x7A-b&1W-rT5N7a&i+(q-0T&ZT0t4KdZih)s(H9v;KJ*+)p4zO6rLxyVu12UMT!M zqZ#H|u*A>U-Ct$Pr~QnoF5e}6^OuUo>6*2-p`iiursCxHo66p{``tnFSXu7wZSKlg_EuT0`6V=UpnzZU-$>s-TDKhNavk=cl18sL+_Y1>;(V- literal 0 HcmV?d00001 diff --git a/public/media/pixelart/linien-cluster/kantenglaettung@2x.png b/public/media/pixelart/linien-cluster/kantenglaettung@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..88ed8ab4f7574e16eeee4d1923b9c78700062df2 GIT binary patch literal 434 zcmeAS@N?(olHy`uVBq!ia0y~yVDtd8XK*kB$&Jkovw)ODfKQ0)|Ns9lo;&sK^;3CS zm5pn+RF^fLJaVS1bpqF}gb6@Rp`I>|Ar-gYUO&j!WFX=aD0<=l|K#vxIzA%aiBacc zcg~UN`JpH7IZ4HH(v>yY5qsZiJLfNLIluQUGpCS>#{>n(CKe#$#6$&Y^V~I8_f=lq zw5sfWqW>PLqUExm_inNAf~tTjEt(!(mKE@J-z@82Tk@YMPLMXgT65b0Yz9=tr~8Wj zyHu;>HeYIt+#YE$GlM=U^flY^5 z)8_0~@ojh2^*GDdZ-p&?Kk2oZsGZIVa|1}#iBl68f0w>qxA)V}s_X0iUeV04ov2;k z`fAr!B*(IF7WtoO`THwty6^n={}=GjJ+xYTo}E03Rbow3K%So49rG#Y|FZl_iI4`yHf(-Bi2Gk@K&9(Y>za0$pb2<~)y}P^Uv4H@K!;L@x>&rA)m3${~C#-nYIp?lKM$XTyzZt$R zDBy`(9n+`Z(~i`=zqo$e{nanNom$n;ugLbL`hUd!TXhOe97-L(8i9nuD|R5!v_c+8 za4f1**p(sRcxAnO(t*00de_(ORP}KbKJLOI=mHew2NEoS_CP|=<*x%s>?<=^BH#Ot z>HD|S-xj@{6@5s=q|gVX@S^K$RFjdc+`jb9tn+WMYuJ?mHd}lx%tc^*x!UDt_x?`Z z9kct{Gy_&&8DWqUN-l!Epce&l6VyJac7d#&Y|Jp6Q``N9}+LeZ(!3G~)=eK1j-Lryt9PE3n#BW8mH`Bx4d41+;(6X#9)@9CevG4Ml zcKiGF)2@o_`LxJ=|D98v!KQE1zC?c)e*;PySOW(lVZ&*dxW8sgcg)t{eYf?WK0kE% zcWv8_3@*97GeRf7&)YxceVo^OT&V__JiFO|#_v|_>Og=KcWQnyul2k;>G#s|nnOP! zNt#WmV<*RC{!g5L@94u4_m5nG+Ks%3&|36=O~VR}j&s0NEy{ZFr|sWGwU-Z<&xfSC iJcT9=C3L|3nY}zb?A`1@4NG8tW$<+Mb6Mw<&;$S(^pti0 literal 0 HcmV?d00001 diff --git a/public/media/pixelart/pose-ausdruck/gesichter@2x.png b/public/media/pixelart/pose-ausdruck/gesichter@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a08d0c351327c2d6da2b231edd62a7877e04beaf GIT binary patch literal 654 zcmeAS@N?(olHy`uVBq!ia0y~yVA24xH*hcmNukQr4M2)Nz$e7@|NsB*UO$zWRe5=G z#m=sb`FW1kK($t$E{-7;x8B}$?0am$>g_9?{LfxUAoK zl8Pq;MStPE!q)xA&pPYP2ZOSPBz6rj!N=0Y-1x|$tU|)tVI#8$kXXz&<(_>3pO|Ep zd#|kAF}{E|3`fC4qeG!WfXoR#{$!}$vMVh`dRgBR-&B;hw?j08OaQ6k5MkeR`0x$J zF4+YjV&}p;hDt_yyOOU?PuOg|Y0vS?)((uUA^|vwFxxY-_Q93x8VeejxNs3&%vWz2 z{*wRiS|`5o?T!u0h`DAZ2wKTxP7v0b~z+; zfEI&82jl>#Pk=0o0ACH`jH><5PaRIVFK8L?^g9DSkGyhtd6lSOS2h=c##GSUTl?*A zeSFZyW4$To* zGL|p@0*>USo|zo^z48DvzfCt2zs-jOn>9WhU|w&u=X<9P7m&+*ei29x$bb=NnB^)S zG^Wcz;-ojiN1Hj-HgQ;}Kcxpy5r{XdWq zMQbB_oNYy=zbHG*9Z((T?Y-_jzXWzV+=&O6^G)}hK{gVsN&nY{%I4DOknP-@$Q}Z! z*4jpdtQA|`WGV~`QX>~uT@rivOhPVx-YaLJl*Dl(smY9hg_G8J9_ZI?9KC6 zfRhK3nPrXTUz0K72`#`tTxrRiKg!=Dt_TKvub;?@YJ52Ry{pdEj^)>Ep8MZ&0c(Asid}_RI#rJbk=8EV+5c*J-@$UTeKWor5`8R^Rmv&!LXtz9)C&2a@ zJ#bxPA|2N{^B__xgrvIvHE8BMc+0Q<=t%Li&V4FrwYBIb9f&SfLlxVT_hHrE9Em+Y zjNu6rYT|bFJ%7x#ck{pJ$WAFj)r6YDAwjz5<`boBaf0_w977AERflI=`@~jQW~1jW zeYUtGvYemqvuQti_4IeN(DsY|w)&^254$YLBcp$?ti;oewp7P?HGQ2e2|o z#di07_F${Cmon$AGj2>*`=G;V<82how@a_Nbnf!E{??%4=yLRa@D4@S+aLkh{rWae#kTx`OpjUFVdQ&MBb@0EwPpdH?_b literal 0 HcmV?d00001 diff --git a/public/media/pixelart/schattieren-textur/detailgrad@2x.png b/public/media/pixelart/schattieren-textur/detailgrad@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..0c4e2a558cda4c3c601cde7d6abbc359961e9e68 GIT binary patch literal 1693 zcmeAS@N?(olHy`uVBq!ia0y~yV5$JJe{e7ZNsqMbpFm0|z$e7@|Ns9dkDU4S{&d07=XF1r^D3~X+mE{-7;x8B~p+jqx|hwXyN&D#IrdK-$Jr+D|N%+`Hnd;e-e z-HaPn!YLY&|Gs*=pn!ju|9qW#KmOkmf#K1yc%pC0cs1X^Ib$Jk@{+ljkhHN%aB7`}bKhr)KvYtgDZzY0!g z_ql$*dHcN0FaN#%dXSml=EDI5al0{mZja5EjTZ&m|CM`O<(awq{=w4=9zWK4{YMSM z)bd+?ormx0+r6K@>3R6`SLN|bY-H=(R^`vW6D^NoDl`9{zf0d=ZK-Qro)qBw?)=sN z|Cqi`J$tT9|Ju3w_np6xf&lE^w+B`)d->Vz=EQ*e5|NQ?1>t|cceAWJV6nP*DMk=1 z?`Byg|7&Bw)};|S^TpvLp|b)FS%~5axS>Mq&Odr(unqVrd5^$R_TpFekE3jvQO^MCJr zdGWr3)^>TdSNr2n?cc5O_f1+*`Biq*IAhLdzjx~F#77sNyScMX-Yz~H7-!M(Q|{>p z$0rttV>&{dGvsaej~_XcU%vcxS3GksV~}dSIdLfqUp)vwFwvh63llyh!MThfz{p0V(yUuNw06bTg8u(!y4J|Wm>E9mGA$tC;rsD__?d^*G~LY@<(#jzTBdG%%GaS zFI@PS=)5jR)1CI=|9^8|2{*I8y*Fa_t)}1iu(^cNR6F&yy#E!<=#AUz8eylpapA<} zr#^?&xfuoi|GOH;c)bRe6QezEcXy^})1XK5nawb@NO0zmGZ3nYYhcaer(3yQYcr=dZ>H zTfRMAF8_AUpDp*7cS+Ij#6|ypFa5K-`_lP5wNlJDE_<-{j*KQ>ZC*)=L1p#Eoxf!F ze06>K*XXOL8J09&KhfdpzK;I$W;5rl14i04X@$^F(-U`Lln2%ykW1t`FFSjC`}rk0 z{#Nsr%L!NXaoRMq%yTUA`Omj&xy+5={^uM2-)dx^*H~opz*6pm+yBSEmNZt~>Q_Y+ z9sec2KR)CDlsv$E9z@Nv2oU3JNS`1BG40Fchn*d$;6(qK`;T*X`x?|}9{|=j44$rj JF6*2UngFB`KtBKg literal 0 HcmV?d00001 diff --git a/public/media/pixelart/schattieren-textur/dithering@2x.png b/public/media/pixelart/schattieren-textur/dithering@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..e808cd3cc95352f12bcd56a281cb8d8517729b3c GIT binary patch literal 1295 zcmeAS@N?(olHy`uVBq!ia0y~yV2WU1VBEmL3>0y4e?13C@dWsUxc>kD-^(rNpmusgR5z+Z z9f7X>0J;FB=E2;7?CDjFs<2QAxhjzy!3uN^%d{!|TzVjeSj4H;uk)`8L@;?Lc*@-a zI(-t*RZQL>E<7wJsjS>~VxjBA^Y=gg%`dgP0`oqOpj~6P!Ec@MuUK_W zs}ju!xn9!m`w?DDPa*sET5Tdc7(-3&MRGy{pZoRaP+$mi>YO~h8yMU|5uZNjZBPM5 zi_IR8C?dvysdQDv@ID|Aj!fC&Yp$NqVhqiDm30IuN|AjJ51Xy4 zbxb0iKdw>y@~YRK(Uwra-epa_b}U4xuOYftmq6;MI@(+&j1$25TA iZo>h%9w4L2pt<7|L*lud0CaN z)(O9Ud_8&OjF(%`0`rNJ7#NsWdb&7lyy) zmT*UH1Y>i-rz+1$Dp17v>r#H1=Ix^n4;q;HEFi=UR358LL0Z#i*(+HEX?Ia&PykMdY-B=z-kRetS1caOkaY-}&3eDkP7nc;+3o|NgL z@=Ux>9!fw{xed#$qYiAFx*OjlDeRUwaoEt}0S8FR9cG&6q$RFZ%zaGf*3N2Uwr literal 0 HcmV?d00001 diff --git a/public/media/pixelart/schattieren-textur/umrisse@2x.png b/public/media/pixelart/schattieren-textur/umrisse@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..1ef937beba6bc1677bc7797f2a014ee21ea7bd79 GIT binary patch literal 1119 zcmeAS@N?(olHy`uVBq!ia0y~yV4A?dz{tSC3=}bbx@`}Tk_hk#asB`Qe_daZysV0q zmfeoxsK+ZRzTI3=<>fbb{pAY`3@l8ZE{-7;x8C0I&O78F;2J38v**98`^=Wk)UV5L z#pa!hW%Ms?aqz3KQSqDvLtb~TE8Q%8AIq06J^_Tw7+)5YF=j$I4oo1<%K`_hIk6y& zs)$nstb>nz$>E!&;uG#4OtrjYyhCUAwg(L?LLLf@*ohM|3h}M7XHW5LN)Jz)V7nWi zTAYRuDe=i_LcW82>(st?3vcd!&8txr&VTk_?EC8zE5#=`Fah0Q@@iZ9-y_6pbKZ4}wxzqh{3Et!%N)Ll*J~%rCS2USsX=CY zw%&;v{3?wnte@bO{`P+_n`QR(j0xqpS#dcWVGlw zw{wG{;u6+~YG>XwH_gX(y=u{QV+*vvZf6DsPKgC1g5P$r&(z%gZtv-bZ mi)#3K*J7qPH;tcQ!asB`Q|GU>u{)5S5Q;?~={7yS+!@Hkx5{r~@B#`?)_x3BmKKfe>cVC_f2BuSz5(^Wht z!BA_J`00?)+_t!&m;SJ-7^xD{;Y%MUgC z4}Xp{#OfQ)r?FEu^N2JTT`T?SyOqlgt4|ibagEHbT{a6CSir#hI+F|NSEK-3%YSMW z`=;u}F|T|1uJ8;Lyg7u@~F1L4BQ-G*IIn$*8-fOD${6GrG?!BnchqCKXHZ1 zYMFWVwYD1P?eD%=kHh)!%=B`gaY*lZ*loAj%_vC_>O-v`Eny<~vnmvC~ zfKz7evL>LDr~f{>^WLwleKpN6_b>c1=|BiDt%6h1YoM@xi4WV-tB#qaYR#8k`KZC| f05US0{xQtleXst-WhOyjNxgTe~DWM4fbw!{F literal 0 HcmV?d00001 diff --git a/public/media/pixelart/silhouette-formsprache/negativraum-silhouette@2x.png b/public/media/pixelart/silhouette-formsprache/negativraum-silhouette@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..8748db9e3d0574e6ca734e5aeb642260ef13cd38 GIT binary patch literal 896 zcmeAS@N?(olHy`uVBq!ia0y~yU|a#jZXC=&5e}u_K$3woz$e7@|NsB*UO$zWRk2wA z<23^VvyrEZV@SoVw|5+a4jTx#9(?dy-s)(RXzFy4%q5ab?@Jy3^@Yi~;kx%E6;B|# zRQQ*r#(G;!&`R;7)tm9A#|uP29j(7%tQ()xOIN zW)~A{7VnkMbHPCb)*0HKwUZrYrO1k{G4tmx;a_!64(^q?0dM>FE6dvpXT4k1fn=xK zy{`TUgt4piLXO#Da}mNF$j%p8F>f+LW)+iZk?Xo!gBfAO3Igk+8D)y=>=UpgvZ*1+$xc0gkyRLT* zh2aR>Z?R5YXqkW1eU8q>`|faIP|}^GB76INzrWwDqD$Zq{*|_3f8g>S>s)?~!*2}V z++OJSi>cgTe~ HDWM4fC_OTv literal 0 HcmV?d00001 diff --git a/public/media/pixelart/sprite-entwerfen/arbeitsschritte@2x.png b/public/media/pixelart/sprite-entwerfen/arbeitsschritte@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..941f71d612bab4a3c790d1f4e69aa8dd55a8a0da GIT binary patch literal 1203 zcmeAS@N?(olHy`uVBq!ia0y~yVDbR6e{e7ZNrkB|4+1II0G|-o|NsBLd;L^iR>jLL zD9+14OF>3VK*&a4>(`I3U9A(o-Q2OWB|h859>fL-+x|v_cP{2RP{cQs;FIG=B=N4?Hwbh z$^-`{RN@t@30GE$KU?uzTgGS6OXC6-S2KC#`s-_8sAS??vX=2~ejDNg>_emDL7&x<#HUwUIJ@4eObqXjlsY@P7! z-@$FSq$e_Feq+D==-8h%A`{Z;H>@o`f4AOA2#W_%LmZp!WQy&Q^yrt~{;jntPO5dv z`uN??OEX1+_SLqZSezfQ&F=k+dDqO<^tY<#UAXUMY7zaGQ(&vDsRaRNlI_o+|MPg3mDpALGn`ED zdOp2v%Kr&s=*byq_az;VpKROaov&K>ZP#*^rQ#RDs=WfL7_nIk&4rUn{Qv$}Ju+|G zo6Pg~%-(+d3e9^UbPXFth58R5ga8*I=Js=l*c`JTo8Ew$@F7yG%XSe+HI944$rjF6*2UngDPlyg~o~ literal 0 HcmV?d00001 diff --git a/public/media/pixelart/sprite-entwerfen/groessen@2x.png b/public/media/pixelart/sprite-entwerfen/groessen@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..35ca1cc740cc07b6617f15652026a1835bd46767 GIT binary patch literal 806 zcmeAS@N?(olHy`uVBq!ia0y~yV2l8=e{e7Z$$2;VG=P*=fKQ0)|NsBry?&bQV)A%v z&(4;3dA*?CtuOSHq(U9^{pQ<=Z8`QE zzNQ8~VLS1n<0a=cb@9k&I^44-*YP$&j6B||TiX)!2xk5__S@f7d0`fwUYmP(S)dRf z)c@b^^`|MdYgf0N{SS4ft=^j-3sP%${qL8!&(SF}Kc{^!%PIaz^EN~Mmwa%Vn9J{W z-~RQDpH{;>@w?&ddfR1stWY!l%4+!LY2Mg!GVngrOyO-?7*0!iZXm jpoE|bPJm1He&-E+-_gA$dFer5!e{Vw^>bP0l+XkKnu%GS literal 0 HcmV?d00001 diff --git a/public/media/pixelart/umgebung-tiles/kachelnaht@2x.png b/public/media/pixelart/umgebung-tiles/kachelnaht@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7ea026128a550559c8d994998972a18981bc2707 GIT binary patch literal 945 zcmeAS@N?(olHy`uVBq!ia0y~yU|a!Y|KMN-l6_N~HUcUB0G|-o|NsBrII|}^K6LZa zsq(Taxwa=xF)%R4db&7l*%s&3#zcV~c(}}@bVc(qHvoDFa&vETp z`0L-_&JHN>*m1|`=C<73rc1u;oB8==mE7jvj+egM{IC9MqY<#cp|PrUmF$YI%;9IY zuTeMuK4;!!n<_aGh|E8yN!FRGpE))%v2umPtSEW7v%8||%^l8YQ+_UxlBD{X7P~G? z@0&T1iybJe5%Be_!dC8tT;ty!mmW^d&G9{d4S?bX?}O&Vn3C3(}TxK1u` zV0N)BbzudE>)E!TMNHuED^t~ShJ@}Ep{du-hd_nh9N*r`0|lLy%#~#>sV5VYgutY}xM%KW1VzbeN6o;CWy~Na{aSqNjCLSMR3qRbP;&z~&Tay&0lA0k$~u?S z6ENpo`ZW_Ktg#{%VsmTrttl&XWO6G|5*tfhmOgLE0y{zD zZ=hGmmb)O^fFbeAd2jGEu+>xktytIF3YYq)0r7XKsfHi~OkA<^{`>D9*_~VDKmoqX z=t^>6pqO~B?E;-MRXT581x(aCuyDT**x=t9uQwV1QNXq2#C>2P5tuPR!zN1nWH-%Q WvR_ZumkpQ)89ZJ6T-G@yGywqT$C0c6 literal 0 HcmV?d00001 diff --git a/public/media/pixelart/umgebung-tiles/kontrast-ebenen@2x.png b/public/media/pixelart/umgebung-tiles/kontrast-ebenen@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..0c8b7fa99f366bbdebd6cb1ec3e07ffebd7490ed GIT binary patch literal 4510 zcmdT|dpwi<`yZ0S;}nGs4kbLLP{VRo4oi+v>0nNUIZX~To8wa+hZ04F4Xd1zq8w)v zl0?ifLN+8Or;#OQ##cRGTfg5wzu))I@9Vx_pL?(SzV7RFUDx~lxvuxUBzs%1sPG

X%`8MwaTJnc)UhdjkpEKXs*lbzk)F4oHJayqWg_rc?fs2k@m>Evhn#7Cb~ zkUMxQ8y=PFn^}CLpgINOWLNt#4}C9AT0+u5<8Wjs^swSSKQpZ#gSgr_*DqDc3hEAb zs=nIAGyu=1svp?%G!BZoa@rMUj}{b~1^^`5EX_`y3;#4norFzTNW`7>)}2%Y>(1-Z zSq(WnDWY2TPlH80dHlZ37`rSu;InnNQKl_5>P#fIo#dWz&9{%a=y|YN6H1hZ$s80( z4gA%R-pQP27O(fN^|IIDRKud^!01!2$558o7$e5&A-7nb?Xo|Y%w3GfRlCcQuctnB zErvXd3DbGRWX}jy4T`~s%lf^omTs{`HKZRSrh$BXBAShWp9>T}>(FMD)FEEfFanR` z%S8MjjYh}VE@O=M2e0OmJvq*0|L)G$1&({+#`0#mgzgd=;ZN4RY!V?JImYmb{zAnW z6yR47KNpL<-SzO|BC$a{uWK}gl3WiB#|BPqoW5?kKvyI1a_qeRR(mz^*A-CqY}$NM z(P!u+u*1oH7^xlr_lHgAS`Ak95qGvR*Zzt0XSir}teWCjWux^9r*EM>ug|C{3W6akt`T+uL#Wwlmz^ zAo2HZ!(hx3^@3KZdFS^_QaqS~I;QsYo60o%#IIayJT`p9js~BZpfss&w27l z-PZ%g-i#jZ3)Y!lXG?Ti-cU|I*N5nq`>f&10mGWdkj_odZi7OhlwE&fz9=u|o3go( z%Q`iOP8i62&Cvv@3>$b*v-JPeh`5-ueqqNU({xwfMuHLfYWkAo%c>|5NS zAYyM#A2sV*(|EptxKKk>vp%>kqFG;w_5fa_AOCE3a2S8rpeivIua?`X#zlZW5N(VrYy zFsO1-9|m7$fse#4gFDn_Y(Y?}aS)`ZJyh) zPEM?$YE|nzaLD>^bD(i_}y51>}A>wRVi zlgTI%;(EP(H3av0Ji6S?w>g*PHhNIIHqMjz?`FNp4+O%W-A~FxeiC# z2w)Hi*j<6@i2-i3uwa{0BOWQNDz3EjPwTJ1q=^*L<=Vop?&eS5~FTjlML zem{p2Hrd~*$fw4N%*Ar`fY)$jKKKKFeL`%IX*=xk^DEoNP;GLw>1tH7_hHnwyS-gLpV8eyLvW(>f-j zhcVx&{=y&4Zc9W?kaw(3)%DnQwp)R}qhM7tHB1PXjZ$96waBB3j~8vgxX+UY5(GR8 zD0Qp*J`}Ox21OOR)^U9U6CSeKB0tTpFN8x{M$waLo!eV>U0mAbFO7vF2+|Wb3TJk6 z%a^4-+4O{^rBF{7gZ3*6!_p{GJrmSz5Lf=Am*}?M9V57CRSuVu^+Vr??)3|ved2np z4>3%N=uV(-M$s=_TjcyVf_m7n%qE(-{hoG3KF-&5!G zbD5iMt`yZS^>>j~iP4{26^QQQ?6VStwxD6fz-qBAym>4@Y3&A|!e57ky`TQxZ%s*t zh6kf(Qg#}G?!7{0Em{OKm-zpgDVwiMi9=ei+=1#nrG9pU9aKrSQe%XgELRZP4~DrG zdR=yp*4-LFvTm!PgGYg_LSOyI?<9dzuWQmx$h7bmYtN<(OUwxx>G}=_8m{#{RNg|c zL)o2ju)zzJeS7I^R(^u6jE!E&L_0O3cuEQ({(F5-I^rXtcr{pOxf}3v+0>Z9J#_?% zd}-4q>#9;7SjK=U_K`3`lE;jpK9mA5g!!h0V|4 zNl`Wx`8o;#4>DY|NQLRVA!n!tNw(4*F}58MtNR!3L}hR&{YT@t);Un+Tm$ZLpZN>A zJg9YU6!S%4RSRTi;_ndod%*JeQR%}t+io%6Js(8?p!XNFJU5yNCUR}-r<6=nqOSxq!T@jQV#t6faUCbb~tO&F|xDc=gY={nak(!=Rp%X^J9PR;jvZ|BgX zJ9MxhElM&=!8WF0Mo>U=eir+Ny`D`6#he=dZdlaLbuOG|8RFGSy#5Z{|5!>9@z;zQ zn~0VmH0#Aoe<-s#`Ed!rh1>!dIpbg_R}SZ|U&C!~sqO`%k)DlvqiLg5r!anwU5Buf zM>}5)?8Kn*h?L#i?oRK_vZgwQ^QY+nO0Qu?xnBw9P#S}|g`upQ7R0DO)1b|+J@K;1 zY=#L=pYaI3K4{SW@=zx&DH*A_Z;M7e76}jGn%Z_3$R{ZV_c3G-koI*%(DQ0#asSEv z-U8_fZ7iYt+}!XYN-|W+q7&rIJ=Njblo?fC9V;ZmulJ@8n9%Dy)OYYB*H)?!`@Jw} zw%>eK-JNLOxHg2Y#`XBBzoX56u$x%F3*eSkD5exJiN@=(_evp@?iXQYi|#N##;G00 zclPx>D{Me^n@4xj3OJKCHcONEB0@(SFOC(_$v5f^t}Ch%()PR(BD zz16s7!s>63mnKeqKBW18_mguTm;mwN1k10QpAcaR{(1(u$Eg$MCMf2)>o zu2yTloe(o*5c<_M~IvUj?W4|s<1=zz?}?ooVYE5 z^6DG9XQCWp{F$Vjf=om-9f=)MQfaFzr}s+x+`tGVK@No=Obm-UxdjVRs?Dy(JLLIU z)c5#HJ(sJ&v)Xq2F}gV(JgHOLU$7=av2?Mggt^!aWeA6u>f6&ZP!op;cZ}{!FqcE1u z$HgDGNjC~mYtC1!g0wedydS0XKav#ir0#qjnfz2zOU(8Wx-UH{T6%)$h*KlCLM zv2y7f?Z&`%FPLio!SBTD<%O-Kf|ykAfz#aHXw@{{2%RiZco!tTFJKy(Bm!B%5pgE`@dXoTH<-B&=N|m{)Hv(tC`hv@cn|t5VlRt-%*X^6jR# zkEh&k)wopUDYP{PLM&xLZDm>VlOBdBl_~d5^Yl(%X7IA7?`kuZ^Q8;;A_nQYudaZm z-@;TJ8L(dQ!=JFrZ_gPH{kZ9JeV`Td(*MX?PV-gg`=ZycoKyRTc(#yz?L>bRVd#+- z3AjORuqKq14|Cn-4YBa_5Lfb%Vj}p;M1c&kVk*Be+W}^9D}isz~b!7=8Yp@y5efcVW^#`e3>VuXIlh!w1{=C;jajfCBN pz$?2xY4=M;{BIGlmik4*S5y{7bzBzP{KExcX>My)ddls_zW_Bv7asrs literal 0 HcmV?d00001 diff --git a/public/media/pixelart/umgebung-tiles/wiederholung@2x.png b/public/media/pixelart/umgebung-tiles/wiederholung@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..bcfa35ce63291dfdac188d6fa3a5e8c974b198ce GIT binary patch literal 1519 zcmeAS@N?(olHy`uVBq!ia0y~yVA24xe{e7Z$&W>EHv%cq0G|-o|NsAcSGk(TS!c}( zdU-SJgqw}LtcvzNJ!=LA)~TK@jv*Dd-rl|2x5z<&?ZU;0mH*xE%{I*T=>KAWwP@e$ zlgFm;J~dp)+Ol3>5DEP3xbyGC-@5(#|NZ@UR@Zp-mGiHTcl6v~3vgg$6$xfH0YzdC|VWmM&wa;LY(My`KSv+L?B-`^d7qwnr- z0@KIol^47%_x885C-0s-@zwbEN3P$$RW}DbS;G&t^Wp-T+>)#cZAqQQ*ZN-_zxbfy z|Jlgq*YU5Lfer$i;$@<-a?v&6FzqWq*)tEfJU45EOYA(mUUuH1YyI!sU$g&QXP2&^ z7b_3+D9Bx54MnXz?~Z51n?Zfg_*5z&jd$tHU@cKrEda&!8ZY2y zy{3N|pjtTsqRLZ_{+h|p^WJpNv%1ErFU(N8l^k{+;_dKW&|~%D>gU?Nyofuu_@S<_ zCc8J^-{Y>{IyR`UCNGRpRMt1^|B#ybmK~DnfT@fB zlVjoS0qsu=M1G=u0qXbn-l%?9VriZ?mQP zr*n20*EY+;BkI&t{vEZq7`HBDzXM75z{nN|sH&;h`Q9*F0p^ew0a5u$+r4U6$s616 zxyk=n5AGb7=1u!MV_&jw^ZGmUaP8UNrlMaLoA{w&zsPxK>5hqKxW4X{n>FEc)Oq%X z=U1-%ac6)sED7cRP!s68oUv zUwEJa=+a!Y<+3|Jf5g^(-xBATn*Uw>lOg+epjD6k|0Z}^TRAt+_Tg5i+7|hSrQ0@c zmEXD*<|XQ)sl=cyCTe(Bf0H+{-0c+;!#{cn(XqI|3fA2eM+vXpV#?|bZbz3%CMRo)0s zab77Jd^?WXE->2#i$Nx@9F4_#4pzbmSuiVsMOVG>j$6GQarNKC)x{G$?Tf0XMM=Zr z!~szVPRxG#{P}Zt@qgc)?4e#zX{O=m|xER&a73_*s!78/@2x.png. Each figure shows a +// principle (lines, clusters, ramps, light, silhouettes built from basic shapes), never a finished character or a game +// asset. They are teaching diagrams drawn from code, not templates for or substitutes of the learner's own drawings +// (AI rule, 2026-10-16). The output is deterministic: same code, same bytes. Labels A, B, C … match the captions. +import { mkdirSync, writeFileSync } from 'node:fs'; +import { dirname, join } from 'node:path'; +import { crc32, deflateSync } from 'node:zlib'; + +type RGB = readonly [number, number, number]; +type Pt = readonly [number, number]; +type Paint = RGB | null | ((x: number, y: number, nx: number, ny: number) => RGB | null); + +const OUT = join(import.meta.dirname, '..', 'public', 'media', 'pixelart'); +const rgb = (hex: string): RGB => [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)]; +const mix = (a: RGB, b: RGB, t: number): RGB => [0, 1, 2].map((i) => Math.round(a[i] + (b[i] - a[i]) * t)) as unknown as RGB; + +const C = { + ink: rgb('#1F1D24'), dark: rgb('#4A4652'), mid: rgb('#8A8590'), light: rgb('#C9C4CC'), white: rgb('#FAF8F5'), + accent: rgb('#F0602A'), blue: rgb('#2F6FDB'), panel: rgb('#EEEBE5'), page: rgb('#FFFFFF'), ground: rgb('#D3CEC6'), +}; +/** Five grey values from dark to light, used wherever a figure is about value only. */ +const GREYS: RGB[] = [C.ink, C.dark, C.mid, C.light, C.white]; + +/** Seeded random numbers (mulberry32), so the figures never change between runs. */ +function random(seed: number) { + let a = seed >>> 0; + return () => { + a = (a + 0x6d2b79f5) >>> 0; + let t = a; + t = Math.imul(t ^ (t >>> 15), t | 1); + t ^= t + Math.imul(t ^ (t >>> 7), t | 61); + return ((t ^ (t >>> 14)) >>> 0) / 4294967296; + }; +} + +/** Relative luminance as defined by WCAG 2.2, the same formula the lessons use. */ +function luminance([r, g, b]: RGB): number { + const lin = (v: number) => { const s = v / 255; return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; }; + return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b); +} +/** The grey with the same relative luminance. */ +function grey(c: RGB): RGB { + const y = luminance(c); + const s = y <= 0.0031308 ? 12.92 * y : 1.055 * y ** (1 / 2.4) - 0.055; + const v = Math.round(Math.min(1, Math.max(0, s)) * 255); + return [v, v, v]; +} + +class Art { + w: number; + h: number; + px: (RGB | null)[]; + constructor(w: number, h: number) { this.w = w; this.h = h; this.px = Array.from({ length: w * h }, () => null); } + static map(rows: string, legend: Record): Art { + const lines = rows.split('\n').map((l) => l.trim()).filter(Boolean); + const art = new Art(lines[0].length, lines.length); + lines.forEach((line, y) => { + if (line.length !== art.w) throw new Error(`Zeile ${y + 1} hat ${line.length} statt ${art.w} Zeichen: ${line}`); + [...line].forEach((ch, x) => { + if (ch === '.') return; + if (!(ch in legend)) throw new Error(`Zeichen ${ch} fehlt in der Legende`); + art.set(x, y, legend[ch]); + }); + }); + return art; + } + inside(x: number, y: number) { return x >= 0 && y >= 0 && x < this.w && y < this.h; } + get(x: number, y: number): RGB | null { return this.inside(x, y) ? this.px[y * this.w + x] : null; } + set(x: number, y: number, c: RGB | null) { if (this.inside(x, y)) this.px[y * this.w + x] = c; } + paint(x: number, y: number, p: Paint, nx = 0, ny = 0) { + const c = typeof p === 'function' ? p(x, y, nx, ny) : p; + if (c) this.set(x, y, c); + } + rect(x: number, y: number, w: number, h: number, p: Paint) { + for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) this.paint(i, j, p, (i + 0.5 - x) / w * 2 - 1, (j + 0.5 - y) / h * 2 - 1); + return this; + } + /** Filled ellipse; a function paint gets the position relative to the centre, -1 … 1 on each axis. */ + ellipse(cx: number, cy: number, rx: number, ry: number, p: Paint) { + for (let y = Math.floor(cy - ry); y <= Math.ceil(cy + ry); y++) for (let x = Math.floor(cx - rx); x <= Math.ceil(cx + rx); x++) { + const nx = (x + 0.5 - cx) / rx, ny = (y + 0.5 - cy) / ry; + if (nx * nx + ny * ny <= 1) this.paint(x, y, p, nx, ny); + } + return this; + } + /** Filled polygon, sampled at pixel centres. */ + polygon(points: Pt[], p: Paint) { + const ys = points.map((q) => q[1]); + for (let y = Math.floor(Math.min(...ys)); y <= Math.ceil(Math.max(...ys)); y++) { + const cy = y + 0.5, xs: number[] = []; + points.forEach(([x0, y0], i) => { + const [x1, y1] = points[(i + 1) % points.length]; + if ((y0 <= cy && y1 > cy) || (y1 <= cy && y0 > cy)) xs.push(x0 + (cy - y0) / (y1 - y0) * (x1 - x0)); + }); + xs.sort((a, b) => a - b); + for (let k = 0; k + 1 < xs.length; k += 2) for (let x = Math.ceil(xs[k] - 0.5); x + 0.5 < xs[k + 1]; x++) this.paint(x, y, p); + } + return this; + } + /** One-pixel line (Bresenham). */ + line([x0, y0]: Pt, [x1, y1]: Pt, p: Paint) { + let x = Math.round(x0), y = Math.round(y0); + const ex = Math.round(x1), ey = Math.round(y1), dx = Math.abs(ex - x), dy = -Math.abs(ey - y); + const sx = x < ex ? 1 : -1, sy = y < ey ? 1 : -1; + let err = dx + dy; + for (;;) { + this.paint(x, y, p); + if (x === ex && y === ey) break; + const e2 = 2 * err; + if (e2 >= dy) { err += dy; x += sx; } + if (e2 <= dx) { err += dx; y += sy; } + } + return this; + } + /** Thick stroke: discs of radius r along the segment. */ + stroke(a: Pt, b: Pt, r: number, p: Paint) { + const steps = Math.max(1, Math.ceil(Math.hypot(b[0] - a[0], b[1] - a[1]) * 4)); + const done = new Set(); + for (let s = 0; s <= steps; s++) { + const px = a[0] + (b[0] - a[0]) * s / steps, py = a[1] + (b[1] - a[1]) * s / steps; + for (let y = Math.floor(py - r); y <= Math.ceil(py + r); y++) for (let x = Math.floor(px - r); x <= Math.ceil(px + r); x++) { + if ((x + 0.5 - px) ** 2 + (y + 0.5 - py) ** 2 > r * r || done.has(y * 10000 + x)) continue; + done.add(y * 10000 + x); + this.paint(x, y, p); + } + } + return this; + } + /** Draws another Art on top; its empty pixels stay transparent. */ + draw(other: Art, ox = 0, oy = 0) { + for (let y = 0; y < other.h; y++) for (let x = 0; x < other.w; x++) { const c = other.get(x, y); if (c) this.set(ox + x, oy + y, c); } + return this; + } + /** Pixels of the shape that touch empty space (4-neighbourhood), from the inside. */ + edge(): Set { + const out = new Set(); + for (let y = 0; y < this.h; y++) for (let x = 0; x < this.w; x++) { + if (!this.get(x, y)) continue; + if (!this.get(x - 1, y) || !this.get(x + 1, y) || !this.get(x, y - 1) || !this.get(x, y + 1)) out.add(y * this.w + x); + } + return out; + } + /** Inside outline; a function gets the pixel and the colour it replaces. */ + outline(p: RGB | ((x: number, y: number, under: RGB) => RGB)) { + for (const i of this.edge()) { + const x = i % this.w, y = Math.floor(i / this.w); + this.px[i] = typeof p === 'function' ? p(x, y, this.px[i]!) : p; + } + return this; + } + recolor(fn: (c: RGB, x: number, y: number) => RGB | null) { + const art = new Art(this.w, this.h); + for (let y = 0; y < this.h; y++) for (let x = 0; x < this.w; x++) { const c = this.get(x, y); if (c) art.set(x, y, fn(c, x, y)); } + return art; + } + flipX() { + const art = new Art(this.w, this.h); + for (let y = 0; y < this.h; y++) for (let x = 0; x < this.w; x++) art.set(this.w - 1 - x, y, this.get(x, y)); + return art; + } + /** Nearest-neighbour enlargement by a whole factor. */ + scale(k: number) { + const art = new Art(this.w * k, this.h * k); + for (let y = 0; y < art.h; y++) for (let x = 0; x < art.w; x++) art.set(x, y, this.get(Math.floor(x / k), Math.floor(y / k))); + return art; + } + /** Repeats the art as tiles, cols × rows. */ + tile(cols: number, rows: number) { + const art = new Art(this.w * cols, this.h * rows); + for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) art.draw(this, i * this.w, j * this.h); + return art; + } +} + +/** Light from the top left and slightly in front, as in most of the figures. */ +const LIGHT: readonly [number, number, number] = (() => { const v = [-0.55, -0.65, 0.52]; const n = Math.hypot(...v); return [v[0] / n, v[1] / n, v[2] / n] as const; })(); +/** Lambert term for a point on an ellipsoid, given its position -1 … 1 relative to the centre. */ +const lambert = (nx: number, ny: number) => { const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny)); return nx * LIGHT[0] + ny * LIGHT[1] + nz * LIGHT[2]; }; +/** Picks tones[i] for the first threshold the value exceeds; tones go from light to dark. */ +const band = (v: number, thresholds: number[], tones: RGB[]) => { const i = thresholds.findIndex((t) => v > t); return tones[i === -1 ? tones.length - 1 : i]; }; + +// --------------------------------------------------------------------------------------------------------------- +// Rendering: panels in rows, each art pixel `scale` CSS pixels wide, files at twice the CSS size (@2x). + +interface Panel { art: Art; label?: string; grid?: boolean; filePx?: number } +interface Layout { rows: Panel[][]; scale: number; grid?: boolean; gap?: number } + +const GLYPHS: Record = { + A: '.k.|k.k|kkk|k.k|k.k', B: 'kk.|k.k|kk.|k.k|kk.', C: '.kk|k..|k..|k..|.kk', D: 'kk.|k.k|k.k|k.k|kk.', E: 'kkk|k..|kk.|k..|kkk', F: 'kkk|k..|kk.|k..|k..', + 1: '.k.|kk.|.k.|.k.|kkk', 2: 'kk.|..k|.k.|k..|kkk', 3: 'kk.|..k|.k.|..k|kk.', 4: 'k.k|k.k|kkk|..k|..k', 5: 'kkk|k..|kk.|..k|kk.', + 6: '.kk|k..|kk.|k.k|.k.', 7: 'kkk|..k|.k.|.k.|.k.', 8: '.k.|k.k|.k.|k.k|.k.', 9: '.k.|k.k|.kk|..k|kk.', +}; +const GLYPH = 4; // file pixels per glyph pixel: 3 × 5 glyph → 6 × 10 CSS pixels + +function encodePng(w: number, h: number, px: RGB[]): Buffer { + const colors = new Map(); + for (const c of px) { const k = c.join(); if (!colors.has(k)) colors.set(k, colors.size); if (colors.size > 256) break; } + const indexed = colors.size <= 256; + const stride = indexed ? w : w * 3; + const raw = Buffer.alloc((stride + 1) * h); + for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) { + const c = px[y * w + x], o = y * (stride + 1) + 1; + if (indexed) raw[o + x] = colors.get(c.join())!; + else { raw[o + x * 3] = c[0]; raw[o + x * 3 + 1] = c[1]; raw[o + x * 3 + 2] = c[2]; } + } + const chunk = (type: string, data: Buffer) => { + const body = Buffer.concat([Buffer.from(type, 'latin1'), data]); + const head = Buffer.alloc(4); head.writeUInt32BE(data.length); + const tail = Buffer.alloc(4); tail.writeUInt32BE(crc32(body)); + return Buffer.concat([head, body, tail]); + }; + const ihdr = Buffer.alloc(13); + ihdr.writeUInt32BE(w, 0); ihdr.writeUInt32BE(h, 4); ihdr[8] = 8; ihdr[9] = indexed ? 3 : 2; + const parts = [Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]), chunk('IHDR', ihdr)]; + if (indexed) parts.push(chunk('PLTE', Buffer.from([...colors.keys()].flatMap((k) => k.split(',').map(Number))))); + parts.push(chunk('IDAT', deflateSync(raw, { level: 9 })), chunk('IEND', Buffer.alloc(0))); + return Buffer.concat(parts); +} + +const written: string[] = []; +function render(name: string, layout: Layout) { + const gap = (layout.gap ?? 8) * 2, margin = 12, labelH = layout.rows.flat().some((p) => p.label) ? 5 * GLYPH + 12 : 0; + const size = (p: Panel) => { const k = p.filePx ?? layout.scale * 2; return [p.art.w * k, p.art.h * k] as const; }; + const rowW = layout.rows.map((row) => row.reduce((sum, p, i) => sum + size(p)[0] + (i ? gap : 0), 0)); + const rowH = layout.rows.map((row) => Math.max(...row.map((p) => size(p)[1])) + labelH); + const W = Math.max(...rowW) + margin * 2, H = rowH.reduce((a, b) => a + b, 0) + gap * (layout.rows.length - 1) + margin * 2; + const out: RGB[] = Array.from({ length: W * H }, () => C.page); + let top = margin; + layout.rows.forEach((row, r) => { + let left = margin + Math.floor((Math.max(...rowW) - rowW[r]) / 2); + for (const p of row) { + const k = p.filePx ?? layout.scale * 2, [pw, ph] = size(p), y0 = top + rowH[r] - labelH - ph; + const grid = (p.grid ?? layout.grid) && k >= 6; + for (let fy = 0; fy < ph; fy++) for (let fx = 0; fx < pw; fx++) { + let c = p.art.get(Math.floor(fx / k), Math.floor(fy / k)) ?? C.panel; + if (grid && (fx % k === 0 || fy % k === 0)) c = mix(c, C.ink, 0.14); + out[(y0 + fy) * W + left + fx] = c; + } + if (p.label) { + const glyphs = [...p.label].map((ch) => GLYPHS[ch].split('|')); + const lw = glyphs.length * 4 * GLYPH - GLYPH; + glyphs.forEach((g, gi) => g.forEach((line, gy) => [...line].forEach((ch, gx) => { + if (ch !== 'k') return; + for (let j = 0; j < GLYPH; j++) for (let i = 0; i < GLYPH; i++) { + out[(top + rowH[r] - labelH + 10 + gy * GLYPH + j) * W + left + Math.floor((pw - lw) / 2) + (gi * 4 + gx) * GLYPH + i] = C.ink; + } + }))); + } + left += pw + gap; + } + top += rowH[r] + gap; + }); + const file = join(OUT, `${name}@2x.png`); + mkdirSync(dirname(file), { recursive: true }); + writeFileSync(file, encodePng(W, H, out)); + written.push(`${name}@2x.png ${W / 2}×${H / 2} CSS-px`); +} +const labelled = (arts: Art[], labels = 'ABCDEF') => arts.map((art, i) => ({ art, label: labels[i] })); + +// --------------------------------------------------------------------------------------------------------------- +// Mannequin: a jointed wooden doll built from ellipses, a torso polygon and strokes. Used for proportions, poses, +// silhouettes and views. It is deliberately neutral: no face, costume or species. + +interface Doll { + head: [number, number, number, number]; // cx, cy, rx, ry + torso: Pt[]; + limbs: [Pt, Pt, number][]; // from, to, radius +} +type Part = 'head' | 'torso' | 'limbs'; +function doll(w: number, h: number, d: Doll, paint: Partial> & { all?: Paint }) { + const art = new Art(w, h); + for (const [a, b, r] of d.limbs) art.stroke(a, b, r, paint.limbs ?? paint.all ?? C.mid); + art.polygon(d.torso, paint.torso ?? paint.all ?? C.mid); + const [cx, cy, rx, ry] = d.head; + art.ellipse(cx, cy, rx, ry, paint.head ?? paint.all ?? C.mid); + return art; +} +/** Standing doll, `heads` head heights tall, centred at cx, feet on the bottom row. */ +function standing(cx: number, height: number, heads: number, width = 1): Doll { + const u = height / heads, chibi = heads < 3.5; + const headRx = u * (chibi ? 0.58 : 0.4) * width, shoulderY = u * (chibi ? 1.0 : 1.2), hipY = chibi ? height * 0.7 : height * 0.5; + const sw = (chibi ? u * 0.85 : u * 1.7) * width, hw = sw * 0.78, lr = Math.max(0.9, u * (chibi ? 0.16 : 0.19)) * width ** 0.5; + const bottom = height - 0.6; + return { + head: [cx, u / 2, headRx, u / 2], + torso: [[cx - sw / 2, shoulderY], [cx + sw / 2, shoulderY], [cx + hw / 2, hipY], [cx - hw / 2, hipY]], + limbs: [ + [[cx - hw / 4, hipY], [cx - hw / 3.2, bottom - lr * 0.6], lr], [[cx + hw / 4, hipY], [cx + hw / 3.2, bottom - lr * 0.6], lr], + [[cx - sw / 2, shoulderY + lr], [cx - sw / 2 - lr * 0.6, hipY + (chibi ? 0 : u * 0.35)], lr * 0.8], + [[cx + sw / 2, shoulderY + lr], [cx + sw / 2 + lr * 0.6, hipY + (chibi ? 0 : u * 0.35)], lr * 0.8], + ], + }; +} +/** Edge shading for a flat-coloured shape: lit where the pixel above-left is empty, shaded where below-right is. */ +function edgeShade(art: Art, ramp: (base: RGB) => [RGB, RGB, RGB]) { + return art.recolor((c, x, y) => { + const [lit, base, shade] = ramp(c); + const same = (i: number, j: number) => art.get(i, j) === c; + if (!same(x + 1, y) || !same(x, y + 1)) return shade; + if (!same(x - 1, y) || !same(x, y - 1)) return lit; + return base; + }); +} + +// --------------------------------------------------------------------------------------------------------------- +// Figures, by module. + +function beobachten() { + const k = C.ink, o = C.accent; + const chair = ` + .k.......... + .k.......... + .k.......... + .k.......... + .k.......... + .k.......... + .kkkkkkkkkk. + .k........k. + .k........k. + .k........k. + .kkkkkkkkkk. + .k........k. + .k........k. + .k........k.`; + const gaps = chair.replace(/(?<=k)\.+(?=k)/g, (m) => 'o'.repeat(m.length)); + const onlyGaps = gaps.replace(/k/g, '.'); + render('beobachten/negativraum', { scale: 6, rows: [labelled([Art.map(chair, { k }), Art.map(gaps, { k, o }), Art.map(onlyGaps, { o })])] }); +} + +function grundkoerperRaum() { + // 14 pixels tall including a one-pixel outline: `top` rows of top face and `front` rows of front face inside. + const box = (top: number, front: number) => { + const art = new Art(16, 16).rect(1, 1, 14, top + front + 2, C.mid); + art.rect(1, 1, 14, front ? top + 1 : top + 2, C.light); + return art.outline(C.ink); + }; + render('grundkoerper-raum/draufsicht-projektionen', { scale: 6, rows: [labelled([box(12, 0), box(7, 5), box(0, 12)])] }); + + const onShadow = (object: Art, cx: number, cy: number, rx: number) => new Art(20, 22).ellipse(cx, cy, rx, rx * 0.35, C.ground).draw(object.outline(C.ink)); + const cube = onShadow(new Art(20, 22).rect(3, 3, 14, 6, C.light).rect(3, 9, 14, 9, C.mid), 11, 18.5, 9); + const body = (_x: number, _y: number, nx: number) => band(lambert(nx, 0), [0.75, 0.3], [C.light, C.mid, C.dark]); + const cylinder = onShadow(new Art(20, 22).ellipse(10, 17, 7, 3, body).rect(3, 5, 14, 12, body).ellipse(10, 5, 7, 3, C.white), 11, 18.5, 9); + const sphere = onShadow(new Art(20, 22).ellipse(10, 11, 7.5, 7.5, (_x, _y, nx, ny) => band(lambert(nx, ny), [0.93, 0.6, 0.25], [C.white, C.light, C.mid, C.dark])), 11, 18.5, 8); + render('grundkoerper-raum/grundkoerper', { scale: 5, rows: [labelled([cube, cylinder, sphere])] }); +} + +function figurProportion() { + // All three stand on the same base line; guides mark every head height from the crown down to the feet. + const fig = (height: number, heads: number) => { + const out = new Art(26, 61), top = 61 - height, unit = height / heads; + for (let y = top; y < 61; y += unit) out.line([0, Math.round(y)], [25, Math.round(y)], C.ground); + out.line([0, 60], [25, 60], C.ground); + return out.draw(doll(26, height, standing(13, height, heads), { all: C.mid }).outline(C.ink), 0, top); + }; + render('figur-proportion/kopfeinheiten', { scale: 2, gap: 10, rows: [labelled([fig(60, 7.5), fig(48, 4), fig(30, 2.5)])] }); + + const stiff: Doll = { + head: [15, 5, 3.5, 4.5], torso: [[10, 10], [20, 10], [18.5, 24], [11.5, 24]], + limbs: [[[13, 24], [13, 42], 1.6], [[17, 24], [17, 42], 1.6], [[10, 11], [9, 27], 1.2], [[20, 11], [21, 27], 1.2]], + }; + const lean: Doll = { + head: [22, 6, 3.5, 4.5], torso: [[17, 11], [25.5, 13], [19, 25], [12.5, 24]], + limbs: [[[15, 25], [14.5, 32], 1.6], [[14.5, 32], [7, 42.5], 1.6], [[18, 25], [23, 33], 1.6], [[23, 33], [22, 42.5], 1.6], [[25, 14], [29, 22], 1.2], [[17.5, 12], [21, 21], 1.2]], + }; + const a = doll(30, 44, stiff, { all: C.light }).outline(C.mid).line([15, 1], [15, 43], C.accent); + const b = doll(30, 44, lean, { all: C.light }).outline(C.mid); + let prev: Pt = [23, 2]; + for (let i = 1; i <= 24; i++) { // quadratic Bézier: (23,2) → (22,25) → (7,43), a C bowing towards the push + const t = i / 24, p: Pt = [(1 - t) ** 2 * 23 + 2 * (1 - t) * t * 22 + t * t * 7, (1 - t) ** 2 * 2 + 2 * (1 - t) * t * 25 + t * t * 43]; + b.line(prev, p, C.accent); prev = p; + } + render('figur-proportion/handlungslinie', { scale: 4, rows: [labelled([a, b])] }); +} + +function lichtWerte() { + const sphere = (two: boolean) => { + const art = new Art(38, 34).ellipse(24.5, 28.5, 12.5, 4, C.dark).ellipse(19, 27.3, 5, 1.5, C.ink); + return art.ellipse(17, 15, 12, 12, (_x, _y, nx, ny) => { + const d = lambert(nx, ny); + if (two) return d > 0.12 ? C.light : rgb('#5A5562'); + return band(d, [0.93, 0.55, 0.12, -0.25], [C.white, C.light, C.mid, rgb('#3E3A45'), rgb('#6E6976')]); + }); + }; + render('licht-werte/licht-auf-kugel', { scale: 4, rows: [labelled([sphere(false), sphere(true)])] }); + + const scale = [C.white, mix(C.white, C.light, 0.5), C.light, mix(C.light, C.mid, 0.5), C.mid, mix(C.mid, C.dark, 0.5), C.dark, mix(C.dark, C.ink, 0.5), C.ink]; + render('licht-werte/werteskala', { scale: 4, gap: 0, rows: [scale.map((c, i) => ({ art: new Art(8, 8).rect(0, 0, 8, 8, c), label: String(i + 1) }))] }); + + // Scene as tone indices 0 (dark) … 4 (light): a ball on a box in front of a wall, light from the top left. + // B keeps three groups: lit planes light, planes turned away mid, shadows dark. A scatters the same scene. + const tones = (rnd: (() => number) | null) => { + const t: number[][] = Array.from({ length: 26 }, (_, y) => Array.from({ length: 36 }, () => (y < 18 ? 2 : 4))); + const put = (x: number, y: number, v: number) => { if (t[y]?.[x] !== undefined) t[y][x] = v; }; + for (let y = 15; y < 25; y++) for (let x = 6; x < 20; x++) put(x, y, y < 19 ? 4 : 2); + for (let y = 19; y < 25; y++) for (let x = 20; x < 27; x++) if (x - 20 <= (y - 19) + 1) put(x, y, 0); + for (let y = 0; y < 26; y++) for (let x = 0; x < 36; x++) { + if (((x + 0.5 - 16.5) / 3.5) ** 2 + ((y + 0.5 - 16.2) / 1.1) ** 2 <= 1) put(x, y, 0); + const nx = (x + 0.5 - 12) / 5.5, ny = (y + 0.5 - 9.6) / 5.5; + if (nx * nx + ny * ny <= 1) put(x, y, lambert(nx, ny) > 0.2 ? 4 : 0); + } + if (rnd) for (const row of t) row.forEach((v, x) => { if (rnd() < 0.55) row[x] = Math.max(0, Math.min(4, v + (rnd() < 0.5 ? -1 : 1))); }); + const art = new Art(36, 26); + t.forEach((row, y) => row.forEach((v, x) => art.set(x, y, GREYS[v]))); + return art; + }; + render('licht-werte/wertegruppen', { scale: 4, rows: [labelled([tones(random(7)), tones(null)])] }); +} + +function editorEinrichten() { + // Test pattern instead of a figure: checkerboard, a 2:1 line, a filled circle and a framed square. + const pattern = new Art(16, 16).rect(0, 0, 16, 16, C.light); + for (let y = 1; y < 6; y++) for (let x = 1; x < 6; x++) pattern.set(x, y, (x + y) % 2 ? C.ink : C.white); + for (let i = 0; i < 8; i++) pattern.set(6 + i, 5 - Math.floor(i / 2), C.blue); + pattern.ellipse(11, 11, 3.6, 3.6, C.accent).rect(1, 9, 5, 6, C.white).rect(1, 9, 5, 6, (x, y) => (x === 1 || y === 9 || x === 5 || y === 14 ? C.ink : null)); + pattern.rect(0, 0, 16, 16, (x, y) => (x === 0 || y === 0 || x === 15 || y === 15 ? C.ink : null)); + const k8 = 12; // file pixels per art pixel: 6 CSS pixels + const nearest = pattern.scale(k8); + const smooth = new Art(nearest.w, nearest.h); + for (let y = 0; y < smooth.h; y++) for (let x = 0; x < smooth.w; x++) { // bilinear, as an image viewer would scale + const sx = Math.min(pattern.w - 1, Math.max(0, (x + 0.5) / k8 - 0.5)), sy = Math.min(pattern.h - 1, Math.max(0, (y + 0.5) / k8 - 0.5)); + const x0 = Math.floor(sx), y0 = Math.floor(sy), x1 = Math.min(pattern.w - 1, x0 + 1), y1 = Math.min(pattern.h - 1, y0 + 1), fx = sx - x0, fy = sy - y0; + const top = mix(pattern.get(x0, y0)!, pattern.get(x1, y0)!, fx), bottom = mix(pattern.get(x0, y1)!, pattern.get(x1, y1)!, fx); + smooth.set(x, y, mix(top, bottom, fy)); + } + render('editor-einrichten/skalieren', { scale: 6, rows: [[{ art: nearest, label: 'A', filePx: 1 }, { art: smooth, label: 'B', filePx: 1 }]] }); +} + +function linienCluster() { + const k = C.ink, o = C.accent; + const runsLine = (runs: number[], w: number, h: number, vertical = false) => { + const art = new Art(w, h); + let x = 0, y = h - 1; + for (const r of runs) { + for (let i = 0; i < r; i++) { art.set(x, y, k); if (vertical) y--; else x++; } + if (vertical) x++; else y--; + } + return art; + }; + render('linien-cluster/steigungen', { scale: 6, grid: true, rows: [labelled([ + runsLine(Array(12).fill(1), 12, 12), runsLine(Array(6).fill(2), 12, 12), runsLine(Array(4).fill(3), 12, 12), runsLine([3, 1, 2, 1, 3, 2], 12, 12), + ])] }); + + const arc = ` + kkkk........ + ....kk...... + ......k..... + .......k.... + ........k... + .........k.. + ..........k. + ..........k. + ...........k + ...........k + ...........k + ...........k`; + const doubles = ` + kkkk........ + ...okk...... + .....ok..... + .......k.... + ........k... + ........ok.. + .........ok. + ..........k. + ..........ok + ...........k + ...........k + ...........k`; + render('linien-cluster/doppelte-pixel', { scale: 6, grid: true, rows: [labelled([Art.map(doubles, { k, o }), Art.map(arc, { k })])] }); + + render('linien-cluster/kurven-laufstrecken', { scale: 6, grid: true, rows: [labelled([runsLine([1, 1, 1, 2, 3, 4], 12, 7), runsLine([1, 2, 1, 3, 1, 4], 12, 7)])] }); + + const ball = (noise: boolean) => { + const rnd = random(3), tones = [C.white, C.light, C.mid, C.dark]; + const art = new Art(18, 18).ellipse(9, 9, 8, 8, (_x, _y, nx, ny) => { + const c = band(lambert(nx, ny), [0.9, 0.55, 0.15], tones); + if (!noise || rnd() > 0.22) return c; + return tones[Math.min(3, Math.max(0, tones.indexOf(c) + (rnd() < 0.5 ? -1 : 1)))]; + }); + return art.outline(C.ink); + }; + render('linien-cluster/cluster', { scale: 6, grid: true, rows: [labelled([ball(true), ball(false)])] }); + + const m = C.mid, l = C.light; + const banding = Art.map(` + kk.......... + mmkk........ + llmmkk...... + llllmmkk.... + llllllmmkk.. + llllllllmmkk + llllllllllmm`, { k, m, l }); + const fixed = Art.map(` + kk.......... + llkk........ + llllkk...... + mlllllkk.... + mmllllllkk.. + mmmlllllllkk + mmmmllllllll`, { k, m, l }); + render('linien-cluster/banding', { scale: 6, grid: true, rows: [labelled([banding, fixed])] }); + + const hill = ` + ............ + ........kkkk + .....kkkkkkk + ...kkkkkkkkk + ..kkkkkkkkkk + .kkkkkkkkkkk + kkkkkkkkkkkk + kkkkkkkkkkkk`; + // Same shape as the hill; only the long runs (3 and 2 pixels) get in-between tones above their ends. + const aa = ` + ............ + ......lmkkkk + ....mkkkkkkk + ...kkkkkkkkk + ..kkkkkkkkkk + .kkkkkkkkkkk + kkkkkkkkkkkk + kkkkkkkkkkkk`; + render('linien-cluster/kantenglaettung', { scale: 6, grid: true, rows: [labelled([Art.map(hill, { k }), Art.map(aa, { k, m, l })])] }); +} + +function farbePaletten() { + const flat = ['#1F3A2E', '#2E5A44', '#3F7C5C', '#569E76', '#7DBE95', '#B3DDBF'].map(rgb); + // Hue steps of about 18° from blue-green to yellow-green, saturation highest in the dark tones (Slynyrd, Pixelblog 1). + const shifted = ['#1D494C', '#2C6356', '#3F7C5C', '#549E60', '#7BC76F', '#BDEB9B'].map(rgb); + const panel = (ramp: RGB[]) => { + const art = new Art(36, 28); + ramp.forEach((c, i) => art.rect(i * 6, 0, 6, 6, c)); + art.ellipse(18, 18.5, 9, 9, (_x, _y, nx, ny) => band(lambert(nx, ny), [0.93, 0.7, 0.4, 0.1], [ramp[5], ramp[4], ramp[3], ramp[2], ramp[1]])); + for (const i of new Art(36, 28).ellipse(18, 18.5, 9, 9, C.ink).edge()) art.px[i] = ramp[0]; + return art; + }; + render('farbe-paletten/rampen', { scale: 4, rows: [labelled([panel(flat), panel(shifted)])] }); + + const palette = ['#2B2445', '#C8463C', '#3E8C45', '#3B6FD8', '#E8B04A', '#7FC4D8', '#8A5A3C', '#F2EFA8'].map(rgb); + render('farbe-paletten/graustufen', { scale: 4, gap: 2, rows: [palette.map((c, i) => ({ art: new Art(8, 18).rect(0, 0, 8, 8, c).rect(0, 10, 8, 8, grey(c)), label: String(i + 1) }))] }); + return palette; +} + +function schattierenTextur() { + const blob = (pillow: boolean) => new Art(22, 18).ellipse(11, 9, 10, 8, (_x, _y, nx, ny) => { + if (pillow) return band(1 - Math.hypot(nx, ny), [0.62, 0.35, 0.12], [C.white, C.light, C.mid, C.dark]); + return band(lambert(nx, ny), [0.9, 0.55, 0.15], [C.white, C.light, C.mid, C.dark]); + }).outline(C.ink); + render('schattieren-textur/kissen-und-form', { scale: 6, rows: [labelled([blob(true), blob(false)])] }); + + const BAYER = [[0, 8, 2, 10], [12, 4, 14, 6], [3, 11, 1, 9], [15, 7, 13, 5]]; + const strip = (kind: 'stufe' | 'raster' | 'rauschen') => { + const rnd = random(11), art = new Art(48, 8); + for (let y = 0; y < 8; y++) for (let x = 0; x < 48; x++) { + const t = x / 47; // 0 dark … 1 light + const v = kind === 'stufe' ? (t < 0.5 ? 0 : 1) : kind === 'raster' ? (t * 16 > BAYER[y % 4][x % 4] + 0.5 ? 1 : 0) : (rnd() < t ? 1 : 0); + art.set(x, y, v ? C.light : C.dark); + } + return art; + }; + render('schattieren-textur/dithering', { scale: 6, gap: 6, rows: [[{ art: strip('stufe'), label: 'A' }], [{ art: strip('raster'), label: 'B' }], [{ art: strip('rauschen'), label: 'C' }]] }); + + const stones = voronoiTile(16, 7, 5, true); + const noise = (() => { const rnd = random(5), art = new Art(16, 16); for (let i = 0; i < 256; i++) art.px[i] = GREYS[1 + Math.floor(rnd() * 4)]; return art; })(); + render('schattieren-textur/detailgrad', { scale: 3, rows: [labelled([noise.tile(2, 2), stones.tile(2, 2), new Art(32, 32).rect(0, 0, 32, 32, C.mid)])] }); + + const ramp = ['#3A2A3E', '#7A4A4E', '#B8735A', '#E3A878', '#F6D9A8'].map(rgb); + const pot = (style: 'schwarz' | 'farbig' | 'selektiv') => { + const art = new Art(20, 20).rect(0, 0, 20, 20, rgb('#7E8E72')); + const shape = new Art(20, 20).ellipse(10, 11.5, 7.5, 7, (_x, _y, nx, ny) => band(lambert(nx, ny), [0.85, 0.5, 0.1], [ramp[4], ramp[3], ramp[2], ramp[1]])).rect(6, 2, 8, 4, (_x, _y, nx) => band(lambert(nx, -0.4), [0.6, 0.2], [ramp[3], ramp[2], ramp[1]])); + shape.outline((x, y) => style === 'schwarz' ? C.ink : style === 'farbig' ? ramp[0] : (x + y < 20 ? ramp[2] : ramp[0])); + return art.draw(shape); + }; + render('schattieren-textur/umrisse', { scale: 5, rows: [labelled([pot('schwarz'), pot('farbig'), pot('selektiv')])] }); +} + +/** Stone tile from Voronoi cells. `wrap` measures distances across the tile edges, so the tile repeats without seams. */ +function voronoiTile(size: number, cells: number, seed: number, wrap: boolean, tones = GREYS) { + const rnd = random(seed), pts = Array.from({ length: cells }, () => [rnd() * size, rnd() * size] as const); + const nearest = (x: number, y: number) => { + const d = pts.map(([px, py]) => { + let dx = Math.abs(x - px), dy = Math.abs(y - py); + if (wrap) { dx = Math.min(dx, size - dx); dy = Math.min(dy, size - dy); } + return Math.hypot(dx, dy); + }); + return d.indexOf(Math.min(...d)); + }; + const id = (x: number, y: number) => wrap ? nearest((x + size) % size + 0.5, (y + size) % size + 0.5) : (x < 0 || y < 0 || x >= size || y >= size ? -1 : nearest(x + 0.5, y + 0.5)); + const art = new Art(size, size); + for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) { + const c = id(x, y); + if (id(x + 1, y) !== c || id(x, y + 1) !== c) art.set(x, y, tones[1]); + else if (id(x - 1, y) !== c || id(x, y - 1) !== c) art.set(x, y, tones[4]); + else art.set(x, y, tones[3]); + } + return art; +} + +function silhouetteFormsprache() { + const k = C.ink; + const round = new Art(26, 26).ellipse(13, 15.5, 10, 9.5, k).ellipse(13, 5.5, 4.5, 4.5, k).ellipse(8, 24.5, 3, 1.5, k).ellipse(18, 24.5, 3, 1.5, k); + const square = new Art(26, 26).rect(5, 8, 16, 13, k).rect(9, 2, 8, 6, k).rect(6, 21, 5, 5, k).rect(15, 21, 5, 5, k); + const spiky = new Art(26, 26).polygon([[2, 6], [24, 6], [13, 20]], k).polygon([[10, 6], [13, 0], [16, 6]], k).polygon([[3, 6], [1, 1], [7, 6]], k).polygon([[19, 6], [25, 1], [23, 6]], k) + .stroke([11, 19], [9, 25.4], 1.2, k).stroke([15, 19], [17, 25.4], 1.2, k); + render('silhouette-formsprache/grundformen', { scale: 4, gap: 3, rows: [labelled([round, square, spiky])] }); + + const base = standing(16, 44, 4); + const neck: [Pt, Pt, number] = [[16, 10], [16, 13.5], 1.3]; + const closed: Doll = { ...base, limbs: [neck, base.limbs[0], base.limbs[1], [[11, 13], [13, 27], 1.4], [[21, 13], [19, 27], 1.4]] }; + const open: Doll = { ...base, limbs: [neck, [[13, 22], [8, 43], 1.9], [[19, 22], [24, 43], 1.9], [[10.5, 12.5], [3, 22], 1.4], [[21.5, 12.5], [29, 4], 1.4]] }; + render('silhouette-formsprache/negativraum-silhouette', { scale: 3, rows: [labelled([doll(32, 45, closed, { all: k }), doll(32, 45, open, { all: k })])] }); +} + +function poseAusdruck() { + const skin = rgb('#E9C9A8'), lip = rgb('#B98A68'); + const face = (marks: [number, number, RGB][]) => { + const art = new Art(10, 10).ellipse(5, 5, 5, 5, skin).outline(C.ink); + for (const [x, y, c] of marks) art.set(x, y, c); + return art; + }; + const k = C.ink; + const faces = [ + face([[3, 5, k], [6, 5, k]]), + face([[3, 5, k], [6, 5, k], [2, 3, k], [3, 4, k], [7, 3, k], [6, 4, k], [4, 7, lip], [5, 7, lip]]), + face([[3, 4, k], [3, 5, k], [6, 4, k], [6, 5, k], [4, 7, lip], [5, 7, lip], [4, 8, lip], [5, 8, lip]]), + face([[2, 5, k], [3, 5, k], [6, 5, k], [7, 5, k], [4, 7, lip], [5, 7, lip]]), + ]; + render('pose-ausdruck/gesichter', { scale: 6, rows: [labelled(faces)] }); + + const proud: Doll = { head: [16, 5, 4, 5], torso: [[10, 11], [22, 11], [20, 26], [12, 26]], limbs: [[[13, 26], [9, 45], 1.9], [[19, 26], [23, 45], 1.9], [[10, 12], [7, 20], 1.4], [[7, 20], [12, 25], 1.3], [[22, 12], [25, 20], 1.4], [[25, 20], [20, 25], 1.3]] }; + const shy: Doll = { head: [19, 13, 4, 5], torso: [[10, 15], [20, 18], [18, 31], [11, 30]], limbs: [[[13, 30], [16, 38], 1.7], [[16, 38], [12, 45], 1.6], [[17, 30], [16, 38], 1.7], [[16, 38], [20, 45], 1.6], [[11, 17], [16, 25], 1.3], [[19, 19], [14, 24], 1.3]] }; + const ready: Doll = { head: [19, 9, 4, 5], torso: [[13, 14], [24, 15], [19, 29], [11, 28]], limbs: [[[13, 28], [6, 37], 1.9], [[6, 37], [5, 45], 1.8], [[18, 29], [23, 37], 1.9], [[23, 37], [26, 45], 1.8], [[24, 15], [28, 22], 1.4], [[28, 22], [27, 14], 1.3], [[13, 15], [10, 23], 1.4], [[10, 23], [15, 20], 1.3]] }; + render('pose-ausdruck/haltung', { scale: 3, rows: [labelled([proud, shy, ready].map((p) => doll(32, 46, p, { all: C.ink })))] }); +} + +/** Coloured doll used in the sprite and view figures: skin, hair, shirt, trousers, each with a four-tone ramp. */ +const PARTS = { head: rgb('#E3B58C'), torso: rgb('#4F7FBF'), limbs: rgb('#7A5B48'), hair: rgb('#3C2F2A') }; +const RAMPS = new Map([ + [PARTS.head.join(), [rgb('#F6D9B8'), rgb('#E3B58C'), rgb('#B9845F'), rgb('#6B4434')]], + [PARTS.torso.join(), [rgb('#8DB5E8'), rgb('#4F7FBF'), rgb('#33558F'), rgb('#1F2E52')]], + [PARTS.limbs.join(), [rgb('#A88468'), rgb('#7A5B48'), rgb('#55402F'), rgb('#2E221A')]], + [PARTS.hair.join(), [rgb('#5E4A40'), rgb('#3C2F2A'), rgb('#2A201C'), rgb('#161012')]], +]); +const VALUE = new Map([[PARTS.head.join(), GREYS[3]], [PARTS.torso.join(), GREYS[2]], [PARTS.limbs.join(), GREYS[1]], [PARTS.hair.join(), GREYS[0]]]); +const valueOf = (c: RGB) => VALUE.get(c.join()) ?? c; + +function spriteDoll(view: 'front' | 'back' | 'side', height = 24) { + const cx = 8, d = standing(cx, height, 3.2, view === 'side' ? 0.62 : 1); + if (view === 'side') { + const hipY = d.torso[2][1], shoulderY = d.torso[0][1], r = d.limbs[0][2]; + d.limbs = [[[cx, hipY], [cx - 1, height - 0.6 - r * 0.6], r], [[cx, hipY], [cx + 1, height - 0.6 - r * 0.6], r], [[cx + 0.5, shoulderY + r], [cx + 1, hipY + 1], r * 0.8]]; + } + const hipY = d.torso[2][1]; + const art = doll(16, height, d, { ...PARTS, limbs: (_x, y) => (y < hipY - 0.5 ? PARTS.head : PARTS.limbs) }); + const [hx, hy] = d.head; + for (let y = 0; y < height; y++) for (let x = 0; x < 16; x++) { + if (art.get(x, y) !== PARTS.head) continue; + const hair = view === 'back' ? y < hy + 2 : view === 'side' ? y < hy - 1 || (x < hx - 0.5 && y < hy + 2) : y < hy - 1; + if (hair) art.set(x, y, PARTS.hair); + } + if (view === 'front') { art.set(Math.round(hx) - 2, Math.round(hy), C.ink); art.set(Math.round(hx) + 1, Math.round(hy), C.ink); } + if (view === 'side') art.set(Math.round(hx) + 1, Math.round(hy), C.ink); + return art; +} +function finish(art: Art) { + const shaded = edgeShade(art, (c) => { const r = RAMPS.get(c.join()); return r ? [r[0], r[1], r[2]] : [c, c, c]; }); + return shaded.outline((x, y) => { const under = art.get(x, y)!; return RAMPS.get(under.join())?.[3] ?? C.ink; }); +} + +function spriteEntwerfen() { + const base = spriteDoll('front'); + const silhouette = base.recolor(() => C.ink); + const values = edgeShade(base.recolor(valueOf), (c) => { const i = GREYS.indexOf(c); return i < 0 ? [c, c, c] : [GREYS[Math.min(4, i + 1)], c, GREYS[Math.max(0, i - 1)]]; }); + const colour = edgeShade(base, (c) => { const r = RAMPS.get(c.join()); return r ? [r[0], r[1], r[2]] : [c, c, c]; }); + render('sprite-entwerfen/arbeitsschritte', { scale: 4, rows: [labelled([silhouette, values, colour, finish(base)])] }); + + const sized = (h: number) => { + const d = standing(h / 3, h, 3.2); + return finish(doll(Math.round(h / 1.5), h, d, PARTS)); + }; + render('sprite-entwerfen/groessen', { scale: 3, rows: [labelled([sized(16), sized(24), sized(32)])] }); +} + +function ansichtenMassstab() { + render('ansichten-massstab/vier-richtungen', { scale: 4, rows: [labelled([finish(spriteDoll('front')), finish(spriteDoll('side')), finish(spriteDoll('back')), finish(spriteDoll('side')).flipX()])] }); + + // Large creature from ellipses and triangles: body, head, legs, horn. Shaded like the doll, no species implied. + const creature = (w: number, h: number) => { + const s = w / 64, art = new Art(w, h); + const ramp = ['#2A2433', '#4D4160', '#73648A', '#A595B8'].map(rgb); + const shade = (_x: number, _y: number, nx: number, ny: number) => band(lambert(nx, ny), [0.75, 0.35, 0], [ramp[3], ramp[2], ramp[1], ramp[0]]); + for (const lx of [14, 24, 40, 50]) art.rect(Math.round(lx * s), Math.round(34 * s), Math.max(2, Math.round(6 * s)), h - Math.round(34 * s), shade); + art.ellipse(32 * s, 28 * s, 26 * s, 15 * s, shade).ellipse(52 * s, 16 * s, 10 * s, 9 * s, shade).polygon([[48 * s, 9 * s], [54 * s, 0], [56 * s, 10 * s]], (_x, _y) => ramp[3]); + art.set(Math.round(56 * s), Math.round(15 * s), C.accent); + return art.outline(ramp[0]); + }; + const scene = (lowRes: boolean) => { + const art = new Art(106, 56); + for (let x = 0; x < 106; x += 16) art.line([x, 0], [x, 55], C.ground); + for (let y = 55; y >= 0; y -= 16) art.line([0, y], [105, y], C.ground); + art.draw(finish(spriteDoll('side')), 2, 32); + art.rect(22, 40, 16, 16, rgb('#A0785A')).rect(22, 40, 16, 16, (x, y) => (x === 22 || y === 40 || x === 37 || y === 55 ? rgb('#5A3E2C') : null)); + art.draw(lowRes ? creature(32, 28).scale(2) : creature(64, 56), 41, 0); + return art; + }; + render('ansichten-massstab/pixeldichte', { scale: 3, rows: [[{ art: scene(true), label: 'A' }], [{ art: scene(false), label: 'B' }]] }); +} + +function umgebungTiles() { + const warm = [rgb('#3B3530'), rgb('#6B5F55'), rgb('#8F8275'), rgb('#B3A595'), rgb('#D8CCBC')]; + render('umgebung-tiles/kachelnaht', { scale: 2, rows: [labelled([voronoiTile(16, 6, 9, false, warm).tile(3, 3), voronoiTile(16, 6, 9, true, warm).tile(3, 3)])] }); + + const greens = ['#355E3B', '#4B7A45', '#6A9A52', '#E9D96A'].map(rgb); + const grass = (seed: number, flower: Pt | null) => { + const rnd = random(seed), art = new Art(16, 16).rect(0, 0, 16, 16, greens[1]); + for (let i = 0; i < 9; i++) { const x = Math.floor(rnd() * 16), y = Math.floor(rnd() * 16); art.set(x, y, greens[2]); art.set((x + 1) % 16, y, greens[2]); art.set(x, (y + 1) % 16, greens[0]); } + if (flower) { const [fx, fy] = flower; art.set(fx, fy - 1, greens[3]); art.set(fx - 1, fy, greens[3]); art.set(fx + 1, fy, greens[3]); art.set(fx, fy + 1, greens[3]); art.set(fx, fy, rgb('#C8463C')); } + return art; + }; + const same = grass(1, [10, 5]).tile(4, 3); + const variants = [grass(1, [10, 5]), grass(2, null), grass(3, null), grass(4, [4, 11])]; + const mixed = new Art(64, 48); + const order = [0, 1, 2, 1, 3, 2, 1, 0, 1, 2, 0, 3]; + order.forEach((v, i) => mixed.draw(variants[v], (i % 4) * 16, Math.floor(i / 4) * 16)); + render('umgebung-tiles/wiederholung', { scale: 2, rows: [labelled([same, mixed])] }); + + render('umgebung-tiles/kontrast-ebenen', { scale: 3, rows: [[{ art: contrastScene(false), label: 'A' }], [{ art: contrastScene(true), label: 'B' }]] }); +} + +/** Small top-down scene: ground, a few stones, the doll in the middle. `calm` keeps the ground in a narrow value range. */ +function contrastScene(calm: boolean) { + const busy = [rgb('#2E3A2A'), rgb('#5E7A44'), rgb('#9DBE6A'), rgb('#E1EDB0')]; + const quiet = [rgb('#7D8F6A'), rgb('#8A9C75'), rgb('#98A982'), rgb('#A5B68E')]; + const g = calm ? quiet : busy, rnd = random(21), art = new Art(64, 44); + for (let y = 0; y < 44; y++) for (let x = 0; x < 64; x++) art.set(x, y, g[rnd() < 0.5 ? 1 : rnd() < 0.5 ? 2 : rnd() < 0.5 ? 0 : 3]); + for (const [x, y] of [[9, 8], [50, 12], [14, 33], [44, 34]] as const) { + const stone = new Art(10, 8).ellipse(5, 4, 4.5, 3.5, (_x, _y, nx, ny) => band(lambert(nx, ny), [0.6, 0.1], calm ? [rgb('#B9B0A3'), rgb('#9A9184'), rgb('#7C7468')] : [rgb('#F2EEE6'), rgb('#8E8678'), rgb('#2B2723')])); + art.draw(stone.outline(calm ? rgb('#5D574F') : rgb('#1A1714')), x, y); + } + art.ellipse(32, 33.5, 5, 1.6, calm ? rgb('#5F6E50') : g[0]); + const figure = finish(spriteDoll('front')); + art.draw(calm ? figure : figure.recolor((c) => mix(c, g[2], 0.35)), 24, 10); + return art; +} + +function lesbarkeitPruefen() { + const scene = contrastScene(true); + const silhouettes = scene.recolor((c, x, y) => { + const ground = new Set(['#7D8F6A', '#8A9C75', '#98A982', '#A5B68E', '#5F6E50'].map((h) => rgb(h).join())); + return ground.has(c.join()) ? C.white : (x >= 24 && x < 40 && y >= 10 && y < 34 ? C.ink : C.mid); + }); + render('lesbarkeit-pruefen/drei-proben', { scale: 2, rows: [[{ art: scene, label: 'A', filePx: 2 }], [{ art: scene.recolor(grey), label: 'B' }, { art: silhouettes, label: 'C' }]] }); +} + +beobachten(); +grundkoerperRaum(); +figurProportion(); +lichtWerte(); +editorEinrichten(); +linienCluster(); +const palette = farbePaletten(); +schattierenTextur(); +silhouetteFormsprache(); +poseAusdruck(); +spriteEntwerfen(); +ansichtenMassstab(); +umgebungTiles(); +lesbarkeitPruefen(); +console.log(written.join('\n')); +console.log('Leuchtdichte der Palette in farbe-paletten/graustufen:', palette.map((c, i) => `${i + 1}: ${luminance(c).toFixed(3)}`).join(', ')); From 0328266678824b362b09afeea6da1ee9118e4334 Mon Sep 17 00:00:00 2001 From: Steven Hernandez Date: Thu, 22 Oct 2026 11:07:37 +0200 Subject: [PATCH 3/3] Neuer Bereich Zeichnen, Character Design & Pixelart (LRN-24) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- HANDBUCH.md | 3 +- README.md | 2 +- content/pixelart/area.yaml | 35 ++ content/pixelart/career.md | 93 ++++ content/pixelart/cheatsheet.md | 148 ++++++ content/pixelart/glossary.yaml | 107 ++++ content/pixelart/interview.yaml | 328 +++++++++++++ .../pixelart/modules/ansichten-massstab.yaml | 450 +++++++++++++++++ content/pixelart/modules/beobachten.yaml | 455 +++++++++++++++++ .../pixelart/modules/editor-einrichten.yaml | 454 +++++++++++++++++ content/pixelart/modules/farbe-paletten.yaml | 460 +++++++++++++++++ .../pixelart/modules/figur-proportion.yaml | 454 +++++++++++++++++ .../pixelart/modules/grundkoerper-raum.yaml | 438 +++++++++++++++++ .../pixelart/modules/lesbarkeit-pruefen.yaml | 450 +++++++++++++++++ content/pixelart/modules/licht-werte.yaml | 420 ++++++++++++++++ content/pixelart/modules/linien-cluster.yaml | 448 +++++++++++++++++ content/pixelart/modules/pose-ausdruck.yaml | 455 +++++++++++++++++ .../pixelart/modules/schattieren-textur.yaml | 461 +++++++++++++++++ .../modules/silhouette-formsprache.yaml | 463 ++++++++++++++++++ .../pixelart/modules/sprite-entwerfen.yaml | 417 ++++++++++++++++ content/pixelart/modules/umgebung-tiles.yaml | 447 +++++++++++++++++ content/pixelart/projects.yaml | 289 +++++++++++ 22 files changed, 7275 insertions(+), 2 deletions(-) create mode 100644 content/pixelart/area.yaml create mode 100644 content/pixelart/career.md create mode 100644 content/pixelart/cheatsheet.md create mode 100644 content/pixelart/glossary.yaml create mode 100644 content/pixelart/interview.yaml create mode 100644 content/pixelart/modules/ansichten-massstab.yaml create mode 100644 content/pixelart/modules/beobachten.yaml create mode 100644 content/pixelart/modules/editor-einrichten.yaml create mode 100644 content/pixelart/modules/farbe-paletten.yaml create mode 100644 content/pixelart/modules/figur-proportion.yaml create mode 100644 content/pixelart/modules/grundkoerper-raum.yaml create mode 100644 content/pixelart/modules/lesbarkeit-pruefen.yaml create mode 100644 content/pixelart/modules/licht-werte.yaml create mode 100644 content/pixelart/modules/linien-cluster.yaml create mode 100644 content/pixelart/modules/pose-ausdruck.yaml create mode 100644 content/pixelart/modules/schattieren-textur.yaml create mode 100644 content/pixelart/modules/silhouette-formsprache.yaml create mode 100644 content/pixelart/modules/sprite-entwerfen.yaml create mode 100644 content/pixelart/modules/umgebung-tiles.yaml create mode 100644 content/pixelart/projects.yaml diff --git a/HANDBUCH.md b/HANDBUCH.md index cf9902be..a68ee65b 100644 --- a/HANDBUCH.md +++ b/HANDBUCH.md @@ -71,7 +71,7 @@ Eine vollständige, minimale Vorlage mit jeder Übungsart liegt in [`tooling/fix 1. **Lehrplan entwerfen.** Schreibe zuerst die Liste der Module auf: 10–16 Module in 2–4 Tracks, vom Einstieg bis zum Profi-Niveau. Frage dich bei jedem Modul: *Was kann ich danach, was ich vorher nicht konnte?* Und: *Würde ein Arbeitgeber das erwarten?* 2. **Ordner anlegen:** `content//` mit `area.yaml` (Abschnitt 4). Die Ordner-ID ist kurz, klein und kebab-case, zum Beispiel `go`, `typescript`, `devops`. -3. **Farbe wählen.** Eine kräftige Farbe, auf der schwarzer Text gut lesbar ist (Kontrast ≥ 4,5 : 1 zu `#0B0B0B`). Vorhandene Farben nicht wiederholen: `#A98BFF` Kotlin, `#FF6A3D` Rust, `#FFD400` Linux, `#4D8BFF` Python, `#2BD97C` Automation, `#FF5CA8` Git, `#22D3EE` Data Analysis, `#C6F432` Testing, `#FF9F1C` PostgreSQL, `#F4A3FF` Erzählhandwerk, `#FF4D6D` Combat Design. Gute freie Kandidaten: `#FFC6A8` (Apricot), `#B5E3FF` (Eisblau). +3. **Farbe wählen.** Eine kräftige Farbe, auf der schwarzer Text gut lesbar ist (Kontrast ≥ 4,5 : 1 zu `#0B0B0B`). Vorhandene Farben nicht wiederholen: `#A98BFF` Kotlin, `#FF6A3D` Rust, `#FFD400` Linux, `#4D8BFF` Python, `#2BD97C` Automation, `#FF5CA8` Git, `#22D3EE` Data Analysis, `#C6F432` Testing, `#FF9F1C` PostgreSQL, `#F4A3FF` Erzählhandwerk, `#FF4D6D` Combat Design, `#FFC6A8` Pixelart. Guter freier Kandidat: `#B5E3FF` (Eisblau). 4. **Module schreiben** (Abschnitte 5–7). Ein Modul pro Datei, Dateiname = Modul-ID. 5. **Karten, Projekte, Glossar, Spickzettel, Berufsseite** ergänzen (Abschnitt 8). 6. **Prüfen:** `pnpm content:check `, dann `pnpm verify `, dann `pnpm test` und `pnpm build`. @@ -152,6 +152,7 @@ Manche Bereiche lehren Handwerk ohne Programmcode, zum Beispiel Erzählhandwerk. - **Übungen** nutzen `lang: prose` (Abschnitt 7). `output` passt nur, wo man wirklich etwas vorhersagt, etwa den Zustand einer Verzweigung; die Warnung „keine Vorhersage-Übung“ ist dort bewusst akzeptiert. `bug` heißt „die gemeinte Zeile finden“, meist ohne `fix`. - **Kreative Aufgaben** lassen die Lösung offen. Es gibt keine Mustertexte: `practice` mit `lang: prose` hat keine `solution`, die Checkliste enthält überprüfbare Kriterien, keine Geschmacksurteile. Analysen veröffentlichter Texte dürfen eine Musterantwort haben. - **Callouts** `INTERVIEW` und `PRAXIS` nur, wenn sie wirklich passen; `PRAXIS` zeigt dann, wie Studios oder Autoren arbeiten. +- **Zeichnen und Pixelart** zeigen Pixel als Textraster in `text`-Blöcken, eine Zeile pro Pixelreihe: `#` dunkel, `+` Mittelton, `-` hell, `.` leer, höchstens 16 Pixel breit. Ein `bug` lässt dann die fehlerhafte Reihe anklicken. Zeichenaufgaben laufen auf Papier, Karopapier oder im Editor und werden über die Checkliste selbst geprüft. Die Schaubilder des Bereichs `pixelart` erzeugt `node tooling/pixelart-figures.ts` aus Code; sie zeigen Prinzipien, keine fertigen Figuren. Bilder Dritter werden nur verlinkt. ## 6. Lektionen schreiben diff --git a/README.md b/README.md index 04f272a7..f4f9fee8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # learn.kiumu.app -Private Lernplattform für Kotlin & Android, Rust, Linux, Python, Automation mit Python, Git, Data Analysis mit Excel, SQL und Python, Testing & Softwarequalität, SQL & PostgreSQL für Anwendungsentwickler sowie Combat Design & Game Feel mit Godot 4. Live: [learn.kiumu.app](https://learn.kiumu.app) · Öffentliches Repository: [hernstev97/learning-platform](https://github.com/hernstev97/learning-platform) +Private Lernplattform für Kotlin & Android, Rust, Linux, Python, Automation mit Python, Git, Data Analysis mit Excel, SQL und Python, Testing & Softwarequalität, SQL & PostgreSQL für Anwendungsentwickler, Erzählhandwerk & interaktive Entscheidungen, Combat Design & Game Feel mit Godot 4 sowie Zeichnen, Character Design & Pixelart. Live: [learn.kiumu.app](https://learn.kiumu.app) · Öffentliches Repository: [hernstev97/learning-platform](https://github.com/hernstev97/learning-platform) Die Plattform ist kein Nachschlagewerk. Jedes Modul besteht aus einer Lektion, die ein Denkmodell aufbaut und auf die offizielle Dokumentation verweist, und aus 10–14 Übungen in fester Reihenfolge: verstehen → vorhersagen → schreiben → Fehler finden → erklären → anwenden. Jeder Bereich hat Interview-Karteikarten mit Wiederholung, Projekte und ein Abschlussprojekt, das wie eine Take-Home-Aufgabe im Bewerbungsprozess geschnitten ist. diff --git a/content/pixelart/area.yaml b/content/pixelart/area.yaml new file mode 100644 index 00000000..7563704d --- /dev/null +++ b/content/pixelart/area.yaml @@ -0,0 +1,35 @@ +id: pixelart +title: Zeichnen, Character Design & Pixelart +short: Pixelart +tagline: Sehen lernen, Formen vereinfachen und lesbare Figuren und Tiles Pixel für Pixel bauen. +description: > + Beobachten und Messen, einfache Körper und Draufsicht, Proportionen, Licht und Tonwerte, Farbe und + begrenzte Paletten, Linien und Cluster, Schattieren und Textur, Silhouette und Körpersprache, Sprites in + mehreren Ansichten, Maßstab und Tiles. Du brauchst keine Zeichenerfahrung und kein Grafiktablett: Papier, + Handy und Maus reichen, für Pixelarbeit nennt der Kurs freie Programme neben Aseprite. Jede Figur, jedes + Tile und jede Palette entwirfst du selbst; kreative Aufgaben prüfst du mit offenen Kriterien, nicht mit + einer Musterlösung. Module mit der Marke „Unterwegs“ gehen am Handy und mit Stift und Karopapier, „Am PC“ + braucht einen Pixel-Editor; lesen kannst du auch diese Lektionen unterwegs. +color: "#FFC6A8" +order: 13 +outcomes: + - "Du **beobachtest statt zu erinnern**: Du misst Proportionen, siehst Negativraum und arbeitest mit Referenzen, ohne sie abzupausen." + - Du baust Gegenstände und Figuren aus **einfachen Körpern** auf und zeichnest sie in der Draufsicht, die Top-down-Spiele verwenden. + - Du planst **Licht, Tonwerte und Farbe** bewusst, gruppierst Werte und baust begrenzte Paletten mit Farbrampen. + - Du setzt Pixel mit Absicht – **saubere Linien, Cluster, Kantenglättung, Dithering** – und erkennst typische Fehler wie Doppelpixel, Banding und Kissenschattierung. + - Du entwirfst Figuren mit **lesbarer Silhouette, Formensprache und Körpersprache** und übersetzt Skizzen in kleine Sprites. + - Du hältst **Maßstab und Pixeldichte** über Figuren, große Kreaturen und Umgebung durch und zeichnest dieselbe Figur in mehreren Ansichten. + - Du prüfst eigene Arbeit mit **Graustufen-, Silhouetten- und 1×-Test**, holst Rückmeldung ein und dokumentierst deine Gestaltungsentscheidungen. +tracks: + - title: Sehen und Formen + description: Beobachten und Messen, einfache Körper und Draufsicht, Figur und Proportion, Licht und Tonwerte. Alles mit Stift und Papier oder am Handy. + modules: [beobachten, grundkoerper-raum, figur-proportion, licht-werte] + - title: Pixel für Pixel + description: Einen Pixel-Editor einrichten, Linien und Cluster setzen, Farben in Rampen und Paletten ordnen, schattieren und Texturen bauen. + modules: [editor-einrichten, linien-cluster, farbe-paletten, schattieren-textur] + - title: Figuren entwerfen + description: Silhouette und Formensprache, Pose und Ausdruck im Standbild, vom Entwurf zum Sprite, mehrere Ansichten und große Kreaturen im selben Maßstab. + modules: [silhouette-formsprache, pose-ausdruck, sprite-entwerfen, ansichten-massstab] + - title: Umgebung und Asset-Set + description: Tiles und Umgebung, die Figuren tragen statt sie zu verschlucken, dann prüfen, überarbeiten und Entscheidungen festhalten. + modules: [umgebung-tiles, lesbarkeit-pruefen] diff --git a/content/pixelart/career.md b/content/pixelart/career.md new file mode 100644 index 00000000..de730b1a --- /dev/null +++ b/content/pixelart/career.md @@ -0,0 +1,93 @@ +## Pixelart im Beruf + +Pixelart ist in der Spielebranche ein eigenes Handwerk: Figuren, Gegner, Tiles, Requisiten und Oberflächen in kleiner Auflösung, die zusammenpassen und in Bewegung lesbar bleiben. In größeren Teams teilen sich Character, Environment und Animation die Arbeit, in kleinen Studios und bei Solo-Projekten macht es eine Person. + +Für dich ist der Anlass dein eigenes Spiel. Diese Seite zeigt trotzdem, wie Studios Pixel Artists auswählen. Wer weiß, woran ein Art Lead eine Arbeit misst, weiß auch, worauf er bei der eigenen achten sollte, und kann mit einem Artist reden, falls er später jemanden beauftragt. Die Zitate stammen aus Anzeigen, die im Oktober 2026 online waren oder ausdrücklich als abgelaufen gekennzeichnet sind. Diese Seite ist keine Arbeitsmarktstudie. + +## Rollen und Jobtitel + +Titel bedeuten in jedem Studio etwas anderes. Lies die Aufgaben, nicht nur die Überschrift. + +| Rolle | Typische Titel | Alltag | Beispiel aus einer Anzeige | +| --- | --- | --- | --- | +| Pixel Art allgemein | Pixel Artist | Figuren, Kreaturen, Tiles und Requisiten im Stil des Spiels | Conradical Games: „A strong pixel art portfolio with unique creatures and characters.“ | +| 2D Art | 2D Artist, 2D Game Artist | Pixelart oder gemalte Grafik, oft auch Oberfläche und Illustration | Pine Creek Games: „good knowledge of perspective“ | +| Figuren | Character Artist, Character Designer | Entwurf und Ausarbeitung von Figuren, Modellblätter | — | +| Umgebung | Environment Artist, Tile Artist | Tilesets, Hintergründe, Requisiten | — | +| Animation | Pixel Art Animator, 2D Animator | Bewegung, Kampfanimationen | Dead Mage: „A portfolio of outstanding pixel art animation. This is the main thing we'll judge.“ | +| Technik und Kunst | Technical Artist, 2D Technical Artist | Grafik in die Engine bringen, Werkzeuge, Pipelines | League of Geeks: „Experience working in and with game engines (i.e., Unreal, Unity, Godot)“ | + +Quellen: [Conradical Games](https://workwithindies.com/careers/conradical-games-pixel-artist), [Pine Creek Games](https://workwithindies.com/careers/pine-creek-games-2d-artist), [Dead Mage](https://workwithindies.com/careers/dead-mage-pixel-art-animator), [League of Geeks](https://workwithindies.com/careers/league-of-geeks-2d-artist). + +Animation ist hier nur der Vollständigkeit halber aufgeführt. Sie ist Thema des Animationskurses, der auf diesem Kurs aufbaut. Topdeck Productions etwa verlangt für einen 2D Character Animator ausdrücklich „a portfolio or reel showing combat-relevant animation (attacks, hits, deaths, idles)“ ([Topdeck Productions](https://workwithindies.com/careers/topdeck-productions-experienced-2d-character-animator)). + +## Was Studios erwarten + +Die Anzeigen wiederholen sich in wenigen Punkten: + +- **Das Portfolio entscheidet.** Kaum eine Anzeige fragt nach einem Abschluss, fast alle nach Arbeitsproben. Ein Panel der GDC 2019, zusammengefasst im ArtStation Magazine, sagt es knapp: „Your portfolio is more important than your resume.“ ([Top 10 Portfolio Tips](https://magazine.artstation.com/2019/03/games-portfolio-top-10/)) +- **Eigene Figuren und Kreaturen.** Studios wollen sehen, dass du entwerfen kannst, nicht nur nachzeichnen. Kreaturen kommen in Anzeigen für Actionspiele ausdrücklich vor. +- **Perspektive und Konstruktion.** Pine Creek Games nennt „good knowledge of perspective“. Für Top-down-Spiele heißt das: die 3/4-Draufsicht sicher beherrschen. +- **Arbeit in der Engine.** Wer seine Grafik selbst in Godot, Unity oder Unreal einsetzen und prüfen kann, spart dem Team Zeit. +- **Eigene Arbeit statt KI.** Pine Creek Games schreibt in die Anforderungen „Not using AI in their work“. Das deckt sich mit der Regel dieses Kurses: Jede Zeichnung stammt von dir. +- **Zusammenarbeit.** Art Leads wollen wissen, wie du mit Rückmeldung umgehst und ob du in einem vorgegebenen Stil arbeiten kannst. + +## Die Lage in Deutschland + +Auf [Games-Career](https://www.games-career.com/), der auf den deutschsprachigen Raum spezialisierten Jobbörse, stand bei der Recherche im Oktober 2026 keine Stelle für Pixel Artists oder 2D Artists. Die Art-Rubrik enthielt vor allem Koordinations- und UX-Stellen. Pixelart-Stellen sind häufig remote und international ausgeschrieben, etwa auf [Work With Indies](https://www.workwithindies.com/) oder [Hitmarker](https://hitmarker.net/). Viele kleine Studios vergeben Pixelart auch als Auftrag an Freiberufler statt als feste Stelle. Für dich als Entwickler mit eigenem Spiel ist der wichtigere Weg das veröffentlichte Projekt: Ein kleines Spiel mit eigener Grafik zeigt mehr als jede Bewerbung. + +## Art-Tests und Gespräche + +Viele Studios lassen Bewerber eine Probearbeit machen. Snow Day Games beschrieb für eine Stelle als 2D Technical Pixel Artist einen „Paid test commission to ensure shared artistic vision“ ([Work With Indies, abgelaufen](https://workwithindies.com/careers/snow-day-games-2d-technical-pixel-artist)). Typisch sind Aufgaben wie im Abschlussprojekt dieses Kurses: ein kleines Set aus Figur, Gegner und Tiles in einem vorgegebenen Rahmen. + +### Art-Test: so gehst du vor + +1. **Frag, was bewertet wird.** Entwurf, Ausführung im vorgegebenen Stil, Geschwindigkeit oder alles. Halte dich an Größen, Palette und Zeit. +2. **Leg den Rahmen schriftlich fest.** Auflösung, Tile-Größe, Spritehöhe, Palette, Lichtrichtung. Eine Maßstabstabelle zeigt, dass du an Zusammenhalt denkst. +3. **Zeig den Weg.** Thumbnails, Silhouetten, Tonwertskizze, dann die Ausarbeitung. Studios wollen sehen, wie du Entscheidungen triffst. +4. **Prüf im Spielbild.** Lege die Assets in ein Mockup in Spielauflösung und mach die Proben aus [Prüfen, überarbeiten, dokumentieren](/pixelart/lesbarkeit-pruefen). +5. **Begründe kurz.** Eine halbe Seite mit den wichtigsten Entscheidungen und dem, was du mit mehr Zeit ändern würdest. + +### Häufige Fragen im Gespräch + +- „Führ mich durch dieses Stück: Wo hast du angefangen?“ Zeig Thumbnails und Zwischenstände. +- „Warum diese Palette?“ Antworte mit Rampen, Tonwerten und Lesbarkeit, nicht mit Geschmack. +- „Was würdest du an diesem Asset ändern?“ Nenne eine konkrete Schwäche mit Beleg und wie du sie prüfen würdest. +- „Wie gehst du mit Rückmeldung um, die dir nicht gefällt?“ Beschreibe, wie du eine Rückmeldung in eine Beobachtung übersetzt und dann entscheidest. +- „Kannst du in einem fremden Stil arbeiten?“ Zeig ein Stück, das du in einer vorgegebenen Palette oder Größe gemacht hast. + +## Portfolio + +- **Weniger, aber stark.** „Delete half your portfolio.“ und „Taste over technique“ stehen in der Liste des ArtStation Magazine. Fünf zusammenpassende Stücke wirken mehr als zwanzig gemischte. +- **Originalgröße und vergrößert.** Zeig Pixelart bei 1× und ganzzahlig vergrößert, nie unscharf skaliert. +- **Im Zusammenhang.** Ein Mockup zeigt, dass Figuren auf dem Boden lesbar sind. Einzelsprites auf grauem Grund zeigen das nicht. +- **Den Weg zeigen.** Ein Modellblatt mit Thumbnails, Gliederpuppe und fertigem Sprite erzählt mehr als das Endbild. +- **Ehrlich kennzeichnen.** Bei Teamarbeit steht da, was von dir ist. Fanart ist als Fanart markiert. +- **Bildschirmfotos für Spiele.** Wer ein eigenes Spiel auf itch.io veröffentlicht, sollte laut den Richtlinien der Plattform Screenshots zeigen: „Screenshots are an effective way to visually communicate what your project entails.“ ([itch.io](https://itch.io/docs/creators/quality-guidelines#provide-screenshots-for-your-project-if-applicable)) + +## Lernplan in Wochen + +Ein Vorschlag für rund fünf Stunden pro Woche über 20 Wochen, gemischt aus Bus und Schreibtisch. Die Module brauchen laut ihren Zeitangaben zusammen etwa 27 Stunden, die vier Projekte etwa 74. Keine Pflichtreihenfolge; das Skizzenbuch-Projekt läuft parallel zu den ersten vier Wochen. + +| Woche | Unterwegs | Am PC | +| --- | --- | --- | +| 1 | [Beobachten](/pixelart/beobachten) | [Editor einrichten](/pixelart/editor-einrichten) | +| 2 | [Grundkörper und Draufsicht](/pixelart/grundkoerper-raum) | erste Linien im Editor | +| 3 | [Figur und Proportion](/pixelart/figur-proportion) | – | +| 4 | [Licht und Tonwerte](/pixelart/licht-werte) | – | +| 5 | [Linien und Cluster](/pixelart/linien-cluster) | Projekt „Ein Gegenstand in drei Größen“ beginnen | +| 6 | [Farbe und Paletten](/pixelart/farbe-paletten) | [Schattieren und Textur](/pixelart/schattieren-textur) | +| 7 | [Silhouette und Formensprache](/pixelart/silhouette-formsprache) | Projekt abschließen | +| 8 | [Pose und Ausdruck](/pixelart/pose-ausdruck) | [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen) | +| 9 | Thumbnails für eine eigene Figur | [Ansichten und Maßstab](/pixelart/ansichten-massstab) | +| 10 | Proben am Handy | [Umgebung und Tiles](/pixelart/umgebung-tiles) | +| 11 | [Prüfen und dokumentieren](/pixelart/lesbarkeit-pruefen) | Projekt „Eine eigene Figur in vier Richtungen“ beginnen | +| 12–13 | Proben der eigenen Figur | Projekt „Eine eigene Figur in vier Richtungen“ abschließen | +| 14–20 | Proben und Fremdtests | Abschlussprojekt „Asset-Set für eine Begegnung“ | + +## Ressourcen + +- **Pixelart:** [Saint11 (Pedro Medeiros)](https://saint11.art/blog/pixel-art-tutorials/), [Slynyrd Pixelblog](https://www.slynyrd.com/pixelblog-catalogue), [Derek Yu: Pixel Art Tutorial](https://www.derekyu.com/makegames/pixelart.html), [cure: The Pixel Art Tutorial](https://pixeljoint.com/forum/forum_posts.asp?TID=11299), Michael Azzi: [Pixel Logic](https://michafrar.gumroad.com/l/pixel-logic) (Buch), [Lospec](https://lospec.com/palette-list) für Paletten und Tutorials. +- **Zeichnen:** [Drawabox](https://drawabox.com/lesson/0), [Ctrl+Paint](https://www.ctrlpaint.com/library), [Proko: Gesture](https://www.proko.com/course-lesson/how-to-draw-gesture), [Line of Action](https://line-of-action.com/), James Gurney: [Color and Light](https://jamesgurney.com/products/color-and-light-a-guide-for-the-realist-painter-signed-by-james-gurney) (Buch). +- **Lesbarkeit:** Valve, [Illustrative Rendering in Team Fortress 2](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf), Jason Mitchell, [Connecting Visuals to Gameplay at Valve](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf). +- **Werkzeuge:** [Pixelorama](https://pixelorama.org/), [LibreSprite](https://libresprite.github.io/), [Aseprite](https://www.aseprite.org/docs/), [Krita](https://docs.krita.org/en/user_manual/getting_started/basic_concepts.html). diff --git a/content/pixelart/cheatsheet.md b/content/pixelart/cheatsheet.md new file mode 100644 index 00000000..4b96a637 --- /dev/null +++ b/content/pixelart/cheatsheet.md @@ -0,0 +1,148 @@ +## Linien und Kurven + +| Läufe | Steigung | Wirkung | +| --- | --- | --- | +| 1, 1, 1 … | 1 : 1 (45°) | gerade | +| 2, 2, 2 … | 2 : 1 | gerade | +| 3, 3, 3 … | 3 : 1 | gerade | +| 2, 1, 2, 1 … | 3 : 2 | gerade, Muster wiederholt sich | +| 3, 1, 2, 1, 3 … | – | Jaggy, unruhig | +| 4, 3, 2, 1, 1 | Kurve | glatt: Läufe schrumpfen stetig | +| 4, 1, 3, 2, 1 | Kurve | Knick: Folge springt | + +Lauflänge = Breite ÷ Höhe (12 breit, 4 hoch → 3). Breite eines Bogens = Summe der waagerechten Läufe. + +```text +gut Doppelpixel (L-Ecke) +# # # . . . . # # # . . . . +. . . # # # . . . # # # # . +``` + +## Fehlerbilder + +| Fehler | Woran du ihn erkennst | Abhilfe | +| --- | --- | --- | +| Jaggy | Lauf fällt aus dem Muster | Läufe angleichen | +| Doppelpixel | Linie an einer Stufe zwei Pixel dick | Pixel-perfect für Konturen, L-Ecke entfernen | +| Verwaister Pixel | einzelner Pixel ohne Nachbarn seiner Farbe | in Cluster aufnehmen oder entfernen | +| Banding | Tonstreifen folgen parallel den Stufen der Kante | Schattengrenze in anderem Winkel, Clusterbreiten variieren | +| Kissenschattierung | jede Kontur dunkler, Mitte hell | Lichtrichtung festlegen, Formschattierung | +| Zu viel Kantenglättung | Form wirkt weich, Saum an der Außenkante | nur an langen Läufen, innen statt außen | +| Mixel | Pixel verschieden groß im selben Bild | nichts hochskalieren, in nativer Größe zeichnen | +| Rauschen statt Textur | jedes Pixel anders | Textur aus Clustern mit Licht- und Schattenkante | + +## Licht auf einer Form (Licht oben links) + +| Zone | Lage | Merkmal | +| --- | --- | --- | +| Glanzlicht | dem Licht zugewandt | hellster Punkt, oft 1 Pixel | +| Licht | Lichtseite | heller Grundton | +| Halbton | Übergang | Mittelton | +| Kernschatten | hinter dem Terminator | dunkelste Stelle auf der Form | +| Reflexlicht | Schattenseite, Rand | aufgehellt, aber dunkler als die Lichtseite | +| Kontaktschatten | direkt unter dem Körper | dunkelster Schatten | +| Schlagschatten | auf dem Boden, vom Licht weg | dunkel, weicher nach außen | + +Wertegruppen: Licht, Mitte, Schatten. „The fewer values the better“ (James Gurney). + +## Farbrampen und Paletten + +| Schritt | Was du tust | +| --- | --- | +| 1 | Grundton wählen (Mittelton der Rampe) | +| 2 | Nach unten dunkler, Farbton Richtung Blau/Violett; dunkle Töne meist gesättigter (Slynyrd) | +| 3 | Nach oben heller, Farbton Richtung Gelb | +| 4 | In Graustufen prüfen: jeder Ton deutlich heller als der vorige | +| 5 | Nur so viele Töne, wie du wirklich brauchst | + +| Palette (Lospec) | Farben | +| --- | --- | +| PICO-8 | 16 | +| Sweetie 16 | 16 | +| DawnBringer 32 (Standard in Aseprite) | 32 | +| Endesga 32 | 32 | + +## Rechnen mit Farbe + +```python +def kanal(v): + s = v / 255 + return s / 12.92 if s <= 0.04045 else ((s + 0.055) / 1.055) ** 2.4 + +def leuchtdichte(hexwert): + r, g, b = (int(hexwert[i:i + 2], 16) for i in (1, 3, 5)) + return 0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b) + +def kontrast(a, b): + hell, dunkel = sorted((leuchtdichte(a), leuchtdichte(b)), reverse=True) + return (hell + 0.05) / (dunkel + 0.05) +``` + +Kontrastverhältnis nach WCAG: 1 = gleich hell, 21 = Schwarz auf Weiß. Für Pixelart eine Rechenhilfe, keine Regel. + +## Proportionen und Spritegrößen + +| Figur | Kopfhöhen | Beispiel | +| --- | --- | --- | +| Erwachsener, realistisch | 7,5 | 60 px hoch → Kopf 8 px | +| stilisiert | 4 | 48 px hoch → Kopf 12 px | +| Chibi | 2–3 | Kopf ⅓ bis ½ der Höhe | + +| Top-down-Sprite | Faustregel (Slynyrd) | +| --- | --- | +| Tile | 16 × 16 px ist am häufigsten | +| Figur | 1 Tile breit, 2 Tiles hoch | +| Kopf | ⅓ bis ½ der Spritehöhe | +| Richtungen | mindestens 4 | + +## Projektionen + +| Ansicht | Was du siehst | Einsatz | +| --- | --- | --- | +| reine Draufsicht | nur Oberseiten, Figur als Kopf und Schultern | Strategie, Karten | +| 3/4-Draufsicht | Oberseite und Front, keine Fluchtpunkte | viele Top-down-Actionspiele | +| Seitenansicht | nur Fronten | Plattformer | + +## Arbeitsablauf Sprite + +1. Thumbnails als Silhouette +2. Gliederpuppe mit Kopfzahl +3. Silhouette in Spritegröße +4. Tonwerte (3–4 Graustufen) +5. Farbe aus der Palette +6. Feinschliff: Linien, Cluster, Kontur, sparsame Kantenglättung +7. Proben bei 1×, in Graustufen, als Silhouette + +## Proben + +| Probe | Frage | Wie | +| --- | --- | --- | +| Originalgröße | Erkennt man alles in Spielgröße? | Zoom 100 %, Export aufs Handy | +| Graustufen | Trennen Tonwerte Figur, Gefahr, Boden? | Chromium DevTools → Rendering → Achromatopsia; Krita: Filterebene „Desaturate“ | +| Silhouette | Erkennt man Form und Richtung? | Kopie schwarz füllen | +| Farbfehlsicht | Hält eine Unterscheidung ohne Rot/Grün? | DevTools: Protanopia, Deuteranopia, Tritanopia | +| Spiegeln | Stimmen Achsen und Proportionen? | Krita: Taste M | + +## Werkzeuge (Stand Oktober 2026) + +| Programm | Version | Kosten | Unter CachyOS | +| --- | --- | --- | --- | +| Pixelorama | 1.2.3 | frei (MIT) | Flathub oder AUR `pixelorama` | +| LibreSprite | 1.3 | frei (GPL-2.0) | `pacman -S libresprite` | +| Aseprite | 1.3.18.6 | ab 19,99 USD; selbst kompilieren für den eigenen Gebrauch erlaubt | AUR `aseprite` (baut aus Quellcode) | +| Krita | 5.3.4.1 (Flathub), 6.0.4.1 (Arch, Qt6) | frei | Flathub oder `pacman -S krita` | + +| Aufgabe | Aseprite | Pixelorama | +| --- | --- | --- | +| Gerade Linie | Shift-Klick vom letzten Pixel, Ctrl rastet Winkel ein | Linienwerkzeug (L) | +| Pixel-perfect | Kontextleiste des Stifts | Werkzeugoption Pixel perfect | +| Pixelraster | Einstellungen → Grid → Visible Pixel Grid | Ctrl+H | +| Nahtlose Kachel | View → Tiled Mode | Tile Mode | +| Nur Palettenfarben | Sprite → Color Mode → Indexed | Color Mode Indexed | +| Export vergrößert | Export mit Resize | Export mit Resize | + +## Maßstab und Pixeldichte + +- Alles im Spielbild hat dieselbe Pixelgröße. Nichts hochskalieren, große Kreaturen in voller Auflösung zeichnen. +- Vergrößern nur ganzzahlig und mit nächstem Nachbarn: 384 × 216 × 5 = 1920 × 1080. +- Maßstabstabelle führen: Figur, Gegner, Kreatur, Tür, Kiste, Tile in Pixeln. diff --git a/content/pixelart/glossary.yaml b/content/pixelart/glossary.yaml new file mode 100644 index 00000000..c3557f77 --- /dev/null +++ b/content/pixelart/glossary.yaml @@ -0,0 +1,107 @@ +terms: + - term: Pixelart + definition: Bilder, in denen jeder Pixel bewusst gesetzt ist, meist in kleiner Auflösung und mit begrenzter Palette. Im Spiel wird das Bild nur ganzzahlig vergrößert, damit jeder Pixel gleich groß bleibt. + - term: Sprite + definition: Einzelnes Bild einer Figur, eines Gegners oder Gegenstands, das sich im Spiel unabhängig vom Hintergrund bewegt. Mehrere Sprites liegen oft nebeneinander in einem Spritesheet. + - term: Tile + definition: Kachel fester Größe, häufig 16 × 16 Pixel, aus der Böden, Wände und Level zusammengesetzt werden. Gute Tiles passen nahtlos aneinander. + - term: Pixelraster + definition: Ansicht im Editor, die die Grenzen zwischen den Pixeln als Linien zeigt (Pixel Grid). In Pixelorama mit Ctrl+H, in Aseprite unter den Einstellungen als „Visible Pixel Grid“. + - term: Lauf + definition: Folge von Pixeln in derselben Reihe oder Spalte einer Linie. Gleich lange Läufe ergeben eine gerade Linie, stetig wachsende oder schrumpfende eine Kurve. + - term: Jaggy + definition: Ungewollte Ecke oder Unregelmäßigkeit, die den Fluss einer Pixellinie unterbricht, etwa ein Lauf, der aus dem Muster fällt. Gewollte Ecken an harten Formen sind keine Jaggies. + - term: Doppelpixel + definition: Zusätzlicher Pixel an einer Stufe, der mit seinen Nachbarn eine L-Form bildet und die Linie dort zwei Pixel dick macht. Entsteht fast immer beim Freihandzeichnen. + - term: Pixel-perfect-Modus + definition: Option des Stifts in Aseprite, Pixelorama und LibreSprite, die beim Zeichnen den mittleren Pixel von L-Formen entfernt. Gut für Konturen, schlecht für Flächen in mehreren Strichen. + - term: Cluster + definition: Zusammenhängende Gruppe von Pixeln derselben Farbe. Aus Clustern entstehen lesbare Formen wie Lichtflecken, Schatten oder Steine. + - term: Verwaister Pixel + definition: Einzelner Pixel, der zu keinem Cluster seiner Farbe gehört und keine Kantenglättung ist (Orphan Pixel). Wirkt in Originalgröße wie Rauschen. + - term: Banding + definition: Tonstreifen, die parallel nebeneinanderlaufen und den Stufen einer Kante folgen. Statt einer Fläche liest das Auge ein Bündel Linien oder eine verdoppelte, weiche Kante. + - term: Kantenglättung + definition: Zwischentöne an den Stufen einer Kante, die sie weicher wirken lassen (Anti-Aliasing, AA). In Pixelart von Hand und sparsam gesetzt, an der Außenkante eines Sprites mit Vorsicht. + - term: Kontur + definition: Umrisslinie einer Form (Outline). Kann schwarz, in einem dunklen Ton der eigenen Farbe oder als Sel-out ausgeführt sein. + - term: Sel-out + definition: Selektive Kontur, die auf der Lichtseite heller oder ganz weggelassen ist und auf der Schattenseite dunkel bleibt. Lässt Formen weniger ausgeschnitten wirken. + - term: Dithering + definition: Abwechselnd gesetzte Pixel zweier Farben, die aus der Entfernung wie ein Zwischenton wirken. Geordnet als Raster oder unregelmäßig; nützlich für Textur und Übergänge bei wenigen Farben. + - term: Kissenschattierung + definition: Schattierung, die an jeder Kontur dunkler wird und zur Mitte heller, ohne Lichtrichtung (Pillow Shading). Lässt Formen flach und aufgeblasen wirken. + - term: Formschattierung + definition: Schattierung nach einer festgelegten Lichtrichtung, bei der helle und dunkle Bereiche der Form des Körpers folgen. + - term: Tonwert + definition: Helligkeit einer Farbe von Schwarz bis Weiß, unabhängig vom Farbton (Value). Tonwerte tragen einen großen Teil der Lesbarkeit eines Bildes. + - term: Wertegruppe + definition: Zusammenfassung eines Bildes in wenige Helligkeitsstufen, etwa Licht, Mitte und Schatten. Einfache Wertegruppen bleiben auch klein und aus der Entfernung lesbar. + - term: Glanzlicht + definition: Hellste Stelle auf einer glänzenden Oberfläche, wo das Licht direkt zum Auge gespiegelt wird. In Pixelart oft ein einzelner, bewusst gesetzter Pixel oder kleiner Cluster. + - term: Kernschatten + definition: Dunkelster Bereich auf der Form selbst, direkt hinter der Grenze zwischen Licht- und Schattenseite, dem Terminator. + - term: Reflexlicht + definition: Aufhellung auf der Schattenseite einer Form durch Licht, das von Boden oder Umgebung zurückgeworfen wird. Bleibt immer dunkler als die Lichtseite. + - term: Schlagschatten + definition: Schatten, den ein Körper auf andere Flächen wirft, auf der Seite gegenüber dem Licht. Direkt unter dem Körper liegt der dunkelste Teil, der Kontaktschatten. + - term: Farbton + definition: Die Farbe selbst, etwa Rot, Grün oder Blau (Hue), getrennt von Helligkeit und Sättigung betrachtet. + - term: Sättigung + definition: Reinheit oder Kräftigkeit einer Farbe, von Grau bis voll leuchtend. + - term: Farbrampe + definition: Reihe von Tönen einer Farbe von dunkel nach hell, aus der eine Form schattiert wird. Gute Rampen verschieben dabei auch den Farbton. + - term: Hue Shifting + definition: Verschiebung des Farbtons innerhalb einer Farbrampe, meist Schatten in Richtung Blau oder Violett und Lichter in Richtung Gelb. Lässt Rampen lebendiger wirken als reines Abdunkeln. + - term: Begrenzte Palette + definition: Feste, kleine Auswahl von Farben für ein ganzes Bild oder Spiel. Hält Assets zusammen und zwingt zu klaren Entscheidungen. + - term: Indexed-Modus + definition: Farbmodus, in dem jedes Pixel auf einen Eintrag der Palette verweist statt eine eigene Farbe zu speichern. In Aseprite bis 256 Farben; zeigt sofort, ob ein Bild nur Palettenfarben nutzt. + - term: Relative Leuchtdichte + definition: Nach WCAG berechnete Helligkeit einer Farbe zwischen 0 (Schwarz) und 1 (Weiß), mit Gewichten für Rot, Grün und Blau, die der Wahrnehmung folgen. + - term: Kontrastverhältnis + definition: Verhältnis der relativen Leuchtdichten zweier Farben nach WCAG, zwischen 1 (gleich hell) und 21 (Schwarz auf Weiß). Für Pixelart eine Rechenhilfe, keine Regel. + - term: Negativraum + definition: Die Flächen zwischen und um Gegenstände herum. Wer die Lücken zeichnet statt die Dinge, umgeht das Gedächtnisbild und trifft Formen genauer. + - term: Vergleichsmessen + definition: Proportionen mit ausgestrecktem Arm und Stift abnehmen und vergleichen, etwa wie oft die Kopfhöhe in die Körperhöhe passt. + - term: Kopfeinheit + definition: Kopfhöhe als Maßeinheit für Figuren. Ein durchschnittlicher Erwachsener ist etwa 7,5 Köpfe hoch, kleine Spielfiguren oft nur 2 bis 4. + - term: Handlungslinie + definition: Eine durchgehende Linie, meist eine C- oder S-Kurve oder eine Gerade, die die Hauptrichtung einer Pose zusammenfasst (Line of Action). + - term: Gliederpuppe + definition: Vereinfachte Figur aus Grundkörpern für Kopf, Rumpf und Glieder, an der sich Proportionen und Posen ohne Anatomiewissen planen lassen. + - term: Chibi + definition: Stilisierung mit großem Kopf und kleinem Körper (Super Deformed), der Kopf nimmt etwa ein Drittel bis die Hälfte der Höhe ein. Verbreitet bei kleinen Sprites, weil Gesicht und Ausdruck Platz bekommen. + - term: Silhouette + definition: Umrissform einer Figur oder eines Gegenstands, schwarz gefüllt ohne Innenzeichnung. Eine gute Silhouette ist auch ohne Farbe und Details erkennbar. + - term: Formensprache + definition: Wiederkehrende Grundformen wie Kreis, Quadrat oder Dreieck, aus denen ein Entwurf aufgebaut ist und die eine Wirkung nahelegen. Eine Konvention, kein Gesetz. + - term: Thumbnail + definition: Sehr kleine, schnelle Skizze, oft nur eine schwarze Silhouette oder drei Tonwerte, um viele Varianten zu vergleichen, bevor man eine ausarbeitet. + - term: 3/4-Draufsicht + definition: Ansicht vieler Top-down-Spiele, als sähe man schräg von oben. Oberseite und Vorderseite eines Gegenstands sind gleichzeitig zu sehen, ohne Fluchtpunkte. + - term: Fluchtpunkt + definition: Punkt auf dem Horizont, auf den parallele Kanten in der Perspektive zulaufen. In der 3/4-Draufsicht von Spielen wird meist darauf verzichtet. + - term: Ghosting + definition: Übung aus Drawabox, bei der man die Bewegung eines Strichs mehrmals in der Luft ausführt, bevor man ihn zeichnet, damit er sicherer und gerader wird. + - term: Mixel + definition: Pixel unterschiedlicher Größe im selben Bild, etwa wenn ein Teil doppelt vergrößert neben nativen Sprites steht. Bricht die einheitliche Pixeldichte. + - term: Pixeldichte + definition: Wie groß ein Pixel im Verhältnis zur Spielwelt ist. Bei einheitlicher Pixeldichte sind alle Pixel aller Assets im Spielbild gleich groß. + - term: Maßstabstabelle + definition: Liste der Größen in Pixeln für Figur, Gegner, Türen, Kisten, Tiles und große Kreaturen, damit alle Assets zusammenpassen. + - term: Modellblatt + definition: Blatt mit derselben Figur in mehreren Ansichten nebeneinander, mit Hilfslinien für Kopf, Hüfte und Füße (Turnaround). Hält Proportionen über alle Ansichten gleich. + - term: Tiled Mode + definition: Ansicht in Aseprite, die das Bild wiederholt um sich selbst zeigt, damit Nähte beim Zeichnen sichtbar werden. Pixelorama nennt das Tile Mode. + - term: Referenzebene + definition: Ebene mit einer Skizze oder einem Foto, auf der nicht gezeichnet wird und die beim Export nicht mitkommt. In Aseprite als Reference Layer. + - term: Nächster Nachbar + definition: Vergrößerungsverfahren, bei dem jeder Pixel zu einem größeren Quadrat wird (Nearest Neighbor). Hält Pixelart scharf; bilineares Vergrößern macht sie verwaschen. + - term: Mockup + definition: Aus eigenen Sprites und Tiles zusammengesetztes Bildschirmfoto, wie das Spiel aussehen soll. Lesbarkeit prüft man am Mockup, nicht am Einzelsprite. + - term: Lesehierarchie + definition: Festgelegte Reihenfolge, was ein Spieler zuerst, dann und zuletzt erkennen muss. Valve nennt sie für Team Fortress 2 „Read Hierarchy“. + - term: Entscheidungsprotokoll + definition: Kurze Liste der Gestaltungsentscheidungen eines Asset-Sets, jeweils mit prüfbarem Grund und verworfener Alternative. diff --git a/content/pixelart/interview.yaml b/content/pixelart/interview.yaml new file mode 100644 index 00000000..5e8521d1 --- /dev/null +++ b/content/pixelart/interview.yaml @@ -0,0 +1,328 @@ +cards: + - id: symbol-oder-beobachtung + module: beobachten + q: Warum zeichnen Anfänger eine Tasse oft falsch, obwohl sie direkt vor ihnen steht? + a: | + Weil sie das Symbol zeichnen, das sie im Kopf haben, und nicht das, was sie sehen. Das Gedächtnisbild zeigt die Öffnung als Kreis und den Henkel von der Seite, egal wo man steht. Ich umgehe das, indem ich Verhältnisse messe und die Lücken zeichne, etwa die Fläche im Henkel. Die Lücke hat kein Symbol im Kopf, also zeichne ich sie so, wie sie ist. + tags: [beobachten, grundlagen] + level: 1 + - id: negativraum-nutzen + module: beobachten + q: Was ist Negativraum, und wofür nutzt du ihn? + a: | + Negativraum sind die Flächen zwischen und um Gegenstände, etwa zwischen den Beinen eines Stuhls. Ich zeichne sie, um Proportionen zu prüfen, weil ich bei ihnen keine Vorstellung habe, wie sie aussehen „sollten“. In der Pixelart kommt dieselbe Idee bei Silhouetten wieder: Eine Lücke zwischen Arm und Körper macht eine Pose lesbar. + tags: [beobachten, negativraum] + level: 1 + - id: vergleichsmessen + module: beobachten + q: Wie misst du Proportionen, wenn du ohne Lineal nach Beobachtung zeichnest? + a: | + Mit ausgestrecktem Arm und einem Stift. Ich nehme eine Einheit ab, etwa die Kopfhöhe, und zähle, wie oft sie in die Körperhöhe passt. Der Arm bleibt gestreckt, damit der Abstand gleich bleibt. Winkel prüfe ich, indem ich den Stift an die Kante halte und auf das Blatt übertrage. Die Zahlen schreibe ich neben die Skizze. + tags: [beobachten, proportion] + level: 1 + - id: referenz-oder-kopie + module: beobachten + q: Wie arbeitest du mit Referenzen, ohne zu kopieren? + a: | + Ich nutze Referenzen, um zu verstehen, wie etwas gebaut ist, und zeichne dann meine eigene Lösung. Ich sammle mehrere Quellen statt einer, notiere, was ich daraus lerne, und pause nichts ab. Für mein eigenes Spiel heißt das: Haltung, Material oder Licht darf ich studieren, die Figur entwerfe ich selbst. Generierte Bilder nutze ich weder als Vorlage noch als Ersatz. + tags: [referenzen, ki-regel] + level: 2 + - id: draufsicht-schummeln + module: grundkoerper-raum + q: Warum zeigen viele Top-down-Spiele Dach und Fassade gleichzeitig? + a: | + Sie nutzen eine 3/4-Draufsicht, als schaute man schräg von oben. Slynyrd beschreibt das so, dass man etwa drei Viertel von Dach und Fassade sieht. Eine reine Draufsicht zeigt Figuren nur als Kopf und Schultern, eine Seitenansicht verliert die Bewegungsfläche. Die 3/4-Ansicht verbindet beides und verzichtet dafür auf Fluchtpunkte, damit sich Tiles wiederholen lassen. + tags: [perspektive, draufsicht] + level: 1 + - id: grundkoerper-warum + module: grundkoerper-raum + q: Warum baust du Gegenstände aus Würfel, Zylinder und Kugel auf? + a: | + Weil ich bei einfachen Körpern weiß, wie Licht und Perspektive auf ihnen wirken. Ein Fass ist ein Zylinder, eine Kiste ein Würfel, ein Kopf beginnt als Kugel. Stimmt der Grundkörper, stimmen Verkürzung und Schatten, und Details setze ich erst danach. Fehler im Grundkörper repariert kein Detail. + tags: [grundkoerper, konstruktion] + level: 1 + - id: ghosting + module: grundkoerper-raum + q: Was ist Ghosting, und warum hilft es bei geraden Linien? + a: | + Ghosting heißt, die Bewegung eines Strichs mehrmals in der Luft auszuführen, bevor man aufsetzt. Drawabox beschreibt dafür drei Schritte: planen, die Bewegung in der Luft üben und dann ausführen. Der Strich kommt dann aus einer geübten Bewegung, meist aus der Schulter, und wird gerader und sicherer als ein zögerlich gezogener. + tags: [zeichnen, linien] + level: 1 + - id: kopfeinheiten + module: figur-proportion + q: Wie hoch ist ein Mensch in Kopfhöhen, und warum haben Spielfiguren oft viel weniger? + a: | + Ein durchschnittlicher Erwachsener ist etwa 7,5 Köpfe hoch. Kleine Sprites nutzen oft 2 bis 4 Köpfe, weil sonst für Gesicht und Ausdruck nur ein paar Pixel blieben. Bei 24 Pixeln Höhe und 7,5 Köpfen wäre der Kopf gut 3 Pixel hoch, bei 3 Köpfen 8 Pixel. Die stilisierte Proportion ist eine Entscheidung für Lesbarkeit, kein Fehler. + tags: [proportion, sprites] + level: 1 + - id: handlungslinie + module: figur-proportion + q: Was ist eine Handlungslinie, und wie setzt du sie ein? + a: | + Eine Linie, die die Hauptrichtung einer Pose zusammenfasst, meist eine C- oder S-Kurve oder eine Gerade. Proko empfiehlt, zuerst die längste Bewegungslinie des Körpers zu finden. Ich zeichne sie zuerst und baue die Gliederpuppe darüber. So wirkt die Pose bewegt, statt steif aus Einzelteilen zusammengesetzt. + tags: [geste, pose] + level: 1 + - id: gewicht-im-stand + module: figur-proportion + q: Woran erkennt man im Standbild, ob eine Figur sicher steht? + a: | + Daran, ob ihr Schwerpunkt über der Stützfläche liegt. Steht sie auf einem Bein, liegt der Schwerpunkt über diesem Fuß, Hüfte und Schultern kippen gegeneinander. Liegt er außerhalb, wirkt die Figur, als fiele sie, was in einer Bewegung gewollt sein kann, im Stand aber nicht. + tags: [pose, gewicht] + level: 2 + - id: tonwert-farbe + module: licht-werte + q: Was ist der Unterschied zwischen Tonwert und Farbe? + a: | + Der Tonwert ist die Helligkeit, die Farbe der Farbton. Ctrl+Paint beschreibt „value“ als Beleuchtung: helle Bereiche haben einen hohen Wert, dunkle einen niedrigen. Zwei verschiedene Farben können denselben Tonwert haben und verschmelzen dann in Graustufen. Deshalb plane ich Tonwerte zuerst und lege Farbe darüber. + tags: [tonwert, farbe] + level: 1 + - id: licht-zonen + module: licht-werte + q: Welche Zonen hat Licht auf einer Kugel? + a: | + Von der Lichtseite zur Schattenseite: Glanzlicht, Licht, Halbton, Terminator mit Kernschatten, Reflexlicht. Auf dem Boden kommen Kontaktschatten direkt darunter und Schlagschatten dazu. Das Reflexlicht bleibt immer dunkler als die Lichtseite. In kleinen Sprites fasse ich die Zonen zu zwei oder drei Werten zusammen. + tags: [licht, schatten] + level: 1 + - id: wenige-werte + module: licht-werte + q: Warum arbeitest du mit wenigen Wertegruppen? + a: | + Weil ein Bild mit wenigen, klar getrennten Tonwerten auch klein und aus der Entfernung lesbar bleibt. James Gurney schreibt „the fewer values the better“. Ich teile ein Bild in Licht, Mitte und Schatten und prüfe in Graustufen, ob jede Gruppe zusammenhält. Verstreute Werte wirken wie Rauschen. + tags: [tonwert, lesbarkeit] + level: 2 + - id: editor-ohne-kauf + module: editor-einrichten + q: Welche Pixel-Editoren empfiehlst du jemandem, der nichts kaufen will? + a: | + Pixelorama, frei unter MIT-Lizenz und mit Godot gebaut, oder LibreSprite, ein freier Fork des alten Aseprite. Aseprite selbst kostet etwas, der Quellcode ist aber offen, und die Lizenz erlaubt, es für den eigenen Gebrauch selbst zu kompilieren. Für freie Skizzen nehme ich Krita. Wichtiger als das Programm sind Pixelraster, Pixel-perfect-Strich, Indexed-Modus und ganzzahliger Export. + tags: [werkzeuge, editor] + level: 1 + - id: maus-statt-tablett + module: editor-einrichten + q: Kann man Pixelart mit der Maus machen? + a: | + Ja, in kleinen Auflösungen sogar gut. Pixelart setzt man Pixel für Pixel, nicht in langen Freihandstrichen. Gerade Linien ziehe ich mit dem Linienwerkzeug oder in Aseprite mit Shift vom letzten Pixel aus, Kurven baue ich aus Läufen. Mit der rechten Maustaste lege ich eine zweite Farbe oder ein zweites Werkzeug. + tags: [werkzeuge, maus] + level: 1 + - id: export-ganzzahlig + module: editor-einrichten + q: Warum exportierst du Pixelart nur ganzzahlig vergrößert? + a: | + Weil bei einem ganzzahligen Faktor jeder Pixel ein gleich großes Quadrat wird. Bei 150 % werden manche Pixel eins, manche zwei Bildschirmpixel breit, und bilineares Vergrößern macht alles verwaschen. Zum Teilen exportiere ich mit Faktor 4 oder 5 und nächstem Nachbarn. Im Spiel kümmert sich die Engine um die Skalierung. + tags: [export, skalierung] + level: 1 + - id: laeufe-lesen + module: linien-cluster + q: Warum wirkt eine Kurve in Pixeln zittrig, und wie behebst du das? + a: | + Meist springen die Läufe: Auf einen langen folgt ein kurzer und wieder ein langer. Ich schreibe die Lauflängen als Zahlenfolge auf, etwa 4, 1, 3, 2, und gleiche sie an, bis sie stetig fallen, also 4, 3, 2, 1. Danach entferne ich Doppelpixel und setze erst zum Schluss sparsam Zwischentöne. + tags: [linien, kurven] + level: 2 + - id: verwaiste-pixel + module: linien-cluster + q: Was sind verwaiste Pixel, und warum stören sie? + a: | + Einzelne Pixel, die zu keinem Cluster ihrer Farbe gehören und keine Kantenglättung sind. Im Zoom sehen sie wie Detail aus, bei 1× wie Schmutz oder Rauschen. Ich prüfe, ob jeder Pixel einen Nachbarn derselben Farbe hat, und setze Ausnahmen wie ein Glanzlicht bewusst. + tags: [cluster, rauschen] + level: 2 + - id: banding-erkennen + module: linien-cluster + q: Was ist Banding, und wie vermeidest du es? + a: | + Tonstreifen, die parallel nebeneinanderlaufen, oft genau entlang der Stufen einer Kante. Das Auge liest dann eine verdoppelte, weiche Kante statt einer Fläche. Ich führe die Grenze eines Schattens in einem anderen Winkel, variiere die Clusterbreiten oder fasse Bänder zusammen. Interessant ist, dass Saint11 und cure Banding verschieden definieren, die Wirkung aber dieselbe meinen. + tags: [banding, schattieren] + level: 2 + - id: kantenglaettung-aussen + module: linien-cluster + q: Warum glättest du die Außenkante eines Sprites selten? + a: | + Weil der Zwischenton die Figurfarbe mit einer Hintergrundfarbe mischt. Läuft die Figur später über verschiedene Böden, passt der Mischton nur auf einem und wirkt auf den anderen wie ein Saum. Innerhalb der Figur kenne ich beide Farben, dort setze ich Zwischentöne an langen Läufen. + tags: [kantenglaettung, sprites] + level: 3 + - id: hue-shifting + module: farbe-paletten + q: Was ist Hue Shifting, und warum nutzt du es in Farbrampen? + a: | + Eine Verschiebung des Farbtons innerhalb einer Rampe, meist Schatten Richtung Blau oder Violett, Lichter Richtung Gelb. Slynyrd schreibt, eine gute Rampe sollte Hue Shifting nutzen. Eine Rampe, die nur dunkler und heller wird, wirkt schnell flach und schmutzig. Mit Verschiebung wirken Licht und Schatten wie farbiges Licht. + tags: [farbe, rampen] + level: 2 + - id: begrenzte-palette + module: farbe-paletten + q: Warum arbeitest du mit einer begrenzten Palette? + a: | + Weil eine feste Palette Assets zusammenhält und Entscheidungen erzwingt. Jede neue Farbe muss sich ihren Platz verdienen. Im Indexed-Modus sehe ich sofort, ob ein Bild Farben außerhalb der Palette nutzt. Fertige Paletten von Lospec sind gutes Lernmaterial, für mein Spiel baue ich eine eigene. + tags: [palette, zusammenhalt] + level: 2 + - id: farbe-graustufen + module: farbe-paletten + q: Wie prüfst du, ob zwei Farben deiner Palette verwechselbar sind? + a: | + Ich sehe sie mir in Graustufen an oder rechne ihre relative Leuchtdichte nach WCAG aus. Rot und Blau oder Gelb und Hellblau können fast gleich hell sein und verschmelzen dann. Für Farbfehlsichtigkeit simuliere ich in den Chromium DevTools Protanopie, Deuteranopie und Tritanopie. Wichtige Unterschiede lege ich in den Tonwert, nicht nur in den Farbton. + tags: [farbe, barrierefreiheit] + level: 2 + - id: kissenschattierung + module: schattieren-textur + q: Was ist Kissenschattierung, und warum gilt sie als Fehler? + a: | + Schattierung, die an jeder Kontur dunkler wird und zur Mitte heller, ohne Lichtrichtung. Saint11 beschreibt sie als allgemeinen Schatten um die Umrisse, wenn keine klare Lichtquelle festgelegt ist. Die Form wirkt flach und aufgeblasen. Ich lege zuerst die Lichtrichtung fest und schattiere dann nach der Form. + tags: [schattieren, licht] + level: 2 + - id: dithering-wann + module: schattieren-textur + q: Wann setzt du Dithering ein und wann nicht? + a: | + Für Textur, etwa Stein oder Stoff, und für Übergänge, wenn die Palette sehr wenige Farben hat. Saint11 schreibt, er vermeide Dithering, wo er kann. In kleinen Sprites wirkt es schnell wie Rauschen, und in Bewegung flimmert es. Ich prüfe jedes Dithering bei 1×. + tags: [dithering, textur] + level: 2 + - id: detailbudget + module: schattieren-textur + q: Wie entscheidest du, wie viel Detail ein kleines Sprite trägt? + a: | + Nach Größe und Lesehierarchie. Je kleiner die Auflösung, desto mehr muss ich wählen, welche Details wichtig sind, wie Saint11 es formuliert. Ich behalte Silhouette, Hauptformen und ein Erkennungsmerkmal und lasse den Rest weg. Textur baue ich aus Clustern mit Licht- und Schattenkante, nicht aus einzelnen Pixeln. + tags: [detail, textur] + level: 2 + - id: sel-out + module: schattieren-textur + q: Was ist Sel-out, und welches Problem löst es? + a: | + Eine selektive Kontur, die auf der Lichtseite heller ist oder fehlt und auf der Schattenseite dunkel bleibt. Eine durchgehend schwarze Kontur lässt Formen ausgeschnitten wirken und frisst in kleinen Sprites viele Pixel. Saint11 rät, statt Schwarz eine dunkle Farbe zu nehmen. Sel-out trennt die Figur trotzdem vom Hintergrund, weil die Schattenseite dunkel bleibt. + tags: [kontur, sel-out] + level: 2 + - id: silhouette-zuerst + module: silhouette-formsprache + q: Warum beginnst du einen Figurenentwurf mit der Silhouette? + a: | + Weil die Silhouette das Erste ist, was ein Spieler liest, besonders klein und in Bewegung. Valve hat die Klassen von Team Fortress 2 so entworfen, dass sie schon als schwarze Silhouette ohne Innenzeichnung erkennbar sind. Ich zeichne viele kleine schwarze Thumbnails, wähle die stärkste aus und arbeite erst dann Details aus. + tags: [silhouette, character-design] + level: 2 + - id: formensprache + module: silhouette-formsprache + q: Was bedeuten Kreis, Quadrat und Dreieck im Character Design? + a: | + Es sind Konventionen, keine Gesetze. Runde Formen werden oft mit freundlich oder weich verbunden, eckige mit stabil oder schwer, spitze mit gefährlich oder schnell. Ich nutze sie als Ausgangspunkt und prüfe dann, ob mein Entwurf so wirkt, wie ich will. Wichtiger als die Grundform ist, dass Figuren sich voneinander unterscheiden. + tags: [formensprache, character-design] + level: 2 + - id: gegner-unterscheidbar + module: silhouette-formsprache + q: Wie stellst du sicher, dass Spieler Spielfigur und Gegner nicht verwechseln? + a: | + Zuerst über die Silhouette: andere Grundform, Proportion oder Größe. Dann über Farbe und Tonwert: Bei Team Fortress 2 liest man das Team an der Farbe, Rot oder Blau, die Klasse an der Silhouette. Ich prüfe beides im Mockup mit Silhouetten- und Graustufenprobe und mit einem Fremdtest. + tags: [lesbarkeit, gegner] + level: 2 + - id: pose-standbild + module: pose-ausdruck + q: Wie zeigst du in einem einzelnen kleinen Sprite, wie es einer Figur geht? + a: | + Über die Haltung, bevor das Gesicht etwas tun kann. Offen mit breitem Stand, verschlossen mit gesenktem Kopf und Armen vor dem Körper, angespannt mit gebeugten Knien und Gewicht nach vorn. In kleinen Bildern übertreibe ich, weil feine Unterschiede bei 1× verschwinden. Wie die Figur von einer Haltung in die nächste kommt, ist Animation. + tags: [pose, ausdruck] + level: 2 + - id: gesicht-wenige-pixel + module: pose-ausdruck + q: Wie viel Ausdruck passt in ein Gesicht aus wenigen Pixeln? + a: | + Mehr als man denkt, wenn man die richtigen Pixel wählt. Brauen verändern den Ausdruck am stärksten: zwei schräge Pixel über jedem Auge machen aus neutral wütend. Die Höhe der Augen und ein offener oder flacher Mund ergänzen das. Ich prüfe jeden Ausdruck bei 1× und frage jemanden, welches Gefühl er sieht. + tags: [ausdruck, gesicht] + level: 2 + - id: spritegroesse + module: sprite-entwerfen + q: Wie wählst du die Größe einer Spielfigur in Pixeln? + a: | + Aus Tile-Größe, Spielauflösung und dem, was die Figur zeigen muss. Slynyrd nennt für Top-down-Spiele eine Figur von einem Tile Breite und zwei Tiles Höhe als häufige Größe, mit einem Kopf von einem Drittel bis zur Hälfte der Höhe. Größere Figuren tragen mehr Detail, kosten aber mehr Arbeit pro Bild und Richtung. Ich halte die Entscheidung in einer Maßstabstabelle fest. + tags: [sprites, groesse] + level: 2 + - id: arbeitsablauf-sprite + module: sprite-entwerfen + q: Beschreib deinen Arbeitsablauf vom Entwurf zum fertigen Sprite. + a: | + Thumbnails als Silhouetten, dann eine Gliederpuppe mit Kopfzahl. Im Editor die Silhouette in Spritegröße, dann drei oder vier Tonwerte, dann Farbe aus der Palette, zuletzt Linien, Cluster, Kontur und sparsame Kantenglättung. Jeder Schritt liegt in einer eigenen Ebene, und nach jedem prüfe ich bei 1×. + tags: [arbeitsablauf, sprites] + level: 2 + - id: dunkel-unten-hell-oben + module: sprite-entwerfen + q: Warum legen manche Studios den stärksten Kontrast einer Figur auf Brusthöhe? + a: | + Weil der Blick zum stärksten Kontrast geht. Valve hat die Figuren von Team Fortress 2 von dunklen Füßen zu einem hellen, kontrastreichen Oberkörper abgestuft, weil dort die Waffe gehalten wird und sie dem Spieler sagt, was die Figur tut. Ich lege den stärksten Kontrast dorthin, wo die wichtigste Information sitzt. + tags: [lesbarkeit, tonwert] + level: 3 + - id: vier-richtungen + module: ansichten-massstab + q: Wie hältst du eine Figur in vier Richtungen konsistent? + a: | + Mit einem Modellblatt: Kopf, Hüfte und Füße liegen in allen Ansichten auf denselben Pixelzeilen. Die Seiten spiegele ich, prüfe dann aber Asymmetrien wie einen Gegenstand in einer Hand. Ich vergleiche die Ansichten nebeneinander bei 1× und mit der Silhouettenprobe. + tags: [ansichten, konsistenz] + level: 2 + - id: mixels + module: ansichten-massstab + q: Was ist an einem Boss falsch, der in halber Auflösung gezeichnet und dann verdoppelt wurde? + a: | + Seine Pixel sind doppelt so groß wie die der Spielfigur. Im selben Bild stehen dann zwei Pixeldichten nebeneinander, oft Mixels genannt, und der Boss wirkt grob und wie aus einem anderen Spiel. Slynyrd rät, nur ganzzahlig zu vergrößern, damit Pixel einheitlich bleiben. Ich zeichne große Kreaturen in voller Auflösung und halte die Clustergröße der kleinen Sprites. + tags: [massstab, pixeldichte] + level: 2 + - id: grosse-kreatur-lesbar + module: ansichten-massstab + q: Worauf achtest du beim Entwurf einer großen Kreatur als Boss? + a: | + Auf wenige große Massen mit klarer Silhouette, einen Blickpunkt und dieselbe Pixeldichte wie der Rest des Spiels. Ich baue die Kreatur aus Grundkörpern auf und plane Teile, die sich später bewegen, getrennt. Ob Angriffe gut angekündigt sind, ist eine Frage des Combat Designs, die ich mit dem Bild abstimme. + tags: [bosse, character-design] + level: 3 + - id: nahtlose-kachel + module: umgebung-tiles + q: Wie zeichnest du eine Bodenkachel, die sich ohne Naht wiederholt? + a: | + Im Tiled Mode von Aseprite oder im Tile Mode von Pixelorama, die das Bild um sich selbst wiederholen. Formen, die über den Rand gehen, laufen auf der Gegenseite weiter. Ich prüfe eine 3 × 3-Wiederholung bei 1× und achte dabei nicht nur auf Nähte, sondern auch auf Muster, die sich als Raster verraten. + tags: [tiles, nahtlos] + level: 2 + - id: wiederholung-brechen + module: umgebung-tiles + q: Wie verhinderst du, dass ein Boden aus Tiles wie ein Raster aussieht? + a: | + Mit Varianten und seltenen Details. Ein auffälliges Detail in jeder Kachel verrät das Raster sofort. Ich lege ruhige Grundkacheln an, dazu Varianten mit kleinen Unterschieden, und setze auffällige Details sparsam und unregelmäßig. Der Boden bleibt in einem engen Wertebereich. + tags: [tiles, wiederholung] + level: 2 + - id: hintergrund-ruhig + module: umgebung-tiles + q: Warum soll der Hintergrund weniger Kontrast haben als die Figuren? + a: | + Weil der Blick zum stärksten Kontrast geht. Ist der Boden so kontrastreich wie die Figur, verschwindet sie darin. Ich halte den Boden in einem engen Tonwertbereich und mit weniger Sättigung und gebe Figuren und Gefahren den vollen Kontrast. Begehbares und Hindernisse unterscheide ich über Tonwert und Kante. + tags: [lesbarkeit, umgebung] + level: 2 + - id: drei-proben + module: lesbarkeit-pruefen + q: Mit welchen schnellen Proben prüfst du die Lesbarkeit eines Asset-Sets? + a: | + Originalgröße für Details, Graustufen für Tonwerte, Silhouette für Form und Richtung, dazu eine Simulation von Farbfehlsichtigkeit. Immer am Mockup in Spielauflösung, nicht am Einzelsprite. In Chromium gehen Graustufen und Farbfehlsichtigkeit über die DevTools, schwarze Silhouetten über eine gefüllte Kopie. + tags: [lesbarkeit, proben] + level: 2 + - id: rueckmeldung-holen + module: lesbarkeit-pruefen + q: Wie holst du Rückmeldung zu einem Bild, ohne die Antwort vorzugeben? + a: | + Ich zeige es fünf Sekunden und frage „Was hast du gesehen?“ statt „Erkennst du den Wolf?“. Die Antworten schreibe ich wörtlich auf und erkläre nichts. Vorschläge wie „mach ihn rot“ übersetze ich in die Beobachtung dahinter, hier: Er wurde nicht als Gefahr erkannt. Die Lösung entscheide ich selbst. + tags: [feedback, playtest] + level: 2 + - id: eine-aenderung + module: lesbarkeit-pruefen + q: Warum änderst du pro Überarbeitungsrunde nur eine Sache? + a: | + Damit ich weiß, was gewirkt hat. Ändere ich Palette, Größe und Kontur auf einmal, kann jede der drei Änderungen der Grund für das bessere Ergebnis sein, und vielleicht hat eine sogar etwas verschlechtert. Jede Runde hält Befund, Änderung, Probe und Ergebnis mit Vorher und Nachher fest. + tags: [ueberarbeitung, dokumentation] + level: 2 + - id: entscheidungsprotokoll + module: lesbarkeit-pruefen + q: Was gehört in ein Entscheidungsprotokoll für ein Asset-Set? + a: | + Jede Entscheidung, die das Set prägt, etwa Palette, Spritegröße, Lichtrichtung oder Kontur, mit einem prüfbaren Grund und der verworfenen Alternative. Dazu die Maßstabstabelle und die Lesehierarchie. Damit kann ich oder ein anderer Artist später neue Assets im selben Stil zeichnen, ohne bei null anzufangen. + tags: [dokumentation, portfolio] + level: 3 + - id: art-test-vorgehen + q: Du bekommst einen Art-Test für eine Stelle als Pixel Artist. Wie gehst du vor? + a: | + Ich kläre, was bewertet wird, und halte mich an Größen, Palette und Zeit. Dann lege ich den Rahmen schriftlich fest: Auflösung, Tile-Größe, Spritehöhe, Lichtrichtung. Ich zeige den Weg von Thumbnails über Tonwerte zur Ausarbeitung, prüfe alles im Mockup und schreibe eine halbe Seite zu meinen wichtigsten Entscheidungen. + tags: [praxis, bewerbung] + level: 2 + - id: ki-in-der-arbeit + q: Wie stehst du zu KI in deiner Arbeit als Artist? + a: | + Zeichnungen, Entwürfe und Assets mache ich selbst; generierte Bilder nutze ich weder als Vorlage noch als Ersatz. KI darf technische Arbeit übernehmen, etwa ein Skript, das Exporte umbenennt oder Graustufenkopien erzeugt. Manche Studios schreiben das inzwischen in ihre Anzeigen, etwa „Not using AI in their work“. + tags: [praxis, ki-regel] + level: 1 diff --git a/content/pixelart/modules/ansichten-massstab.yaml b/content/pixelart/modules/ansichten-massstab.yaml new file mode 100644 index 00000000..97a9c262 --- /dev/null +++ b/content/pixelart/modules/ansichten-massstab.yaml @@ -0,0 +1,450 @@ +id: ansichten-massstab +title: Ansichten, Maßstab und große Kreaturen +level: 3 +minutes: 140 +summary: Wie du dieselbe Figur von vorn, von der Seite und von hinten zeichnest, ohne dass sie beim Drehen springt, wie eine Maßstabstabelle Figuren, Requisiten und Bosse zusammenhält und warum eine große Kreatur dieselbe Pixelgröße braucht wie alles andere im Bild. +place: pc +goals: + - Du zeichnest eine Figur in vier Richtungen und entscheidest, wo Spiegeln Arbeit spart und wo Asymmetrie es verbietet. + - Du legst ein Modellblatt mit Hilfslinien für Kopf, Augen, Schultern, Hüfte und Füße an und hältst die Höhen über alle Ansichten. + - Du stellst eine Maßstabstabelle für Figur, Tür, Kiste, Tile, Gegner und Boss auf und rechnest Größen in Pixel um. + - Du erkennst gemischte Pixelgrößen (Mixels) und erklärst, warum nur gleiche Pixelgröße und ganzzahlige Vergrößerung ein Bild zusammenhalten. + - Du konstruierst eine große Kreatur aus Grundkörpern, mit Clustern in der Größe der kleinen Sprites und einem klaren Blickpunkt. + - Du planst Teile einer großen Kreatur, die später einzeln bewegt werden, in getrennten Ebenen. +resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + - title: Slynyrd · Pixelblog 5 · Back to Basics + url: https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + - title: Drawabox · Lesson 5 (Tiere konstruieren) + url: https://drawabox.com/lesson/5 +lesson: | + Du hast deine Figur von vorn gezeichnet, 24 Pixel hoch. Dann die Seitenansicht. Nebeneinandergestellt ist die Seite plötzlich einen Pixel größer, die Hüfte sitzt eine Reihe tiefer, und die Tasche hängt auf der falschen Schulter. Im Spiel springt die Figur bei jeder Drehung. Später kommt ein Gegner dazu, so groß wie ein Schuppen, den du in halber Auflösung gezeichnet und verdoppelt hast. Neben der Figur wirkt er wie aus einem anderen Spiel. + + Dieses Modul hält Figuren über Ansichten und Größen zusammen: mehrere Richtungen, ein Modellblatt, eine Maßstabstabelle, gleiche Pixeldichte und große Kreaturen. Es setzt [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen) voraus. Du arbeitest im Pixel-Editor, Pixelorama oder LibreSprite kostenlos, Aseprite, wenn du es hast. Bedienschritte stehen in eigenen Absätzen mit **Bedienung**. + + ## Vier Richtungen: vorn, Seite, hinten und das Spiegelbild + + Raymond Schlitter (Slynyrd) schreibt über Figuren in Draufsicht: „in order to animate a top down character you will need to represent the sprite in at least 4 directions.“ Gezeichnet werden dafür drei: oben, unten und zur Seite. Die Seitenansicht „can simply be reflected for right and left movement“ ([Pixelblog 22](https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites)). + + ![Dieselbe Figur in vier Ansichten von je 16 × 24 Pixeln. A von vorn mit zwei Augen und Haaren oben am Kopf. B von der Seite nach rechts blickend, deutlich schmaler, mit einem Auge und den Haaren am Hinterkopf. C von hinten, die Haare bedecken den ganzen Hinterkopf, kein Gesicht. D ist B waagerecht gespiegelt und blickt nach links](/media/pixelart/ansichten-massstab/vier-richtungen@2x.png "Vorn (A), Seite (B), hinten (C), gespiegelte Seite (D). Eigenes Schaubild") + + Zwischen den Ansichten ändert sich einiges: In B ist die Figur schmaler, man sieht ein Auge und einen Arm; in C verschwindet das Gesicht hinter den Haaren. Gleich bleiben die Höhen. Kopfoberkante, Schultern, Hüfte und Fußsohle liegen in allen vier Feldern auf denselben Reihen. Sonst springt die Figur beim Drehen. D kostet nichts: Es ist B, waagerecht gespiegelt. + + Spiegeln hat eine Grenze. Schlitter nennt sie selbst: Es geht nicht, wenn „your character has an asymmetrical design you wish to accurately display based on orientation“. Eine Tasche über der linken Schulter, ein Werkzeug in der rechten Hand, ein Scheitel auf einer Seite wechseln beim Spiegeln die Seite. Du hast zwei Möglichkeiten: Du nimmst den Seitenwechsel in Kauf, oder du zeichnest beide Seiten. Entscheide das bewusst und schreib es auf. + + Mit acht Richtungen kommen die Diagonalen dazu. Spiegelst du alle Ansichten mit Blick nach links aus denen mit Blick nach rechts, zeichnest du fünf: unten, schräg unten, Seite, schräg oben, oben. Jede Richtung, die du nicht spiegeln kannst, kostet eine ganze Zeichnung mehr, und später auch jedes Bild einer Bewegung. Wie sich die Figur in jeder Richtung bewegt, ist Thema des Animationskurses; wie Godot Richtungen als Animationen verwaltet, steht in [Animationen](/godot/animationen). + + **Bedienung:** Vorder- und Rückansicht sind meist fast symmetrisch. In Aseprite schaltest du über *View > Symmetry Options* eine Spiegelachse ein, dann malt jeder Strich auf beiden Seiten; die Achse lässt sich verschieben, auch in die Mitte eines Pixels ([Symmetry](https://www.aseprite.org/docs/symmetry/)). Pixelorama hat das Spiegeln in den Optionen des Werkzeugs ([Mirroring](https://pixelorama.org/user_manual/drawing/#mirroring)). Für D kopierst du B in die Zelle von D und spiegelst dort die Auswahl: in Aseprite mit *Edit > Flip Horizontal* oder Shift+H ([Flip](https://www.aseprite.org/docs/flip/)), in Pixelorama mit dem Effekt *Mirror* im Menü *Effects* ([Image effects](https://pixelorama.org/user_manual/image_effects/#list-of-image-effects)). + + ## Modellblatt: gleiche Höhen in jeder Ansicht + + Ein **Modellblatt** (Model Sheet, auch Turnaround) stellt alle Ansichten einer Figur nebeneinander, mit waagerechten Hilfslinien für die wichtigen Höhen. Jede Ansicht muss dieselben Linien treffen. Ein Beispiel für eine Figur von 24 Pixeln, die Werte sind Platzhalter: + + | Hilfslinie | Reihe | + | --- | --- | + | Kopfoberkante | 1 | + | Augen | 5 | + | Schultern | 8 | + | Hüfte | 16 | + | Fußsohle | 24 | + + Die Breite darf sich ändern, die Höhen nicht. Weil der Umriss von vorn und von hinten bei einer symmetrischen Figur fast gleich ist, kopierst du die Silhouette der Vorderansicht für die Rückansicht und zeichnest nur das Innere neu. Die Seitenansicht baust du auf denselben Linien neu auf. + + > [!PRAXIS] Das Modellblatt als Vertrag + > Bei Team Fortress 2 stand das Modellblatt zwischen Konzept und 3D-Modell. Mitchells Folien nennen als Aufgaben „Use concept painting as guide“ und „Solve design problems using silhouette only“, für das Modell danach „Match silhouette to model sheet“ ([MIGS 2008](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Art Director Moby Francke sagt über das Ergebnis: „There are some discrepancies but overall the character still obeys the model sheet“ ([Game Developer, 2008](https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay)). Für dich ist das Modellblatt die Vorlage, an der jede spätere Zeichnung derselben Figur gemessen wird, auch die Bilder einer Bewegung. + + **Bedienung:** Leg eine Leinwand an, die alle Ansichten nebeneinander fasst, etwa 64 × 24 Pixel für vier Ansichten von 16 × 24. Die Leinwand vergrößerst du nachträglich in Aseprite über *Sprite > Canvas Size* ([Canvas](https://www.aseprite.org/docs/canvas/)), in Pixelorama über *Project > Resize Canvas* ([Transforming · Scale](https://pixelorama.org/user_manual/transforming/#scale)). Ein Raster in Zellgröße trennt die Ansichten: In Pixelorama stellst du Breite und Höhe des Rasters in den Einstellungen unter *Canvas* ein und blendest es mit Ctrl+G ein ([Canvas · Grid](https://pixelorama.org/user_manual/user_interface/canvas/#grid)), in Aseprite unter *Grid* in den Einstellungen für das aktive Dokument ([Preferences · Grid](https://www.aseprite.org/docs/preferences/#grid)). Die Hilfslinien zeichnest du in eine eigene Ebene in einer grellen Farbe, die in der Figur nicht vorkommt, und blendest sie beim Export aus. In LibreSprite funktioniert die Ebene mit Hilfslinien genauso. + + ## Maßstab: eine Tabelle für alles im Bild + + Jedes Asset, das du allein zeichnest, wandert ein wenig: Die Tür wird zu klein, die Kiste zu groß, der Boss mal 50, mal 70 Pixel hoch. Eine **Maßstabstabelle** hält das fest, bevor du zeichnest. Eine reale Größe pro Pixel hilft beim Rechnen. Ein Lehrbeispiel mit 7,5 cm pro Pixel: + + | Ding | real | Höhe | Breite | + | --- | --- | --- | --- | + | Tile | – | 16 px | 16 px | + | Figur | 1,80 m | 24 px | 16 px | + | Tür | 2,10 m | 28 px | 16 px | + | Kiste | 1,20 m | 16 px | 16 px | + | großer Gegner | 4,20 m | 56 px | 64 px | + + Die Rechnung ist eine Division: 2,10 m ÷ 0,075 m = 28 Pixel. Die realen Maße sind ein Hilfsmittel für Stimmigkeit, keine Pflicht zum Realismus. Du darfst davon abweichen, wo Lesbarkeit oder Spielfluss es verlangen, etwa mit einer Tür, die breiter ist, als sie real wäre, damit die Figur sichtbar hindurchpasst. Wichtig ist, dass jede Abweichung in der Tabelle steht und für alle Assets gilt. + + Die Draufsicht der meisten Top-down-Spiele schummelt dabei. Schlitter beschreibt die 3/4-Draufsicht „as if you are viewing the house from 45 degrees above … you see about 3/4 of both the roof and facade“ ([Pixelblog 3](https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1)). Höhen zeichnest du deshalb senkrecht in voller Länge, die Tiefe am Boden gestaucht; mehr dazu in [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum). Für die Kollision mit der Umgebung beschreibt Saint11 die Fläche am Boden als „ground projection of what it would be in 3-D“, nicht das ganze Bild ([Top Down Tricks](https://saint11.art/img/pixel-tutorials/TopDownTricks.gif)). Welche Fläche einer Figur getroffen werden kann, ist eine eigene Entscheidung, siehe [Reichweite, Hitboxen und Hurtboxen](/combat/hitboxen). + + ## Pixeldichte: Mixels und ganze Faktoren + + Schlitter rät, ein Bild nur in ganzen Vielfachen zu vergrößern, „in order to preserve the uniformity of the pixel units“ ([Pixelblog 5](https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics)). Das gilt nicht nur für das ganze Bild, sondern für jedes Teil darin. Für Pixel unterschiedlicher Größe im selben Bild ist das Wort **Mixel** verbreitet. Keine Quelle dieses Kurses definiert es; hier heißt es genau das: Pixel unterschiedlicher Größe nebeneinander. + + ![Zwei Fassungen derselben Szene auf einem Raster von 16 Pixeln: links eine Figur von 24 Pixeln Höhe, daneben eine Kiste von 16 Pixeln, rechts eine große vierbeinige Kreatur von 64 × 56 Pixeln mit orangem Auge. In A ist die Kreatur in halber Auflösung gezeichnet und verdoppelt, ihre Kontur läuft in groben Stufen aus Blöcken von 2 × 2 Pixeln. In B ist sie in voller Auflösung gezeichnet, Kontur und Schattierung sind so fein wie bei Figur und Kiste](/media/pixelart/ansichten-massstab/pixeldichte@2x.png "Kreatur verdoppelt (A) und in voller Auflösung (B). Eigenes Schaubild") + + In A ist die Kreatur 32 × 28 Pixel groß gezeichnet und dann verdoppelt. Jeder ihrer Pixel ist ein Block von 2 × 2, ihre Stufen sind doppelt so lang und hoch wie die der Figur, und sie wirkt gröber als alles andere, obwohl dieselben Farben im Spiel sind. In B ist sie in voller Auflösung gezeichnet, ihre Kontur und ihre Schattierung haben dieselbe Feinheit wie Figur und Kiste. + + Wer verdoppelt, muss nachzeichnen. Saint11 listet für das Vergrößern: „Hunt down big squares and make things rounder“, „Redraw broken lines and dither“, „Find areas to put extra details“ ([Resizing Pixel Art](https://saint11.art/img/pixel-tutorials/Resizing.gif)). Krumme Faktoren sind noch schlimmer. Bei 150 % wird jede zweite Pixelspalte doppelt so breit wie die anderen, das Bild bekommt ungleiche Pixel. Dasselbe gilt für Drehungen um krumme Winkel; Saint11 schreibt, Skalieren und Drehen von Pixelart „should always be avoided“. Wie Godot das ganze Bild ganzzahlig skaliert, steht in [Pixelraster in Godot](/godot/pixelraster). + + > [!MERKE] + > Alles in einem Bild hat dieselbe Pixelgröße. Ein großer Gegner bekommt mehr Pixel, keine größeren. + + ## Große Kreaturen: Grundkörper, Massen, ein Blickpunkt + + Eine große Kreatur ist ein Sprite wie jedes andere, nur mit mehr Pixeln und mehr Gelegenheit, sich zu verzetteln. Vier Regeln halten sie zusammen. + + **Aus Grundkörpern bauen.** Die Kreatur im Schaubild besteht aus zwei Ellipsen für Körper und Kopf, vier Rechtecken für die Beine und einem Dreieck als Horn. Drawabox zeigt in [Lektion 5](https://drawabox.com/lesson/5), wie man Tiere aus solchen Körpern konstruiert, und [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum) übt die Körper selbst. Konstruierst du zuerst, stimmen Volumen und Überschneidungen, bevor du einen Pixel Detail setzt. + + **Große Massen zuerst.** Saint11 rät beim Übertragen: „Focus on the big masses first“. Der Umriss trägt auch bei einer großen Kreatur die Lesbarkeit, siehe [Silhouette und Formensprache](/pixelart/silhouette-formsprache). + + **Clustergröße der kleinen Sprites.** In B sind die Schattierungsbänder der Kreatur mehrere Pixel breit, wie die Flächen der Figur. Schlitter rät: „Avoid too many small scattered clusters“ ([Pixelblog 57](https://www.slynyrd.com/blog/2025/7/28/pixelblog-57-knights-monsters-amp-castles)). Mehr Fläche heißt nicht mehr Rauschen. Ist die Kreatur feiner gezeichnet als die Figur, wirkt sie fremd, ist sie gröber, auch. + + **Ein Blickpunkt.** Das orange Auge ist der einzige gesättigte Farbfleck der Kreatur. Der stärkste Hell-Dunkel-Kontrast liegt zwar an der Kontur, doch der einzelne Farbakzent zieht den Blick, und der findet sofort Kopf und Blickrichtung. Valve setzt den höchsten Kontrast einer Figur ebenfalls gezielt an eine Stelle, auf Brusthöhe, wo die Waffe gehalten wird. Welche Stellen eines Bosses im Kampf wichtig sind, etwa Schwachpunkte und Zonen, behandelt [Große Kreaturen als Bosse](/combat/grosse-gegner). + + Plane außerdem, welche Teile sich später einzeln bewegen: Kopf, jedes Bein, Horn oder Schwanz. Jedes bekommt eine eigene Ebene, benannt nach dem Teil. Den Körper zeichnest du unter einem Bein vollständig weiter, auch wo das Bein ihn verdeckt, damit beim späteren Verschieben kein Loch entsteht. Gruppenebenen in Pixelorama halten die Teile zusammen ([Layer · Group layers](https://pixelorama.org/concepts/layer/#group-layers)). Die Bewegung selbst ist Thema des Animationskurses; hier geht es nur darum, sie nicht zu verbauen. + + Rechne den Aufwand vorher. 64 × 56 Pixel sind gut neunmal so viele wie eine Figur von 16 × 24, für jede Richtung und jedes Bild. Prüf deshalb, wie viele Richtungen eine große Kreatur in deinem Spiel braucht. + + > [!INTERVIEW] + > Studios suchen „A strong pixel art portfolio with unique creatures and characters“ ([Conradical Games](https://workwithindies.com/careers/conradical-games-pixel-artist)) oder ausdrücklich „good knowledge of perspective“ ([Pine Creek Games](https://workwithindies.com/careers/pine-creek-games-2d-artist)). Eine Frage im Portfolio-Gespräch: „Dein Boss wirkt neben der Spielfigur gröber. Woran liegt das?“ Gute Antwort: Du prüfst die Pixeldichte, also ob der Boss in voller Auflösung gezeichnet oder hochskaliert ist, dann die Clustergröße im Vergleich zur Figur. Du zeigst die Maßstabstabelle und das Modellblatt und erklärst, wo der Blickpunkt sitzt. Das ArtStation Magazine rät für Portfolios: „Delete half your portfolio“ ([Top 10 Portfolio Tips](https://magazine.artstation.com/2019/03/games-portfolio-top-10/)). Zeig also eher eine stimmige Szene als zehn Figuren in verschiedenen Maßstäben. + + ## Häufige Fehler + + - **Ansichten einzeln gezeichnet.** Ohne Hilfslinien springen Kopf und Hüfte beim Drehen. Ein Modellblatt mit Linien für alle Höhen. + - **Seitenansicht so breit wie vorn.** Von der Seite ist ein Körper schmaler. Höhen gleich, Breite neu. + - **Asymmetrie gespiegelt, ohne es zu merken.** Die Tasche wechselt die Schulter. Entscheiden und aufschreiben. + - **Maßstab im Kopf.** Jedes Asset wandert ein wenig. Eine Tabelle, die für alle gilt. + - **Teile hochskaliert.** Ein verdoppelter Boss hat doppelt so große Pixel wie die Figur. In voller Auflösung zeichnen. + - **Krumme Faktoren.** 150 % erzeugt ungleiche Pixel. Nur ganzzahlig vergrößern. + - **Große Kreatur voller Rauschen.** Mehr Platz verführt zu Kleinteilen. Clustergröße der kleinen Sprites halten. + - **Kein Blickpunkt.** Kontrast überall, der Blick findet nichts. Ein Akzent, eine Stelle. + - **Bewegliche Teile verschmolzen.** Ein Bein, das in den Körper gemalt ist, lässt sich später nicht bewegen. Eigene Ebenen planen. + + ## Zusammenfassung + + - Figuren in Draufsicht brauchen mindestens vier Richtungen. Die Seite wird gespiegelt, solange keine Asymmetrie dagegen spricht. + - Mit acht Richtungen und Spiegelung zeichnest du fünf Ansichten. + - Ein Modellblatt hält Kopf, Augen, Schultern, Hüfte und Füße in allen Ansichten auf denselben Reihen. + - Eine Maßstabstabelle legt die Pixelgrößen aller Assets fest; eine reale Größe pro Pixel hilft beim Rechnen. + - Alles in einem Bild hat dieselbe Pixelgröße. Vergrößert wird nur ganzzahlig, und hochskalierte Teile werden nachgezeichnet. + - Große Kreaturen baust du aus Grundkörpern, mit großen Massen, Clustern in der Größe der kleinen Sprites und einem Blickpunkt. + - Teile, die sich später bewegen, bekommen eigene Ebenen; die Bewegung selbst ist Thema des Animationskurses. +exercises: + - id: richtungen-spiegeln + type: choice + title: Wann Spiegeln Arbeit spart + prompt: | + Welche Aussagen über Richtungen und Spiegeln stimmen? + options: + - text: Laut Slynyrd brauchen Figuren in Draufsicht mindestens vier Richtungen. + correct: true + why: Oben, unten und zwei Seiten. Gezeichnet werden drei, die zweite Seite entsteht durch Spiegeln. + - text: Eine Tasche über einer Schulter wechselt beim Spiegeln die Seite. + correct: true + why: Asymmetrische Merkmale drehen sich mit. Dann entscheidest du, ob du das in Kauf nimmst oder beide Seiten zeichnest. + - text: Die Rückansicht entsteht, indem man die Vorderansicht waagerecht spiegelt. + correct: false + why: Der Umriss ist ähnlich, aber das Innere ist anders, das Gesicht fehlt, die Haare bedecken den Kopf. Die Rückansicht wird neu gezeichnet. + - text: In der Seitenansicht ist die Figur genauso breit wie von vorn, nur anders bemalt. + correct: false + why: Von der Seite ist ein Körper schmaler. Gleich bleiben die Höhen, nicht die Breite. + explanation: | + Spiegeln spart eine ganze Ansicht, aber nur bei der Seite und nur, solange die Figur symmetrisch ist. Vorder- und Rückansicht teilen den Umriss, nicht das Innere. Und die Seitenansicht hat eigene Breiten, aber dieselben Höhen wie die anderen. Wer das vorher klärt, zeichnet nicht doppelt und nicht falsch. + resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: pixeldichte-bild + type: choice + title: Wo die Pixel nicht passen + prompt: | + Woran erkennst du in Feld A, dass die Kreatur nicht in derselben Pixeldichte gezeichnet ist wie Figur und Kiste? + + ![Zwei Fassungen derselben Szene mit Figur, Kiste und großer Kreatur. In A ist die Kreatur verdoppelt und hat grobe Stufen aus Blöcken von 2 × 2 Pixeln, in B ist sie in voller Auflösung gezeichnet](/media/pixelart/ansichten-massstab/pixeldichte@2x.png "Kreatur verdoppelt (A) und in voller Auflösung (B). Eigenes Schaubild") + options: + - text: Die Stufen ihrer Kontur und ihre Schattierungsbänder bestehen aus Blöcken von 2 × 2 Pixeln, die der Figur aus einzelnen Pixeln. + correct: true + why: Das ist das Kennzeichen eines hochskalierten Teils. Seine kleinste Einheit ist doppelt so groß wie die der übrigen Szene. + - text: Die Kreatur ist viel größer als die Figur. + correct: false + why: Das ist sie in A und B. Größe ist gewollt, entscheidend ist die Größe der einzelnen Pixel. + - text: Die Kreatur hat andere Farben als die Figur. + correct: false + why: Farben gehören zur Gestaltung, nicht zur Pixeldichte. In A und B hat die Kreatur dieselben Farben. + - text: Die Kreatur steht über mehrere Tiles. + correct: false + why: Auch das gilt für A und B. Ein großer Gegner darf mehrere Tiles belegen. + explanation: | + Gemischte Pixelgrößen erkennst du an der kleinsten Einheit: Wie kurz kann eine Stufe sein, wie schmal ein Band? In A ist sie bei der Kreatur doppelt so groß wie bei Figur und Kiste. Deshalb wirkt die Kreatur gröber, obwohl Farben und Formen stimmen. Schlitter rät aus genau diesem Grund, nur ganzzahlig zu vergrößern und gleiche Pixeleinheiten zu wahren. + resources: + - title: Slynyrd · Pixelblog 5 · Back to Basics + url: https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics + + - id: blickpunkt-kreatur + type: choice + title: Wohin schaut man zuerst? + prompt: | + Eine große Kreatur von 64 × 56 Pixeln wirkt unruhig, der Blick findet keinen Halt. Welche Änderung schafft am ehesten einen klaren Blickpunkt? + options: + - text: Den stärksten Kontrast und die einzige gesättigte Akzentfarbe auf eine Stelle legen, etwa das Auge. + correct: true + why: Ein einzelner Akzent zieht den Blick. Valve legt den höchsten Kontrast einer Figur ebenfalls gezielt an eine Stelle. + - text: Überall mehr Details setzen, damit die Kreatur interessanter wird. + correct: false + why: Mehr Details verteilen die Aufmerksamkeit weiter. Slynyrd rät, zu viele kleine verstreute Cluster zu vermeiden. + - text: Die Kreatur in halber Größe zeichnen und verdoppeln, damit die Formen gröber und klarer werden. + correct: false + why: Dann hat sie doppelt so große Pixel wie der Rest der Szene. Klarer wird sie durch große Massen, nicht durch große Pixel. + - text: Eine dickere schwarze Kontur um die ganze Kreatur ziehen. + correct: false + why: Eine Kontur trennt die Kreatur vom Grund, aber sie legt keinen Punkt fest, an dem der Blick hängen bleibt. + explanation: | + Ein Blickpunkt entsteht durch Ausnahme: Eine Stelle ist heller, dunkler oder farbiger als alles um sie herum. Wenn überall Kontrast herrscht, gibt es keine Ausnahme mehr. Bei großen Kreaturen ist die Stelle oft der Kopf oder ein Schwachpunkt, und wo sie im Kampf sitzen sollte, ist eine Frage des Combat Designs. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: modellblatt-ablauf + type: order + title: Ein Modellblatt anlegen + prompt: | + Bring die Schritte, mit denen du ein Modellblatt für vier Richtungen anlegst, in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Größe der Figur aus der Maßstabstabelle übernehmen. + Leinwand mit einer Zelle pro Ansicht und eine Ebene mit Hilfslinien anlegen. + Vorderansicht auf den Hilfslinien zeichnen. + Silhouette der Vorderansicht für die Rückansicht kopieren und das Innere neu zeichnen. + Seitenansicht auf denselben Linien neu aufbauen, schmaler als vorn. + Seitenansicht spiegeln und asymmetrische Merkmale prüfen. + Alle Ansichten nebeneinander bei 100 % vergleichen. + alternatives: + - [1, 2, 3, 5, 4, 6, 7] + - [1, 2, 3, 5, 6, 4, 7] + explanation: | + Die Größe kommt aus der Tabelle, damit die Figur zum Rest der Welt passt. Hilfslinien müssen vor der ersten Ansicht stehen, sonst richtet man sie nach der Zeichnung aus. Die Vorderansicht liefert den Umriss für die Rückansicht, die Seite braucht einen eigenen Aufbau. Gespiegelt wird erst, wenn die Seite fertig ist, und der Vergleich bei 100 % zeigt, ob eine Ansicht beim Drehen springt. + resources: + - title: Pixelorama Docs · Canvas · Grid + url: https://pixelorama.org/user_manual/user_interface/canvas/#grid + + - id: richtungen-zaehlen + type: output + title: Wie viele Ansichten zeichnest du? + prompt: | + Eine Figur soll in acht Richtungen zu sehen sein. Die Ansichten mit Blick nach links entstehen durch Spiegeln der Ansichten mit Blick nach rechts, die Figur ist symmetrisch. Wie viele Ansichten zeichnest du selbst? Antworte mit der Zahl. + lang: text + code: | + Richtungen: 8 + Spiegeln: links aus rechts + Figur: symmetrisch + expected: | + 5 + accept: + - 5 Ansichten + - fünf + - 5 Richtungen + hints: + - Welche Richtungen haben kein Spiegelbild, weil sie genau nach oben oder unten zeigen? + explanation: | + Oben und unten haben kein Gegenstück, sie zeichnest du je einmal. Die drei Richtungen mit Blick nach rechts, schräg unten, Seite und schräg oben, zeichnest du ebenfalls; die drei nach links entstehen durch Spiegeln. Das ergibt 2 + 3 = 5. Bei vier Richtungen sind es entsprechend drei, wie Slynyrd beschreibt. + resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: tuer-pixel + type: output + title: Wie hoch wird die Tür? + prompt: | + In deiner Maßstabstabelle ist eine Figur von 1,80 m 24 Pixel hoch. Wie viele Pixel hoch wird eine Tür von 2,10 m? Antworte mit der Zahl. + lang: text + code: | + Figur: 1,80 m = 24 px + Tür: 2,10 m = ? px + expected: | + 28 + accept: + - 28 px + - 28 Pixel + hints: + - Rechne zuerst aus, wie viele Zentimeter ein Pixel darstellt. + explanation: | + 180 cm ÷ 24 px = 7,5 cm pro Pixel. 210 cm ÷ 7,5 cm = 28 Pixel. Mit dem Wert pro Pixel rechnest du jedes weitere Asset in Sekunden aus, eine Kiste von 1,20 m wird 16 Pixel, also genau ein Tile. Ob du die Tür im Spiel bewusst größer machst, damit die Figur gut hindurchpasst, entscheidest du; die Abweichung gehört dann in die Tabelle. + resources: + - title: Slynyrd · Pixelblog 20 · Top-down tiles + url: https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles + + - id: aufwand-faktor + type: output + title: Wie viel mehr Arbeit ist der Boss? + prompt: | + Eine Figur hat eine Leinwand von 16 × 24 Pixeln, eine große Kreatur eine von 64 × 56. Wie viele Male mehr Pixel hat die Leinwand der Kreatur, auf eine ganze Zahl gerundet? Antworte mit der Zahl. + lang: text + code: | + Figur: 16 × 24 px + Kreatur: 64 × 56 px + expected: | + 9 + accept: + - 9-mal + - 9× + - neunmal + - etwa 9 + - 9 mal + explanation: | + 16 × 24 = 384 Pixel, 64 × 56 = 3584 Pixel. 3584 ÷ 384 ≈ 9,3. Nicht jeder Pixel der Leinwand ist bemalt, aber die Zahl zeigt die Größenordnung: Eine Ansicht der Kreatur kostet so viel wie neun Figuren. Für vier Richtungen und mehrere Bilder einer Bewegung wächst das weiter, deshalb lohnt die Frage, wie viele Ansichten ein Boss braucht. + resources: + - title: Derek Yu · Pixel Art Tutorial · Big sprite + url: https://www.derekyu.com/makegames/pixelart.html#big_sprite + + - id: begriffe-massstab + type: gap + title: Begriffe zu Ansicht und Maßstab + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Ein Blatt, das alle Ansichten einer Figur mit Hilfslinien nebeneinanderstellt, heißt ⟦Modellblatt⟧. Die Seitenansicht für die zweite Richtung entsteht durch ⟦Spiegeln⟧, solange die Figur keine ⟦Asymmetrie⟧ hat, die die Seite wechseln würde. Pixel unterschiedlicher Größe im selben Bild nennt man ⟦Mixels⟧. Vergrößern darfst du nur ⟦ganzzahlig⟧. Die Stelle einer großen Kreatur mit dem stärksten Kontrast ist ihr ⟦Blickpunkt⟧. + gaps: + - label: Blatt mit allen Ansichten + hint: Auf Englisch Model Sheet. + accept: ["Model Sheet", "Turnaround", "Modell-Blatt"] + - label: zweite Seite + hint: Waagerecht umdrehen, ein Verb. + accept: ["Spiegelung", "Flip", "Flippen"] + - label: Gegenteil von symmetrisch + hint: Ein Merkmal nur auf einer Seite. + accept: ["asymmetrisches Merkmal", "Asymmetrien"] + - label: gemischte Pixelgrößen + hint: Kunstwort aus „mixed“ und „Pixel“. + accept: ["Mixel", "gemischte Pixel"] + - label: Art der Vergrößerung + hint: Faktor 2, 3, 4 – keine Kommazahl. + accept: ["ganzzahlige", "in ganzen Zahlen", "integer", "in ganzen Vielfachen"] + - label: wohin der Blick fällt + hint: Die Stelle, zu der das Auge zuerst wandert. + accept: ["Fokuspunkt", "Focal Point", "Blickfang"] + explanation: | + Modellblatt und Spiegeln regeln die Ansichten, Asymmetrie ist die Ausnahme, die du bewusst entscheidest. Mixels und ganzzahlige Vergrößerung betreffen die Pixeldichte, die alles im Bild zusammenhält. Der Blickpunkt sagt bei großen Kreaturen, wohin das Auge zuerst gehen soll. + + - id: massstabstabelle-fehler + type: bug + title: Ein Fass so groß wie eine Kiste + prompt: | + Lehrbeispiel: Maßstabstabelle für ein Mockup. Im Mockup reicht das Fass der Figur bis zur Brust und steht höher als die Kiste daneben. Finde die Zeile. + lang: prose + code: | + Maßstab: 7,5 cm pro Pixel + Figur: 1,80 m, 24 px + Tür: 2,10 m, 28 px + Kiste: 1,20 m, 16 px + Fass: 0,90 m, 18 px + Großer Gegner: 4,20 m, 56 px + lines: [5] + hints: + - Rechne jede Zeile mit 7,5 cm pro Pixel nach. + explanation: | + 0,90 m ÷ 0,075 m = 12 Pixel, nicht 18. Mit 18 Pixeln ist das Fass größer als die Kiste mit 16 und reicht der Figur von 24 Pixeln weit über die Hüfte. Alle anderen Zeilen gehen mit 7,5 cm pro Pixel auf. Ein solcher Fehler fällt erst auf, wenn die Dinge nebeneinanderstehen; deshalb prüfst du jede neue Zeile sofort nach. + resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: modellblatt-huefte + type: bug + title: Beim Drehen werden die Beine kürzer + prompt: | + Lehrbeispiel: Notiz zum Modellblatt einer Figur. Beim Wechsel zwischen Vorder- und Seitenansicht scheinen die Beine kürzer zu werden, obwohl die Figur gleich groß bleibt. Finde die Zeile. + lang: prose + code: | + Modellblatt Lehrfigur, 16 × 24 je Ansicht + Kopfoberkante: Reihe 1 in allen Ansichten + Augen: Reihe 5 vorn und seitlich + Schultern: Reihe 8 in allen Ansichten + Hüfte: Reihe 16 vorn, Reihe 18 seitlich + Fußsohle: Reihe 24 in allen Ansichten + lines: [5] + hints: + - Welche Höhe ist nicht in allen Ansichten gleich? + explanation: | + Die Hüfte liegt seitlich zwei Reihen tiefer als vorn. Weil die Fußsohle in beiden Ansichten auf Reihe 24 bleibt, sind die Beine in der Seitenansicht zwei Pixel kürzer und der Rumpf länger. Beim Drehen springt die Hüfte, und das liest sich als Schrumpfen der Beine. Alle Hilfslinien gelten für alle Ansichten, nur die Breiten dürfen sich ändern. + resources: + - title: Game Developer · How Valve Makes Art To Enhance Gameplay + url: https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay + + - id: pixeldichte-erklaeren + type: explain + title: Warum der Boss fremd wirkt + prompt: | + Eine große Kreatur wurde mit 32 × 28 Pixeln gezeichnet und für das Spiel auf 64 × 56 verdoppelt. Neben der Figur und der Kiste wirkt sie grob und wie aus einem anderen Spiel. Erkläre in drei bis fünf Sätzen, woran das liegt und wie du es behebst. + lang: text + code: | + Figur: 24 px hoch, 1 px = 1 px + Kiste: 16 px, 1 px = 1 px + Kreatur: gezeichnet 32 × 28, + verdoppelt auf 64 × 56, + 1 Pixel = Block 2 × 2 + points: + - Die kleinste Einheit der Kreatur ist ein Block von 2 × 2 Pixeln, die der übrigen Szene ein Pixel; das Bild hat gemischte Pixelgrößen. + - Stufen in der Kontur und Bänder in der Schattierung sind dadurch doppelt so grob wie bei Figur und Kiste. + - Slynyrd rät, nur ganzzahlig zu vergrößern, um gleiche Pixeleinheiten zu wahren; das gilt für jedes Teil im Bild, nicht nur das Ganze. + - Abhilfe ist, die Kreatur in voller Auflösung neu zu zeichnen oder nach dem Verdoppeln nachzuarbeiten, wie Saint11 es beschreibt. + explanation: | + Das Verdoppeln ist ganzzahlig, aber nur für die Kreatur. Ihre Pixel sind danach 2 × 2 groß, die der Figur und der Kiste 1 × 1. Das Auge sieht diesen Unterschied an jeder Stufe der Kontur und an jedem Schattierungsband, deshalb wirkt die Kreatur gröber, auch wenn Farben und Formen passen. Schlitters Regel der gleichen Pixeleinheiten gilt für jedes Teil im Bild. Beheben lässt sich das nur durch Zeichnen: Entweder die Kreatur entsteht gleich in 64 × 56, oder du gehst nach dem Verdoppeln Saint11s Liste durch, große Quadrate runden, Linien neu ziehen, Details ergänzen. + resources: + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif + + - id: vier-richtungen-modellblatt + type: practice + title: Ein Modellblatt in vier Richtungen + prompt: | + Zeichne im Editor eine eigene Figur oder eine neutrale Gliederpuppe in vier Richtungen auf einem Modellblatt: vorn, Seite, hinten und die gespiegelte Seite. Leg vorher eine Ebene mit Hilfslinien für Kopfoberkante, Augen, Schultern, Hüfte und Fußsohle an. Schreib hier in einigen Sätzen auf, welche Merkmale asymmetrisch sind und wie du beim Spiegeln mit ihnen umgegangen bist. + lang: prose + checklist: + - Die Datei hat eine Zelle pro Ansicht, alle gleich groß, und eine eigene Ebene mit Hilfslinien. + - In allen vier Ansichten liegen Kopfoberkante, Schultern, Hüfte und Fußsohle auf denselben Reihen; du hast es mit den Hilfslinien geprüft. + - Die Seitenansicht ist schmaler als die Vorderansicht. + - Die gespiegelte Seite ist mit dem Spiegelbefehl entstanden, nicht neu gezeichnet. + - Du hast jedes asymmetrische Merkmal notiert und dazu, ob es beim Spiegeln die Seite wechseln darf. + - Du hast die vier Ansichten nebeneinander bei 100 % angesehen und notiert, ob eine beim Durchschalten springt. + hints: + - Kopier die Silhouette der Vorderansicht in die Zelle der Rückansicht und zeichne dort nur das Innere neu. + explanation: | + Das Modellblatt ist die Grundlage für alles, was du später mit der Figur machst. Die Hilfslinien zwingen alle Ansichten auf dieselben Höhen, das verhindert das Springen beim Drehen. Die Notiz zur Asymmetrie hält eine Entscheidung fest, die sonst stillschweigend fällt und erst im Spiel auffällt. Wie sich die Figur in jeder Richtung bewegt, kommt im Animationskurs. + resources: + - title: Aseprite Docs · Symmetry + url: https://www.aseprite.org/docs/symmetry/ + - title: Pixelorama Docs · Drawing · Mirroring + url: https://pixelorama.org/user_manual/drawing/#mirroring + + - id: massstab-mockup + type: practice + title: Maßstabstabelle und Mockup mit großer Kreatur + prompt: | + Leg eine Maßstabstabelle mit mindestens sechs Einträgen an: Tile, Figur, Tür, Kiste, ein kleiner Gegner und eine große Kreatur. Zeichne dann ein Mockup auf einem Raster in Tilegröße mit Figur, Kiste, Tür und der großen Kreatur in voller Auflösung. Die Kreatur baust du aus Grundkörpern, mit höchstens drei großen Massen und einem Blickpunkt, die Teile, die sich später bewegen sollen, in eigenen Ebenen. Notiere hier die Tabelle und zwei Sätze zu deinen Entscheidungen. + lang: prose + starter: | + Maßstab: … cm pro Pixel + Tile: + Figur: + Tür: + Kiste: + kleiner Gegner: + große Kreatur: + Entscheidungen: + checklist: + - Die Tabelle hat mindestens sechs Einträge mit Pixelmaßen, und jede Zeile geht mit dem angegebenen Maßstab auf oder ist als bewusste Abweichung markiert. + - Im Mockup haben alle Dinge dieselbe Pixelgröße; nichts ist hochskaliert. + - Die Kreatur ist aus erkennbaren Grundkörpern aufgebaut, und du hast notiert, aus welchen. + - Die Kreatur hat genau einen Blickpunkt mit dem stärksten Kontrast der Kreatur. + - Jedes Teil, das sich später bewegen soll, liegt in einer eigenen, benannten Ebene, und der Körper ist unter diesen Teilen vollständig gezeichnet. + - Du hast das Mockup bei 100 % angesehen und notiert, ob die Clustergröße der Kreatur zu der der Figur passt. + hints: + - Rechne zuerst die Größe pro Pixel aus der Figur aus, dann alle anderen Zeilen. + - Zeichne die Kreatur zuerst als graue Grundkörper in einer eigenen Ebene und erst danach Umriss und Schattierung. + explanation: | + Tabelle und Mockup prüfen sich gegenseitig: Was in der Tabelle stimmt, aber im Mockup falsch wirkt, ist ein Fall für eine bewusste Abweichung. Die große Kreatur in voller Auflösung zeigt dir, wie viel Arbeit ein Boss kostet. Die getrennten Ebenen sind die Vorbereitung für den Animationskurs, ohne dass du hier schon etwas bewegst. Welche Teile ein Boss im Kampf braucht, etwa Schwachpunkte, behandelt [Große Kreaturen als Bosse](/combat/grosse-gegner). + resources: + - title: Drawabox · Lesson 5 (Tiere konstruieren) + url: https://drawabox.com/lesson/5 + - title: Slynyrd · Pixelblog 5 · Back to Basics + url: https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics diff --git a/content/pixelart/modules/beobachten.yaml b/content/pixelart/modules/beobachten.yaml new file mode 100644 index 00000000..1f1c1281 --- /dev/null +++ b/content/pixelart/modules/beobachten.yaml @@ -0,0 +1,455 @@ +id: beobachten +title: Beobachten, Messen und Referenzen +level: 1 +minutes: 90 +summary: Warum du zeichnest, was du über einen Gegenstand weißt, statt was du siehst, und wie Konturzeichnen, Negativraum, Vergleichsmessen mit dem Stift und ehrlich genutzte Referenzen das ändern – mit einer Skizzenroutine für Bus und Bahn. +place: unterwegs +goals: + - Du unterscheidest Symbolzeichnen von Beobachtungszeichnen und erkennst Symbole in deinen eigenen Skizzen. + - Du zeichnest Konturen langsam nach Beobachtung und baust Formen über ihren Negativraum auf. + - Du misst Verhältnisse und Winkel mit dem Stift und überträgst sie auf Karopapier. + - Du sammelst und analysierst Referenzen und nutzt sie, ohne abzupausen oder Entwürfe zu übernehmen. + - Du planst eine Skizzenroutine für unterwegs mit 2-Minuten-Thumbnails und der 50-%-Regel. +resources: + - title: Ctrl+Paint · Visual Measuring + url: https://www.ctrlpaint.com/videos/visual-measuring + - title: Ctrl+Paint · Drawing Shape · Negative Space + url: https://www.ctrlpaint.com/videos/drawing-shape-negative-space + - title: Betty Edwards · Theory (fünf Wahrnehmungsfertigkeiten) + url: https://www.drawright.com/theory + - title: Drawabox · Lesson 0 · The 50 % Rule + url: https://drawabox.com/lesson/0/2/50percent + - title: Line of Action · zeitgesteuerte Referenzen + url: https://line-of-action.com/ +lesson: | + Zeichne aus dem Kopf einen Stuhl von der Seite. Die meisten Anfänger zeichnen ein Rechteck als Sitz, vier Striche als Beine und ein Rechteck als Lehne. Jetzt stell dich neben einen echten Stuhl und sieh ihn von der Seite an. Du siehst zwei Beine, nicht vier, denn die vorderen verdecken die hinteren. Die Sitzfläche ist ein schmaler Streifen. Die Lehne steht schräg, und die Querstrebe sitzt tiefer, als du dachtest. Deine Zeichnung zeigt, was du über Stühle weißt. Sie zeigt nicht, was vor dir steht. + + In Pixelart wiegt das doppelt. Ein Sprite von 16 × 16 Pixeln hat Platz für wenige Entscheidungen, und jede beruht darauf, was du an einem Gegenstand gesehen hast. Dieses Modul übt das Sehen: Kanten verfolgen, Lücken zeichnen, Verhältnisse mit dem Stift messen und Referenzen nutzen, ohne sie abzupausen. Du brauchst einen Bleistift, ein kleines Heft, am besten mit Karos, und dein Handy für Referenzen und Timer. + + ## Symbol oder Beobachtung: was dein Kopf zeichnet + + Matt Kohr (Ctrl+Paint) beschreibt den Fehler vom Anfang: Anfänger zeichnen Symbole statt der Dinge vor ihnen, selbst wenn das Ding direkt im Blick ist. Sein Rat für Umrisse: „draw the unique contour you're observing, and not a generalized outline drawn from your memory“ ([Drawing Shape: Contour](https://www.ctrlpaint.com/videos/drawing-shape-contour)). Ein **Symbol** ist die Kurzform, die du als Kind gelernt hast: Auge als Mandel, Haus mit Spitzdach, Stuhl mit vier Beinen. **Beobachtungszeichnen** heißt, die Kurzform beiseitezulegen und nachzusehen. + + Betty Edwards zerlegt Zeichnen in fünf Wahrnehmungsfertigkeiten ([Theory](https://www.drawright.com/theory)): Kanten sehen („contour drawing“), Zwischenräume sehen („negative spaces“), Verhältnisse sehen („perspective and proportion“), Licht und Schatten sehen und das Ganze sehen. Die Seite begründet das mit einer Theorie über Hirnhälften, die heute als überholt gilt. Für die Übungen hier brauchst du nur die Liste. Dieses Modul übt die ersten drei Fertigkeiten, Licht und Schatten folgen in [Licht, Schatten und Tonwerte](/pixelart/licht-werte). + + Drawabox, ein freier Zeichenkurs von Irshad Karim, nennt drei Grundlagen: Strichführung, Beobachtung und räumliches Denken ([Lesson 0](https://drawabox.com/lesson/0)). Räumliches Denken übt das nächste Modul, [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum). + + Warum zählt das in Pixeln? Pedro Medeiros (Saint11) zeigt in [Resizing](https://saint11.art/img/pixel-tutorials/Resizing.gif), was beim Verkleinern passiert: „as the resolution decreases you need to start choosing what details are important“. Auswählen kann nur, wer gesehen hat, was da ist. + + ## Kontur: langsam an der Kante entlang + + Konturzeichnen ist die erste Übung gegen Symbole. Dein Blick wandert langsam an einer Kante des Gegenstands entlang, und der Stift folgt im selben Tempo. Du schaust mehr auf den Gegenstand als auf das Papier. Kohr nennt Kontur „a linear approach to drawing, focusing on creating descriptive outlines“ (Quelle wie oben). + + Drei Regeln helfen: + + - **Langsam.** Eine Kante von einer Handbreite braucht eine halbe Minute. Schnelle Striche zeichnet dein Gedächtnis. + - **Jede Richtungsänderung zählt.** Wo die Kante knickt, knickt der Strich. Wo sie hinter einer anderen verschwindet, hört der Strich auf. + - **Schief ist erlaubt.** Verzerrte Proportionen sind bei dieser Übung normal. Sie trainiert das Hinsehen, nicht die fertige Zeichnung. + + Gute Motive für den Bus: deine eigene Hand, ein Schuh, ein Rucksack, die Haltestange mit ihren Gelenken. Menschen gegenüber zeichnest du nur, wenn es sie nicht stört. + + ## Negativraum: die Lücken zeichnen + + Der **Negativraum** ist der Raum um einen Gegenstand und zwischen seinen Teilen. Kohr schreibt, dass man einen Gegenstand oft am besten über den Raum um ihn herum sieht, und nennt den Negativraum genauso wichtig wie den Gegenstand selbst ([Drawing Shape: Negative Space](https://www.ctrlpaint.com/videos/drawing-shape-negative-space)). + + ![Drei Felder mit einem Stuhl in Seitenansicht. A zeigt die dunkle Kontur: senkrechte Lehne, die links in ein Bein übergeht, Sitz, Querstrebe und rechtes Bein. In B sind die beiden Lücken zwischen den Beinen orange gefüllt, eine zwischen Sitz und Querstrebe, eine zwischen Querstrebe und Boden. C zeigt nur die zwei orangen Rechtecke ohne Stuhl](/media/pixelart/beobachten/negativraum@2x.png "Kontur (A), Lücken gefüllt (B) und nur die Lücken (C). Eigenes Schaubild") + + In A siehst du einen Stuhl, und dein Kopf ergänzt sofort das Wort „Stuhl“. In B sind die Lücken zwischen den Beinen gefüllt: eine zwischen Sitz und Querstrebe, eine zwischen Querstrebe und Boden. In C stehen die Lücken allein. Für diese Formen hast du kein Symbol, also musst du hinsehen. Beide Rechtecke sind gleich groß und fast dreimal so breit wie hoch. Zeichnest du sie richtig, liegen Sitz, Querstrebe und Beine an ihren Kanten, und der Stuhl stimmt. + + > [!TIP] Lücken zuerst + > Bei Stühlen, Fahrrädern, Pflanzen oder einer Hand mit gespreizten Fingern zeichnest du zuerst die größte Lücke. Danach die Nachbarlücken, dann die Teile dazwischen. Der Gegenstand entsteht als Rest. + + In Pixelart ist Negativraum sichtbar: Jedes leere Kästchen innerhalb einer Figur ist eine Entscheidung. Ob ein Arm am Körper klebt oder Luft dazwischen hat, entscheidet später, ob eine Pose lesbar ist. Das vertieft [Silhouette und Formensprache](/pixelart/silhouette-formsprache). + + ## Vergleichsmessen mit dem Stift + + Kohr fasst es so: „Drawing is at least 50% 'seeing'“ ([Visual Measuring](https://www.ctrlpaint.com/videos/visual-measuring)). Visuelles Messen gilt für Winkel und für Proportionen und braucht nur einen Stift ([Visual Measuring: Proportion](https://www.ctrlpaint.com/videos/visual-measuring-proportion)). Das Verfahren: + + 1. Streck den Arm ganz aus und drück den Ellbogen durch. So bleibt der Abstand zwischen Auge und Stift bei jeder Messung gleich. + 2. Schließ ein Auge. Mit zwei Augen siehst du den Stift doppelt. + 3. Halte den Stift senkrecht, die Spitze an der oberen Kante einer Strecke, die du als **Einheit** wählst, etwa den Kopf einer Person oder die Höhe einer Tasse. + 4. Schieb den Daumen auf dem Stift bis zur unteren Kante. + 5. Vergleiche mit dieser Länge andere Strecken: Wie oft passt die Tassenhöhe in ihre Breite? Wie oft der Kopf in die ganze Figur? + 6. Schreib das Verhältnis auf und übertrage es aufs Papier. + + Für **Winkel** hältst du den Stift genau waagerecht oder senkrecht vor eine schräge Kante, etwa die Lehne. Schätz den Winkel zwischen Stift und Kante und übertrage ihn mit dem Heftrand als Bezug. + + > [!WARNING] Gleicher Arm, gleiche Ebene + > Beugst du den Arm zwischen zwei Messungen, ändert sich die Einheit, und alle Verhältnisse stimmen nicht mehr. Kippst du den Stift zum Gegenstand hin, misst du eine verkürzte Strecke. Der Stift bleibt parallel zu deinem Gesicht. + + So sieht eine Messnotiz für eine Tasse aus: + + ```text + Einheit: Tassenhöhe = 1 + Breite ohne Henkel 0,75 + Henkel 0,25 breit, 0,5 hoch + Öffnung Ellipse, 1/4 so hoch wie breit + ``` + + Auf Karopapier wird daraus ein Plan in Kästchen. Soll die Tasse 12 Kästchen hoch werden, ist sie ohne Henkel 9 breit, der Henkel 3 breit und 6 hoch. Damit bist du schon bei der Rechnung, die du in einem Sprite brauchst: Ein Kästchen ist ein Pixel. Menschen misst du in Kopfhöhen, mehr dazu in [Figur, Geste und Proportion](/pixelart/figur-proportion). + + > [!MERKE] + > Verhältnisse vor Details. Erst stimmen Gesamthöhe, Gesamtbreite und die großen Lücken, dann kommen Henkel, Schrauben und Gesichter. + + ## Referenzen: Lernmaterial, keine Vorlage + + Eine **Referenz** ist ein Bild oder Gegenstand, den du beim Zeichnen ansiehst, um etwas zu verstehen. Referenzen sind kein Schummeln. Sie sind dein Lernmaterial. Drei Schritte: + + - **Sammeln.** Am besten eigene Fotos: ein Gegenstand aus mehreren Winkeln, mit Licht von einer Seite. Für Menschen und Tiere gibt es Seiten mit Fotos und Timer im Browser: [Line of Action](https://line-of-action.com/) bietet Figuren, Tiere, Gesichter und Hände, [Quickposes](https://quickposes.com/en) ist eine freie Bildsammlung für Posen mit selbst gewähltem Zeitlimit. + - **Analysieren.** Schreib zu einer Referenz drei Beobachtungen: ein Verhältnis, einen Winkel, eine Lücke. Das ist eine Studie, kein fertiges Bild. + - **Nutzen, ohne abzupausen.** Abpausen liefert eine genaue Linie, aber du hast dabei nichts gemessen und nichts entschieden. Die Hand folgt einer Kante, die dein Blick nicht verstanden hat. Zeichne neben die Referenz, nicht darauf. + + Für dein Spiel gilt eine zweite Grenze. Referenzen zeigen dir, wie ein Stuhl, ein Hund oder eine Rüstung gebaut ist. Den Entwurf machst du danach selbst. Eine abgezeichnete Figur aus einem anderen Spiel oder ein nachgezeichnetes Foto gehört nicht hinein. + + Dazu die Regel dieses Kurses: KI darf technische Arbeit beschleunigen, etwa ein Skript, das deine Referenzfotos nach Datum sortiert. Jede Zeichnung, jeder Entwurf und jedes Asset ist deine eigene Arbeit. Ein generiertes Bild ersetzt weder Referenz noch Entwurf. Es zeigt keinen echten Gegenstand, den du messen könntest, und keine Entscheidung, die du getroffen hast. + + Am PC legst du Referenzen neben die Leinwand statt darunter. Krita hat dafür das [Referenzbild-Werkzeug](https://docs.krita.org/en/reference_manual/tools/reference_images_tool.html). + + > [!PRAXIS] + > Studios suchen eigene Entwürfe. Conradical Games verlangte von Bewerbern für eine Pixel-Artist-Stelle „A strong pixel art portfolio with unique creatures and characters“ ([Work With Indies](https://workwithindies.com/careers/conradical-games-pixel-artist)). Pine Creek Games nannte für 2D Artists „good knowledge of perspective“ und „Not using AI in their work“ als Muss ([Work With Indies](https://workwithindies.com/careers/pine-creek-games-2d-artist)). In beiden Anzeigen ist eigene Arbeit eine Bedingung, keine Stilfrage. Beobachtung ist das Material, aus dem eigene Entwürfe entstehen. + + ## Skizzenroutine im Bus + + Ein **Thumbnail** ist eine kleine, schnelle Skizze, etwa so groß wie eine Streichholzschachtel. Im Bus zeichnest du Thumbnails von zwei Minuten: Gesamtform, eine Einheit gemessen, die größte Lücke, fertig. Proko beschreibt Sitzungen für schnelle Figurenskizzen mit Posen „ranging from 30 seconds to 10 minutes“ ([How to Draw Gesture](https://www.proko.com/course-lesson/how-to-draw-gesture)). Zwei Minuten liegen am kurzen Ende und passen zwischen zwei Haltestellen. + + **Werkzeuge unterwegs.** Papier zuerst: ein Bleistift und ein Heft im Format A6, am besten mit 5-mm-Karos. Das Handy dient als Timer, Referenzquelle und Archiv; fotografier jede volle Seite. Krita gibt es für Android nur auf Tablets und Chromebooks, nicht auf Handys ([Krita FAQ](https://docs.krita.org/en/KritaFAQ.html#can-i-get-krita-for-ipad-or-for-android)), und Pixelorama nennt seine Android-Version „mostly meant to be used in tablets“ ([Installation](https://pixelorama.org/user_manual/installation/#android)). Für eine Handyskizze reicht eine Notiz-App mit Zeichenfunktion. + + **Die 50-%-Regel.** Drawabox teilt die Zeichenzeit in zwei Hälften: eine für Übungen und Studien, eine für Zeichnen um seiner selbst willen, ohne Lernziel ([The 50 % Rule](https://drawabox.com/lesson/0/2/50percent)). Wer nur übt, verliert die Lust. Wer nur frei zeichnet, wiederholt seine Symbole. Ein Wochenplan: + + ```text + 5 Busfahrten à 20 Minuten = 100 Minuten + Studien Kontur, Negativraum, Messen 50 min + Frei was du willst, ohne Regeln 50 min + ``` + + > [!INTERVIEW] + > Im Portfolio-Gespräch fragt ein Art Lead: „Wie arbeitest du mit Referenzen?“ Gute Antwort: Du sammelst eigene Fotos und Posen-Referenzen, machst Studien mit Messungen und entwirfst danach ohne Vorlage. Du pausst nicht ab und nutzt keine generierten Bilder. Zeig dazu eine Studie neben dem Entwurf, der daraus entstand, nicht das ganze Skizzenheft. Das ArtStation Magazine rät Spiele-Artists „Taste over technique“ und „Delete half your portfolio.“ ([Top 10 Portfolio Tips](https://magazine.artstation.com/2019/03/games-portfolio-top-10/)). Auswahl ist Teil der Antwort. + + ## Häufige Fehler + + - **Aus dem Gedächtnis zeichnen, obwohl der Gegenstand vor dir steht.** Du erkennst es an Symbolen: vier Beine von der Seite, Mandelaugen, ein Henkel als Ohr. + - **Mit Details anfangen.** Wer mit dem Henkel oder dem Auge beginnt, merkt spät, dass die Gesamtform nicht aufs Blatt passt. + - **Arm beim Messen gebeugt.** Die Einheit ändert sich, und kein Verhältnis stimmt mehr. + - **Nur den Gegenstand ansehen.** Die Lücken zeigen Fehler, die du am Gegenstand übersiehst. + - **Abpausen statt messen.** Die Linie stimmt, aber du hast nichts gelernt, was du ohne Vorlage wiederholen kannst. + - **Referenz als Asset-Vorlage.** Studien bleiben im Heft. Ins Spiel kommt dein eigener Entwurf. + - **Thumbnails ohne Timer.** Ohne Zeitlimit wird aus einer Skizze ein Bild, und du schaffst eine statt sechs. + - **Nur üben.** Ohne freies Zeichnen fehlt die Hälfte der 50-%-Regel. + + ## Zusammenfassung + + - Symbole zeigen, was du weißt. Beobachtung zeigt, was vor dir steht. + - Konturzeichnen heißt: langsam der Kante folgen, mehr auf den Gegenstand als aufs Papier schauen. + - Negativraum hat keinen Namen und kein Symbol. Deshalb siehst du ihn genauer als den Gegenstand. + - Vergleichsmessen: Arm gestreckt, ein Auge zu, eine Einheit, alle anderen Strecken als Vielfache. + - Verhältnisse vor Details. Auf Karopapier wird ein gemessenes Verhältnis direkt zu Kästchen, später zu Pixeln. + - Referenzen sind Lernmaterial. Nicht abpausen, nicht ins Spiel übernehmen, nicht durch generierte Bilder ersetzen. + - Unterwegs: 2-Minuten-Thumbnails, Papier zuerst, Handy für Timer und Referenzen, halb Studien, halb frei. +exercises: + - id: symbol-oder-beobachtung + type: choice + title: Was hast du gesehen? + prompt: | + Du zeichnest den Rucksack auf dem Sitz gegenüber. Welche Notizen beruhen auf Beobachtung statt auf einem Symbol? + options: + - text: Die Schnalle sitzt etwa ein Drittel der Höhe über dem Sitz. + correct: true + why: Das ist ein gemessenes Verhältnis. Es gilt für genau diesen Rucksack in genau dieser Lage. + - text: Der Tragegriff verschwindet links hinter der Kopfstütze. + correct: true + why: Du hast gesehen, wo eine Kante endet. Ein Symbol zeigt immer den ganzen Griff. + - text: Rucksäcke sind Rechtecke mit zwei Riemen. + correct: false + why: Das ist Wissen über Rucksäcke im Allgemeinen, also ein Symbol. Es sagt nichts über die Form vor dir. + - text: Ich zeichne beide Träger, weil jeder Rucksack zwei hat, auch wenn von hier nur einer zu sehen ist. + correct: false + why: Genau so entstehen die vier Stuhlbeine in der Seitenansicht. Was verdeckt ist, wird nicht gezeichnet. + explanation: | + Beobachtung erkennst du daran, dass sie nur für diesen Gegenstand aus diesem Blickwinkel gilt: ein Verhältnis, ein Winkel, eine verdeckte Kante. Symbole gelten für alle Rucksäcke und damit für keinen bestimmten. Ctrl+Paint beschreibt genau diesen Fehler: Anfänger zeichnen Symbole, selbst wenn der Gegenstand vor ihnen steht. + resources: + - title: Ctrl+Paint · Drawing Shape · Contour + url: https://www.ctrlpaint.com/videos/drawing-shape-contour + + - id: negativraum-schaubild + type: choice + title: Was die Lücken verraten + prompt: | + Sieh dir das Schaubild an. Welche Aussagen treffen zu? + + ![Drei Felder mit einem Stuhl in Seitenansicht. A zeigt die Kontur, B dieselbe Kontur mit zwei orange gefüllten Lücken zwischen den Beinen, C nur die zwei orangen Rechtecke](/media/pixelart/beobachten/negativraum@2x.png "Kontur (A), Lücken gefüllt (B), nur die Lücken (C). Eigenes Schaubild") + options: + - text: In C siehst du Formen, für die du kein Symbol hast. Deshalb musst du ihre Breite und Höhe ansehen. + correct: true + why: Für „Stuhl“ hat dein Kopf eine Kurzform, für ein Rechteck zwischen zwei Streben nicht. Du zeichnest es, wie es ist. + - text: Die Kanten der orangen Lücken sind zugleich Kanten von Sitz, Querstrebe und Beinen. + correct: true + why: Lücke und Gegenstand teilen sich ihre Grenzen. Stimmt die Lücke, liegen die Teile richtig. + - text: Die untere Lücke zählt nicht als Negativraum, weil sie zum Boden hin offen ist. + correct: false + why: Negativraum ist jeder Raum um und zwischen den Teilen, offen oder geschlossen. Hier begrenzt der Boden die Lücke. + - text: Negativraum hilft nur bei Möbeln mit geraden Kanten. + correct: false + why: Pflanzen, Hände mit gespreizten Fingern oder eine Figur mit Arm in der Hüfte haben genauso Lücken, oft sogar auffälligere. + explanation: | + Der Negativraum ist eine zweite Sicht auf denselben Gegenstand. Weil Lücken keinen Namen haben, drängt sich kein Symbol dazwischen, und du siehst ihre Form genauer. Zugleich teilen sie ihre Kanten mit dem Gegenstand. Wer die Lücken richtig zeichnet, bekommt den Gegenstand dazwischen umsonst. + resources: + - title: Ctrl+Paint · Drawing Shape · Negative Space + url: https://www.ctrlpaint.com/videos/drawing-shape-negative-space + + - id: studie-ablauf + type: order + title: Eine Studie in zehn Minuten + prompt: | + Du zeichnest eine Beobachtungsstudie eines Gegenstands. Bring die Schritte in die Reihenfolge, die die Lektion empfiehlt. + lang: prose + lines: | + Timer stellen und einen Gegenstand wählen, den du ganz sehen kannst. + Eine Einheit wählen und das Verhältnis von Gesamthöhe zu Gesamtbreite mit dem Stift messen. + Die Gesamtform als leichte Linie aufs Papier setzen. + Die größten Lücken als eigene Formen einzeichnen. + Die Konturen der Teile langsam und mit Blick auf den Gegenstand nachziehen. + Details erst ergänzen, wenn Verhältnisse und Lücken stimmen. + hints: + - Was muss feststehen, damit die Zeichnung aufs Blatt passt? + explanation: | + Die Messung kommt vor dem ersten Strich, denn sie legt fest, wie groß die Gesamtform auf dem Papier wird. Die Lücken setzt du vor die Konturen, weil sie die Lage der Teile bestimmen. Details kommen zuletzt: Ein schön gezeichneter Henkel an einer zu schmalen Tasse ist verlorene Zeit. + resources: + - title: Ctrl+Paint · Visual Measuring · Proportion + url: https://www.ctrlpaint.com/videos/visual-measuring-proportion + + - id: kopfhoehen-messen + type: output + title: Wie viele Köpfe? + prompt: | + Du misst eine stehende Person mit gestrecktem Arm. Wie viele Kopfhöhen ist sie groß? Antworte mit der Zahl. + lang: text + code: | + Kopf auf dem Stift: 2 cm + ganze Figur: 15 cm + Arm gestreckt, ein Auge geschlossen + expected: | + 7,5 + accept: + - "7.5" + - 7,5 Köpfe + - 7,5 Kopfhöhen + - 7.5 Köpfe + - 7.5 Kopfhöhen + explanation: | + Der Kopf ist die Einheit, also teilst du: 15 ÷ 2 = 7,5. Die Zentimeter auf dem Stift sind keine echten Maße, sie hängen von deinem Abstand ab. Das Verhältnis bleibt gleich, solange der Arm gestreckt bleibt. 7,5 Köpfe ist der Durchschnitt, mit dem Proko arbeitet; einzelne Menschen weichen davon ab. + resources: + - title: Proko · Human Proportions · Average Figure + url: https://www.proko.com/course-lesson/human-proportions-average-figure + + - id: tasse-uebertragen + type: output + title: Vom Stift aufs Karopapier + prompt: | + Du überträgst die Messung einer Tasse auf Karopapier. Wie viele Kästchen breit wird die Tasse ohne Henkel? Antworte mit der Zahl. + lang: text + code: | + Tassenhöhe auf dem Stift: 4 cm (Einheit) + Breite ohne Henkel: 3 cm + Auf Karopapier: Höhe 12 Kästchen + expected: | + 9 + accept: + - 9 Kästchen + - 9 Pixel + - 9 px + hints: + - Rechne erst das Verhältnis Breite zu Höhe aus. + explanation: | + Breite zu Höhe ist 3 : 4, also 0,75. Bei 12 Kästchen Höhe ergibt das 0,75 × 12 = 9 Kästchen. Die Zentimeter vom Stift überträgst du nie direkt, nur das Verhältnis. So wird aus einer Messung im Bus ein Plan, den du später Pixel für Pixel umsetzen kannst. + resources: + - title: Ctrl+Paint · Visual Measuring · Proportion + url: https://www.ctrlpaint.com/videos/visual-measuring-proportion + + - id: luecken-zaehlen + type: output + title: Umschlossene Lücken + prompt: | + Das Raster zeigt einen Stuhl mit durchbrochener Lehne von der Seite, `#` ist Stuhl, `.` ist leer. Wie viele Lücken sind auf allen Seiten vom Stuhl umschlossen? Antworte mit der Zahl. + lang: text + code: | + . # # # # # . . . . . . + . # . . . # . . . . . . + . # . . . # . . . . . . + . # # # # # . . . . . . + . # . . . . . . . . . . + . # # # # # # # # # # . + . # . . . . . . . . # . + . # # # # # # # # # # . + . # . . . . . . . . # . + . # . . . . . . . . # . + expected: | + 2 + accept: + - zwei + - 2 Lücken + hints: + - Prüf bei jeder leeren Fläche, ob du von ihr aus das Rasterende erreichst, ohne einen `#` zu überqueren. + explanation: | + Umschlossen sind das Loch in der Lehne (3 × 2 Pixel) und der Streifen zwischen Sitz und Querstrebe (8 × 1). Der Raum zwischen den Beinen ist nach unten offen und wird erst vom Boden begrenzt, der Raum rechts der Lehne nach oben und zur Seite. Auch diese offenen Flächen sind Negativraum, nur ohne geschlossene Form. Gerade die geschlossenen Lücken sind die Formen, die du beim Zeichnen zuerst und am genauesten misst. + + - id: begriffe-beobachten + type: gap + title: Die Wörter fürs Sehen + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Zeichnest du, was du über einen Gegenstand weißt, statt was du siehst, entsteht ein ⟦Symbol⟧. Den Raum um einen Gegenstand und zwischen seinen Teilen nennt man ⟦Negativraum⟧. Beim Messen mit dem Stift wählst du eine Strecke als ⟦Einheit⟧ und vergleichst andere Strecken damit. Ein Bild, das du beim Zeichnen ansiehst, um etwas zu verstehen, ist eine ⟦Referenz⟧. Eine kleine, schnelle Skizze heißt ⟦Thumbnail⟧. + gaps: + - label: Kurzform aus dem Gedächtnis + hint: Auch ein Verkehrsschild ist eins. + accept: ["Symbole", "Zeichen"] + - label: Raum zwischen den Teilen + hint: Auf Englisch „negative space“. + accept: ["negative space", "Zwischenraum", "Negativform"] + - label: Bezugsstrecke + hint: Damit rechnest du, wie mit einem Meter. + accept: ["Maßeinheit", "Maß"] + - label: Bild zum Lernen + hint: Wörtlich „Bezug“, ein Fremdwort. + accept: ["Referenzbild", "reference"] + - label: kleine Skizze + hint: Englisch, wörtlich „Daumennagel“. + accept: ["Thumbnails", "Daumenskizze"] + explanation: | + Mit diesen fünf Begriffen beschreibst du jede Beobachtungsstudie. Symbol und Negativraum sind Gegenspieler: Das eine kommt aus dem Gedächtnis, das andere hat keinen Namen und zwingt dich hinzusehen. Einheit und Referenz sind deine Werkzeuge, das Thumbnail ist das Format, in dem du unterwegs übst. + resources: + - title: Betty Edwards · Theory + url: https://www.drawright.com/theory + + - id: referenz-abgepaust + type: bug + title: Genau, aber nichts gelernt + prompt: | + Lehrbeispiel: Arbeitsnotiz für eine Studie nach einem Foto. Die Zeichnung ist sehr genau geworden. Als du die Tasse am nächsten Tag ohne Foto zeichnen willst, weißt du nichts über ihre Verhältnisse. Finde die Zeile, die das erklärt. + lang: prose + code: | + Foto der Tasse von der Seite aufnehmen, Licht von links. + Handy neben das Heft legen, Foto so groß, dass der Henkel gut zu sehen ist. + Papier auf das Display legen und die Kanten mit dem Bleistift nachfahren. + Henkel und Öffnung sauber nachziehen. + Zeichnung neben das Foto halten und Abweichungen notieren. + lines: [3] + hints: + - In welcher Zeile misst und entscheidest du nichts? + explanation: | + Zeile 3 ist Abpausen. Die Hand folgt den Kanten auf dem Display, ohne dass du ein Verhältnis gemessen oder einen Winkel geschätzt hast. Deshalb bleibt nichts hängen. Zeichne neben das Foto, miss mit dem Stift oder am Bildschirm mit dem Daumen, und schreib das Verhältnis auf. Das Ergebnis wird ungenauer, aber du kannst es wiederholen. + resources: + - title: Ctrl+Paint · Visual Measuring + url: https://www.ctrlpaint.com/videos/visual-measuring + + - id: messnotiz-stuhl + type: bug + title: Der Stuhl wird zum Turm + prompt: | + Messnotiz für einen Stuhl von der Seite, Einheit ist die Sitzhöhe vom Boden. Mit dem Stift hast du den ganzen Stuhl als knapp zweimal so hoch wie die Sitzhöhe gemessen. Auf dem Karopapier wird er aber 21 Kästchen hoch und wirkt wie ein Turm. Finde die Zeile. + lang: text + code: | + Einheit Sitzhöhe = 1 = 6 Kästchen + Sitztiefe 0,8 = 5 Kästchen + Lehne 0,9 über dem Sitz = 5 Kästchen + Gesamthöhe 3,5 = 21 Kästchen + Querstrebe 0,5 über dem Boden = 3 Kästchen + lines: [4] + hints: + - Die Gesamthöhe ist Sitzhöhe plus Lehne über dem Sitz. + explanation: | + Sitzhöhe 1 plus Lehne 0,9 ergibt 1,9 Einheiten, also rund 11 Kästchen. Zeile 4 notiert 3,5 und widerspricht damit der eigenen Messung „knapp zweimal so hoch“. Solche Fehler fängst du ab, wenn du die Teilmaße am Ende zur Gesamthöhe addierst und mit der Messung vergleichst. Die übrigen Zeilen sind gerundet, aber stimmig: 0,8 × 6 = 4,8, 0,9 × 6 = 5,4. + resources: + - title: Ctrl+Paint · Visual Measuring · Proportion + url: https://www.ctrlpaint.com/videos/visual-measuring-proportion + + - id: stuhl-aus-dem-kopf + type: explain + title: Zwei Stühle, ein Modell + prompt: | + Lehrbeispiel: zwei Zeichnungen desselben Küchenstuhls von der Seite. Erkläre in zwei bis vier Sätzen, woher die Unterschiede kommen und mit welchen Techniken aus der Lektion Zeichnung 2 entstanden sein kann. + lang: prose + code: | + Zeichnung 1, aus dem Gedächtnis: Sitz als breites Rechteck, vier gleich lange Beine nebeneinander, Lehne als senkrechtes Rechteck. + Zeichnung 2, nach Beobachtung: Sitz als schmaler Streifen, zwei Beine sichtbar, die hinteren verdeckt, Lehne leicht nach hinten geneigt, Querstrebe tiefer als in Zeichnung 1. + points: + - Zeichnung 1 zeigt Wissen über Stühle, also ein Symbol mit vier Beinen und flachem Sitz. + - Von der Seite verdecken die vorderen Beine die hinteren, und die Sitzfläche ist zu einem Streifen verkürzt. + - Die Neigung der Lehne und die Höhe der Querstrebe lassen sich mit dem Stift messen, als Winkel und als Verhältnis. + - Die Lücken zwischen Sitz, Strebe und Beinen zeigen die Lage der Strebe, ohne dass das Wort „Stuhl“ dazwischenfunkt. + explanation: | + Zeichnung 1 ist das Symbol „Stuhl“: Sie zeigt alles, was ein Stuhl hat, aus keinem bestimmten Blickwinkel. Zeichnung 2 zeigt, was von der Seite zu sehen ist, mit verdeckten Beinen und verkürztem Sitz. Die Neigung der Lehne entsteht durch Winkelmessen mit dem waagerecht oder senkrecht gehaltenen Stift, die Lage der Querstrebe durch ein Verhältnis zur Sitzhöhe oder durch die Form der Lücken darunter. Keine der Techniken braucht Talent, nur Zeit zum Hinsehen. + resources: + - title: Ctrl+Paint · Drawing Shape · Contour + url: https://www.ctrlpaint.com/videos/drawing-shape-contour + + - id: negativraum-studie + type: practice + title: Ein Gegenstand aus Lücken + prompt: | + Wähle einen Stuhl, einen Hocker, ein Fahrrad oder eine Pflanze mit großen Blättern. Zeichne in höchstens zehn Minuten auf Papier zuerst nur die Lücken als geschlossene Formen, erst danach die Teile des Gegenstands. Notiere darunter in Stichpunkten, was du gemessen hast. + lang: prose + starter: | + Gegenstand: + Zeit (Timer): + Gemessene Lücke und Verhältnis: + Abweichung beim Vergleich: + checklist: + - Du hast mindestens drei Lücken als eigene Formen gezeichnet, bevor du eine Kante des Gegenstands gezogen hast. + - Der Timer zeigte am Ende höchstens zehn Minuten. + - Mindestens eine Lücke hast du mit dem Stift vermessen und ihr Verhältnis von Breite zu Höhe notiert. + - Du hast die Zeichnung neben den Gegenstand gehalten und eine Stelle notiert, an der sie abweicht. + hints: + - Fang mit der größten Lücke an, meist die zwischen Beinen oder Stamm und Blatt. + explanation: | + Die Reihenfolge zwingt dich, Formen ohne Namen zu sehen. Das Verhältnis einer Lücke ist eine Messung, die du nachprüfen kannst. Die notierte Abweichung zeigt dir, worauf du beim nächsten Mal achtest. Ob die Zeichnung schön ist, spielt keine Rolle; sie ist eine Studie. + resources: + - title: Ctrl+Paint · Drawing Shape · Negative Space + url: https://www.ctrlpaint.com/videos/drawing-shape-negative-space + + - id: bus-thumbnails + type: practice + title: Sechs Thumbnails zwischen zwei Haltestellen + prompt: | + Zeichne auf einer Fahrt sechs Thumbnails von je zwei Minuten, jedes etwa so groß wie eine Streichholzschachtel. Motive sind Gegenstände in deiner Nähe: Tasche, Schuh, Haltestange, Fenstergriff, die eigene Hand. Stell für jedes den Timer am Handy. Schreib unter jedes Thumbnail ein gemessenes Verhältnis. + lang: prose + checklist: + - Auf der Seite stehen sechs Thumbnails, jedes höchstens 5 × 5 cm groß. + - Für jedes lief ein Timer von zwei Minuten, und du hast beim Signal aufgehört. + - Unter jedem Thumbnail steht ein Verhältnis, das du mit dem Stift gemessen hast. + - Bei mindestens zwei Thumbnails ist eine Lücke als eigene Form eingezeichnet. + - Du hast die Seite fotografiert und das Foto mit Datum abgelegt. + hints: + - Wenn zwei Minuten zu kurz sind, zeichne kleiner, nicht länger. + explanation: | + Der Timer verhindert, dass aus einer Skizze ein Bild wird, an dem du hängen bleibst. Das gemessene Verhältnis unter jedem Thumbnail macht aus einer schnellen Zeichnung eine Beobachtung, die du später nachschlagen kannst. Die fotografierten Seiten zeigen dir nach ein paar Wochen, was sich verändert hat. Diese Fahrt zählt zur Studienhälfte der 50-%-Regel. + resources: + - title: Drawabox · Lesson 0 · The 50 % Rule + url: https://drawabox.com/lesson/0/2/50percent + + - id: referenz-studie + type: practice + title: Drei Referenzen, eine Zeichnung ohne Vorlage + prompt: | + Wähle einen Gegenstand, den du für Spiele oft brauchst, zum Beispiel eine Kiste, ein Fass oder einen Eimer. Fotografiere ihn selbst aus drei Winkeln oder nimm Fotos, die du findest. Schreib zu jeder Referenz drei Beobachtungen. Leg die Fotos dann weg und zeichne den Gegenstand aus dem Kopf. + lang: prose + starter: | + Gegenstand: + Referenz 1 – Verhältnis, Winkel, Lücke: + Referenz 2 – Verhältnis, Winkel, Lücke: + Referenz 3 – Verhältnis, Winkel, Lücke: + In der Zeichnung umgesetzt: + checklist: + - Du hast drei Referenzen aus verschiedenen Winkeln, mindestens eine davon ist ein eigenes Foto. + - Zu jeder Referenz stehen drei Beobachtungen, darunter mindestens ein Verhältnis oder ein Winkel. + - Die Zeichnung entstand ohne Blick auf die Fotos. + - Du hast notiert, welche zwei Beobachtungen du in der Zeichnung umgesetzt hast. + - Keine Referenz wurde abgepaust oder durch ein generiertes Bild ersetzt. + hints: + - Achte auf das, was dich überrascht hat, etwa wie tief ein Fassreifen sitzt. + explanation: | + Die Aufgabe trennt Referenz und Entwurf, wie du es für dein Spiel brauchst. Die Beobachtungen sind dein Wissen über den Gegenstand, die Zeichnung aus dem Kopf zeigt, was davon hängen geblieben ist. Ein eigenes Foto hat den Vorteil, dass du Licht und Winkel selbst gewählt hast und es frei nutzen kannst. + resources: + - title: Krita Docs · Reference Images Tool + url: https://docs.krita.org/en/reference_manual/tools/reference_images_tool.html diff --git a/content/pixelart/modules/editor-einrichten.yaml b/content/pixelart/modules/editor-einrichten.yaml new file mode 100644 index 00000000..ba6bd5cd --- /dev/null +++ b/content/pixelart/modules/editor-einrichten.yaml @@ -0,0 +1,454 @@ +id: editor-einrichten +title: Einen Pixel-Editor wählen und einrichten +level: 1 +minutes: 100 +summary: Welcher Pixel-Editor ohne Kauf reicht, wie du ihn unter CachyOS installierst und für Maus und Tastatur einrichtest, und warum du im Editorformat speicherst, aber nur ganzzahlig vergrößert exportierst. +place: pc +goals: + - Du wählst einen Pixel-Editor ohne Kauf und installierst ihn unter CachyOS mit pacman, Flatpak oder aus dem AUR. + - Du legst eine Leinwand von 16 × 16 oder 32 × 32 Pixeln an und schaltest Pixelraster, Pixel-perfect und eine geladene Palette ein. + - Du zeichnest mit Maus und Tastatur, mit Shift-Linien, zweiter Farbe auf der rechten Maustaste, Pipette und Spiegeln statt Freihand. + - Du speicherst im Editorformat, exportierst getrennt davon als PNG und vergrößerst dabei nur um ganze Faktoren. + - Du trennst Bedienschritte von Gestaltungsgründen und weißt, welche Schritte erst in Godot folgen. +resources: + - title: Pixelorama · User Manual · Tools + url: https://pixelorama.org/user_manual/tools/ + - title: Aseprite Docs · Drawing + url: https://www.aseprite.org/docs/drawing/ + - title: LibreSprite + url: https://libresprite.github.io/ + - title: Saint11 · An Absolute Beginner's Guide · Tools + url: https://saint11.art/pixel_art_articles/article1/#tools + - title: Slynyrd · Pixelblog 5 · Back to Basics + url: https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics +lesson: | + Du legst in einem Bildprogramm ein Bild von 32 × 32 Pixeln an und setzt mit der Maus eine Kiste. Bei 100 % ist sie so groß wie ein Daumennagel. Zum Zeigen vergrößerst du sie auf 250 % und schickst sie in einen Chat. Dort sind manche Pixel breiter als andere, und der Bildbetrachter auf dem Handy macht die Kanten weich. An deiner Zeichnung liegt das nicht. Es liegt an drei Einstellungen: am Programm, an der Vergrößerung und an der Art, wie vergrößert wird. + + Dieses Modul richtet dein Werkzeug ein. Jeder Abschnitt trennt zwei Dinge: **Bedienung** – wo du klickst – und **Gestaltung** – warum du es so einstellst. Die Bedienung ändert sich mit jeder Version, die Gründe bleiben. Die Schritte stehen für Pixelorama und Aseprite, LibreSprite bedienst du ähnlich wie Aseprite. + + ## Welcher Editor: frei, bezahlt oder selbst gebaut + + Derek Yu nennt als Grundausstattung für Pixelart nur zwei Werkzeuge: Zoom und einen Stift, der einzelne Pixel setzt. Linien- und Formwerkzeuge, Auswahl und Füllen helfen, mehr braucht es zum Start nicht ([Pixel Art Tutorial: Software](https://www.derekyu.com/makegames/pixelart.html#software)). Pedro Medeiros (Saint11) schreibt, dass du „even with just a good mouse and free software“ gute Pixelart machen kannst ([Tools](https://saint11.art/pixel_art_articles/article1/#tools)). Ein Tablett oder eine Lizenz ist also keine Voraussetzung. + + | Programm | Lizenz und Preis | Unter CachyOS | + | --- | --- | --- | + | Pixelorama 1.2.3 | MIT, frei; auf Steam 9,99 USD als Unterstützung | Flathub, AUR `pixelorama` | + | LibreSprite 1.3 | GPL-2.0, frei | Arch-Repo `extra` | + | Aseprite 1.3.18.6 | ab 19,99 USD oder selbst kompiliert | AUR `aseprite` baut aus dem Quellcode | + | Krita 5.3.4.1 | GPL, frei | Flathub; `extra` hat die Qt6-Linie 6.0.4.1 | + + **Pixelorama** ist mit Godot gebaut und hat eine ausführliche Dokumentation. Die Web-Version läuft laut Doku über itch.io, die Android-Version ist „mostly meant to be used in tablets“ ([Installation](https://pixelorama.org/user_manual/installation/#android)). **LibreSprite** ist ein „Fork of the last GPLv2 commit of Aseprite“: Als Aseprite 2016 die Lizenz wechselte, lief die alte, freie Fassung als eigenes Projekt weiter ([LibreSprite](https://libresprite.github.io/)). Es hat Pixel-perfect und den Indexed-Modus, aber keine eigene Doku. Menüs und Abläufe ähneln dem alten Aseprite. + + **Aseprite** nennt Derek Yu den derzeit wohl beliebtesten Pixel-Editor, und Saint11 nutzt es in seinen Tutorials. Der Quellcode ist offen, die Lizenz aber nicht frei. Die EULA erlaubt in §2(g): „You may only compile and modify the source code of the SOFTWARE PRODUCT for your own personal purpose …“ ([EULA](https://github.com/aseprite/aseprite/blob/main/EULA.txt)). Selbst kompilieren für den eigenen Gebrauch ist also erlaubt. Weitergeben darfst du das Ergebnis nicht, §2(b) verbietet, Kopien an Dritte zu verteilen. Die Testversion speichert laut Saint11 keine Dateien ([Aseprite](https://saint11.art/pixel_art_articles/article1/#aseprite)). + + **Krita** ist ein Malprogramm. Für freie Skizzen, Tonwertstudien und Referenzbilder ist es gut, für Pixel nimmst du einen der drei Pixel-Editoren. + + > [!TIP] Eine Empfehlung für den Start + > Nimm Pixelorama oder LibreSprite. Wenn du später merkst, dass dir eine Aseprite-Funktion fehlt, baust du es aus dem AUR. Alles in diesem Kurs geht mit jedem der drei Programme. + + ## Installation unter CachyOS + + Bedienung: LibreSprite kommt aus dem offiziellen Repository, Pixelorama aus Flathub ([Installation: Flathub](https://pixelorama.org/user_manual/installation/#flathub)), Aseprite über einen AUR-Helfer wie `paru`. + + ```console + $ sudo pacman -S libresprite + $ flatpak install flathub com.orama_interactive.Pixelorama + $ paru -S aseprite + ``` + + Der AUR-Build von Aseprite kompiliert eine Weile. Pixelorama gibt es auch als AUR-Paket `pixelorama`. Nimm eines, nicht beides, sonst hast du zwei Starter im Menü. Das Paket [`libresprite`](https://archlinux.org/packages/extra/x86_64/libresprite/) aktualisiert sich mit jedem `pacman -Syu`, das Flatpak mit `flatpak update`. + + Für Werkzeuge gilt eine Regel dieses Kurses: Ein KI-Assistent darf dir bei technischer Arbeit helfen, etwa bei einem Build-Fehler oder einem Exportskript. Jede Zeichnung, jedes Tile (jede Kachel) und jede Palette entsteht von deiner Hand. Generierte Bilder ersetzen keine eigene Arbeit, auch nicht als Vorlage zum Nachpixeln. + + ## Leinwand, Zoom und Pixelraster + + Bedienung: In Aseprite legst du mit `File › New` (Ctrl+N) eine Leinwand an und wählst Breite, Höhe und Farbmodus ([New Sprite](https://www.aseprite.org/docs/new-sprite/)). In Pixelorama geht das ebenfalls über `File › New`. + + Gestaltung: Ein **Sprite** ist eine einzelne Grafik für ein Spiel, etwa eine Figur oder eine Kiste. Fang mit **16 × 16** an. Saint11 begründet das so: Größere Leinwände lenken davon ab, „understanding the interactions of pixels with their neighbors“ ([Making a New File](https://saint11.art/pixel_art_articles/article1/#making-a-new-file)). Als Nächstes kommt 32 × 32. Den Farbmodus lässt du zu Beginn auf RGB(A), den Indexed-Modus lernst du weiter unten kennen. + + Bedienung beim Zoom: In Pixelorama zoomst du mit dem Mausrad oder mit `+` und `-`. Das Zoom-Werkzeug hat einen Knopf für 100 %, der die Leinwand in ihrer echten Pixelgröße zeigt. Verschieben geht mit gedrückter mittlerer Maustaste oder Leertaste ([Zoom](https://pixelorama.org/user_manual/user_interface/canvas/#zoom)). In Aseprite zoomt das Mausrad in der Voreinstellung ([Preferences: Editor](https://www.aseprite.org/docs/preferences/#editor)), die Leertaste schaltet vorübergehend auf die Hand ([Keyboard Shortcuts](https://www.aseprite.org/docs/keyboard-shortcuts/#tools)). + + Das **Pixelraster** zeichnet ab einer bestimmten Zoomstufe eine feine Linie um jeden Pixel. In Pixelorama schaltest du es mit Ctrl+H oder `View › Show Pixel Grid` ein ([Pixel Grid](https://pixelorama.org/user_manual/user_interface/canvas/#pixel-grid)), in Aseprite über `View › Show › Pixel Grid` oder in den Einstellungen unter „Visible Pixel Grid“ ([Preferences: Grid](https://www.aseprite.org/docs/preferences/#grid)). + + Gestaltung: Gezeichnet wird vergrößert, beurteilt in Originalgröße. Ein Bogen, der bei 800 % sauber wirkt, kann bei 100 % zittern ([Linien, Kurven und Cluster](/pixelart/linien-cluster)). Halte deshalb eine zweite Ansicht in 1× offen. Pixelorama hat dafür die **Second Canvas** (`Window › Panels`), Aseprite ein Vorschaufenster. Raymond Schlitter (Slynyrd) empfiehlt ein Vorschaufenster in kleinem Zoom, damit du nicht ständig hin- und herzoomen musst ([Pixelblog 20](https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles)). + + > [!WARNING] 100 % in Aseprite sind nicht immer 1× + > Aseprite stellt die Bildschirmskalierung („Screen Scaling“) standardmäßig auf 200 %: „each pixel in the window will be represented with a 2x2 square on the screen“ ([Preferences: General](https://www.aseprite.org/docs/preferences/#general)). Bei Zoom 100 % siehst du dein Sprite dann doppelt so groß. Für die echte Originalgröße öffnest du das exportierte PNG in einem Bildbetrachter bei 100 % oder nimmst den 100-%-Knopf in Pixelorama. + + ## Mit der Maus zeichnen, ohne freihändig zu zeichnen + + Mit der Maus triffst du keine ruhige Linie. Das musst du auch nicht: Du setzt Punkte, und das Programm verbindet sie. + + | Aufgabe | Aseprite | Pixelorama | + | --- | --- | --- | + | Stift | B | P | + | Radierer | E | E | + | Pipette | Alt gedrückt halten oder I | O | + | Gerade Linie | Shift-Klick vom letzten Pixel | Shift halten, dann ziehen | + | Zweite Farbe | rechte Maustaste | eigenes Werkzeug und eigene Farbe je Maustaste | + + Bedienung: In Aseprite malt die linke Maustaste mit der Vordergrund-, die rechte mit der Hintergrundfarbe ([Drawing](https://www.aseprite.org/docs/drawing/)); X tauscht beide ([Color Bar](https://www.aseprite.org/docs/color-bar/)). Shift zieht „a straight line from the last painted pixel“, Ctrl dazu rastet den Winkel ein ([Action Modifiers](https://www.aseprite.org/docs/keyboard-shortcuts/#action-modifiers)). Pixelorama geht weiter: Jede Maustaste bekommt ein eigenes Werkzeug mit eigener Farbe, die Werkzeugleiste markiert links blau und rechts orange ([Tools](https://pixelorama.org/user_manual/tools/)). Links Stift, rechts Radierer ist eine bequeme Belegung. + + Halte die Stiftgröße bei einem Pixel. Saint11 sagt, der Stift „should always be kept with 1 pixel of width“ ([Let's Draw](https://saint11.art/pixel_art_articles/article1/#lets-draw)). + + **Pixel-perfect** entfernt beim Zeichnen den mittleren Pixel von L-Ecken. In Aseprite schaltest du es in der Kontextleiste des Stifts ein ([Pixel-perfect mode](https://www.aseprite.org/docs/context-bar/#pixel-perfect-mode)), in Pixelorama in den Werkzeugoptionen ([Pixel perfect](https://pixelorama.org/user_manual/drawing/#pixel-perfect)). Warum Doppelpixel stören und warum du den Modus beim Ausmalen von Flächen ausschaltest, steht in [Linien, Kurven und Cluster](/pixelart/linien-cluster). + + **Spiegeln** gibt es zweimal. Die Symmetrie malt jeden Strich gespiegelt mit: in Aseprite über `View › Symmetry Options` ([Symmetry](https://www.aseprite.org/docs/symmetry/)), in Pixelorama in den Werkzeugoptionen ([Mirroring](https://pixelorama.org/user_manual/drawing/#mirroring)). Die gespiegelte Ansicht ändert dagegen kein Pixel, sie zeigt das Bild nur seitenverkehrt: in Pixelorama mit Shift+M ([Mirror](https://pixelorama.org/user_manual/user_interface/canvas/#mirror)), in Krita mit der Taste M ([View Menu](https://docs.krita.org/en/reference_manual/main_menu/view_menu.html)). Derek Yu nennt das horizontale Spiegeln einen „powerful trick“, der Fehler in Proportionen und Schattierung zeigt ([Selective Outlining](https://www.derekyu.com/makegames/pixelart.html#selout)). + + > [!NOTE] Hand und Handgelenk + > Derek Yu empfiehlt für längeres Arbeiten ein Tablett, weil die Maus das Handgelenk belastet ([Other Supplies](https://www.derekyu.com/makegames/pixelart.html#supplies)). Ohne Tablett hilft, was die Maus entlastet: Tastenkürzel statt Wege zur Werkzeugleiste, Shift-Linien statt langer Züge, und kurze Sitzungen mit Pausen. + + ## Ebenen, Palette und Indexed-Modus + + Bedienung: Eine neue Ebene legst du in Aseprite mit Shift+N an, Shift+X blendet sie aus ([Layers](https://www.aseprite.org/docs/layers/)). In Pixelorama stehen die Ebenen in der Zeitleiste. Gestaltung: Trenne, was du getrennt ändern willst – Skizze, Kontur, Farbflächen. Eine Skizzenebene blendest du am Ende aus, statt sie wegzuradieren. + + Jede neue Aseprite-Datei startet mit der Palette DawnBringer 32 ([Default Palette](https://www.aseprite.org/docs/default-palette/)). Andere Paletten findest du auf [Lospec](https://lospec.com/palette-list), dort lädst du sie als PNG, GPL, PAL oder HEX herunter. Pixelorama importiert eine Palettendatei per Drag-and-drop oder über `File › Open`, unter anderem GPL, PAL und PNG ([Palettes import](https://pixelorama.org/user_manual/palettes/#palettes-import)). In Aseprite lädst du sie über das Menü ☰ der Farbleiste („Load Palette“). + + Der **Farbmodus** entscheidet, wie fest die Palette ist. Im RGB-Modus hat jeder Pixel eine eigene Farbe, die Palette ist nur eine Auswahlhilfe. Im **Indexed-Modus** speichert jeder Pixel eine Nummer, die auf eine Palettenfarbe zeigt. Aseprite erlaubt bis zu 256 Farben, und änderst du eine Palettenfarbe, ändern sich alle Pixel mit dieser Nummer ([Color Mode: Indexed](https://www.aseprite.org/docs/color-mode/#indexed)). Pixelorama ersetzt eine frei gewählte Farbe im Indexed-Modus durch die nächstliegende Palettenfarbe ([Indexed](https://pixelorama.org/concepts/color_mode/#indexed)). Umschalten: in Aseprite `Sprite › Color Mode › Indexed`, in Pixelorama im Menü `Project` unter „Color mode“. + + Gestaltung: Indexed zwingt dich, in der Palette zu bleiben, und erlaubt, ein fertiges Bild mit einer Palettenänderung umzufärben. Saint11 lässt Anfänger trotzdem im RGB-Modus starten, weil Indexed auch Nachteile hat ([Making a New File](https://saint11.art/pixel_art_articles/article1/#making-a-new-file)). Wie du Farben für eine Palette auswählst, ist Thema von [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten). + + Eine **Referenzebene** zeigt ein Bild in höherer Auflösung als die Leinwand. Man kann auf ihr nicht malen ([Reference Layer](https://www.aseprite.org/docs/reference-layer/)). Du legst sie mit `Layer › New › New Reference Layer from File` an. In Pixelorama und LibreSprite legst du das Bild in eine eigene Ebene unter deine Zeichnung. Nutze sie für deine eigene Papierskizze, die du abfotografiert hast, oder für eine Studie, die du vergleichst. Ein fremdes Bild in Pixel nachzufahren, übt kein Sehen und ergibt kein eigenes Asset. + + ## Speichern und Exportieren: zwei verschiedene Dateien + + Bedienung: Speichern (Ctrl+S) schreibt das Editorformat: `.aseprite` in Aseprite, `.pxo` in Pixelorama. Es behält Ebenen, Palette und Einstellungen. Exportieren schreibt eine flache Bilddatei, meist PNG: in Aseprite über `File › Export › Export As` (Ctrl+Alt+Shift+S), in Pixelorama über `File › Export` (Ctrl+E) ([Save and Export](https://pixelorama.org/user_manual/save_and_export/#exporting)). Pixelorama empfiehlt ausdrücklich, beides zu tun. Saint11 behält von jeder Datei eine Version im Editorformat, so wie man in Photoshop eine PSD behält ([Saving Your File](https://saint11.art/pixel_art_articles/article1/#saving-your-file)). + + Zum Teilen vergrößerst du beim Export. Aseprite hat dafür im Exportdialog das Feld „Resize“ ([Automatic Resize on Export](https://www.aseprite.org/docs/exporting/#automatic-resize-on-export)), Pixelorama eine Größenänderung mit wählbarer Interpolation, Standard ist „Nearest“. + + ![Ein Prüfmuster von 16 × 16 Pixeln, zweimal stark vergrößert. A ist mit nächstem Nachbarn vergrößert: Schachbrett, blaue Treppenlinie, orange Scheibe und umrandetes Quadrat haben scharfe Kanten. B ist bilinear vergrößert: dieselben Formen sind verwaschen, das Schachbrett verschwimmt zu einem weichen Muster](/media/pixelart/editor-einrichten/skalieren@2x.png "Dasselbe Prüfmuster mit nächstem Nachbarn (A) und bilinear (B) vergrößert. Eigenes Schaubild") + + A und B zeigen dasselbe Bild. Bei A ist jeder Pixel zu einem gleich großen Quadrat geworden, das ist **nächster Nachbar** (Nearest Neighbor): Jeder neue Pixel übernimmt die Farbe des nächstgelegenen alten. Bei B hat das Programm zwischen benachbarten Pixeln gemischt. Dabei entstehen Farben, die in deiner Palette nicht vorkommen, und jede Kante wird weich. Bildbetrachter und Webseiten vergrößern oft so, wenn sie ein kleines Bild hochrechnen. Pixelorama nennt genau das als Grund für den Export in größerer Auflösung ([Save and Export](https://pixelorama.org/user_manual/save_and_export/#exporting)). + + Der zweite Punkt ist der **Faktor**. Slynyrd: „increase the image size only by whole number multiples in order to preserve the uniformity of the pixel units“ ([Pixelblog 5](https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics)). Bei 200 % wird jeder Pixel 2 × 2 Bildpixel groß, bei 400 % 4 × 4. Bei 250 % müsste jeder Pixel 2,5 Bildpixel breit werden. Halbe Pixel gibt es nicht, also wechseln sich Breiten von 2 und 3 ab: + + ```text + # # . . # # . . + # # . . . # # . . . + ``` + + Beide Zeilen zeigen vier Sprite-Pixel, abwechselnd dunkel und hell. Oben bei 200 %: Jeder Lauf ist zwei Bildpixel breit. Unten bei 250 %: Die Läufe sind 2, 3, 2 und 3 breit. Eine gleichmäßige Treppe wird so zu einer holprigen. Saint11 warnt mit demselben Argument vor 107 % ([Saving Your File](https://saint11.art/pixel_art_articles/article1/#saving-your-file)). + + > [!MERKE] + > Speichern im Editorformat, exportieren als PNG. Vergrößern nur um ganze Faktoren und nur mit nächstem Nachbarn. + + Für dein Spiel exportierst du in **Originalgröße**. Die Vergrößerung auf den Bildschirm übernimmt die Engine. Wie Godot Pixelart scharf und ganzzahlig skaliert und wie du PNGs und Spritesheets importierst, steht in [Pixelraster und Skalierung](/godot/pixelraster) und [Eigene Sprites importieren](/godot/sprites-importieren). Godot empfiehlt für Pixelart den Kompressionsmodus Lossless ([Importing images](https://docs.godotengine.org/en/stable/tutorials/assets_pipeline/importing_images.html#compress-mode)). + + > [!PRAXIS] + > Saint11 arbeitet so: Jede Datei bleibt im Editorformat erhalten, für Web und Spiel wird exportiert, und am Resize-Feld des Exportdialogs schätzt er, dass es in runden Faktoren skaliert ([Saving Your File](https://saint11.art/pixel_art_articles/article1/#saving-your-file)). Slynyrd empfiehlt beim Arbeiten an Tiles ein verkleinertes Vorschaufenster ([Pixelblog 20](https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles)). Übernimm beides von Anfang an. Ein Ordner mit `.aseprite`- oder `.pxo`-Dateien und daneben ein Ordner `export/` mit PNGs in 1× ist eine Ordnung, die du später in Godot wiederfindest. + + > [!INTERVIEW] + > Manche Studios vergeben vor einer Zusammenarbeit einen bezahlten Testauftrag. Snow Day Games nannte das eine „Paid test commission to ensure shared artistic vision“ ([Stellenanzeige](https://workwithindies.com/careers/snow-day-games-2d-technical-pixel-artist)). Rechne damit, dass jemand fragt: „Was schickst du ab?“ Gute Antwort: das PNG in Originalgröße für die Engine, eine ganzzahlig vergrößerte Vorschau zum Ansehen, die Quelldatei mit sauber benannten Ebenen und die Palette, die du benutzt hast. Dazu ein Satz, warum die Vorschau 400 % und nicht 250 % hat. + + ## Häufige Fehler + + - **Freihand mit der Maus.** Lange Linien entstehen mit Shift-Klick oder dem Linienwerkzeug. Die Hand setzt Punkte, das Programm verbindet. + - **Pinsel größer als ein Pixel.** Dann setzt jeder Klick einen Klecks. Der Stift bleibt bei 1 px. + - **Nur im Zoom beurteilt.** Prüf jeden Zwischenstand in echter Originalgröße, in Aseprite mit Blick auf die Bildschirmskalierung. + - **Nur exportiert, nicht gespeichert.** Ein PNG hat keine Ebenen und keine Palette mehr. Ohne Editordatei fängst du bei jeder Änderung neu an. + - **Krumme Faktoren.** 150 % oder 250 % machen Pixel ungleich breit. Nimm 200 %, 300 %, 400 %. + - **Weichgezeichnet vergrößert.** Bilinear oder „glatt“ mischt Farben. Beim Export immer „Nearest“. + - **Vergrößert ins Spiel exportiert.** Für Godot exportierst du in 1×, die Skalierung übernimmt die Engine. + - **Zwei Pakete desselben Programms.** Flatpak und AUR-Paket nebeneinander führen zu zwei Startern und getrennten Einstellungen. + + ## Zusammenfassung + + - Pixelorama und LibreSprite sind frei, Aseprite kostet oder wird nach EULA §2(g) für den Eigengebrauch selbst kompiliert. Krita nimmst du für Skizzen. + - Unter CachyOS: `pacman -S libresprite`, Pixelorama aus Flathub oder dem AUR, Aseprite aus dem AUR. + - Start mit 16 × 16, Pixelraster an, eine zweite Ansicht in Originalgröße offen. In Aseprite zeigt 100 % bei Standardeinstellung 2 × 2 Bildschirmpixel je Pixel. + - Die Hand setzt Punkte: Shift-Linien, Stift 1 px, Pixel-perfect für Konturen, rechte Maustaste für die zweite Farbe. + - Ebenen trennen Skizze, Kontur und Fläche. Indexed bindet jeden Pixel an eine Palettenfarbe, bis zu 256. + - Speichern im Editorformat, exportieren als PNG. Vergrößern nur ganzzahlig mit nächstem Nachbarn. + - Fürs Spiel exportierst du in 1×. Import und Skalierung erledigt Godot. +exercises: + - id: editor-wahl + type: choice + title: Welcher Editor, welche Bedingungen? + prompt: | + Welche Aussagen über die Programme stimmen? + options: + - text: Aseprite darfst du laut EULA für deinen eigenen Gebrauch aus dem Quellcode kompilieren. + correct: true + why: §2(g) erlaubt Kompilieren und Ändern „for your own personal purpose“. Weitergeben darfst du das Ergebnis nach §2(b) nicht. + - text: LibreSprite ist ein Fork der letzten Aseprite-Fassung unter GPLv2 und liegt im Arch-Repository. + correct: true + why: Nach dem Lizenzwechsel von Aseprite 2016 lief die freie Fassung als LibreSprite weiter. Du installierst es mit `pacman -S libresprite`. + - text: Die Testversion von Aseprite reicht für den Kurs, weil sie alle Dateien speichert. + correct: false + why: Laut Saint11 speichert die Testversion nicht. Zum Üben ohne Speichern reicht sie, für einen Kurs mit Dateien nicht. + - text: Krita ist das beste Werkzeug für Sprites, weil es die meisten Pinsel hat. + correct: false + why: Krita ist ein Malprogramm. Für Skizzen ist es gut, für einzelne Pixel nimmst du einen Pixel-Editor mit Pixel-perfect, Palette und Tiled Mode. + explanation: | + Ohne Kauf hast du zwei vollwertige Wege, Pixelorama und LibreSprite, und mit dem AUR einen dritten, Aseprite aus dem Quellcode. Die Lizenzfrage entscheidet nur, ob du zahlst oder kompilierst und ob du das Programm weitergeben darfst. Für das Zeichnen selbst zählt, dass das Programm Pixel setzt, Paletten verwaltet und ganzzahlig exportiert. + resources: + - title: Aseprite · EULA + url: https://github.com/aseprite/aseprite/blob/main/EULA.txt + - title: Arch Linux · Paket libresprite + url: https://archlinux.org/packages/extra/x86_64/libresprite/ + + - id: skalieren-diagnose + type: choice + title: Scharf oder verwaschen? + prompt: | + Beide Felder zeigen dasselbe Prüfmuster von 16 × 16 Pixeln, gleich stark vergrößert. Welche Aussagen treffen zu? + + ![Ein Prüfmuster zweimal vergrößert. A hat scharfe Kanten. B ist verwaschen, das Schachbrett oben links ist kaum zu erkennen](/media/pixelart/editor-einrichten/skalieren@2x.png "Zwei Vergrößerungen desselben Bildes. Eigenes Schaubild") + options: + - text: A ist mit nächstem Nachbarn vergrößert, jeder Pixel ist ein gleich großes Quadrat geworden. + correct: true + why: Nächster Nachbar kopiert jeden Pixel in einen Block. Es entstehen keine neuen Farben. + - text: In B sind beim Vergrößern Mischfarben entstanden, die in der Palette nicht vorkommen. + correct: true + why: Bilineares Vergrößern mischt benachbarte Pixel. Deshalb sind die Kanten weich, und das Schachbrett verschwimmt zu einem weichen Muster. + - text: B ist die bessere Wahl für ein Spiel, weil es glatter aussieht. + correct: false + why: Glätte ist in Pixelart kein Ziel. B verliert gerade die Kanten, die du Pixel für Pixel gesetzt hast. + - text: Der Unterschied kommt von der Zeichnung, nicht von der Vergrößerung. + correct: false + why: Beide Felder stammen aus derselben Datei. Nur das Verfahren beim Vergrößern ist verschieden. + explanation: | + Ein Bild kann auf zwei Arten wachsen: Jeder Pixel wird zum Block (nächster Nachbar), oder das Programm rechnet Zwischenwerte (bilinear). Für Pixelart willst du nur das erste. Deshalb stellst du beim Export „Nearest“ ein, und in Godot sorgt der Texturfilter für dasselbe. + resources: + - title: Pixelorama · Save and Export · Exporting + url: https://pixelorama.org/user_manual/save_and_export/#exporting + + - id: erstes-sprite-ablauf + type: order + title: Vom leeren Editor zum geteilten Bild + prompt: | + Bring die Schritte für dein erstes Sprite in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Den Editor installieren und starten. + Eine neue Leinwand mit 16 × 16 Pixeln anlegen. + Eine Palette laden. + Die Kontur mit dem Stift und Shift-Linien setzen. + Die Datei im Editorformat speichern. + Eine Kopie als PNG mit 400 % und nächstem Nachbarn exportieren. + alternatives: + - [1, 2, 3, 4, 6, 5] + explanation: | + Ohne Leinwand gibt es nichts, worauf eine Palette wirken könnte. Die Palette kommt vor dem ersten Strich, damit du von Anfang an mit ihren Farben zeichnest. Speichern und Exportieren sind zwei getrennte Dateien. Welche du zuerst schreibst, ist gleich, solange es beide gibt. Wer nur exportiert, verliert Ebenen und Palette. + resources: + - title: Saint11 · Saving Your File + url: https://saint11.art/pixel_art_articles/article1/#saving-your-file + + - id: exportgroesse-400 + type: output + title: Wie groß wird der Export? + prompt: | + Du exportierst ein Sprite von 32 × 32 Pixeln mit dem Resize-Wert 400 %. Wie viele Pixel breit ist das exportierte PNG? Antworte mit der Zahl. + lang: text + code: | + Leinwand: 32 × 32 Pixel + Export: Resize 400 %, Nearest + expected: | + 128 + accept: + - 128 px + - 128 Pixel + - 128 × 128 + - 128x128 + explanation: | + 400 % heißt Faktor 4: 32 × 4 = 128. Jeder Sprite-Pixel wird zu einem Block von 4 × 4 Bildpixeln. Weil der Faktor ganz ist, sind alle Blöcke gleich groß, und mit nächstem Nachbarn entstehen keine neuen Farben. Das PNG für Godot exportierst du trotzdem in 1×, also mit 32 × 32. + resources: + - title: Aseprite Docs · Exporting · Automatic Resize on Export + url: https://www.aseprite.org/docs/exporting/#automatic-resize-on-export + + - id: bildschirmskalierung + type: output + title: Was zeigt Zoom 100 %? + prompt: | + Aseprite steht auf der Standard-Bildschirmskalierung. Du siehst ein Sprite von 32 Pixeln Breite bei Zoom 100 % an. Wie viele Bildschirmpixel breit ist es? Antworte mit der Zahl. + lang: text + code: | + Screen Scaling: 200 % (Standard) + Zoom: 100 % + Sprite: 32 Pixel breit + expected: | + 64 + accept: + - 64 px + - 64 Pixel + hints: + - Die Aseprite-Doku sagt, wie viele Bildschirmpixel ein Fensterpixel bei 200 % belegt. + explanation: | + Bei 200 % Bildschirmskalierung wird jeder Pixel im Fenster als Quadrat von 2 × 2 Bildschirmpixeln gezeigt. Zoom 100 % bedeutet also 2× auf dem Bildschirm, 32 × 2 = 64. Wer bei dieser Einstellung „bei 100 %“ prüft, sieht sein Sprite doppelt so groß wie im Spiel bei 1×. Für die echte Originalgröße stellst du die Skalierung auf 100 % oder öffnest das exportierte PNG im Bildbetrachter. + resources: + - title: Aseprite Docs · Preferences · General + url: https://www.aseprite.org/docs/preferences/#general + + - id: indexed-grenze + type: output + title: Wie viele Farben im Indexed-Modus? + prompt: | + Wie viele Farben kann eine Palette in Aseprite im Indexed-Modus höchstens haben? Antworte mit der Zahl. + lang: text + code: | + Farbmodus: Indexed + jeder Pixel: eine Nummer, die auf die Palette zeigt + erste Nummer: 0 + expected: | + 256 + accept: + - 256 Farben + hints: + - Die Nummern laufen von 0 bis 255. + explanation: | + Jeder Pixel speichert eine Nummer von 0 bis 255, also gibt es höchstens 256 Palettenplätze. Für Pixelart ist das viel mehr als nötig, Paletten mit 16 oder 32 Farben sind üblich. Der Nutzen von Indexed liegt in der Bindung: Ein Pixel kann keine Farbe haben, die nicht in der Palette steht, und eine Palettenänderung färbt alle Pixel mit dieser Nummer um. + resources: + - title: Aseprite Docs · Color Mode · Indexed + url: https://www.aseprite.org/docs/color-mode/#indexed + + - id: begriffe-editor + type: gap + title: Begriffe aus der Einrichtung + prompt: | + Ergänze die Fachbegriffe aus der Lektion. + lang: prose + code: | + Ein Modus, der beim Zeichnen den mittleren Pixel von L-Ecken entfernt, heißt ⟦Pixel-perfect⟧. Speichert jeder Pixel nur eine Nummer, die auf eine Palettenfarbe zeigt, arbeitest du im ⟦Indexed⟧-Modus. Ein Vergrößerungsverfahren, das jeden Pixel zu einem gleich großen Block macht, heißt nächster ⟦Nachbar⟧. Eine Ebene, die ein Bild in höherer Auflösung zeigt und auf der man nicht malen kann, heißt ⟦Referenzebene⟧. Ebenen und Palette bleiben nur erhalten, wenn du im ⟦Editorformat⟧ speicherst. + gaps: + - label: Modus gegen Doppelpixel + hint: Englisch, zwei Wörter mit Bindestrich, das erste ist „Pixel“. + accept: ["pixel perfect", "Pixelperfect"] + - label: Farbmodus mit Nummern + hint: Englisch für „indiziert“. + accept: ["indiziert", "indizierten", "Index"] + - label: Vergrößerungsverfahren + hint: Auf Englisch „Nearest Neighbor“. + accept: ["Neighbor", "Neighbour"] + - label: Ebene für Vorlagen + hint: In Aseprite heißt sie „Reference Layer“. + accept: ["Reference Layer", "Referenz-Ebene", "Referenzebenen"] + - label: Dateiformat + hint: Bei Aseprite `.aseprite`, bei Pixelorama `.pxo`. + accept: ["Projektformat", "Programmformat", "aseprite", "pxo", "nativen Format"] + explanation: | + Pixel-perfect und Indexed sind die beiden Einstellungen, die dich beim Zeichnen am stärksten führen: das eine bei Linien, das andere bei Farben. Nächster Nachbar und Editorformat betreffen das, was nach dem Zeichnen passiert. Die Referenzebene hilft bei der Übertragung einer eigenen Skizze. + resources: + - title: Pixelorama · Color mode · Indexed + url: https://pixelorama.org/concepts/color_mode/#indexed + + - id: export-holprig + type: bug + title: Die Treppe holpert im Chat + prompt: | + Du hast eine Kiste gezeichnet und ihren Weg in den Chat notiert. Dort sind die Kanten scharf, aber manche Pixel sind breiter als andere, und eine gleichmäßige Treppe holpert. Finde die Zeile. + lang: prose + code: | + Leinwand: 32 × 32 Pixel, RGB-Modus. + Palette Sweetie 16 von Lospec über das Palettenmenü geladen. + Kontur mit Shift-Linien gezogen, Pixel-perfect an. + Gespeichert als kiste.aseprite. + Exportiert als kiste.png mit Resize 250 % und Nearest. + Das PNG in den Chat geschickt und bei 100 % angesehen. + lines: [5] + hints: + - Scharfe Kanten heißen, dass nicht weichgezeichnet wurde. Was macht Pixel ungleich breit? + explanation: | + 250 % verlangen 2,5 Bildpixel pro Sprite-Pixel. Weil es nur ganze Bildpixel gibt, wechseln sich Breiten von 2 und 3 ab, und gleichmäßige Läufe werden ungleich. Nearest ist richtig, deshalb bleiben die Kanten scharf. Mit 200 % oder 300 % sind alle Blöcke gleich groß. Wären die Kanten weich, läge die Ursache am Verfahren, nicht am Faktor. + resources: + - title: Slynyrd · Pixelblog 5 · Back to Basics + url: https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics + + - id: zwei-dateien-erklaeren + type: explain + title: Warum zwei Dateien? + prompt: | + Ein Freund fragt, warum du von jeder Zeichnung eine `.pxo`- oder `.aseprite`-Datei und zusätzlich ein PNG behältst und warum das PNG für Godot kleiner ist als das, das du im Chat zeigst. Erkläre es in drei bis fünf Sätzen. + lang: prose + code: | + sprites/kiste.aseprite Ebenen: skizze, kontur, farbe + export/kiste.png 32 × 32, für Godot + vorschau/kiste-4x.png 128 × 128, für den Chat + points: + - Die Editordatei behält Ebenen, Palette und Einstellungen. Nur aus ihr lässt sich das Bild sauber weiterbearbeiten. + - Das PNG ist eine flache Kopie zum Weitergeben und für die Engine. + - Für Godot exportierst du in 1×, weil die Engine selbst ganzzahlig skaliert. + - Die Vorschau ist ganzzahlig mit nächstem Nachbarn vergrößert, damit Bildbetrachter sie nicht weichzeichnen. + explanation: | + Die Editordatei ist das Original: Sie kennt die Skizzenebene, die Kontur und die Palette. Ein PNG kennt nur Pixel, und jede Änderung daran fängt ohne Ebenen an. Für das Spiel brauchst du das Bild in Originalgröße, denn Godot vergrößert es selbst um ganze Faktoren und mit scharfem Filter. Im Chat würde ein Bild von 32 × 32 Pixeln winzig erscheinen oder weichgezeichnet werden. Deshalb gibt es dort eine Kopie mit Faktor 4 und nächstem Nachbarn. + resources: + - title: Pixelorama · Save and Export + url: https://pixelorama.org/user_manual/save_and_export/ + - title: Godot Docs · Importing images · Compress mode + url: https://docs.godotengine.org/en/stable/tutorials/assets_pipeline/importing_images.html#compress-mode + + - id: pruefmuster-einrichten + type: practice + title: Editor einrichten und Prüfmuster exportieren + prompt: | + Installiere Pixelorama oder LibreSprite (oder Aseprite aus dem AUR). Leg eine Leinwand von 16 × 16 Pixeln an und schalte das Pixelraster ein. Zeichne ein eigenes Prüfmuster: ein Schachbrett von 4 × 4 Pixeln, eine Linie mit Läufen von zwei Pixeln, eine gefüllte Scheibe und ein umrandetes Quadrat. Speichere im Editorformat. Exportiere zweimal: mit 400 % und mit 250 %, beide mit Nearest. Öffne beide Exporte im Bildbetrachter bei 100 %. + lang: prose + starter: | + Programm und Version: + Installiert über: + Exportgröße bei 400 %: + Wo ich bei 250 % ungleiche Pixel sehe: + checklist: + - Programm, Version und Installationsweg (pacman, Flatpak oder AUR) sind notiert. + - Die Leinwand ist 16 × 16 Pixel groß, und das Pixelraster ist bei starkem Zoom sichtbar. + - Die Linie besteht durchgehend aus Läufen von zwei Pixeln und wurde mit Shift-Linie oder Linienwerkzeug gesetzt. + - Die Editordatei lässt sich schließen und wieder öffnen, und ihre Ebenen sind noch da. + - Der 400-%-Export ist 64 × 64 Pixel groß, geprüft in den Dateieigenschaften oder im Bildbetrachter. + - Du hast notiert, an welcher Stelle der 250-%-Export ungleich breite Pixel zeigt. + hints: + - Für das Schachbrett setzt du die zweite Farbe mit der rechten Maustaste (Aseprite) oder mit einem Stift, den du auf die rechte Taste legst (Pixelorama). + explanation: | + Das Prüfmuster ist dein Test für jede neue Einrichtung: Schachbrett und Treppe zeigen sofort, ob ein Export Pixel mischt oder ungleich breit macht. Die Größe in den Dateieigenschaften ist eine Prüfung, die nicht von deinem Auge abhängt. Wenn du später ein anderes Programm oder einen anderen Rechner nimmst, wiederholst du diesen Test in fünf Minuten. + resources: + - title: Pixelorama · Installation + url: https://pixelorama.org/user_manual/installation/ + + - id: kiste-mit-kuerzeln + type: practice + title: Eine Kiste nur mit Tastenkürzeln + prompt: | + Zeichne auf einer Leinwand von 32 × 32 Pixeln eine Holzkiste in Frontansicht. Benutze dabei die Werkzeugleiste möglichst gar nicht, sondern Tastenkürzel: Stift, Radierer, Pipette, Shift-Linien, zweite Farbe auf der rechten Maustaste. Schalte für die Front die Symmetrie ein und für ein einzelnes Detail, etwa einen Kratzer, wieder aus. Schreib die benutzten Kürzel auf. + lang: prose + starter: | + Programm: + Kürzel, die ich benutzt habe: + Belegung der rechten Maustaste: + Detail ohne Symmetrie: + checklist: + - Jede gerade Kante der Kiste ist mit Shift-Linie oder Linienwerkzeug entstanden, keine mit freier Hand. + - Deine Liste nennt mindestens sechs Tastenkürzel mit dem Programm, für das sie gelten. + - Die rechte Maustaste trägt eine zweite Farbe oder ein zweites Werkzeug, und du hast notiert, welches. + - Die Front ist symmetrisch, das eine Detail sitzt nur auf einer Seite. + - Die Kontur hat an schrägen oder runden Stellen keine Doppelpixel, geprüft bei starkem Zoom mit Pixelraster. + - Du hast die Kiste in echter Originalgröße angesehen und notiert, was dir dort auffällt. + explanation: | + Die Übung trainiert die Hand für die Maus: Punkte setzen, verbinden lassen, mit der Tastatur wechseln. Nach einer Kiste kennst du die Kürzel, die du in jedem weiteren Modul brauchst. Das asymmetrische Detail zeigt, dass Symmetrie ein Werkzeug zum Arbeitsparen ist, das du gezielt ausschaltest. + resources: + - title: Aseprite Docs · Keyboard Shortcuts · Action Modifiers + url: https://www.aseprite.org/docs/keyboard-shortcuts/#action-modifiers + - title: Pixelorama · Drawing · Mirroring + url: https://pixelorama.org/user_manual/drawing/#mirroring + + - id: skizze-als-referenz + type: practice + title: Von der Papierskizze zum 32er-Sprite + prompt: | + Zeichne auf Papier eine Tasse, die vor dir steht, in zwei Minuten. Fotografiere die Skizze und leg das Foto als Referenzebene (Aseprite) oder in eine eigene Ebene unter die Zeichnung (Pixelorama, LibreSprite). Lade eine Palette mit höchstens 16 Farben, stell auf Indexed und setz die Tasse auf 32 × 32 Pixeln in einer neuen Ebene. Blende die Skizze am Ende aus. + lang: prose + starter: | + Palette und Farbzahl: + Ebenen: + Was ich gegenüber der Skizze vereinfacht habe: + checklist: + - Die Skizze zeigt eine echte Tasse, die du beim Zeichnen angesehen hast. + - Skizze und Pixelzeichnung liegen in getrennten Ebenen, die Skizze ist im Export nicht zu sehen. + - Das Bild steht im Indexed-Modus, und die Palette hat höchstens 16 Farben. + - Die Kontur ist mit Pixel-perfect oder von Hand gesetzt und hat an schrägen oder runden Stellen keine Doppelpixel. + - Es gibt eine Editordatei und einen Export in 1× und einen in 400 %. + - Du hast notiert, welche Einzelheit der Skizze du für 32 × 32 Pixel weggelassen hast. + explanation: | + Der Weg von der eigenen Skizze zum Sprite ist der Arbeitsablauf, den du später für Figuren und Tiles brauchst. Die Referenzebene trägt deine Beobachtung in den Editor, ohne dass du ein fremdes Bild abpaust. Die Notiz zum Weglassen ist der erste Schritt zur Frage, wie viel Detail eine kleine Fläche trägt. Sie kommt in [Schattieren, Dithering, Textur und Detailgrad](/pixelart/schattieren-textur) wieder. + resources: + - title: Aseprite Docs · Reference Layer + url: https://www.aseprite.org/docs/reference-layer/ + - title: Pixelorama · Palettes · Palettes import + url: https://pixelorama.org/user_manual/palettes/#palettes-import diff --git a/content/pixelart/modules/farbe-paletten.yaml b/content/pixelart/modules/farbe-paletten.yaml new file mode 100644 index 00000000..b7fbdbce --- /dev/null +++ b/content/pixelart/modules/farbe-paletten.yaml @@ -0,0 +1,460 @@ +id: farbe-paletten +title: Farbe, Rampen und begrenzte Paletten +level: 2 +minutes: 120 +summary: Warum zwei verschiedene Farben in Graustufen dasselbe Grau ergeben können, wie du Farbrampen mit Hue Shifting baust und warum wenige Farben ein Bild zusammenhalten und lesbar machen – mit der relativen Leuchtdichte als Rechenhilfe. +place: unterwegs +goals: + - Du beschreibst eine Farbe mit Farbton, Sättigung und Helligkeit und trennst ihren Tonwert von ihrem Farbton. + - Du berechnest die relative Leuchtdichte nach WCAG und erkennst Farbpaare, die in Graustufen verschmelzen. + - Du planst eine Farbrampe mit Hue Shifting, Schatten kühler und Lichter wärmer, und begründest den Verlauf der Sättigung. + - Du erklärst, warum eine begrenzte Palette hilft, und liest fertige Paletten als Lernstoff. + - Du planst Farbe für ein Spiel, gedämpfter Hintergrund gegen kräftige Figuren, und weißt, wie du Farbfehlsichtigkeit in Chromium prüfst. +resources: + - title: Slynyrd · Pixelblog 1 · Color Palettes + url: https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes + - title: Saint11 · Basic Color Theory + url: https://saint11.art/pixel_art_articles/article6/ + - title: W3C · WCAG 2.2 · Relative luminance + url: https://www.w3.org/TR/WCAG22/#dfn-relative-luminance + - title: Lospec · Palette List + url: https://lospec.com/palette-list + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf +lesson: | + Du hast eine Figur in kräftigem Rot gezeichnet und einen Gegner in kräftigem Blau. Auf dem Bildschirm unterscheiden sie sich auf den ersten Blick. Dann stellst du das Bild auf Graustufen, und beide sind dasselbe Mittelgrau. Wer Rot und Blau schlecht unterscheidet oder auf einen kleinen, hellen Handybildschirm schaut, sieht zwei gleiche Flecken. + + Farbe hat mehrere Eigenschaften, und das Auge liest sie getrennt. Dieses Modul zerlegt Farbe in Farbton, Sättigung und Helligkeit, zeigt, wie du den Tonwert einer Farbe nachrechnest, und baut daraus Rampen und Paletten. Alles geht am Handy und auf Papier. Den Graustufentest im Browser machst du am PC. + + ## Farbton, Sättigung, Helligkeit + + Pixel-Editoren bieten neben RGB meist Regler für **HSB** oder **HSV**. Raymond Schlitter (Slynyrd) erklärt sie so: Hue ist „the actual color“ von 0 bis 360°, Saturation „the intensity or purity of a color“, Brightness „the amount of black or white mixed with a color“ ([Pixelblog 1](https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes)). Pedro Medeiros (Saint11) nennt die dritte Größe Value, „the amount of light a color has“ ([Basic Color Theory: Value](https://saint11.art/pixel_art_articles/article6/#value)). + + - **Farbton** (Hue): Rot, Grün, Blau – die Stelle auf dem Farbkreis. + - **Sättigung** (Saturation): wie kräftig die Farbe ist. Ein Grau hat keine. + - **Helligkeit** (Brightness/Value): wie viel Licht die Farbe hat. + + Mit diesen drei Reglern stellst du jede Farbe gezielt ein. Eine Falle steckt im dritten. Saint11 warnt: „some hues, like blue and purple, can appear darker than yellow, even when the luminosity value is the same“ ([Hue](https://saint11.art/pixel_art_articles/article6/#hue)). Der Helligkeitsregler im Editor sagt also nicht, wie hell eine Farbe wirkt. + + ## Der Tonwert einer Farbe: was in Graustufen übrig bleibt + + Der **Tonwert** ist die Helligkeit, die bleibt, wenn du die Farbe wegnimmst. Wie Licht und Schatten mit Tonwerten arbeiten, behandelt [Licht, Schatten und Tonwerte](/pixelart/licht-werte). Hier geht es darum, welchen Tonwert eine Farbe hat. + + ![Acht Farbfelder in einer Reihe, darunter jeweils ihr Grauwert. 1 dunkles Violett wird fast schwarz. 2 Rot und 4 Blau ergeben dasselbe Mittelgrau. 5 Gelb und 6 Hellblau ergeben dasselbe helle Grau. 8 helles Gelb wird fast weiß](/media/pixelart/farbe-paletten/graustufen@2x.png "Acht Farben (oben) und ihre Grauwerte gleicher relativer Leuchtdichte (unten), Felder 1–8. Eigenes Schaubild") + + | Feld | Farbe | Leuchtdichte | HSB-Helligkeit | + | --- | --- | --- | --- | + | 1 | `#2B2445` | 0.022 | 27 % | + | 2 | `#C8463C` | 0.170 | 78 % | + | 3 | `#3E8C45` | 0.202 | 55 % | + | 4 | `#3B6FD8` | 0.173 | 85 % | + | 5 | `#E8B04A` | 0.487 | 91 % | + | 6 | `#7FC4D8` | 0.489 | 85 % | + | 7 | `#8A5A3C` | 0.130 | 54 % | + | 8 | `#F2EFA8` | 0.834 | 95 % | + + Rot (2) und Blau (4) unterscheiden sich im Farbton um rund 140° und ergeben trotzdem dasselbe Grau. Dasselbe gilt für Gelb (5) und Hellblau (6). Die Spalte rechts zeigt, warum dir der Helligkeitsregler nicht hilft: Blau steht dort bei 85 %, Grün (3) bei 55 %, und trotzdem ist das Grün in Graustufen heller. + + Die Spalte „Leuchtdichte“ folgt der Definition der **relativen Leuchtdichte** in WCAG 2.2. Jeder Kanal wird von 0–255 auf 0–1 gebracht und linearisiert, die Schwelle liegt bei 0.04045. Dann werden die Kanäle gewichtet: 0.2126 für Rot, 0.7152 für Grün, 0.0722 für Blau ([Relative luminance](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance)). Grün zählt also zehnmal so viel wie Blau. Das Programm rechnet vier Farben aus der Tabelle nach: + + ```python run + def kanal(wert): + s = wert / 255 + if s <= 0.04045: + return s / 12.92 + return ((s + 0.055) / 1.055) ** 2.4 + + def leuchtdichte(hexfarbe): + r = int(hexfarbe[1:3], 16) + g = int(hexfarbe[3:5], 16) + b = int(hexfarbe[5:7], 16) + return (0.2126 * kanal(r) + + 0.7152 * kanal(g) + + 0.0722 * kanal(b)) + + for f in ("#C8463C", "#3B6FD8", + "#E8B04A", "#7FC4D8"): + print(f, round(leuchtdichte(f), 3)) + ``` + + Aus zwei Leuchtdichten rechnet WCAG ein **Kontrastverhältnis**: (hell + 0.05) ÷ (dunkel + 0.05) ([Contrast ratio](https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio)). Weiß auf Schwarz ergibt 21 : 1, Rot gegen Blau aus der Tabelle 1,01 : 1, also praktisch keinen Unterschied. Die Formel ist für Text auf Webseiten gemacht. Für Pixelart nutzt du sie als Messlatte, nicht als Norm: Liegt das Verhältnis zweier Farben nahe 1, verschmelzen sie in Graustufen. + + > [!MERKE] + > Farbton und Tonwert sind zwei verschiedene Eigenschaften. Zwei Farben, die sich nur im Farbton unterscheiden, verschmelzen in Graustufen. + + > [!DEEP] Leuchtdichte ist nicht wahrgenommene Helligkeit + > Die relative Leuchtdichte misst Licht linear. Sie ist keine Skala, auf der gleiche Abstände gleich hell wirken. Dafür sind Farbräume wie **OKLab** gebaut; Björn Ottosson beschreibt ihn in [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/), CSS kennt ihn als `oklab()` ([CSS Color 4](https://www.w3.org/TR/css-color-4/#ok-lab)). Programme rechnen Graustufen außerdem verschieden, manche mitteln nur die Kanäle. Für die Frage „Verschmelzen diese zwei Farben?“ reicht die Leuchtdichte. + + ## Farbrampen und Hue Shifting + + Slynyrd definiert: „A color ramp is a specific range of colors that work well together, arranged according to brightness.“ Eine **Rampe** ist die Reihe von Tönen, mit der du eine Fläche vom Schatten bis zum Licht schattierst. + + ![Zwei Rampen aus je sechs Farben, darunter jeweils eine damit schattierte Kugel mit Licht von oben links. A geht nur in der Helligkeit von Dunkelgrün nach Blassgrün. B geht in kleinen Schritten von dunklem Blaugrün über Grün nach hellem Gelbgrün](/media/pixelart/farbe-paletten/rampen@2x.png "Rampe nur über die Helligkeit (A) und Rampe mit Hue Shifting (B), beide mit demselben Mittelton. Eigenes Schaubild") + + Beide Rampen teilen sich den dritten Ton, das Grün `#3F7C5C`. A bleibt im Farbton fast stehen, zwischen 137° und 153°, und ändert nur die Helligkeit. B wandert in Schritten von etwa 18° von `#1D494C` (dunkles Blaugrün, 184°) über das gemeinsame Grün zu `#BDEB9B` (helles Gelbgrün, 94°); die dunklen Töne sind gesättigter als die hellen. Das nennt man **Hue Shifting**, das Verschieben des Farbtons entlang der Rampe. Slynyrd: „A good color ramp should also apply hue-shifting“. Rampen ohne Verschiebung nennt er „straight ramps“; ihre Farben „will lack interest and be difficult to harmonize with ramps of a different hue“. Er verschiebt in eine Richtung: „positive hue shift usually results in more natural colors, warming as they become brighter“, und für die Schrittweite gilt bei ihm: „20 is about as high as I go“. In welche Richtung des Farbkreises er dabei zählt, sagt die Stelle nicht eindeutig. Dieser Kurs hält sich an die Wirkung, die er beschreibt, zum Licht hin wärmer; in Rampe B sinken die Gradzahlen dabei. Das ist eine Deutung, kein Zitat. + + Saint11 zeigt dasselbe an einer Vase. Die Rampe nur über die Helligkeit wirke „dull and muddy“. In seiner zweiten Fassung hat er den Schatten „a little more blue and less saturated (colder)“ gemacht und das Licht „a little more yellow and saturated (warmer)“ ([Shading](https://saint11.art/pixel_art_articles/article6/#shading)). Valve hielt für Team Fortress 2 fest: „Shading obeys a warm-to-cool hue shift. Shadows go to cool, not black.“ ([NPAR 2007](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf), Abschnitt 3) + + Bei der **Sättigung** sind sich die Quellen nicht einig, und das darfst du wissen. Slynyrd: „Generally, darker colors have more saturation“; er lässt die Sättigung in der Mitte der Rampe gipfeln und an hellen Enden sinken, sonst entstehen „intense eye burning colors“. Saint11 macht in seinem Beispiel den Schatten weniger gesättigt. Valve schreibt, die Sättigung steige am Übergang von Licht zu Schatten. Gemeinsam ist allen drei: Der Farbton wandert zum Schatten hin kühl und zum Licht hin warm, und sehr helle Töne sind nie voll gesättigt. Wie stark du die Sättigung führst, ist deine Entscheidung. Notiere sie, damit alle Rampen einer Palette ihr folgen. + + Rampen planst du am Handy in Zahlen. Eine Zeile pro Stufe, von dunkel nach hell: + + ```text + 1 H 250° S 45 % B 25 % + 2 H 230° S 50 % B 38 % + 3 H 210° S 52 % B 52 % + 4 H 190° S 48 % B 66 % + 5 H 170° S 35 % B 82 % + ``` + + Diese Rampe verschiebt den Farbton um 20° pro Stufe in eine Richtung, die Helligkeit steigt bei jeder Stufe, die Sättigung gipfelt in der Mitte. Im Editor übernimmt Pixelorama einen Teil davon: Sein Shading-Werkzeug hat einen Modus „Hue Shifting“, der beim Aufhellen den Farbton Richtung Gelb und beim Abdunkeln Richtung Blau schiebt ([Shading: Hue Shifting](https://pixelorama.org/user_manual/shading/#hue-shifting)). Eine selbst geplante Rampe lehrt dich mehr als der Automat. + + ## Begrenzte Paletten: warum wenige Farben + + Derek Yu: „Pixel art is defined by its constraints.“ Für Anfänger rät er, Palettentheorie zunächst beiseitezulassen und „just pick an existing one“. 32 Farben seien eine verbreitete Wahl, 16 auch üblich ([Choosing a Palette](https://www.derekyu.com/makegames/pixelart.html#palette)). Slynyrd baut große Paletten aus vielen Rampen und zieht daraus für jeden Auftrag eine kleinere: „A little color goes a long way with pixel art“. Saint11 nennt als Ziel „do as much as I can with as little as possible“ und warnt, zu viele Farbtöne machten ein Bild unruhig ([Hue](https://saint11.art/pixel_art_articles/article6/#hue)). + + Eine begrenzte Palette hilft dreifach: + + - **Zusammenhalt.** Teilen sich Rampen ihre dunkelsten und hellsten Töne, passen Figur und Umgebung zusammen. + - **Lesbarkeit.** Wenige, gut getrennte Tonwerte sind bei 1× leichter zu unterscheiden als viele ähnliche. + - **Entscheidungen.** Mit 16 Farben wählst du, statt zu mischen. Jeder Pixel bekommt eine Farbe, die du kennst. + + Fertige Paletten sind Lernstoff. Auf [Lospec](https://lospec.com/palette-list) findest du [PICO-8](https://lospec.com/palette-list/pico-8) mit den 16 festen Farben der gleichnamigen Fantasiekonsole, [Sweetie 16](https://lospec.com/palette-list/sweetie-16) von GrafxKid und [Endesga 32](https://lospec.com/palette-list/endesga-32). Aseprite startet jede neue Datei mit DawnBringer 32 ([Default Palette](https://www.aseprite.org/docs/default-palette/)). Lies eine solche Palette wie einen Bauplan: Welche Farben bilden zusammen eine Rampe? Wo verschiebt sich der Farbton? Welche Farben teilen sich mehrere Rampen? Für dein eigenes Spiel baust du später eine eigene Palette. Fertige Paletten zeigen dir, wie andere die Fragen beantwortet haben, die du dann selbst entscheidest. Wie du eine Palette im Editor lädst und mit dem Indexed-Modus festhältst, steht in [Einen Pixel-Editor wählen und einrichten](/pixelart/editor-einrichten). + + > [!PRAXIS] + > Slynyrd legt seine Palette „Mondo“ mit 128 Farben aus acht Rampen an: neun Töne pro Rampe, 20° Hue Shift zwischen zwei Tönen, die Rampen um je 45° auf dem Farbkreis versetzt. Dazu kommen entsättigte Fassungen der mittleren Töne für natürliche Grautöne ([Pixelblog 1](https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes)). Für ein einzelnes Bild nimmt er daraus nur wenige Farben. Das Prinzip kannst du übernehmen: ein Vorrat mit festen Regeln, für jedes Bild eine kleine Auswahl daraus. + + ## Farbe im Spiel: Figuren, Hintergrund, Teams + + In einem Spiel muss Farbe Fragen beantworten, bevor der Spieler nachdenkt. Jason Mitchell beschreibt für Team Fortress 2 eine „Read Hierarchy“: Zuerst liest der Spieler das Team über die Farbe, dann die Klasse über Silhouette und Proportionen, dann die Waffe ([Connecting Visuals to Gameplay](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Die Basen des roten Teams nutzen warme Farben und kantige Formen, die des blauen Teams kühle Farben und rechtwinklige Formen. In den Texturen dominieren gedämpfte Farben mit kleinen gesättigten Flächen, und die Umgebung ist „Desaturated relative to players“ (NPAR 2007, Abschnitt 4; MIGS 2008). + + Saint11 gibt denselben Rat für einzelne Bilder: „try using large low saturation areas with small high saturation details“ ([Saturation](https://saint11.art/pixel_art_articles/article6/#saturation)). Für ein Top-down-Spiel heißt das: Der Boden bekommt gedämpfte Farben in einem engen Tonwertbereich, Figuren und Gefahren die kräftigen Farben und den vollen Kontrast. Wie das in Tiles (Kacheln) aussieht, zeigt [Umgebung und Tiles, die Figuren tragen](/pixelart/umgebung-tiles). + + Zwei Regeln folgen aus dem Graustufenbild oben. Erstens: Unterscheide Freund und Feind nie nur über den Farbton. Gib ihnen auch verschiedene Tonwerte, Formen oder Konturen. Valve verbindet Teamfarbe mit Formensprache, nicht Farbe allein. Zweitens: Prüf jede Paarung, die im Spiel zählt, in Graustufen. + + > [!INTERVIEW] + > Im Portfolio-Gespräch fragt ein Art Lead: „Warum hast du diese Farben gewählt?“ Eine schwache Antwort ist „Die gefallen mir“. Eine gute nennt die Struktur: wie viele Rampen, wie der Farbton in jeder Rampe wandert, welche Töne sich die Rampen teilen. Dazu zeigst du dasselbe Bild in Graustufen und sagst, welche Paare du daraufhin geändert hast. Geschmack darfst du haben; begründen musst du ihn. + + ## Farbfehlsichtigkeit und Graustufen prüfen + + Chromium kann simulieren, wie Menschen mit Farbfehlsichtigkeit ein Bild sehen. Öffne dein exportiertes PNG in einem Tab, dann die DevTools. Mit Ctrl+Shift+P öffnest du das Befehlsmenü, tippst „rendering“ und wählst „Show Rendering“. Unter „Emulate vision deficiencies“ stehen unter anderem Protanopia (kein Rot), Deuteranopia (kein Grün), Tritanopia (kein Blau) und Achromatopsia, also keine Farbe ([Emulate vision deficiencies](https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies)). Achromatopsia ist dein Graustufentest. Bei Protanopia und Deuteranopia nennt die Doku „confusion of greens, reds, and yellows“. Rot gegen Grün als einziges Unterscheidungsmerkmal fällt dort durch. + + Unterwegs prüfst du grob: ein Foto deiner Skizze oder ein Screenshot in Schwarzweiß, wenn deine Galerie-App einen solchen Filter hat. Den genauen Test machst du am PC. + + ## Häufige Fehler + + - **Schatten mit Schwarz gemischt.** Die Farbe wird trüb. Schatten werden kühler und dunkler, nicht schwarz. + - **Gerade Rampen.** Nur die Helligkeit zu ändern ergibt laut Saint11 „dull and muddy“ Töne und Rampen, die nicht zueinander passen. + - **Helligkeitsregler als Tonwert gelesen.** Blau bei 85 % kann dunkler sein als Grün bei 55 %. Rechne nach oder prüf in Graustufen. + - **Volle Sättigung bei voller Helligkeit.** Slynyrd nennt das den größten Fehler, „unless you want to burn some eyeballs“. + - **Zu viele Farbtöne.** Jede neue Rampe macht das Bild unruhiger. Lieber weniger Rampen, die sich Töne teilen. + - **Freund und Feind nur über den Farbton getrennt.** In Graustufen und bei Farbfehlsichtigkeit verschwindet der Unterschied. + - **Kräftiger Hintergrund.** Ist der Boden so gesättigt wie die Figur, konkurrieren beide um den Blick. + + ## Zusammenfassung + + - Farbe hat Farbton, Sättigung und Helligkeit. Der Tonwert ist das, was in Graustufen bleibt. + - Die relative Leuchtdichte nach WCAG gewichtet Grün stark und Blau schwach. Der HSB-Helligkeitsregler sagt nichts über den Tonwert. + - Ein Kontrastverhältnis nahe 1 : 1 heißt: Die Farben verschmelzen in Graustufen. + - Eine Rampe ordnet Töne nach Helligkeit. Mit Hue Shifting wandert sie zum Licht hin warm und zum Schatten hin kühl. + - Bei der Sättigung widersprechen sich Slynyrd, Saint11 und Valve. Leg deine Regel fest und halte sie durch. + - Wenige Farben halten ein Bild zusammen. Fertige Paletten sind Lernstoff, deine eigene baust du selbst. + - Im Spiel: gedämpfte Umgebung, kräftige Figuren, Unterschiede nie nur im Farbton. Chromium simuliert Farbfehlsichtigkeit und Graustufen. +exercises: + - id: hsb-unterscheiden + type: choice + title: Drei Eigenschaften einer Farbe + prompt: | + Welche Aussagen über Farbton, Sättigung und Helligkeit stimmen? + options: + - text: Zwei Farben mit verschiedenem Farbton können denselben Tonwert haben. + correct: true + why: Rot `#C8463C` und Blau `#3B6FD8` liegen rund 140° auseinander und ergeben in Graustufen dasselbe Grau. + - text: Ein Grau hat keine Sättigung. + correct: true + why: Sättigung ist die Kraft der Farbe. Bei null bleibt nur die Helligkeit übrig. + - text: Eine Farbe mit 85 % HSB-Helligkeit ist in Graustufen immer heller als eine mit 55 %. + correct: false + why: Der Regler misst nicht, wie hell eine Farbe wirkt. Blau bei 85 % hat eine Leuchtdichte von 0.173, Grün bei 55 % eine von 0.202. + - text: Der Farbton bestimmt, wie hell eine Farbe in Graustufen erscheint. + correct: false + why: Der Farbton beeinflusst das zwar über die Gewichtung der Kanäle, entscheidend ist aber die Leuchtdichte der ganzen Farbe. Gelb und Hellblau aus dem Schaubild sind gleich hell. + explanation: | + Die drei Regler eines Farbwählers sind praktische Stellschrauben, aber nur einer davon heißt „Helligkeit“, und er misst etwas anderes als das Auge. Was in Graustufen übrig bleibt, hängt von allen drei Kanälen und ihrer Gewichtung ab. Deshalb prüfst du Tonwerte immer in Graustufen oder rechnest sie nach. + resources: + - title: Saint11 · Basic Color Theory · Hue + url: https://saint11.art/pixel_art_articles/article6/#hue + + - id: graustufen-paare + type: choice + title: Welche Farben verschmelzen? + prompt: | + Sieh dir die acht Farben und ihre Grauwerte an. Welche Paare sind in Graustufen kaum zu unterscheiden? + + ![Acht Farbfelder mit ihren Grauwerten darunter, nummeriert 1 bis 8](/media/pixelart/farbe-paletten/graustufen@2x.png "Acht Farben und ihre Grauwerte. Eigenes Schaubild") + options: + - text: 2 (Rot) und 4 (Blau) + correct: true + why: "Leuchtdichte 0.170 und 0.173, Kontrastverhältnis 1,01 : 1." + - text: 5 (Gelb) und 6 (Hellblau) + correct: true + why: Leuchtdichte 0.487 und 0.489. Im Bild sind beide Grauflächen gleich hell. + - text: 1 (Violett) und 8 (helles Gelb) + correct: false + why: "Das ist das stärkste Paar im Bild, Leuchtdichte 0.022 gegen 0.834, rund 12 : 1." + - text: 3 (Grün) und 7 (Braun) + correct: false + why: 0.202 gegen 0.130 ist ein kleiner, aber sichtbarer Unterschied. Für Freund und Feind wäre er zu knapp, verschmelzen tun sie nicht. + explanation: | + Rot und Blau, Gelb und Hellblau sind die Paare, die im Farbbild am stärksten auseinanderliegen und in Graustufen verschwinden. Genau solche Paare sind gefährlich, wenn sie im Spiel etwas unterscheiden sollen. Der Test kostet keine Minute und zeigt, ob deine Unterscheidung am Tonwert oder nur am Farbton hängt. + resources: + - title: W3C · WCAG 2.2 · Contrast ratio + url: https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio + + - id: rampe-planen-ablauf + type: order + title: Eine Rampe planen + prompt: | + Bring die Schritte zum Planen einer Rampe in die Reihenfolge, die Slynyrd in Pixelblog 1 beschreibt. + lang: prose + lines: | + Festlegen, wie viele Stufen die Rampe hat und wie viele Grad sich der Farbton pro Stufe verschiebt. + Einen Mittelton wählen, der die Fläche im normalen Licht zeigt und am kräftigsten wirkt. + Von dort aus die Stufen setzen: zum Licht hin heller und wärmer, zum Schatten hin dunkler und kühler. + Die Sättigung nach deiner Regel einstellen und die hellste Stufe entsättigen. + Eine Kugel mit der Rampe schattieren und die Stufen in Graustufen vergleichen. + explanation: | + Slynyrd schreibt: „First I decide how many swatches I want per ramp and how many degrees of hue shift.“ Erst danach wählt er den Mittelton, und den will er am kräftigsten: „I want the middle color to be the most vibrant“. Aus Stufenzahl, Schrittweite und Mittelton ergeben sich die übrigen Töne. Die Sättigung justierst du danach, weil sie nicht in gleichen Schritten aufgeht. Der Test an einer Kugel und in Graustufen steht am Ende, er zeigt, ob die Stufen gleichmäßig wirken. + resources: + - title: Slynyrd · Pixelblog 1 · Color Palettes + url: https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes + + - id: reine-kanaele + type: output + title: Wie hell sind Rot, Grün und Blau? + prompt: | + Das Programm berechnet die relative Leuchtdichte für reines Rot, reines Grün und reines Blau. Was gibt es aus? + lang: python + code: | + def kanal(wert): + s = wert / 255 + if s <= 0.04045: + return s / 12.92 + return ((s + 0.055) / 1.055) ** 2.4 + + def leuchtdichte(r, g, b): + return (0.2126 * kanal(r) + + 0.7152 * kanal(g) + + 0.0722 * kanal(b)) + + print(round(leuchtdichte(255, 0, 0), 3)) + print(round(leuchtdichte(0, 255, 0), 3)) + print(round(leuchtdichte(0, 0, 255), 3)) + expected: | + 0.213 + 0.715 + 0.072 + hints: + - "`kanal(255)` ergibt 1, `kanal(0)` ergibt 0." + - Übrig bleibt jeweils nur ein Gewicht, gerundet auf drei Stellen. + explanation: | + Bei einem reinen Kanal ist der linearisierte Wert 1 und die anderen sind 0. Übrig bleibt das Gewicht des Kanals: 0.2126, 0.7152 und 0.0722, gerundet 0.213, 0.715 und 0.072. Reines Grün ist also rund zehnmal so hell wie reines Blau. Das erklärt, warum ein kräftiges Blau in Graustufen dunkel wird und warum Grün so schnell grell wirkt. + resources: + - title: W3C · WCAG 2.2 · Relative luminance + url: https://www.w3.org/TR/WCAG22/#dfn-relative-luminance + + - id: kontrast-vorhersagen + type: output + title: Weiß gegen Schwarz, Rot gegen Blau + prompt: | + Das Programm berechnet das Kontrastverhältnis nach WCAG für zwei Paare: Weiß gegen Schwarz und Rot gegen Blau aus dem Schaubild. Was gibt es aus? + lang: python + code: | + def kontrast(l1, l2): + hell = max(l1, l2) + dunkel = min(l1, l2) + return (hell + 0.05) / (dunkel + 0.05) + + print(round(kontrast(1.0, 0.0), 1)) + print(round(kontrast(0.170, 0.173), 2)) + expected: | + 21.0 + 1.01 + hints: + - "Erste Zeile: 1.05 ÷ 0.05." + - "Zweite Zeile: 0.223 ÷ 0.220, auf zwei Stellen gerundet." + explanation: | + Weiß gegen Schwarz ist das größte mögliche Verhältnis: 1.05 ÷ 0.05 = 21. Rot gegen Blau ergibt 0.223 ÷ 0.220 ≈ 1.014, gerundet 1.01, also fast keinen Unterschied. Die Reihenfolge der Argumente spielt keine Rolle, weil die Funktion den helleren Wert selbst sucht. Ein Verhältnis nahe 1 ist der Zahlenbeweis für das, was das Graustufenbild zeigt. + resources: + - title: W3C · WCAG 2.2 · Contrast ratio + url: https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio + + - id: palette-zaehlen + type: output + title: Wie viele Farben hat die Palette? + prompt: | + Eine Palette hat drei Rampen zu je fünf Tönen: Haut, Stoff und Stein. Alle drei teilen sich denselben dunkelsten Ton, ein dunkles Violett. Sonst ist jeder Ton einmalig. Wie viele verschiedene Farben hat die Palette? Antworte mit der Zahl. + lang: text + code: | + Rampe Haut: 5 Töne + Rampe Stoff: 5 Töne + Rampe Stein: 5 Töne + gemeinsam: dunkelster Ton aller drei + expected: | + 13 + accept: + - 13 Farben + - dreizehn + hints: + - Ohne Teilen wären es 15. Wie oft zählst du das Violett zu viel? + explanation: | + Drei mal fünf sind 15 Einträge, aber das Violett steht in allen drei Rampen und zählt nur einmal: 15 − 2 = 13. Geteilte Töne sparen Farben und halten die Palette zusammen, weil Schatten auf Haut, Stoff und Stein im selben Ton enden. Viele fertige Paletten auf Lospec sind so gebaut. + resources: + - title: Lospec · Endesga 32 + url: https://lospec.com/palette-list/endesga-32 + + - id: farbbegriffe + type: gap + title: Fachbegriffe der Farbe + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Eine Reihe von Tönen, nach Helligkeit geordnet, heißt ⟦Rampe⟧. Verschiebt sich der Farbton entlang dieser Reihe, spricht man von ⟦Hue⟧ Shifting. Die Kraft einer Farbe nennt man ⟦Sättigung⟧. Die Helligkeit, die in Graustufen übrig bleibt, ist der ⟦Tonwert⟧. Nach WCAG rechnest du sie als relative ⟦Leuchtdichte⟧. Schatten werden laut Valve nicht schwarz, sondern ⟦kühl⟧. + gaps: + - label: geordnete Tonreihe + hint: Englisch „ramp“. + accept: ["Farbrampe", "Ramp", "Color Ramp"] + - label: Verschiebung + hint: Englisch für Farbton. + accept: ["Farbton"] + - label: Kraft der Farbe + hint: Englisch „saturation“. + accept: ["Saturation", "Farbsättigung"] + - label: Helligkeit ohne Farbe + hint: Englisch „value“. + accept: ["Value", "Helligkeitswert", "Grauwert"] + - label: Rechengröße + hint: Englisch „luminance“. + accept: ["Luminanz", "Luminance"] + - label: Schattenfarbe bei Valve + hint: Das Gegenteil von warm. + accept: ["kalt", "cool", "kühler"] + explanation: | + Mit diesen Begriffen beschreibst du jede Palette: Rampen mit Hue Shifting, Sättigung und Tonwert als getrennte Eigenschaften, die Leuchtdichte als Messgröße. „Shadows go to cool, not black“ fasst den wichtigsten Rat für Schatten in fünf Wörtern. + resources: + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf + + - id: rampe-springt + type: bug + title: Die Kugel bekommt einen Ring + prompt: | + Du hast eine Rampe in deiner Handy-Notiz geplant und damit eine Kugel schattiert. Statt eines gleichmäßigen Verlaufs zeigt die Kugel einen dunklen Ring zwischen Mitte und Licht. Finde die Zeile. + lang: prose + code: | + 1 H 255° S 45 % B 24 % + 2 H 235° S 50 % B 38 % + 3 H 215° S 52 % B 52 % + 4 H 195° S 50 % B 46 % + 5 H 175° S 40 % B 80 % + 6 H 160° S 25 % B 94 % + lines: [4] + hints: + - Lies nur die Spalte B von oben nach unten. + explanation: | + Eine Rampe ist nach Helligkeit geordnet. Stufe 4 ist mit 46 % dunkler als Stufe 3 mit 52 %. Auf der Kugel liegt sie zwischen Mittelton und Licht, deshalb erscheint dort ein dunkler Ring. Farbton und Sättigung sind in Ordnung: Der Farbton wandert in eine Richtung um 15 bis 20° pro Stufe, die Sättigung gipfelt in der Mitte. Mit etwa 66 % passt Stufe 4 in die Reihe. + resources: + - title: Slynyrd · Pixelblog 1 · Color Palettes + url: https://www.slynyrd.com/blog/2018/1/10/pixelblog-1-color-palettes + + - id: freund-feind-grau + type: bug + title: Im Graustufentest verschwindet der Gegner + prompt: | + Ein Farbplan für eine Testszene. Die Spielfigur steht fest. Im Graustufentest sind Spielfigur und Gegner nicht zu unterscheiden. Finde die Zeile, die du ändern musst. + lang: prose + code: | + Boden: gedämpftes Grün, Leuchtdichte 0.10 bis 0.14. + Spielfigur: Gelb #E8B04A, Leuchtdichte 0.487. + Gegner: Hellblau #7FC4D8, Leuchtdichte 0.489. + Gefahrenzone: Rot #C8463C mit dunkler Kontur. + Schatten aller Figuren: kühles Violett statt Schwarz. + lines: [3] + hints: + - Vergleiche die Leuchtdichten der beiden Figuren. + explanation: | + Gelb und Hellblau unterscheiden sich im Farbton stark und in der Leuchtdichte fast gar nicht, 0.487 gegen 0.489. In Graustufen und für viele Menschen mit Farbfehlsichtigkeit sind beide dasselbe. Weil die Spielfigur feststeht, bekommt der Gegner einen deutlich anderen Tonwert, zum Beispiel ein dunkles Blau, oder zusätzlich eine andere Form oder Kontur. Der Boden ist mit 0.10 bis 0.14 gedämpft und dunkler als beide Figuren, er trennt sich also von beiden. + resources: + - title: Chrome DevTools · Emulate vision deficiencies + url: https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies + + - id: tf2-farben-erklaeren + type: explain + title: Rot gegen Blau in Team Fortress 2 + prompt: | + Erkläre in drei bis vier Sätzen, warum diese Entscheidungen Spielern helfen, schnell zu reagieren. + lang: prose + code: | + Team Fortress 2 (Valve, 2007): Die Basen des roten Teams nutzen warme Farben, natürliche Materialien und kantige Formen, die des blauen Teams kühle Farben, Industriematerialien und rechtwinklige Formen. Gedämpfte Farben dominieren, gesättigt sind nur kleine Flächen. Die Umgebung ist gegenüber den Spielern entsättigt. Schatten gehen ins Kühle, nicht ins Schwarze. Als Lesereihenfolge gilt: Team über Farbe, Klasse über Silhouette, Waffe zuletzt. + points: + - Das Team ist die erste Frage (Freund oder Feind), deshalb trägt sie die auffälligste Eigenschaft, die Farbe. + - Die entsättigte Umgebung lässt die Spieler hervortreten, weil die kräftigen Farben ihnen vorbehalten sind. + - Farbe ist mit Formen gekoppelt, warm und kantig gegen kühl und rechtwinklig, sodass die Unterscheidung nicht am Farbton allein hängt. + - Kühle statt schwarzer Schatten halten Farben auch im Schatten erkennbar. + explanation: | + Valve ordnet die Fragen eines Spielers nach Dringlichkeit und gibt der dringendsten die stärkste Eigenschaft: Freund oder Feind über die Farbe. Damit das funktioniert, darf die Umgebung nicht mit den Spielern konkurrieren, sie ist entsättigt und gedämpft. Die Teamfarbe steht nicht allein, sie hat eine eigene Formensprache, und das hilft auch dort, wo der Farbton nicht trägt. Kühle Schatten bewahren die Farbe dort, wo Schwarz sie auslöschen würde. Für ein eigenes Spiel übernimmst du die Methode, nicht die Farben. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: farben-aus-foto + type: practice + title: Fünf Farben aus einem Foto + prompt: | + Nimm ein Foto aus deiner Galerie, am besten draußen bei Sonne. Wähle fünf Farbflächen und beschreib jede mit drei Wörtern für Farbton, Sättigung und Helligkeit, etwa „Blauviolett, gedämpft, dunkel“. Ordne sie von dunkel nach hell. Sieh dir das Foto dann in Schwarzweiß an und prüf deine Reihenfolge. + lang: prose + starter: | + 1: + 2: + 3: + 4: + 5: + Nach dem Schwarzweißtest: + checklist: + - Es sind fünf Farbflächen, jede mit einer Angabe zu Farbton, Sättigung und Helligkeit. + - Die Liste ist von dunkel nach hell geordnet, bevor du das Foto in Schwarzweiß angesehen hast. + - Du hast notiert, ob die Reihenfolge im Schwarzweißbild stimmt, und welche Fläche du falsch eingeschätzt hast. + - Mindestens eine Notiz sagt, ob die Schatten im Foto kühler oder wärmer sind als das Licht. + hints: + - Wenn deine Galerie keinen Schwarzweißfilter hat, mach den Test später am PC mit Achromatopsia in Chromium. + explanation: | + Die Übung trainiert genau die Trennung aus der Lektion: Farbton und Tonwert sind zwei Urteile. Fast jeder schätzt dabei mindestens eine Fläche falsch ein, meist ein gesättigtes Blau als zu hell oder ein Gelb als zu dunkel. Die Notiz zur Temperatur der Schatten verbindet die Beobachtung mit dem Hue Shifting, das du in Rampen nachbaust. + resources: + - title: Saint11 · Basic Color Theory · Color Temperature + url: https://saint11.art/pixel_art_articles/article6/#color-temperature + + - id: rampe-auf-papier + type: practice + title: Eine eigene Rampe und eine Kugel + prompt: | + Plane in einer Handy-Notiz eine Rampe von fünf Tönen in HSB-Zahlen, eine Zeile pro Stufe, mit Hue Shifting. Zeichne dann auf Karopapier eine Kugel von etwa 12 Kästchen Durchmesser mit einem Pfeil für die Lichtrichtung und schreib in jedes Kästchen die Nummer der Stufe, die es bekommt. + lang: prose + starter: | + 1 H S B + 2 H S B + 3 H S B + 4 H S B + 5 H S B + Regel für die Sättigung: + checklist: + - Die Helligkeit B steigt von Stufe 1 bis 5 bei jeder Stufe. + - Der Farbton verschiebt sich bei jeder Stufe in dieselbe Richtung, um höchstens 20°. + - Die hellste Stufe hat eine niedrigere Sättigung als die Stufe darunter. + - Unter der Rampe steht in einem Satz deine Regel für die Sättigung und nach welcher Quelle sie sich richtet. + - Auf der Kugel liegt Stufe 5 auf der Seite des Lichtpfeils und Stufe 1 gegenüber. + explanation: | + Die Rampe in Zahlen ist ein Plan, den du später im Editor eins zu eins eintippst. Die Kugel prüft, ob fünf Stufen für eine runde Form reichen und wo die Grenzen liegen. Welcher Sättigungsregel du folgst, entscheidest du selbst. Wichtig ist, dass sie feststeht und für alle weiteren Rampen gilt. + resources: + - title: Pixelorama · Shading · Hue Shifting + url: https://pixelorama.org/user_manual/shading/#hue-shifting diff --git a/content/pixelart/modules/figur-proportion.yaml b/content/pixelart/modules/figur-proportion.yaml new file mode 100644 index 00000000..81df097b --- /dev/null +++ b/content/pixelart/modules/figur-proportion.yaml @@ -0,0 +1,454 @@ +id: figur-proportion +title: Figur, Geste und Proportion +level: 1 +minutes: 110 +summary: Wie du eine Figur von der Handlungslinie über eine Gliederpuppe aus Grundkörpern bis zu messbaren Proportionen in Kopfeinheiten aufbaust, wie sie im Stand ihr Gewicht trägt und warum kleine Sprites große Köpfe haben – alles als Standbild, mit Stift und Papier. +place: unterwegs +goals: + - Du findest die Handlungslinie einer Pose und zeichnest sie als Gerade, C- oder S-Kurve. + - Du baust eine Figur als Gliederpuppe aus Grundkörpern auf, mit Brustkorb und Becken als zwei Massen. + - Du misst und planst Proportionen in Kopfeinheiten und rechnest sie in Pixel um. + - Du zeichnest eine stehende Figur mit Standbein und Schwerpunkt über der Stützfläche. + - Du begründest stilisierte Proportionen für kleine Sprites mit dem Platz, den Gesicht und Glieder brauchen. +resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + - title: Proko · Human Proportions · Average Figure + url: https://www.proko.com/course-lesson/human-proportions-average-figure + - title: Proko · How to Draw Balanced Poses + url: https://www.proko.com/course-lesson/how-to-draw-balanced-poses + - title: Slynyrd · Pixelblog 22 · Top Down Character Sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + - title: Quickposes · Posen mit Timer + url: https://quickposes.com/en +lesson: | + Du zeichnest eine Figur, die eine schwere Kiste schiebt. Heraus kommt ein Mensch, der senkrecht neben der Kiste steht und die Arme nach vorn streckt, wie das Männchen auf einem Hinweisschild. Der Kopf hat vielleicht die richtige Größe, die Beine die richtige Länge. Trotzdem glaubt niemand, dass diese Figur Kraft aufwendet. Ihr fehlt die Geste: die eine Linie, entlang der sich der ganze Körper gegen die Kiste stemmt. + + Dieses Modul baut Figuren in drei Schichten auf: Geste, Gliederpuppe aus Grundkörpern, Proportion in Kopfeinheiten. Dann geht es um Gewicht im Stand und um die Frage, wie viel davon in ein Sprite von 24 Pixeln passt. Alles bleibt Standbild. Wie sich eine Figur bewegt, ist Thema des Animationskurses. + + ## Geste: die Handlungslinie zuerst + + Die **Handlungslinie** (line of action) ist die längste durchgehende Linie durch eine Pose. Proko beginnt jede Gestenzeichnung mit ihr: „Start by finding the longest action line of the body.“ Für die Form gibt es eine klare Grenze: „Don't use anything more complicated than a C curve, S curve, or straight.“ ([How to Draw Gesture](https://www.proko.com/course-lesson/how-to-draw-gesture)) + + ![Zwei Gliederpuppen in hellem Grau mit orangefarbener Handlungslinie. A steht steif, die Linie läuft gerade und senkrecht vom Scheitel bis zwischen die Füße. B lehnt sich schräg nach vorn rechts, als schiebe sie etwas; die Linie ist eine C-Kurve vom Kopf oben rechts durch den Rumpf und das hintere Bein bis zum Fuß unten links, das vordere Bein ist gebeugt, die Arme greifen nach vorn](/media/pixelart/figur-proportion/handlungslinie@2x.png "Gerade, senkrechte Handlungslinie (A) und C-Kurve beim Schieben (B). Eigenes Schaubild") + + In A läuft die Linie senkrecht vom Scheitel zum Boden. Die Puppe steht still, und genau so liest man sie. In B folgt der ganze Körper einer C-Kurve vom Kopf bis zum hinteren Fuß. Das hintere Bein ist gestreckt und drückt, das vordere ist gebeugt, die Arme greifen nach vorn. Ohne ein Gesicht und ohne Kiste erkennst du: Diese Figur schiebt. + + Eine gerade Handlungslinie ist kein Fehler. Eine Wache, die stramm steht, darf gerade sein. Es soll nur eine Entscheidung sein und nicht das Ergebnis davon, dass du Kopf, Rumpf und Beine übereinandergestapelt hast. + + > [!MERKE] + > Erst die Linie, dann der Körper. Eine Pose, die du nicht als Gerade, C- oder S-Kurve zeichnen kannst, hast du noch nicht entschieden. + + ## Die Gliederpuppe aus Grundkörpern + + Auf die Linie setzt du eine **Gliederpuppe** aus den Körpern, die du in [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum) geübt hast: + + - **Kopf:** Ei oder Kugel. + - **Brustkorb:** Ei oder abgerundete Kiste, die größte Masse. + - **Becken:** Kiste oder Schale, kleiner als der Brustkorb. + - **Arme und Beine:** Zylinder, die zum Ende schmaler werden. + - **Gelenke:** Kugeln an Schulter, Ellbogen, Hüfte und Knie. + - **Hände und Füße:** Keile oder flache Kisten. + + Brustkorb und Becken sind die zwei großen Massen. Die Wirbelsäule verbindet sie biegsam, sie können gegeneinander kippen und sich verdrehen. Genau dort steckt die Geste: Kippen Brustkorb und Becken in dieselbe Richtung wie ein Brett, wirkt die Figur steif. + + Muskeln brauchst du dafür nicht. Für kleine Sprites reichen Massen. Raymond Schlitter (Slynyrd) schreibt, dass die menschliche Form in Pixelart oft „stylized and deformed“ wird, rät aber trotzdem: „one should first understand the proper forms in order to make sensible abstractions“ ([Pixelblog 17](https://www.slynyrd.com/blog/2019/5/21/pixelblog-17-human-anatomy)). Anatomie lernst du also nach Bedarf, wenn eine Form nicht stimmt und du wissen willst, warum. Für später gibt es seinen Artikel zur realistischen Anatomie ([Pixelblog 49](https://www.slynyrd.com/blog/2024/3/25/pixelblog-49-realistic-human-anatomy)). + + ## Kopfeinheiten: Proportionen messen + + Proportionen misst man in **Kopfeinheiten**: Wie oft passt die Kopfhöhe in die ganze Figur? Prokos Lektion nach dem System des Anatomen Paul Richer setzt den Durchschnitt fest: „the average person is 7.5 heads tall“. Dazu gehören Landmarken in Kopfeinheiten vom Scheitel ([Human Proportions](https://www.proko.com/course-lesson/human-proportions-average-figure)): + + ```text + Scheitel 0 + Kinn 1 + Brustwarzen 2 + Nabel 3 + Schambein 3,75 (halbe Höhe) + Fußsohle 7,5 + ``` + + Die Lektion sagt auch: „everyone's proportions are slightly different“. Die Zahlen sind ein Messband, kein Gesetz. Slynyrd stellt für Pixelart ein Modell mit 8 Köpfen für idealisierte erwachsene Männer vor und eines mit 6 Köpfen, das „fairly realistic“ und etwas niedlicher wirkt (Pixelblog 17). + + ![Drei Gliederpuppen auf hellem Grund, jede mit waagerechten Hilfslinien im Abstand einer Kopfhöhe. A ist schlank und 7,5 Köpfe hoch. B ist 4 Köpfe hoch, mit größerem Kopf und kürzeren Beinen. C ist 2,5 Köpfe hoch, der Kopf ist breiter als die Schultern, die Beine sind kurz. Alle drei stehen auf derselben Grundlinie](/media/pixelart/figur-proportion/kopfeinheiten@2x.png "7,5 Köpfe (A), 4 Köpfe (B) und 2,5 Köpfe (C, Chibi). Eigenes Schaubild") + + Das Schaubild zeigt drei Puppen mit Hilfslinien je Kopfhöhe. A ist 60 Pixel hoch und 7,5 Köpfe groß, also 8 Pixel pro Kopf. B ist 48 Pixel hoch und 4 Köpfe groß, 12 Pixel pro Kopf. C ist 30 Pixel hoch und 2,5 Köpfe groß, ebenfalls 12 Pixel pro Kopf. B und C haben gleich große Köpfe, aber C hat nur gut halb so viel Körper. Die Rechnung ist immer dieselbe: + + ```text + Pixel pro Kopf = Figurhöhe ÷ Kopfzahl + A 60 ÷ 7,5 = 8 + B 48 ÷ 4 = 12 + C 30 ÷ 2,5 = 12 + ``` + + Mit diesem Werkzeug misst du in der Bahn eine stehende Person mit gestrecktem Arm, wie in [Beobachten, Messen und Referenzen](/pixelart/beobachten). Und du planst damit ein Sprite, bevor du den ersten Pixel setzt. + + ## Gewicht im Stand: Standbein und Schwerpunkt + + Eine Figur steht glaubhaft, wenn ihr Gewicht getragen wird. Proko erklärt das über den Schwerpunkt: Fällst du von der Körpermitte ein Lot auf den Boden, müssen die Füße „on that point or evenly spread around that point“ stehen ([How to Draw Balanced Poses](https://www.proko.com/course-lesson/how-to-draw-balanced-poses)). Steht jemand mit dem meisten Gewicht auf einem Bein, rückt der Schwerpunkt näher an diesen Fuß. Ruht das ganze Gewicht darauf, liegt er „directly above the supporting foot“. + + Das **Standbein** trägt, das **Spielbein** ist entlastet. Daraus folgt eine Gegenbewegung, die Proko beschreibt: Das Standbein drückt seine Beckenseite nach oben, die andere sinkt; der Brustkorb dreht in die Gegenrichtung, und die Schulterlinie kippt entgegengesetzt zur Beckenlinie. In der Kunstgeschichte heißt diese Haltung **Kontrapost**, „a human figure standing with most of its weight on one foot“, dessen Schultern und Arme gegen Hüfte und Beine verdreht sind ([Contrapposto](https://en.wikipedia.org/wiki/Contrapposto)). + + ```text + Standbein links: + Schulterlinie links tiefer, rechts höher + Beckenlinie links höher, rechts tiefer + Lot vom Schwerpunkt -> auf den linken Fuß + ``` + + > [!WARNING] Schultern und Becken kippen gegeneinander + > Kippen beide Linien in dieselbe Richtung, sieht die Figur aus, als falle sie zur Seite. Prüf jede stehende Pose mit dem Stift als Lot: senkrecht vor die Zeichnung halten und schauen, ob die Linie vom Schwerpunkt den tragenden Fuß trifft. + + Im Bus hast du dafür ständig Modelle. Wer an der Haltestange steht, verlagert das Gewicht auf ein Bein. Zeichne nur so, dass es niemanden stört, und nur Haltung, keine Gesichter. + + ## Stilisierte Proportionen für kleine Sprites + + Rechne die realistischen Proportionen auf ein Sprite von 24 Pixeln um: 24 ÷ 7,5 = 3,2 Pixel pro Kopf. In drei Pixeln Kopfhöhe haben zwei Augen und ein Mund keinen Platz. Slynyrd schreibt dazu: „Going for realistic proportions at such a small size will result in a stick figure.“ Für Top-down-Figuren nennt er als Faustregel: „the head usually takes up a third to half of the total sprite“, und „The smaller the sprite the more condensed and abstracted the proportions tend to become.“ ([Pixelblog 22](https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites)) + + Diese Verkürzung hat einen Namen. **Super deformed** oder **Chibi** bezeichnet Figuren, deren Kopf „normally anywhere between one third and one half the character's height“ misst ([Super deformed](https://en.wikipedia.org/wiki/Super_deformed#Appearance_and_media_usage)). Pedro Medeiros (Saint11) beschreibt Chibi-Figuren als „usually short (less than 4 heads)“ ([Cuteness](https://saint11.art/img/pixel-tutorials/Cuteness.gif)). Puppe C im Schaubild ist so eine Figur. Slynyrd begründet die großen Köpfe mit Ausdruck: „Big-headed, or doll-like features tend to read well and capture a lot of expression.“ (Pixelblog 17) + + Der große Kopf hat einen Preis. Derek Yu schreibt über kleine Sprites: „If your character has well defined arms and legs, the head will probably need to be smaller to make room for them.“ ([Pixel Art Tutorial](https://www.derekyu.com/makegames/pixelart.html#small_sprite)) Jeder Pixel, den der Kopf bekommt, fehlt den Gliedern. Größere Sprites haben mehr Spielraum: In Dead Cells ist die Figur im Spiel 50 Pixel hoch ([Game Developer](https://www.gamedeveloper.com/production/art-design-deep-dive-using-a-3d-pipeline-for-2d-animation-in-i-dead-cells-i-)). + + Proportionen sind auch ein Werkzeug, um Figuren zu unterscheiden. Valve trennt die Klassen in Team Fortress 2 in der „Read Hierarchy“ unter anderem über Silhouette, Proportionen und Waffe ([Connecting Visuals to Gameplay at Valve](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Mehr dazu in [Silhouette und Formensprache](/pixelart/silhouette-formsprache). + + > [!PRAXIS] + > Slynyrd plant Top-down-Figuren vom Tile aus: „1 tile wide by 2 tiles tall is one of the most common sprite sizes“, bei 16-Pixel-Tiles also 16 × 32 Pixel. Innerhalb dieser Grenze gibt er Figuren verschiedene Höhen, um Männer, Frauen, Junge und Alte zu unterscheiden (Pixelblog 22). Die Proportion ist dort keine Frage von richtig oder falsch, sondern eine Festlegung für alle Figuren eines Spiels. Schreib sie auf: Spritehöhe, Kopfhöhe in Pixeln, Lage von Hüfte und Schulter. + + > [!INTERVIEW] + > Im Art-Test eines Studios lautet die Aufgabe oft, eine neue Figur passend zu vorhandenen Sprites zu zeichnen. Gute Herangehensweise: Du misst zuerst die vorhandenen Figuren in Kopfeinheiten und Pixeln aus, also Spritehöhe, Kopfhöhe, Lage der Hüfte. Dann baust du die neue Figur mit genau diesen Maßen und erklärst, wo du bewusst abweichst, etwa einen Pixel größer für einen Anführer. Wer „sieht passend aus“ sagt, überzeugt weniger als jemand, der „Kopf 10 von 24 Pixeln, wie die anderen“ sagt. + + ## Gesten nach der Uhr + + Gesten übst du mit Zeitlimit, damit du gar nicht erst ins Detail kommst. Proko beschreibt Sitzungen mit Posen von 30 Sekunden bis 10 Minuten (How to Draw Gesture). [Line of Action](https://line-of-action.com/) und [Quickposes](https://quickposes.com/en) zeigen Fotos mit Timer im Browser. Ein Plan für eine Fahrt: + + ```text + 10 × 30 s nur Handlungslinie + 5 × 60 s Linie, Kopf, Brustkorb, Becken, Standbein + 2 × 2 min ganze Gliederpuppe mit Kopfeinheiten + ``` + + Bei 30 Sekunden zeichnest du nur die Linie, nichts sonst. Das fühlt sich unfertig an und ist genau richtig. Wer in 30 Sekunden eine Hand zeichnet, hat die Pose verpasst. + + ## Häufige Fehler + + - **Körperteile gestapelt.** Kopf auf Rumpf auf Beine, jedes gerade. Erst die Handlungslinie, dann die Teile darauf. + - **Komplizierte Linien.** Eine Handlungslinie mit drei Bögen ist keine. Gerade, C oder S. + - **Brustkorb und Becken parallel.** Die Figur wird zum Brett. Die zwei Massen kippen gegeneinander. + - **Schwerpunkt neben dem Fuß.** Die Figur kippt. Prüf mit dem Lot. + - **Schambein falsch gesetzt.** Die halbe Höhe liegt beim Schambein. Wer den Nabel auf halbe Höhe legt, rückt das Schambein nach unten, und die Beine werden zu kurz. + - **Realistische Proportionen in 24 Pixeln.** Der Kopf schrumpft auf drei Pixel. Kleine Sprites brauchen einen Kopf von einem Drittel bis zur Hälfte. + - **Details vor der Geste.** Finger und Gesicht in einer 30-Sekunden-Skizze kosten die Pose. + + ## Zusammenfassung + + - Die Handlungslinie ist die längste Linie durch eine Pose: gerade, C- oder S-Kurve. + - Die Gliederpuppe besteht aus Grundkörpern. Brustkorb und Becken sind zwei Massen, die gegeneinander kippen. + - Proportionen misst man in Kopfeinheiten. Der Durchschnitt liegt bei 7,5 Köpfen, das Schambein auf halber Höhe. + - Pixel pro Kopf = Figurhöhe ÷ Kopfzahl. + - Im Stand liegt der Schwerpunkt über der Stützfläche. Mit Standbein kippen Schulter- und Beckenlinie gegeneinander. + - Kleine Sprites brauchen große Köpfe: ein Drittel bis die Hälfte der Figur. Jeder Pixel für den Kopf fehlt den Gliedern. + - Gesten übst du mit Timer, 30 Sekunden bis 2 Minuten, ohne Details. +exercises: + - id: handlungslinie-schaubild + type: choice + title: Was die Linie erzählt + prompt: | + Sieh dir das Schaubild an. Welche Aussagen treffen zu? + + ![Zwei Gliederpuppen mit orangefarbener Handlungslinie. A steht steif mit senkrechter, gerader Linie. B lehnt sich schräg nach vorn rechts, die Linie ist eine C-Kurve vom Kopf bis zum hinteren Fuß](/media/pixelart/figur-proportion/handlungslinie@2x.png "Zwei Handlungslinien. Eigenes Schaubild") + options: + - text: In B läuft eine C-Kurve vom Kopf bis zum gestreckten hinteren Fuß. Deshalb liest man die Pose als Schieben. + correct: true + why: Der ganze Körper folgt einer Richtung, das hintere Bein drückt. Die Geste trägt die Aussage, nicht ein Detail. + - text: Die gerade Linie in A passt zu einer Figur, die bewusst still und aufrecht steht. + correct: true + why: Eine Gerade ist erlaubt, wenn sie gewollt ist, etwa bei einer Wache. Sie liest sich als Stillstand. + - text: Eine gute Handlungslinie hat mehrere Bögen, damit die Pose lebendig wirkt. + correct: false + why: Proko begrenzt sie auf Gerade, C- oder S-Kurve. Mehr Bögen machen die Pose unklar. + - text: B ist falsch, weil der Kopf nicht über den Füßen steht. + correct: false + why: Wer schiebt, stützt sich auf das, was er schiebt. Die Neigung ist die Aussage der Pose. + explanation: | + Die Handlungslinie fasst eine Pose in einer Linie zusammen. In A steht sie senkrecht, die Puppe ruht. In B biegt sie sich zu einem C, und alle Teile ordnen sich ihr unter: gestrecktes hinteres Bein, gebeugtes vorderes, Arme nach vorn. So erkennt man die Absicht der Figur, bevor ein einziges Detail gezeichnet ist. + resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + + - id: standbein-pruefen + type: choice + title: Gewicht auf einem Bein + prompt: | + Eine Figur steht mit dem meisten Gewicht auf dem linken Bein. Welche Aussagen stimmen? + options: + - text: Die linke Beckenseite steht höher als die rechte. + correct: true + why: Das Standbein drückt seine Beckenseite nach oben, die Seite des Spielbeins sinkt. + - text: Die Schulterlinie kippt entgegengesetzt zur Beckenlinie, links steht die Schulter also tiefer. + correct: true + why: Der Brustkorb dreht in die Gegenrichtung zum Becken. Daraus entsteht der Kontrapost. + - text: Ein Lot vom Schwerpunkt fällt zwischen die Füße, näher am linken als am rechten. + correct: true + why: Proko beschreibt genau das, wenn das meiste Gewicht links liegt. Der Schwerpunkt liegt dann näher am linken Fuß. Direkt über einem Fuß steht er erst, wenn dieser das ganze Gewicht trägt. + - text: Schultern und Becken kippen in dieselbe Richtung, damit die Figur gerade bleibt. + correct: false + why: Gleich gekippte Linien lassen die Figur seitlich wegkippen. Die Linien laufen gegeneinander. + explanation: | + Gewicht auf einem Bein ist die häufigste Haltung im Stehen. Das Becken folgt dem Standbein nach oben, der Brustkorb gleicht in der Gegenrichtung aus, und der Schwerpunkt wandert über den tragenden Fuß. Proko beschreibt diese Kette im Kapitel über ausbalancierte Posen. Prüf sie mit dem Stift als Lot. + resources: + - title: Proko · How to Draw Balanced Poses + url: https://www.proko.com/course-lesson/how-to-draw-balanced-poses + + - id: puppe-aufbauen + type: order + title: Eine Figur in 60 Sekunden + prompt: | + Du zeichnest eine Pose von Quickposes in 60 Sekunden. Bring die Schritte in die Reihenfolge der Lektion. + lang: prose + lines: | + Die längste Handlungslinie als Gerade, C- oder S-Kurve ziehen. + Den Kopf als Ei an ein Ende der Linie setzen. + Brustkorb und Becken als zwei Massen auf die Linie setzen, gegeneinander gekippt. + Arme und Beine als Zylinder von den Gelenken aus ansetzen. + Mit dem Stift als Lot prüfen, ob der Schwerpunkt über dem tragenden Fuß liegt. + hints: + - Die Prüfung braucht Füße, die schon gezeichnet sind. + explanation: | + Die Linie legt fest, was die Pose aussagt, alles andere hängt sich daran. Kopf, Brustkorb und Becken sind die großen Massen und kommen vor den Gliedern. Die Lotprüfung steht am Ende, weil sie Füße und Rumpf braucht. Liegt der Schwerpunkt daneben, korrigierst du die Linie, nicht die Füße allein. + resources: + - title: Quickposes + url: https://quickposes.com/en + + - id: kopf-in-pixeln + type: output + title: Wie viele Pixel pro Kopf? + prompt: | + Ein Sprite ist 32 Pixel hoch und 4 Köpfe groß. Wie viele Pixel hoch ist der Kopf? Antworte mit der Zahl. + lang: text + code: | + Spritehöhe: 32 px + Kopfzahl: 4 + expected: | + 8 + accept: + - 8 px + - 8 Pixel + explanation: | + Pixel pro Kopf = Figurhöhe ÷ Kopfzahl, also 32 ÷ 4 = 8. Das ist ein Viertel der Figur, kleiner als Slynyrds Faustregel von einem Drittel bis zur Hälfte für kleine Top-down-Sprites. Bei 32 Pixeln Höhe ist das vertretbar, weil Arme und Beine mehr Platz bekommen. Ob dir 8 Pixel für das Gesicht reichen, prüfst du an einer Skizze. + resources: + - title: Slynyrd · Pixelblog 22 · Top Down Character Sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: chibi-spanne + type: output + title: Wie groß darf der Kopf werden? + prompt: | + Ein Sprite ist 24 Pixel hoch. Der Kopf soll nach Slynyrds Faustregel ein Drittel bis die Hälfte der Figur einnehmen. Welche Kopfhöhen in Pixeln kommen in Frage? Antworte mit der kleinsten und größten Zahl, etwa „5 bis 7“. + lang: text + code: | + Spritehöhe: 24 px + Kopf: 1/3 bis 1/2 der Höhe + expected: | + 8 bis 12 + accept: + - 8-12 + - 8 - 12 + - 8–12 + - 8 – 12 + - 8 bis 12 px + - 8 bis 12 Pixel + - zwischen 8 und 12 + - 8 und 12 + explanation: | + 24 ÷ 3 = 8 und 24 ÷ 2 = 12. Ein Kopf von 8 bis 12 Pixeln lässt Platz für Augen, Brauen und Mund. Mit realistischen 7,5 Köpfen wären es nur 3,2 Pixel. Innerhalb der Spanne entscheidest du: Mehr Kopf heißt mehr Ausdruck, aber kürzere Glieder. + resources: + - title: Wikipedia · Super deformed · Appearance and media usage + url: https://en.wikipedia.org/wiki/Super_deformed#Appearance_and_media_usage + + - id: nabel-hoehe + type: output + title: Wo sitzt der Nabel? + prompt: | + Puppe A im Schaubild ist 60 Pixel hoch und 7,5 Köpfe groß. Nach Prokos Landmarken liegt der Nabel 3 Kopfeinheiten unter dem Scheitel. Wie viele Pixel liegt er unter dem Scheitel? Antworte mit der Zahl. + lang: text + code: | + Figurhöhe: 60 px + Kopfzahl: 7,5 + Nabel: 3 Köpfe unter dem Scheitel + expected: | + 24 + accept: + - 24 px + - 24 Pixel + - 24 Pixel tiefer + hints: + - Rechne zuerst aus, wie viele Pixel ein Kopf hat. + explanation: | + 60 ÷ 7,5 = 8 Pixel pro Kopf, 3 × 8 = 24. Der Nabel sitzt also 24 Pixel unter dem Scheitel, das Schambein bei 3,75 × 8 = 30, genau auf halber Höhe. Mit diesen Landmarken legst du die Hilfslinien eines Sprites fest, bevor du die Figur zeichnest. + resources: + - title: Proko · Human Proportions · Average Figure + url: https://www.proko.com/course-lesson/human-proportions-average-figure + + - id: begriffe-figur + type: gap + title: Wörter für die Figur + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Die längste durchgehende Linie durch eine Pose heißt ⟦Handlungslinie⟧. Proportionen misst man in ⟦Kopfeinheiten⟧. Das Bein, das das Gewicht trägt, ist das ⟦Standbein⟧. Eine Figur steht sicher, wenn ihr ⟦Schwerpunkt⟧ über der Stützfläche liegt. Die Haltung, bei der Schultern und Becken gegeneinander kippen, heißt ⟦Kontrapost⟧. Figuren mit einem Kopf von einem Drittel bis zur Hälfte der Körperhöhe nennt man ⟦Chibi⟧. + gaps: + - label: längste Linie + hint: Auf Englisch „line of action“. + accept: ["line of action", "Aktionslinie", "Bewegungslinie"] + - label: Maßeinheit + hint: Die Höhe eines Körperteils dient als Lineal. + accept: ["Kopfhöhen", "Köpfen", "Kopfeinheit", "Kopflängen"] + - label: tragendes Bein + hint: Sein Gegenstück heißt Spielbein. + accept: ["Stützbein"] + - label: Lotpunkt + hint: Physik, der Punkt, an dem man einen Körper balancieren könnte. + accept: ["Körperschwerpunkt", "center of gravity", "Massenmittelpunkt"] + - label: Gegenbewegung + hint: Italienisch „contrapposto“. + accept: ["contrapposto", "Kontrapposto"] + - label: großer Kopf + hint: Japanisch, auch „super deformed“ genannt. + accept: ["super deformed", "SD", "Chibis"] + explanation: | + Handlungslinie und Kopfeinheit sind deine Werkzeuge für Geste und Maß. Standbein, Schwerpunkt und Kontrapost beschreiben, wie ein Körper sein Gewicht trägt. Chibi ist der Name für die gestauchten Proportionen, die kleine Sprites oft brauchen. + resources: + - title: Wikipedia · Contrapposto + url: https://en.wikipedia.org/wiki/Contrapposto + + - id: kurze-beine + type: bug + title: Die Beine sind zu kurz + prompt: | + Lehrbeispiel: Landmarken für eine Figur mit 7,5 Köpfen. Nach dieser Notiz gezeichnet, wirkt der Rumpf viel zu lang und die Beine zu kurz. Finde die Zeile. + lang: prose + code: | + Einheit: Kopfhöhe, Figur 7,5 Köpfe. + Kinn: 1 Kopf unter dem Scheitel. + Brustwarzen: 2 Köpfe unter dem Scheitel. + Nabel: 3 Köpfe unter dem Scheitel. + Schambein: 5 Köpfe unter dem Scheitel. + Fußsohle: 7,5 Köpfe unter dem Scheitel. + lines: [5] + hints: + - Wo liegt die halbe Höhe der Figur? + explanation: | + Das Schambein liegt bei der durchschnittlichen Figur auf halber Höhe, also bei 3,75 Köpfen. Die Notiz setzt es bei 5. Dann bleiben für die Beine nur 2,5 statt 3,75 Köpfe, und der Rumpf wächst um mehr als einen Kopf. Prüf Landmarken immer gegen die halbe Höhe, das ist die verlässlichste. + resources: + - title: Proko · Human Proportions · Average Figure + url: https://www.proko.com/course-lesson/human-proportions-average-figure + + - id: schief-statt-locker + type: bug + title: Die Figur kippt zur Seite + prompt: | + Lehrbeispiel: Posennotiz für eine Figur, die locker auf einem Bein steht. Gezeichnet wirkt sie, als kippe sie zur Seite. Finde die Zeile. + lang: prose + code: | + Gewicht auf dem rechten Bein. + Rechte Beckenseite höher als die linke. + Rechte Schulter höher als die linke. + Schwerpunkt senkrecht über dem rechten Fuß. + Linkes Knie leicht gebeugt, Fuß locker aufgesetzt. + lines: [3] + hints: + - Vergleiche die Neigung von Becken und Schultern. + explanation: | + Becken und Schultern kippen in Zeile 2 und 3 in dieselbe Richtung, die ganze Figur neigt sich wie ein Brett. Im Kontrapost dreht der Brustkorb gegen das Becken: Steht die rechte Beckenseite höher, steht die rechte Schulter tiefer. Diese Gegenbewegung hält den Schwerpunkt über dem Standbein und lässt die Haltung locker wirken. + resources: + - title: Proko · How to Draw Balanced Poses + url: https://www.proko.com/course-lesson/how-to-draw-balanced-poses + + - id: grosse-koepfe + type: explain + title: Warum so viel Kopf? + prompt: | + Lehrbeispiel: zwei Entwürfe für dieselbe Figur in einem Top-down-Spiel. Erkläre in drei bis fünf Sätzen, warum Entwurf 2 für ein Sprite dieser Größe die bessere Grundlage ist und was er dafür aufgibt. + lang: text + code: | + Spritehöhe 24 px + Entwurf 1: 7,5 Köpfe -> Kopf 3 px, + Arme und Beine lang und dünn + Entwurf 2: 2,5 Köpfe -> Kopf 10 px, + Rumpf kurz, Beine 5 px + points: + - Bei 7,5 Köpfen bleiben in 24 Pixeln rund 3 Pixel für den Kopf, zu wenig für Augen und Mund; die Figur wird zum Strichmännchen. + - Kleine Sprites brauchen einen Kopf von einem Drittel bis zur Hälfte der Höhe; 10 von 24 Pixeln liegt in dieser Spanne. + - Große Köpfe lesen sich gut und tragen Ausdruck. + - Der Preis sind kurze Glieder; jeder Pixel für den Kopf fehlt Armen und Beinen. + explanation: | + Realistische Proportionen lassen in 24 Pixeln rund drei Pixel für den Kopf, und Slynyrd warnt, dass so ein Strichmännchen entsteht. Entwurf 2 gibt dem Kopf 10 Pixel, gut 40 Prozent der Höhe, und liegt damit in der Spanne von einem Drittel bis zur Hälfte, die Slynyrd und die Wikipedia für solche Figuren nennen. Ein großer Kopf liest sich gut und trägt Ausdruck. Dafür werden Rumpf und Beine kurz, wie Derek Yu für kleine Sprites beschreibt: Mehr Kopf heißt weniger Platz für deutliche Arme und Beine. + resources: + - title: Slynyrd · Pixelblog 17 · Human Anatomy + url: https://www.slynyrd.com/blog/2019/5/21/pixelblog-17-human-anatomy + + - id: gesten-timer + type: practice + title: Fünfzehn Gesten nach der Uhr + prompt: | + Öffne Line of Action oder Quickposes am Handy und zeichne auf Papier zehn Posen à 30 Sekunden und fünf Posen à 60 Sekunden. Bei 30 Sekunden zeichnest du nur die Handlungslinie, bei 60 Sekunden Linie, Kopf, Brustkorb, Becken und Standbein. + lang: prose + checklist: + - Auf deinen Seiten stehen fünfzehn Skizzen, zehn davon nur als Linie. + - Jede Handlungslinie ist eine Gerade, eine C- oder eine S-Kurve, und du hast sie danebengeschrieben. + - Bei jeder 60-Sekunden-Skizze ist das Standbein markiert, oder du hast notiert, dass beide Beine tragen. + - Keine Skizze enthält Gesicht, Finger oder Kleidungsfalten. + - Du hast den Timer der Seite genutzt und bei jedem Wechsel aufgehört. + hints: + - Such zuerst die Linie vom Kopf bis zum Fuß, der das Gewicht trägt. + explanation: | + Das Zeitlimit nimmt dir die Wahl, ins Detail zu gehen. Die Beschriftung als Gerade, C oder S zwingt dich, die Pose zu entscheiden, statt sie abzuzeichnen. Das markierte Standbein verbindet Geste und Gewicht. Wiederhole die Übung über mehrere Fahrten und vergleiche die ersten mit den letzten Seiten. + resources: + - title: Line of Action + url: https://line-of-action.com/ + + - id: puppe-zwei-proportionen + type: practice + title: Eine Puppe, zwei Proportionen + prompt: | + Zeichne auf Karopapier dieselbe stehende Gliederpuppe zweimal nebeneinander. A realistisch: 30 Kästchen hoch, 7,5 Köpfe. B stilisiert für ein Sprite: 24 Kästchen hoch, Kopf ein Drittel bis die Hälfte. Zieh zuerst die Hilfslinien für jede Kopfhöhe und die Landmarken. + lang: prose + starter: | + A – Kästchen pro Kopf: + A – Nabel in Reihe: + A – Schambein in Reihe: + B – Kopfhöhe in Kästchen: + B – was weggefallen ist: + checklist: + - A hat Hilfslinien alle 4 Kästchen, und das Schambein liegt in Reihe 15. + - Der Kopf von B ist 8 bis 12 Kästchen hoch. + - Bei beiden stehen die Füße auf derselben Grundlinie, und ein Lot vom Schwerpunkt trifft die Stützfläche. + - Brustkorb und Becken sind bei beiden als eigene Massen erkennbar. + - Du hast notiert, welche Teile in B kürzer oder weggefallen sind. + hints: + - 30 Kästchen ÷ 7,5 Köpfe ergibt die Höhe eines Kopfes. + explanation: | + A übt die Landmarken, B die Entscheidung für ein kleines Sprite. Weil beide nebeneinanderstehen, siehst du, wo die Pixel hingehen: in den Kopf, weg von Rumpf und Beinen. Die Notiz zu dem, was wegfällt, ist dieselbe Arbeit, die du später in [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen) machst. + resources: + - title: Slynyrd · Pixelblog 22 · Top Down Character Sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: standbein-im-bus + type: practice + title: Wer steht auf welchem Bein? + prompt: | + Zeichne in Bus oder Bahn fünf stehende Menschen als Gliederpuppe, je höchstens eine Minute, unauffällig und ohne Gesichter. Markiere bei jeder Skizze Standbein, Schulterlinie, Beckenlinie und das Lot vom Schwerpunkt. + lang: prose + checklist: + - Es gibt fünf Skizzen, jede in höchstens einer Minute gezeichnet. + - Bei jeder ist das Standbein markiert, oder du hast notiert, dass beide Beine tragen. + - Schulter- und Beckenlinie sind eingezeichnet, und daneben steht, ob sie gegeneinander oder gleich kippen. + - Bei jeder Skizze fällt ein senkrechtes Lot vom Schwerpunkt auf den Boden, und du hast notiert, welchen Fuß es trifft. + - Keine Skizze zeigt ein Gesicht oder ein Merkmal, an dem man die Person erkennen könnte. + hints: + - Menschen an der Haltestange tragen oft mit einem Bein und lehnen sich mit dem Arm an. Die Stange ist dann eine zweite Stütze. + explanation: | + Echte Menschen bestätigen oder widerlegen die Regeln der Lektion. Wer sich festhält, hat eine dritte Stütze, und der Schwerpunkt darf weiter vom Fuß weg liegen. Notier solche Fälle, sie sind keine Fehler. Der Verzicht auf Gesichter schützt die Menschen, die du zeichnest, und lenkt deinen Blick auf die Haltung. + resources: + - title: Proko · How to Draw Balanced Poses + url: https://www.proko.com/course-lesson/how-to-draw-balanced-poses diff --git a/content/pixelart/modules/grundkoerper-raum.yaml b/content/pixelart/modules/grundkoerper-raum.yaml new file mode 100644 index 00000000..4d2a41d5 --- /dev/null +++ b/content/pixelart/modules/grundkoerper-raum.yaml @@ -0,0 +1,438 @@ +id: grundkoerper-raum +title: Grundkörper, Perspektive und Draufsicht +level: 1 +minutes: 110 +summary: Wie du Gegenstände aus Würfel, Zylinder, Kugel und Kegel aufbaust, was Horizont, Fluchtpunkte, Verkürzung und Ellipsen bedeuten und warum Top-down-Spiele auf Fluchtpunkte verzichten und Oberseite und Front zugleich zeigen. +place: unterwegs +goals: + - Du zerlegst Gegenstände in Grundkörper und nutzt Überschneidung und Lage im Bild als Tiefenhinweise. + - Du erklärst Horizont, Fluchtpunkt und Verkürzung und zeichnest eine Kiste in Ein- und Zweipunktperspektive. + - Du zeichnest Ellipsen passend zur Augenhöhe und zur Achse eines Zylinders. + - Du unterscheidest reine Draufsicht, 3/4-Draufsicht und Seitenansicht und erkennst, welche ein Spiel verwendet. + - Du begründest, warum Top-down-Spiele mit Parallelprojektion arbeiten, und hältst eine Projektion über mehrere Objekte durch. +resources: + - title: Drawabox · Lesson 1 · Lines, Ellipses and Boxes + url: https://drawabox.com/lesson/1 + - title: Slynyrd · Pixelblog 3 · Graphical Projections + url: https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1 + - title: Wikipedia · 2.5D · Axonometric and oblique projection + url: https://en.wikipedia.org/wiki/2.5D#Axonometric_and_oblique_projection + - title: Krita Docs · Painting with Assistants · Logic of the vanishing point + url: https://docs.krita.org/en/user_manual/painting_with_assistants.html#logic-of-the-vanishing-point +lesson: | + Zeichne eine Kiste. Wahrscheinlich entsteht ein Quadrat mit zwei schrägen Flächen oben und rechts, wie aus dem Mathebuch. Jetzt stell dir dieselbe Kiste in einem Top-down-Spiel vor. Die Kamera schaut schräg von oben, neben der Kiste stehen ein Fass und eine Mauer. Welche Seiten siehst du? Wie hoch ist die Oberseite im Verhältnis zur Front? Laufen die Kanten irgendwo zusammen? Wer darauf keine Antwort hat, zeichnet eine Kiste, ein Fass und eine Mauer, die nicht zueinander passen, obwohl jedes für sich ordentlich aussieht. + + Dieses Modul übt räumliches Denken: Gegenstände aus Grundkörpern bauen, Perspektive verstehen und die Projektionen kennen, die Spiele verwenden. Alles geht mit Stift und Papier, Karopapier hilft bei den Projektionen besonders. + + ## Grundkörper: Würfel, Zylinder, Kugel und Kegel + + Fast jeder Gegenstand lässt sich aus vier Grundkörpern zusammensetzen: Würfel oder Quader, Zylinder, Kugel und Kegel. Eine Kiste ist ein Quader, ein Fass ein Zylinder mit Bauch, ein Baum eine Kugel auf einem Zylinder, eine Laterne ein Zylinder mit Kegel als Dach. Drawabox übt, wie solche Körper sich durchdringen ([Form Intersections](https://drawabox.com/lesson/2/formintersections)), und baut später ganze Tiere aus Grundformen auf ([Lesson 5](https://drawabox.com/lesson/5)). + + ![Drei Grundkörper in 3/4-Draufsicht auf hellem Grund, Licht von oben links, jeder mit flachem Schatten auf dem Boden. A ist ein Würfel mit heller Oberseite und mittelgrauer Front. B ist ein Zylinder mit weißer, elliptischer Oberseite und einem Mantel, der von links hell nach rechts dunkel wird. C ist eine Kugel mit weißem Glanzfeld oben links und dunkler Zone unten rechts](/media/pixelart/grundkoerper-raum/grundkoerper@2x.png "Würfel (A), Zylinder (B) und Kugel (C) in 3/4-Draufsicht. Eigenes Schaubild") + + Jeder Körper nimmt Licht anders an. Der Würfel A hat ebene Flächen mit Kanten: Oberseite hell, Front mittel, der Wechsel ist hart. Der Zylinder B hat eine flache, helle Oberseite und einen runden Mantel, auf dem das Licht von links nach rechts in Stufen abnimmt. Die Kugel C hat keine Kante, das hellste Feld liegt oben links, das dunkelste unten rechts. Alle drei werfen einen Schatten auf den Boden, ohne ihn würden sie schweben. Wie Licht auf solchen Körpern genau verläuft, zeigt [Licht, Schatten und Tonwerte](/pixelart/licht-werte). + + Der Nutzen: Du lernst die Regeln von vier Körpern einmal und wendest sie auf alles an. Ein Fass hat dieselben Ellipsen wie ein Zylinder, ein Kopf dieselben Lichtzonen wie eine Kugel. + + ### Tiefe ohne Fluchtpunkte + + Drei Hinweise sagen dem Auge, was vorn und was hinten ist: + + - **Überschneidung.** Was vorn steht, verdeckt, was dahinter steht. Der stärkste Hinweis, er wirkt in jeder Projektion. + - **Größe.** In der Perspektive erscheint Entferntes kleiner. In den Projektionen der meisten Pixelspiele gilt das nicht, dazu unten mehr. + - **Lage im Bild.** In der Draufsicht steht weiter unten, was näher am Betrachter ist. Es darf verdecken, was weiter oben steht. + + ## Perspektive: Horizont, Fluchtpunkte und Verkürzung + + Der **Horizont** ist eine waagerechte Linie auf deiner Augenhöhe. Liegt eine Kiste darunter, siehst du ihre Oberseite. Liegt sie darüber, etwa ein Regal über deinem Kopf, siehst du die Unterseite. + + Ein **Fluchtpunkt** ist laut Krita-Doku „the point where any two parallel lines meet“ ([Logic of the vanishing point](https://docs.krita.org/en/user_manual/painting_with_assistants.html#logic-of-the-vanishing-point)). Kanten, die in Wirklichkeit parallel sind und von dir weglaufen, laufen im Bild auf einen Punkt zu. Bei waagerechten Kanten liegt dieser Punkt auf dem Horizont. + + - **Einpunktperspektive.** Die Front der Kiste steht dir gerade gegenüber. Nur die Kanten in die Tiefe laufen zu einem Fluchtpunkt. + - **Zweipunktperspektive.** Die Kiste ist gedreht. Ihre Kanten laufen nach links und nach rechts zu je einem Fluchtpunkt, die Senkrechten bleiben senkrecht. Krita baut sie aus „2 vanishing point and 1 vertical parallel ruler“ ([Linear Perspective](https://docs.krita.org/en/user_manual/painting_with_assistants.html#linear-perspective)). + + **Verkürzung** heißt: Eine Strecke, die von dir weg zeigt, erscheint kürzer als dieselbe Strecke quer vor dir. Die Oberseite einer Kiste unter dem Horizont ist deshalb im Bild flacher als ihre Front, obwohl beide gleich groß sind. + + ```text + Horizont = deine Augenhöhe + unter Horizont -> Oberseite sichtbar + Senkrechte bleiben senkrecht (1 und 2 Fluchtpunkte) + weg von dir -> kürzer, Kanten laufen zusammen + ``` + + Kisten sind die Grundübung für all das. Drawabox beginnt damit in Lektion 1 ([Boxes](https://drawabox.com/lesson/1/6)) und hat dafür eine eigene Fleißaufgabe, die [250 Box Challenge](https://drawabox.com/lesson/250boxes). + + ## Ellipsen und Linien aus der Schulter + + Ein Kreis, den du schräg siehst, wird zur **Ellipse**. Zwei Regeln reichen für den Anfang: + + - **Augenhöhe.** Je weiter eine Kreisfläche über oder unter deiner Augenhöhe liegt, desto runder erscheint die Ellipse. Auf Augenhöhe wird sie zur Linie. Bei einem Becher auf dem Tisch ist die obere Öffnung deshalb flacher als der Boden. + - **Achse.** Die kurze Achse der Ellipse zeigt in Richtung der Mittelachse des Zylinders. Steht der Zylinder, liegt die Ellipse waagerecht. Kippt er, kippt sie mit. + + Den Boden eines stehenden Zylinders siehst du nur zur Hälfte: Die vordere Kante ist ein Bogen. In der Parallelprojektion der Spiele hat er dieselbe Krümmung wie die Oberseite, in echter Perspektive ist er runder als die Öffnung. Eine gerade Unterkante macht aus dem Fass ein Brett. + + Für saubere Linien und Ellipsen gibt es zwei Techniken aus Drawabox. **Ghosting:** „Ghosting is the act of going through the motion of drawing a mark, but without actually touching the page.“ ([Ghosted Lines](https://drawabox.com/lesson/1/ghostedlines)) Du übst die Bewegung zwei-, dreimal in der Luft und setzt dann den Strich in einem Zug. Und **aus der Schulter zeichnen:** Lange Linien werden aus Ellbogen und Schulter gerader als aus dem Handgelenk, das in einem Bogen schwingt ([Lesson 1](https://drawabox.com/lesson/1)). Ellipsen übst du mit der Ellipsen-Lektion ([Ellipses](https://drawabox.com/lesson/1/5)). + + > [!TIP] Im Bus + > Die Fahrt wackelt, und der Arm hat wenig Platz. Zeichne klein, ghoste jede Linie und setz sie nach einer ruhigen Strecke, etwa an der Ampel. Kisten von zwei Zentimetern reichen, dann passen auch die Fluchtpunkte noch aufs Blatt. + + ## Spielprojektionen: Draufsicht, 3/4-Draufsicht, Seitenansicht + + Spiele zeigen ihre Welt meist nicht in Fluchtpunktperspektive, sondern in einer **Parallelprojektion**: Parallele Kanten bleiben im Bild parallel. Eine Unterform ist die **schiefe Projektion** (oblique projection). Die Wikipedia schreibt, dass Videospiele, besonders vor der Zeit der 3D-Spiele, oft eine Form davon verwenden ([Oblique projection](https://en.wikipedia.org/wiki/Oblique_projection#Examples)). + + ![Drei Quadrate mit dunkler Kontur, jedes zeigt denselben Würfel aus einer anderen Ansicht. A ist ganz hellgrau: nur die Oberseite. B ist oben etwas mehr als zur Hälfte hellgrau und unten mittelgrau: Oberseite und Front. C ist ganz mittelgrau: nur die Front](/media/pixelart/grundkoerper-raum/draufsicht-projektionen@2x.png "Reine Draufsicht (A), 3/4-Draufsicht (B) und Seitenansicht (C). Eigenes Schaubild") + + Das Schaubild zeigt denselben Würfel dreimal, jedes Feld 14 Pixel hoch mit einem Pixel Kontur oben und unten: + + - **A, reine Draufsicht:** nur die Oberseite, 12 Reihen. Von einer Figur siehst du hier laut Wikipedia nur „a head and shoulders seen from above“. + - **B, 3/4-Draufsicht:** Oberseite 7 Reihen, Front 5 Reihen. Raymond Schlitter (Slynyrd) beschreibt sie so: „as if you are viewing the house from 45 degrees above … you see about 3/4 of both the roof and facade.“ ([Pixelblog 3](https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1)) + - **C, Seitenansicht:** nur die Front, 12 Reihen. Typisch für Jump-'n'-Runs. + + Die Wikipedia fasst den Vorteil der schrägen Ansichten so: Sie verbinden „the visibility and mobility of a top-down game with the character recognizability of a side-scrolling game“ ([2.5D](https://en.wikipedia.org/wiki/2.5D#Axonometric_and_oblique_projection)). Du siehst den Boden, auf dem du läufst, und erkennst Figuren und Gegenstände an ihrer Front. Auch Slynyrds Bodentiles sind in dieser Projektion gezeichnet; als Größe nennt er „16x16px is probably the most common size“ ([Pixelblog 20](https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles)). + + ## Warum Top-down-Spiele schummeln + + Echte Perspektive würde in einem Top-down-Spiel Probleme machen. Ein Haus links am Bildrand hätte andere Fluchtlinien als dasselbe Haus in der Mitte. Jedes Tile müsste je nach Lage auf dem Bildschirm anders verzerrt sein, und beim Scrollen würden sich alle Formen ändern. In der Parallelprojektion sieht jede Kopie eines Objekts überall gleich aus. Deshalb lassen sich Tiles wiederholen und Sprites verschieben. + + Dazu kommt eine bewusste Unschärfe. Slynyrd gibt zu, dass echte Perspektive das Dach flacher machen und die Wände nach außen neigen würde. Er bevorzugt saubere Winkel und schreibt, in Pixelart gehe Einheitlichkeit vor Realismus: „uniformity takes priority over realism“ (Pixelblog 3). Figuren zeichnen viele Spiele fast in Vorderansicht, auch wenn die Kamera schräg von oben schaut, damit man sie erkennt. Das hat Folgen: Der Kopf steht im Bild über den Füßen. Was das für Trefferflächen heißt, steht in [Reichweite, Hitboxen und Hurtboxen](/combat/hitboxen). + + > [!MERKE] + > Wähl eine Projektion und halte sie durch. Ein Objekt in Zweipunktperspektive neben Tiles in 3/4-Draufsicht wirkt schief, egal wie gut es gezeichnet ist. + + Für dich hat die Parallelprojektion einen praktischen Vorteil: Sie passt auf Karopapier. Senkrechte bleiben auf den Rasterlinien, und du brauchst keine Fluchtpunkte außerhalb des Blatts. Legst du einmal fest, wie stark Oberseiten verkürzt werden, etwa auf die halbe Tiefe, gilt das für jede Kiste, jedes Fass und jede Mauer. + + > [!PRAXIS] + > Slynyrd zeichnet seine Projektionen nicht nach den Regeln der Perspektive, sondern nach festen Regeln für alle Objekte: gleiche Winkel, gleiche Verkürzung, Licht aus derselben Ecke, wobei er eine obere Ecke am natürlichsten findet. Projektionen sollen nach ihm „in most cases“ nicht in einer Szene gemischt werden, und schief gewählte Regeln können gut aussehen, wenn alle Elemente ihnen folgen (Pixelblog 3). Bevor du ein Objekt für dein Spiel zeichnest, schreib deshalb die Regel auf: Verkürzung der Oberseite, Lichtrichtung, Tilegröße. + + ## Werkzeuge: Papier, Karos und Krita + + Auf Papier genügt der Heftrand als Bezug für die Waagerechte. Für Übungen in Fluchtpunktperspektive zeichnest du klein, damit beide Fluchtpunkte auf die Seite passen. Für Spielprojektionen nimmst du Karopapier, ein Kästchen ist ein Pixel. + + Am PC kann Krita Perspektive vorgeben. Der Perspektiv-Assistent legt ein Raster aus vier Eckpunkten an, der Fluchtpunkt-Assistent einen einzelnen Punkt, der Zweipunkt-Assistent zwei Fluchtpunkte und einen Sehmittelpunkt ([Perspective](https://docs.krita.org/en/user_manual/painting_with_assistants.html#perspective), [2 Point Perspective](https://docs.krita.org/en/user_manual/painting_with_assistants.html#point-perspective)). Mit „Snap to Assistants“ in den Werkzeugoptionen des Freihandpinsels rastet der Strich an den Hilfslinien ein. Für dieses Modul brauchst du das nicht; es hilft, wenn du später Hintergründe in Perspektive skizzierst. + + > [!INTERVIEW] + > Pine Creek Games nannte „good knowledge of perspective“ als Muss für eine 2D-Artist-Stelle ([Work With Indies](https://workwithindies.com/careers/pine-creek-games-2d-artist)). In einem Art-Test könnte die Aufgabe lauten: „Zeichne eine Truhe, die zu diesen Tiles passt.“ Gute Antwort: Du liest zuerst die Projektion der vorhandenen Assets ab, also das Verhältnis von Oberseite zu Front, die Lichtrichtung und die Tilegröße. Dann baust du die Truhe als Quader mit Zylinderdeckel in genau dieser Projektion, ohne Fluchtpunkte, Senkrechte senkrecht. Zum Schluss legst du sie neben ein vorhandenes Asset und vergleichst die Verkürzung. + + ## Häufige Fehler + + - **Projektionen gemischt.** Ein Haus in Zweipunktperspektive zwischen Tiles in 3/4-Draufsicht. Prüf jedes Objekt gegen die Regel der Szene. + - **Gerade Unterkante am Zylinder.** Der Boden eines Fasses ist ein Bogen, in der Parallelprojektion mit derselben Krümmung wie die Oberseite. + - **Ellipse mit Spitzen.** Eine Ellipse hat an den Enden runde Bögen, keine Ecken wie ein Auge. + - **Gekippte Ellipse am stehenden Zylinder.** Die kurze Achse zeigt entlang der Mittelachse. + - **Senkrechte zum Fluchtpunkt gezogen.** In Ein- und Zweipunktperspektive bleiben Senkrechte senkrecht. + - **Verschiedene Verkürzung.** Eine Kiste mit halber, ein Fass mit voller Tiefe passen nicht nebeneinander. + - **Linien aus dem Handgelenk.** Lange Linien biegen sich. Ghoste und zeichne aus Ellbogen und Schulter. + + ## Zusammenfassung + + - Würfel, Zylinder, Kugel und Kegel sind die Bausteine fast jedes Gegenstands. + - Überschneidung wirkt in jeder Projektion. Größe als Tiefenhinweis gilt nur in der Perspektive. + - Der Horizont liegt auf Augenhöhe. Parallele Kanten, die von dir weglaufen, treffen sich in einem Fluchtpunkt. + - Ellipsen werden runder, je weiter sie von der Augenhöhe entfernt sind. Ihre kurze Achse zeigt entlang der Zylinderachse. + - Ghosting und Linien aus der Schulter machen Striche gerade und sicher. + - Top-down-Pixelspiele nutzen meist eine 3/4-Draufsicht als Parallelprojektion: Oberseite und Front zugleich, keine Fluchtpunkte. + - Eine Projektion pro Szene, eine feste Verkürzung für alle Objekte. +exercises: + - id: projektion-erkennen + type: choice + title: Welche Ansicht für ein Top-down-Spiel? + prompt: | + Welches Feld zeigt die Projektion, die die meisten Top-down-Pixelspiele verwenden? + + ![Drei Quadrate mit demselben Würfel. A ganz hellgrau, nur Oberseite. B oben hellgrau, unten mittelgrau, Oberseite und Front. C ganz mittelgrau, nur Front](/media/pixelart/grundkoerper-raum/draufsicht-projektionen@2x.png "Drei Ansichten desselben Würfels. Eigenes Schaubild") + options: + - text: B, weil Oberseite und Front zugleich zu sehen sind. + correct: true + why: Die 3/4-Draufsicht zeigt den Boden zum Laufen und die Front zum Erkennen. Slynyrd beschreibt sie als Blick aus 45° von oben. + - text: A, weil die Kamera in Top-down-Spielen senkrecht nach unten schaut. + correct: false + why: Reine Draufsicht gibt es, aber Figuren sind dort nur Kopf und Schultern. Die meisten Pixelspiele kippen die Ansicht, damit man Figuren erkennt. + - text: C, weil Figuren von der Seite am besten zu erkennen sind. + correct: false + why: Die Seitenansicht zeigt keinen Boden, auf dem man in alle Richtungen läuft. Sie gehört zu Jump-'n'-Runs. + - text: Keines, Top-down-Spiele brauchen Zweipunktperspektive. + correct: false + why: Mit Fluchtpunkten sähe jedes Tile je nach Lage anders aus. Spiele nutzen deshalb Parallelprojektionen. + explanation: | + Die 3/4-Draufsicht ist ein Kompromiss. Sie zeigt genug vom Boden, um Wege und Hindernisse zu lesen, und genug von der Front, um Figuren und Gegenstände zu erkennen. Wikipedia nennt das die Verbindung von „visibility and mobility“ der Draufsicht mit der „character recognizability“ der Seitenansicht. + resources: + - title: Wikipedia · 2.5D · Axonometric and oblique projection + url: https://en.wikipedia.org/wiki/2.5D#Axonometric_and_oblique_projection + + - id: tiefenhinweise + type: choice + title: Was zeigt Tiefe in der 3/4-Draufsicht? + prompt: | + Du zeichnest eine Szene in 3/4-Draufsicht als Parallelprojektion. Welche Tiefenhinweise funktionieren dort? + options: + - text: Überschneidung – eine Kiste verdeckt teilweise das Fass dahinter. + correct: true + why: Überschneidung wirkt in jeder Projektion, auch ohne Fluchtpunkte. + - text: Lage im Bild – was weiter unten steht, ist näher und darf verdecken, was weiter oben steht. + correct: true + why: In der Draufsicht entspricht „unten im Bild“ dem Vordergrund. + - text: Größe – entfernte Kisten werden kleiner gezeichnet. + correct: false + why: In der Parallelprojektion haben gleiche Objekte überall dieselbe Größe. Sonst ließen sie sich nicht wiederholen. + - text: Fluchtlinien – die Kanten aller Kisten laufen auf einen Punkt zu. + correct: false + why: Parallele Kanten bleiben parallel. Fluchtlinien gehören zur Perspektive, nicht zur Spielprojektion. + explanation: | + Ohne Perspektive fallen Größe und Fluchtlinien als Tiefenhinweise weg. Was bleibt, sind Überschneidung und Lage im Bild, und beide reichen, weil der Spieler die Projektion nach wenigen Sekunden gelernt hat. Licht und Schatten auf dem Boden helfen zusätzlich, Objekte auf den Boden zu stellen. + resources: + - title: Wikipedia · Oblique projection + url: https://en.wikipedia.org/wiki/Oblique_projection + + - id: kiste-zweipunkt + type: order + title: Eine Kiste in Zweipunktperspektive + prompt: | + Bring die Schritte für eine Kiste unter dem Horizont in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Den Horizont als waagerechte Linie ziehen. + Zwei Fluchtpunkte weit auseinander auf den Horizont setzen. + Die vordere senkrechte Kante unterhalb des Horizonts zeichnen. + Von beiden Enden dieser Kante Linien zu beiden Fluchtpunkten ziehen. + Die beiden hinteren senkrechten Kanten dort setzen, wo die Seiten enden sollen. + Von deren oberen Enden Linien zum jeweils anderen Fluchtpunkt ziehen, bis sie sich kreuzen. + alternatives: + - [3, 1, 2, 4, 5, 6] + - [1, 3, 2, 4, 5, 6] + hints: + - Die Fluchtpunkte liegen auf dem Horizont, also muss der zuerst da sein. + explanation: | + Horizont und Fluchtpunkte legen den Raum fest, die vordere Kante setzt die Kiste hinein. Ob du die Kante vor oder nach dem Horizont zeichnest, ist gleich, die Fluchtpunkte brauchen aber den Horizont. Die Linien zu den Fluchtpunkten bilden die Seiten, die hinteren Senkrechten begrenzen sie. Die letzte Kreuzung schließt die Oberseite, die du siehst, weil die Kiste unter deiner Augenhöhe liegt. + resources: + - title: Krita Docs · Painting with Assistants · Linear Perspective + url: https://docs.krita.org/en/user_manual/painting_with_assistants.html#linear-perspective + + - id: kistenhoehe + type: output + title: Wie hoch wird das Sprite? + prompt: | + Eine Kiste in 3/4-Draufsicht wie im Schaubild B. Wie viele Pixel hoch ist das ganze Sprite? Antworte mit der Zahl. + lang: text + code: | + Kontur oben: 1 Reihe + Oberseite: 7 Reihen + Front: 5 Reihen + Kontur unten: 1 Reihe + expected: | + 14 + accept: + - 14 px + - 14 Pixel + explanation: | + 1 + 7 + 5 + 1 = 14. In der 3/4-Draufsicht setzt sich die Höhe eines Sprites aus Oberseite und Front zusammen, nicht aus der echten Höhe des Gegenstands. Deshalb ist eine Kiste im Spiel höher als breit, wenn ihre Oberseite viel Platz bekommt. Leg diese Aufteilung einmal fest und nutze sie für alle Objekte. + resources: + - title: Slynyrd · Pixelblog 3 · Graphical Projections + url: https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1 + + - id: ellipse-verkuerzt + type: output + title: Ein Fass neben der Kiste + prompt: | + In deiner Szene sind Oberseiten auf die halbe Tiefe verkürzt. Ein Fass mit runder Oberseite soll so breit werden wie die Kiste. Wie viele Pixel hoch wird die Ellipse der Oberseite? Antworte mit der Zahl. + lang: text + code: | + Kiste: 16 px breit, Oberseite 8 Reihen tief + Regel: Oberseiten auf die halbe Tiefe verkürzt + Fass: Durchmesser 16 px + expected: | + 8 + accept: + - 8 px + - 8 Pixel + hints: + - Ein Kreis ist in alle Richtungen gleich breit. Welche Richtung wird verkürzt? + explanation: | + Der Kreis ist 16 Pixel breit und 16 Pixel tief. Die Breite bleibt, die Tiefe wird wie bei der Kiste halbiert: 16 × 0,5 = 8. Die Ellipse ist also 16 × 8 Pixel groß. Gibst du dem Fass eine andere Verkürzung als der Kiste, sieht es aus, als stünde es auf einem anders geneigten Boden. + resources: + - title: Drawabox · Lesson 1 · Ellipses + url: https://drawabox.com/lesson/1/5 + + - id: fluchtpunkte-zaehlen + type: output + title: Wo laufen die Kanten zusammen? + prompt: | + Zehn gleiche Kisten stehen in 3/4-Draufsicht nebeneinander, gezeichnet wie im Schaubild B. Du verlängerst die Kanten, die in die Tiefe laufen, also die seitlichen Kanten der Oberseiten. In wie vielen Punkten treffen sie sich? Antworte mit einer Zahl. + lang: text + code: | + Projektion: 3/4-Draufsicht, Parallelprojektion + Kisten: 10, alle gleich gezeichnet + verlängert: Seitenkanten der Oberseiten + expected: | + 0 + accept: + - null + - keinem + - in keinem + - keine + explanation: | + In einer Parallelprojektion bleiben parallele Kanten parallel und treffen sich nie. Die zehn Kisten sind identisch, egal wo sie stehen. Genau das macht Tiles und wiederholte Objekte möglich. In Perspektive liefen genau diese Tiefenkanten auf einen Fluchtpunkt zu, und jede Kiste sähe je nach Lage im Bild anders aus. + resources: + - title: Wikipedia · Oblique projection + url: https://en.wikipedia.org/wiki/Oblique_projection + + - id: begriffe-raum + type: gap + title: Wörter für den Raum + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Die waagerechte Linie auf deiner Augenhöhe heißt ⟦Horizont⟧. Parallele Kanten, die von dir weglaufen, treffen sich im ⟦Fluchtpunkt⟧. Dass eine Strecke kürzer erscheint, wenn sie von dir weg zeigt, nennt man ⟦Verkürzung⟧. Ein Kreis, den du schräg siehst, erscheint als ⟦Ellipse⟧. Die Bewegung eines Strichs in der Luft zu üben, bevor du ihn setzt, heißt ⟦Ghosting⟧. Eine Projektion, in der parallele Kanten parallel bleiben, heißt ⟦Parallelprojektion⟧. + gaps: + - label: Augenhöhe + hint: Am Meer siehst du ihn als Linie zwischen Wasser und Himmel. + accept: ["Horizontlinie", "Augenhöhe", "Horizontale"] + - label: Treffpunkt + hint: Zusammengesetzt aus „Flucht“ und einem kleinen Wort. + accept: ["vanishing point", "Fluchtpunkten"] + - label: kürzer erscheinen + hint: Auf Englisch „foreshortening“. + accept: ["foreshortening", "perspektivische Verkürzung"] + - label: schräger Kreis + hint: Eine Planetenbahn hat diese Form. + accept: ["Ellipsen", "Oval"] + - label: Luftübung + hint: Englisch, darin steckt „ghost“. + accept: ["ghosten", "Luftstrich"] + - label: ohne Fluchtpunkte + hint: Zusammengesetzt aus „parallel“ und „Projektion“. + accept: ["Parallelperspektive", "schiefe Projektion", "oblique projection", "axonometrische Projektion"] + explanation: | + Horizont, Fluchtpunkt und Verkürzung beschreiben Perspektive, die Ellipse ist ihr Sonderfall für Kreise. Ghosting ist die Technik, mit der du diese Linien sicher setzt. Die Parallelprojektion ist das, was Spiele stattdessen verwenden. Wer beide Seiten kennt, kann begründen, warum ein Spiel auf Fluchtpunkte verzichtet. + resources: + - title: Drawabox · Lesson 1 · Ghosted Lines + url: https://drawabox.com/lesson/1/ghostedlines + + - id: fass-ohne-boden + type: bug + title: Das Fass steckt im Boden + prompt: | + Ein Fass in 3/4-Draufsicht, `#` ist Kontur, `-` die helle Oberseite, `+` der Mantel. Es wirkt unten wie abgeschnitten, als stecke es im Boden oder sei eine Kiste. Finde die Zeile. + lang: text + code: | + . . # # # # # # . . + . # - - - - - - # . + # - - - - - - - - # + # + - - - - - - + # + # + + + + + + + + # + # + + + + + + + + # + # + + + + + + + + # + # + + + + + + + + # + # # # # # # # # # # + lines: [9] + hints: + - Vergleiche die oberste Zeile mit der untersten. + explanation: | + Die Unterkante ist gerade, die Oberkante ein Bogen. Der Boden eines Zylinders ist aber dieselbe Ellipse wie die Oberseite, von ihr siehst du nur die vordere Hälfte. Richtig wäre ein Bogen über zwei Zeilen, etwa `. # + + + + + + # .` und darunter `. . # # # # # # . .`, gespiegelt zur Oberkante. Erst dann steht das Fass auf dem Boden. + resources: + - title: Drawabox · Lesson 1 · Ellipses + url: https://drawabox.com/lesson/1/5 + + - id: gemischte-projektion + type: bug + title: Ein Haus passt nicht ins Bild + prompt: | + Lehrbeispiel: Asset-Liste für eine Dorfszene. Im Mockup wirkt ein Objekt, als stünde es schief zur übrigen Szene, und beim Scrollen springt es ins Auge. Finde die Zeile. + lang: prose + code: | + Kiste: 3/4-Draufsicht, Oberseite und Front, Senkrechte senkrecht. + Fass: 3/4-Draufsicht, Ellipse oben, Mantel darunter. + Brunnen: 3/4-Draufsicht, Ellipse oben, Mauerring darunter. + Haus: Zweipunktperspektive, Wände laufen zu zwei Fluchtpunkten. + Zaun: 3/4-Draufsicht, Latten senkrecht, Oberkanten sichtbar. + lines: [4] + explanation: | + Alle Objekte folgen der 3/4-Draufsicht ohne Fluchtpunkte, nur das Haus nicht. Seine Wände laufen zusammen, und beim Scrollen bleibt diese Verzerrung stehen, während sich die Kamera bewegt. Slynyrd rät, Projektionen in einer Szene nicht zu mischen. Zeichne das Haus mit derselben Verkürzung wie die Kiste: Dach als Oberseite, Fassade als Front. + resources: + - title: Slynyrd · Pixelblog 3 · Graphical Projections + url: https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1 + + - id: warum-schummeln + type: explain + title: Ein Dorf ohne Fluchtpunkte + prompt: | + Lehrbeispiel: Ein Top-down-Pixelspiel zeigt ein Dorf. Erkläre in drei bis fünf Sätzen, warum das Spiel keine echte Perspektive verwendet und was es durch die gewählte Ansicht gewinnt. + lang: prose + code: | + Häuser zeigen Dach und Fassade zugleich. Alle Senkrechten sind senkrecht, nichts läuft zusammen. Der Boden besteht aus Tiles von 16 × 16 Pixeln, die sich wiederholen. Ein Brunnen sieht links am Bildrand genauso aus wie in der Mitte. Figuren sieht man fast von vorn, nicht als Kopf von oben. + points: + - In der Parallelprojektion sieht jede Kopie eines Objekts überall gleich aus; so lassen sich Tiles wiederholen und die Kamera scrollen. + - Mit Fluchtpunkten müsste jedes Objekt je nach Lage im Bild anders gezeichnet sein. + - Oberseite und Front zugleich zeigen den Boden zum Laufen und die Front zum Erkennen. + - Reine Draufsicht zeigte Figuren nur als Kopf und Schultern, deshalb wird die Ansicht gekippt. + - Einheitlichkeit geht vor Realismus, solange alle Objekte derselben Projektion folgen. + explanation: | + Das Dorf ist in einer schiefen Parallelprojektion gezeichnet. Weil parallele Kanten parallel bleiben, sieht der Brunnen überall gleich aus, und dieselben Tiles passen an jede Stelle. Echte Perspektive würde jedes Objekt je nach Lage verzerren und beim Scrollen verändern. Die gekippte Ansicht zeigt Dach und Fassade, Boden und Figuren zugleich, eine reine Draufsicht ließe von Figuren nur Kopf und Schultern übrig. Slynyrd fasst den Preis zusammen: Die Ansicht ist nicht realistisch, aber einheitlich, und das zählt in Pixelart mehr. + resources: + - title: Wikipedia · 2.5D · Axonometric and oblique projection + url: https://en.wikipedia.org/wiki/2.5D#Axonometric_and_oblique_projection + + - id: grundkoerper-zerlegen + type: practice + title: Drei Gegenstände, aus Körpern gebaut + prompt: | + Wähle drei Gegenstände in deiner Nähe, zum Beispiel eine Flasche, einen Rucksack und einen Mülleimer. Zeichne jeden als Zusammensetzung aus Grundkörpern, je etwa drei Zentimeter groß. Beschrifte jeden Teil mit dem Namen seines Körpers. + lang: prose + checklist: + - Jeder der drei Gegenstände besteht aus mindestens zwei Grundkörpern, und jeder Teil ist beschriftet. + - Bei jedem Zylinder zeigt die kurze Achse der Ellipse entlang der Mittelachse. + - Wo zwei Körper sich überschneiden, verdeckt der vordere den hinteren, ohne dass Linien durchlaufen. + - Bei jedem stehenden Zylinder ist die Unterkante ein Bogen, keine Gerade. + - Du hast notiert, welcher Teil dir am schwersten fiel und warum. + hints: + - Ein Rucksack ist ein Quader mit abgerundeter Oberseite, die Träger sind gebogene Zylinder. + explanation: | + Die Zerlegung trainiert den Blick, mit dem du später Figuren und Kreaturen baust. Die Beschriftung zwingt dich, für jeden Teil eine Form zu wählen, statt Umrisse nachzuzeichnen. Ellipsenachse und Unterkante sind die zwei Fehler, die bei Zylindern am häufigsten auffallen, deshalb stehen sie in der Liste. + resources: + - title: Drawabox · Lesson 2 · Form Intersections + url: https://drawabox.com/lesson/2/formintersections + + - id: kisten-unterwegs + type: practice + title: Zwanzig Kisten im Bus + prompt: | + Zeichne zwanzig Kisten in Zweipunktperspektive, jede etwa zwei Zentimeter groß, mit dem Horizont auf jeder Seite als Linie. Ghoste jede Linie, bevor du sie setzt. Verlängere bei den letzten fünf Kisten die Kanten mit einem helleren Strich, bis du siehst, ob sie auf die Fluchtpunkte zulaufen. + lang: prose + checklist: + - Auf deinen Seiten stehen zwanzig Kisten, jede mit Horizont und zwei Fluchtpunkten. + - Bei den letzten fünf Kisten sind alle Kanten bis in die Nähe der Fluchtpunkte verlängert. + - Du hast notiert, welche Kanten bei der Verlängerung am deutlichsten danebenlaufen. + - Alle senkrechten Kanten sind senkrecht, geprüft am Heftrand. + - Keine Linie ist nachgezogen oder mehrfach übermalt. + hints: + - Liegt eine Kiste über dem Horizont, siehst du ihre Unterseite statt der Oberseite. + explanation: | + Kisten zeigen jeden Perspektivfehler sofort, weil ihre Kanten parallel sein müssen. Die Verlängerung macht sichtbar, was dein Auge noch nicht schätzen kann. Die Notiz der Abweichungen zeigt dir, ob du eher die Fluchtpunkte zu nah setzt oder die Kanten aus dem Handgelenk biegst. Mit der 250 Box Challenge kannst du das später ausbauen. + resources: + - title: Drawabox · 250 Box Challenge + url: https://drawabox.com/lesson/250boxes + + - id: kiste-und-fass-projektion + type: practice + title: Kiste und Fass in einer Projektion + prompt: | + Leg auf Karopapier eine Projektionsregel fest: wie stark Oberseiten verkürzt werden und woher das Licht kommt. Zeichne danach eine Kiste mit quadratischer Grundfläche und ein Fass, beide 12 Kästchen breit, in dieser 3/4-Draufsicht nebeneinander. Fülle Oberseiten und Fronten mit drei Tönen: leer, schraffiert, ausgefüllt. + lang: prose + starter: | + Verkürzung der Oberseite: + Lichtrichtung: + Kiste – Oberseite / Front in Kästchen: + Fass – Ellipse / Mantel in Kästchen: + checklist: + - Die Regel steht über der Zeichnung, mit Verkürzung als Bruch oder Zahl und Lichtrichtung als Pfeil. + - Oberseite der Kiste und Ellipse des Fasses haben dieselbe Tiefe in Kästchen. + - Alle senkrechten Kanten liegen auf Rasterlinien, und keine Kante läuft auf einen Fluchtpunkt zu. + - Die Unterkante des Fasses ist ein Bogen mit derselben Krümmung wie die Oberkante, gespiegelt. + - Die helle Seite liegt bei beiden Objekten auf der Seite, aus der laut Regel das Licht kommt. + hints: + - Rechne die Tiefe der Ellipse aus der Regel aus, bevor du das erste Kästchen füllst. + explanation: | + Diese Aufgabe ist der Kern jeder Asset-Arbeit in Top-down-Spielen: erst die Regel, dann die Objekte. Die überprüfbaren Punkte stellen sicher, dass beide Objekte auf demselben Boden stehen. Wie du sie danach im Pixel-Editor sauber setzt, zeigen die Module [Linien, Kurven und Cluster](/pixelart/linien-cluster) und [Umgebung und Tiles](/pixelart/umgebung-tiles). + resources: + - title: Slynyrd · Pixelblog 20 · Top Down Tiles + url: https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles diff --git a/content/pixelart/modules/lesbarkeit-pruefen.yaml b/content/pixelart/modules/lesbarkeit-pruefen.yaml new file mode 100644 index 00000000..0f0c1fb6 --- /dev/null +++ b/content/pixelart/modules/lesbarkeit-pruefen.yaml @@ -0,0 +1,450 @@ +id: lesbarkeit-pruefen +title: Prüfen, überarbeiten, dokumentieren +level: 3 +minutes: 110 +summary: Wie du eigene Sprites und Tiles mit drei schnellen Proben – Originalgröße, Graustufen, Silhouette – im Spielbild prüfst, Rückmeldung einholst, ohne die Antwort vorzugeben, und Überarbeitungen so festhältst, dass du später weißt, warum etwas so aussieht. +place: unterwegs +goals: + - Du prüfst ein Asset im Mockup mit 1×-, Graustufen- und Silhouettenprobe und sagst, welche Frage jede Probe beantwortet. + - Du rechnest das Kontrastverhältnis zweier Farben nach WCAG aus und kennst die Grenzen dieser Zahl für Pixelart. + - Du stellst Testpersonen offene Fragen und hältst ihre Antworten wörtlich fest. + - Du überarbeitest in Runden mit genau einer Änderung und belegst jede Runde mit Vorher, Nachher und Grund. + - Du führst ein Entscheidungsprotokoll, aus dem ein anderer die Gründe deiner Gestaltung ablesen kann. +resources: + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + - title: Chrome DevTools · Emulate vision deficiencies + url: https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies + - title: W3C · WCAG 2.2 · Relative luminance + url: https://www.w3.org/TR/WCAG22/#dfn-relative-luminance +lesson: | + Du hast zwei Abende an einer Figur gearbeitet. Im Editor bei 800 % ist jeder Pixel vertraut, jede Kante hast du dreimal geprüft. Dann setzt du sie ins Spielbild, und ein Freund fragt: „Wo bist du?“ Das Problem ist nicht dein Auge. Wer stundenlang an einem Bild arbeitet, sieht, was er gemeint hat, nicht, was dasteht. + + Dieses Modul gibt dir Werkzeuge gegen diese Betriebsblindheit: drei Proben, die du in Sekunden machst, eine Art, Rückmeldung zu holen, ohne die Antwort vorzugeben, und ein Protokoll, das deine Überarbeitungen nachvollziehbar macht. Es eignet sich für den Bus: Exportiere dein Mockup als PNG aufs Handy und prüfe dort. Ein Mockup ist ein Bildschirmfoto, wie das Spiel aussehen soll, aus deinen Sprites und Tiles zusammengesetzt, ohne dass etwas programmiert sein muss. Alle Kriterien hier beschreiben, was du prüfst. Ob dir das Ergebnis gefällt, entscheidest du. + + ## Abstand schaffen: warum du deine eigene Arbeit nicht siehst + + Abstand entsteht durch Zeit, durch eine andere Größe und durch eine andere Ansicht. Zeit kostet am wenigsten: Leg ein Asset einen Tag weg, bevor du es beurteilst. Eine andere Größe zeigt, ob die Grundform trägt. James Gurney schreibt über einfache Tonwertgestaltung, dass sie „reads from across the room or when reduced to a tiny size“ ([Why should I mass values?](https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html)). Eine andere Ansicht entsteht durch Spiegeln. Spiegelst du ein Bild waagerecht, siehst du es mit fremden Augen, und schiefe Achsen oder ungleiche Proportionen springen ins Auge. In Krita spiegelt die Taste M die Ansicht, ohne das Bild zu verändern ([View Menu](https://docs.krita.org/en/reference_manual/main_menu/view_menu.html)). + + > [!TIP] Das Handy als Prüfgerät + > Exportiere das Mockup einmal in Originalgröße und einmal ganzzahlig vergrößert und schick dir beides aufs Handy. Im Bus siehst du es zum ersten Mal ohne Editor, ohne Raster und ohne Zoom, fast wie ein Spieler. Viele Handys haben in den Bedienungshilfen zusätzlich einen Graustufenmodus. + + ## Drei Proben: Originalgröße, Graustufen, Silhouette + + Jede Probe beantwortet eine eigene Frage. Mach sie in dieser Reihenfolge, weil jede die vorige voraussetzt. + + ![Dieselbe Top-down-Szene dreimal: A winzig in Originalgröße, B vergrößert in Graustufen, C als Silhouetten mit schwarzer Figur, grauen Steinen und weißem Boden](/media/pixelart/lesbarkeit-pruefen/drei-proben@2x.png "Originalgröße (A), Graustufen (B) und Silhouetten (C) derselben Szene. Eigenes Schaubild") + + **Originalgröße (A).** Sieh dir das Mockup bei 100 % an, Pixel für Pixel so groß wie im Spiel. Frage: Erkennst du, was jedes Ding ist, und findest du die Figur sofort? Details, die nur im Zoom existieren, gibt es für den Spieler nicht. Was hier verschwindet, kann weg oder muss größer werden. + + **Graustufen (B).** Nimm die Farbe weg. Frage: Trennen die Tonwerte Figur, Gefahr und Boden? Zwei Farben mit gleicher Helligkeit verschmelzen in Graustufen zu einer Fläche, auch wenn sie farbig verschieden aussehen. Wie du Tonwerte planst, steht in [Licht, Schatten und Tonwerte](/pixelart/licht-werte) und [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten). In Chromium schaltest du jede Seite über die DevTools auf Graustufen: Ctrl+Shift+P, „Show Rendering“, dann unter „Emulate vision deficiencies“ die Option Achromatopsia ([Chrome DevTools](https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies)). Öffnest du dein PNG im Browser, prüfst du es so ohne weiteres Programm. In Krita legst du eine Filterebene mit „Desaturate“ über das Bild ([Filter Layers](https://docs.krita.org/en/reference_manual/layers_and_masks/filter_layers.html)). + + **Silhouette (C).** Füll jede Figur schwarz, den Boden weiß. Frage: Erkennst du an der Umrissform, was es ist und wohin es schaut? Valve hat die neun Klassen von Team Fortress 2 so entworfen: „Even when viewed only in silhouette with no internal shading at all, the characters are readily identifiable to players“ ([NPAR 2007](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf)). Wie man Silhouetten entwirft, zeigt [Silhouette und Formensprache](/pixelart/silhouette-formsprache). + + Dieselben DevTools simulieren auch Protanopie, Deuteranopie und Tritanopie. Hängt eine wichtige Unterscheidung nur an Rot gegen Grün, etwa Gift gegen Heilung, siehst du dort, ob sie hält. + + ## Eine Zahl für Kontrast und ihre Grenzen + + Für Text gibt es ein Maß: das Kontrastverhältnis nach WCAG. Es vergleicht die relative Leuchtdichte zweier Farben, also ihre Helligkeit, wie das Auge sie gewichtet ([Relative luminance](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance), [Contrast ratio](https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio)). 1 heißt gleich hell, 21 ist Schwarz auf Weiß. Für Pixelart ist das keine Regel. Die Zahl sagt aber schnell, ob zwei Farben in Graustufen verschmelzen werden. + + ```python run + def kanal(v): + s = v / 255 + if s <= 0.04045: + return s / 12.92 + return ((s + 0.055) / 1.055) ** 2.4 + + def leuchtdichte(hexwert): + r, g, b = (int(hexwert[i:i + 2], 16) for i in (1, 3, 5)) + return 0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b) + + def kontrast(a, b): + hell, dunkel = sorted((leuchtdichte(a), leuchtdichte(b)), reverse=True) + return (hell + 0.05) / (dunkel + 0.05) + + boden = "#8A9C75" + print("Hemd ", round(kontrast("#4F7FBF", boden), 1)) + print("Kontur ", round(kontrast("#1F2E52", boden), 1)) + ``` + + Die Zahlen stammen aus der Szene im Schaubild oben. Das blaue Hemd hat gegen den grünen Boden nur 1,4 : 1. Farblich ist es klar verschieden, in Graustufen fast gleich hell. Getragen wird die Figur von ihrer dunklen Kontur mit 4,5 : 1. Daraus folgt eine Entscheidung, die du bewusst triffst: Entweder bleibt die Kontur, oder das Hemd braucht einen anderen Tonwert. Die Zahl ersetzt den Blick nicht. Sie misst nur zwei Farben, nicht Form, Größe, Sättigung oder Bewegung. + + ## Lesbarkeit im Spielbild, nicht im Einzelsprite + + Ein Sprite allein auf grauem Grund sagt wenig. Lesbar oder nicht ist es nur zwischen den Dingen, mit denen es im Spiel steht. Prüf deshalb immer ein Mockup in Spielauflösung: Figur, ein Gegner, ein Stück Boden, ein Hindernis. Welche Auflösung dein Spiel hat und wie Godot sie auf den Bildschirm bringt, erklärt [Pixelraster und Skalierung](/godot/pixelraster) im Godot-Kurs. + + Valve ordnet, was ein Spieler zuerst erkennen muss, in einer „Read Hierarchy“: Das Team liest man an der Farbe, die Klasse an Silhouette und Proportionen, danach die Waffe ([MIGS 2008](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Für dein Mockup stellst du dieselbe Frage: Was muss ein Spieler in einer Sekunde wissen? Wo bin ich, was ist gefährlich, wo kann ich hin. Ein schneller Selbsttest: Schau eine Sekunde auf das Mockup, dann weg, und schreib auf, was du gesehen hast. Steht dort zuerst ein Stein im Hintergrund statt der Figur, ist die Hierarchie verdreht. + + Für Kampfszenen kommt die Lesbarkeit von Angriffen dazu. Wie Gegner Angriffe ankündigen, behandelt [Gegnermuster und Telegraphing](/combat/gegnermuster), wie Bild und Trefferfläche zusammenpassen, [Hitboxen](/combat/hitboxen). + + > [!PRAXIS] + > Bei Team Fortress 2 war Lesbarkeit eine Gestaltungsvorgabe, kein späterer Test. Moby Francke beschreibt, dass das Team die Figuren „from the dark bottoms to the contrasting upper torso“ abgestuft hat, damit sie besser lesbar sind ([Game Developer, 2008](https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay)). Die Folien von 2008 nennen dazu „Highest contrast at chest level, where weapon is held“. Für dich heißt das: Leg vor dem Zeichnen fest, was zuerst gelesen werden soll, und prüf genau das. + + ## Rückmeldung einholen, ohne die Antwort vorzugeben + + Deine eigenen Proben finden viel, aber nicht alles. Du weißt, was das Bild zeigen soll. Ein anderer weiß es nicht und sieht deshalb, was wirklich da ist. Entscheidend ist die Frage. „Erkennst du den Wolf?“ verrät die Antwort. „Was siehst du?“ nicht. + + - Zeig das Mockup fünf Sekunden lang, nimm es weg und frag: „Was hast du gesehen?“ + - Frag danach: „Wo würdest du hinlaufen? Was würdest du meiden?“ + - Schreib die Antworten wörtlich auf und erklär nichts. Jede Erklärung ersetzt die Beobachtung, die du gerade sammeln wolltest. + - Zähl erst danach, wie viele Personen das Wichtige zuerst genannt haben. + + Das Verfahren kennst du vielleicht aus dem Bereich Erzählhandwerk: [Testlesen und Playtest](/narrative/testlesen-playtest) arbeitet mit denselben offenen Fragen. Eine Antwort ist eine Beobachtung, keine Anweisung. Sagt jemand „mach den Gegner rot“, notierst du, dass er ihn nicht als Gefahr erkannt hat. Wie du das löst, entscheidest du. + + > [!INTERVIEW] + > In einem Portfolio-Gespräch oder nach einem Art-Test fragt ein Art Lead: „Was würdest du an diesem Asset als Nächstes ändern?“ Gute Antwort: Du nennst eine konkrete Schwäche mit Beleg („In Graustufen verschmilzt der Mantel mit dem Boden, das Kontrastverhältnis lag bei 1,3“), sagst, was du ändern würdest, und wie du prüfst, ob es geholfen hat. Snow Day Games beschrieb in einer inzwischen geschlossenen Anzeige einen bezahlten Testauftrag als Teil der Bewerbung, um zu sehen, ob die künstlerische Vorstellung zusammenpasst ([Work With Indies](https://workwithindies.com/careers/snow-day-games-2d-technical-pixel-artist)). Dort zählt, ob du deine Entscheidungen begründen kannst. + + ## Überarbeiten in Runden, dokumentieren in Sätzen + + Eine Überarbeitungsrunde ändert genau eine Sache. Änderst du Palette, Kontur und Größe auf einmal, weißt du danach nicht, was geholfen hat. Jede Runde hat dieselbe Form: + + ```text + Runde 2 – Figur im Mockup Wiese + Befund: In Graustufen verschmilzt das Hemd mit dem Boden + (Kontrast 1,4). 2 von 3 Testpersonen nannten + zuerst einen Stein. + Änderung: Hemd eine Stufe dunkler in der Rampe, sonst nichts. + Probe: Graustufen und 5-Sekunden-Test wiederholt. + Ergebnis: Kontrast 2,5. 3 von 3 nannten zuerst die Figur. + Datei: figur_v2.aseprite, mockup_wiese_v2.png + ``` + + Bewahr jede Fassung auf, mit Versionsnummer im Dateinamen oder in Git, und leg Vorher und Nachher in Originalgröße nebeneinander. So siehst du auch, ob eine Änderung etwas anderes verschlechtert hat. + + Aus den Runden wird ein **Entscheidungsprotokoll**: eine kurze Liste der Entscheidungen, die dein Asset-Set prägen, jeweils mit Grund und der verworfenen Alternative. „Palette mit 24 Farben, weil vier Rampen à sechs Töne für Figur, Gegner, Boden und Requisiten reichen; 32 Farben verworfen, weil zwei Grüntöne in Graustufen gleich waren.“ Ein solches Protokoll ist für dich in einem halben Jahr so wertvoll wie für einen Art Lead, der dein Portfolio liest. + + KI darf dir dabei technische Arbeit abnehmen, etwa ein Skript, das alle PNGs eines Ordners in Graustufen kopiert. Die Entscheidung, was du änderst, und die Pixel selbst bleiben bei dir. + + ## Was danach kommt + + Mit geprüftem Asset-Set hast du alles, was ein Standbild braucht. Zwei Wege führen weiter. Wie du die PNGs in Godot scharf und im richtigen Raster importierst, zeigt [Eigene Sprites importieren](/godot/sprites-importieren). Wie Figuren sich bewegen, mit Timing, Gewicht und Schlüsselposen, ist Thema des Animationskurses, der auf diesem Kurs aufbaut. Nimm dorthin deine Maßstabstabelle, deine Palette und dein Entscheidungsprotokoll mit: Jede Animation muss dieselben Proben bestehen, nur in Bewegung. + + ## Häufige Fehler + + - **Nur im Zoom geprüft.** Details, die bei 1× verschwinden, kosten Zeit und bringen dem Spieler nichts. + - **Sprite allein geprüft.** Lesbar ist ein Sprite nur vor dem Boden und neben den Dingen, mit denen es im Spiel steht. + - **Farbe für Tonwert gehalten.** Verschiedene Farbtöne können gleich hell sein und verschmelzen in Graustufen. + - **Die Zahl über das Auge gestellt.** Das Kontrastverhältnis misst zwei Farben, nicht Form, Größe oder Sättigung. + - **Führende Fragen.** „Siehst du, dass das Gift ist?“ liefert Zustimmung, keine Beobachtung. + - **Rückmeldung als Anweisung genommen.** Notier, was jemand gesehen oder nicht gesehen hat, und such die Lösung selbst. + - **Mehrere Änderungen pro Runde.** Danach weißt du nicht, was gewirkt hat. + - **Alte Fassungen überschrieben.** Ohne Vorher kein Vergleich und kein Beleg. + + ## Zusammenfassung + + - Abstand entsteht durch Zeit, eine andere Größe und eine gespiegelte Ansicht. + - Originalgröße prüft Details, Graustufen prüfen Tonwerte, die Silhouette prüft Form und Richtung. + - Das Kontrastverhältnis nach WCAG zeigt schnell, ob zwei Farben verschmelzen, ist aber keine Regel für Pixelart. + - Geprüft wird im Mockup in Spielauflösung, nach einer festgelegten Lesehierarchie. + - Rückmeldung holst du mit offenen Fragen und notierst sie wörtlich. + - Jede Überarbeitungsrunde ändert eine Sache und hält Befund, Änderung, Probe und Ergebnis fest. + - Das Entscheidungsprotokoll sammelt Gründe und verworfene Alternativen. +exercises: + - id: probe-zuordnen + type: choice + title: Welche Probe beantwortet was? + prompt: | + Welche Zuordnungen von Probe und Frage stimmen? + options: + - text: Originalgröße – sind alle Details auch in Spielgröße erkennbar? + correct: true + why: Bei 100 % siehst du das Bild so groß wie der Spieler. Was dort verschwindet, existiert für ihn nicht. + - text: Graustufen – trennen die Tonwerte Figur, Gefahr und Boden? + correct: true + why: Ohne Farbe bleibt nur die Helligkeit. Gleich helle Farben verschmelzen. + - text: Silhouette – passen die Farben der Figur zur Palette? + correct: false + why: In der Silhouette gibt es keine Farben. Sie prüft Umrissform und Blickrichtung. + - text: Graustufen – erkennt man, wohin die Figur schaut? + correct: false + why: Die Richtung liest man vor allem an der Umrissform. Dafür ist die Silhouettenprobe da. + explanation: | + Jede Probe nimmt dem Bild etwas weg und zeigt so, ob der Rest trägt. Die Originalgröße nimmt den Zoom weg, Graustufen nehmen die Farbe weg, die Silhouette nimmt Farbe und Innenzeichnung weg. Wer weiß, welche Frage eine Probe beantwortet, weiß auch, welche er nach einer Änderung wiederholen muss. + resources: + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf + + - id: drei-proben-lesen + type: choice + title: Was zeigt die Graustufenprobe? + prompt: | + Sieh dir Feld B an. Welche Aussage trifft zu? + + ![Dieselbe Top-down-Szene dreimal: A winzig in Originalgröße, B vergrößert in Graustufen, C als Silhouetten](/media/pixelart/lesbarkeit-pruefen/drei-proben@2x.png "Drei Proben derselben Szene. Eigenes Schaubild") + options: + - text: Das Hemd der Figur ist in Graustufen fast so hell wie der Boden. Die Figur trennt sich vor allem über ihre dunkle Kontur und die dunklen Haare. + correct: true + why: Das Hemd hat gegen den Boden ein Kontrastverhältnis von etwa 1,4, die Kontur von etwa 4,5. Ohne Kontur würde die Figur in Graustufen weitgehend verschwinden. + - text: Die Figur ist in Graustufen unsichtbar, die Szene ist also unbrauchbar. + correct: false + why: Die Figur ist sichtbar, getragen von Kontur und dunklen Teilen. Die Probe zeigt, wovon die Lesbarkeit abhängt, nicht dass sie fehlt. + - text: Die Steine sind dunkler als die Figur und ziehen deshalb mehr Blick. + correct: false + why: Die Steine liegen in einem engen, mittleren Wertebereich. Die dunkelsten Werte des Bildes gehören der Figur. + - text: Graustufen sagen nichts über Lesbarkeit, weil das Spiel farbig ist. + correct: false + why: Tonwerte tragen einen großen Teil der Lesbarkeit, auch in Farbe. Graustufen machen sie sichtbar. + explanation: | + Die Graustufenprobe zeigt, welche Teile eines Bildes über Helligkeit getrennt sind. Hier ist es die Kontur, nicht die Hemdfarbe. Das ist kein Fehler, aber eine Abhängigkeit, die du kennen musst: Nimmst du später die Kontur weg oder hellst sie auf, verschwindet die Figur auf diesem Boden. + resources: + - title: Chrome DevTools · Emulate vision deficiencies + url: https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies + + - id: pruefrunde-ordnen + type: order + title: Eine Prüfrunde + prompt: | + Bring die Schritte einer Prüf- und Überarbeitungsrunde in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Das Mockup in Spielauflösung exportieren. + Es in Originalgröße ansehen und notieren, was auffällt. + Graustufen- und Silhouettenprobe machen. + Genau einen Befund für diese Runde auswählen. + Eine Änderung vornehmen und als neue Fassung speichern. + Dieselben Proben wiederholen und Vorher und Nachher vergleichen. + Befund, Änderung und Ergebnis ins Protokoll schreiben. + explanation: | + Geprüft wird das Spielbild, nicht das Einzelsprite, deshalb steht der Export am Anfang. Die Originalgröße kommt zuerst, weil sie die gröbsten Probleme zeigt. Erst wenn alle Befunde gesammelt sind, wählst du einen aus. Eine neue Fassung statt Überschreiben macht den Vergleich möglich, und das Protokoll am Ende hält fest, was die Runde gebracht hat. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: kontrast-rechnen + type: output + title: Die Grenzen der Skala + prompt: | + Was gibt das Programm aus? Zwei Zeilen. + lang: python + code: | + def kanal(v): + s = v / 255 + if s <= 0.04045: + return s / 12.92 + return ((s + 0.055) / 1.055) ** 2.4 + + def leuchtdichte(hexwert): + r, g, b = (int(hexwert[i:i + 2], 16) for i in (1, 3, 5)) + return 0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b) + + def kontrast(a, b): + hell, dunkel = sorted((leuchtdichte(a), leuchtdichte(b)), reverse=True) + return (hell + 0.05) / (dunkel + 0.05) + + print(round(kontrast("#FFFFFF", "#000000"))) + print(round(kontrast("#808080", "#808080"))) + expected: | + 21 + 1 + hints: + - Weiß hat die relative Leuchtdichte 1, Schwarz 0. + - Zwei gleiche Farben haben dieselbe Leuchtdichte. + explanation: | + Die Formel teilt die hellere Leuchtdichte plus 0,05 durch die dunklere plus 0,05. Weiß gegen Schwarz ergibt 1,05 ÷ 0,05 = 21, den größten möglichen Wert. Zwei gleiche Farben ergeben immer 1, egal wie hell sie sind. Diese beiden Grenzen helfen, jede andere Zahl einzuordnen: 1,4 liegt nah an „gleich hell“, 4,5 deutlich darüber. + resources: + - title: W3C · WCAG 2.2 · Contrast ratio + url: https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio + + - id: faktor-mockup + type: output + title: Wie groß wird das Mockup? + prompt: | + Dein Mockup ist 384 × 216 Pixel groß. Du willst es ganzzahlig vergrößert so zeigen, dass es einen Bildschirm mit 1920 × 1080 Pixeln genau ausfüllt. Mit welchem Faktor? Antworte mit der Zahl. + lang: text + code: | + Mockup: 384 × 216 + Bildschirm: 1920 × 1080 + expected: | + 5 + accept: + - 5x + - 5× + - fünf + - Faktor 5 + - 5-fach + - fünffach + hints: + - Teile Breite durch Breite und Höhe durch Höhe. + explanation: | + 1920 ÷ 384 = 5 und 1080 ÷ 216 = 5. Beide Richtungen gehen ganzzahlig auf, jeder Pixel wird ein Quadrat aus 5 × 5 Bildschirmpixeln. Bei einem Faktor wie 4,5 würden Pixel ungleich groß, und du würdest Fehler sehen, die im Spiel nicht da sind. Wie Godot das im Spiel löst, steht im Godot-Kurs unter Pixelraster und Skalierung. + resources: + - title: Godot Docs · Multiple resolutions · Stretch scale mode + url: https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html#stretch-scale-mode + + - id: zwei-kontraste + type: output + title: Dunkler heißt mehr Kontrast? + prompt: | + Das Programm vergleicht das Hemd der Figur aus der Lektion mit einer Fassung, die eine Stufe dunkler ist, beide gegen denselben Boden. Was gibt es aus? Zwei Zeilen. Rechnen musst du nicht, überlege, was die Funktionen tun. + lang: python + code: | + def kanal(v): + s = v / 255 + if s <= 0.04045: + return s / 12.92 + return ((s + 0.055) / 1.055) ** 2.4 + + def leuchtdichte(hexwert): + r, g, b = (int(hexwert[i:i + 2], 16) for i in (1, 3, 5)) + return 0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b) + + def kontrast(a, b): + hell, dunkel = sorted((leuchtdichte(a), leuchtdichte(b)), reverse=True) + return (hell + 0.05) / (dunkel + 0.05) + + boden = "#8A9C75" # heller als beide Hemden + hemd = "#4F7FBF" # Kontrast 1,4 laut Lektion + hemd_dunkler = "#33558F" # eine Stufe dunkler in der Rampe + print(kontrast(hemd_dunkler, boden) > kontrast(hemd, boden)) + print(kontrast(boden, hemd) == kontrast(hemd, boden)) + expected: | + True + True + hints: + - Der Boden ist heller als beide Hemden. Was passiert mit dem Abstand, wenn das Hemd dunkler wird? + - Was macht `sorted(..., reverse=True)` mit der Reihenfolge der beiden Farben? + explanation: | + Der Boden ist heller als beide Hemden. Wird das Hemd dunkler, sinkt seine Leuchtdichte, der Nenner wird kleiner und das Verhältnis größer: von 1,4 auf 2,5. Die zweite Zeile ist `True`, weil `sorted(..., reverse=True)` immer die hellere Farbe nach vorn stellt. Die Reihenfolge der Argumente spielt keine Rolle, das Verhältnis ist immer mindestens 1. Gilt das auch umgekehrt? Ist der Boden dunkler als das Hemd, bringt ein dunkleres Hemd weniger Kontrast. Die Richtung hängt also davon ab, auf welcher Seite des Bodens die Figur liegt. + resources: + - title: W3C · WCAG 2.2 · Contrast ratio + url: https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio + + - id: begriffe-pruefen + type: gap + title: Begriffe der Prüfung + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Ein zusammengesetztes Bildschirmfoto, wie das Spiel aussehen soll, heißt ⟦Mockup⟧. Füllst du jede Figur schwarz, machst du die ⟦Silhouettenprobe⟧. Valve ordnet, was ein Spieler zuerst erkennen muss, in einer ⟦Lesehierarchie⟧. Die Liste deiner Gestaltungsentscheidungen mit Gründen und verworfenen Alternativen heißt ⟦Entscheidungsprotokoll⟧. + gaps: + - label: zusammengesetztes Spielbild + hint: Englisches Wort, auch im Deutschen üblich. + accept: ["Mock-up", "Mock up", "Attrappe"] + - label: schwarze Figuren + hint: Zusammengesetzt aus Umrissform und Probe. + accept: ["Silhouette", "Silhouettentest", "Silhouetten-Probe", "Silhouettenprüfung"] + - label: Valves Ordnung + hint: Auf Englisch „Read Hierarchy“. + accept: ["Read Hierarchy", "Lesereihenfolge", "Hierarchie"] + - label: Liste der Entscheidungen + hint: Ein Protokoll über Entscheidungen. + accept: ["Gestaltungsprotokoll", "Entscheidungslog", "Designprotokoll"] + explanation: | + Mockup, Silhouettenprobe und Lesehierarchie gehören zur Prüfung, das Entscheidungsprotokoll zur Dokumentation. Zusammen beantworten sie zwei Fragen: Liest der Spieler, was er lesen soll? Und weißt du später noch, warum es so aussieht? + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: fuehrende-frage + type: bug + title: Eine Frage zu viel + prompt: | + Du testest ein Mockup mit einem Gegner, der giftig sein soll. Nach dem Test weißt du nur, dass alle zugestimmt haben, aber nicht, ob jemand die Gefahr von selbst erkannt hätte. Finde die Frage, die das verursacht hat. + lang: prose + code: | + Was hast du in den fünf Sekunden gesehen? + Wo würdest du hinlaufen? + Was würdest du meiden? + Siehst du, dass der grüne Gegner giftig ist? + Woran hast du die Figur erkannt? + lines: [4] + hints: + - Welche Frage enthält schon die Antwort? + explanation: | + Frage 4 nennt den Gegner, seine Farbe und seine Eigenschaft. Wer so gefragt wird, schaut hin und stimmt zu, auch wenn er das Gift vorher nicht bemerkt hat. Die Fragen 1 bis 3 lassen die Antwort offen. Ob der Gegner als Gefahr gelesen wird, zeigt sich bei Frage 3: Nennt ihn dort jemand von selbst, wirkt die Gestaltung. + resources: + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf + + - id: protokoll-runde + type: bug + title: Was hat geholfen? + prompt: | + Nach diesen Überarbeitungsrunden ist die Figur deutlich besser lesbar. Du kannst aber nicht sagen, welche Änderung das bewirkt hat. Finde die Zeile, die das verursacht. + lang: prose + code: | + Runde 1: Kontur der Figur von Schwarz auf dunkles Blau, Silhouettenprobe wiederholt. + Runde 2: Palette ausgetauscht, Figur zwei Pixel größer gezeichnet und Boden aufgehellt. + Runde 3: Glanzlicht im Haar entfernt, Originalgröße verglichen. + Runde 4: Hemd eine Stufe dunkler, Graustufenprobe wiederholt. + lines: [2] + hints: + - Zähl, wie viele Dinge jede Runde ändert. + explanation: | + Runde 2 ändert drei Dinge auf einmal: Palette, Größe und Boden. Wird die Figur danach besser lesbar, kann jede der drei Änderungen der Grund sein, oder nur ihre Kombination. Teilst du sie auf drei Runden auf, weißt du, welche wirkt, und kannst die anderen zurücknehmen, falls sie etwas verschlechtert haben. + + - id: lesehierarchie-erklaeren + type: explain + title: Dunkle Füße, helle Brust + prompt: | + Valve hat die Figuren in Team Fortress 2 von dunklen Beinen zu einem hellen, kontrastreichen Oberkörper abgestuft. Erkläre in drei bis fünf Sätzen, warum das der Lesbarkeit dient und was du daraus für Figuren in einem Top-down-Spiel ableiten kannst. + lang: text + code: | + MIGS 2008, Folie „Read Hierarchy“: + Team → Farbe + Klasse → Silhouette, Proportionen, Waffen + Waffe → „Highest contrast at chest level, + where weapon is held“ + „Gradient from dark feet to light chest“ + points: + - Der Blick geht zum stärksten Kontrast. Liegt er an der Brust, landet er dort, wo die Waffe und damit die Information sitzt. + - Dunkle Beine treten zurück und konkurrieren nicht mit dem, was zuerst gelesen werden soll. + - Die Abstufung folgt einer festgelegten Reihenfolge, was ein Spieler zuerst, dann und zuletzt erkennen muss. + - Für eigene Figuren heißt das, vor dem Zeichnen festzulegen, was zuerst gelesen werden soll, und den stärksten Kontrast dorthin zu legen. + explanation: | + Das Auge springt zum stärksten Hell-Dunkel-Unterschied. Valve legt diesen Unterschied an die Brust, wo die Waffe gehalten wird, denn die Waffe sagt dem Spieler, was die Figur gleich tut. Die dunklen Beine treten zurück. Die Abstufung ist kein Stilmittel, sondern die Umsetzung der Lesehierarchie in Tonwerte. In einem Top-down-Spiel siehst du Figuren klein und von schräg oben. Was dort zuerst gelesen werden muss, entscheidest du für dein Spiel, etwa Kopf und Blickrichtung oder eine Waffe. Der stärkste Kontrast gehört dorthin, und die Graustufenprobe zeigt, ob er dort sitzt. + resources: + - title: "Game Developer · In-Depth: How Valve Makes Art To Enhance Gameplay" + url: https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay + + - id: proben-unterwegs + type: practice + title: Drei Proben im Bus + prompt: | + Nimm ein eigenes Mockup, Sprite oder eine Zeichnung aus diesem Kurs als PNG oder Foto aufs Handy. Mach unterwegs die drei Proben: Originalgröße, Graustufen (Bedienungshilfen des Handys oder vorher exportierte Graustufenkopie), Silhouette (eine schwarz gefüllte Kopie oder ein Blick mit zusammengekniffenen Augen). Schreib zu jeder Probe höchstens zwei Sätze. + lang: prose + checklist: + - Zu jeder der drei Proben steht, welche Frage sie beantwortet und was du gesehen hast. + - Mindestens ein Befund nennt eine konkrete Stelle, etwa „Hemd und Boden verschmelzen in Graustufen“. + - Du hast den Befund ausgewählt, den du als Nächstes bearbeiten willst, und notiert, warum. + - Du hast notiert, welche Probe du nach der Änderung wiederholen musst. + explanation: | + Unterwegs fehlt der Editor, und genau das ist der Vorteil. Du siehst das Bild ohne Raster und Zoom und kannst nicht sofort etwas ändern. So trennst du Befund und Lösung, die du am PC umsetzt. + resources: + - title: Chrome DevTools · Emulate vision deficiencies + url: https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies + + - id: fuenf-sekunden-test + type: practice + title: Fünf Sekunden für eine fremde Person + prompt: | + Zeig einer Person, die das Bild nicht kennt, dein Mockup oder ein Sprite fünf Sekunden lang am Handy. Stell danach nur offene Fragen und erklär nichts. Schreib die Antworten wörtlich auf. + lang: prose + checklist: + - Du hast vorher aufgeschrieben, was die Person zuerst erkennen soll. + - Keine deiner Fragen nennt ein Ding, eine Farbe oder eine Eigenschaft, die die Person erkennen soll. + - Die Antworten stehen wörtlich da, ohne deine Deutung. + - Du hast notiert, ob die Person das Wichtige zuerst genannt hat, ja oder nein. + - Wenn die Person eine Lösung vorgeschlagen hat, steht dort, welche Beobachtung dahintersteckt. + explanation: | + Die Person weiß nicht, was das Bild zeigen soll, und sieht deshalb, was dasteht. Deine vorher notierte Erwartung ist der Maßstab, an dem du die Antwort misst. Vorschläge wie „mach es rot“ übersetzt du in die Beobachtung dahinter. Die Lösung bleibt deine Entscheidung. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: protokoll-eintrag + type: practice + title: Ein Eintrag im Entscheidungsprotokoll + prompt: | + Schreib für eine echte Entscheidung aus deiner bisherigen Arbeit in diesem Kurs einen Eintrag ins Entscheidungsprotokoll, etwa zu Palette, Spritegröße, Kontur oder Maßstab. Höchstens vier Sätze. + lang: prose + checklist: + - Der Eintrag nennt die Entscheidung in einem Satz. + - Er nennt einen Grund, der sich prüfen lässt, etwa eine Probe, eine Zahl oder eine Testantwort. + - Er nennt mindestens eine verworfene Alternative und warum du sie verworfen hast. + - Er nennt die Datei oder Fassung, auf die er sich bezieht. + explanation: | + Ein Protokolleintrag hält fest, was du entschieden hast, warum und wogegen. Der prüfbare Grund unterscheidet ihn von einer Geschmacksaussage. Die verworfene Alternative zeigt, dass es eine Wahl gab. Das ist die Form, die ein Art Lead im Portfolio sucht, und die Form, die du selbst in einem halben Jahr brauchst. diff --git a/content/pixelart/modules/licht-werte.yaml b/content/pixelart/modules/licht-werte.yaml new file mode 100644 index 00000000..f95d2703 --- /dev/null +++ b/content/pixelart/modules/licht-werte.yaml @@ -0,0 +1,420 @@ +id: licht-werte +title: Licht, Schatten und Tonwerte +level: 1 +minutes: 110 +summary: Was ein Tonwert ist und warum er unabhängig von Farbe zählt, wie Licht auf eine Form fällt – vom Glanzlicht bis zum Schlagschatten –, warum wenige Wertegruppen ein Bild auch winzig lesbar machen und wie du Tonwertstudien mit Bleistift und Handy anlegst. +place: unterwegs +goals: + - Du erklärst Tonwert als Helligkeit unabhängig vom Farbton und ordnest Flächen auf einer Werteskala ein. + - Du benennst die Lichtzonen auf einer Kugel vom Glanzlicht bis zum Schlagschatten und zeichnest sie passend zur Lichtrichtung. + - Du trennst Licht- und Schattenseite als zwei Familien, bevor du abstufst. + - Du planst eine Szene in drei Wertegruppen und setzt den stärksten Kontrast dorthin, wo der Blick hinsoll. + - Du prüfst Tonwerte mit einer Studie auf Papier und mit einem Foto in Graustufen. +resources: + - title: Ctrl+Paint · Sketching · Value + url: https://www.ctrlpaint.com/videos/sketching-value + - title: Proko · How to Shade a Drawing + url: https://www.proko.com/course-lesson/how-to-shade-a-drawing/ + - title: James Gurney · Why Should I Mass Values? + url: https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html + - title: James Gurney · How Many Values? + url: https://gurneyjourney.blogspot.com/2018/01/how-many-values.html +lesson: | + Du schattierst eine Kugel mit Bleistift. Rundum am Rand wird es dunkler, in der Mitte bleibt es hell. Das Ergebnis sieht aus wie ein Knopf oder ein Kissen, nicht wie eine Kugel unter einer Lampe. Du weißt nicht, woher das Licht kommt, und die Zeichnung weiß es auch nicht. Jetzt leg eine Orange unter die Schreibtischlampe. Eine Seite ist hell, die andere dunkel. Auf dem Tisch liegt ein Schatten, der von der Lampe wegzeigt, und genau unter der Orange ist es am dunkelsten. + + Dieses Modul übt das Sehen von Licht: was ein Tonwert ist, wie Licht auf eine Form fällt und warum wenige, klar getrennte Werte ein Bild lesbar machen, auch wenn es winzig ist. Genau das brauchst du für Sprites. Du arbeitest mit Bleistift und Papier und mit der Kamera deines Handys. Farbe kommt erst in [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten). + + ## Tonwert: Helligkeit ohne Farbe + + Matt Kohr (Ctrl+Paint) definiert den Begriff so: „In the vocabulary of painting 'value' refers to illumination. Light areas are high in value, dark areas are low in value.“ ([Sketching: Value](https://www.ctrlpaint.com/videos/sketching-value)) Der **Tonwert** (value) ist also die Helligkeit einer Fläche, unabhängig von ihrem Farbton. Ein kräftiges Rot und ein mittleres Blau können fast denselben Tonwert haben. In Graustufen verschwimmen sie dann zu einer Fläche. Wie nah sich Farben dabei kommen, rechnet das Farbmodul mit konkreten Werten nach. + + Kohr rät, mit Graustufen anzufangen: „it's important to start your drawing and painting education in grayscale“ und „reserve color for later“ ([Why Practice in Grayscale](https://www.ctrlpaint.com/videos/why-practice-in-grayscale)). Ohne Farbe bleibt nur die Frage, wie hell oder dunkel etwas ist. Das ist die Frage, die über Form und Lesbarkeit entscheidet. + + ![Neun graue Felder nebeneinander, von links Weiß bis rechts fast Schwarz, darunter die Zahlen 1 bis 9](/media/pixelart/licht-werte/werteskala@2x.png "Werteskala in neun Stufen, 1 hell bis 9 dunkel. Eigenes Schaubild") + + Eine **Werteskala** ordnet Tonwerte in gleichmäßigen Stufen. Dieser Kurs zählt 1 als Weiß und 9 als fast Schwarz, andere Skalen zählen umgekehrt. Mit neun Stufen kannst du jede Fläche einordnen: Die helle Wand liegt bei 2, der Schatten unter dem Tisch bei 8. Für den Anfang reichen drei Gruppen: hell 1 bis 3, mittel 4 bis 6, dunkel 7 bis 9. + + ## Licht auf der Kugel: vom Glanzlicht bis zum Schlagschatten + + Eine Kugel zeigt alle Lichtzonen, die eine Form haben kann. Proko beschreibt sie in [How to Shade a Drawing](https://www.proko.com/course-lesson/how-to-shade-a-drawing/), Derek Yu nimmt für seine Figur eine Lichtquelle „above … and slightly in front“ an und schreibt: „By shading, you're not just adding color - you're sculpting out a form.“ ([Form and Volume](https://www.derekyu.com/makegames/pixelart.html#form)) + + ![Zwei graue Kugeln auf hellem Grund, Licht von oben links vorn. A hat oben links ein weißes Glanzfeld, dann hellgraues Licht, ein mittelgraues Band, ein dunkles Band unten rechts und ganz am unteren rechten Rand einen etwas helleren Streifen. Unter der Kugel liegt ein kleiner schwarzer Fleck, nach rechts zieht ein langer dunkelgrauer Schatten über den Boden. B ist dieselbe Kugel mit nur zwei Werten: hellgrau auf der Lichtseite, dunkelgrau auf der Schattenseite, mit denselben Schatten am Boden](/media/pixelart/licht-werte/licht-auf-kugel@2x.png "Alle Lichtzonen (A) und dieselbe Kugel in zwei Werten (B). Eigenes Schaubild") + + In Kugel A, von oben links nach unten rechts: + + - **Glanzlicht:** der hellste Fleck. Proko nennt ihn die Fläche, die das Licht „relative to the position of the viewer“ zurückwirft. Gehst du um die Kugel herum, wandert er mit. + - **Licht:** die Flächen, die zur Lampe zeigen. + - **Halbton:** der Übergang, laut Proko „darkest near the core shadow and lightest at the center light“. + - **Terminator:** die Grenze, an der die Form sich vom Licht abwendet. Hier beginnt der Schatten. + - **Kernschatten:** „a darker strip at the edge of the shadow“, das dunkelste Band auf der Kugel selbst. + - **Reflexlicht:** Licht, das vom Boden zurück in die Schattenseite fällt. Proko beschreibt es als heller als den Kernschatten. In A ist es der etwas hellere Streifen am unteren rechten Rand. + - **Kontaktschatten:** der dunkelste Fleck genau dort, wo die Kugel den Boden berührt. Proko nennt ihn „occlusion shadow“. Er stellt die Kugel auf den Boden. + - **Schlagschatten:** der Schatten, den die Kugel auf den Boden wirft. Er zeigt von der Lichtquelle weg, hier nach rechts. + + ## Zwei Familien: Licht- und Schattenseite + + Proko ordnet alle Zonen zwei Familien zu: „All the planes that face the light will belong to the light family.“ und „All the planes that face away from the light will belong to the shadow family.“ Sein wichtigster Satz: „The most important part is to separate the shadow family from the light family.“ (How to Shade a Drawing) + + Kugel B im Schaubild zeigt, wie viel diese Trennung allein leistet. Sie hat nur zwei Werte auf der Kugel, und trotzdem liest du eine runde Form mit Licht von oben links. Der Terminator als Grenze zwischen beiden Werten trägt die Form, die Abstufungen in A verfeinern sie nur. + + Daraus folgt eine Regel für jede Abstufung: Alles in der Lichtfamilie bleibt heller als alles in der Schattenfamilie. Das Reflexlicht hellt die Schattenseite auf, gehört aber zu ihr. Machst du es so hell wie die Lichtseite, verschwimmen beide Familien, und die Kugel wird flach. Pedro Medeiros (Saint11) rät für Pixelart außerdem „avoid gradients when possible“ ([Shading](https://saint11.art/img/pixel-tutorials/Shading.gif)): wenige klare Stufen statt eines weichen Verlaufs. Wie du damit Kissenschattierung vermeidest, zeigt [Schattieren, Dithering, Textur und Detailgrad](/pixelart/schattieren-textur). + + > [!MERKE] + > Erst Licht und Schatten trennen, dann abstufen. Die Grenze zwischen beiden Familien trägt die Form. + + ## Werteskala und Wertegruppen + + Wie viele Werte braucht ein Bild? James Gurney antwortet auf diese Frage für Studien: „the fewer values the better“, und zitiert Howard Pyle: „The fewer tones the simpler and better your pictures.“ Er empfiehlt dafür zwei oder drei Töne ([How Many Values?](https://gurneyjourney.blogspot.com/2018/01/how-many-values.html)). In einem zweiten Beitrag begründet er, warum wenige große Wertegruppen wirken: „You can tell at a glance what's going on, and it reads from across the room or when reduced to a tiny size.“ ([Why Should I Mass Values?](https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html)) „Reduced to a tiny size“ – das ist die Lage jedes Sprites. + + Die Gestaltung mit wenigen Hell-Dunkel-Formen hat auch einen japanischen Namen: **Notan**, laut Wikipedia „a design aesthetic referring to the use of light and shade“. Im Westen machte ihn Arthur Wesley Dow mit seinem Buch „Composition“ von 1899 bekannt ([Notan](https://en.wikipedia.org/wiki/Notan)). + + ![Zwei Fassungen derselben Szene in Graustufen: ein Ball auf einer Kiste vor einer Wand, Licht von oben links. In A sind die Werte überall zufällig verstreut, Wand, Boden und Kiste flimmern, der Ball ist kaum zu erkennen. In B gibt es nur drei Werte: Ballseite zum Licht, Oberseite der Kiste und Boden hell; Wand und Kistenfront mittel; Schattenseite des Balls und die Schlagschatten dunkel](/media/pixelart/licht-werte/wertegruppen@2x.png "Verstreute Werte (A) und drei Wertegruppen (B). Eigenes Schaubild") + + In A weicht rund die Hälfte der Pixel zufällig um eine Stufe von ihrer Fläche ab. Im Zoom wirkt das wie Struktur, auf Handygröße wie Rauschen, und die Formen gehen unter. In B gehört jede Fläche zu einer von drei Gruppen: Was zum Licht zeigt, ist hell. Was senkrecht steht oder sich abwendet, ist mittel. Was im Schatten liegt, ist dunkel. Der Ball hebt sich ab, weil sein heller Teil vor der mittleren Wand sitzt und sein dunkler Teil an die helle Kistenoberseite grenzt. + + Gurney beschreibt dasselbe Prinzip: Weniger wichtige Teile dürfen in einer hellen oder einer dunklen Masse aufgehen, „light-on-light“ oder „dark-on-dark“. Die Wand in B ist so eine Masse, sie hat keinen eigenen Kontrast. + + ## Kontrast lenkt den Blick + + Gurney schreibt weiter: „The parts that you want the viewer to notice are highly contrasting.“ (Why Should I Mass Values?) Das Auge springt dorthin, wo Hell und Dunkel am stärksten aufeinandertreffen. Für ein Spiel heißt das: Spielfigur und Gefahren bekommen den stärksten Kontrast, der Boden einen engen Wertebereich. Wie du das in einer Szene umsetzt, zeigen [Umgebung und Tiles](/pixelart/umgebung-tiles) und [Prüfen, überarbeiten, dokumentieren](/pixelart/lesbarkeit-pruefen). + + > [!PRAXIS] + > Valve hat die Figuren in Team Fortress 2 über Tonwerte lesbar gemacht. Jason Mitchells Vortrag nennt einen „Gradient from dark feet to light chest“ und den „Highest contrast at chest level, where weapon is held“ ([Connecting Visuals to Gameplay at Valve](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Art Director Moby Francke beschreibt es im Interview: „We then also gradated the character from the dark bottoms to the contrasting upper torso for better readability.“ ([Game Developer](https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay)) Die Werte folgen dort nicht nur dem Licht, sondern einer Entscheidung, wohin der Spieler schauen soll. + + ## Tonwertstudien auf Papier und am Handy + + Eine **Tonwertstudie** ist eine kleine Skizze nur aus Werten, ohne Linien und ohne Farbe. Kohr nennt das Arbeiten direkt in Tönen eine gute Übung, weil sie zwingt, über Form und Masse nachzudenken (Sketching: Value). + + **Auf Papier** nimmst du drei Werte: Papierweiß für hell, eine lockere Schraffur für mittel, eine dichte Schraffur für dunkel. Zeichne ein Rechteck von etwa 5 × 4 cm, leg die Lichtrichtung mit einem Pfeil fest und füll jede Fläche mit einem der drei Werte. Motive gibt es überall: eine Haltestelle, ein Tisch mit Tasse, ein Fenster mit Vorhang. + + **Am Handy** fotografierst du dasselbe Motiv und stellst das Foto mit einem Schwarz-Weiß-Filter der Galerie-App auf Graustufen. Dann vergleichst du: Liegt die Wand in derselben Gruppe wie in deiner Skizze? + + **Am PC** legst du in Krita eine Filterebene mit dem Filter „Desaturate“ über dein Bild ([Filter Layers](https://docs.krita.org/en/reference_manual/layers_and_masks/filter_layers.html), [Desaturate](https://docs.krita.org/en/reference_manual/filters/adjust.html#desaturate)). Das Bild darunter bleibt farbig, die Ebene lässt sich an- und ausschalten. Chromium kann jede Webseite in Graustufen zeigen, auch einen Screenshot im Browser: In den DevTools unter „Rendering“ die Option „Emulate vision deficiencies“ auf „Achromatopsia“ stellen ([Chrome DevTools](https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies)). + + > [!TIP] Augen zusammenkneifen + > Kneif die Augen zusammen, bis das Motiv verschwimmt. Details verschwinden, die großen hellen und dunklen Formen bleiben. Was du dann siehst, gehört in die Tonwertstudie. + + > [!INTERVIEW] + > Im Portfolio-Gespräch zeigt ein Art Lead auf ein Sprite: „Warum liest sich die Figur vor diesem Hintergrund schlecht?“ Gute Antwort: Du stellst Figur und Hintergrund in Graustufen und prüfst, ob sie in derselben Wertegruppe liegen. Dann nennst du die Abhilfe in Werten, nicht in Farben: den Hintergrund in einen engeren, mittleren Bereich legen, der Figur den stärksten Hell-Dunkel-Kontrast geben, etwa an Brust und Waffe wie bei Valve. Wer so antwortet, zeigt, dass er Lesbarkeit prüfen kann, statt sie zu erraten. + + ## Häufige Fehler + + - **Ohne Lichtrichtung schattiert.** Rundum dunkle Ränder ergeben ein Kissen. Leg die Lichtrichtung mit einem Pfeil fest, bevor du einen Wert setzt. + - **Licht- und Schattenfamilie vermischt.** Ein Reflexlicht so hell wie die Lichtseite macht die Form flach. + - **Schlagschatten zur Lampe hin.** Der Schlagschatten zeigt immer von der Lichtquelle weg. + - **Kontaktschatten vergessen.** Ohne den dunkelsten Fleck an der Berührung schwebt der Gegenstand. + - **Zu viele Werte.** Jede Fläche mit eigenem Wert ergibt Rauschen. Drei Gruppen reichen für eine Studie. + - **Farbe mit Tonwert verwechselt.** Ein kräftiges Rot ist nicht automatisch hell. Prüf in Graustufen. + - **Kontrast überall gleich stark.** Dann weiß das Auge nicht, wohin. Der stärkste Kontrast gehört zum Wichtigsten. + + ## Zusammenfassung + + - Der Tonwert ist die Helligkeit einer Fläche, unabhängig von ihrem Farbton. + - Auf einer Kugel liegen Glanzlicht, Licht und Halbton in der Lichtfamilie, Kernschatten und Reflexlicht in der Schattenfamilie, getrennt durch den Terminator. + - Kontaktschatten stellen einen Gegenstand auf den Boden, Schlagschatten zeigen von der Lichtquelle weg. + - Erst Licht und Schatten als zwei Familien trennen, dann abstufen. Alles in der Lichtfamilie bleibt heller als alles im Schatten. + - Wenige Wertegruppen machen ein Bild auch winzig lesbar. Drei Gruppen reichen für eine Studie. + - Der stärkste Kontrast lenkt den Blick. In Spielen gehört er zu Figur und Gefahr, nicht zum Boden. + - Tonwerte prüfst du mit einer Drei-Werte-Studie auf Papier und mit einem Foto in Graustufen. +exercises: + - id: tonwert-und-farbe + type: choice + title: Was ist ein Tonwert? + prompt: | + Welche Aussagen über den Tonwert stimmen? + options: + - text: Der Tonwert ist die Helligkeit einer Fläche, unabhängig von ihrem Farbton. + correct: true + why: So definiert Ctrl+Paint „value“, als Beleuchtung, hell oder dunkel. + - text: Zwei verschiedene Farben können fast denselben Tonwert haben und in Graustufen zu einer Fläche verschmelzen. + correct: true + why: Ein kräftiges Rot und ein mittleres Blau liegen oft nah beieinander. In Graustufen trennt sie nichts mehr. + - text: Eine kräftige, gesättigte Farbe ist immer heller als eine blasse. + correct: false + why: Sättigung und Helligkeit sind verschiedene Eigenschaften. Ein sattes Dunkelblau ist dunkler als ein blasses Gelb. + - text: Tonwerte lassen sich erst beurteilen, wenn die Farben feststehen. + correct: false + why: Gerade umgekehrt. Ctrl+Paint rät, in Graustufen anzufangen und Farbe später dazuzunehmen. + explanation: | + Der Tonwert beantwortet nur eine Frage: Wie hell oder dunkel ist diese Fläche? Farbton und Sättigung sind davon unabhängig. Deshalb lassen sich Formen und Lesbarkeit in Graustufen planen, bevor eine einzige Farbe gewählt ist. Und deshalb kann eine bunte Figur vor einem bunten Hintergrund verschwinden, wenn beide denselben Tonwert haben. + resources: + - title: Ctrl+Paint · Why Practice in Grayscale + url: https://www.ctrlpaint.com/videos/why-practice-in-grayscale + + - id: zone-erkennen + type: choice + title: Der helle Streifen im Schatten + prompt: | + Am unteren rechten Rand von Kugel A liegt innerhalb der dunklen Schattenseite ein etwas hellerer Streifen. Welche Lichtzone ist das? + + ![Graue Kugel, Licht von oben links: weißes Glanzfeld oben links, hellgraues Licht, mittelgraues Band, dunkles Band unten rechts, ganz am Rand unten rechts ein etwas hellerer Streifen. Darunter ein schwarzer Fleck und ein langer dunkelgrauer Schatten nach rechts](/media/pixelart/licht-werte/licht-auf-kugel@2x.png "Kugel A mit allen Lichtzonen, daneben B in zwei Werten. Eigenes Schaubild") + options: + - text: Reflexlicht + correct: true + why: Licht, das vom Boden zurück in die Schattenseite fällt. Es ist heller als der Kernschatten, bleibt aber in der Schattenfamilie. + - text: Halbton + correct: false + why: Der Halbton liegt auf der Lichtseite, zwischen Licht und Kernschatten. + - text: Glanzlicht + correct: false + why: Das Glanzlicht ist der hellste Fleck auf der Seite zur Lichtquelle, hier oben links. + - text: Kontaktschatten + correct: false + why: Der Kontaktschatten liegt auf dem Boden, genau unter der Berührungsstelle, und ist der dunkelste Fleck im Bild. + explanation: | + Das Reflexlicht entsteht, weil der helle Boden Licht zurückwirft. Es hellt den Rand der Schattenseite auf, aber nur wenig: Es muss dunkler bleiben als alles auf der Lichtseite, sonst zerfällt die Form. Der Kernschatten liegt deshalb nicht am Rand, sondern als dunkelstes Band zwischen Terminator und Reflexlicht. + resources: + - title: Proko · How to Shade a Drawing + url: https://www.proko.com/course-lesson/how-to-shade-a-drawing/ + + - id: kugel-schattieren + type: order + title: Eine Kugel in fünf Schritten + prompt: | + Bring die Schritte zum Schattieren einer Kugel in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die Lichtrichtung als Pfeil festlegen. + Den Terminator als Grenze zwischen Licht- und Schattenseite einzeichnen. + Schattenseite und Schlagschatten mit einem flachen dunklen Wert füllen. + Den Kernschatten an der Grenze abdunkeln und das Reflexlicht am Rand leicht aufhellen. + Halbtöne auf der Lichtseite zur Grenze hin setzen, das Glanzlicht zuletzt. + alternatives: + - [1, 2, 3, 5, 4] + hints: + - Ohne Lichtrichtung weißt du nicht, wo die Grenze liegt. + explanation: | + Die Lichtrichtung bestimmt den Terminator, und der trennt die zwei Familien. Erst wenn die Schattenseite flach gefüllt ist, siehst du, ob die Form schon liest. Danach verfeinerst du beide Familien; ob du mit der Schatten- oder der Lichtseite anfängst, ist gleich. Das Glanzlicht kommt zuletzt, weil es am leichtesten zu viel wird. + resources: + - title: Proko · How to Shade a Drawing + url: https://www.proko.com/course-lesson/how-to-shade-a-drawing/ + + - id: schlagschatten-richtung + type: output + title: Wohin fällt der Schatten? + prompt: | + In deiner Top-down-Szene kommt das Licht von oben links, bezogen auf den Bildschirm. In welche Richtung auf dem Bildschirm fällt der Schlagschatten eines Fasses? Antworte mit zwei Wörtern. + lang: text + code: | + Licht: von oben links (Bildschirm) + Objekt: Fass auf dem Boden + expected: | + unten rechts + accept: + - nach unten rechts + - rechts unten + - nach rechts unten + - unten-rechts + - rechts-unten + explanation: | + Ein Schlagschatten zeigt immer von der Lichtquelle weg. Kommt das Licht von oben links, fällt er nach unten rechts. Diese Richtung gilt für jedes Objekt der Szene. Ein einziger Schatten in eine andere Richtung wirkt, als gäbe es eine zweite Lampe. + resources: + - title: Proko · How to Shade a Drawing + url: https://www.proko.com/course-lesson/how-to-shade-a-drawing/ + + - id: werteskala-mitte + type: output + title: Drei Gruppen auf der Skala + prompt: | + Du planst eine Studie mit drei Werten auf der Skala der Lektion: hell bei 1, dunkel bei 9. Der Mittelton soll von beiden gleich weit entfernt sein. Welche Stufe nimmst du? Antworte mit der Zahl. + lang: text + code: | + Skala: 1 (Weiß) bis 9 (fast Schwarz) + hell: 1 + dunkel: 9 + mittel: ? + expected: | + 5 + accept: + - Stufe 5 + - fünf + explanation: | + Von 1 bis 9 sind es acht Stufen, die Mitte liegt vier Stufen von jedem Ende entfernt, bei 5. Mit 1, 5 und 9 sind die drei Gruppen so weit wie möglich voneinander getrennt. In einem Sprite rückst du sie später oft enger zusammen, etwa für einen ruhigen Hintergrund, aber für eine Studie willst du klare Abstände. + resources: + - title: James Gurney · How Many Values? + url: https://gurneyjourney.blogspot.com/2018/01/how-many-values.html + + - id: werte-zaehlen + type: output + title: Wie viele Werte hat B? + prompt: | + Wie viele verschiedene Tonwerte nutzt Feld B? Antworte mit der Zahl. + + ![Zwei Fassungen einer Szene in Graustufen, Ball auf Kiste vor einer Wand. A mit zufällig verstreuten Werten, B mit klar getrennten Flächen](/media/pixelart/licht-werte/wertegruppen@2x.png "Verstreute Werte (A) und Wertegruppen (B). Eigenes Schaubild") + lang: text + code: | + Feld B: Ball auf Kiste vor einer Wand, + Licht von oben links + expected: | + 3 + accept: + - drei + - 3 Werte + - 3 Tonwerte + hints: + - Zähl hell, mittel und dunkel. Gibt es Flächen, die in keine dieser Gruppen passen? + explanation: | + B nutzt drei Werte: hell für die Flächen zum Licht (Ballseite, Kistenoberseite, Boden), mittel für Wand und Kistenfront, dunkel für die Schattenseite des Balls und die Schlagschatten. A nutzt bis zu fünf Grautöne, ohne Ordnung verteilt. Weniger Werte, klug gruppiert, lesen sich besser als mehr Werte ohne Ordnung. + resources: + - title: James Gurney · Why Should I Mass Values? + url: https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html + + - id: begriffe-licht + type: gap + title: Wörter für das Licht + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Die Helligkeit einer Fläche unabhängig vom Farbton heißt ⟦Tonwert⟧. Die Grenze, an der eine Form sich vom Licht abwendet, heißt ⟦Terminator⟧. Licht, das vom Boden zurück in die Schattenseite fällt, nennt man ⟦Reflexlicht⟧. Den Schatten, den ein Gegenstand auf den Boden wirft, nennt man ⟦Schlagschatten⟧. Der dunkelste Fleck genau an der Berührungsstelle heißt ⟦Kontaktschatten⟧. Die japanische Bezeichnung für die Gestaltung mit Hell und Dunkel lautet ⟦Notan⟧. + gaps: + - label: Helligkeit + hint: Auf Englisch „value“. + accept: ["value", "Helligkeitswert", "Wert", "Tonwerte"] + - label: Grenze + hint: Lateinisch, wörtlich „Begrenzer“. + accept: ["Schattengrenze", "Licht-Schatten-Grenze"] + - label: zurückgeworfenes Licht + hint: Auf Englisch „reflected light“. + accept: ["reflected light", "Reflex", "Reflexion"] + - label: geworfener Schatten + hint: Auf Englisch „cast shadow“. + accept: ["cast shadow", "Wurfschatten"] + - label: Berührungsstelle + hint: Proko nennt ihn „occlusion shadow“. + accept: ["occlusion shadow", "Okklusionsschatten", "Berührungsschatten"] + - label: Hell und Dunkel + hint: Vier Buchstaben, Arthur Wesley Dow machte den Begriff im Westen bekannt. + accept: ["Nōtan", "Notan-Design"] + explanation: | + Tonwert und Notan sind die großen Begriffe: Helligkeit und die Gestaltung mit ihr. Terminator, Reflexlicht, Schlagschatten und Kontaktschatten benennen die Zonen, die du an jeder beleuchteten Form wiederfindest. Mit diesen Wörtern kannst du eine Schattierung beschreiben, statt nur „sieht flach aus“ zu sagen. + resources: + - title: Wikipedia · Notan + url: https://en.wikipedia.org/wiki/Notan + + - id: reflexlicht-zu-dunkel + type: bug + title: Ein Loch am Kugelrand + prompt: | + Lehrbeispiel: Werteplan für eine Kugel auf der Skala der Lektion, 1 hell bis 9 dunkel. Nach diesem Plan schattiert, wirkt der untere Rand der Kugel wie ein Loch, und die Rundung unten geht verloren. Finde die Zeile. + lang: prose + code: | + Licht von oben links vorn. + Glanzlicht: Wert 1. + Licht: Wert 3. + Halbton: Wert 5. + Kernschatten: Wert 8. + Reflexlicht: Wert 9. + Schlagschatten: Wert 8. + lines: [6] + hints: + - Welche Zone soll heller sein als der Kernschatten? + explanation: | + Das Reflexlicht ist Licht, das vom Boden zurückfällt. Es muss heller sein als der Kernschatten, etwa Wert 7, und dunkler als alles auf der Lichtseite. Mit Wert 9 ist es das Dunkelste auf der Kugel, und der Rand wirkt wie ein Loch statt wie eine Rundung, die sich vom Boden abhebt. Der Kernschatten gehört als dunkelstes Band an die Grenze zum Licht, nicht an den Rand. + resources: + - title: Proko · How to Shade a Drawing + url: https://www.proko.com/course-lesson/how-to-shade-a-drawing/ + + - id: zweite-lampe + type: bug + title: Eine Kiste mit eigener Lampe + prompt: | + Lehrbeispiel: Lichtplan für eine Top-down-Szene. Im Bild wirkt eine Kiste, als würde sie von einer zweiten Lampe beleuchtet. Finde die Zeile. + lang: prose + code: | + Licht kommt von oben links. + Fass: Oberseite hell, linke Mantelhälfte Licht, rechte Hälfte Schatten. + Kiste: Oberseite hell, Front mittel. + Schlagschatten der Kiste fällt nach oben links. + Kontaktschatten unter beiden Objekten am dunkelsten. + lines: [4] + explanation: | + Ein Schlagschatten zeigt von der Lichtquelle weg, bei Licht von oben links also nach unten rechts. Die Kiste wirft ihren Schatten zur Lampe hin, als stünde auf der anderen Seite eine zweite. Alle anderen Zeilen passen zur Lichtrichtung. Schreib die Schattenrichtung deshalb in jeden Lichtplan und prüf jedes Objekt dagegen. + resources: + - title: Derek Yu · Pixel Art Tutorial · Form and Volume + url: https://www.derekyu.com/makegames/pixelart.html#form + + - id: wertegruppen-erklaeren + type: explain + title: Rauschen oder Gruppen + prompt: | + Sieh dir die zwei Fassungen an. Erkläre in drei bis fünf Sätzen, warum B sich besser liest als A, besonders auf Handygröße. + + ![Zwei Fassungen derselben Szene in Graustufen: Ball auf Kiste vor einer Wand. A mit zufällig verstreuten Werten, B mit drei klar getrennten Wertegruppen](/media/pixelart/licht-werte/wertegruppen@2x.png "Verstreute Werte (A) und drei Wertegruppen (B). Eigenes Schaubild") + lang: prose + code: | + A: dieselbe Szene, aber rund die Hälfte der Pixel weicht zufällig um eine Stufe ab. + B: drei Werte, nach Lage zum Licht verteilt. + points: + - In A weichen viele Pixel zufällig von ihrer Fläche ab; die Grenzen der Formen gehen im Rauschen unter. + - In B gehört jede Fläche zu einer von drei Gruppen, je nachdem, ob sie zum Licht zeigt, sich abwendet oder im Schatten liegt. + - Wenige große Wertegruppen lesen sich auch stark verkleinert, wie Gurney schreibt. + - Unwichtige Teile wie die Wand gehen in einer Masse auf; der Kontrast sitzt dort, wo der Ball an andere Werte grenzt. + explanation: | + A enthält dieselbe Szene, aber die zufälligen Abweichungen zerstören die Grenzen zwischen den Flächen. Das Auge muss die Formen aus einzelnen Pixeln zusammensetzen, und auf Handygröße gelingt das nicht mehr. In B ordnet jede Fläche sich einer von drei Gruppen zu, und die Grenzen zwischen den Gruppen sind die Formen. Gurney nennt genau das den Vorteil einer schlichten Tonwertgestaltung („simple tonal design“): Sie liest sich auf einen Blick, auch winzig. Die Wand verschmilzt zu einer ruhigen mittleren Masse, und der Ball bekommt den Kontrast, weil er hell vor Mittel und dunkel vor Hell steht. + resources: + - title: James Gurney · Why Should I Mass Values? + url: https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html + + - id: drei-werte-studie + type: practice + title: Eine Szene in drei Werten + prompt: | + Wähle eine Szene in deiner Nähe, etwa eine Haltestelle, einen Tisch mit Tasse oder ein Fenster. Zeichne in höchstens fünf Minuten ein Rechteck von etwa 5 × 4 cm und füll jede Fläche mit einem von drei Werten: Papierweiß, lockere Schraffur, dichte Schraffur. Fotografiere die Szene danach und stell das Foto auf Graustufen. + lang: prose + checklist: + - Die Studie nutzt genau drei Werte, und keine Fläche liegt dazwischen. + - Ein Pfeil zeigt die Lichtrichtung, und die hellen Flächen zeigen zu ihr hin. + - Jeder Wert bildet zusammenhängende Flächen, keine verstreuten Flecken. + - Du hast Studie und Graustufenfoto nebeneinandergelegt und eine Fläche notiert, die du in eine andere Gruppe eingeordnet hattest als das Foto. + - Der Timer stand am Ende bei höchstens fünf Minuten. + hints: + - Kneif die Augen zusammen, bevor du anfängst. Was übrig bleibt, sind deine drei Gruppen. + explanation: | + Drei Werte zwingen dich, jede Fläche einer Gruppe zuzuordnen. Das Foto in Graustufen ist eine Kontrolle, die du nicht mit dem Auge allein hättest: Es zeigt, wo du dich von Farbe hast täuschen lassen. Die notierte Abweichung ist das Lernergebnis der Übung. + resources: + - title: James Gurney · How Many Values? + url: https://gurneyjourney.blogspot.com/2018/01/how-many-values.html + + - id: kugel-alle-zonen + type: practice + title: Eine Kugel, alle Zonen + prompt: | + Leg eine Orange, einen Apfel oder einen Ball unter eine Lampe oder ans Fenster. Zeichne die Kugel zweimal nebeneinander: links mit allen Lichtzonen der Lektion, beschriftet, rechts mit nur zwei Werten für Licht- und Schattenseite. + lang: prose + checklist: + - In der linken Zeichnung sind Glanzlicht, Licht, Halbton, Terminator, Kernschatten, Reflexlicht, Kontaktschatten und Schlagschatten beschriftet. + - Der Schlagschatten zeigt in beiden Zeichnungen von der Lichtquelle weg, und ein Pfeil zeigt die Lichtrichtung. + - Das Reflexlicht ist heller als der Kernschatten und dunkler als jeder Wert auf der Lichtseite. + - Der Kontaktschatten ist der dunkelste Fleck im Bild. + - Die rechte Zeichnung hat auf der Kugel genau zwei Werte, getrennt an derselben Stelle wie links der Terminator. + hints: + - Das Reflexlicht siehst du am besten, wenn die Unterlage hell ist, etwa ein weißes Blatt. + explanation: | + Die beschriftete Fassung prüft, ob du die Zonen am echten Gegenstand findest, nicht nur im Schaubild. Die Zweiwertfassung zeigt, dass die Grenze zwischen Licht und Schatten die Form trägt. Die Regel für das Reflexlicht ist der Punkt, an dem Anfänger am häufigsten die zwei Familien vermischen. + resources: + - title: Proko · How to Shade a Drawing + url: https://www.proko.com/course-lesson/how-to-shade-a-drawing/ + + - id: foto-graustufen + type: practice + title: Farben, die in Grau verschwinden + prompt: | + Fotografiere drei bunte Motive, zum Beispiel ein Plakat, ein Obstregal und Kleidung an einem Ständer. Schreib vor dem Umstellen auf, welche zwei Farben deiner Meinung nach in Graustufen am ähnlichsten werden. Stell die Fotos dann mit einem Schwarz-Weiß-Filter auf Graustufen und vergleiche. + lang: prose + starter: | + Motiv 1 – Vermutung / Ergebnis: + Motiv 2 – Vermutung / Ergebnis: + Motiv 3 – Vermutung / Ergebnis: + checklist: + - Zu jedem Motiv steht deine Vermutung, notiert vor dem Umstellen. + - Zu jedem Motiv hast du ein Paar verschiedener Farben gefunden, das in Graustufen fast gleich hell ist. + - Mindestens einmal hast du notiert, ob deine Vermutung stimmte oder nicht. + - Die Graustufenfassungen liegen neben den Farbfotos in einem Ordner. + hints: + - Rot neben Grün und Gelb neben Hellblau sind häufige Kandidaten. + explanation: | + Die Vermutung vorher macht sichtbar, wie stark Farbe dein Urteil über Helligkeit lenkt. Paare, die in Graustufen verschmelzen, sind genau die Fallen, in die eine Figur vor einem Hintergrund gerät. Am PC wiederholst du die Prüfung mit einer Krita-Filterebene oder in Chromium mit der Achromatopsie-Simulation. + resources: + - title: Chrome DevTools · Emulate vision deficiencies + url: https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies diff --git a/content/pixelart/modules/linien-cluster.yaml b/content/pixelart/modules/linien-cluster.yaml new file mode 100644 index 00000000..a14bd1c9 --- /dev/null +++ b/content/pixelart/modules/linien-cluster.yaml @@ -0,0 +1,448 @@ +id: linien-cluster +title: Linien, Kurven und Cluster +level: 2 +minutes: 110 +summary: Warum eine Linie, die du mit der Maus ziehst, in Pixeln zittrig wirkt, wie du gerade Linien und Kurven aus gleichmäßigen Läufen baust und wie Cluster, Kantenglättung und Banding entscheiden, ob eine kleine Fläche ruhig oder verrauscht aussieht – geübt auf Karopapier und an Schaubildern. +place: unterwegs +goals: + - Du liest eine Pixellinie als Folge von Läufen und erkennst, ob sie gleichmäßig ist. + - Du baust gerade Linien in sauberen Steigungen und Kurven mit stetig wachsenden oder schrumpfenden Läufen. + - Du findest Doppelpixel, Knicke und verwaiste Pixel und erklärst, warum sie bei 1× stören. + - Du unterscheidest Cluster von Rauschen und erkennst Banding in einer Schattierung. + - Du setzt Kantenglättung von Hand an die Stufen einer Kante, statt sie dem Programm zu überlassen. +resources: + - title: Saint11 · An Absolute Beginner's Guide · Lines + url: https://saint11.art/pixel_art_articles/article1/#step-1-lines + - title: Saint11 · Anti-Alias and Banding + url: https://saint11.art/pixel_art_articles/article5/ + - title: Derek Yu · Pixel Art Tutorial · Jaggies + url: https://www.derekyu.com/makegames/pixelart.html#jaggies + - title: cure · The Pixel Art Tutorial (Pixel Joint) + url: https://pixeljoint.com/forum/forum_posts.asp?TID=11299 + - title: Pixelorama · Drawing · Pixel perfect + url: https://pixelorama.org/user_manual/drawing/#pixel-perfect +lesson: | + Du ziehst im Editor mit der Maus einen Bogen, so ruhig du kannst. In der Vergrößerung sieht er ordentlich aus. Bei 100 % zittert er: Hier sitzt eine Stufe zu viel, dort ein Pixel doppelt, und an einer Stelle knickt der Bogen, obwohl deine Hand gleichmäßig war. Bei einem Foto fällt das niemandem auf. Bei einem Sprite von 16 × 16 Pixeln hat das ganze Bild 256 Pixel, und jeder einzelne ist eine sichtbare Entscheidung. + + Dieses Modul übt die kleinste Ebene der Pixelart: wie Pixel zu Linien, Kurven und Flächen zusammenfinden. Du brauchst dafür keinen Rechner. Ein Bleistift und ein Heft mit Karopapier reichen, ein Kästchen ist ein Pixel. Am Handy liest du die Schaubilder und die Textraster in den Übungen. Den Editor richtest du im Modul [Einen Pixel-Editor wählen und einrichten](/pixelart/editor-einrichten) ein; dort setzt du dasselbe mit Maus und Tastatur um. + + ## Das Raster: eine Linie ist einen Pixel breit + + Eine Linie in Pixelart ist einen Pixel breit, und ihre Pixel berühren sich nur an den Ecken oder Kanten, nie doppelt. Pedro Medeiros (Saint11) nennt das eine „pixel perfect line, it's only 1 pixel wide and it connects diagonally“ ([An Absolute Beginner's Guide](https://saint11.art/pixel_art_articles/article1/#step-1-lines)). Er empfiehlt, mit 16 × 16 Pixeln anzufangen. Auf so kleiner Fläche lernst du schneller, weil jeder Fehler sofort auffällt. + + In den Übungen dieses Moduls stehen Pixel als Textraster, eine Zeile pro Pixelreihe: + + ```text + # # # . . . . . . . . . + . . . # # # . . . . . . + . . . . . . # # # . . . + . . . . . . . . . # # # + ``` + + `#` ist ein gesetzter Pixel, `.` ein leerer. Später kommen `+` für einen Mittelton und `-` für einen hellen Ton dazu. Auf Karopapier füllst du die Kästchen aus. Zeichne zuerst leicht, dann dunkel nach, sobald die Linie stimmt. + + > [!TIP] Karopapier im Bus + > Ein kleines Heft mit 5-mm-Karos passt in jede Jackentasche. Rahme dir ein Feld von 16 × 16 Kästchen ein. Größer brauchst du für dieses Modul nicht, und so ein Feld füllst du zwischen zwei Haltestellen. + + ## Gerade Linien: Läufe und Steigungen + + Ein **Lauf** ist eine Folge von Pixeln in derselben Reihe oder Spalte. Die Linie oben besteht aus vier Läufen zu je drei Pixeln. Weil alle Läufe gleich lang sind, wirkt sie gerade. Saint11 fasst die Regel für gerade Linien so: Jede Stufe hat „the same number of pixels“ ([Fundamentals 2](https://saint11.art/img/pixel-tutorials/Fundamentals2.gif)). + + ![Vier Linien im Pixelraster. A steigt mit Läufen von einem Pixel diagonal, B mit Läufen von zwei Pixeln, C mit Läufen von drei Pixeln, D mit Läufen von 3, 1, 2, 1, 3 und 2 Pixeln, die unruhig wirken](/media/pixelart/linien-cluster/steigungen@2x.png "Läufe von 1, 2 und 3 Pixeln (A–C) und eine Linie mit ungleichen Läufen (D). Eigenes Schaubild") + + Die Steigung einer Linie ergibt sich aus der Lauflänge. Läufe von einem Pixel ergeben 45° (A), Läufe von zwei Pixeln das Verhältnis 2 : 1 (B), von drei Pixeln 3 : 1 (C). D hat keine feste Lauflänge. Derek Yu nennt solche Stellen **Jaggies**: „single pixels or small segments of pixels that break up the consistency of a line“ ([Pixel Art Tutorial](https://www.derekyu.com/makegames/pixelart.html#jaggies)). Das Auge liest den Rhythmus der Läufe und stolpert über jede Unregelmäßigkeit. + + Nicht jeder Winkel hat eine ganze Lauflänge. Eine Linie, die auf 9 Pixel Breite 6 Reihen steigt, braucht im Schnitt 1,5 Pixel pro Lauf. Dann wiederholst du ein Muster: 2, 1, 2, 1, 2, 1. Ein regelmäßiges Muster wirkt ebenfalls gerade, weil der Rhythmus gleich bleibt. Unruhig wird es erst, wenn das Muster bricht. + + Mit der Maus triffst du keinen Winkel sauber. Setz Anfang und Ende und lass das Programm verbinden. In Aseprite zieht Shift eine Gerade vom zuletzt gesetzten Pixel, mit Ctrl dazu rastet der Winkel ein ([Keyboard Shortcuts](https://www.aseprite.org/docs/keyboard-shortcuts/#action-modifiers)). Pixelorama und LibreSprite haben ein Linienwerkzeug. Wähl die Endpunkte so, dass Breite und Höhe ein sauberes Verhältnis ergeben: 12 breit und 4 hoch ergibt Läufe von drei Pixeln. 12 breit und 5 hoch geht nicht auf; dann bleibt ein Muster aus benachbarten Zahlen wie 2, 3, 2, 3, 2, das Saint11 „non-ideal but useful“ nennt. + + > [!MERKE] + > Gerade heißt in Pixelart: gleich lange Läufe oder ein Muster, das sich regelmäßig wiederholt. + + ## Kurven: Läufe, die stetig wachsen oder schrumpfen + + Eine Kurve ist eine Linie, deren Steigung sich ändert. In Pixeln heißt das: Die Läufe werden von Stufe zu Stufe länger oder kürzer. Saint11 schreibt, „each step should be smaller than the previous“ ([Fundamentals 2](https://saint11.art/img/pixel-tutorials/Fundamentals2.gif)), wenn eine Kurve abflacht oder steiler wird. + + ![Zwei ansteigende Kurven im Pixelraster. A hat von unten links nach oben rechts die Läufe 1, 1, 1, 2, 3, 4. B hat die Läufe 1, 2, 1, 3, 1, 4 und wirkt bucklig](/media/pixelart/linien-cluster/kurven-laufstrecken@2x.png "Stetige Läufe (A) und springende Läufe (B), beide 12 Pixel breit. Eigenes Schaubild") + + Beide Kurven in der Abbildung sind 12 Pixel breit und 6 Reihen hoch. A wird gleichmäßig flacher: 1, 1, 1, 2, 3, 4. B springt zwischen kurzen und langen Läufen: 1, 2, 1, 3, 1, 4. Jeder Sprung von lang zu kurz ist ein Knick, und B sieht aus wie eine Treppe mit Buckeln. Zum Prüfen zählst du die Läufe und schreibst sie als Zahlenfolge auf. Steigt oder fällt die Folge ohne Ausreißer, ist die Kurve glatt. Gleiche Läufe hintereinander sind erlaubt, sie sind ein Stück gerader Linie in der Kurve. + + Kreise und Ellipsen sind zusammengesetzte Kurven. Oben und unten liegen die langen Läufe, an den Seiten die kurzen. Ein Kreis wirkt rund, wenn alle vier Viertel dieselbe Folge haben, gespiegelt. + + ### Doppelpixel: wo die Linie dicker wird + + Zieht deine Hand eine Kurve, entstehen fast immer Ecken in L-Form: An einer Stufe sitzt ein Pixel zusätzlich, der eine waagerechte und eine senkrechte Verbindung herstellt. Die Linie ist an dieser Stelle zwei Pixel dick. + + ![Zwei Viertelbögen im Pixelraster. A enthält fünf orange markierte Pixel, die an den Stufen L-förmige Ecken bilden. B ist derselbe Bogen ohne diese Pixel](/media/pixelart/linien-cluster/doppelte-pixel@2x.png "Doppelpixel orange markiert (A) und bereinigter Bogen (B). Eigenes Schaubild") + + Saint11 nennt Jaggies „unintentional corners that appear in pixel art, usually when making natural hand movements“ ([Article 2](https://saint11.art/pixel_art_articles/article2/#step-3-fix-jaggies-and-add-detail)). Das Wort „unintentional“ zählt: Eine Ecke, die du willst, etwa an einer Kiste, ist kein Fehler. Editoren haben dafür einen Pixel-perfect-Modus. Pixelorama beschreibt ihn als „automatically removing the middle pixel of L-shapes“ ([Pixel perfect](https://pixelorama.org/user_manual/drawing/#pixel-perfect)), Aseprite schaltet ihn in der Kontextleiste des Stifts an ([Pixel-perfect mode](https://www.aseprite.org/docs/context-bar/#pixel-perfect-mode)). + + > [!WARNING] Pixel-perfect nur für Linien + > Der Modus entfernt beim Zeichnen Pixel aus L-Formen. Malst du mit dem Stift eine Fläche oder einen Cluster in mehreren Strichen, fehlen danach Pixel. Schalte ihn für Konturen ein und für Flächen aus, oder füll Flächen mit dem Füllwerkzeug. + + ## Cluster und verwaiste Pixel + + Ein **Cluster** ist eine zusammenhängende Gruppe von Pixeln derselben Farbe. Aus Clustern entstehen Formen: ein Lichtfleck, ein Schatten, ein Stein. Ein **verwaister Pixel** (Orphan Pixel) steht allein. Saint11 definiert ihn als Pixel, der „not part of a bigger group of pixels of the same color and are not part of the anti-alias“ ist ([Article 1](https://saint11.art/pixel_art_articles/article1/)), Raymond Schlitter (Slynyrd) als „single pixel units not connected to a cluster of the same color“ ([Pixelblog 2](https://www.slynyrd.com/blog/2018/2/15/pixelblog-2-texture)). + + ![Zwei schattierte Kugeln im Pixelraster, Licht von oben links. A enthält viele einzelne Pixel in fremden Tönen, die wie Schmutz wirken. B hat dieselben vier Töne in zusammenhängenden Flächen](/media/pixelart/linien-cluster/cluster@2x.png "Verwaiste Pixel (A) und saubere Cluster (B) bei gleicher Palette. Eigenes Schaubild") + + Beide Kugeln nutzen dieselben vier Töne. In A sind rund ein Fünftel der Pixel durch einen Nachbarton ersetzt. Im Zoom wirkt das wie Struktur, bei 1× wie Rauschen oder Schmutz, und die Form der Kugel wird unscharf. In B folgen die Cluster der Rundung: Die Grenze zwischen zwei Tönen läuft als Kurve über die Kugel. Damit gelten die Regeln für Linien auch für Flächen: Die Kante eines Clusters ist eine Linie und sollte glatte Läufe haben. + + Eine schnelle Prüfung: Jeder Pixel berührt mindestens einen Nachbarn in derselben Farbe. Ausnahmen setzt du bewusst, etwa ein Glanzlicht im Auge oder einen Pixel zur Kantenglättung. + + ## Banding: wenn sich eine Kante verdoppelt + + Beim Schattieren entsteht ein Fehler, den beide Standardquellen verschieden fassen. cure schreibt auf Pixel Joint: „Banding, most simply, is when pixels line up.“ ([The Pixel Art Tutorial](https://pixeljoint.com/forum/forum_posts.asp?TID=11299)) Saint11: „Banding happens when we have multiple color bands that are clearly distinct from one another.“ ([Anti-Alias and Banding](https://saint11.art/pixel_art_articles/article5/#banding)) Beide meinen dieselbe Wirkung: Tonstreifen laufen parallel nebeneinander her, und das Auge sieht statt einer Fläche ein Bündel Linien. + + ![Eine schräge Kante mit Läufen von zwei Pixeln. In A läuft direkt darunter ein mittelgrauer Streifen mit genau denselben Stufen. In B liegt der mittelgraue Ton als eigene Fläche unten links mit einer steileren Grenze](/media/pixelart/linien-cluster/banding@2x.png "Banding (A): Der Mittelton wiederholt die Stufen der Kante. Getrennte Schattenform (B). Eigenes Schaubild") + + In A wiederholt der Mittelton jede Stufe der dunklen Kante. Das liest sich wie eine zwei Pixel dicke, verwaschene Linie. In B ist der Mittelton eine eigene Form mit einer anderen Steigung. Die Kante bleibt scharf, und der Schatten wirkt wie ein Schatten. Banding beseitigst du, indem du Clusterbreiten variierst, die Grenze zwischen zwei Tönen in einem anderen Winkel führst oder zwei Bänder zu einem zusammenfasst. + + ## Kantenglättung von Hand + + Eine Stufe zwischen zwei Läufen bleibt sichtbar, auch wenn die Läufe stimmen. **Kantenglättung** (Anti-Aliasing, AA) setzt Zwischentöne in die Stufen, damit die Kante weicher wirkt ([Derek Yu: Anti-aliasing](https://www.derekyu.com/makegames/pixelart.html#aa)). Saint11 erklärt in [What is alias](https://saint11.art/pixel_art_articles/article5/#what-is-alias-and-why-people-dont-like-it), woher die harten Stufen kommen. + + ![Ein dunkler Hügel vor hellem Grund. A hat harte Stufen. B hat an den Stufen einzelne mittel- und hellgraue Pixel, die den Übergang weicher machen](/media/pixelart/linien-cluster/kantenglaettung@2x.png "Ohne Kantenglättung (A) und mit Zwischentönen an den Stufen (B). Eigenes Schaubild") + + Drei Regeln helfen. Erstens: Lange Läufe bekommen längere Übergänge, kurze Läufe meist keinen. Zweitens: Der Zwischenton sitzt auf der Seite der Stufe, die die Kurve verlängert. Drittens: Weniger ist mehr. Glättest du jede Stufe, verschwimmt die Form wie in einem verkleinerten Foto. Programme glätten Formen und Pinselstriche automatisch. In Pixelart ist das meist abgeschaltet, weil du jeden Zwischenton selbst wählen willst. + + An der Außenkante eines Sprites ist Kantenglättung heikel. Der Zwischenton mischt die Figurfarbe mit einer Hintergrundfarbe. Läuft die Figur später über Gras, Stein und Wasser, passt dieser Mischton nur auf einem Untergrund und wirkt auf den anderen wie ein heller oder dunkler Saum. Innerhalb der Figur, zwischen zwei bekannten Farben, gibt es dieses Problem nicht. + + > [!PRAXIS] + > Pixel Artists trennen Skizze und Reinzeichnung. Erst setzen sie die Form grob, oft in einer eigenen Ebene, dann ziehen sie in einem zweiten Durchgang die Linien sauber: Läufe angleichen, Doppelpixel entfernen, Knicke glätten. Saint11 zeigt diesen Schritt in [Article 2](https://saint11.art/pixel_art_articles/article2/#step-3-fix-jaggies-and-add-detail) als eigene Phase „fix jaggies and add detail“. Für dich heißt das: Erwarte nicht, dass der erste Strich stimmt. Plane den Aufräumdurchgang ein. + + > [!INTERVIEW] + > Im Art-Test eines Studios oder im Portfolio-Gespräch fragt jemand: „Warum wirkt dieser Bogen zittrig?“ Gute Antwort: Du zählst die Läufe und zeigst, wo die Folge springt oder wo ein Doppelpixel die Linie verdickt. Dann sagst du, wie du es behebst: Läufe stetig machen, L-Ecken entfernen, Kantenglättung nur an langen Läufen. Wer Pixel in Läufen beschreibt statt mit „sieht komisch aus“, zeigt, dass er sein Handwerk versteht. + + ## Häufige Fehler + + - **Freihand mit der Maus.** Lange Linien und Bögen entstehen mit dem Linienwerkzeug oder mit Shift-Klick, nicht mit einem Zug der Hand. + - **Doppelpixel.** L-Ecken machen eine Linie stellenweise doppelt so dick. Pixel-perfect für Konturen einschalten oder von Hand entfernen. + - **Springende Läufe in Kurven.** Schreib die Lauflängen als Zahlenfolge auf. Ein Ausreißer ist ein Knick. + - **Winkel ohne Muster.** Wähl Endpunkte so, dass Breite und Höhe ein sauberes Verhältnis ergeben, oder nimm ein regelmäßiges Muster wie 2, 1, 2, 1. + - **Verwaiste Pixel als „Detail“.** Einzelne Pixel lesen sich bei 1× als Rauschen. Detail entsteht aus Clustern. + - **Banding.** Tonstreifen, die den Stufen einer Kante folgen, verdoppeln die Kante. Den Schatten als eigene Form anlegen. + - **Zu viel Kantenglättung.** Jede Stufe zu glätten macht die Form weich und unscharf, an der Außenkante entsteht ein Saum. + - **Nur im Zoom geprüft.** Was bei 800 % ordentlich aussieht, kann bei 100 % zittern. Prüf jedes Zwischenergebnis in Originalgröße. + + ## Zusammenfassung + + - Eine Pixellinie ist einen Pixel breit und verbindet sich diagonal, ohne Doppelpixel. + - Gerade Linien haben gleich lange Läufe oder ein regelmäßiges Muster. Die Lauflänge bestimmt die Steigung. + - Kurven haben Läufe, die stetig länger oder kürzer werden. Ein Sprung in der Folge ist ein Knick. + - Jaggies sind ungewollte Ecken. Gewollte Ecken an harten Formen sind keine Fehler. + - Cluster sind zusammenhängende Pixel einer Farbe, verwaiste Pixel stehen allein und wirken als Rauschen. + - Banding entsteht, wenn Tonstreifen parallel zur Kante laufen. Schattenformen brauchen eigene Grenzen. + - Kantenglättung setzt Zwischentöne an langen Läufen, sparsam und vorsichtig an der Außenkante. +exercises: + - id: pixellinie-merkmale + type: choice + title: Was macht eine saubere Pixellinie aus? + prompt: | + Welche Aussagen über Linien in Pixelart stimmen? + options: + - text: Eine saubere Linie ist einen Pixel breit, und ihre Pixel verbinden sich diagonal oder an den Kanten, nie doppelt. + correct: true + why: Genau so beschreibt Saint11 die „pixel perfect line“. Jeder zusätzliche Pixel an einer Stufe verdickt die Linie. + - text: Eine Linie mit den Läufen 2, 1, 2, 1, 2, 1 wirkt gerade, weil sich das Muster regelmäßig wiederholt. + correct: true + why: Das Auge liest den Rhythmus. Für Winkel ohne ganze Lauflänge ist ein wiederholtes Muster die saubere Lösung. + - text: Jede Ecke in einer Kontur ist ein Jaggy und muss entfernt werden. + correct: false + why: Jaggies sind ungewollte Ecken. Die Kante einer Kiste oder die Spitze eines Dachs sind gewollt. + - text: Kantenglättung an jeder Stufe macht eine Linie in Pixelart immer besser. + correct: false + why: Zu viel Glättung macht die Form weich und unscharf. Zwischentöne gehören an lange Läufe, sparsam. + explanation: | + Eine Pixellinie wird über ihre Läufe gelesen. Gleich lange Läufe oder ein regelmäßiges Muster ergeben eine gerade Linie, jede Unregelmäßigkeit ist ein Jaggy. Ob eine Ecke ein Fehler ist, hängt davon ab, ob du sie willst. Kantenglättung ist ein Werkzeug für bestimmte Stellen, keine Pflicht für jede Stufe. + resources: + - title: Saint11 · An Absolute Beginner's Guide · Lines + url: https://saint11.art/pixel_art_articles/article1/#step-1-lines + + - id: kurven-vergleichen + type: choice + title: Welche Kurve ist glatter? + prompt: | + Sieh dir das Schaubild an. Beide Kurven sind 12 Pixel breit und 6 Reihen hoch. Welche Aussage trifft zu? + + ![Zwei ansteigende Kurven im Pixelraster. A hat von unten links nach oben rechts die Läufe 1, 1, 1, 2, 3, 4. B hat die Läufe 1, 2, 1, 3, 1, 4](/media/pixelart/linien-cluster/kurven-laufstrecken@2x.png "Zwei Kurven mit gleicher Breite und Höhe. Eigenes Schaubild") + options: + - text: A ist glatter, weil die Läufe ohne Ausreißer länger werden. + correct: true + why: Die Folge 1, 1, 1, 2, 3, 4 steigt stetig. Die Kurve flacht gleichmäßig ab. + - text: B ist glatter, weil die Läufe abwechslungsreicher sind. + correct: false + why: Abwechslung ist hier das Problem. Jeder Sprung von einem langen zu einem kurzen Lauf ist ein Knick. + - text: Beide sind gleich glatt, weil sie gleich viele Pixel haben. + correct: false + why: Die Zahl der Pixel ist gleich, ihre Verteilung nicht. Glätte hängt an der Reihenfolge der Läufe. + - text: B ist glatter, weil sie mit dem längsten Lauf endet. + correct: false + why: Auch A endet mit dem längsten Lauf. Entscheidend ist, was dazwischen passiert. + explanation: | + Eine Kurve ist eine Linie mit sich ändernder Steigung. In Pixeln bedeutet das Läufe, die stetig länger oder kürzer werden. B wechselt dreimal zwischen kurz und lang und bekommt dadurch drei Buckel. Zum Prüfen schreibst du die Läufe als Zahlenfolge auf, das geht auch ohne Bild. + resources: + - title: Saint11 · Fundamentals 2 (Linien und Kurven) + url: https://saint11.art/img/pixel-tutorials/Fundamentals2.gif + + - id: linie-aufraeumen + type: order + title: Eine Kontur aufräumen + prompt: | + Du hast eine Kontur grob gesetzt und willst sie sauber ziehen. Bring die Schritte in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die grobe Form in einer eigenen Ebene oder leicht mit Bleistift setzen. + Die Läufe jedes Abschnitts zählen und als Zahlenfolge notieren. + Springende Läufe angleichen, bis jede Folge stetig steigt oder fällt. + Doppelpixel an den Stufen entfernen. + Die Kontur in Originalgröße ansehen. + An langen Läufen sparsam Zwischentöne setzen. + explanation: | + Erst brauchst du die Form, sonst räumst du etwas auf, das sich noch ändert. Läufe zählen kommt vor dem Angleichen, weil du erst danach weißt, welcher Lauf ausreißt. Doppelpixel entfernst du nach dem Angleichen, weil sich beim Verschieben neue L-Ecken bilden können. Die Prüfung in Originalgröße zeigt, ob noch etwas zittert. Kantenglättung kommt zuletzt, denn sie verdeckt Fehler im Verlauf, statt sie zu beheben. + resources: + - title: Saint11 · Article 2 · Fix jaggies and add detail + url: https://saint11.art/pixel_art_articles/article2/#step-3-fix-jaggies-and-add-detail + + - id: lauflaenge-steigung + type: output + title: Wie lang ist jeder Lauf? + prompt: | + Eine gerade Linie soll von links unten nach rechts oben 12 Pixel breit und 4 Reihen hoch werden, mit gleich langen Läufen. Wie viele Pixel hat jeder Lauf? Antworte mit der Zahl. + lang: text + code: | + Breite: 12 Pixel + Höhe: 4 Reihen + Läufe: alle gleich lang + expected: | + 3 + accept: + - 3 Pixel + - 3 px + - drei + hints: + - Jede Reihe enthält genau einen Lauf. + explanation: | + Vier Reihen heißen vier Läufe, und zusammen müssen sie 12 Pixel breit sein: 12 ÷ 4 = 3. Das ergibt die Steigung 3 : 1. Wählst du 12 breit und 5 hoch, geht die Rechnung nicht auf, und die Linie bekommt ungleiche Läufe. Deshalb lohnt es sich, Endpunkte vorher so zu wählen, dass die Teilung aufgeht. + resources: + - title: Aseprite Docs · Keyboard Shortcuts · Action modifiers (Shift-Linie) + url: https://www.aseprite.org/docs/keyboard-shortcuts/#action-modifiers + + - id: laeufe-ablesen + type: output + title: Läufe ablesen + prompt: | + Notiere die Lauflängen dieser Kurve von unten links nach oben rechts, getrennt durch Leerzeichen. + lang: text + code: | + . . . . . . . . # # # # + . . . . . # # # . . . . + . . . # # . . . . . . . + . . # . . . . . . . . . + . # . . . . . . . . . . + # . . . . . . . . . . . + expected: | + 1 1 1 2 3 4 + accept: + - 1, 1, 1, 2, 3, 4 + - 1,1,1,2,3,4 + - 111234 + hints: + - Fang in der untersten Reihe an. Jede Reihe ist ein Lauf. + explanation: | + Von unten gelesen hat jede Reihe einen Lauf: 1, 1, 1, 2, 3, 4. Die Folge steigt ohne Ausreißer, die Kurve flacht also gleichmäßig ab. Die drei Einer am Anfang sind ein Stück 45°-Linie, das ist erlaubt. Diese Zahlenfolge ist das Werkzeug, mit dem du jede Kurve prüfst, auch ohne sie zu sehen. + resources: + - title: Saint11 · Fundamentals 2 (Linien und Kurven) + url: https://saint11.art/img/pixel-tutorials/Fundamentals2.gif + + - id: kurvenbreite + type: output + title: Wie breit wird der Bogen? + prompt: | + Ein Bogen fällt von oben links nach unten rechts. Seine waagerechten Läufe sind von oben nach unten 5, 3, 2, 1, 1, jeder Lauf in einer eigenen Reihe. Wie viele Pixel ist der Bogen breit? Antworte mit der Zahl. + lang: text + code: | + Läufe von oben: 5, 3, 2, 1, 1 + jeder Lauf: eine Reihe + expected: | + 12 + accept: + - 12 Pixel + - 12 px + hints: + - Die Läufe liegen nebeneinander versetzt, ihre Längen addieren sich. + explanation: | + Jeder Lauf beginnt eine Spalte rechts vom Ende des vorigen. Die Breite ist also die Summe: 5 + 3 + 2 + 1 + 1 = 12. Höhe: fünf Reihen. Mit dieser Rechnung planst du auf Karopapier, wie viel Platz ein Bogen braucht, bevor du das erste Kästchen füllst. + + - id: begriffe-linien + type: gap + title: Fachbegriffe der Pixellinie + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Eine Folge von Pixeln in derselben Reihe oder Spalte heißt ⟦Lauf⟧. Eine ungewollte Ecke, die den Fluss einer Linie stört, nennen Pixel Artists ⟦Jaggy⟧. Ein Pixel, der allein steht und zu keiner Gruppe seiner Farbe gehört, ist ein ⟦verwaister⟧ Pixel. Eine zusammenhängende Gruppe von Pixeln derselben Farbe heißt ⟦Cluster⟧. Zwischentöne, die eine Stufe weicher machen, nennt man ⟦Kantenglättung⟧. Laufen Tonstreifen parallel zur Kante, spricht man von ⟦Banding⟧. + gaps: + - label: Pixelfolge + hint: Kurzes deutsches Wort, man „läuft“ an einer Linie entlang. + accept: ["Run", "Läufe"] + - label: ungewollte Ecke + hint: Englisches Wort, verwandt mit „gezackt“. + accept: ["Jaggies", "Zacke"] + - label: allein stehender Pixel + hint: Auf Englisch „orphan“. + accept: ["orphan", "einzelner", "verwaiste"] + - label: Pixelgruppe + hint: Englisches Wort, auch im Deutschen üblich. + accept: ["Klumpen", "Cluster-Fläche"] + - label: weiche Stufen + hint: Auf Englisch „Anti-Aliasing“. + accept: ["Anti-Aliasing", "Antialiasing", "AA"] + - label: parallele Tonstreifen + hint: Englisches Wort, darin steckt „band“. + accept: ["Bänderung", "Streifenbildung"] + explanation: | + Mit diesen sechs Begriffen kannst du jede kleine Pixelfläche beschreiben. Läufe bestimmen Steigung und Glätte einer Linie, Jaggies und verwaiste Pixel sind die häufigsten Störungen. Cluster sind die Bausteine von Flächen, Kantenglättung und Banding zwei Seiten derselben Frage: wie Töne an einer Kante zusammenkommen. + resources: + - title: Derek Yu · Pixel Art Tutorial · Jaggies + url: https://www.derekyu.com/makegames/pixelart.html#jaggies + + - id: doppelpixel-finden + type: bug + title: Hier wird die Linie dicker + prompt: | + Die Linie soll aus vier Läufen zu je drei Pixeln bestehen. An einer Stelle wirkt sie bei 1× dicker. Finde die Zeile. + lang: text + code: | + # # # . . . . . . . . . + . . # # # # . . . . . . + . . . . . . # # # . . . + . . . . . . . . . # # # + lines: [2] + hints: + - Vergleiche, wo jeder Lauf beginnt und wo der vorige endet. + explanation: | + Der erste Lauf endet in Spalte 3, der zweite beginnt ebenfalls in Spalte 3. Der Pixel ganz links in Zeile 2 sitzt direkt unter dem letzten Pixel der ersten Reihe und bildet eine L-Ecke. Ohne ihn hat Zeile 2 genau drei Pixel und beginnt diagonal versetzt, wie die anderen. Genau diesen Pixel entfernt der Pixel-perfect-Modus beim Zeichnen. + resources: + - title: Pixelorama · Drawing · Pixel perfect + url: https://pixelorama.org/user_manual/drawing/#pixel-perfect + + - id: knick-finden + type: bug + title: Der Bogen hat einen Buckel + prompt: | + Der Bogen soll von oben rechts nach unten links gleichmäßig steiler werden. Er hat aber einen Buckel. Finde die beiden Zeilen, deren Läufe nicht zur Folge passen. + lang: text + code: | + . . . . . . . . # # # # + . . . . . . # # . . . . + . . . # # # . . . . . . + . . # . . . . . . . . . + . # . . . . . . . . . . + # . . . . . . . . . . . + lines: [2, 3] + hints: + - Schreib die Lauflängen von oben nach unten als Zahlenfolge auf. + - In einem gleichmäßig steiler werdenden Bogen wird kein Lauf länger als sein Vorgänger. + explanation: | + Die Läufe sind von oben 4, 2, 3, 1, 1, 1. Nach der 2 kommt eine 3, der Bogen wird also kurz flacher und dann wieder steiler. Tauschst du die Läufe von Zeile 2 und 3, ergibt sich 4, 3, 2, 1, 1, 1, eine stetig fallende Folge. Die Breite bleibt 12 Pixel, nur die Verteilung ändert sich. + resources: + - title: Saint11 · Fundamentals 2 (Linien und Kurven) + url: https://saint11.art/img/pixel-tutorials/Fundamentals2.gif + + - id: cluster-diagnose + type: choice + title: Rauschen oder Form? + prompt: | + Beide Kugeln nutzen dieselben vier Töne und dieselbe Lichtrichtung. Welche Aussagen treffen zu? + + ![Zwei schattierte Kugeln im Pixelraster. A enthält viele einzelne Pixel in fremden Tönen. B hat dieselben Töne in zusammenhängenden Flächen](/media/pixelart/linien-cluster/cluster@2x.png "Zwei Kugeln mit gleicher Palette. Eigenes Schaubild") + options: + - text: In A stehen viele Pixel allein in einem fremden Ton. Bei 1× wirken sie wie Schmutz. + correct: true + why: Das sind verwaiste Pixel. Im Zoom wirken sie wie Struktur, in Originalgröße als Rauschen. + - text: In B folgen die Grenzen zwischen den Tönen der Rundung der Kugel. + correct: true + why: Die Cluster bilden Bänder, die sich um die Form legen. So liest man die Kugel als rund. + - text: A hat mehr Detail und ist deshalb die bessere Wahl für ein kleines Sprite. + correct: false + why: Einzelne Pixel sind kein Detail, sondern Rauschen. Detail entsteht aus Clustern mit lesbarer Form. + - text: Der Unterschied verschwindet bei 1×, weil die Kugeln dann zu klein sind. + correct: false + why: Gerade bei 1× fällt Rauschen auf, weil das Auge die Form nicht mehr aus einzelnen Pixeln zusammensetzt. + explanation: | + Cluster sind die Bausteine einer Fläche. Ihre Kanten sind Linien und sollten der Form folgen. Verwaiste Pixel zerstören diese Kanten und lassen die Form flimmern. Prüf deshalb, ob jeder Pixel mindestens einen Nachbarn derselben Farbe hat, und setz Ausnahmen wie ein Glanzlicht bewusst. + resources: + - title: Slynyrd · Pixelblog 2 · Texture + url: https://www.slynyrd.com/blog/2018/2/15/pixelblog-2-texture + + - id: banding-erklaeren + type: explain + title: Zwei Schatten an derselben Kante + prompt: | + Beide Raster zeigen dieselbe dunkle Kante (`#`) über einer hellen Fläche (`-`) mit einem Mittelton (`+`). Erkläre in drei bis fünf Sätzen, warum A verwaschen wirkt und B nicht. + lang: text + code: | + A + # # . . . . . . . . . . + + + # # . . . . . . . . + - - + + # # . . . . . . + - - - - + + # # . . . . + - - - - - - + + # # . . + - - - - - - - - + + # # + + B + # # . . . . . . . . . . + - - # # . . . . . . . . + - - - - # # . . . . . . + + - - - - - # # . . . . + + + - - - - - - # # . . + + + + - - - - - - - # # + points: + - In A folgt der Mittelton jeder Stufe der Kante mit derselben Lauflänge, die Pixel liegen parallel. + - Dadurch liest das Auge in A eine doppelt dicke, unscharfe Kante statt einer Kante und einer Fläche. + - In B ist der Mittelton eine eigene Form mit anderer Steigung, die Kante bleibt einen Pixel breit. + - Abhilfe gegen Banding sind andere Winkel, verschiedene Clusterbreiten oder weniger Bänder. + explanation: | + A ist ein Lehrbuchfall von Banding: Der Mittelton läuft im Gleichschritt mit der dunklen Kante, jede Stufe wiederholt sich eine Reihe tiefer. cure fasst das als „pixels line up“, Saint11 als deutlich getrennte Farbbänder. Das Ergebnis ist eine Kante, die doppelt so dick und weich wirkt. In B hat der Mittelton eine steilere Grenze und sitzt als eigene Schattenform unten links. Die Kante bleibt scharf, und der Schatten beschreibt die Form, statt die Linie zu verdoppeln. + resources: + - title: Saint11 · Anti-Alias and Banding · Banding + url: https://saint11.art/pixel_art_articles/article5/#banding + + - id: linien-karopapier + type: practice + title: Linien und ein Kreis auf Karopapier + prompt: | + Rahme auf Karopapier vier Felder von 16 × 16 Kästchen ein. Zeichne ins erste Feld je eine Linie mit Läufen von 1, 2 und 3 Kästchen, ins zweite eine Linie mit dem Muster 2, 1, 2, 1. Ins dritte setzt du einen Kreis mit 12 Kästchen Durchmesser. Ins vierte ziehst du freihändig eine Welle und räumst sie danach nach den Regeln der Lektion auf. Notiere unter jeder Kurve die Lauffolge eines Viertels. + lang: prose + checklist: + - Jede gerade Linie hat durchgehend gleiche Läufe oder ein Muster ohne Bruch. + - Keine Linie und kein Kreis enthält eine L-Ecke. + - Die vier Viertel des Kreises haben dieselbe Lauffolge, gespiegelt, und du hast sie notiert. + - Die Welle hat nach dem Aufräumen in jedem Bogen eine stetig steigende oder fallende Lauffolge. + - Du hast das Blatt aus einem Meter Abstand angesehen und notiert, welche Stelle dir dann noch auffällt. + hints: + - Für den Kreis zeichnest du zuerst ein Viertel und überträgst die Läufe dann gespiegelt auf die anderen drei. + explanation: | + Auf Papier musst du jede Stufe bewusst setzen, es gibt kein Werkzeug, das sie für dich glättet. Das trainiert genau das Lesen in Läufen, das du später im Editor brauchst. Der Abstand von einem Meter ersetzt die Ansicht bei 1×: Was dann noch auffällt, stört auch im Spiel. + resources: + - title: Saint11 · An Absolute Beginner's Guide + url: https://saint11.art/pixel_art_articles/article1/ + + - id: kugel-cluster + type: practice + title: Eine Kugel aus drei Tönen + prompt: | + Zeichne auf Karopapier in ein Feld von 16 × 16 Kästchen eine Kugel mit Kontur. Leg die Lichtrichtung fest und markiere sie mit einem Pfeil. Schattiere mit drei Tönen: leer für hell, schraffiert für mittel, ausgefüllt für dunkel. Prüf danach jeden Pixel und räum auf. + lang: prose + checklist: + - Die Lichtrichtung ist eingezeichnet, und der hellste Bereich liegt auf ihrer Seite. + - Jeder Pixel eines Tons berührt mindestens einen Pixel desselben Tons, Ausnahmen hast du markiert und begründet. + - Keine Grenze zwischen zwei Tönen verläuft über mehr als drei Stufen parallel zur Kontur. + - Die Kontur ist ein Kästchen breit und hat keine Doppelpixel. + - Du hast notiert, welche Stelle du beim Aufräumen geändert hast und warum. + explanation: | + Die Kugel verbindet alles aus diesem Modul: eine runde Kontur aus Läufen, Cluster statt Rauschen und Tongrenzen, die der Form folgen statt der Kontur. Das dritte Kriterium ist eine schnelle Prüfung auf Banding. Wie Licht auf einer Kugel genau verteilt ist, vertieft das Modul [Licht, Schatten und Tonwerte](/pixelart/licht-werte); wie du schattierst, ohne dass es wie ein Kissen aussieht, zeigt [Schattieren, Dithering, Textur und Detailgrad](/pixelart/schattieren-textur). + resources: + - title: Saint11 · Basic Shading + url: https://saint11.art/pixel_art_articles/article4/ diff --git a/content/pixelart/modules/pose-ausdruck.yaml b/content/pixelart/modules/pose-ausdruck.yaml new file mode 100644 index 00000000..24054ba1 --- /dev/null +++ b/content/pixelart/modules/pose-ausdruck.yaml @@ -0,0 +1,455 @@ +id: pose-ausdruck +title: Pose, Körpersprache und Ausdruck in wenigen Pixeln +level: 2 +minutes: 100 +summary: Wie eine Figur im Standbild zeigt, ob sie selbstbewusst, verschlossen oder bereit ist, warum kleine Bilder übertriebene Posen brauchen und wie zwei Augenpixel, eine Braue und ein Mund in einem Kopf von 10 × 10 Pixeln einen Ausdruck tragen. +place: unterwegs +goals: + - Du liest Haltungen als offen, verschlossen oder bereit und benennst die Körpermerkmale, die das zeigen. + - Du prüfst eine Pose auf Handlungslinie, Schwerpunkt und Stützfläche. + - Du übertreibst eine Pose so weit, dass jede Änderung als kleines Bild mindestens einen Pixel ausmacht. + - Du baust Ausdrücke aus Augen, Brauen, Mund und Kopfneigung und sagst, welche Pixel welche Wirkung tragen. + - Du machst Zustände wie bereit, verletzt oder erschöpft als Einzelbild lesbar, ohne Bewegung. + - Du skizzierst unterwegs Haltungen in 30-Sekunden-Gesten und benennst jede mit einem Wort. +resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + - title: Slynyrd · Pixelblog 17 · Human Anatomy + url: https://www.slynyrd.com/blog/2019/5/21/pixelblog-17-human-anatomy + - title: Saint11 · Cuteness + url: https://saint11.art/img/pixel-tutorials/Cuteness.gif + - title: Line of Action (zeitgesteuerte Posenreferenzen) + url: https://line-of-action.com/ + - title: Quickposes + url: https://quickposes.com/en +lesson: | + Du zeichnest eine Figur, die erschöpft ist. Auf Papier hängen die Schultern, der Kopf sinkt nach vorn, die Lider sind halb geschlossen. Im Sprite ist der Kopf zehn Pixel groß, jedes Auge ein einziger Pixel. Von der Erschöpfung bleibt nichts übrig, die Figur steht da wie jede andere. Kleine Bilder verzeihen keine leisen Posen: Was sich um weniger als einen Pixel ändert, sieht niemand. + + Dieses Modul zeigt, wie du Haltung und Ausdruck so deutlich machst, dass sie in wenigen Pixeln ankommen. Es bleibt beim Standbild, einer einzelnen Pose. Wie sich eine Figur von einer Pose in die nächste bewegt, mit Timing und Schlüsselposen, ist Thema des Animationskurses. Du brauchst Stift, Heft und Karopapier, die Übungen gehen am Handy. + + ## Haltung im Standbild: offen, verschlossen, bereit + + Eine Haltung liest man zuerst an der Silhouette, lange bevor man ein Gesicht erkennt. Das Schaubild zeigt drei Haltungen derselben Gliederpuppe, nur als schwarze Fläche. + + ![Drei schwarze Silhouetten. A steht breitbeinig und aufrecht, die Hände in den Hüften, zwischen Armen und Rumpf liegen zwei Lücken. B ist schmal, der Kopf hängt nach vorn und zur Seite, die Arme liegen vor dem Körper, die Knie zeigen nach innen. C steht im weiten Ausfallschritt, der Rumpf ist geneigt, ein Arm ist angewinkelt erhoben, die Faust auf Schulterhöhe, der andere verschwindet vor dem Rumpf](/media/pixelart/pose-ausdruck/haltung@2x.png "Offen (A), verschlossen (B), bereit (C). Eigenes Schaubild") + + Drei Merkmale tragen den Unterschied: Breite, Höhe und Richtung. + + - **A nimmt Raum ein.** Die Füße stehen breit, die Ellbogen zeigen nach außen, der Kopf sitzt hoch. Die zwei Lücken zwischen Armen und Rumpf machen die Hände in den Hüften lesbar; wie Negativraum eine Pose zeigt, steht in [Silhouette und Formensprache](/pixelart/silhouette-formsprache). + - **B macht sich klein.** Der Kopf ist gesenkt und zur Seite gekippt, die Arme liegen vor dem Körper, die Knie zeigen nach innen. Die Silhouette ist schmal und hat kaum Lücken. + - **C senkt den Schwerpunkt.** Die Füße stehen weit auseinander, ein Knie ist gebeugt, die Arme sind vor dem Körper erhoben. Die Figur kann in jede Richtung losgehen. + + „Offen“, „verschlossen“ und „bereit“ sind Lesarten, keine festen Bedeutungen. Arme vor dem Körper können Abwehr heißen, Kälte oder Konzentration, der Zusammenhang entscheidet. Ob eine Haltung so ankommt, wie du willst, prüfst du an echten Menschen und bei Betrachtern, nicht an einer Tabelle. + + ## Handlungslinie, Schwerpunkt und Stützfläche + + Eine Pose hat eine Richtung. Proko beschreibt sie als Linie: „There is always one main line that shows the directional flow of the pose.“ Er rät: „Start by finding the longest action line of the body“, und: „Don't use anything more complicated than a C curve, S curve, or straight“ ([How to Draw Gesture](https://www.proko.com/course-lesson/how-to-draw-gesture)). Diese **Handlungslinie** zeichnest du zuerst, Kopf und Glieder hängst du daran. + + Im Schaubild steht A fast senkrecht, die Linie ist eine Gerade. In B kippt der Kopf aus der Senkrechten, die Linie krümmt sich zu einem C. In C läuft eine lange Diagonale vom weit gestellten Fuß bis zum Kopf. Eine Diagonale liest sich als Spannung oder Bewegung, eine Senkrechte als Ruhe; vergleich dazu A und C. Proko warnt auch vor dem Gegenteil: „The tendency for us is to make things symmetrical, but this stiffens the gesture and makes the figure look like a snowman.“ + + Zum Gewicht gehören zwei Begriffe. Der **Schwerpunkt** ist der Punkt, um den sich das Gewicht der Figur verteilt; bei einer stehenden Figur liegt er etwa im Becken. Die **Stützfläche** ist die Fläche unter und zwischen den Füßen. Liegt der Schwerpunkt über ihr, steht die Figur. Liegt er daneben, kippt sie oder ist in Bewegung, etwa beim Schieben oder Laufen. Wie du das an einer Gliederpuppe misst und welche Rolle das Standbein spielt, behandelt [Figur, Geste und Proportion](/pixelart/figur-proportion) ausführlich. Für dieses Modul reicht eine Prüfung: Zieh vom Becken eine senkrechte Linie nach unten. Trifft sie zwischen die Füße, steht die Figur ruhig. + + ## Übertreibung: Posen für kleine Bilder + + Proko schreibt über Gesten: „It's a good idea to exaggerate the pose to tell a better story.“ In Pixelart wird aus dem Rat eine Notwendigkeit. Raymond Schlitter (Slynyrd) stellt fest: „Within the limited restrictions of pixel art, the human form is often stylized and deformed.“ Und: „Big-headed, or doll-like features tend to read well and capture a lot of expression“ ([Pixelblog 17](https://www.slynyrd.com/blog/2019/5/21/pixelblog-17-human-anatomy)). Für Figuren in Draufsicht nimmt der Kopf bei wenig Platz meist ein Drittel bis die Hälfte des Sprites ein, damit die Gesichtszüge noch Persönlichkeit zeigen können ([Pixelblog 22](https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites)). + + Rechne es dir vor. Eine Figur ist 24 Pixel hoch, ihr Kopf 8. Senkst du den Kopf in der Skizze „ein wenig“, wandert er vielleicht einen halben Pixel. Im Sprite passiert dann nichts oder ein einzelner Pixel springt, und die Figur wirkt fehlerhaft statt müde. Damit der gesenkte Kopf ankommt, setzt du ihn zwei Pixel tiefer und einen nach vorn, ziehst die Schultern eine Reihe herunter und lässt die Arme länger hängen. Auf Papier sieht das übertrieben aus. Im Sprite liest es sich als Müdigkeit. + + > [!MERKE] + > Was sich um weniger als einen Pixel ändert, sieht niemand. Übertreib eine Pose, bis jede Änderung mindestens einen Pixel ausmacht, und prüf sie dann als Silhouette. + + ## Ausdruck mit wenigen Pixeln: Augen, Brauen, Mund + + Ein Kopf von 10 × 10 Pixeln hat innerhalb der Kontur rund 50 Pixel. Davon trägt eine Handvoll den Ausdruck. + + ![Vier runde Köpfe von 10 × 10 Pixeln mit dunkler Kontur. A hat zwei einzelne Punktaugen. B hat dieselben Augen und darüber zwei schräge Brauen, die zur Mitte hin abfallen, dazu einen kleinen Mund. C hat Augen aus je zwei Pixeln übereinander und einen offenen Mund aus 2 × 2 Pixeln. D hat waagerechte Strichaugen aus je zwei Pixeln und einen kleinen Mund](/media/pixelart/pose-ausdruck/gesichter@2x.png "Neutral (A), wütend (B), überrascht (C), müde (D). Eigenes Schaubild") + + So sieht Kopf B als Textraster aus. `#` ist die Kontur und alles Dunkle, `-` die Haut, `+` der Mund: + + ```text + . . . # # # # . . . + . # # - - - - # # . + . # - - - - - - # . + # - # - - - - # - # + # - - # - - # - - # + # - - # - - # - - # + # - - - - - - - - # + . # - - + + - - # . + . # # - - - - # # . + . . . # # # # . . . + ``` + + Die Augen sitzen in der sechsten Reihe, je ein Pixel. Darüber steigen die Brauen von außen nach innen ab und stoßen auf die Augen. Gegenüber A kommen sechs Pixel dazu, vier für die Brauen, zwei für den Mund. C ändert ebenfalls sechs Pixel: Die Augen wachsen um je einen Pixel nach oben, der Mund öffnet sich zu einem Quadrat. D braucht nur vier: Jedes Auge wird ein waagerechter Strich, dazu der Mund. + + Daraus folgen Faustregeln, die du an jedem Betrachter überprüfen kannst: + + - **Brauen** tragen die meiste Wirkung. Fallen sie zur Mitte hin ab, liest man Wut. Steigen sie zur Mitte hin an, liest man Sorge oder Trauer. Waagerecht oder fehlend ist neutral. + - **Augen** zeigen Wachheit. Höhere Augen wirken aufgerissen, Striche geschlossen oder müde. Saint11 schreibt: „Shiny and dark eyes have a very strong puppy effect“ ([Cuteness](https://saint11.art/img/pixel-tutorials/Cuteness.gif)). + - **Mund**: kein Mund, ein Strich oder eine Öffnung. Ein offener Mund ist die stärkste Änderung. + - **Kopfneigung** verstärkt alles. Ein gesenkter Kopf macht aus müden Augen Erschöpfung. + + Ein einzelner Pixel kann den Ausdruck kippen: Rückt ein Brauenpixel eine Reihe höher oder tiefer, ändert sich die Lesart. Gesichtspixel brauchen außerdem Abstand im Tonwert zur Haut, sonst verschwinden sie bei 1×; wie du Tonwerte planst, steht in [Licht, Schatten und Tonwerte](/pixelart/licht-werte). Und manchmal ist für ein Gesicht kein Platz. Saint11 schreibt zum Verkleinern: „Sometimes you need to let go of some details, like the face in this example“ ([Resizing Pixel Art](https://saint11.art/img/pixel-tutorials/Resizing.gif)). Dann trägt die Pose den Ausdruck allein. + + > [!NOTE] Leitlinien, keine Regeln + > Unter seiner Tafel zu niedlichen Figuren schreibt Saint11: „These are NOT rules, just guidelines.“ Das gilt für Gesichter genauso. Ob dein Gesicht wütend oder nur streng wirkt, sagt dir nur ein Betrachter, der die Absicht nicht kennt. + + ## Zustände als Einzelbild: bereit, verletzt, erschöpft + + Im Spiel muss eine Figur oft einen Zustand zeigen, ohne dass Text dabeisteht. Als Einzelbild heißt das: eine Pose und ein Gesicht, die zusammenpassen. Die Tabelle ist ein Vorschlag zum Ausprobieren, keine Vorschrift: + + | Zustand | Körper | Gesicht | + | --- | --- | --- | + | bereit | Schwerpunkt tief, Füße weit, Arme vorn | Augen offen, Brauen gerade | + | verletzt | Gewicht auf einer Seite, eine Hand an der getroffenen Stelle | Augen zusammengekniffen, Mund schief | + | erschöpft | Schultern tief, Kopf vor und unten, Arme hängen | Strichaugen, Mund offen | + + Achte auf die Symmetrie. „Bereit“ und „erschöpft“ dürfen fast symmetrisch sein, „verletzt“ nicht: Eine Figur, die eine Seite schützt, verlagert ihr Gewicht. Prüf jeden Zustand erst als Silhouette und setz das Gesicht zuletzt. Lässt sich der Zustand ohne Gesicht nicht erraten, hilft das Gesicht nur wenig. + + Im Kampf zählen Gegnerposen doppelt. Eine Pose kann einen Angriff ankündigen, ein **Telegraph**; welche Kanäle es dafür gibt und wie lange sie dauern, behandelt [Gegnermuster und Telegraphing](/combat/gegnermuster). Und im Hitstop, dem kurzen Anhalten beim Treffer, sieht der Spieler ein Standbild, deshalb zählt jede Pose, die dort stehen bleibt ([Trefferfeedback](/combat/trefferfeedback)). Wie die Figur in diese Posen hinein- und wieder herauskommt, ist Thema des Animationskurses. + + > [!PRAXIS] Grobe Formen vor der Linie + > Raymond Schlitter beginnt Posen nicht mit Konturen: „Before making the wireframe I find it helpful to throw down some very rough forms that capture the essence of the pose.“ Und für kleine Sprites: „With practice you might develop the confidence to skip right to the last step of blocking out the final form, especially if it's a small sprite“ ([Pixelblog 17](https://www.slynyrd.com/blog/2019/5/21/pixelblog-17-human-anatomy)). Saint11 skizziert sogar Bewegungen erst als Silhouetten, damit die Aktion „easy to read“ bleibt ([Character Design 1](https://saint11.art/img/pixel-tutorials/Silhouette.gif)). Grobe Formen zuerst, Gesicht zuletzt: So arbeiten beide. + + ## Unterwegs beobachten: Haltungen in 30 Sekunden + + Posen lernst du an echten Menschen am schnellsten, und im Bus, in der Bahn oder in einer Warteschlange stehen sie dir Modell. Proko beschreibt typische Sitzungen im Schnellzeichnen „with poses ranging from 30 seconds to 10 minutes per pose“. Für unterwegs reichen 30 Sekunden pro Haltung: + + 1. Die Handlungslinie: eine Gerade, ein C oder ein S. + 2. Kopf und Füße als Punkte auf der Linie. + 3. Schultern und Becken als zwei kurze Striche. Ihre Neigung zeigt das Gewicht. + 4. Darunter ein Wort für die Haltung: „wartet“, „müde“, „ungeduldig“. + + Danach fragst du dich, welcher Strich dich zu diesem Wort gebracht hat. Das ist die Übung: Haltung sehen und benennen, was sie trägt. Zuhause bieten [Line of Action](https://line-of-action.com/) und [Quickposes](https://quickposes.com/en) Fotos von Posen mit Zeitvorgabe, auch am Handy. Wie du Verhältnisse misst und Referenzen nutzt, ohne abzupausen, übst du in [Beobachten, Messen und Referenzen](/pixelart/beobachten). + + > [!TIP] Haltungen, keine Gesichter + > Zeichne im Bus Haltungen, nicht Gesichter, und fotografiere niemanden ohne Erlaubnis. Für die Übung brauchst du nur Linie, Kopf, Schultern, Becken und Füße. Wer merkt, dass er gezeichnet wird, ändert seine Haltung. + + > [!INTERVIEW] + > Manche Studios vergeben vor einer Zusammenarbeit eine bezahlte Probearbeit; Snow Day Games nannte das in einer inzwischen geschlossenen Anzeige „Paid test commission to ensure shared artistic vision“ ([Stellenanzeige](https://workwithindies.com/careers/snow-day-games-2d-technical-pixel-artist)). Eine typische Frage dazu: „Wie zeigst du in einer Figur von 24 Pixeln Höhe, dass sie erschöpft ist?“ Gute Antwort: Erst die Pose, dann das Gesicht. Du senkst Kopf und Schultern um ganze Pixel, lässt die Arme hängen und krümmst die Handlungslinie nach vorn. Du prüfst die Pose als Silhouette bei 1×, dann setzt du Strichaugen und einen offenen Mund. Du sagst auch, wie du es testest: Jemand, der den Zustand nicht kennt, soll ihn benennen. + + ## Häufige Fehler + + - **Leise Posen.** Änderungen unter einem Pixel verschwinden. Übertreib, bis jede Änderung sichtbar ist. + - **Steif und symmetrisch.** Beide Seiten gleich, Linie senkrecht: ein Schneemann. Gib der Pose eine Richtung. + - **Ausdruck nur im Gesicht.** Der Körper steht neutral, das Gesicht soll alles tragen. Bei 1× sieht man zuerst die Haltung. + - **Zu viele Gesichtspixel.** Brauen, Augen und Mund verschmelzen zu einem Fleck. Weniger Pixel, klarer gesetzt. + - **Gesicht ohne Kontrast.** Augen im Tonwert der Haut verschwinden. Plane einen deutlichen Abstand. + - **Schwerpunkt ungewollt daneben.** Die Figur soll stehen, kippt aber. Lot vom Becken prüfen. + - **Arme vor dem Körper, wo sie lesbar sein sollen.** In der Silhouette sind sie weg. Lücken lassen. + - **Zustand nur über Farbe.** Rot für verletzt geht in Graustufen verloren. Die Pose muss den Zustand allein tragen können. + + ## Zusammenfassung + + - Eine Haltung liest man zuerst an der Silhouette: Breite, Höhe und Richtung tragen offen, verschlossen und bereit. + - Die Handlungslinie ist eine Gerade, ein C oder ein S. Sie kommt zuerst, Kopf und Glieder hängen daran. + - Liegt der Schwerpunkt über der Stützfläche, steht die Figur; liegt er daneben, kippt sie oder bewegt sich. + - Kleine Bilder brauchen Übertreibung, jede Änderung muss mindestens einen Pixel ausmachen. + - In einem Kopf von 10 × 10 Pixeln tragen vier bis sechs Pixel den Ausdruck. Brauen wirken am stärksten. + - Zustände wie bereit, verletzt und erschöpft prüfst du erst als Silhouette, das Gesicht kommt zuletzt. + - Haltungen lernst du unterwegs in 30-Sekunden-Gesten: Linie, Kopf, Schultern, Becken, Füße und ein Wort. +exercises: + - id: haltung-lesen + type: choice + title: Welche Haltung zieht sich zurück? + prompt: | + Welches Feld zeigt eine verschlossene Haltung, und woran erkennst du sie? + + ![Drei schwarze Silhouetten. A steht breitbeinig mit den Händen in den Hüften. B ist schmal, mit gesenktem Kopf, Armen vor dem Körper und Knien nach innen. C steht im weiten Ausfallschritt mit erhobenen Armen](/media/pixelart/pose-ausdruck/haltung@2x.png "Drei Haltungen derselben Puppe. Eigenes Schaubild") + options: + - text: B, weil der Kopf gesenkt ist, die Arme vor dem Körper liegen und die Knie nach innen zeigen. + correct: true + why: Die Figur macht sich schmal und klein. Ihre Silhouette hat kaum Lücken. + - text: A, weil die Hände in den Hüften den Körper abschließen. + correct: false + why: A nimmt Raum ein, die Ellbogen zeigen nach außen, der Stand ist breit. Das liest sich offen. + - text: C, weil die Arme vor dem Körper Abwehr zeigen. + correct: false + why: Die Arme sind erhoben, der Stand ist weit, der Schwerpunkt tief. Die Figur ist bereit, nicht zurückgezogen. + - text: Keines, ohne Gesicht lässt sich keine Haltung lesen. + correct: false + why: Alle drei sind nur Silhouetten, und trotzdem unterscheiden sie sich deutlich. Haltung liest man vor dem Gesicht. + explanation: | + Verschlossene Haltungen nehmen wenig Raum ein: Kopf gesenkt, Arme vor dem Körper, Beine zusammen. Offene breiten sich aus, bereite senken den Schwerpunkt und stellen die Füße weit. Diese Lesarten sind Konventionen, die du an Menschen selbst überprüfen kannst. Dass sie schon als Silhouette funktionieren, zeigt, wie viel die Pose vor jedem Gesichtspixel erzählt. + resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + + - id: gesicht-diagnose + type: choice + title: Welche Pixel machen wütend? + prompt: | + Welches Feld zeigt Wut, und welche Pixel tragen sie? + + ![Vier runde Köpfe von 10 × 10 Pixeln. A mit Punktaugen. B mit Punktaugen und zur Mitte abfallenden Brauen, dazu ein kleiner Mund. C mit hohen Augen und offenem Mund. D mit Strichaugen und kleinem Mund](/media/pixelart/pose-ausdruck/gesichter@2x.png "Vier Köpfe mit 10 × 10 Pixeln. Eigenes Schaubild") + options: + - text: B, die Brauen fallen zur Mitte hin ab. + correct: true + why: Vier Brauenpixel über den Augen genügen. Zur Mitte abfallende Brauen liest man als Wut. + - text: C, die hohen Augen und der offene Mund. + correct: false + why: Aufgerissene Augen und ein offener Mund lesen sich als Überraschung. + - text: D, die Strichaugen. + correct: false + why: Striche wirken wie geschlossene oder halb geschlossene Augen, also müde. + - text: A, die Punktaugen ohne Mund. + correct: false + why: A ist die neutrale Ausgangslage, an der man die anderen misst. + explanation: | + In kleinen Köpfen tragen die Brauen am meisten. Dieselben Punktaugen wirken neutral oder wütend, je nachdem, ob darüber zwei schräge Pixelreihen sitzen. Augenhöhe und Mundöffnung verschieben die Lesart zu Überraschung, Striche zu Müdigkeit. Weil so wenige Pixel so viel tragen, entscheidet jeder einzelne. + resources: + - title: Saint11 · Cuteness + url: https://saint11.art/img/pixel-tutorials/Cuteness.gif + + - id: pose-aufbau + type: order + title: Eine Pose aufbauen + prompt: | + Bring die Schritte, mit denen du eine Pose als Standbild aufbaust, in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die Haltung in einem Wort festlegen. + Die Handlungslinie als Gerade, C- oder S-Kurve ziehen. + Kopf und Füße auf die Linie setzen und die Stützfläche markieren. + Prüfen, ob der Schwerpunkt über der Stützfläche liegt. + Rumpf und Glieder ansetzen und die Pose übertreiben. + Die Silhouette füllen und auf Armlänge prüfen. + Zuletzt Augen, Brauen und Mund setzen. + alternatives: + - [1, 2, 3, 5, 4, 6, 7] + explanation: | + Das Wort ist der Maßstab, an dem du am Ende prüfst. Die Handlungslinie gibt der Pose ihre Richtung, bevor Einzelteile sie steif machen können. Den Schwerpunkt prüfst du, sobald Kopf und Füße stehen, weil sich danach alles daran ausrichtet. Übertrieben wird, solange die Pose noch aus groben Formen besteht. Der Silhouettentest kommt vor dem Gesicht, denn ein Gesicht rettet keine Pose, die als Fläche nichts sagt. + resources: + - title: Slynyrd · Pixelblog 17 · Human Anatomy + url: https://www.slynyrd.com/blog/2019/5/21/pixelblog-17-human-anatomy + + - id: pixel-unterschied + type: output + title: Von neutral zu müde + prompt: | + Oben steht Kopf A (neutral), unten Kopf D (müde). Wie viele Pixel musst du ändern, um aus A das Gesicht D zu machen? Antworte mit der Zahl. + lang: text + code: | + A + . . . # # # # . . . + . # # - - - - # # . + . # - - - - - - # . + # - - - - - - - - # + # - - - - - - - - # + # - - # - - # - - # + # - - - - - - - - # + . # - - - - - - # . + . # # - - - - # # . + . . . # # # # . . . + + D + . . . # # # # . . . + . # # - - - - # # . + . # - - - - - - # . + # - - - - - - - - # + # - - - - - - - - # + # - # # - - # # - # + # - - - - - - - - # + . # - - + + - - # . + . # # - - - - # # . + . . . # # # # . . . + expected: | + 4 + accept: + - 4 Pixel + - 4 px + - vier + hints: + - Vergleiche Zeile für Zeile. Nur zwei Zeilen unterscheiden sich. + explanation: | + In Zeile 6 wird jedes Auge um einen Pixel nach außen zum Strich verlängert, das sind zwei Pixel. In Zeile 8 kommt ein Mund aus zwei Pixeln dazu. Zusammen vier Pixel von rund hundert, und der Ausdruck kippt von neutral zu müde. Darum setzt du Gesichtspixel einzeln und mit Absicht, nie mit einem breiten Pinsel. + resources: + - title: Saint11 · Cuteness + url: https://saint11.art/img/pixel-tutorials/Cuteness.gif + + - id: schwerpunkt-verschieben + type: output + title: Die Figur kippt + prompt: | + Eine Figur steht mit den Füßen in den Spalten 3 bis 4 und 9 bis 10. Die Stützfläche reicht also von Spalte 3 bis Spalte 10. Ihr Schwerpunkt liegt in Spalte 13, sie wirkt, als kippe sie nach rechts. Um wie viele Spalten muss der Schwerpunkt mindestens nach links wandern, damit er über der Stützfläche liegt? Antworte mit der Zahl. + lang: text + code: | + linker Fuß: Spalten 3–4 + rechter Fuß: Spalten 9–10 + Schwerpunkt: Spalte 13 + expected: | + 3 + accept: + - 3 Spalten + - 3 Pixel + - 3 px + - drei + explanation: | + Die Stützfläche endet rechts mit Spalte 10. Von 13 nach 10 sind es drei Spalten. Du kannst dafür den Oberkörper nach links holen oder den rechten Fuß weiter nach außen setzen; die zweite Lösung verbreitert die Stützfläche und lässt die Figur kräftiger stehen. Soll sie kippen, etwa weil sie gegen etwas drückt, bleibt der Schwerpunkt bewusst draußen. + resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + + - id: begriffe-pose + type: gap + title: Begriffe der Pose + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Die Linie, die den Fluss einer Pose zeigt, heißt ⟦Handlungslinie⟧. Der Punkt, um den sich das Gewicht der Figur verteilt, ist der ⟦Schwerpunkt⟧. Die Fläche unter und zwischen den Füßen nennt man ⟦Stützfläche⟧. Damit eine Pose in wenigen Pixeln ankommt, musst du sie ⟦übertreiben⟧. Eine Pose, mit der ein Gegner einen Angriff ankündigt, ist ein ⟦Telegraph⟧. + gaps: + - label: Fluss der Pose + hint: Auf Englisch Line of Action. + accept: ["Line of Action", "Aktionslinie", "Bewegungslinie"] + - label: Gewicht + hint: Der Punkt, an dem man sich das ganze Gewicht der Figur vereint denkt. + accept: ["Körperschwerpunkt"] + - label: unter den Füßen + hint: Ein Wort mit „Fläche“, sie stützt die Figur. + accept: ["Standfläche", "Unterstützungsfläche"] + - label: deutlicher machen + hint: Verb, das Gegenteil von abschwächen. + accept: ["überzeichnen", "verstärken", "zuspitzen"] + - label: Ankündigung im Kampf + hint: So heißt sie im Kurs Combat Design. + accept: ["Tell", "Telegraphing", "Ankündigung"] + explanation: | + Handlungslinie, Schwerpunkt und Stützfläche beschreiben, ob eine Pose Richtung hat und ob sie steht. Übertreibung sorgt dafür, dass all das in wenigen Pixeln sichtbar bleibt. Der Telegraph verbindet Pose und Kampf: Eine Gegnerpose, die man nicht liest, kündigt nichts an. + resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + + - id: wuetend-statt-muede + type: bug + title: Müde soll es aussehen + prompt: | + Das Gesicht soll müde wirken. Wer es sieht, nennt es wütend. Finde die Zeilen, die das verursachen. + lang: text + code: | + . . . # # # # . . . + . # # - - - - # # . + . # - - - - - - # . + # - # - - - - # - # + # - - # - - # - - # + # - # # - - # # - # + # - - - - - - - - # + . # - - + + - - # . + . # # - - - - # # . + . . . # # # # . . . + lines: [4, 5] + hints: + - Die Strichaugen in Zeile 6 stimmen. Was sitzt darüber? + explanation: | + In Zeile 4 und 5 sitzen Brauen, die von außen zur Mitte abfallen. Dieses Muster liest man als Wut, und es überstimmt die müden Strichaugen. Für Müdigkeit lässt du die Brauen weg oder setzt sie waagerecht; senkst du zusätzlich den Kopf um einen Pixel, wird die Wirkung stärker. Vier Pixel entscheiden hier über den ganzen Ausdruck. + resources: + - title: Saint11 · Cuteness + url: https://saint11.art/img/pixel-tutorials/Cuteness.gif + + - id: zustand-notiz + type: bug + title: Erschöpft, aber stolz? + prompt: | + Lehrbeispiel: Notiz für eine Figur im Zustand „erschöpft“. Eine Testerin liest das fertige Standbild als stolz und selbstbewusst. Finde die Zeile, die das verursacht. + lang: prose + code: | + Zustand: erschöpft, Standbild, 24 px hoch + Handlungslinie: C-Kurve, nach vorn gebeugt + Schultern: zwei Pixel tiefer als in der Grundpose + Kopf: aufrecht, Kinn gehoben, Blick nach oben + Arme: hängen schlaff, Hände unter der Hüfte + Gewicht: auf einem Bein, Knie leicht eingeknickt + lines: [4] + hints: + - Welcher Körperteil fällt in einem kleinen Sprite zuerst auf? + explanation: | + Ein gehobener Kopf mit Blick nach oben ist ein Signal für Stolz oder Zuversicht. Weil der Kopf in kleinen Sprites ein Drittel oder mehr der Figur ausmacht, überstimmt er die hängenden Schultern und Arme. Für Erschöpfung gehört der Kopf nach vorn und unten, auf die Linie der C-Kurve. Erst dann zeigen alle Teile in dieselbe Richtung. + resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: bereit-erklaeren + type: explain + title: Warum diese Pose bereit wirkt + prompt: | + Die Notiz beschreibt Pose C aus dem Schaubild zur Haltung. Erkläre in drei bis vier Sätzen, warum man sie als „bereit“ liest und nicht als „offen“ wie Pose A, die aufrecht mit den Händen in den Hüften steht. + lang: text + code: | + Pose C (Standbild, Silhouette) + Füße: weit auseinander, + ein Knie gebeugt + Becken: tiefer als bei A + Rumpf: nach vorn geneigt + Arme: einer angewinkelt erhoben, + der andere vor dem Rumpf + Kopf: zwischen den Füßen, + vor der Hüfte + points: + - Die weit gestellten Füße ergeben eine große Stützfläche, die Figur kann in jede Richtung losgehen. + - Das tiefe Becken senkt den Schwerpunkt; die Figur ist gespannt statt entspannt. + - Die Handlungslinie ist eine lange Diagonale vom hinteren Fuß zum Kopf, A steht senkrecht. + - Der erhobene, angewinkelte Arm und der Arm vor dem Rumpf zeigen Schutz oder Angriff, die Hände in den Hüften bei A zeigen Ruhe. + explanation: | + Pose C ist auf Bewegung vorbereitet. Die weit gestellten Füße und das gebeugte Knie senken den Schwerpunkt und vergrößern die Stützfläche, die Figur kann jederzeit ausweichen oder vorstoßen. Rumpf und Kopf liegen auf einer Diagonale, die Spannung erzeugt, während A senkrecht und ruhig steht. Der erhobene Arm und der Arm vor dem Rumpf schützen oder holen aus; die Hände in den Hüften bei A brauchen dagegen keine Reaktion. Beide nehmen viel Raum ein, aber nur C wirkt, als passiere gleich etwas. + resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + + - id: gesten-bus + type: practice + title: Zehn Haltungen auf einer Fahrt + prompt: | + Zeichne auf einer Fahrt mit Bus oder Bahn oder in einer Warteschlange zehn Menschen als 30-Sekunden-Gesten: Handlungslinie, Kopf und Füße als Punkte, Schultern und Becken als Striche. Schreib unter jede Geste ein Wort für die Haltung. Notiere hier, welche Haltung am schwersten zu benennen war und warum, in zwei bis drei Sätzen. + lang: prose + checklist: + - Auf dem Blatt stehen zehn Gesten, jede mit Handlungslinie, Kopf, Füßen, Schultern und Becken. + - Keine Geste hat ein Gesicht oder Kleidungsdetails. + - Unter jeder Geste steht genau ein Wort für die Haltung. + - Bei mindestens drei Gesten hast du markiert, welcher Strich dich zu dem Wort gebracht hat. + - In deiner Notiz steht, welche Haltung am schwersten zu benennen war, mit einem Grund. + hints: + - Wenn die Person sich bewegt, bevor du fertig bist, beginne eine neue Geste. Halbe Gesten zählen nicht. + explanation: | + Dreißig Sekunden reichen nur für das Wesentliche, und genau das sollst du sehen lernen. Das Wort zwingt dich, die Haltung zu deuten, der markierte Strich zeigt dir, woran du sie gedeutet hast. Nach einigen Fahrten merkst du, dass meist Schultern, Kopfneigung und Fußstellung die Haltung tragen, kaum je die Hände. + resources: + - title: Proko · How to Draw Gesture + url: https://www.proko.com/course-lesson/how-to-draw-gesture + + - id: drei-gesichter + type: practice + title: Drei Gesichter auf Karopapier + prompt: | + Rahme auf Karopapier drei Felder von 10 × 10 Kästchen ein und zeichne in jedes einen runden Kopf mit Kontur. Der erste bekommt ein neutrales Gesicht aus zwei Augenpixeln. Für zwei andere Ausdrücke deiner Wahl änderst du jeweils höchstens sechs Kästchen. Lass jemanden, der die Ausdrücke nicht kennt, sie benennen, oder benenne sie selbst am nächsten Tag aus der Erinnerung heraus, ohne deine Notiz anzusehen. + lang: prose + checklist: + - Drei Köpfe in Feldern von 10 × 10 Kästchen, alle mit derselben Kontur. + - Der neutrale Kopf hat zwei Augenpixel und sonst kein Gesichtsmerkmal. + - Jeder der beiden Ausdrücke unterscheidet sich vom neutralen Kopf in höchstens sechs Kästchen, und du hast sie gezählt. + - Du hast den beabsichtigten Ausdruck vorher verdeckt notiert. + - Du hast notiert, welche Namen genannt wurden und ob sie mit deiner Absicht übereinstimmen. + hints: + - Fang mit den Brauen an. Sie tragen die meiste Wirkung. + explanation: | + Die Grenze von sechs Kästchen zwingt dich zu entscheiden, welcher Pixel den Ausdruck trägt. Der Test mit einem Betrachter zeigt, ob deine Absicht ankommt. Weicht die Antwort ab, sagt dir das, welche Pixel eine andere Lesart nahelegen; das ist eine Information, kein Scheitern. + resources: + - title: Saint11 · Cuteness + url: https://saint11.art/img/pixel-tutorials/Cuteness.gif + + - id: drei-zustaende + type: practice + title: Eine Puppe, drei Zustände + prompt: | + Zeichne dieselbe schlichte Gliederpuppe dreimal als gefüllte Silhouette, etwa fünf Zentimeter hoch: bereit, verletzt und erschöpft. Schreib den Zustand auf die Rückseite. Zeig die drei jemandem und frag, welche welcher ist, oder lege sie selbst nach einem Tag gemischt hin und ordne sie zu. + lang: prose + checklist: + - Drei gefüllte Silhouetten derselben Puppe, ungefähr gleich groß. + - Jede Pose hat eine eingezeichnete oder deutlich erkennbare Handlungslinie. + - Die verletzte Pose ist sichtbar asymmetrisch, das Gewicht liegt auf einer Seite. + - Bei der bereiten Pose liegt der Schwerpunkt über einer breiten Stützfläche, und du hast das mit einem Lot geprüft. + - Du hast notiert, welche Zustände richtig zugeordnet wurden und welcher nicht. + hints: + - Geh die Tabelle aus der Lektion durch und setz zuerst den Körper um, ganz ohne Gesicht. + explanation: | + Ohne Gesicht muss die Pose den Zustand allein tragen. Genau das passiert im Spiel, wenn die Figur klein ist oder sich vom Spieler abwendet. Wird ein Zustand falsch zugeordnet, prüfe zuerst Handlungslinie und Schwerpunkt; meist ist die Pose noch zu leise. + resources: + - title: Line of Action (zeitgesteuerte Posenreferenzen) + url: https://line-of-action.com/ diff --git a/content/pixelart/modules/schattieren-textur.yaml b/content/pixelart/modules/schattieren-textur.yaml new file mode 100644 index 00000000..ddd3c0f9 --- /dev/null +++ b/content/pixelart/modules/schattieren-textur.yaml @@ -0,0 +1,461 @@ +id: schattieren-textur +title: Schattieren, Dithering, Textur und Detailgrad +level: 2 +minutes: 130 +summary: Warum eine Form mit abgedunkelten Rändern wie ein Kissen aussieht, wann Dithering hilft und wann es nur rauscht, wie du Stein, Holz und Gras aus Clustern statt aus Zufallspixeln baust, wie viel Detail eine kleine Fläche trägt und welche Kontur zu welchem Bild passt. +place: pc +goals: + - Du legst eine Lichtrichtung fest und schattierst Kugel und Kiste nach ihrer Form statt nach ihrer Kontur. + - Du erkennst Kissenschattierung und erklärst, warum sie die Form verflacht. + - Du setzt Dithering gezielt ein, unterscheidest geordnetes Raster von Zufallsrauschen und weißt, wann du es weglässt. + - Du baust Texturen aus wiederholten Clustern und lässt Flächen frei, statt Pixel zu streuen. + - Du entscheidest, welches Detail eine kleine Fläche trägt, und wählst zwischen schwarzer Kontur, farbiger Kontur und Sel-out. +resources: + - title: Saint11 · Basic Shading · Common Mistakes + url: https://saint11.art/pixel_art_articles/article4/#common-mistakes + - title: Derek Yu · Pixel Art Tutorial · Dithering + url: https://www.derekyu.com/makegames/pixelart.html#dithering + - title: Slynyrd · Pixelblog 2 · Texture + url: https://www.slynyrd.com/blog/2018/2/15/pixelblog-2-texture + - title: Aseprite Docs · Shading + url: https://www.aseprite.org/docs/shading/ + - title: Pixelorama · Shading + url: https://pixelorama.org/user_manual/shading/ +lesson: | + Du hast eine Kiste gezeichnet und willst sie plastisch machen. Du dunkelst alle Ränder ab und hellst die Mitte auf. Das Ergebnis sieht aus wie ein aufgeblasenes Kissen, nicht wie eine Kiste. Danach versuchst du eine Steinwand: Du streust hellere und dunklere Pixel über eine graue Fläche. Im Zoom wirkt das körnig, bei 100 % flimmert es nur. + + Beide Versuche haben denselben Fehler. Sie verteilen Helligkeit nach der Kontur oder nach dem Zufall, nicht nach Licht und Form. Dieses Modul zeigt, wie du nach Form schattierst, wann Dithering hilft, wie Texturen aus Clustern entstehen, also aus Gruppen zusammenhängender Pixel derselben Farbe, wie viel Detail eine kleine Fläche trägt und welche Kontur du wählst. Die Grundlagen von Licht und Tonwert stehen in [Licht, Schatten und Tonwerte](/pixelart/licht-werte), Cluster und verwaiste Pixel in [Linien, Kurven und Cluster](/pixelart/linien-cluster). + + ## Erst die Lichtrichtung, dann der erste Schatten + + Bevor du einen Schatten setzt, entscheidest du, woher das Licht kommt. Pedro Medeiros (Saint11) lässt in einer Übung die Lichtquelle absichtlich offen, weil „choosing a good light source is a skill as important as rendering the scene correctly“ ([Identifying Faces](https://saint11.art/pixel_art_articles/article4/#identifying-faces)). In allen Schaubildern dieses Kurses kommt das Licht von oben links. Für ein Asset-Set legst du die Richtung einmal fest und hältst sie in jeder Spielgrafik (Sprite) und jeder Kachel (Tile) durch, sonst passen die Teile im Spiel nicht zusammen. + + Dann siehst du dir die Flächen an. Saint11 unterscheidet flache und runde Formen: „Flat faces usually have a uniform color in their entirety while rounded shapes can have color ramps.“ Eine Kiste bekommt also pro Seite einen Ton: Oberseite hell, Front mittel, abgewandte Seite dunkel. Eine Kugel bekommt eine Rampe, die vom Licht weg dunkler wird. Den Übergang zwischen Licht und Schatten, den Terminator, hält Saint11 in Pixelart scharf, „to avoid banding“ ([Basic structure](https://saint11.art/pixel_art_articles/article4/#basic-structure)). + + Bedienung: In Aseprite malt die **Shading-Ink** mit einem Ausschnitt der Palette. Du wählst mehrere Farben einer Rampe aus, die linke Maustaste schiebt einen Pixel eine Stufe in die eine Richtung der Rampe, die rechte in die andere ([Shading](https://www.aseprite.org/docs/shading/)). Pixelorama hat dafür ein eigenes Werkzeug (Taste U) mit den Modi Simple Shading, Hue Shifting und Color Replace; Color Replace wandert wie die Aseprite-Ink entlang ausgewählter Palettenfarben ([Shading](https://pixelorama.org/user_manual/shading/)). Gestaltung: Beide Werkzeuge sparen Klicks. Wo Licht und Schatten liegen, entscheiden sie nicht. + + ## Formschattierung statt Kissenschattierung + + ![Zwei graue Ovale mit dunkler Kontur. A ist in Ringen schattiert, die zur Kontur hin dunkler werden, die hellste Fläche liegt genau in der Mitte. B ist von oben links beleuchtet: hell oben links, dunkel unten rechts, die Grenzen laufen schräg über die Form](/media/pixelart/schattieren-textur/kissen-und-form@2x.png "Kissenschattierung (A) und Formschattierung mit Licht von oben links (B). Eigenes Schaubild") + + A ist **Kissenschattierung** (Pillow Shading). Jede Seite wird zur Kontur hin dunkler, die Mitte ist am hellsten, egal, woher das Licht kommt. Saint11 beschreibt sie als Versuch, „to shade an object with no clear light source and making a generic shadow around the outlines“, und rät: „This is best avoided by having a clearer light source and not darkening the edges of a face.“ ([Pillow shading](https://saint11.art/pixel_art_articles/article4/#pillow-shading)) Im Pixel-Joint-Tutorial von cure steht es kürzer: „Pillow-shading is bad because it pays no attention to the light source“ ([The Pixel Art Tutorial](https://pixeljoint.com/forum/forum_posts.asp?TID=11299)). + + B ist **Formschattierung**. Die hellste Stelle sitzt dort, wo die Fläche zum Licht zeigt, die dunkelste gegenüber. Die Grenzen zwischen den Tönen laufen schräg über die Form und verraten ihre Rundung. Derek Yu beschreibt das Ziel: „By shading, you're not just adding color - you're sculpting out a form.“ Seine Prüfung: „if you squint, a few large clusters of light and dark should still emerge.“ ([Form and Volume](https://www.derekyu.com/makegames/pixelart.html#form)) + + Saint11 nennt zwei weitere häufige Fehler. **Soft faces** entstehen, wenn du das Licht zu stark oder in die falsche Richtung weichzeichnest. **Flat light** heißt, die Form des Objekts zu ignorieren ([Common Mistakes](https://saint11.art/pixel_art_articles/article4/#common-mistakes)). + + > [!MERKE] + > Schatten folgt dem Licht und der Form, nie der Kontur. Wenn alle Ränder dunkler sind als die Mitte, fehlt die Lichtrichtung. + + ## Dithering: zwei Farben, die wie eine dritte wirken + + **Dithering** mischt zwei Farben in einem Pixelmuster, damit dazwischen ein Übergang entsteht, ohne eine neue Farbe zu brauchen. Derek Yu: „The idea is to create noise of varying densities to simulate the gradation of color.“ ([Dithering](https://www.derekyu.com/makegames/pixelart.html#dithering)) + + ![Drei waagerechte Verläufe von Dunkelgrau nach Hellgrau. A wechselt in der Mitte hart von dunkel zu hell. B nutzt ein regelmäßiges Pixelraster, das von links nach rechts immer mehr helle Pixel enthält. C nutzt zufällig verteilte Pixel, die einzelne Klumpen und Löcher bilden](/media/pixelart/schattieren-textur/dithering@2x.png "Harte Stufe (A), geordnetes Raster nach Bayer 4 × 4 (B) und Zufallsrauschen (C) zwischen denselben zwei Farben. Eigenes Schaubild") + + Alle drei Streifen nutzen nur zwei Farben. A hat eine harte Kante. B verteilt die hellen Pixel nach einem festen Muster, einer **Bayer-Matrix** von 4 × 4 Pixeln: Je weiter rechts, desto mehr Pixel jeder 4 × 4-Zelle sind hell. Das Muster ist regelmäßig und liest sich als Verlauf. C verteilt die hellen Pixel zufällig mit derselben Dichte. Dabei entstehen Klumpen, Löcher und viele verwaiste Pixel. Zwei Stufen aus dem geordneten Raster sehen so aus, oben 50 %, darunter 25 % helle Pixel: + + ```text + # - # - # - # - + - # - # - # - # + # - # - # - # - + - # - # - # - # + + - # - # - # - # + # # # # # # # # + - # - # - # - # + # # # # # # # # + ``` + + Wann hilft Dithering? Derek Yu meint, es wirke „best on large areas of a single color“ oder dort, wo eine Fläche „rough or bumpy“ aussehen soll, etwa bei Erde. Er selbst nutzt es sparsam, und manche Pixel Artists gar nicht. Saint11 schreibt auf seiner Tafel zu den Grundlagen „I avoid dither when I can“ ([Fundamentals](https://saint11.art/img/pixel-tutorials/Fundamentals.gif)) und setzt in seiner Schattierungsübung „some cheap dither“ ein, um einen Übergang zu verbessern ([My version](https://saint11.art/pixel_art_articles/article4/#my-version)). Daraus folgt eine Arbeitsregel: Dithering ist ein Werkzeug für Übergänge auf großen Flächen und für raue Oberflächen. Auf einem kleinen Sprite verbraucht ein Ditherband Pixel, die du für die Form brauchst. + + Bedienung: Das Verlaufswerkzeug von Aseprite bietet Bayer-Matrizen von 2 × 2, 4 × 4 und 8 × 8 ([Dithering options](https://www.aseprite.org/docs/context-bar/#dithering-options)). In Pixelorama erzeugt der Effekt *Gradient* Verläufe, die sich laut Doku „optionally be dithered“ lassen ([Image effects](https://pixelorama.org/user_manual/image_effects/)). Von Hand setzt du ein Raster schneller, als du denkst: Ein 50-%-Schachbrett mit Shift-Linien im 45°-Winkel, dann ausdünnen. + + > [!WARNING] Zufallsrauschen ist kein Dithering + > Ein Pinsel, der Pixel zufällig streut, oder ein Rauschfilter erzeugt Muster wie C. Jeder einzelne helle Pixel in dunkler Umgebung ist ein verwaister Pixel und flimmert bei 1×. Wenn du ditherst, setz ein regelmäßiges Muster. + + ## Texturen aus Clustern statt aus Rauschen + + Raymond Schlitter (Slynyrd) warnt: „If not treated with care, texture details will only add unnecessary noise.“ Seine Grundsätze für Texturen ([Pixelblog 2](https://www.slynyrd.com/blog/2018/2/15/pixelblog-2-texture)): + + - **Simplify:** Einzelheiten in schlichte, abstrakte Formen zerlegen. „Don't try to depict the fine details of every leaf and blade of grass.“ + - **Repetition:** „A good texture may only need a few simple clusters.“ Dieselben Cluster wiederholen, ihre Verteilung variieren. + - **Balance:** Ein Detail hier verlangt meist ein Detail dort. + - **Contrast:** Textur nur an ausgewählten Stellen, dazwischen leere Flächen, in denen sie mitgedacht wird. + - **Avoid orphan pixels:** einzelne Pixel ohne Cluster derselben Farbe vermeiden. + + Saint11 sagt zu Steinen dasselbe: „avoid orphan pixels and adding too much noise“ ([Rock](https://saint11.art/img/pixel-tutorials/Rock.gif)). + + ![Drei graue Flächen aus je 2 × 2 Kacheln. A besteht aus zufällig verteilten Pixeln in vier Grautönen und flimmert. B zeigt Steine als zusammenhängende helle Flächen mit dunklen Fugen, jeder Stein hat oben links einen hellen und unten rechts einen dunklen Rand. C ist eine einzige glatte graue Fläche](/media/pixelart/schattieren-textur/detailgrad@2x.png "Zufallspixel (A), Steine aus Clustern mit Licht von oben links (B) und Fläche ohne Textur (C). Eigenes Schaubild") + + A hat viel „Detail“ und zeigt nichts. B hat weniger Töne in größeren Flächen, und jeder Stein ist ein Cluster mit einer eigenen kleinen Lichtseite: hell oben links, dunkel unten rechts, wie die ganze Szene. C zeigt nichts, ist aber ruhig. Als Boden unter einer Figur kann eine Mischung aus B und C besser tragen als B allein, weil die leeren Stellen dem Auge Pausen geben. + + Ein einzelner Stein als Textraster, Licht von oben links: + + ```text + . . # # # # . . + . # - - - + # . + # - - + + + + # + # - + + + + # # + . # + + + # # . + . . # # # # . . + ``` + + Dasselbe Prinzip gilt für andere Materialien. Für Holz bietet es sich an, lange Läufe in Richtung der Maserung zu setzen und nur wenige Astlöcher als Cluster. Gras entsteht aus kleinen Büscheln, die sich wiederholen, mit freier Fläche dazwischen. Bei Ziegeln rät Slynyrd, nicht jeden Ziegel zu zeichnen: „Depicting every single brick would appear noisy“, und die Fugen nicht zu betonen. + + ## Detailbudget: wie viel eine kleine Fläche trägt + + Auf 16 × 16 Pixeln hast du 256 Pixel für alles. Saint11 schreibt auf seiner Tafel zum Verkleinern: „as the resolution decreases you need to start choosing what details are important“ ([Resizing](https://saint11.art/img/pixel-tutorials/Resizing.gif)). An anderer Stelle: „good pixel art eliminates all unnecessary detail“ ([Basic structure](https://saint11.art/pixel_art_articles/article4/#basic-structure)). Derek Yu sagt über kleine Sprites: „Making small sprites is about making compromises. If you add an outline around something, you may lose the room to shade it.“ ([The 32 × 32 Sprite](https://www.derekyu.com/makegames/pixelart.html#small_sprite)) + + Rechne nach: Eine Kiste von 10 × 10 Pixeln mit einem Pixel Kontur behält innen 8 × 8 = 64 Pixel. Für drei Seiten mit je einem Ton, ein paar Bretterfugen und einen Beschlag reicht das. Für Maserung, Nagelköpfe und Kratzer reicht es nicht. Eine Faustregel für dich: Ein Detail, das kleiner ist als ein Cluster von zwei Pixeln, liest sich bei 1× als Rauschen. Was du weglässt, entscheidest du nach der Frage, woran man das Objekt erkennt. Valve hielt für Team Fortress 2 fest: „High frequency detail is omitted where possible“ ([NPAR 2007](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf), Abschnitt 3). + + ## Konturen: schwarz, farbig oder Sel-out + + ![Ein schattiertes Tongefäß dreimal auf grünem Grund. A hat eine schwarze Kontur. B hat eine Kontur im dunkelsten Ton der Rampe, einem dunklen Violett. C hat eine Kontur, die auf der Lichtseite oben links fast verschwindet und unten rechts dunkelviolett ist](/media/pixelart/schattieren-textur/umrisse@2x.png "Schwarze Kontur (A), farbige dunkle Kontur (B) und Sel-out (C). Eigenes Schaubild") + + A trennt das Gefäß hart vom Grund. Derek Yu schreibt, eine rein schwarze Kontur gebe einem Sprite „an overall cartoony look“ und erzeuge „a lot of harsh segmentation“ ([Selective Outlining](https://www.derekyu.com/makegames/pixelart.html#selout)). B nimmt den dunkelsten Ton der eigenen Rampe. Saint11 rät: „use a dark color instead of black“ ([Outlines](https://saint11.art/img/pixel-tutorials/Outlines.gif)). Die Kontur gehört dann zum Material. + + C ist **Sel-out** (selective outlining). Derek Yu: „Selout means replacing a lot of the black outline with lighter colors.“ Oben, wo das Licht trifft, nimmt er die hellsten Töne oder lässt die Kontur ganz weg. Linien im Inneren, etwa für Muskeln oder Fell, zieht er mit dunklen Schattentönen statt Schwarz. Das Ergebnis wirkt weicher und naturalistischer. + + Welche Kontur passt, hängt vom Einsatz ab. Eine dunkle Kontur hält ein Sprite auf jedem Untergrund zusammen. Sel-out senkt den Kontrast auf der Lichtseite, und auf hellem Boden kann diese Kante mit dem Grund verschmelzen. Für Figuren in einem Spiel prüfst du das auf dem echten Boden, siehe [Umgebung und Tiles, die Figuren tragen](/pixelart/umgebung-tiles). Bei 16 × 16 Pixeln frisst jede Kontur Platz, Derek Yus Kompromiss von oben. + + > [!PRAXIS] + > Derek Yu baut einen Sprite in festen Schritten: grobe Skizze, Kontur aufräumen, Grundfarben, Schattierung mit Kantenglättung, Sel-out, Feinschliff. Zwei Prüfungen empfiehlt er am Schluss: das Bild horizontal spiegeln, weil das Fehler in Proportionen und Schattierung zeigt, und die Farbe entfernen, „to see whether your shading still reads well“ ([Selective Outlining](https://www.derekyu.com/makegames/pixelart.html#selout)). Saint11 arbeitet bei der Schattierung von großen Farbclustern zu Details, und zwar mit wenigen Farben, um Banding gering zu halten ([Working with a photo reference](https://saint11.art/pixel_art_articles/article4/#working-with-a-photo-reference)). + + > [!INTERVIEW] + > Im Portfolio-Review zeigt ein Art Lead auf deine Steinwand: „Das flimmert.“ Gute Antwort: Du nennst die Ursache – zu viele einzelne Pixel in zu vielen Tönen – und die Lösung: weniger Töne, Steine als Cluster mit Licht- und Schattenkante in der Richtung der Szene, leere Flächen dazwischen. Dann zeigst du vorher und nachher bei 1×. Wer die Kritik in Begriffe wie Cluster, verwaiste Pixel und Lichtrichtung übersetzt, zeigt, dass er sie versteht. + + ## Häufige Fehler + + - **Kissenschattierung.** Alle Ränder dunkler als die Mitte. Lichtrichtung festlegen, Ränder auf der Lichtseite hell lassen. + - **Flache Seiten mit Verlauf.** Eine ebene Seite einer Kiste bekommt einen Ton, keine Rampe. + - **Zufallsrauschen als Textur.** Streupixel flimmern. Cluster wiederholen, leere Flächen lassen. + - **Dithering überall.** Auf kleinen Flächen verbraucht es Pixel für die Form. Für große Flächen und raue Oberflächen aufheben. + - **Zu viel Detail.** Jede Fuge, jeder Grashalm. Bei 1× wird daraus Rauschen. Wichtiges behalten, Rest weglassen. + - **Schwarze Kontur ohne Absicht.** Sie zerlegt die Form in harte Teile. Dunklen Rampenton nehmen oder Sel-out probieren. + - **Sel-out ohne Untergrundtest.** Auf hellem Boden verschwindet die Lichtkante. Auf dem echten Hintergrund prüfen. + + ## Zusammenfassung + + - Erst die Lichtrichtung, dann die Flächen: Ebene Seiten bekommen einen Ton, runde Formen eine Rampe. + - Kissenschattierung dunkelt nach der Kontur ab und verflacht die Form. Formschattierung folgt dem Licht. + - Dithering mischt zwei Farben in einem Muster. Geordnet liest es sich als Verlauf, zufällig als Rauschen. Sparsam einsetzen. + - Texturen entstehen aus wenigen wiederholten Clustern mit eigener Lichtkante und leeren Flächen dazwischen. + - Eine kleine Fläche trägt wenig Detail. Behalte, woran man das Objekt erkennt. + - Konturen: schwarz trennt hart, ein dunkler Rampenton gehört zum Material, Sel-out hellt die Lichtseite auf. + - Prüf jedes Ergebnis bei 1×, gespiegelt und ohne Farbe. +exercises: + - id: kissen-erkennen + type: choice + title: Kissen oder Form? + prompt: | + Welche Aussagen über die beiden Ovale treffen zu? + + ![Zwei graue Ovale. A wird in Ringen zur Kontur hin dunkler. B ist oben links hell und unten rechts dunkel](/media/pixelart/schattieren-textur/kissen-und-form@2x.png "Zwei Schattierungen derselben Form. Eigenes Schaubild") + options: + - text: A ist Kissenschattierung, weil alle Ränder dunkler werden, egal, woher das Licht kommt. + correct: true + why: Genau so beschreibt Saint11 Pillow Shading, ein allgemeiner Schatten entlang der Kontur ohne klare Lichtquelle. + - text: In B verraten die schrägen Grenzen zwischen den Tönen, dass die Form rund ist und Licht von oben links bekommt. + correct: true + why: Die Tongrenzen laufen quer über die Form. Daraus liest das Auge Rundung und Richtung. + - text: A wirkt plastischer, weil die Mitte am hellsten ist. + correct: false + why: Die helle Mitte ohne Richtung lässt die Form aufgeblasen und flach wirken. Plastik entsteht aus einer klaren Licht- und Schattenseite. + - text: B braucht mehr Farben als A. + correct: false + why: Beide nutzen dieselben vier Grautöne und dieselbe Kontur. Der Unterschied liegt nur in der Verteilung. + explanation: | + Kissenschattierung erkennst du daran, dass die Helligkeit der Kontur folgt: Ringe, die nach außen dunkler werden. Formschattierung erkennst du an einer Lichtseite und einer Schattenseite. Mit denselben Farben ist das eine flach und das andere rund. Deshalb ist die erste Frage beim Schattieren immer die nach dem Licht. + resources: + - title: Saint11 · Basic Shading · Pillow shading + url: https://saint11.art/pixel_art_articles/article4/#pillow-shading + + - id: dithering-wann + type: choice + title: Wann lohnt sich Dithering? + prompt: | + In welchen Fällen ist Dithering eine gute Wahl? + options: + - text: Ein großer Himmel soll mit zwei Blautönen sanft von oben nach unten heller werden. + correct: true + why: Große Flächen einer Farbe sind laut Derek Yu der Ort, an dem Dithering am besten wirkt. + - text: Ein Erdboden soll rau und uneben aussehen. + correct: true + why: Für raue Oberflächen nennt Derek Yu Dithering ausdrücklich, etwa bei Erde. + - text: Ein Sprite von 16 × 16 Pixeln soll mehr Detail bekommen. + correct: false + why: Auf so kleiner Fläche verbraucht ein Ditherband die Pixel, die die Form beschreiben. Detail entsteht dort aus wenigen klaren Clustern. + - text: Eine Fläche soll mit einem Zufallspinsel Struktur bekommen. + correct: false + why: Zufällige Verteilung erzeugt verwaiste Pixel und Klumpen wie im Schaubild der Lektion, Feld C. Dithering ist ein Muster, kein Rauschen. + explanation: | + Dithering ersetzt eine fehlende Zwischenfarbe durch ein Muster aus zwei vorhandenen. Das lohnt sich dort, wo Platz für das Muster ist und ein Übergang oder eine raue Fläche gezeigt werden soll. Auf kleinen Sprites und als Ersatz für echte Form lohnt es sich nicht. Saint11 meidet es, wo er kann, Derek Yu setzt es sparsam ein. + resources: + - title: Derek Yu · Pixel Art Tutorial · Dithering + url: https://www.derekyu.com/makegames/pixelart.html#dithering + + - id: schattier-ablauf + type: order + title: Eine Kiste schattieren + prompt: | + Bring die Arbeitsschritte zum Schattieren einer Kiste in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die Lichtrichtung festlegen und notieren. + Jede Seite der Kiste mit ihrem Grundton flächig füllen. + Die Seite, die vom Licht abgewandt ist, im dunklen Ton der Rampe setzen. + Einzelne Kanten und Fugen auf der Lichtseite mit dem helleren Ton der Seite absetzen. + Die Kontur nach dem Licht anpassen, dunkel auf der Schattenseite. + Die Kiste bei 1× und ohne Farbe ansehen. + alternatives: + - [1, 2, 4, 3, 5, 6] + explanation: | + Ohne Lichtrichtung weißt du nicht, welche Seite hell wird, deshalb steht sie am Anfang. Die Grundtöne füllen jede Seite flächig, wie Saint11 es für ebene Flächen beschreibt. Schatten und Lichtkanten bauen darauf auf. Die Kontur kommt danach, weil sie sich nach Licht und Schatten richtet. Die Prüfung bei 1× und ohne Farbe zeigt am Ende, ob die drei Seiten als Tonwerte getrennt sind. + resources: + - title: Saint11 · Basic Shading · Identifying Faces + url: https://saint11.art/pixel_art_articles/article4/#identifying-faces + + - id: bayer-anteil + type: output + title: Wie viele helle Pixel bei 25 %? + prompt: | + Ein geordnetes Raster nach Bayer arbeitet mit Zellen von 4 × 4 Pixeln. Bei einer Helligkeit von 25 % ist ein Viertel der Pixel jeder Zelle hell. Wie viele helle Pixel hat eine Zelle? Antworte mit der Zahl. + lang: text + code: | + Zelle: 4 × 4 Pixel + Helligkeit: 25 % + expected: | + 4 + accept: + - 4 Pixel + - 4 px + - vier + explanation: | + Eine Zelle hat 16 Pixel, ein Viertel davon sind 4. Eine Bayer-Matrix von 4 × 4 kann so 17 Stufen von 0 bis 16 hellen Pixeln darstellen, also 15 Zwischenstufen zwischen den zwei reinen Farben, jede mit einem Pixel mehr. Die Matrix legt fest, in welcher Reihenfolge die Pixel hell werden, damit das Muster in jeder Stufe gleichmäßig verteilt bleibt. + resources: + - title: Aseprite Docs · Context Bar · Dithering options + url: https://www.aseprite.org/docs/context-bar/#dithering-options + + - id: innenflaeche + type: output + title: Was bleibt innen? + prompt: | + Eine Kiste ist 10 × 10 Pixel groß und hat ringsum eine Kontur von einem Pixel. Wie viele Pixel bleiben innen für Farbe und Schattierung? Antworte mit der Zahl. + lang: text + code: | + Kiste: 10 × 10 Pixel + Kontur: 1 Pixel auf jeder Seite + expected: | + 64 + accept: + - 64 Pixel + - 64 px + hints: + - Die Kontur nimmt links und rechts je einen Pixel weg, oben und unten ebenso. + explanation: | + Innen bleiben 8 × 8 = 64 Pixel, die Kontur belegt 36 der 100. Mehr als ein Drittel der Fläche geht also an die Kontur. Das ist Derek Yus Kompromiss in Zahlen: Wer eine Kontur setzt, hat weniger Platz für Schattierung. Bei kleinen Objekten lohnt es sich, die Kontur auf der Lichtseite wegzulassen. + resources: + - title: Derek Yu · Pixel Art Tutorial · The 32 × 32 Sprite + url: https://www.derekyu.com/makegames/pixelart.html#small_sprite + + - id: waisen-zaehlen + type: output + title: Verwaiste Pixel zählen + prompt: | + Das Raster zeigt einen Ausschnitt einer Textur: `+` Mittelton, `-` hell, `#` dunkel. Wie viele Pixel haben keinen direkten Nachbarn (oben, unten, links, rechts) in derselben Farbe? Antworte mit der Zahl. + lang: text + code: | + + + + + + + + + + + - + + + - - + + + + + # + + + + + + + + + + + - + + expected: | + 3 + accept: + - 3 Pixel + - drei + hints: + - Prüf nur die `-` und `#`. Die `+` hängen alle zusammen. + explanation: | + Verwaist sind das `-` in Zeile 2, Spalte 2, das `#` in Zeile 3 und das `-` in Zeile 4. Die beiden `-` nebeneinander in Zeile 2 bilden einen kleinen Cluster und zählen nicht. Drei Einzelpixel auf 32 sind fast ein Zehntel, das flimmert bei 1×. Fasst du die hellen Pixel zu zwei Clustern zusammen, liest sich die Fläche als Struktur. + resources: + - title: Slynyrd · Pixelblog 2 · Texture + url: https://www.slynyrd.com/blog/2018/2/15/pixelblog-2-texture + + - id: begriffe-schattieren + type: gap + title: Begriffe zum Schattieren + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Werden alle Ränder einer Form ohne Rücksicht auf das Licht dunkler, spricht man von ⟦Kissenschattierung⟧. Zwei Farben in einem Muster zu mischen, damit ein Übergang entsteht, heißt ⟦Dithering⟧. Ein regelmäßiges Muster dafür liefert die ⟦Bayer⟧-Matrix. Eine Kontur, die auf der Lichtseite heller wird oder verschwindet, heißt ⟦Sel-out⟧. Texturen baut man aus wiederholten ⟦Clustern⟧ statt aus einzelnen Pixeln. Der Übergang zwischen Licht und Schatten auf einer Form heißt ⟦Terminator⟧. + gaps: + - label: falsche Schattierung + hint: Auf Englisch „pillow shading“. + accept: ["Pillow Shading", "Pillow-Shading", "Kissen-Schattierung"] + - label: Mischmuster + hint: Englisches Wort, auch im Deutschen üblich. + accept: ["Dither", "Rastern"] + - label: Matrix + hint: Nach dem Erfinder benannt, fünf Buchstaben. + accept: ["Bayer-Matrix"] + - label: Kontur + hint: Kurzform von „selective outlining“. + accept: ["Selout", "selective outlining", "selektive Kontur"] + - label: Bausteine + hint: Zusammenhängende Pixel derselben Farbe. + accept: ["Cluster", "Pixelgruppen"] + - label: Lichtgrenze + hint: Englischer Begriff, Saint11 hält ihn in Pixelart scharf. + accept: ["Schattengrenze"] + explanation: | + Kissenschattierung und Formschattierung sind die zwei Arten, Helligkeit zu verteilen. Dithering und die Bayer-Matrix betreffen Übergänge mit wenigen Farben, Cluster die Bausteine von Textur. Sel-out und Terminator sind die Stellen, an denen sich Licht und Kontur treffen. + resources: + - title: Derek Yu · Pixel Art Tutorial · Selective Outlining + url: https://www.derekyu.com/makegames/pixelart.html#selout + + - id: schattierplan-kissen + type: bug + title: Ein Stein wie ein Kissen + prompt: | + Arbeitsnotiz zu einer Szene mit mehreren Objekten. Im Bild wirkt eines davon aufgeblasen, als hätte es keine Kanten und läge in keinem Licht. Finde die Zeile. + lang: prose + code: | + Lichtrichtung: oben links, für alle Objekte der Szene. + Kiste: Oberseite hell, Front Mittelton, rechte Seite dunkel. + Fass: hellster Streifen links von der Mitte, nach rechts dunkler werdend. + Stein: jede Seite zur Kontur hin abgedunkelt, die Mitte am hellsten. + Kontur aller Objekte: dunkelster Ton der Rampe, auf der Lichtseite eine Stufe heller. + lines: [4] + hints: + - Welche Zeile nennt keine Richtung? + explanation: | + Zeile 4 beschreibt Kissenschattierung: Die Helligkeit folgt der Kontur, nicht dem Licht von oben links. Alle anderen Objekte haben eine Licht- und eine Schattenseite. Richtig wäre etwa: Oberseite und linke Kante hell, rechte untere Seite dunkel, Terminator scharf. Ein einzelnes Objekt mit Kissenschattierung fällt in einer sonst stimmigen Szene besonders auf, weil es das gemeinsame Licht bricht. + resources: + - title: Saint11 · Basic Shading · Pillow shading + url: https://saint11.art/pixel_art_articles/article4/#pillow-shading + + - id: raster-klumpen + type: bug + title: Ein Klumpen im Schachbrett + prompt: | + Das 50-%-Raster soll gleichmäßig sein, damit es sich als Mittelton liest. Bei 1× fällt an einer Stelle ein dunkler Klumpen auf. Finde die Zeile. + lang: text + code: | + # - # - # - # - + - # - # - # - # + # - # - # - # - + - # - # # - - # + # - # - # - # - + - # - # - # - # + lines: [4] + hints: + - In einem Schachbrett hat jeder Pixel nur diagonale Nachbarn derselben Farbe. + explanation: | + In Zeile 4 sind die Pixel in Spalte 5 und 6 vertauscht. Dadurch stehen zwei `#` nebeneinander, die auch die `#` darüber und darunter berühren, und zwei `-` bilden eine Lücke. Das Auge springt bei einem regelmäßigen Muster sofort auf jede Störung. Ein Raster mit einem Fehler wirkt schlechter als eine harte Kante, weil es die Aufmerksamkeit auf genau diese Stelle zieht. + resources: + - title: Derek Yu · Pixel Art Tutorial · Dithering + url: https://www.derekyu.com/makegames/pixelart.html#dithering + + - id: detailgrad-erklaeren + type: explain + title: Rauschen, Stein, Fläche + prompt: | + Erkläre in drei bis fünf Sätzen, warum A bei 1× flimmert, B sich als Steinboden liest und wofür C trotzdem nützlich ist. + + ![Drei graue Flächen. A zufällige Pixel in vier Grautönen, B Steine als helle Cluster mit dunklen Fugen und Lichtkanten oben links, C eine glatte graue Fläche](/media/pixelart/schattieren-textur/detailgrad@2x.png "Drei Arten, eine Fläche zu füllen. Eigenes Schaubild") + lang: prose + code: | + A: jeder Pixel zufällig einer von vier Grautönen + B: Steine als Cluster, heller Rand oben links, dunkler unten rechts + C: eine einzige graue Fläche + points: + - In A gehört fast kein Pixel zu einem Cluster derselben Farbe; verwaiste Pixel erzeugen Rauschen statt Formen. + - In B ist jeder Stein ein Cluster mit eigener Licht- und Schattenkante in der Lichtrichtung der Szene. + - B nutzt Wiederholung ähnlicher Formen, das Auge liest daraus ein Material. + - C trägt keine Information, gibt aber Ruhe; Slynyrd lässt Flächen bewusst frei, damit Textur dort nur mitgedacht wird. + explanation: | + A hat die meisten Wechsel und zeigt am wenigsten: Fast jeder Pixel steht allein, und bei 1× bleibt nur Flimmern. B hat weniger Töne in größeren Flächen. Jeder Stein ist ein Cluster mit einer hellen Kante zum Licht und einer dunklen davon weg, und weil sich diese Form wiederholt, liest das Auge Stein. C ist leer, aber nicht nutzlos. Slynyrds Grundsatz „Contrast“ meint genau das: Textur an ausgewählten Stellen, dazwischen ruhige Flächen. Unter einer Figur ist eine solche Mischung oft besser als eine durchgehende Textur. + resources: + - title: Slynyrd · Pixelblog 2 · Texture + url: https://www.slynyrd.com/blog/2018/2/15/pixelblog-2-texture + + - id: kugel-und-kiste + type: practice + title: Kugel und Kiste nach Form schattieren + prompt: | + Leg im Editor eine Leinwand von 32 × 32 Pixeln an. Zeichne eine Kugel und eine Kiste nebeneinander, beide mit derselben Rampe aus vier Tönen und Licht von oben links. Die Kugel bekommt einen Verlauf, jede Seite der Kiste genau einen Ton. Arbeite mit der Shading-Ink in Aseprite oder dem Shading-Werkzeug in Pixelorama, wenn du magst. + lang: prose + starter: | + Programm: + Rampe (vier Töne): + Lichtrichtung: + Was ich nach dem Test ohne Farbe geändert habe: + checklist: + - Die Lichtrichtung ist als kleiner Pfeil in einer eigenen Ebene eingezeichnet und im Export ausgeblendet. + - Auf der Kugel liegt der hellste Ton oben links, der dunkelste unten rechts; kein Rand ist rundum dunkler als die Mitte. + - Jede sichtbare Seite der Kiste hat genau einen Ton, und die drei Seiten unterscheiden sich im Tonwert. + - Beide Objekte nutzen höchstens vier Töne plus Kontur, gezählt in der Palette. + - Du hast das Bild ohne Farbe angesehen (Graustufen-Modus oder Entsättigen) und notiert, was du danach geändert hast. + - Du hast das Bild gespiegelt angesehen und notiert, ob dir dabei etwas aufgefallen ist. + explanation: | + Kugel und Kiste sind die zwei Grundfälle: runde Form mit Rampe, ebene Seiten mit je einem Ton. Wer beide nach derselben Lichtrichtung schattiert, hat das Prinzip für jedes weitere Objekt. Der Test ohne Farbe und das Spiegeln sind Derek Yus Prüfungen. Sie zeigen Fehler, die du nach einer Stunde Arbeit nicht mehr siehst. + resources: + - title: Aseprite Docs · Shading + url: https://www.aseprite.org/docs/shading/ + - title: Pixelorama · Shading · Color Replace + url: https://pixelorama.org/user_manual/shading/#color-replace + + - id: steinkachel + type: practice + title: Eine Steinkachel aus Clustern + prompt: | + Zeichne eine Kachel von 16 × 16 Pixeln mit Steinen aus höchstens vier Grautönen. Jeder Stein ist ein Cluster mit heller Kante zum Licht oben links und dunkler Kante unten rechts. Lass mindestens eine Stelle ohne Textur. Sieh dir die Kachel in 2 × 2 Wiederholung an, mit Tiled Mode in Aseprite oder Tile Mode in Pixelorama. + lang: prose + starter: | + Töne: + Zahl der Steine: + Verwaiste Pixel (Zahl und Grund): + Was in der Wiederholung auffällt: + checklist: + - Die Kachel nutzt höchstens vier Töne. + - Jeder Pixel hat mindestens einen direkten Nachbarn in derselben Farbe, Ausnahmen sind markiert und begründet. + - Jeder Stein hat oben links eine helle und unten rechts eine dunkle Kante. + - Mindestens eine Fläche von 3 × 3 Pixeln ist ohne Textur. + - Du hast die Kachel in 2 × 2 Wiederholung bei 1× angesehen und notiert, was dir auffällt. + hints: + - Setz zuerst die Fugen als dunkle Linien, dann füll die Steine mit dem Mittelton und setz zuletzt die Lichtkanten. + explanation: | + Die Kachel übt Slynyrds Grundsätze auf kleiner Fläche: wenige Töne, wiederholte Formen, keine Waisen, freie Stellen. Die Lichtkante an jedem Stein verbindet die Textur mit dem Licht der Szene. Ob die Kachel an ihren Rändern nahtlos weiterläuft und wie du Wiederholung versteckst, vertieft [Umgebung und Tiles, die Figuren tragen](/pixelart/umgebung-tiles). + resources: + - title: Aseprite Docs · Tiled Mode + url: https://www.aseprite.org/docs/tiled-mode/ + - title: Pixelorama · Canvas · Tile Mode + url: https://pixelorama.org/user_manual/user_interface/canvas/#tile-mode + + - id: drei-konturen + type: practice + title: Dasselbe Gefäß, drei Konturen + prompt: | + Zeichne ein eigenes Gefäß, etwa eine Flasche oder einen Krug, auf 24 × 24 Pixeln und schattiere es mit Licht von oben links. Dupliziere die Ebene zweimal und gib den drei Fassungen verschiedene Konturen: schwarz, dunkelster Ton der eigenen Rampe, Sel-out. Lege unter alle drei nacheinander einen hellen und einen dunklen Hintergrund. + lang: prose + starter: | + Gefäß: + Auf hellem Grund fällt auf: + Auf dunklem Grund fällt auf: + Meine Wahl für dieses Objekt und warum: + checklist: + - Es gibt drei Fassungen in getrennten Ebenen, die sich nur in der Kontur unterscheiden. + - In der Sel-out-Fassung ist die Kontur oben links heller als unten rechts oder fehlt dort. + - Keine Fassung enthält in der Kontur reines Schwarz außer der ersten. + - Du hast alle drei auf einem hellen und einem dunklen Grund angesehen und je eine Beobachtung notiert. + - Deine Wahl ist mit einer Beobachtung zum Untergrund begründet, nicht mit „sieht besser aus“. + explanation: | + Die Kontur ist eine Entscheidung, keine Pflicht. Auf dunklem Grund kann eine schwarze Kontur verschwinden, auf hellem Grund die Lichtkante beim Sel-out. Wer das an einem eigenen Objekt gesehen hat, wählt später für Figuren und Requisiten bewusst. Welche Kontur dir gefällt, ist deine Sache; die Begründung über den Untergrund ist überprüfbar. + resources: + - title: Derek Yu · Pixel Art Tutorial · Selective Outlining + url: https://www.derekyu.com/makegames/pixelart.html#selout + - title: Saint11 · Outlines + url: https://saint11.art/img/pixel-tutorials/Outlines.gif diff --git a/content/pixelart/modules/silhouette-formsprache.yaml b/content/pixelart/modules/silhouette-formsprache.yaml new file mode 100644 index 00000000..6b74d97b --- /dev/null +++ b/content/pixelart/modules/silhouette-formsprache.yaml @@ -0,0 +1,463 @@ +id: silhouette-formsprache +title: Silhouette und Formensprache +level: 2 +minutes: 110 +summary: Warum eine Figur schon als schwarzer Fleck zeigen muss, was sie ist, wie Grundformen, Größenrhythmus und Negativraum eine Silhouette lesbar machen und wie du mit schnellen Thumbnails auf Papier Varianten findest und prüfst. +place: unterwegs +goals: + - Du prüfst eine Figur mit dem Silhouettentest und schreibst auf, was man ohne Innenlinien über sie sagen kann. + - Du erklärst Valves Lesehierarchie für Team Fortress 2 und ordnest Farbe, Silhouette und Kontrast den Fragen eines Spielers zu. + - Du setzt Kreis, Rechteck und Dreieck als Formensprache ein und begründest, warum das eine Konvention ist und kein Gesetz. + - Du baust Größenrhythmus und Negativraum gezielt in eine Silhouette ein und planst Lücken so, dass sie eine Kontur überstehen. + - Du zeichnest Thumbnails in kurzer Zeit, wählst nach vorher notierten Kriterien aus und entwickelst eines in Varianten weiter. + - Du planst die Silhouette einer großen Kreatur aus wenigen großen Massen mit einem klaren Blickpunkt. +resources: + - title: Saint11 · Character Design 1 (Silhouette) + url: https://saint11.art/img/pixel-tutorials/Silhouette.gif + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + - title: Ctrl+Paint · Drawing Shape · Negative Space + url: https://www.ctrlpaint.com/videos/drawing-shape-negative-space + - title: Ctrl+Paint · Thumbnail Iteration + url: https://www.ctrlpaint.com/videos/thumbnail-iteration +lesson: | + Du hast eine Figur gezeichnet, mit Gürtel, Knöpfen und einer Narbe über dem Auge. Im Spiel ist sie 24 Pixel hoch, steht zwischen drei Gegnern auf unruhigem Boden, und du verlierst sie aus den Augen. Die Details sind da, aber jedes ist einen Pixel groß. Was du in diesem Moment wahrnimmst, ist ein dunkler Fleck mit einem Umriss. Ob du darin deine Figur erkennst, entscheidet dieser Umriss, nicht der Gürtel. + + Dieses Modul behandelt den Umriss als erste Entwurfsentscheidung. Du brauchst einen Bleistift, einen dicken Filzstift und ein kleines Heft. Am Handy liest du die Schaubilder und löst die Übungen. Einen Editor brauchst du nicht; wie aus einem Entwurf ein Sprite wird, zeigt [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen). + + ## Silhouette zuerst: der Umriss erzählt als Erstes + + Die **Silhouette** ist der Umriss einer Figur als gefüllte Fläche: ohne Innenlinien, ohne Farbe, ohne Schattierung. Pedro Medeiros (Saint11) vergleicht Character Design mit dem Erzählen einer Geschichte. Figuren erzählen über ihr Aussehen, und „the silhouette is the prologue, the first thing the viewer will notice“ ([Character Design 1](https://saint11.art/img/pixel-tutorials/Silhouette.gif)). Seinen Arbeitsablauf schreibt er auf dieselbe Tafel: erst eine Silhouettenskizze, dann Details, dann Animation. Wie sich eine Figur bewegt, ist Thema des Animationskurses. Hier geht es um das Standbild. + + Auf derselben Tafel beschriftet Saint11 eine Silhouette mit dem, was man aus ihr liest: menschliche Form, stark, trägt Rüstung, hat ein Schwert. Das ist der Kern des **Silhouettentests**. Du füllst eine Figur schwarz und schreibst auf, was man dann noch über sie sagen kann. Auf Papier zeichnest du den Umriss mit Bleistift und malst ihn mit dem Filzstift voll, Innenlinien verschwinden dabei von selbst. Bleiben zwei oder drei Aussagen übrig, trägt die Silhouette. Bleibt nur „ein Mensch“, trägt sie nicht. + + Für Pixelart wiegt das schwerer als für große Illustrationen. Ein Sprite von 24 Pixeln Höhe hat für ein Gesicht eine Handvoll Pixel. Innenformen sind dort winzig, der Umriss ist das größte Merkmal, das du hast. Auch die Lesbarkeit im Kampf hängt daran: Wie Silhouette und Trefferfläche zusammenpassen, behandelt [Reichweite, Hitboxen und Hurtboxen](/combat/hitboxen) im Abschnitt „Pixelart-Silhouette und Hurtbox“. + + ## Lesehierarchie: was Valve bei Team Fortress 2 geprüft hat + + Team Fortress 2 hat neun Klassen, und welche Klasse ein Gegner spielt, entscheidet, wie du reagierst. Valve schreibt deshalb, „the silhouettes of the nine classes were carefully designed to be very distinct from one another“. Unter einer Abbildung der Klassen als schwarze Flächen steht: „Even when viewed only in silhouette with no internal shading at all, the characters are readily identifiable“ ([Illustrative Rendering in Team Fortress 2, Abschnitt 4.1](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf)). Mit diesem Test hat das Team die Entwürfe schon in der Konzeptphase geprüft. Die Unterschiede kamen aus Körperproportionen, Waffen und aus Umrisslinien, die Schuhe, Hüte und Kleiderfalten bilden. + + Jason Mitchell hat das 2008 als **Lesehierarchie** (Read Hierarchy) zusammengefasst ([Connecting Visuals to Gameplay at Valve](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Jede Stufe beantwortet eine Frage des Spielers: + + | Frage | Stufe | Mittel | + | --- | --- | --- | + | Freund oder Feind? | Team | Farbe | + | Weglaufen oder angreifen? | Klasse | Silhouette, Proportionen, Waffe, Schuhe, Hüte, Falten | + | Welche Waffe hält er? | Waffe | höchster Kontrast auf Brusthöhe, Verlauf von dunklen Füßen zur hellen Brust | + + Art Director Moby Francke erklärte dazu 2008 in einem Vortrag auf der Gamefest: „We did it through silhouettes“ ([Game Developer, 2008](https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay)). Team Fortress 2 ist ein 3D-Shooter, keine Pixelart. Die Fragen stellt ein Spieler in einem Top-down-Spiel trotzdem, nur kleiner: Ist das meine Figur? Welcher Gegner ist das, und muss ich ausweichen? + + > [!MERKE] + > Farbe sagt, zu wem eine Figur gehört. Die Silhouette sagt, was sie ist. + + ## Formensprache: Kreis, Rechteck, Dreieck als Konvention + + **Formensprache** (Shape Language) heißt: Die Grundform, aus der eine Figur gebaut ist, soll etwas über sie sagen. In vielen Character-Design-Kursen wird sie so gelehrt: Kreise wirken weich und harmlos, Rechtecke stabil und schwer, Dreiecke und Zacken beweglich oder gefährlich. + + ![Drei schwarze Silhouetten nebeneinander. A ist aus Kreisen gebaut: großer runder Körper, kleiner runder Kopf, flache ovale Füße. B aus Rechtecken: breiter Block als Rumpf, eckiger Kopf, zwei breite Beine. C aus Dreiecken: ein nach unten zeigendes Dreieck als Rumpf mit drei Zacken oben und zwei dünnen schrägen Beinen](/media/pixelart/silhouette-formsprache/grundformen@2x.png "Figuren aus Kreisen (A), Rechtecken (B) und Dreiecken (C). Eigenes Schaubild") + + A sitzt schwer auf dem Boden, nichts ragt heraus. B steht breit und fest. C steht auf zwei dünnen Beinen, die Spitzen zeigen nach außen, die schwere Seite ist oben. Saint11 begründet die Konvention halb im Scherz: Schlangenartige Formen, lange Gliedmaßen und spitze Kanten „convey danger“, komplizierte und scharfe Formen ebenso. Gleich darunter merkt er an, Säugetiere machten sich wohl zu viele Sorgen ([Character Design 1](https://saint11.art/img/pixel-tutorials/Silhouette.gif)). Für niedliche Figuren rät er zu „rounded and soft shapes“ und schreibt groß darunter: „These are NOT rules, just guidelines“ ([Cuteness](https://saint11.art/img/pixel-tutorials/Cuteness.gif)). + + Formensprache wirkt auch jenseits von Figuren. Bei Team Fortress 2 haben die Gebäude der beiden Teams gegensätzliche Eigenschaften: Die Basis des roten Teams nutzt warme Farben, Naturmaterialien und „angular geometry“, die des blauen Teams kühle Farben, Industriematerialien und „orthogonal forms“ ([NPAR 2007, Abschnitt 4.2](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf)). Dort trennt die Form zwei Teams, nicht Gut und Böse. + + Warum Konvention und kein Gesetz? Keine Quelle dieses Kurses misst, wie Formen wirken, und Saint11 nennt seine Hinweise ausdrücklich Leitlinien. Eine runde Figur kann bedrohlich wirken, wenn sie zehnmal so groß ist wie die Spielfigur. Ein Dreieck kann auch eine Richtung zeigen statt Gefahr. Nimm die Konvention als Startpunkt und prüf die Wirkung bei anderen: Zeig zwei Silhouetten und frag, welche gefährlicher wirkt, ohne eine Antwort vorzugeben. Meist dominiert eine Grundform, die anderen ergänzen. Eine Figur aus Rechtecken mit einem spitzen Hut liest sich anders als ein reiner Block. + + ### Größe, Proportion und Rhythmus: groß, mittel, klein + + Eine Silhouette aus gleich großen Teilen wirkt starr. Proko warnt beim Gestenzeichnen vor dem Hang zur Symmetrie, der eine Figur aussehen lässt „like a snowman“ ([How to Draw Gesture](https://www.proko.com/course-lesson/how-to-draw-gesture)). Für Silhouetten gilt Ähnliches: Drei gleiche Kreise übereinander sind ein Schneemann. + + Eine verbreitete Faustregel ist der **Größenrhythmus** groß – mittel – klein: eine große Masse wie Rumpf oder Mantel, eine mittlere wie Kopf oder Waffe, ein kleines Element wie Hutspitze, Ohr oder Werkzeug. Die Regel stammt aus der Praxis, nicht aus einer Messung. Prüfen kannst du sie an jedem Thumbnail: Lassen sich die Teile in drei klar verschiedene Größen sortieren? In Feld B der Abbildung oben gelingt das: Der Rumpf ist 16 Pixel breit, der Kopf 8, jedes Bein 5. Auch in C stehen der breite Rumpf, die Zacken und die dünnen Beine in deutlichem Kontrast. + + Proportionen sind selbst ein Merkmal. Mitchell nennt sie in der Lesehierarchie direkt neben der Silhouette. Ein großer Kopf auf einem kleinen Körper liest sich anders als ein kleiner Kopf auf breiten Schultern; wie du Proportionen misst und stilisierst, behandelt [Figur, Geste und Proportion](/pixelart/figur-proportion). Saint11 setzt außerdem ein starkes Element in die Silhouette, „something that will make it easy to recognize them“, bei seinem Roboter ein flacher Kopf und ein Kettenantrieb ([Character Design 1](https://saint11.art/img/pixel-tutorials/Silhouette.gif)). Ein solches **Erkennungsmerkmal** kann ein Hut sein, eine Haarform oder ein langes Werkzeug. + + ## Negativraum: Lücken machen die Pose lesbar + + **Negativraum** ist die Fläche zwischen und um die Teile einer Figur. Ctrl+Paint beschreibt ihn als den Raum um ein Objekt herum und schreibt: „Eventually, when you're designing characters and environments, you'll be using the negative space intentionally“ ([Drawing Shape: Negative Space](https://www.ctrlpaint.com/videos/drawing-shape-negative-space)). Wie du Negativraum beim Beobachten siehst, übst du in [Beobachten, Messen und Referenzen](/pixelart/beobachten). + + ![Zwei schwarze Silhouetten derselben Puppe. In A liegen die Arme am Rumpf an und verschmelzen mit ihm, nur die Beine sind getrennt. In B zeigt ein Arm schräg nach oben, der andere schräg nach unten, die Beine stehen gespreizt; zwischen Armen und Rumpf und zwischen den Beinen liegen helle Lücken](/media/pixelart/silhouette-formsprache/negativraum-silhouette@2x.png "Arme am Körper (A) und vom Körper weg (B). Eigenes Schaubild") + + In A ist die Silhouette ein Block mit Kopf. Ob die Figur etwas hält, die Arme verschränkt oder hängen lässt, sieht man nicht. In B zeigen die Lücken, wo die Arme sind und wohin sie zeigen. Das gilt für alles, was eine Figur hält: Ein Schwert vor dem Bauch verschwindet in der Silhouette, ein Schwert seitlich vom Körper wird Teil von ihr. Valve hat Details und Waffe nach oben zur Brust gelegt, damit man die Waffe gut sieht. + + In Pixeln braucht eine Lücke Platz. Liegt ein Arm nur einen Pixel neben dem Rumpf und bekommen beide eine dunkle Kontur außen herum, füllt die Kontur die Lücke, und die Silhouette schließt sich wieder. Plane Lücken so breit, dass nach der Kontur noch Hintergrund bleibt. + + ## Thumbnails: viele kleine Silhouetten, dann eine weiterentwickeln + + Ein **Thumbnail** ist eine kleine, schnelle Skizze, kaum größer als ein Daumennagel. Für Silhouetten heißt das: Du füllst ein Blatt mit vielen kleinen schwarzen Figuren, jede in weniger als einer Minute. Das kleine Format zwingt zur großen Form, weil für Details kein Platz ist. Danach wählst du nach Kriterien aus, die du vorher aufgeschrieben hast, zum Beispiel: + + - Die Figur ist ohne Innenlinien als das erkennbar, was sie sein soll. + - Sie unterscheidet sich von allen anderen auf dem Blatt. + - Sie hat ein Erkennungsmerkmal, das du in einem Wort benennen kannst. + - Ihre Teile lassen sich in groß, mittel und klein sortieren. + + Ctrl+Paint kritisiert dabei eine Gewohnheit: Viele behandeln jede Skizze als Treffer oder Fehlschuss, „and they draw until a 'hit' happens“ ([Thumbnail Iteration](https://www.ctrlpaint.com/videos/thumbnail-iteration)). Matt Kohr entwickelt stattdessen ein vielversprechendes Thumbnail weiter, im Video mit Masken in Photoshop. Auf Papier heißt das: Du zeichnest dein bestes Thumbnail mehrmals neu und änderst jedes Mal genau einen Teil, etwa den Kopf, die Arme oder das Werkzeug. Beides zusammen ergibt einen Ablauf: erst breit suchen, dann eine Idee gezielt verändern. + + > [!WARNING] Ein Prüfwerkzeug, kein Stil + > Ctrl+Paint warnt in [The Danger of Painting Silhouettes](https://www.ctrlpaint.com/videos/the-danger-of-painting-silhouettes) vor Moden in der Digitalmalerei: „It's bad when you copy the style, and not the substance.“ Schwarze Silhouetten sind ein Mittel, um Umrisse zu vergleichen. Sie ersetzen nicht die Arbeit an Proportion, Pose und Innenformen danach. + + > [!TIP] Die Armlänge als 1×-Test + > Halt das Blatt auf Armlänge oder kneif die Augen zusammen. Details verschwimmen, die großen Formen bleiben. James Gurney nennt als Vorteil eines klaren Tonwertaufbaus, dass er sich „from across the room or when reduced to a tiny size“ liest ([Why Should I Mass Values?](https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html)). Was auf Armlänge nicht trägt, trägt als kleines Sprite erst recht nicht. + + ## Spielfigur, Gegner und große Kreaturen unterscheiden + + In einem Top-down-Actionspiel sieht der Spieler Figuren schräg von oben. Eine reine Draufsicht zeigt laut Wikipedia nur „a head and shoulders seen from above“. Die übliche Schrägansicht verbindet „the visibility and mobility of a top-down game with the character recognizability of a side-scrolling game“ ([2.5D](https://en.wikipedia.org/wiki/2.5D#Axonometric_and_oblique_projection)). Prüf Silhouetten deshalb in der Ansicht, die das Spiel zeigt; die Projektionen erklärt [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum). + + Übertragen auf Mitchells Hierarchie: Die Spielfigur braucht ein Merkmal, das kein Gegner teilt, etwa eine eigene dominante Grundform oder ein eigenes Erkennungsmerkmal. Gegner, die verschieden zu bekämpfen sind, brauchen verschiedene Silhouetten, nicht nur verschiedene Farben. Welche Rollen Gegner im Kampf übernehmen, steht in [Gegnermuster und Telegraphing](/combat/gegnermuster). + + Große Kreaturen folgen derselben Logik in größerem Maßstab. Saint11 rät beim Übertragen eines Entwurfs in Pixel: „Focus on the big masses first“ ([Resizing Pixel Art](https://saint11.art/img/pixel-tutorials/Resizing.gif)). Für eine Kreatur, die viermal so groß ist wie die Spielfigur, heißt das: zwei oder drei große Massen, die sich auch auf Armlänge trennen lassen, und ein klarer **Blickpunkt**, eine Stelle mit dem stärksten Kontrast, etwa Kopf oder Auge. Verteilst du kleine Spitzen über den ganzen Umriss, zerfällt er; das ist eine Faustregel aus der Praxis, keine Messung. Ob man einen großen Gegner im Kampf liest, hängt auch an Telegraphs und Kamera; das behandelt [Große Kreaturen als Bosse](/combat/grosse-gegner). Maßstab und Pixeldichte vertieft [Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab). + + > [!PRAXIS] Silhouette als Prüfung im Konzept + > Valve hat die Klassen „in silhouette with no internal shading“ gezeigt, um die Entwürfe in der Konzeptphase zu bestätigen (NPAR 2007, Abbildung 2). In Mitchells Folien steht die Silhouette als erster Schritt der Figurenentwicklung, vor Innenformen, Modellblatt und 3D-Modell, mit den Stichworten „Building block of character design“ und „Identifiable at first read“. Saint11 arbeitet in derselben Reihenfolge: Silhouettenskizze, Details, Animation. Für dich heißt das: Ein Entwurf bekommt erst Innenlinien, wenn du ihn schwarz gefüllt angesehen und aufgeschrieben hast, was man aus ihm liest. + + > [!INTERVIEW] + > Ein Studio sucht laut Stellenanzeige „A strong pixel art portfolio with unique creatures and characters“ ([Conradical Games, Pixel Artist](https://workwithindies.com/careers/conradical-games-pixel-artist)). Im Portfolio-Gespräch zeigt jemand auf zwei deiner Figuren und fragt: „Woran unterscheidet man die beiden im Gedränge?“ Gute Antwort: Du nennst die Lesehierarchie, also welche Frage die Farbe und welche die Silhouette beantwortet. Du zeigst beide schwarz gefüllt nebeneinander und benennst die Unterschiede in Grundform, Größenrhythmus und Erkennungsmerkmal. Hast du ein Blatt mit Thumbnails dabei, zeigst du, welche Varianten du verworfen hast und nach welchem Kriterium. + + ## Häufige Fehler + + - **Details vor dem Umriss.** Gürtel und Knöpfe zuerst, die Silhouette ergibt sich nebenbei. Prüf erst den Umriss schwarz gefüllt, dann kommen Innenformen. + - **Arme und Werkzeug vor dem Körper.** In der Silhouette verschwinden sie. Halte vom Rumpf weg, was erkannt werden soll. + - **Lücken von einem Pixel.** Nach der Kontur sind sie zu. Plane Negativraum mit der Kontur zusammen. + - **Alles gleich groß.** Ohne groß, mittel und klein wirkt die Figur starr. Sortiere die Teile nach Größe. + - **Formensprache als Gesetz.** „Rund heißt freundlich“ ist eine Konvention. Prüf die Wirkung bei anderen. + - **Gegner nur über Farbe unterschieden.** In Graustufen sind sie gleich. Gib jedem Gegnertyp eine eigene Silhouette. + - **Das erste Thumbnail genommen.** Ohne Vergleich weißt du nicht, ob es trägt. Zeichne mehrere und wähle nach Kriterien. + - **Große Kreatur voller kleiner Zacken.** Der Umriss zerfällt. Wenige große Massen, ein Blickpunkt. + + ## Zusammenfassung + + - Die Silhouette ist das Erste, was ein Spieler von einer Figur wahrnimmt. Prüf sie schwarz gefüllt ohne Innenlinien. + - Valve hat die neun Klassen von Team Fortress 2 so entworfen, dass sie allein als Silhouette erkennbar sind, und das in der Konzeptphase geprüft. + - In der Lesehierarchie beantwortet Farbe „Freund oder Feind?“, die Silhouette „Was ist das?“ und Kontrast auf Brusthöhe „Welche Waffe?“. + - Kreis, Rechteck und Dreieck sind eine Konvention der Formensprache. Saint11 nennt solche Hinweise Leitlinien, keine Regeln. + - Größenrhythmus und ein Erkennungsmerkmal machen eine Silhouette unverwechselbar. + - Negativraum zeigt die Pose. Lücken brauchen in Pixeln Platz für die Kontur. + - Thumbnails: erst viele kleine Silhouetten, dann eine gezielt in Varianten weiterentwickeln. + - Große Kreaturen bestehen aus wenigen großen Massen mit einem klaren Blickpunkt. +exercises: + - id: silhouettentest + type: choice + title: Was der Silhouettentest zeigt + prompt: | + Welche Aussagen über den Silhouettentest stimmen? + options: + - text: Du füllst die Figur dunkel und schreibst auf, was man ohne Innenlinien noch über sie sagen kann. + correct: true + why: Genau so beschriftet Saint11 eine Silhouette mit dem, was man aus ihr liest, etwa „hat ein Schwert“ oder „trägt Rüstung“. + - text: Valve hat die Klassen von Team Fortress 2 schon in der Konzeptphase allein als Silhouetten geprüft. + correct: true + why: Laut NPAR-Paper wurden die Entwürfe so bestätigt, ohne jede Innenschattierung. + - text: Eine Figur mit vielen Innendetails braucht den Test nicht, weil die Details sie unterscheiden. + correct: false + why: In 24 Pixeln Höhe sind Innendetails nur wenige Pixel groß. Im Gedränge sieht man zuerst den Umriss. + - text: Der Test zeigt, ob eine Figur schön ist. + correct: false + why: Er zeigt, ob sie erkennbar und von anderen unterscheidbar ist. Ob sie gefällt, entscheidet kein Test. + explanation: | + Der Silhouettentest nimmt einer Figur alles außer dem Umriss. Was danach noch lesbar ist, trägt sie auch im Spiel, wenn sie klein ist und sich bewegt. Valve hat das als Abnahme in der Konzeptphase genutzt, Saint11 beginnt jeden Entwurf damit. Der Test misst Lesbarkeit, nicht Geschmack. + resources: + - title: Saint11 · Character Design 1 (Silhouette) + url: https://saint11.art/img/pixel-tutorials/Silhouette.gif + + - id: lesehierarchie-frage + type: choice + title: Welche Frage beantwortet die Silhouette? + prompt: | + Ein Spieler sieht am Bildrand eine Figur. Welche Frage beantwortet nach Mitchells Lesehierarchie für Team Fortress 2 vor allem die Silhouette? + options: + - text: Freund oder Feind? + correct: false + why: Das Team liest man an der Farbe. Rot und Blau trennen die Seiten. + - text: Weglaufen oder angreifen? + correct: true + why: Die Klasse sagt, wie gefährlich ein Gegner ist und wie man reagiert. Sie liest man an Silhouette, Proportionen und Waffe. + - text: Welche Waffe hält er gerade? + correct: false + why: Dafür setzt Valve den höchsten Kontrast auf Brusthöhe, wo die Waffe gehalten wird. + - text: Wie viele Lebenspunkte hat er noch? + correct: false + why: Das gehört nicht zur Lesehierarchie der Figur, sondern zur Oberfläche des Spiels. + explanation: | + Mitchell ordnet jede Frage des Spielers einem Mittel zu: Team über Farbe, Klasse über Silhouette, gewählte Waffe über Kontrast. Die Reihenfolge entspricht der Wichtigkeit im Spiel. Für ein Top-down-Spiel lässt sich das übertragen: Ob eine Figur zu dir gehört, darf die Farbe sagen, aber welcher Gegnertyp es ist, sollte schon der Umriss verraten. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: grundformen-konvention + type: choice + title: Kreis, Rechteck, Dreieck + prompt: | + Sieh dir das Schaubild an. Welche Aussage passt zur Formensprache, wie die Lektion sie beschreibt? + + ![Drei schwarze Silhouetten. A aus Kreisen mit großem rundem Körper, B aus Rechtecken mit breitem Block als Rumpf, C aus einem nach unten zeigenden Dreieck mit Zacken oben und dünnen Beinen](/media/pixelart/silhouette-formsprache/grundformen@2x.png "Figuren aus Kreisen (A), Rechtecken (B) und Dreiecken (C). Eigenes Schaubild") + options: + - text: Nach der verbreiteten Konvention wirkt C am ehesten gefährlich. Ob das in deinem Spiel so ankommt, prüfst du bei anderen. + correct: true + why: Spitze Kanten und dünne Gliedmaßen gelten als Signal für Gefahr, auch bei Saint11. Er nennt das aber Leitlinien, keine Regeln. + - text: A ist garantiert harmlos, weil sie aus Kreisen besteht. + correct: false + why: Eine runde Figur kann bedrohlich wirken, etwa wenn sie riesig ist. Die Konvention ist ein Startpunkt, keine Garantie. + - text: Die Grundform sagt nichts über eine Figur, deshalb sind A, B und C austauschbar. + correct: false + why: Die Formen wirken verschieden, A sitzt schwer, B steht fest, C steht kippelig auf Spitzen. Nur ist die Wirkung nicht festgeschrieben. + - text: Formensprache gilt nur für Figuren, nicht für Gebäude. + correct: false + why: In Team Fortress 2 unterscheiden sich die Basen der Teams durch kantige und rechtwinklige Formen. + explanation: | + Formensprache ist eine Konvention, die viele Kurse lehren und die Saint11 mit einem Augenzwinkern begründet. Keine Quelle dieses Kurses misst ihre Wirkung. Deshalb nimmst du sie als ersten Entwurf und prüfst bei anderen, ob deine Figur so wirkt, wie du willst. + resources: + - title: Saint11 · Cuteness + url: https://saint11.art/img/pixel-tutorials/Cuteness.gif + + - id: thumbnail-ablauf + type: order + title: Vom leeren Blatt zur Auswahl + prompt: | + Bring die Schritte einer Thumbnail-Runde in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die Aufgabe der Figur in einem Satz aufschreiben. + Die Auswahlkriterien notieren, bevor du zeichnest. + Zwölf kleine schwarze Silhouetten in zehn Minuten zeichnen. + Das Blatt auf Armlänge halten und markieren, welche Figuren noch tragen. + Zwei oder drei Thumbnails nach den Kriterien auswählen. + Das beste mehrmals neu zeichnen, jedes Mal mit genau einer Änderung. + Erst danach Innenformen und Details planen. + explanation: | + Die Kriterien hängen an der Aufgabe und müssen vor dem Zeichnen feststehen, sonst passt man sie hinterher an das an, was gerade gefällt. Der Armlängentest kommt vor der Auswahl, weil er Figuren aussortiert, die nur im Detail funktionieren. Die Varianten mit je einer Änderung sind der Schritt, den Ctrl+Paint vorschlägt: eine gute Idee gezielt verbessern, statt auf einen Zufallstreffer zu warten. Details kommen zuletzt, weil sie den Umriss nicht mehr retten. + resources: + - title: Ctrl+Paint · Thumbnail Iteration + url: https://www.ctrlpaint.com/videos/thumbnail-iteration + + - id: negativraum-zaehlen + type: output + title: Wie viele Lücken sind eingeschlossen? + prompt: | + Das Raster zeigt eine Silhouette, `#` ist die Figur, `.` der Hintergrund. Wie viele Lücken sind vollständig von der Figur umschlossen? Antworte mit der Zahl. + lang: text + code: | + . . . . . # # # . . . . . + . . . . . # # # . . . . . + . . . . . . # . . . . . . + . . # # # # # # # # # . . + . # # . # # # # # . # # . + . # . . # # # # # . . # . + . # # . # # # # # . # # . + . . # # # # # # # # # . . + . . . . # # # # # . . . . + . . . . # # . # # . . . . + . . . # # . . . # # . . . + . . . # . . . . . # . . . + . . # # . . . . . # # . . + expected: | + 2 + accept: + - 2 Lücken + - zwei + - zwei Lücken + hints: + - Verfolge jede Lücke. Erreicht sie den Rand des Rasters, ist sie nicht eingeschlossen. + - Die Lücke zwischen den Beinen ist nach unten offen. + explanation: | + Die Figur stemmt die Hände in die Hüften. Zwischen jedem Arm und dem Rumpf liegt eine eingeschlossene Lücke, zusammen zwei. Die Lücke zwischen den Beinen ist nach unten offen und zählt deshalb nicht. Genau diese beiden Löcher machen die Pose lesbar: Ohne sie wäre der Oberkörper ein breiter Block, und niemand sähe, wo die Arme sind. + resources: + - title: Ctrl+Paint · Drawing Shape · Negative Space + url: https://www.ctrlpaint.com/videos/drawing-shape-negative-space + + - id: kontur-luecke + type: output + title: Was die Kontur von der Lücke übrig lässt + prompt: | + Zwischen einem Arm und dem Rumpf liegen 3 Pixel Hintergrund. Beide Formen bekommen danach eine Kontur von einem Pixel, die außen um die Form gesetzt wird. Wie viele Pixel Hintergrund bleiben zwischen Arm und Rumpf? Antworte mit der Zahl. + lang: text + code: | + Lücke vorher: 3 px + Kontur Arm: 1 px, außen + Kontur Rumpf: 1 px, außen + expected: | + 1 + accept: + - 1 px + - 1 Pixel + - ein Pixel + - einer + explanation: | + Jede Kontur nimmt einen Pixel von der Lücke: 3 − 1 − 1 = 1. Bei einer Lücke von 2 Pixeln bliebe nichts übrig, und Arm und Rumpf verschmölzen in der Silhouette. Setzt du die Kontur innen auf die äußersten Pixel der Form, bleibt die Lücke, dafür werden Arm und Rumpf schmaler. Pixeloramas Effekt „Outline“ kann beides, die Option dafür heißt „place inside image“. + resources: + - title: Pixelorama · Image effects (Outline) + url: https://pixelorama.org/user_manual/image_effects/#list-of-image-effects + + - id: begriffe-silhouette + type: gap + title: Begriffe rund um den Umriss + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Den Umriss einer Figur als gefüllte Fläche ohne Innenlinien nennt man ⟦Silhouette⟧. Die Flächen zwischen Armen, Beinen und Rumpf heißen ⟦Negativraum⟧. Eine kleine, schnelle Skizze zum Vergleichen von Ideen ist ein ⟦Thumbnail⟧. Dass Kreise weich und Zacken gefährlich wirken sollen, gehört zur ⟦Formensprache⟧. Valves Reihenfolge von Team über Klasse zur Waffe heißt ⟦Lesehierarchie⟧. Die Stelle mit dem stärksten Kontrast, auf die der Blick zuerst fällt, ist der ⟦Blickpunkt⟧. + gaps: + - label: gefüllter Umriss + hint: Französisches Wort, im Deutschen üblich. + accept: ["Umriss", "Schattenriss"] + - label: Zwischenflächen + hint: Das Gegenteil der Figur selbst, auf Englisch Negative Space. + accept: ["negativer Raum", "Negative Space", "Zwischenraum"] + - label: kleine Skizze + hint: Englisch, wörtlich „Daumennagel“. + accept: ["Thumbnails", "Daumenskizze", "Miniatur"] + - label: Wirkung der Grundformen + hint: Auf Englisch Shape Language. + accept: ["Shape Language", "Formsprache"] + - label: Valves Reihenfolge + hint: Auf Englisch Read Hierarchy. + accept: ["Read Hierarchy", "Lese-Hierarchie"] + - label: stärkster Kontrast + hint: Die Stelle, zu der das Auge zuerst wandert. + accept: ["Fokuspunkt", "Focal Point", "Blickfang", "Fokus"] + explanation: | + Mit diesen Begriffen beschreibst du eine Figur, ohne über Geschmack zu reden. Silhouette und Negativraum sind zwei Seiten derselben Fläche. Thumbnails sind das Werkzeug, um viele Umrisse zu vergleichen. Formensprache und Lesehierarchie sagen, was ein Umriss mitteilen soll, und der Blickpunkt, wohin der Blick zuerst geht. + + - id: arm-verwachsen + type: bug + title: Der Arm wächst aus der Hüfte + prompt: | + Die Puppe soll beide Arme frei neben dem Körper hängen lassen. Bei 1× wirkt die linke Seite an einer Stelle wie ein breiter Block, als wüchse der Arm aus der Hüfte. Finde die Zeile. + lang: text + code: | + . . . . . # # # . . . . . + . . . . . # # # . . . . . + . . . . . . # . . . . . . + . . . # # # # # # # . . . + . . # # . # # # . # # . . + . . # . . # # # . . # . . + . # # # # # # # . . # # . + . # . . . # # # . . . # . + . . . . # # # # # . . . . + . . . . # # . # # . . . . + . . . # # . . . # # . . . + . . . # . . . . . # . . . + lines: [7] + hints: + - Vergleiche jede Zeile links mit rechts. Die Figur soll symmetrisch sein. + explanation: | + In Zeile 7 füllen zwei Pixel links die Lücke zwischen Arm und Rumpf. Rechts liegen an derselben Stelle zwei Pixel Hintergrund. Die Brücke schließt den Negativraum, und der Arm verschmilzt mit dem Rumpf genau dort, wo die Hand sein sollte. Entfernst du die beiden Pixel, hängt der Arm wieder frei. Solche Brücken entstehen oft, wenn man eine Form freihändig füllt. + resources: + - title: Ctrl+Paint · Drawing Shape · Negative Space + url: https://www.ctrlpaint.com/videos/drawing-shape-negative-space + + - id: verwechslung-notiz + type: bug + title: Wer ist hier die Spielfigur? + prompt: | + Lehrbeispiel: Designnotizen für ein kleines Top-down-Spiel. Im Test mit einem Screenshot in Graustufen verwechselt eine Testerin zweimal die Spielfigur mit einem Gegner. Finde die Zeile, die das verursacht. + lang: prose + code: | + Spielfigur: schmal, breiter Hut mit Krempe als Erkennungsmerkmal + Nahkämpfer: breite Schultern, kantig, Keule seitlich vom Körper + Fernkämpfer: lang und dünn, Stab ragt über den Kopf hinaus + Späher: so groß wie die Spielfigur, gleicher Hut, nur andere Farbe + Großer Gegner: drei große Massen, helles Auge als Blickpunkt + lines: [4] + hints: + - Was bleibt von einer Figur übrig, wenn die Farbe wegfällt? + explanation: | + Der Späher teilt Größe und Erkennungsmerkmal mit der Spielfigur und unterscheidet sich nur in der Farbe. In Graustufen bleibt davon nichts. Nach Valves Lesehierarchie darf die Farbe sagen, auf welcher Seite eine Figur steht, aber der Umriss muss sagen, was sie ist. Der Späher braucht eine eigene Silhouette, etwa eine andere Kopfform oder Größe. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: tf2-silhouetten + type: explain + title: Neun Klassen als schwarze Flächen + prompt: | + Erkläre in drei bis fünf Sätzen, warum Valve die Klassen von Team Fortress 2 als Silhouetten ohne Innenschattierung prüfte und was daraus für ein kleines Top-down-Spiel folgt. + lang: text + code: | + Team Fortress 2 (Valve, 2007) + nach NPAR-Paper und MIGS-Folien: + - Die Klasse entscheidet, wie man + auf einen Gegner reagiert. + - Die neun Silhouetten sind bewusst + stark verschieden. + - Prüfung im Konzept: nur Umriss, + keine Innenschattierung. + - Unterschiede aus Proportionen, + Waffen, Schuhen, Hüten, Falten. + - Team über Farbe, Waffe über + Kontrast auf Brusthöhe. + points: + - Die Klasse bestimmt die Reaktion des Spielers, deshalb muss sie auf den ersten Blick lesbar sein, auch im Gedränge und in schwierigem Licht. + - Ohne Innenschattierung bleibt nur der Umriss. Ist eine Figur so erkennbar, tragen Details nur noch zusätzlich. + - Die Unterschiede entstehen aus großen Merkmalen wie Proportionen, Waffen und Hüten, nicht aus Farbe. + - Für ein Top-down-Spiel heißt das, dass Spielfigur und jeder Gegnertyp eine eigene Silhouette in der Ansicht brauchen, die das Spiel zeigt. + explanation: | + In Team Fortress 2 entscheidet die Klasse eines Gegners, ob du angreifst oder fliehst, und das oft in Sekundenbruchteilen und bei schwierigem Licht. Valve hat die Figuren deshalb so entworfen, dass sie schon als schwarze Fläche erkennbar sind, und das in der Konzeptphase geprüft, bevor teure Modelle entstanden. Die Unterschiede stecken in großen Merkmalen: Proportionen, Waffen, Hüte, Schuhe. Farbe übernimmt eine andere Frage, nämlich die nach dem Team. Für ein kleines Top-down-Spiel folgt daraus, jeden Gegnertyp und die Spielfigur in der Spielansicht schwarz gefüllt nebeneinanderzulegen und zu prüfen, ob man sie auseinanderhält. + resources: + - title: Valve · Illustrative Rendering in Team Fortress 2 (NPAR 2007) + url: https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf + + - id: zwoelf-thumbnails + type: practice + title: Zwölf Silhouetten in zehn Minuten + prompt: | + Wähle eine Aufgabe für eine Figur, etwa „flinker Späher“, „schwerer Wächter“ oder „Händler“, und schreib sie oben aufs Blatt, dazu drei Auswahlkriterien. Stell einen Timer auf zehn Minuten und zeichne zwölf Silhouetten, keine höher als dein Daumen, gleich mit Filzstift gefüllt. Danach hältst du das Blatt auf Armlänge, wählst zwei aus und zeichnest die bessere dreimal neu, jedes Mal mit genau einer Änderung. Notiere hier in zwei bis drei Sätzen, welche du gewählt hast und warum. + lang: prose + checklist: + - Aufgabe und drei Kriterien standen auf dem Blatt, bevor du die erste Silhouette gezeichnet hast. + - Auf dem Blatt stehen zwölf gefüllte Silhouetten, gezeichnet innerhalb der zehn Minuten. + - Keine Silhouette ist höher als dein Daumen. + - Für beide ausgewählten Thumbnails hast du ein Kriterium genannt, das sie erfüllen. + - Die drei Varianten unterscheiden sich jeweils in genau einem Teil, und du hast notiert, welcher Teil das war. + hints: + - Fang jede Silhouette mit der größten Masse an, Kopf und Kleinteile kommen danach. + - Wenn dir nach sechs Figuren nichts mehr einfällt, ändere bewusst die dominante Grundform. + explanation: | + Der Timer zwingt dich, die große Form zu entscheiden statt Details zu zeichnen. Weil die Kriterien vorher feststehen, wählst du nach Lesbarkeit und nicht nach dem, was dir gerade gefällt. Die Varianten mit je einer Änderung zeigen dir, welcher Teil des Umrisses die Wirkung trägt. Das Blatt hebst du auf: Es ist genau das Material, das im Portfolio-Gespräch deinen Prozess zeigt. + resources: + - title: Ctrl+Paint · Thumbnail Iteration + url: https://www.ctrlpaint.com/videos/thumbnail-iteration + + - id: silhouettentest-spiel + type: practice + title: Silhouettentest an einem Spiel + prompt: | + Wähle ein Pixelart-Spiel mit Draufsicht, das du kennst, und nimm einen Screenshot mit mindestens drei Figuren, darunter die Spielfigur. Sieh ihn am Handy klein oder auf Armlänge an. Notiere in höchstens fünf Stichpunkten, welche Figuren du am Umriss unterscheiden kannst und woran. + lang: prose + starter: | + Spiel und Szene: + Figur 1 – Merkmal: + Figur 2 – Merkmal: + Figur 3 – Merkmal: + Am schwersten zu unterscheiden: + checklist: + - Spiel und Szene sind genannt. + - Für mindestens drei Figuren steht je ein Merkmal des Umrisses da, also Grundform, Größe oder Erkennungsmerkmal, keine Farbe. + - Du hast das Paar genannt, das am schwersten zu unterscheiden ist, mit einem Grund im Umriss. + - Du hast notiert, ob das Spiel die Spielfigur zusätzlich über Farbe oder Helligkeit hervorhebt. + hints: + - Schreib nur, was du am Umriss siehst. Farbe kommt erst im letzten Punkt vor. + explanation: | + An fremden Spielen siehst du, welche Mittel die Lesbarkeit tragen, ohne an deinen eigenen Entwurf gebunden zu sein. Trennst du Umriss und Farbe, merkst du, wo ein Spiel sich auf Farbe verlässt. Die Antwort auf die letzte Frage zeigt dir, ob es die Lesehierarchie so umsetzt wie Valve oder anders. + resources: + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + + - id: kreatur-massen + type: practice + title: Eine große Kreatur aus drei Massen + prompt: | + Zeichne auf Papier sechs Thumbnails einer großen Kreatur, jede neben einer Strichfigur in der Größe einer Spielfigur. Baue jede Kreatur aus höchstens drei großen Massen und markiere ihren Blickpunkt mit einem Kreis. Wähle eine aus und zeig sie einer anderen Person zwei Sekunden lang, oder sieh sie dir selbst am nächsten Tag zwei Sekunden lang an. Notiere, was zuerst genannt oder gesehen wurde. + lang: prose + checklist: + - Sechs Thumbnails, jedes mit einer Strichfigur als Größenvergleich daneben. + - Jede Kreatur ist mindestens dreimal so hoch wie die Strichfigur. + - In jedem Thumbnail hast du die großen Massen nummeriert, es sind höchstens drei. + - Jedes Thumbnail hat genau einen markierten Blickpunkt. + - Du hast notiert, was beim Zwei-Sekunden-Blick zuerst auffiel und ob es dein markierter Blickpunkt war. + hints: + - Fang mit dem größten Körper an, etwa einem liegenden Oval, und setz die anderen Massen daran. + explanation: | + Bei großen Kreaturen ist die Versuchung groß, den zusätzlichen Platz mit Kleinteilen zu füllen. Die Begrenzung auf drei Massen hält den Umriss lesbar, der eine Blickpunkt sagt dem Auge, wohin es zuerst gehen soll. Der Zwei-Sekunden-Blick prüft genau das. Welche Stellen eines Bosses im Kampf wichtig sind, etwa Schwachpunkte, behandelt [Große Kreaturen als Bosse](/combat/grosse-gegner). + resources: + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif diff --git a/content/pixelart/modules/sprite-entwerfen.yaml b/content/pixelart/modules/sprite-entwerfen.yaml new file mode 100644 index 00000000..e32f5f4b --- /dev/null +++ b/content/pixelart/modules/sprite-entwerfen.yaml @@ -0,0 +1,417 @@ +id: sprite-entwerfen +title: Vom Entwurf zum Sprite +level: 2 +minutes: 140 +summary: Wie du eine Spritegröße wählst, eine Skizze auf 16 bis 32 Pixel Höhe übersetzt statt verkleinerst und sie in vier Ebenen – Silhouette, Werte, Farbe, Feinschliff – zu einer Figur ausbaust, die bei 100 % Zoom und gespiegelt noch trägt. +place: pc +goals: + - Du wählst eine Spritegröße aus Tilegröße, Kopfanteil und Arbeitsaufwand und begründest sie. + - Du entscheidest beim Übersetzen in wenige Pixel, was bleibt und was wegfällt, und hältst die Entscheidung in einer Merkmalsliste fest. + - Du baust ein Sprite in getrennten Ebenen auf, Silhouette, Werte, Farbe und Feinschliff, und prüfst jede Stufe einzeln. + - Du legst die Werte einer Figur von unten dunkel nach oben hell an und setzt den stärksten Kontrast dorthin, wo der Blick hin soll. + - Du prüfst ein Sprite bei 100 % Zoom, gespiegelt und als Silhouette und findest so Fehler, die im Zoom verborgen bleiben. + - Du legst deine eigene Skizze als Referenz unter, speicherst im Editorformat und exportierst mit ganzzahliger Vergrößerung. +resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + - title: Aseprite Docs · Layers + url: https://www.aseprite.org/docs/layers/ + - title: Pixelorama Docs · Layer + url: https://pixelorama.org/concepts/layer/ +lesson: | + Du hast auf Papier eine Figur entworfen: Hut, Tasche, Gürtel, Stiefel mit Schnallen. Jetzt legst du im Editor eine Leinwand von 16 × 24 Pixeln an und merkst, dass der Kopf acht Pixel hoch wird und ein Auge ein einziger Pixel ist. Für den Gürtel bleibt eine Reihe, die Schnallen haben keinen Platz, die Tasche wird ein Fleck. Fotografierst du die Skizze und rechnest sie auf diese Größe herunter, bekommst du einen Brei aus Mischfarben. + + Dieses Modul führt vom Entwurf zum Sprite: Größe wählen, entscheiden, was bleibt, und die Figur in vier Ebenen aufbauen, die du einzeln prüfen kannst. Du arbeitest im Pixel-Editor, kostenlos mit Pixelorama oder LibreSprite oder mit Aseprite, wenn du es hast. Die Einrichtung steht in [Einen Pixel-Editor wählen und einrichten](/pixelart/editor-einrichten). Bedienschritte stehen in eigenen Absätzen mit **Bedienung**, damit sie nicht mit den Gestaltungsgründen verschwimmen. Den Umriss hast du in [Silhouette und Formensprache](/pixelart/silhouette-formsprache) schon auf Papier geprüft; hier wird er zu Pixeln. + + ## Die Spritegröße wählen: Tile, Kopf, Aufwand + + Raymond Schlitter (Slynyrd) schreibt: „Generally, tile size is the best gauge for determining sprite size“, und: „1 tile wide by 2 tiles tall is one of the most common sprite sizes“ ([Pixelblog 22](https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites)). Für Tiles in Draufsicht nennt er 16 × 16 Pixel als „probably the most common size“ ([Pixelblog 20](https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles)). Daraus ergibt sich als Ausgangspunkt eine Leinwand von 16 × 32 Pixeln, in der die Figur nicht jede Reihe füllen muss. + + Der Kopf bekommt mehr Platz als in der Natur. Bei wenig Platz nimmt er laut Schlitter „usually … a third to half of the total sprite“ ein. Wikipedia beschreibt für den Stil Super Deformed einen Kopf, der „normally anywhere between one third and one half the character's height“ ausmacht ([Super deformed](https://en.wikipedia.org/wiki/Super_deformed#Appearance_and_media_usage)). Saint11 nennt niedliche Figuren „usually short (less than 4 heads)“ ([Cuteness](https://saint11.art/img/pixel-tutorials/Cuteness.gif)). Wie du Kopfeinheiten misst, steht in [Figur, Geste und Proportion](/pixelart/figur-proportion). + + ![Dieselbe Figur in drei Größen bei gleicher Pixelgröße. A ist 16 Pixel hoch, der Kopf hat nur wenige Pixel, Arme und Rumpf verschmelzen fast. B ist 24 Pixel hoch, Kopf, Hemd, Arme und Hose sind getrennt erkennbar. C ist 32 Pixel hoch, der Kopf ist runder, Arme und Beine sind deutlich abgesetzt](/media/pixelart/sprite-entwerfen/groessen@2x.png "16, 24 und 32 Pixel hoch (A–C), gleiche Pixelgröße. Eigenes Schaubild") + + Die Puppe im Schaubild ist gut drei Köpfe hoch. In A sind das rund fünf Pixel Kopf, für Augen bleiben zwei Pixel, Arme und Rumpf trennen sich kaum. In B hat der Kopf rund acht Pixel, Hemd und Hose sind eigene Flächen. In C wird der Kopf rund, die Beine haben eine Lücke. Saint11 fasst das so: „Bigger resolutions allow more realistic styles and rounded shapes“, und „Higher resolutions usually have more colors too“ ([Resizing Pixel Art](https://saint11.art/img/pixel-tutorials/Resizing.gif)). + + Größe kostet Arbeit. Eine Leinwand von 16 × 24 hat 384 Pixel, eine von 32 × 48 viermal so viele, und das für jede Ansicht, die du später zeichnest. Zum Vergleich: Bei Dead Cells, einem Actionspiel in Seitenansicht, ist die Figur laut Thomas Vasseur von Motion Twin im Spiel „only 50 pixels“ hoch ([Game Developer](https://www.gamedeveloper.com/production/art-design-deep-dive-using-a-3d-pipeline-for-2d-animation-in-i-dead-cells-i-)). Die passende Größe folgt aus Kamera, Tilegröße und Aufwand, nicht aus einer Norm. Wie viele Bildschirmpixel ein Spritepixel im Spiel bekommt, regelt die Engine, siehe [Pixelraster in Godot](/godot/pixelraster). + + ## Übersetzen statt verkleinern + + Saint11 beginnt seine Tafel zum Skalieren mit einer Warnung: „Scaling and rotating pixel art should always be avoided, to do it properly there's no easy escape, you need to redraw it.“ Für den Weg vom Konzept zum Sprite rät er: „Think of it more as a translation than as a rescaling“, „Focus on the big masses first“ und „Choose strong details“, an seinem Beispiel einen Schulterschutz und die Knöpfe am Mantel. Und: „As the resolution decreases you need to start choosing what details are important.“ + + Übersetzen heißt entscheiden. Schreib vor dem ersten Pixel eine **Merkmalsliste** und ordne sie nach Wichtigkeit: + + 1. Silhouette: Grundform, Proportion, Haltung. + 2. Kopf: Größe, Haarform oder Kopfbedeckung. + 3. Ein Erkennungsmerkmal: ein Werkzeug, ein Kragen, eine Farbe. + 4. Zweitrangiges: Gürtel, Tasche, Schuhe. + 5. Kleinkram: Knöpfe, Schnallen, Nähte. + + Dann streichst du von unten, bis der Rest in die Leinwand passt. Was bleibt, darf größer werden als in der Skizze; ein Erkennungsmerkmal in drei Pixeln ist lesbarer als drei Merkmale in je einem. Schlitter beschreibt das Ziel als „push the detail just far enough until the mind can fill in the rest“ und rät: „Avoid too many small scattered clusters“ ([Pixelblog 57](https://www.slynyrd.com/blog/2025/7/28/pixelblog-57-knights-monsters-amp-castles)). Derek Yu: „Making small sprites is about making compromises“ ([Pixel Art Tutorial](https://www.derekyu.com/makegames/pixelart.html#small_sprite)). + + Eine Rechnung zeigt, warum Kleinkram verschwindet. Halbierst du die Höhe von 32 auf 16 Pixel, steht jeder neue Pixel für 2 × 2 alte. Alles, was in der großen Fassung kleiner ist als ein Block von 2 × 2 Pixeln, bekommt in der kleinen meist keinen eigenen Pixel mehr. + + > [!WARNING] Herunterrechnen ist kein Entwurf + > Ein Foto der Skizze mit der Größenänderung des Editors zu verkleinern, erzeugt Mischfarben und verwaiste Pixel. Saint11 nennt automatische Skalierung höchstens einen ersten Schritt beim Anpassen fertiger Pixelart, danach müssen Kontur und Silhouette neu gezogen werden, und rät: „don't rely too much on them“. Leg die Skizze stattdessen als Referenz unter und zeichne neu. + + ## Vier Stufen in vier Ebenen + + Jede Stufe beantwortet eine Frage. Erst wenn sie beantwortet ist, kommt die nächste. + + ![Dieselbe Puppe von 16 × 24 Pixeln in vier Stufen. A ist eine dunkle Silhouette. B zeigt dieselbe Form in vier Grautönen, Haare am dunkelsten, Hose dunkel, Hemd mittel, Gesicht und Arme hell, mit helleren Kanten oben links und dunkleren unten rechts. C setzt Farben ein, Haut, blaues Hemd, braune Hose und dunkelbraune Haare, jeweils mit Licht- und Schattenton. D hat eine Außenkontur, an jeder Stelle in einer dunklen Variante der angrenzenden Farbe](/media/pixelart/sprite-entwerfen/arbeitsschritte@2x.png "Silhouette (A), Werte (B), Farbe (C), Feinschliff mit farbiger Kontur (D). Eigenes Schaubild") + + - **A Silhouette:** Ist die Figur als Umriss erkennbar, und stimmen Proportion und Haltung? + - **B Werte:** Trennen sich Haare, Gesicht, Hemd und Hose im Tonwert, und liegt der stärkste Kontrast an der richtigen Stelle? Tonwerte erklärt [Licht, Schatten und Tonwerte](/pixelart/licht-werte). + - **C Farbe:** Welche Farbtöne bekommt jede Fläche, ohne dass die Wertestruktur aus B verloren geht? Rampen und Paletten stehen in [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten). + - **D Feinschliff:** Kontur, saubere Linien, Kantenglättung, die letzten Details. In D ist die Kontur nicht schwarz, sondern je Fläche eine dunkle Variante ihrer Farbe; wann das hilft, behandelt [Schattieren, Dithering, Textur und Detailgrad](/pixelart/schattieren-textur), saubere Läufe [Linien, Kurven und Cluster](/pixelart/linien-cluster). + + Getrennte Ebenen erlauben, eine Stufe zu verwerfen, ohne die vorige zu verlieren. Du blendest die Farbe aus und vergleichst mit den Werten, oder du zeigst nur die Silhouette. + + **Bedienung:** In Aseprite legst du mit *Layer > New > New Layer* oder Shift+N eine neue Ebene an; *Layer > Visible* oder Shift+X blendet sie ein und aus, ein Doppelklick auf den Namen benennt sie um ([Layers](https://www.aseprite.org/docs/layers/)). In Pixelorama liegen die Ebenen in der Timeline, obere Ebenen werden über unteren gezeichnet, Gruppenebenen halten sie zusammen ([Layer](https://pixelorama.org/concepts/layer/)). LibreSprite hat das Ebenenmenü älterer Aseprite-Versionen, eine eigene Doku gibt es nicht. Benenne die Ebenen nach der Stufe: „1 Silhouette“, „2 Werte“, „3 Farbe“, „4 Kontur“. + + > [!PRAXIS] So arbeiten andere + > In Mitchells Folien zu Team Fortress 2 beginnt die Figurenentwicklung mit der Silhouette, dann folgen Innenformen, Modellblatt und Modell ([MIGS 2008](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Saint11 schreibt seinen Ablauf als „silhouette sketch → add details → animate“. Derek Yu skizziert kleine Sprites oft mit farbigen Flächen statt mit Konturen ([Pixel Art Tutorial](https://www.derekyu.com/makegames/pixelart.html#small_sprite)), und Raymond Schlitters Prozess beginnt bei Figuren oft „with basic color coded dummies“ ([Pixelblog 57](https://www.slynyrd.com/blog/2025/7/28/pixelblog-57-knights-monsters-amp-castles)). Allen gemeinsam: grobe Flächen zuerst, Linien und Details zuletzt. + + ## Werte von unten nach oben: wohin der Blick geht + + Valve hat die Figuren in Team Fortress 2 von unten nach oben heller werden lassen. In Mitchells Lesehierarchie steht: „Gradient from dark feet to light chest“ und „Highest contrast at chest level, where weapon is held“. Art Director Moby Francke erklärt: „We then also gradated the character from the dark bottoms to the contrasting upper torso for better readability“ ([Game Developer, 2008](https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay)). + + In Stufe B des Schaubilds ist die Hose dunkler als das Hemd, Gesicht und Hände sind am hellsten, die Haare am dunkelsten. Der stärkste Kontrast liegt am Kopf, wo dunkles Haar an helle Haut stößt. Für ein Sprite in Draufsicht ist der Kopf oft die wichtigste Stelle, weil er ein Drittel der Figur ausmacht und Blickrichtung und Ausdruck trägt. Liegt dein Erkennungsmerkmal woanders, etwa an einem Werkzeug, gehört der stärkste Kontrast dorthin. + + Team Fortress 2 ist ein 3D-Spiel. Dass sich das Prinzip auf ein Sprite von 24 Pixeln übertragen lässt, ist eine Folgerung, die du an deinem Sprite prüfst: Kneif die Augen zusammen und schau, wohin der Blick zuerst geht. + + > [!MERKE] + > Werte vor Farbe. Wenn eine Figur in Grau nicht trägt, rettet keine Farbe sie. + + ## Prüfen: bei 100 %, gespiegelt, als Silhouette + + Im Zoom von 800 % sieht jedes Sprite ordentlich aus. Ob es trägt, zeigt erst die Originalgröße. Prüf jede Stufe dreimal: + + - **Bei 100 %.** So groß ist die Figur, bevor die Engine sie skaliert. Wirkt sie bei 100 % unklar, hilft dir die Vergrößerung im Spiel nur, die Unklarheit größer zu sehen. + - **Gespiegelt.** Nach längerem Hinsehen gewöhnst du dich an eigene Fehler. Gespiegelt wirkt das Bild fremd, und schiefe Schultern oder ein verrutschter Kopf fallen auf. + - **Als Silhouette.** Blende alle Ebenen außer der Silhouette aus, oder fülle eine Kopie der fertigen Figur mit einer Farbe. + + **Bedienung:** In Aseprite stellen die Tasten 1 bis 6 den Zoom auf 100 % bis 3200 % ([Zoom](https://www.aseprite.org/docs/zoom/)). *Edit > Flip Horizontal* oder Shift+H spiegelt das Bild selbst ([Flip](https://www.aseprite.org/docs/flip/)); spiegel danach zurück. Pixelorama hat im Zoom-Werkzeug einen Knopf für 100 %, der zeigt, „how your art looks at its original dimensions“ ([Canvas · Zoom](https://pixelorama.org/user_manual/user_interface/canvas/#zoom)). *View > Mirror View* oder Shift+M spiegelt dort nur die Ansicht, das Bild bleibt unverändert ([Canvas · Mirror](https://pixelorama.org/user_manual/user_interface/canvas/#mirror)). Für Skizzen in Krita spiegelt die Taste M die Ansicht ([View Menu](https://docs.krita.org/en/reference_manual/main_menu/view_menu.html)). + + ## Skizze als Referenz, Speichern und Export + + Deine Papierskizze kommt als Foto in den Editor, aber nicht als Pixel. Aseprite hat dafür Referenzebenen, „a way to show reference images at higher resolutions than the canvas“, die man nicht bemalen kann; du legst sie mit *Layer > New > New Reference Layer from File* an ([Reference Layer](https://www.aseprite.org/docs/reference-layer/)). Pixelorama fragt beim Import eines Bildes, wie es geöffnet werden soll, unter anderem als „New reference image“ oder als neue Ebene ([Import](https://pixelorama.org/user_manual/Import/#import-image-options)). In LibreSprite legst du das Foto auf eine eigene, unterste Ebene, zeichnest auf Ebenen darüber und blendest die Fotoebene zum Prüfen aus. Freie Skizzen mit der Maus gehen in Krita besser als im Pixel-Editor. + + Die Referenz ist deine eigene Zeichnung. Fotos und Werke anderer helfen beim Lernen, aber du paust sie nicht ab, und generierte Bilder sind keine Vorlage: Jede Figur, die du zeichnest, ist deine Arbeit. + + Speichern und Exportieren sind zwei Schritte. Pixelorama erklärt den Unterschied: Speichern im eigenen Format behält Ebenen und alle Daten, Exportieren erzeugt PNG-Dateien zum Teilen oder für eine Engine. „Of course, nothing is stopping you from doing both, which is actually the recommended approach“ ([Save and Export](https://pixelorama.org/user_manual/save_and_export/#exporting)). Aseprite speichert als `.aseprite`, Pixelorama als `.pxo`. Für die Engine exportierst du bei 100 %. Zum Zeigen im Netz vergrößerst du beim Export ganzzahlig, etwa auf 400 %: Aseprite hat dafür im Exportdialog das Feld *Resize* ([Exporting](https://www.aseprite.org/docs/exporting/#automatic-resize-on-export)), Pixelorama eine Option zum Vergrößern mit der Interpolation *Nearest*. Schlitter begründet die ganzen Zahlen: „increase the image size only by whole number multiples in order to preserve the uniformity of the pixel units“ ([Pixelblog 5](https://www.slynyrd.com/blog/2018/5/16/pixelblog-5-back-to-basics)). Wie das Sprite danach in Godot kommt, steht in [Sprites importieren](/godot/sprites-importieren). + + > [!INTERVIEW] + > Manche Studios vergeben vor einer Zusammenarbeit eine bezahlte Probearbeit; Snow Day Games beschrieb das in einer inzwischen geschlossenen Anzeige als „Paid test commission to ensure shared artistic vision“ ([Snow Day Games](https://workwithindies.com/careers/snow-day-games-2d-technical-pixel-artist)); Pine Creek Games nennt in seiner Anzeige ausdrücklich „Not using AI in their work“ ([2D Artist](https://workwithindies.com/careers/pine-creek-games-2d-artist)). Eine typische Bitte im Gespräch: „Zeig uns, wie du von der Skizze zum Sprite kommst.“ Gute Antwort: Du öffnest die Datei mit allen Ebenen und gehst die Stufen durch, Silhouette, Werte, Farbe, Feinschliff. Du zeigst die Merkmalsliste und sagst, was du bei dieser Größe gestrichen hast und warum. Und du zeigst die Figur bei 100 %, denn so sieht sie der Spieler. + + ## Häufige Fehler + + - **Die Skizze herunterrechnen.** Mischfarben und verwaiste Pixel statt einer Figur. Skizze als Referenz unterlegen und neu zeichnen. + - **Größe nach Gefühl.** Die Figur passt nicht zum Tile oder zu den anderen Figuren. Größe aus Tile und Kopfanteil ableiten. + - **Alles behalten wollen.** Fünf Merkmale in je einem Pixel ergeben Rauschen. Merkmalsliste von unten kürzen. + - **Farbe vor Werten.** In Graustufen verschwimmen Hemd und Hose. Erst die Werte, dann die Farben darauf abstimmen. + - **Alles in einer Ebene.** Keine Stufe lässt sich einzeln prüfen oder zurücknehmen. Eine Ebene pro Stufe. + - **Nur im Zoom gearbeitet.** Bei 800 % sieht alles ordentlich aus. Jede Stufe bei 100 % prüfen. + - **Kontrast überall.** Der Blick findet keinen Halt. Den stärksten Kontrast an eine Stelle legen. + - **Krumm vergrößert exportiert.** 150 % macht manche Pixel doppelt so breit wie andere. Nur ganzzahlig vergrößern. + + ## Zusammenfassung + + - Die Tilegröße ist der beste Maßstab für die Spritegröße. Ein Tile breit und zwei hoch ist laut Slynyrd eine der häufigsten Größen. + - Bei wenig Platz nimmt der Kopf ein Drittel bis die Hälfte der Figur ein. + - Pixelart übersetzt man, statt sie zu skalieren: große Massen zuerst, wenige starke Details, der Rest fällt weg. + - Vier Stufen in vier Ebenen: Silhouette, Werte, Farbe, Feinschliff. Jede Stufe beantwortet eine Frage. + - Werte von unten dunkel nach oben hell, der stärkste Kontrast dort, wo der Blick hin soll. + - Prüf jede Stufe bei 100 %, gespiegelt und als Silhouette. + - Die eigene Skizze liegt als Referenz unter dem Sprite. Speichern im Editorformat, Export bei 100 % für die Engine und ganzzahlig vergrößert zum Zeigen. +exercises: + - id: groesse-waehlen + type: choice + title: Wie groß wird das Sprite? + prompt: | + Welche Aussagen über die Wahl der Spritegröße stimmen? + options: + - text: Laut Slynyrd ist die Tilegröße der beste Maßstab, ein Tile breit und zwei hoch ist eine der häufigsten Größen. + correct: true + why: Bei Tiles von 16 Pixeln ergibt das 16 × 32. So passt die Figur zum Raster der Umgebung. + - text: Bei wenig Platz nimmt der Kopf meist ein Drittel bis die Hälfte der Figur ein. + correct: true + why: Der große Kopf lässt Platz für Gesichtszüge, die sonst in einem Pixel verschwinden würden. + - text: Eine größere Leinwand ist immer besser, weil mehr Details hineinpassen. + correct: false + why: Mehr Pixel kosten mehr Arbeit, für jede Ansicht. Und mehr Details sind nicht automatisch lesbarer. + - text: Es gibt eine feste Norm, 50 Pixel Höhe für jede Spielfigur. + correct: false + why: Die 50 Pixel stammen aus Dead Cells, einem Spiel in Seitenansicht. Die Größe folgt aus Kamera, Tiles und Aufwand. + explanation: | + Die Spritegröße ist eine Abwägung. Das Tileraster gibt einen Rahmen, der Kopfanteil entscheidet, ob ein Gesicht Platz hat, und die Zahl der Pixel bestimmt, wie viel Arbeit jede Ansicht kostet. Saint11 zeigt, dass mit sinkender Auflösung Details wegfallen müssen; Slynyrd nennt den üblichen Rahmen für Figuren in Draufsicht. + resources: + - title: Slynyrd · Pixelblog 22 · Top-down character sprites + url: https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites + + - id: werte-stufe + type: choice + title: In welcher Stufe prüfst du den Tonwert? + prompt: | + Du willst prüfen, ob sich Haare, Gesicht, Hemd und Hose im Tonwert deutlich unterscheiden. In welchem Feld geht das am besten? + + ![Dieselbe Puppe von 16 × 24 Pixeln in vier Stufen. A dunkle Silhouette, B vier Grautöne mit Licht- und Schattenkanten, C farbig mit Licht- und Schattenton je Fläche, D farbig mit farbiger Kontur](/media/pixelart/sprite-entwerfen/arbeitsschritte@2x.png "Vier Stufen eines Sprites. Eigenes Schaubild") + options: + - text: B, weil dort nur Helligkeit vorkommt und kein Farbton ablenkt. + correct: true + why: In Grau siehst du direkt, ob die Flächen sich trennen und wo der stärkste Kontrast liegt. + - text: A, weil die Silhouette alles zeigt, was zählt. + correct: false + why: A hat nur einen Ton. Ob sich die Teile innen trennen, zeigt sie nicht. + - text: C, weil man erst mit Farbe sieht, ob die Teile sich unterscheiden. + correct: false + why: Farben können verschieden aussehen und trotzdem fast denselben Tonwert haben. Das versteckt Probleme, statt sie zu zeigen. + - text: D, weil die Kontur die Flächen trennt. + correct: false + why: Die Kontur trennt die Figur vom Grund. Ob die Flächen innen tragen, entscheidet der Tonwert. + explanation: | + Die Werte-Stufe gibt es, damit du eine Frage allein beantworten kannst: Tragen die Helligkeiten die Figur? In Farbe mischt sich der Farbton ein, und zwei Farben gleicher Helligkeit wirken verschieden, obwohl sie in Graustufen verschmelzen. Darum kommen die Werte vor der Farbe. + resources: + - title: Ctrl+Paint · Why Practice in Grayscale + url: https://www.ctrlpaint.com/videos/why-practice-in-grayscale + + - id: stufen-reihenfolge + type: order + title: Von der Skizze zur Datei + prompt: | + Bring die Arbeitsschritte vom Papierentwurf zum fertigen Sprite in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Merkmalsliste schreiben und von unten kürzen, bis sie zur Größe passt. + Foto der Skizze als Referenz unter die Leinwand legen. + Silhouette in einer eigenen Ebene zeichnen und bei 100 % prüfen. + Werte in Grau in einer neuen Ebene anlegen, unten dunkel, oben hell. + Farben in einer weiteren Ebene auf die Werte abstimmen. + Kontur und Details im Feinschliff setzen, dann gespiegelt prüfen. + Im Editorformat speichern und als PNG bei 100 % exportieren. + alternatives: + - [2, 1, 3, 4, 5, 6, 7] + explanation: | + Die Merkmalsliste kommt zuerst, weil sie festlegt, was überhaupt gezeichnet wird. Die Referenz liegt unter der Leinwand, bevor der erste Pixel fällt. Dann folgen die Stufen in der Reihenfolge ihrer Fragen: Umriss, Tonwert, Farbton, Feinschliff. Jede Stufe prüfst du, bevor die nächste beginnt, denn ein Fehler im Umriss wird mit jeder Stufe teurer. Gespeichert wird mit Ebenen, exportiert ohne. + resources: + - title: Aseprite Docs · Reference Layer + url: https://www.aseprite.org/docs/reference-layer/ + + - id: kopfhoehe + type: output + title: Wie hoch wird der Kopf? + prompt: | + Eine Figur soll 24 Pixel hoch werden und drei Köpfe hoch sein. Wie viele Pixel hoch wird der Kopf? Antworte mit der Zahl. + lang: text + code: | + Spritehöhe: 24 px + Proportion: 3 Köpfe + expected: | + 8 + accept: + - 8 px + - 8 Pixel + - acht + explanation: | + 24 ÷ 3 = 8. Der Kopf macht damit ein Drittel der Figur aus, die untere Grenze dessen, was Slynyrd für Sprites mit wenig Platz nennt. Mit 8 Pixeln Höhe bleiben nach der Kontur etwa sechs Reihen für das Gesicht, genug für Augen und eine Andeutung von Mund. Bei 2,5 Köpfen wären es 9,6 Pixel, die du auf 10 rundest. + resources: + - title: Wikipedia · Super deformed · Appearance + url: https://en.wikipedia.org/wiki/Super_deformed#Appearance_and_media_usage + + - id: halbieren + type: output + title: Was ein Pixel nach dem Halbieren trägt + prompt: | + Du übersetzt eine Figur von 32 auf 16 Pixel Höhe, die Breite halbiert sich mit. Für wie viele Pixel der großen Fassung steht jeder Pixel der kleinen? Antworte mit der Zahl. + lang: text + code: | + groß: 32 px hoch + klein: 16 px hoch + Breite: halbiert sich mit + expected: | + 4 + accept: + - 4 Pixel + - vier + - 4 px + - 2 × 2 + - 2x2 + - 2 x 2 + explanation: | + Höhe und Breite halbieren sich, also fasst jeder neue Pixel 2 × 2 = 4 alte zusammen. Ein Knopf, der in der großen Fassung zwei Pixel groß war, hat in der kleinen keinen eigenen Pixel mehr. Entweder er fällt weg, oder er wird bewusst größer gezeichnet, als er im Verhältnis wäre. Diese Entscheidung trifft keine Skalierung für dich. + resources: + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif + + - id: exportgroesse + type: output + title: Export zum Zeigen + prompt: | + Du exportierst ein Sprite von 16 × 24 Pixeln mit 400 % Vergrößerung, um es zu teilen. Wie groß ist die PNG-Datei? Antworte als Breite × Höhe. + lang: text + code: | + Sprite: 16 × 24 px + Export: 400 % + expected: | + 64 × 96 + accept: + - 64x96 + - 64 x 96 + - 64×96 + - 64 × 96 px + - 64 × 96 Pixel + explanation: | + 400 % heißt Faktor 4: 16 × 4 = 64 und 24 × 4 = 96. Jeder Spritepixel wird zu einem Block von 4 × 4 Pixeln, alle gleich groß, weil der Faktor ganzzahlig ist. Für die Engine exportierst du dagegen bei 100 %; dort skaliert die Engine selbst. + resources: + - title: Aseprite Docs · Exporting · Automatic Resize on Export + url: https://www.aseprite.org/docs/exporting/#automatic-resize-on-export + + - id: begriffe-sprite + type: gap + title: Begriffe vom Entwurf zum Sprite + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Eine Ebene, die ein Bild zum Nachzeichnen zeigt und sich nicht bemalen lässt, heißt in Aseprite ⟦Referenzebene⟧. Die erste Stufe eines Sprites ist die ⟦Silhouette⟧, die zweite legt die ⟦Werte⟧ in Grau an. Ob ein Sprite trägt, prüfst du bei einem Zoom von ⟦100⟧ Prozent. Zum Teilen vergrößerst du beim Export nur ⟦ganzzahlig⟧. Pixelart zu verkleinern ist nach Saint11 eher eine ⟦Übersetzung⟧ als eine Skalierung. + gaps: + - label: Ebene zum Nachzeichnen + hint: Auf Englisch Reference Layer. + accept: ["Reference Layer", "Referenz-Ebene", "Referenz"] + - label: erste Stufe + hint: Der gefüllte Umriss. + accept: ["Umriss"] + - label: zweite Stufe + hint: Helligkeiten, auf Englisch Values. + accept: ["Tonwerte", "Values", "Helligkeiten", "Grauwerte"] + - label: Zoomstufe + hint: Originalgröße, eine Zahl. + accept: ["hundert"] + - label: Art der Vergrößerung + hint: Faktor 2, 3, 4 – keine Kommazahl. + accept: ["ganzzahlige", "in ganzen Zahlen", "integer"] + - label: Saint11s Bild + hint: „translation“ auf Deutsch. + accept: ["Translation", "Übertragung"] + explanation: | + Die Referenzebene trennt deine Skizze von den Pixeln. Silhouette und Werte sind die ersten beiden Stufen, weil sie Umriss und Helligkeit klären, bevor Farbe dazukommt. 100 % ist die Größe, in der du ehrlich prüfst, ganzzahlige Vergrößerung hält alle Pixel gleich groß. Und „Übersetzung“ erinnert dich daran, dass du beim Verkleinern entscheidest, statt zu rechnen. + resources: + - title: Aseprite Docs · Reference Layer + url: https://www.aseprite.org/docs/reference-layer/ + + - id: arbeitsnotiz-brei + type: bug + title: Ein verwaschenes Sprite + prompt: | + Lehrbeispiel: Arbeitsnotiz für ein Sprite von 16 × 24 Pixeln. Das Ergebnis wirkt verwaschen, voller Mischfarben und einzelner Pixel, und die Silhouette ist ausgefranst. Finde die Zeile, die das verursacht. + lang: prose + code: | + Merkmalsliste: Silhouette, Kopf mit Mütze, Schal, Rest streichen + Skizze fotografieren und mit der Größenänderung auf 16 × 24 verkleinern + Das verkleinerte Foto als unterste Ebene übernehmen und darauf weitermalen + Werte in einer neuen Ebene in vier Grautönen anlegen + Farben auf die Werte abstimmen, Kontur zuletzt + Bei 100 % und gespiegelt prüfen + lines: [2, 3] + hints: + - Woher kommen Mischfarben, die du nie selbst gesetzt hast? + explanation: | + Zeile 2 rechnet das Foto herunter, dabei mischt das Programm benachbarte Farben. Zeile 3 übernimmt das Ergebnis als Grundlage, statt es nur als Vorlage zu nutzen, und so landen die Mischfarben und Einzelpixel im Sprite. Richtig ist, das Foto als Referenz unterzulegen und jeden Pixel selbst zu setzen. Saint11 nennt automatische Skalierung höchstens einen ersten Schritt, nach dem Kontur und Silhouette neu gezogen werden müssen. + resources: + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif + + - id: werteplan-fuesse + type: bug + title: Der Blick klebt an den Füßen + prompt: | + Lehrbeispiel: Werteplan für eine Figur, Skala von 1 (Weiß) bis 9 (fast Schwarz). Bei 100 % zieht der Blick zuerst zu den Füßen statt zum Kopf. Finde die Zeile. + lang: prose + code: | + Werteplan Lehrfigur, Skala 1 (Weiß) bis 9 (fast Schwarz) + Haare: 8 + Gesicht: 3 + Hemd: 5 + Hose: 7 + Stiefel: 1 + lines: [6] + hints: + - Valve lässt die Figur von unten nach oben heller werden. + explanation: | + Die Stiefel haben mit 1 den hellsten Wert der Figur, direkt unter der dunklen Hose mit 7. Dort entsteht mit sechs Stufen der stärkste Kontrast der Figur, und der Blick geht zu den Füßen. Nach Valves Prinzip werden Figuren von dunklen Füßen zur hellen Brust heller, der stärkste Kontrast sitzt oben. Die Stiefel gehören auf 8 oder 9; dann liegt der stärkste Kontrast zwischen Haaren und Gesicht. + resources: + - title: Game Developer · How Valve Makes Art To Enhance Gameplay + url: https://www.gamedeveloper.com/art/in-depth-how-valve-makes-art-to-enhance-gameplay + + - id: groessen-erklaeren + type: explain + title: Dieselbe Figur in drei Größen + prompt: | + Das Schaubild zeigt dieselbe Figur mit 16, 24 und 32 Pixeln Höhe bei gleicher Pixelgröße. Erkläre in drei bis fünf Sätzen, was zwischen A, B und C gewonnen oder verloren geht und wovon die Wahl abhängt. + + ![Dieselbe Figur dreimal bei gleicher Pixelgröße. A 16 Pixel hoch mit winzigem Kopf und fast verschmolzenen Armen, B 24 Pixel mit getrennten Flächen, C 32 Pixel mit rundem Kopf und abgesetzten Beinen](/media/pixelart/sprite-entwerfen/groessen@2x.png "16, 24 und 32 Pixel hoch. Eigenes Schaubild") + lang: text + code: | + A: 16 px hoch, Kopf rund 5 px + B: 24 px hoch, Kopf rund 8 px + C: 32 px hoch, Kopf rund 10 px + gleiche Pixelgröße, gleiche Figur + points: + - In A reicht der Kopf nur für zwei Augenpixel, Arme und Rumpf trennen sich kaum; Details müssen wegfallen. + - In B sind Kopf, Hemd, Arme und Hose eigene Flächen; die Figur trägt mit wenigen Merkmalen. + - In C erlauben mehr Pixel rundere Formen und mehr Details, wie Saint11 es für höhere Auflösungen beschreibt. + - Die Wahl hängt von Tilegröße, Kamera und Aufwand ab; jede Ansicht und jedes Bild kostet bei mehr Pixeln mehr Arbeit. + explanation: | + Weil die Pixel gleich groß sind, zeigt das Schaubild echte Unterschiede im Inhalt, keinen Zoom. A muss fast alles außer der Silhouette streichen, der Kopf hat kaum Platz für ein Gesicht. B trennt die großen Flächen und ist damit eine typische Arbeitsgröße. C erlaubt runde Formen und mehr Merkmale, kostet aber gut viermal so viele Pixel wie A, und das in jeder Ansicht. Welche Größe passt, entscheiden das Tileraster des Spiels, die Kamera und wie viel Zeichenarbeit du dir vornehmen willst. + resources: + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif + + - id: figur-in-stufen + type: practice + title: Eine Figur in vier Ebenen + prompt: | + Zeichne im Editor eine eigene Figur oder eine neutrale Gliederpuppe auf einer Leinwand von 16 × 24 oder 16 × 32 Pixeln. Leg dein Papierfoto als Referenz unter. Arbeite in vier benannten Ebenen: Silhouette, Werte, Farbe, Feinschliff. Prüf jede Stufe bei 100 % und gespiegelt, bevor du die nächste beginnst. Schreib hier in einigen Sätzen auf, was dir bei jeder Prüfung aufgefallen ist und was du geändert hast. + lang: prose + checklist: + - Die Leinwand ist 16 × 24 oder 16 × 32 Pixel groß. + - Die Datei hat mindestens vier Ebenen, benannt nach Silhouette, Werte, Farbe und Feinschliff, und ist im Editorformat gespeichert. + - Die Referenz ist deine eigene Skizze und liegt als Referenzebene oder ausgeblendete Ebene in der Datei. + - Du hast die Silhouette-Ebene allein angesehen oder jemandem gezeigt und notiert, welche Merkmale man daran erkennt. + - Die Werte-Ebene nutzt höchstens fünf Grautöne, und die Füße sind dunkler als der Oberkörper. + - Du hast jede Stufe bei 100 % und gespiegelt angesehen und mindestens eine Änderung notiert, die daraus folgte. + - Es gibt einen PNG-Export bei 100 % und einen bei 400 %. + hints: + - Wenn du keine eigene Figur entwerfen willst, nimm eine Gliederpuppe aus Grundkörpern wie im Schaubild. + - Setz die Silhouette mit dem Füllwerkzeug und korrigiere den Rand von Hand, das geht mit der Maus schneller als Freihand. + explanation: | + Die vier Ebenen zwingen dich, eine Frage nach der anderen zu beantworten, und lassen jede Entscheidung sichtbar. Die Prüfung bei 100 % und gespiegelt findet Fehler, die du im Zoom übersiehst. Weil die Ebenen erhalten bleiben, kannst du im Gespräch oder in einer Probearbeit zeigen, wie die Figur entstanden ist; die Datei ist dein Arbeitsnachweis. + resources: + - title: Aseprite Docs · Layers + url: https://www.aseprite.org/docs/layers/ + - title: Pixelorama Docs · Layer + url: https://pixelorama.org/concepts/layer/ + + - id: uebersetzen-32-16 + type: practice + title: Von 32 auf 16 Pixel übersetzen + prompt: | + Nimm eine Figur von 32 Pixeln Höhe, deine eigene oder die aus der vorigen Übung in größerer Fassung, und zeichne sie neu mit 16 Pixeln Höhe, ohne die Größenänderung des Editors zu benutzen. Schreib vorher die Merkmalsliste und streich von unten. Notiere hier, was geblieben ist, was weggefallen ist und was du größer gezeichnet hast, als es im Verhältnis wäre. + lang: prose + checklist: + - Die Merkmalsliste stand vor dem ersten Pixel fest und ist nach Wichtigkeit geordnet. + - Die kleine Fassung ist ohne automatische Größenänderung entstanden. + - Beide Fassungen stehen nebeneinander auf einer Leinwand und sind bei 100 % verglichen. + - Du hast mindestens ein Merkmal benannt, das du in der kleinen Fassung größer gezeichnet hast, als es im Verhältnis wäre. + - In der kleinen Fassung hat jeder Pixel mindestens einen Nachbarn derselben Farbe, Ausnahmen hast du markiert und begründet. + hints: + - Fang mit Kopf und Silhouette an. Sie bekommen ihren Platz zuerst, alles andere teilt sich den Rest. + explanation: | + Saint11 beschreibt genau diesen Schritt als Übersetzung: große Massen zuerst, wenige starke Details. Die Übung zeigt dir, welche Merkmale eine Figur tragen, denn bei 16 Pixeln bleibt nur Platz für die wichtigsten. Das Kriterium mit den Nachbarpixeln prüft, ob du verwaiste Pixel als Detail missbraucht hast; mehr dazu in [Linien, Kurven und Cluster](/pixelart/linien-cluster). + resources: + - title: Saint11 · Resizing Pixel Art + url: https://saint11.art/img/pixel-tutorials/Resizing.gif diff --git a/content/pixelart/modules/umgebung-tiles.yaml b/content/pixelart/modules/umgebung-tiles.yaml new file mode 100644 index 00000000..adf2890f --- /dev/null +++ b/content/pixelart/modules/umgebung-tiles.yaml @@ -0,0 +1,447 @@ +id: umgebung-tiles +title: Umgebung und Tiles, die Figuren tragen +level: 3 +minutes: 140 +summary: Wie du Kacheln zeichnest, die nahtlos aneinanderpassen, wie du sichtbare Wiederholung mit Varianten und seltenen Details brichst und warum ein ruhiger Boden in engem Tonwertbereich die Figur trägt, statt sie zu verschlucken. +place: pc +goals: + - Du wählst eine Kachelgröße passend zu Spritegröße und Bildschirmauflösung und rechnest aus, wie viele Kacheln ein Bild füllen. + - Du zeichnest nahtlose Kacheln mit Tiled Mode oder Tile Mode und erkennst Nähte an Kachelgrenzen. + - Du brichst Wiederholung mit Varianten, seltenen Details und Clustern, die über die Kachelränder laufen. + - Du planst Tonwerte und Sättigung so, dass der Boden ruhig bleibt und Figuren, Hindernisse und Gefahren hervortreten. + - Du machst begehbare Flächen und Hindernisse über Tonwert und Kante eindeutig und prüfst das in einem Mockup. +resources: + - title: Slynyrd · Pixelblog 20 · Top Down Tiles + url: https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles + - title: Aseprite Docs · Tiled Mode + url: https://www.aseprite.org/docs/tiled-mode/ + - title: Pixelorama · Canvas · Tile Mode + url: https://pixelorama.org/user_manual/user_interface/canvas/#tile-mode + - title: Jason Mitchell · Connecting Visuals to Gameplay at Valve (MIGS 2008) + url: https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf + - title: James Gurney · Why should I mass values? + url: https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html +lesson: | + Du hast eine Graskachel von 16 × 16 Pixeln gezeichnet, mit einem hübschen Büschel und einer gelben Blume. Einzeln sieht sie gut aus. Dann legst du sie 40-mal nebeneinander und 23-mal untereinander, so viele braucht ein Bild von 640 × 360 Pixeln. Jetzt siehst du kein Gras mehr, sondern ein Gitter aus 920 gleichen Blumen. Und deine Figur, die über diese Wiese läuft, verschwindet zwischen hellen und dunklen Punkten. + + Eine gute Kachel ist keine schöne Einzelzeichnung. Sie muss an jeder Seite in sich selbst übergehen, darf sich in der Wiederholung nicht verraten und muss sich hinter die Figur zurückziehen. Dieses Modul behandelt alle drei Aufgaben. Wie Godot Kacheln zu einer Karte zusammensetzt und Kollisionen zuordnet, steht in [2D-Level aus Tiles](/godot/level-tilemap); hier geht es um das Zeichnen. + + ## Kachelgröße und Raster + + Raymond Schlitter (Slynyrd) erklärt, warum es Tiles gibt: Frühe Computer hatten wenig Speicher, also zerlegte man Bilder in kleine Quadrate, die sich wiederholen und kombinieren lassen. Tiles sparen Speicher und Zeichenzeit, und ihr Raster ist „a logical base to map gameplay onto“ ([Pixelblog 20](https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles)). Zur Größe schreibt er: „16x16px is probably the most common size“, und alles über 32 × 32 Pixel hält er für Pixelart für übertrieben. + + Die Kachelgröße hängt mit allem anderen zusammen. Slynyrd nennt „1 tile wide by 2 tiles tall“ eine der häufigsten Spritegrößen für Top-down-Figuren ([Pixelblog 22](https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites)). Bei 16er-Kacheln ist eine Figur dann 16 × 32 Pixel groß. Wie du Figuren, Türen, Kisten und große Kreaturen in einem Maßstab hältst, behandelt [Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab). + + Auch die Bildschirmgröße zählt. Die Godot-Doku nennt für Pixelart-Spiele 640 × 360 „a good baseline“, weil es ganzzahlig auf 1280 × 720, 1920 × 1080 und 3840 × 2160 skaliert ([Multiple resolutions: Desktop game](https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html#desktop-game)). Mit 16er-Kacheln sind das 40 Spalten und 22,5 Reihen. Die halbe Reihe ist kein Fehler, sie zeigt nur, dass der Bildschirmrand eine Kachel anschneidet. Wie Godot das Bild ganzzahlig vergrößert, steht in [Pixelraster und Skalierung](/godot/pixelraster). + + Ein Asset-Set für eine Top-down-Umgebung besteht aus vier Gruppen: + + | Gruppe | Beispiel | Aufgabe | + | --- | --- | --- | + | Boden | Gras, Erde, Pflaster | begehbar, wiederholt sich am häufigsten | + | Wand | Mauer, Felskante | blockiert, zeigt Oberseite und Front | + | Hindernis | Stein, Kiste, Baumstumpf | blockiert einzeln, steht auf dem Boden | + | Requisite | Fass, Schild, Pflanze | erzählt, blockiert oder nicht | + + Wände und Hindernisse zeigst du in der 3/4-Draufsicht mit Oberseite und Front. Slynyrd beschreibt sie „as if you are viewing the house from 45 degrees above“ ([Pixelblog 3](https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1)), Grundlagen dazu in [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum). + + ## Nahtlose Kacheln: Tiled Mode und Tile Mode + + ![Zwei Flächen aus je 3 × 3 gleichen Steinkacheln. In A enden die Steine genau an den Kachelgrenzen, gerade Fugen bilden ein sichtbares Gitter. In B laufen die Steine über die Kachelgrenzen hinweg, kein Gitter ist zu erkennen](/media/pixelart/umgebung-tiles/kachelnaht@2x.png "Steinkachel mit sichtbaren Nähten (A) und nahtlos (B), jeweils 3 × 3-mal wiederholt. Eigenes Schaubild") + + In A ist jede Kachel für sich gezeichnet. Die Steine hören am Rand auf, und alle 16 Pixel läuft eine gerade Fuge über die ganze Fläche. Das Auge findet dieses Gitter sofort. In B laufen Steine über den rechten Rand und kommen links wieder herein, ebenso oben und unten. Slynyrd nennt solche Gruppen zusammenhängender Pixel Cluster: „Include clusters that overlap the edges and loop around the tile to help hide the seems.“ + + Bedienung: Leg eine Leinwand in genau der Kachelgröße an. In Aseprite schaltest du `View › Tiled Mode › Tiled in Both Axes` ein ([Tiled Mode](https://www.aseprite.org/docs/tiled-mode/)), in Pixelorama `View › Tile Mode › Tiled in Both Axis`. Beide Programme zeigen die Kachel dann mehrfach um die Leinwand herum. In Pixelorama kannst du laut Doku auch im wiederholten Bereich zeichnen ([Tile Mode](https://pixelorama.org/user_manual/user_interface/canvas/#tile-mode)). Slynyrd beschreibt das für Aseprite so: „anything you draw will live update in all the cells.“ Einen Stein, der über den rechten Rand ragt, siehst du sofort links wieder auftauchen. + + Ein zweites Werkzeug ist das Verschieben mit Umbruch. Pixelorama hat dafür den Effekt **Offset** im Menü `Effects`: Pixel, die rechts hinauslaufen, „re-appears on the left side“ ([Image effects](https://pixelorama.org/user_manual/image_effects/#list-of-image-effects)). Verschiebst du eine Kachel um ihre halbe Breite und Höhe, liegen die Ränder in der Mitte, und jede Naht wird zu einer sichtbaren Linie, die du übermalst. + + Tiled Mode ist eine Zeichenhilfe für eine einzelne Kachel. Aseprite nennt ihn „simpler than tilemaps“. Ein Tileset mit vielen Kacheln, die in beliebiger Anordnung eine Karte bilden, baust du in Godot ([2D-Level aus Tiles](/godot/level-tilemap)). Dort steht auch, woher Linien zwischen Tiles kommen, die erst in der Engine entstehen. Die Nähte hier sind dagegen Teil der Zeichnung. + + > [!TIP] Prüfen im Vorschaufenster + > Slynyrd empfiehlt beim Arbeiten an Tiles ein Vorschaufenster, das die Szene verkleinert zeigt, „allowing you to see how it appears from a normal viewing distance“. In Aseprite ist das die Vorschau, in Pixelorama die Second Canvas. Prüf jede Kachel in mindestens 3 × 3 Wiederholung bei 1×. + + ## Wiederholung brechen + + Nahtlos heißt noch nicht unauffällig. Slynyrd: „you don't want the tiles to be too obvious. The trick is in trying to hide the patterns within consistent non-distracting textures.“ + + ![Zwei grüne Rasenflächen aus 4 × 3 Kacheln. In A ist es überall dieselbe Kachel mit einer gelben Blume, die Blumen stehen in einem genauen Raster. In B sind vier verschiedene Kacheln gemischt, nur fünf Blumen stehen unregelmäßig verteilt](/media/pixelart/umgebung-tiles/wiederholung@2x.png "Eine Kachel mit auffälliger Blume, 4 × 3-mal wiederholt (A), und vier Varianten gemischt (B). Eigenes Schaubild") + + A und B nutzen dasselbe Grün und dieselben Büschel. In A steht die Blume in jeder Kachel an derselben Stelle, und aus zwölf Blumen wird ein Raster. In B gibt es vier Varianten: eine mit Blume oben rechts, eine mit Blume unten links, zwei ohne. Die Blumen verteilen sich unregelmäßig, das Raster verschwindet. Slynyrds Rat für Gras: „a grass texture made up of only one tile becomes monotonous, no matter how awesome the tile is.“ Er mischt flache Grünflächen mit Flächen verschiedener Dichte und streut „occasional flower variants“ ein. + + Seine Grundsätze für Tiles fasst er in fünf Punkten zusammen: + + - **Balance:** Das visuelle Gewicht ist gleichmäßig über die Kachel verteilt. „If any area of the tile has a visual dominance the pattern will become too obvious.“ + - **Consistency:** Dieselben Schlüsselcluster wiederholen, aber nicht aneinanderstoßen lassen, sonst klumpen sie zu Rauschen. Ecke an Ecke ist in Ordnung. + - **Limit colors:** Wenige Farben reichen. Stark kontrastierende Farben in einem Muster ergeben „displeasing noise“. + - **Contrast:** Eine unruhige Textur neben einer anderen unruhigen ermüdet das Auge. „Negative space is your friend.“ + - **Reflect:** Kacheln lassen sich spiegeln, um Varianten für andere Richtungen zu bekommen. + + Daraus ergibt sich ein Arbeitsablauf für Varianten. Die Grundkachel bleibt die häufigste. Jede Variante ist eine Kopie der Grundkachel, bei der du nur das Innere änderst, die Randpixel bleiben gleich. So passt jede Variante an jede andere. Auffällige Details wie Blumen, Risse oder Pilze kommen nur in seltene Varianten. Beim Spiegeln achte auf die Lichtrichtung: Eine gespiegelte Kachel mit Licht von oben links hat danach Licht von oben rechts. Spiegeln ist deshalb für Texturen ohne Lichtkanten sicher. Steine mit Lichtkante spiegelst du nicht: Horizontal wandert das Licht nach rechts, vertikal nach unten. + + Valve beschreibt für Team Fortress 2 dasselbe Ziel in drei Dimensionen: Wiederholte Strukturen wie Brückenstreben oder Telegrafenmasten blieben bewusst wenige, weil „conveying the impression of repetition in the space is more important than representing every detail explicitly“ ([NPAR 2007](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf), Abschnitt 4.2). + + ## Der Boden trägt die Figur + + ![Zwei Top-down-Szenen mit derselben Figur in der Mitte und vier Steinen. In A ist der Boden ein unruhiges Muster aus sehr hellem und sehr dunklem Grün, die Steine sind fast weiß mit schwarzer Kontur, die Figur ist blass und geht im Boden unter. In B ist der Boden ein ruhiges, gedämpftes Grün mit wenig Unterschied zwischen den Tönen, die Steine sind gedämpft grau, die Figur hat kräftige Farben und hebt sich klar ab](/media/pixelart/umgebung-tiles/kontrast-ebenen@2x.png "Unruhiger, kontrastreicher Boden (A) und ruhiger Boden in engem Tonwertbereich (B). Eigenes Schaubild") + + In A hat der Boden den größten Tonwertbereich des Bildes, von fast Schwarz bis fast Weiß. Die Steine haben den stärksten Kontrast, die Figur den schwächsten. Das Auge springt zu den Steinen und findet die Figur nur mit Mühe. In B liegen alle Bodentöne nah beieinander, die Steine sind gedämpft, und nur die Figur nutzt kräftige Farben und dunkle Konturen. + + Diese Rangfolge ist gewollt. Valve legt für Team Fortress 2 fest, dass die Umgebung „Desaturated relative to players“ ist ([MIGS 2008](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf)). Pedro Medeiros (Saint11) rät zu „large low saturation areas with small high saturation details“ ([Saturation](https://saint11.art/pixel_art_articles/article6/#saturation)). James Gurney begründet wenige, große Tonwertgruppen damit, dass ein Bild dann auch „when reduced to a tiny size“ noch lesbar ist ([Why should I mass values?](https://gurneyjourney.blogspot.com/2019/12/why-should-i-mass-values.html)), und schreibt an anderer Stelle „the fewer values the better“ ([How many values?](https://gurneyjourney.blogspot.com/2018/01/how-many-values.html)). + + Leg deshalb einen Werteplan fest, bevor du Tiles zeichnest. Auf der Neunerskala aus [Licht, Schatten und Tonwerte](/pixelart/licht-werte), 1 Weiß, 9 fast Schwarz: + + | Ebene | Tonwerte | Sättigung | + | --- | --- | --- | + | Boden | eng, etwa zwei bis drei Stufen | gedämpft | + | Wände, Hindernisse | mittel, mit dunkler Kante | gedämpft bis mittel | + | Figuren | voller Bereich | kräftig | + | Gefahren | stärkster Kontrast zum Boden | kräftig | + + Die Zahlen sind ein Ausgangspunkt, kein Gesetz. Prüfen lässt sich der Plan mit dem Graustufentest aus [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten): Im Graustufenbild soll die Figur das Erste sein, was du siehst. Wie Gegnerangriffe sich ankündigen und warum das lesbar sein muss, behandelt [Gegnermuster](/combat/gegnermuster). + + > [!MERKE] + > Der Boden bekommt den engsten Tonwertbereich und die geringste Sättigung im Bild. Kontrast ist für das reserviert, was der Spieler sehen muss. + + ## Begehbar oder Hindernis: Tonwert und Kante + + Der Spieler muss ohne Ausprobieren erkennen, wo er laufen kann. Keine der Quellen dieses Kurses gibt dafür eine feste Regel. Hier ein Vorschlag, den du prüfst und anpasst: Triff die Unterscheidung über mehrere Merkmale gleichzeitig und halte sie im ganzen Spiel durch. + + - **Kante:** Begehbare Flächen haben keine Kontur, Hindernisse eine dunkle Kante, mindestens an der Unterseite. + - **Höhe:** Hindernisse zeigen in der 3/4-Draufsicht eine Front. Eine sichtbare Front heißt: Das steht hoch. + - **Schatten:** Hindernisse werfen einen kleinen Schatten auf den Boden, Bodenflecken nicht. + - **Tonwert:** Gruben und Abgründe sind die dunkelsten Flächen der Umgebung. + + Ein Bodenfleck aus dunklem Gras darf deshalb keine dunkle Kante bekommen, sonst liest er sich als Stein. Ein flacher Stein, über den man laufen kann, braucht entweder keine Front oder eine eigene, im Spiel gelernte Regel. Requisiten, die blockieren oder die Figur verdecken können, zeichnest du als eigene Sprites statt in die Bodenkachel. Kollisionen ordnest du in Godot den Kacheln zu ([2D-Level aus Tiles](/godot/level-tilemap)). + + Die Umgebung kann auch erzählen: eine zertretene Stelle im Gras, ein umgekippter Eimer, ein Riss, der zu einer Tür führt. Solche Spuren sind seltene Varianten mit Absicht. Wie man sie plant, zeigt [Erzählen über Handlung, Umgebung und Folgen](/narrative/umgebung-erzaehlt). Halte sie selten, sonst werden sie zum Muster. + + > [!PRAXIS] + > Slynyrd baut ein Top-down-Set in Schichten: zuerst Graskacheln mit Varianten, dann Erde in einem Stil, der zum Gras passt, dann Übergangskacheln zwischen beiden. Erst danach ordnet er Kacheln zu Karten an. Für Tiles nutzt er selbst ein Spezialprogramm, Pyxel Edit; für Aseprite beschreibt er den Weg mit einer Leinwand in genau der Kachelgröße und Tiled Mode. Wichtig ist ihm, die Nähte beim Zeichnen live zu sehen und ein verkleinertes Vorschaufenster offen zu haben ([Pixelblog 20](https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles)). Übernimm die Reihenfolge: erst den häufigsten Boden, dann was daran anschließt, zuletzt die Ausnahmen. + + > [!INTERVIEW] + > Stellenanzeigen für 2D Artists in Indie-Studios verlangen oft Perspektive und eigene Arbeit. Pine Creek Games nennt „good knowledge of perspective“ und „Not using AI in their work“ ([Stellenanzeige](https://workwithindies.com/careers/pine-creek-games-2d-artist)). Rechne im Gespräch mit der Frage: „Deine Kacheln wiederholen sich sichtbar. Was tust du?“ Gute Antwort: Du nennst die Ursache – ein Element mit zu viel Gewicht oder Nähte am Rand – und deine Mittel: Gewicht gleichmäßig verteilen, Cluster über die Ränder führen, Varianten mit gleichen Rändern, auffällige Details nur in seltenen Varianten. Dann zeigst du vorher und nachher in 3 × 3 Wiederholung bei 1×. + + ## Häufige Fehler + + - **Einzeln schön, zusammen ein Gitter.** Jede Kachel nur in Wiederholung beurteilen, mindestens 3 × 3. + - **Nähte an den Rändern.** Cluster enden genau an der Kachelgrenze. Mit Tiled Mode über die Ränder zeichnen oder mit Offset die Ränder in die Mitte holen. + - **Ein Blickfang in der Grundkachel.** Eine Blume oder ein Stein mit viel Gewicht wird zum Raster. In seltene Varianten verschieben. + - **Varianten mit eigenen Rändern.** Dann passen sie nicht an die Grundkachel. Ränder gleich lassen, nur das Innere ändern. + - **Gespiegelte Lichtrichtung.** Eine gespiegelte Kachel mit Lichtkanten bricht das Licht der Szene. + - **Kontrastreicher Boden.** Der Boden hat den größten Tonwertbereich, die Figur geht unter. Boden eng und gedämpft halten. + - **Bodenfleck mit Kontur.** Dunkles Gras mit dunkler Kante liest sich als Hindernis. + + ## Zusammenfassung + + - 16 × 16 ist die häufigste Kachelgröße. Eine Figur von 1 × 2 Kacheln misst dann 16 × 32 Pixel, ein Bild von 640 × 360 hat 40 × 22,5 Kacheln. + - Nahtlos wird eine Kachel, wenn Cluster über die Ränder laufen. Tiled Mode, Tile Mode und Offset helfen dabei. + - Wiederholung brichst du mit gleichmäßig verteiltem Gewicht, Varianten mit gleichen Rändern und seltenen Details. + - Der Boden hat den engsten Tonwertbereich und die geringste Sättigung, Figuren und Gefahren den stärksten Kontrast. + - Begehbar und Hindernis trennst du über Kante, Front, Schatten und Tonwert, gleichzeitig und im ganzen Spiel gleich. + - Seltene Varianten können erzählen. Das Zusammensetzen der Karte und die Kollisionen erledigt Godot. +exercises: + - id: naht-diagnose + type: choice + title: Woran sieht man die Naht? + prompt: | + Beide Flächen bestehen aus derselben Steinkachel, 3 × 3-mal wiederholt. Welche Aussagen treffen zu? + + ![Zwei Steinflächen. In A bilden gerade Fugen an den Kachelgrenzen ein Gitter. In B laufen die Steine über die Kachelgrenzen](/media/pixelart/umgebung-tiles/kachelnaht@2x.png "Zwei Fassungen derselben Steinkachel. Eigenes Schaubild") + options: + - text: In A enden die Steine an den Kachelgrenzen, deshalb entsteht alle 16 Pixel eine gerade Fuge. + correct: true + why: Die Grenzen der Kachel werden zu Linien, die über die ganze Fläche laufen. Das Auge liest sie als Gitter. + - text: In B laufen Cluster über den Rand und kommen auf der gegenüberliegenden Seite wieder herein. + correct: true + why: Genau das empfiehlt Slynyrd, um Nähte zu verstecken. Tiled Mode zeigt es beim Zeichnen. + - text: B braucht mehr Farben als A, um nahtlos zu sein. + correct: false + why: Beide nutzen dieselben Töne. Nahtlos wird eine Kachel durch die Lage der Cluster, nicht durch Farben. + - text: Bei 1× verschwinden die Nähte von A. + correct: false + why: Gerade bei 1× sieht man das Gitter über große Flächen am deutlichsten, weil das Auge regelmäßige Linien sucht. + explanation: | + Eine Naht ist keine falsche Farbe, sondern eine Kante, die sich alle 16 Pixel wiederholt. Sie entsteht, wenn du jede Kachel als abgeschlossenes Bild zeichnest. Wer die Kachel als Ausschnitt einer endlosen Fläche zeichnet, mit Steinen über die Ränder, bekommt eine Fläche ohne Gitter. + resources: + - title: Slynyrd · Pixelblog 20 · Top Down Tiles + url: https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles + + - id: kontrast-diagnose + type: choice + title: Warum verschwindet die Figur? + prompt: | + Welche Aussagen erklären, warum die Figur in A untergeht und in B nicht? + + ![Zwei Top-down-Szenen mit Figur und vier Steinen. A hat einen unruhigen Boden aus sehr hellem und sehr dunklem Grün, fast weiße Steine und eine blasse Figur. B hat einen ruhigen, gedämpften Boden, graue Steine und eine kräftige Figur](/media/pixelart/umgebung-tiles/kontrast-ebenen@2x.png "Zwei Böden, dieselbe Figur. Eigenes Schaubild") + options: + - text: In A hat der Boden einen größeren Tonwertbereich als die Figur. + correct: true + why: Der Boden reicht von fast Schwarz bis fast Weiß. Die Figur kann damit nicht konkurrieren. + - text: In A haben die Steine den stärksten Kontrast im Bild und ziehen den Blick an. + correct: true + why: Fast weiße Flächen mit schwarzer Kontur sind das Auffälligste in der Szene, obwohl sie unwichtig sind. + - text: In B ist die Figur nur deshalb sichtbar, weil sie größer gezeichnet ist. + correct: false + why: Die Figur ist in beiden Szenen gleich groß. Der Unterschied liegt in Tonwert und Sättigung von Boden und Figur. + - text: In B wäre die Szene besser, wenn der Boden mehr Textur hätte. + correct: false + why: Mehr Textur vergrößert den Tonwertbereich des Bodens. Gerade die Ruhe des Bodens lässt die Figur hervortreten. + explanation: | + Das Auge geht zuerst zum stärksten Kontrast. In A liegt der im Boden und in den Steinen, in B in der Figur. Valve hält die Umgebung gegenüber den Spielern entsättigt, Saint11 rät zu großen ruhigen Flächen mit kleinen kräftigen Details. Ein Werteplan vor dem Zeichnen legt diese Rangfolge fest. + resources: + - title: Saint11 · Basic Color Theory · Saturation + url: https://saint11.art/pixel_art_articles/article6/#saturation + + - id: kachel-ablauf + type: order + title: Von der leeren Leinwand zur Bodenkachel mit Varianten + prompt: | + Bring die Schritte in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Eine Leinwand in genau der Kachelgröße anlegen, 16 × 16 Pixel. + Tiled Mode oder Tile Mode für beide Achsen einschalten. + Die Grundtextur aus Clustern zeichnen, einige davon über die Ränder. + Die Kachel in 3 × 3 Wiederholung bei 1× prüfen und Blickfänge abschwächen. + Die Grundkachel kopieren und in den Kopien nur das Innere ändern. + Ein Mockup mit Varianten, Hindernis und Figur bauen und in Graustufen prüfen. + explanation: | + Die Leinwand muss die Kachel genau umfassen, sonst wiederholt Tiled Mode den falschen Ausschnitt. Mit eingeschaltetem Modus zeichnest du die Grundtextur gleich nahtlos. Die Prüfung in Wiederholung kommt vor den Varianten, denn jeder Fehler der Grundkachel würde in alle Kopien übernommen. Varianten entstehen als Kopien, damit ihre Ränder passen. Erst das Mockup zeigt, ob der Boden die Figur trägt. + resources: + - title: Aseprite Docs · Tiled Mode + url: https://www.aseprite.org/docs/tiled-mode/ + + - id: kachelreihen + type: output + title: Wie viele Kachelreihen? + prompt: | + Ein Spiel zeigt ein Bild von 640 × 360 Pixeln, die Kacheln sind 16 × 16 Pixel groß. Wie viele Kachelreihen brauchst du mindestens, damit die Höhe ganz gefüllt ist? Antworte mit der Zahl. + lang: text + code: | + Bild: 640 × 360 Pixel + Kachel: 16 × 16 Pixel + expected: | + 23 + accept: + - 23 Reihen + - dreiundzwanzig + hints: + - 360 ÷ 16 geht nicht ganz auf. + explanation: | + 360 ÷ 16 = 22,5. Für eine halbe Reihe brauchst du trotzdem eine ganze Kachel, also 23 Reihen, von denen der Bildschirm eine anschneidet. In der Breite sind es 640 ÷ 16 = 40 Spalten. Zusammen zeigt ein Bild bis zu 40 × 23 = 920 Kacheln. So oft wiederholt sich eine einzelne Graskachel, wenn du keine Varianten hast. + resources: + - title: Godot Docs · Multiple resolutions · Desktop game + url: https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html#desktop-game + + - id: blumenkacheln + type: output + title: Wie viele Blumen auf dem Bildschirm? + prompt: | + Auf einem Bildschirm liegen 920 Bodenkacheln. Die Blumenvariante soll etwa jede achte Kachel sein. Wie viele Blumenkacheln sind das? Antworte mit der Zahl. + lang: text + code: | + Kacheln auf dem Bildschirm: 920 + Anteil der Blumenvariante: 1 von 8 + expected: | + 115 + accept: + - 115 Kacheln + - etwa 115 + - ca. 115 + explanation: | + 920 ÷ 8 = 115. Das ist ein Achtel, aber immer noch viel: 115 gleiche Blumen auf einem Bildschirm. Ein seltenes Detail sollte deshalb noch seltener sein, als es sich im Plan anfühlt, oder es gibt mehrere Blumenvarianten an verschiedenen Stellen der Kachel. Die Rechnung hilft dir, die Häufigkeit vorher festzulegen, statt sie im Mockup zu erraten. + resources: + - title: Slynyrd · Pixelblog 20 · Top Down Tiles + url: https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles + + - id: ueberstand + type: output + title: Wo taucht der Stein wieder auf? + prompt: | + Du zeichnest im Tiled Mode eine Kachel von 16 × 16 Pixeln. Ein Stein ragt drei Pixel über den rechten Rand hinaus. An welchem Rand der Kachel erscheinen diese drei Pixel? Antworte mit einem Wort. + lang: text + code: | + Kachel: 16 × 16, Tiled Mode in beiden Achsen + Stein: ragt 3 px über den rechten Rand + expected: | + links + accept: + - linker Rand + - am linken Rand + - links am Rand + - linke Seite + explanation: | + Die Kachel wiederholt sich. Was rechts hinausläuft, ist der Anfang der nächsten Kachel, und die beginnt mit dem linken Rand derselben Kachel. Deshalb erscheinen die drei Pixel links, in derselben Zeile. Genau das macht eine Kachel nahtlos: Der Stein ist in der Wiederholung ein ganzer Stein, obwohl er in der Datei an zwei Rändern liegt. + resources: + - title: Pixelorama · Image effects · Offset + url: https://pixelorama.org/user_manual/image_effects/#list-of-image-effects + + - id: begriffe-tiles + type: gap + title: Begriffe rund um Tiles + prompt: | + Ergänze die Begriffe aus der Lektion. + lang: prose + code: | + Eine kleine quadratische Grafik, die sich im Raster wiederholt, heißt ⟦Tile⟧. In Aseprite zeigt der ⟦Tiled⟧ Mode die Kachel beim Zeichnen mehrfach nebeneinander. Eine sichtbare Kante, die sich an jeder Kachelgrenze wiederholt, ist eine ⟦Naht⟧. Kopien der Grundkachel mit geändertem Inneren heißen ⟦Varianten⟧. Der Boden bekommt den engsten ⟦Tonwertbereich⟧ im Bild. Die Sammlung der Kacheln, aus der du in Godot eine Karte malst, heißt ⟦TileSet⟧. + gaps: + - label: Grafikbaustein + hint: Englisch, deutsch „Kachel“. + accept: ["Kachel", "Tiles"] + - label: Modus + hint: Englisch, das Partizip von „tile“. + accept: ["Tile"] + - label: Kante an der Grenze + hint: Englisch „seam“. + accept: ["Seam", "Kachelnaht"] + - label: Kopien + hint: Eine andere Fassung desselben Grundmusters. + accept: ["Variante", "Kachelvarianten"] + - label: Spanne der Helligkeit + hint: Von der dunkelsten bis zur hellsten Stufe. + accept: ["Wertebereich", "Tonwertumfang", "Helligkeitsbereich"] + - label: Godot-Ressource + hint: Steht in der Godot-Doku neben TileMapLayer. + accept: ["Tile Set", "Tileset"] + explanation: | + Tile, Naht und Variante beschreiben die Kachel selbst. Tiled Mode ist das Werkzeug, mit dem du Nähte schon beim Zeichnen vermeidest. Der Tonwertbereich ist die Stellschraube für Lesbarkeit. Das TileSet gehört schon zur Engine, dort beginnt der Godot-Kurs. + resources: + - title: Aseprite Docs · Tiled Mode + url: https://www.aseprite.org/docs/tiled-mode/ + + - id: werteplan-boden + type: bug + title: Der Boden flimmert + prompt: | + Werteplan für eine Wiese auf der Neunerskala (1 Weiß, 9 fast Schwarz). Im Mockup flimmert der Boden, und die Figur verschwindet zwischen hellen und dunklen Punkten. Finde die Zeile. + lang: prose + code: | + Gras: Tonwerte 5 bis 6, gedämpftes Grün. + Weg: Tonwerte 5 bis 6, gedämpftes Ocker. + Steine: Tonwerte 3 bis 7, dunkle Kontur, kleiner Schatten. + Blumen im Gras: Tonwerte 1 bis 9, volle Sättigung, auf jeder dritten Kachel. + Figur: Tonwerte 1 bis 8, kräftige Farben, dunkle Kontur. + lines: [4] + hints: + - Welche Zeile gibt dem Boden den größten Tonwertbereich im Bild? + explanation: | + Die Blumen gehören zum Boden und bekommen trotzdem den vollen Bereich von Weiß bis fast Schwarz bei voller Sättigung, und das auf jeder dritten Kachel. Damit hat der Boden mehr Kontrast als die Figur und wird zu einem Punktmuster. Gras und Weg sind eng und gedämpft, die Steine als Hindernisse dürfen sich abheben. Besser: Blumen in zwei Tönen nahe am Gras, auf einer seltenen Variante. + resources: + - title: James Gurney · How many values? + url: https://gurneyjourney.blogspot.com/2018/01/how-many-values.html + + - id: variante-mit-kante + type: bug + title: Eine gerade Kante im Gras + prompt: | + Notiz zu einem Graskachel-Set. Im Mockup sieht man hier und da eine gerade Kante im Gras, immer neben derselben Variante. Finde die Zeile. + lang: prose + code: | + Grundkachel Gras: 16 × 16, Ränder im Tiled Mode nahtlos geprüft. + Variante 1: Kopie der Grundkachel, innen zwei Büschel verschoben. + Variante 2: Kopie der Grundkachel, innen eine Blume ergänzt. + Variante 3: neu gezeichnet, gleiche Farben, eigene Büschel bis an den Rand. + Mischung: Grundkachel 60 %, Varianten je etwa 13 %. + lines: [4] + hints: + - Welche Variante hat andere Randpixel als die Grundkachel? + explanation: | + Variante 3 ist neu gezeichnet, ihre Ränder stimmen nicht mit denen der Grundkachel überein. Wo sie neben einer anderen Kachel liegt, treffen zwei verschiedene Randverläufe aufeinander, und es entsteht eine Kante. Varianten 1 und 2 sind Kopien mit geändertem Inneren, sie passen überall. Willst du eine ganz neue Variante, prüf sie im Tiled Mode zusammen mit der Grundkachel. + resources: + - title: Pixelorama · Canvas · Tile Mode + url: https://pixelorama.org/user_manual/user_interface/canvas/#tile-mode + + - id: slynyrd-gras-erklaeren + type: explain + title: Warum Slynyrds Gras nicht langweilt + prompt: | + Hier ist Slynyrds Vorgehen für Gras zusammengefasst. Erkläre in drei bis fünf Sätzen, warum jede dieser Entscheidungen hilft, die Wiederholung zu verstecken. + lang: prose + code: | + Slynyrd, Pixelblog 20 (2019): Gras aus mehreren 16 × 16-Kacheln. Das visuelle Gewicht ist gleichmäßig über jede Kachel verteilt. Dieselben Schlüsselcluster kehren wieder, berühren sich aber nicht. Wenige Farben, keine stark kontrastierenden. Flache grüne Flächen wechseln mit Flächen unterschiedlicher Dichte. Blumen kommen nur in gelegentlichen Varianten vor. + points: + - Gleichmäßiges Gewicht verhindert einen Blickfang, der sich in jeder Kachel wiederholt und ein Raster bildet. + - Wiederkehrende Schlüsselcluster geben dem Material einen einheitlichen Charakter, ohne zu klumpen. + - Wenige, nahe beieinanderliegende Farben halten das Rauschen klein. + - Flache Flächen und wechselnde Dichte geben Pausen und brechen den Rhythmus der Kachelgröße. + - Seltene Blumenvarianten bringen Abwechslung, ohne dass sich ein Muster bildet. + explanation: | + Das Auge sucht Regelmäßigkeit. Hat eine Kachel einen Schwerpunkt, findet es ihn alle 16 Pixel wieder, deshalb verteilt Slynyrd das Gewicht gleichmäßig. Dieselben Cluster machen aus vielen Kacheln ein Material, solange sie nicht zu größeren, zufälligen Klumpen verschmelzen. Wenige Farben ohne starken Kontrast halten den Boden ruhig, und flache Flächen geben dem Auge Pausen. Die Blume ist der Reiz, und sie wirkt nur, weil sie selten ist. + resources: + - title: Slynyrd · Pixelblog 20 · Top Down Tiles + url: https://www.slynyrd.com/blog/2019/8/27/pixelblog-20-top-down-tiles + + - id: bodenkachel-varianten + type: practice + title: Eine nahtlose Bodenkachel mit zwei Varianten + prompt: | + Zeichne im Editor eine Bodenkachel von 16 × 16 Pixeln, etwa Gras, Erde oder Pflaster. Arbeite mit Tiled Mode oder Tile Mode und führe mindestens zwei Cluster über die Ränder. Leg danach zwei Varianten als Kopien an, bei denen du nur das Innere änderst. Eine davon bekommt ein seltenes Detail. Lege die drei Kacheln in einer Fläche von 6 × 4 Kacheln gemischt aus. + lang: prose + starter: | + Material: + Farben (Zahl): + Tonwertbereich auf der Neunerskala: + Seltenes Detail: + Was in der Fläche von 6 × 4 auffällt: + checklist: + - Die Grundkachel ist 16 × 16 Pixel groß und nutzt höchstens vier Farben. + - Mindestens zwei Cluster laufen über einen Rand und erscheinen auf der Gegenseite, geprüft im Tiled Mode. + - Die Randpixel beider Varianten sind identisch mit denen der Grundkachel. + - Das seltene Detail kommt in der Fläche von 6 × 4 höchstens dreimal vor. + - Die Bodentöne liegen auf der Neunerskala höchstens drei Stufen auseinander, geprüft in Graustufen. + - Du hast die Fläche bei 1× angesehen und notiert, ob und wo du ein Raster erkennst. + hints: + - Für gleiche Ränder dupliziere die Grundkachel und sperre oder markiere die äußerste Pixelreihe, bevor du im Inneren änderst. + explanation: | + Die Übung verbindet die drei Aufgaben einer Kachel: nahtlos, unauffällig, ruhig. Gleiche Randpixel sind die überprüfbare Bedingung dafür, dass Varianten zueinanderpassen. Die Häufigkeit des Details und den Tonwertbereich legst du vorher fest und prüfst sie nachher, statt nach Gefühl zu entscheiden. + resources: + - title: Aseprite Docs · Tiled Mode + url: https://www.aseprite.org/docs/tiled-mode/ + - title: Pixelorama · Canvas · Tile Mode + url: https://pixelorama.org/user_manual/user_interface/canvas/#tile-mode + + - id: hindernis-zeichnen + type: practice + title: Ein Hindernis, das man sofort erkennt + prompt: | + Zeichne zu deiner Bodenkachel ein Hindernis in 3/4-Draufsicht, etwa einen Felsblock, eine Kiste oder einen Baumstumpf, auf 16 × 16 oder 16 × 24 Pixeln in einer eigenen Ebene. Leg dazu einen Bodenfleck, über den man laufen kann, etwa eine dunklere Grasstelle. Stell beide auf deinen Boden. + lang: prose + starter: | + Hindernis: + Merkmale, die „blockiert“ sagen: + Bodenfleck: + Merkmale, die „begehbar“ sagen: + checklist: + - Das Hindernis zeigt Oberseite und Front, die Front ist dunkler als die Oberseite. + - Das Hindernis hat eine dunkle Kante mindestens an der Unterseite und einen kleinen Schatten auf dem Boden. + - Der Bodenfleck hat keine Kontur und keinen Schatten. + - Die Lichtrichtung des Hindernisses stimmt mit der deiner Bodenkachel überein. + - Du hast notiert, an welchen zwei Merkmalen man das Hindernis vom Bodenfleck unterscheidet. + explanation: | + Ein Hindernis muss mit mehreren Merkmalen gleichzeitig „blockiert“ sagen: Front, Kante, Schatten. Der Bodenfleck bekommt bewusst keines davon, auch wenn er dunkel ist. Wer diese Regel einmal festlegt und durchhält, bringt dem Spieler bei, wo er laufen kann, ohne dass er es ausprobieren muss. + resources: + - title: Slynyrd · Pixelblog 3 · Graphical Projections + url: https://www.slynyrd.com/blog/2018/3/14/pixelblog-3-graphical-projections-1 + + - id: mockup-ausschnitt + type: practice + title: Ein Mockup-Ausschnitt mit Figur + prompt: | + Bau aus deinen Kacheln und dem Hindernis einen Ausschnitt von 10 × 6 Kacheln, also 160 × 96 Pixeln. Setz eine neutrale Figur von 16 × 32 Pixeln hinein, eine einfarbige Gliederpuppe oder ein Rechteck mit Kopf genügt. Prüf den Ausschnitt in Graustufen und zeig ihn jemandem. + lang: prose + starter: | + Werteplan (Boden, Hindernis, Figur): + Ergebnis Graustufentest: + Frage an meinen Tester: + Antwort: + checklist: + - Der Ausschnitt ist 160 × 96 Pixel groß und nutzt die Grundkachel und mindestens zwei Varianten. + - Vor dem Bau steht ein Werteplan mit Tonwertbereichen für Boden, Hindernis und Figur. + - Im Graustufenbild hat der Boden den engsten Tonwertbereich, geprüft mit Graustufen-Modus, Entsättigen oder Achromatopsia in Chromium. + - Du hast jemandem den Ausschnitt fünf Sekunden gezeigt und gefragt, wo man laufen kann und wo die Figur steht, und die Antwort notiert. + - Du hast notiert, was du nach Graustufentest und Rückmeldung geändert hast, oder warum nichts. + explanation: | + Erst im Mockup zeigt sich, ob Tiles eine Figur tragen. Die neutrale Figur reicht dafür, weil es um Tonwert und Kontrast geht, nicht um ihr Aussehen. Die fünf Sekunden ersetzen den Blick eines Spielers, der nicht weiß, was du gemeint hast. Wie du solche Proben systematisch durchführst und Entscheidungen festhältst, vertieft das Modul [Prüfen, überarbeiten, dokumentieren](/pixelart/lesbarkeit-pruefen). + resources: + - title: Chrome DevTools · Emulate vision deficiencies + url: https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies diff --git a/content/pixelart/projects.yaml b/content/pixelart/projects.yaml new file mode 100644 index 00000000..95044e02 --- /dev/null +++ b/content/pixelart/projects.yaml @@ -0,0 +1,289 @@ +projects: + - id: skizzenbuch-unterwegs + title: Vier Wochen Skizzenbuch für unterwegs + level: 1 + hours: 10 + summary: Ein kleines Heft, ein Stift und zehn Minuten im Bus an fünf Tagen pro Woche. Du übst Kontur, Negativraum, Messen, Gesten und Tonwerte nach einem festen Plan und hältst fest, was sich nach vier Wochen verändert hat. + brief: | + **Ausgangslage:** Zeichnen lernt man nicht am Wochenende, sondern in vielen kurzen Einheiten. Der Weg zur Arbeit ist dafür gut geeignet: Du sitzt, hast Menschen und Gegenstände vor dir und zehn Minuten Zeit. Dieses Projekt macht daraus einen Plan mit vier Wochenthemen. + + **Anforderungen:** + + - Ein Heft im Format A6 oder A5, ein Bleistift oder Fineliner. Karopapier ist für Woche 4 praktisch, aber keine Pflicht. + - Fünf Einheiten pro Woche zu je etwa zehn Minuten, jede mit Datum. + - Woche 1 Kontur und Negativraum, Woche 2 Messen und Grundkörper, Woche 3 Gesten von 30 bis 60 Sekunden, Woche 4 Tonwertstudien mit drei Werten und erste Pixelversuche auf Karopapier. + - Am Ende jeder Woche zwei Sätze: was leichter fiel als am Anfang und was nicht. + + **Rahmen:** Alles unterwegs, ohne Rechner. Wenn du draußen zeichnest, zeichnest du Gegenstände, Haltungen und Silhouetten, keine erkennbaren Gesichter fremder Menschen ohne deren Einverständnis. Für Gesten zu Hause eignen sich die zeitgesteuerten Referenzen von [Line of Action](https://line-of-action.com/). Grundlage sind [Beobachten, Messen und Referenzen](/pixelart/beobachten), [Grundkörper, Perspektive und Draufsicht](/pixelart/grundkoerper-raum), [Figur, Geste und Proportion](/pixelart/figur-proportion) und [Licht, Schatten und Tonwerte](/pixelart/licht-werte). + skills: [beobachten, negativraum, messen, gesten, tonwerte, routine] + steps: + - id: heft-einrichten + title: Heft und Plan einrichten + detail: | + Schreib die vier Wochenthemen auf die erste Seite und nummeriere die nächsten Seiten. Zeichne auf Seite 1 aus dem Gedächtnis eine Tasse, einen Stuhl und eine stehende Person. Diese Seite ist dein Vergleich für Woche 4. + - id: woche-kontur + title: "Woche 1: Kontur und Negativraum" + detail: | + Zeichne an jedem Tag einen Gegenstand mit Lücken: Stuhl, Fahrradständer, Henkeltasse, Haltestange mit Hand. Zeichne zuerst nur die Lücken, dann den Gegenstand. Wie das geht, steht in [Beobachten](/pixelart/beobachten). + - id: woche-messen + title: "Woche 2: Messen und Grundkörper" + detail: | + Miss mit ausgestrecktem Arm Verhältnisse ab, etwa Breite zu Höhe einer Tasche, und notiere die Zahl neben die Zeichnung. Baue danach Gegenstände aus Würfel, Zylinder und Kugel auf. + - id: woche-gesten + title: "Woche 3: Gesten" + detail: | + Zeichne Haltungen in 30 bis 60 Sekunden, zuerst nur die Handlungslinie, dann die Gliederpuppe darüber. Mindestens acht Gesten pro Einheit. + - id: woche-werte + title: "Woche 4: Tonwerte und Karopapier" + detail: | + Zeichne Gegenstände in drei Tonwerten: Papierweiß, Schraffur, ausgefüllt. An zwei Tagen setzt du einen der Gegenstände als 16 × 16 Kästchen auf Karopapier um. + - id: rueckblick + title: Rückblick + detail: | + Zeichne Tasse, Stuhl und Person von Seite 1 noch einmal aus dem Gedächtnis und einmal nach Beobachtung. Leg die drei Fassungen nebeneinander und notiere in höchstens fünf Sätzen, was sich verändert hat. + acceptance: + - id: einheiten + text: Mindestens 16 datierte Einheiten über vier Wochen, jede einem Wochenthema zugeordnet. + - id: wochensaetze + text: Am Ende jeder Woche stehen zwei Sätze, was leichter fiel und was nicht. + - id: messzahlen + text: In Woche 2 stehen neben mindestens fünf Zeichnungen gemessene Verhältnisse als Zahl. + - id: vergleich + text: Die Gedächtniszeichnungen von Seite 1 und die drei Fassungen aus dem Rückblick liegen nebeneinander, mit schriftlichem Vergleich. + stretch: + - Eine fünfte Woche nur mit Silhouetten von Gegenständen und Haltungen, schwarz ausgefüllt. + - Dieselbe Haltestelle an drei Tagen zu verschiedenen Uhrzeiten in drei Tonwerten zeichnen und das Licht vergleichen. + portfolio: | + Ein Skizzenbuch zeigt keine fertige Arbeit, sondern dass du regelmäßig übst und beobachtest. Zeig zwei Doppelseiten, eine vom Anfang und eine vom Ende, und den Rückblick. Im Gespräch zählt, was du über dein eigenes Lernen sagen kannst: welche Übung am meisten gebracht hat und warum. + + - id: gegenstand-drei-groessen + title: Ein Gegenstand in drei Größen + level: 2 + hours: 8 + summary: Am PC zeichnest du einen selbst gewählten Gegenstand – eine Laterne, eine Truhe, eine Pflanze – in 16, 32 und 48 Pixeln mit derselben Palette und Lichtrichtung und dokumentierst, was du bei jeder Verkleinerung behältst und was wegfällt. + brief: | + **Ausgangslage:** Wie viel Detail ein Gegenstand trägt, hängt an seiner Größe in Pixeln. Wer dasselbe Motiv in drei Größen zeichnet, lernt schneller als mit drei verschiedenen Motiven, weil er jede Entscheidung vergleichen kann. + + **Anforderungen:** + + - Ein Gegenstand deiner Wahl, beobachtet an einem echten Vorbild oder an Fotos, die du selbst gemacht hast. Keine Vorlage zum Abpausen, keine generierten Bilder. + - Drei Fassungen auf Leinwänden von 16 × 16, 32 × 32 und 48 × 48 Pixeln, jede neu gezeichnet, nicht skaliert. + - Eine gemeinsame Palette mit höchstens 12 Farben und eine feste Lichtrichtung. + - Eine kurze Notiz je Größe: Was ist geblieben, was ist weggefallen, und warum. + + **Rahmen:** Ein Pixel-Editor deiner Wahl, etwa Pixelorama, LibreSprite oder Aseprite. Grundlage sind [Linien, Kurven und Cluster](/pixelart/linien-cluster), [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten) und [Schattieren, Dithering, Textur und Detailgrad](/pixelart/schattieren-textur). + skills: [reduktion, detailgrad, palette, schattieren, cluster] + steps: + - id: vorbild-beobachten + title: Vorbild beobachten + detail: | + Zeichne den Gegenstand zuerst auf Papier aus zwei Blickwinkeln und markiere die drei Merkmale, an denen man ihn erkennt. Diese Merkmale müssen in der kleinsten Fassung noch lesbar sein. + - id: palette-festlegen + title: Palette und Licht festlegen + detail: | + Leg eine Palette mit höchstens 12 Farben in Rampen an und schalte den Editor in den Indexed-Modus. Markiere die Lichtrichtung mit einem Pfeil in einer eigenen Ebene. + - id: gross-zeichnen + title: 48 Pixel zuerst + detail: | + Zeichne die größte Fassung: Silhouette, dann Tonwerte, dann Farbe, dann Linien aufräumen. Prüf bei 1×. + - id: mittel-zeichnen + title: 32 Pixel neu zeichnen + detail: | + Zeichne die mittlere Fassung neu und schau dabei auf die große. Notiere jedes Detail, das du weglässt oder vereinfachst. + - id: klein-zeichnen + title: 16 Pixel neu zeichnen + detail: | + Die kleinste Fassung trägt nur noch Silhouette, zwei oder drei Tonwerte und die wichtigsten Merkmale. Prüf, ob die drei Merkmale aus dem ersten Schritt noch erkennbar sind. + - id: vergleichen + title: Nebeneinander prüfen + detail: | + Leg alle drei Fassungen in einer Datei nebeneinander, bei 1× und ganzzahlig vergrößert. Mach die Graustufen- und Silhouettenprobe und schreib die Notizen fertig. + acceptance: + - id: drei-leinwaende + text: Drei Fassungen auf 16 × 16, 32 × 32 und 48 × 48 Pixeln, jede neu gezeichnet; keine ist aus einer anderen skaliert. + - id: palette-geprueft + text: Alle drei nutzen dieselbe Palette mit höchstens 12 Farben, geprüft im Indexed-Modus. + - id: licht-gleich + text: Die Lichtrichtung ist in allen drei Fassungen dieselbe und in der Datei markiert. + - id: notizen + text: Zu jeder Größe gibt es eine Notiz, was geblieben und was weggefallen ist, mit Grund. + - id: eigenes-vorbild + text: Das Vorbild ist ein echter Gegenstand oder ein eigenes Foto; keine Vorlage wurde abgepaust oder generiert. + stretch: + - Eine vierte Fassung in 8 × 8 Pixeln und die Frage, ab welcher Größe der Gegenstand nicht mehr erkennbar ist. + - Dieselbe Reihe mit einer Palette von nur 4 Farben. + portfolio: | + Drei Größen nebeneinander zeigen, dass du Detail bewusst einsetzt. Zeig die Reihe bei 1× und vergrößert und daneben deine Notizen. Im Gespräch fragt man dich, welches Detail dir am schwersten wegzulassen fiel und woran du gemerkt hast, dass die 16-Pixel-Fassung trägt. + + - id: figur-vier-richtungen + title: Eine eigene Figur in vier Richtungen + level: 2 + hours: 16 + summary: Von Thumbnails über eine Gliederpuppe zum Sprite – du entwirfst eine eigene Figur, zeichnest sie als Standbild in vier Richtungen auf einem Modellblatt und prüfst sie mit Silhouetten- und Graustufenprobe. + brief: | + **Ausgangslage:** Eine Figur für ein Top-down-Spiel muss von vorn, hinten und der Seite gleich wirken und bei 1× lesbar sein. Dieses Projekt führt dich von den ersten Silhouetten bis zu einem Modellblatt mit vier Richtungen. Bewegung kommt später im Animationskurs. + + **Anforderungen:** + + - Mindestens zwölf Thumbnails als schwarze Silhouetten, aus denen du eine auswählst. + - Eine Skizze der Figur als Gliederpuppe mit festgelegter Kopfzahl. + - Ein Sprite in einer Größe deiner Wahl zwischen 16 und 32 Pixeln Höhe, in vier Richtungen: vorn, hinten, links, rechts. Die Seiten dürfen gespiegelt sein, Asymmetrien beachtest du. + - Ein Modellblatt mit Hilfslinien für Kopf, Hüfte und Füße, die in allen Ansichten auf denselben Zeilen liegen. + - Eine Palette und eine kurze Begründung der Lesehierarchie: Was soll man zuerst erkennen? + + **Rahmen:** Thumbnails und Skizze auf Papier oder am Handy, Sprite im Editor. Die Figur entwirfst du selbst; Referenzen für Haltung oder Kleidung notierst du mit Quelle. Grundlage sind [Silhouette und Formensprache](/pixelart/silhouette-formsprache), [Figur, Geste und Proportion](/pixelart/figur-proportion), [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen) und [Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab). + skills: [silhouette, thumbnails, proportion, sprite, ansichten, modellblatt, palette] + steps: + - id: thumbnails + title: Zwölf Thumbnails + detail: | + Zeichne mindestens zwölf kleine schwarze Silhouetten in höchstens zwei Minuten pro Stück. Variiere Grundformen und Proportionen, nicht Details. Wähl eine aus und notiere, warum. + - id: gliederpuppe + title: Gliederpuppe und Kopfzahl + detail: | + Leg die Kopfzahl fest und zeichne die Figur als Gliederpuppe von vorn und von der Seite. Markiere Kopf, Hüfte und Füße als Hilfslinien. + - id: groesse-waehlen + title: Spritegröße wählen + detail: | + Wähl die Höhe in Pixeln passend zu deiner Tile-Größe und rechne aus, wie viele Pixel Kopf und Rumpf bekommen. Trag das in eine Maßstabstabelle ein. + - id: vorderansicht + title: Vorderansicht + detail: | + Zeichne die Vorderansicht in den Schritten Silhouette, Tonwerte, Farbe und Feinschliff, jeden Schritt in einer eigenen Ebene. Prüf bei 1×. + - id: weitere-ansichten + title: Rückansicht und Seiten + detail: | + Übertrage die Hilfslinien und zeichne Rückansicht und eine Seite. Spiegel die Seite und korrigiere, was nicht symmetrisch ist, etwa einen Gegenstand in einer Hand. + - id: proben + title: Proben + detail: | + Mach für alle vier Ansichten die Silhouetten- und die Graustufenprobe. Notiere, was du danach geändert hast. + - id: modellblatt + title: Modellblatt zusammenstellen + detail: | + Stell alle Ansichten nebeneinander mit Hilfslinien, Palette, Maßstabstabelle und der Begründung der Lesehierarchie. + acceptance: + - id: thumbnails-belegt + text: Mindestens zwölf Thumbnails liegen vor, die gewählte ist markiert und begründet. + - id: vier-ansichten + text: Das Sprite liegt in vier Richtungen vor, alle in derselben Höhe in Pixeln. + - id: linien-durchgehend + text: Kopf, Hüfte und Füße liegen in allen Ansichten auf denselben Pixelzeilen; die Hilfslinien sind auf dem Modellblatt eingezeichnet. + - id: proben-dokumentiert + text: Silhouetten- und Graustufenprobe sind für alle Ansichten gemacht und die Änderungen danach notiert. + - id: eigene-figur + text: Die Figur ist dein eigener Entwurf; verwendete Referenzen stehen mit Quelle auf dem Modellblatt. + stretch: + - Vier diagonale Richtungen ergänzen. + - Dieselbe Figur in zwei Größen zeichnen und vergleichen, was bei der kleineren wegfällt. + portfolio: | + Ein Modellblatt ist ein Standardstück im Portfolio von Character Artists. Zeig Thumbnails, Gliederpuppe und das fertige Blatt nebeneinander, damit man den Weg sieht. Im Gespräch fragt man, warum du gerade diese Silhouette gewählt hast und wie du sicherstellst, dass die Figur in allen Ansichten gleich groß wirkt. + + - id: abschluss-asset-set + title: Asset-Set für eine Begegnung + capstone: true + level: 3 + hours: 40 + summary: Ein kleines Studio schickt dir einen Art-Test. Du entwirfst ein zusammenpassendes Asset-Set für eine Top-down-Begegnung – Spielfigur in vier Richtungen, Gegner, große Kreatur, Tiles und Requisiten mit gemeinsamer Palette –, prüfst es im Mockup, überarbeitest es in dokumentierten Runden und begründest jede Entscheidung. + brief: | + ## Auftrag + + Mara Okafor ist Art Lead eines Indie-Studios mit fünf Leuten in Köln. Das Studio entwickelt ein Actionspiel in der Draufsicht mit Pixelart und großen Kreaturen als Bossen. Für die Stelle „Pixel Artist (m/w/d)“ schickt sie dir einen Art-Test. Ihre Lage: + + - Bisherige Assets stammen von drei verschiedenen Leuten und passen nicht zusammen: verschiedene Pixeldichten, Paletten und Lichtrichtungen. + - In Playtests finden Spieler ihre Figur auf manchen Böden nicht, und Gefahren gehen im Hintergrund unter. + - Niemand hat aufgeschrieben, warum etwas so aussieht. Jede neue Grafik beginnt bei null. + + Gesucht ist kein fertiges Spiel, sondern ein Beleg, dass du ein kleines, zusammenpassendes Set entwirfst, seine Lesbarkeit prüfst und deine Entscheidungen so dokumentierst, dass andere daran weiterarbeiten können. Den Inhalt gibt dir niemand vor: Figur, Gegner, Kreatur, Ort und Stil entwirfst du selbst. Wenn du willst, ist das Set ein erster Stand für Project Delicate Flower; der Kurs schlägt dafür nichts vor. + + ## Was du lieferst + + 1. **Spielfigur** als Sprite in vier Richtungen (Standbild). + 2. **Einen Gegner** in mindestens einer Richtung, klar von der Spielfigur unterscheidbar. + 3. **Eine große Kreatur** in mindestens einer Ansicht, mindestens dreimal so hoch wie die Spielfigur, in derselben Pixeldichte. + 4. **Tiles:** eine nahtlose Bodenkachel mit zwei Varianten, ein Hindernis oder Wandstück, drei Requisiten. + 5. **`palette.png`** und die Palette als Datei deines Editors, höchstens 32 Farben, in Rampen geordnet. + 6. **`mockup_1x.png`** in Spielauflösung und eine ganzzahlig vergrößerte Fassung, in der alle Assets zusammen zu sehen sind. + 7. **`ENTSCHEIDUNGEN.md`:** Maßstabstabelle, Lesehierarchie, Entscheidungsprotokoll, zwei Überarbeitungsrunden mit Vorher und Nachher, Ergebnisse von Proben und Fremdtest, Liste der Referenzen mit Quelle. + 8. **Quelldateien** deines Editors und alle exportierten PNGs mit sprechenden Dateinamen. + + ## Technischer Rahmen + + Ein Pixel-Editor deiner Wahl, etwa Pixelorama, LibreSprite oder Aseprite; für Skizzen gern Papier oder Krita. Spielauflösung und Tile-Größe wählst du und schreibst sie in die Maßstabstabelle. Jede Zeichnung, jede Palette und jedes Tile stammt von dir; generierte Bilder sind nicht erlaubt, auch nicht als Vorlage. KI darf technische Arbeit übernehmen, etwa ein Skript, das Exporte in Graustufen kopiert. Den Import in Godot musst du nicht liefern; wie er geht, steht in [Eigene Sprites importieren](/godot/sprites-importieren). + + Grundlage sind alle Module dieses Bereichs, besonders [Farbe, Rampen und begrenzte Paletten](/pixelart/farbe-paletten), [Silhouette und Formensprache](/pixelart/silhouette-formsprache), [Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab), [Umgebung und Tiles](/pixelart/umgebung-tiles) und [Prüfen, überarbeiten, dokumentieren](/pixelart/lesbarkeit-pruefen). + skills: [character-design, pixelart, palette, tiles, massstab, lesbarkeit, dokumentation, ueberarbeitung] + steps: + - id: rahmen-festlegen + title: Rahmen festlegen + detail: | + Leg Spielauflösung, Tile-Größe und Höhe der Spielfigur fest und schreib die Maßstabstabelle mit Figur, Gegner, Kreatur, Tür, Kiste und Tile in Pixeln. Formuliere die Lesehierarchie: Was muss ein Spieler in einer Sekunde erkennen? + - id: thumbnails-set + title: Thumbnails für Figur, Gegner und Kreatur + detail: | + Zeichne je mindestens acht Silhouetten-Thumbnails und wähle aus. Achte darauf, dass sich Figur und Gegner schon in der Silhouette unterscheiden. Notiere Referenzen mit Quelle. + - id: palette-bauen + title: Palette bauen + detail: | + Baue eine Palette mit höchstens 32 Farben in Rampen. Prüf mit der Graustufenprobe, welche Farben gleich hell sind, und entscheide, wofür du sie einsetzt. Schreib die Entscheidung ins Protokoll. + - id: figur-zeichnen + title: Spielfigur in vier Richtungen + detail: | + Zeichne die Figur in den Schritten Silhouette, Tonwerte, Farbe, Feinschliff und übertrage sie mit Hilfslinien auf die anderen Richtungen. + - id: gegner-kreatur + title: Gegner und große Kreatur + detail: | + Zeichne den Gegner und die Kreatur in der Pixeldichte der Figur, ohne etwas hochzuskalieren. Plane bei der Kreatur einen klaren Blickpunkt und große Massen. + - id: tiles-zeichnen + title: Tiles und Requisiten + detail: | + Zeichne die Bodenkachel im Tiled Mode oder Tile Mode, dann zwei Varianten, das Hindernis und drei Requisiten. Halte den Boden in einem engen Wertebereich. + - id: mockup-bauen + title: Mockup bauen + detail: | + Setz alle Assets in Spielauflösung zu einem Bild zusammen. Exportiere es bei 1× und ganzzahlig vergrößert. + - id: proben-machen + title: Proben machen + detail: | + Mach am Mockup die Proben Originalgröße, Graustufen, Silhouette und eine Simulation von Farbfehlsichtigkeit. Halte die Befunde fest. + - id: fremdtest + title: Fremdtest + detail: | + Zeig das Mockup zwei Personen je fünf Sekunden und stell offene Fragen. Schreib die Antworten wörtlich auf und vergleiche sie mit deiner Lesehierarchie. + - id: runde-eins + title: Erste Überarbeitungsrunde + detail: | + Wähle einen Befund, ändere genau eine Sache, wiederhole die passenden Proben und dokumentiere Befund, Änderung, Probe und Ergebnis mit Vorher und Nachher. + - id: runde-zwei + title: Zweite Überarbeitungsrunde + detail: | + Wiederhole das mit einem anderen Befund. Prüf auch, ob die erste Änderung etwas anderes verschlechtert hat. + - id: abgabe + title: Abgabe zusammenstellen + detail: | + Ordne Quelldateien und PNGs, prüf die Dateinamen und lies `ENTSCHEIDUNGEN.md` einmal so, als wärst du Mara Okafor und müsstest morgen ein neues Asset im selben Stil in Auftrag geben. + acceptance: + - id: palette-indexed + text: Alle Assets nutzen ausschließlich die Palette mit höchstens 32 Farben; geprüft, indem jede Datei im Indexed-Modus ohne Farbänderung geöffnet wird. + - id: pixeldichte + text: Im Mockup haben alle Pixel aller Assets dieselbe Größe; kein Asset ist hochskaliert, und die große Kreatur ist mindestens dreimal so hoch wie die Spielfigur. + - id: vier-richtungen + text: Die Spielfigur liegt in vier Richtungen vor; Kopf, Hüfte und Füße liegen in allen auf denselben Pixelzeilen. + - id: kacheln-nahtlos + text: Die Bodenkachel und ihre Varianten sind in einer 3 × 3-Wiederholung ohne sichtbare Naht; ein Bild dieser Wiederholung liegt bei. + - id: proben-belegt + text: Für das Mockup liegen Ergebnisse der Proben Originalgröße, Graustufen, Silhouette und Farbfehlsichtigkeit als Bild und Notiz vor. + - id: fremdtest-wortlich + text: Der Fremdtest mit zwei Personen ist mit wörtlichen Antworten und dem Abgleich zur Lesehierarchie dokumentiert. + - id: zwei-runden + text: Zwei Überarbeitungsrunden sind mit Befund, genau einer Änderung, wiederholter Probe, Ergebnis und Vorher-Nachher-Bild dokumentiert. + - id: entscheidungen-begruendet + text: "`ENTSCHEIDUNGEN.md` nennt mindestens fünf Entscheidungen mit prüfbarem Grund und verworfener Alternative sowie die Maßstabstabelle." + - id: eigene-arbeit + text: Alle Zeichnungen stammen von dir; Referenzen stehen mit Quelle in der Liste, generierte Bilder wurden weder verwendet noch als Vorlage genutzt. + stretch: + - Eine zweite Bodenart mit eigenem Übergang zur ersten. + - Die große Kreatur in einer zweiten Ansicht. + - Ein Mockup mit einer anderen Tageszeit, nur über eine zweite Palette gelöst. + portfolio: | + Das Projekt ist eine vollständige Fallstudie: Rahmen, Entwurf, Prüfung, Überarbeitung und Begründung. Zeig im Portfolio das Mockup groß, darunter Figur, Gegner, Kreatur und Tiles einzeln, und zwei Vorher-Nachher-Paare mit je einem Satz, was sich geändert hat und warum. Studios suchen in Anzeigen etwa „A strong pixel art portfolio with unique creatures and characters“ ([Conradical Games](https://workwithindies.com/careers/conradical-games-pixel-artist)). Im Gespräch fragt man, welche Probe dich am meisten überrascht hat, was du mit mehr Zeit ändern würdest und wie ein anderer Artist anhand deiner Dokumentation ein neues Asset im selben Stil zeichnen könnte.