FIT ČVUT Course Pages
BI-PGA — Programování grafických aplikací
Jdi na navigaci předmětu

Bonus blok — Pixel design (8–10 h)

Bonus blok — Pixel design (8–10 h)

Praktický úvod do pixel-artu pro 2D hry a UI. Nastavení Krita pro pixel-perfektní kresbu, palety, tilesety, sprite animace, VFX, export do enginů (Unity/Godot/Unreal) a typické nástrahy.

Cíle učení

  • Nastavit Krita pro pixel-perfektní kresbu a export.
  • Navrhnout paletu (12–32 barev), pracovat s hue-shiftingem a cluster shadingem.
  • Vyrobit tileset (16×16/32×32), parallax BG a sprite animaci (chůze 4–8 snímků).
  • Vytvořit VFX sprite (výbuch/jiskry) a UI 9-slice rámeček.
  • Exportovat @1x/@2x bez rozmazání; připravit atlas + metadata (JSON/TMX).

Organizace bloku (návrh)

  1. Modul 1 (2 h): Setup v Krita + palety + mikrocvičení (ikony 16×16).
  2. Modul 2 (2 h): Tiles & tilemap (autotile, bezešvé spoje) + parallax BG.
  3. Modul 3 (2–3 h): Sprite animace (idle/walk) + VFX (explosion/spark).
  4. Modul 4 (2–3 h): Export @1x/@2x, atlas + metadata, engine-cheatsheety.

Krita pro pixel-art — nastavení

Prezentace (osnova slidů)

  • Pixel Grid + Grid 1×1 px, integer zoom (200–400 %), kontrola v 100 %.
  • Štětec: Pixel-1px (Spacing 0.1–0.2), anti-aliasing vypnutý u tvarů/transformací.
  • Transformace: Nearest Neighbor, škálovat v celých násobcích (×2, ×3, ×4).
  • Pohyb o celé pixely, vyhnout se sub-pixel posunům.
  • Export: PNG (8 bit, sRGB), @1x/@2x bez rozmazání.

Tipy pro kresbu

  • Kreslete v clusterech (kompaktní bloky), ne „šrafováním“ 1 px.
  • Hue-shift: stíny mírně do studena, světla do tepla.
  • Ruční AA: 1 px mezitón jen na vypouklé hrany/diagonály (vyhnout se bandingu).
  • Časté chyby: pillow shading, banding, nekonzistentní obrys (thick/thin).

Palety a barvy

PICO-8 paleta
Obrázek 1. Paleta — PICO-8 (16)

Cvičení (15–20 min)

  • Navrhněte mini paletu 12–16 barev (denní/noční varianta).
  • Naskicujte 6 pikto-ikon (16×16 / 24×24) pouze s touto paletou.
Ikonky: srdce, meč, štít, lektvar, klíč, mince
Obrázek 2. Ikony 16×16 — ukázka
Porovnání bandingu, ruční AA a hue-shiftu
Obrázek 3. Banding vs. ruční AA a hue-shift

Tiles, tilemapy a parallax

Základy dlaždic

  • Běžné velikosti: 8×8, 16×16, 32×32. Hrany navrhujte bezešvé.
  • Auto-tiling (3×3/Blob, Wang tiles) – méně ručního skládání.
Tiles 16×16 a test bezešvosti
Obrázek 4. Bezešvé dlaždice (test 4×4)
Parallax vrstvy a rychlosti
Obrázek 5. Parallax — FG/MG/BG (relativní rychlost)

UI pro pixel-art

9-slice panel
Obrázek 6. UI 9-slice — rohy bez zkreslení

Sprite animace (postavy a VFX)

Walk-cycle (8 snímků, 32×32) — ukázka

viz https://courses.fit.cvut.cz/BI-PGA/teacher/richtr/assets/pixel/walk_cycle.gif

Mikro-animace pro UI/VFX (16×16)

viz https://courses.fit.cvut.cz/BI-PGA/teacher/richtr/assets/pixel/heart_beating.gif viz https://courses.fit.cvut.cz/BI-PGA/teacher/richtr/assets/pixel/sword_shimmer.gif

Export, atlas, enginy

Atlas a padding
Obrázek 7. Atlas 512² — packing + padding 2–4 px

Engine-cheatsheet (zkráceně)

  • Unity: Pixel Perfect Camera; UI Sprite (2D and UI), MipMaps OFF, Filter Point, Wrap Clamp.
  • Godot 4: Use Pixel Snap, stretch integer scale; Filter OFF pro pixel-art; TileMap Tile Size/Margin/Spacing.
  • Unreal: UMG Draw As: Box (9-slice), Paper2D Sprite Editor Pivot; UI bez mipmaps, Filter Nearest.

Mini-projekty a úkoly (k odevzdání)

  1. Ikony (16×16/24×24): sada 12 kusů (zbraň, štít, lektvar, klíč…)
    1. Výstup: icons_1x.png, icons_2x.png (grid), .kra.
    2. Checklist: [ ] čitelnost v 1×; [ ] jednotná linka; [ ] paleta ≤ 16.
  2. Tileset 48 ks (16×16) + parallax BG:
    1. Výstup: tiles.png (bezešvé), bg_parallax_{fg,mg,bg}.png.
    2. Checklist: [ ] žádné švy; [ ] variace; [ ] test v 4×4 opakování.
  3. Walk-cycle (32×32, 8 snímků) + idle (2 snímky):
    1. Výstup: hero_walk_sheet.png, hero_idle_sheet.png, .kra.
    2. Checklist: [ ] rytmus (contact→high-point); [ ] arcs; [ ] pivot u chodidel.
  4. VFX – explosion (64×64, 6 snímků):
    1. Výstup: vfx_explosion_sheet.png.
    2. Checklist: [ ] silueta→žár→rozpad; [ ] bez bandingu; [ ] timing.

Taháky (pixel-perfektní workflow)

  • Integer zoom (200–400 %); kontrola v 100 %.
  • Nearest Neighbor při jakémkoli škálování; žádné AA.
  • Vyhnout se sub-pixel posunům (šipky 1 px, Shift+šipky 10 px).
  • Padding 2–4 px v atlasech, trim + metadata; PoT rozměry.
  • Hue-shift místo prostého ztmavení; pillow shading je zlo.
  • Pixel-perfect camera v enginu (Unity), Use Pixel Snap (Godot).