Přeskočit na obsah

Webový editor úrovní

V tomto editoru scén a úrovní pro picogame můžeš přímo v prohlížeči importovat PNG se sprity a sadami dlaždic, kreslit dlaždicové mapy, označovat význam dlaždic (solid, coin, goal, hazard) a umisťovat sprity, popisky HUDu, zóny, výchozí body a částice. Můžeš také nastavit kameru sledující hráče a exportovat scene.json, který tools/scene_build.py převede pro zařízení nebo simulátor.

Plátno představuje výřez světa, který může být větší než obrazovka zařízení. Editor proto slouží pro úrovně na jednu obrazovku i pro posouvané mapy.

Tlačítko výše otevře editor na celou obrazovku (Esc zavírá). Běží i samostatně na /editor/. Při prvním spuštění se ukáže krátká úvodní karta; klávesou ? kdykoli zobrazíš přehled zkratek.

Začni ukázkovou úrovní

Sekce “Začni ukázkovou úrovní”

Menu Demos v horní liště načte hotové úrovně. Otevři jednu a podívej se, jak má nastavené položky Map size a Camera:

  • Sample (one screen) — kompaktní úroveň na jednu obrazovku s ukázkou všech funkcí.
  • Scrolling platformer (bounded) — svět 960×240 (~3 obrazovky široký). Sledovací kamera na ose x omezenou na rozměry světa, takže se na levém a pravém okraji zastaví.
  • Open world (bigger both ways) — mapa 640×480, větší než obrazovka v obou směrech. Kamera sleduje hráče po osách xy, takže se můžeš pohybovat vodorovně i svisle.

Úvodní karta odkazuje na stejné dvě ukázky posouvaných map.

Velikost světa a obrazovky

Sekce “Velikost světa a obrazovky”

V panelu Level jsou dvě důležité velikosti. Panel uvidíš s nástrojem Select, když není nic vybrané:

  • World size — jak velká je celá úroveň, v pixelech. Tady nastavíš velikost úrovně: je to rozměr světa, od kterého se odvozují meze kamery, funkce Fit, minimapa a velikost nových vrstev. Vedle hodnoty vidíš také přibližný počet obrazovek „≈ N × M“.
  • Device screen — jedna obrazovka zařízení (320×240), označená na plátně přerušovaným bílým rámečkem.

Pro posouvanou úroveň nastav World size větší než jednu obrazovku.

Jak vytvořit posouvanou úroveň

Sekce “Jak vytvořit posouvanou úroveň”
  1. V panelu Level (nástroj Select, nic vybráno) nastav World size větší než jedna obrazovka: napiš world w×h a zvol Apply world size, nebo použij některou předvolbu: 1 screen, 3× wide (plošinovka), 2×2 screens (otevřený svět). Editor nabídne zvětšit/oříznout vrstvy tilemapy, aby ho vyplnily.
  2. Vyber nástroj Paint a sadu dlaždic (PNG nebo + Colour tileset). Nová vrstva vyplní celý svět. Pohled posuneš tažením se stisknutou klávesou Space, prostředním tlačítkem nebo nástrojem Pan. K orientaci slouží minimapa vpravo nahoře; Fit zobrazí celý svět a 100% vrátí měřítko 1:1.
  3. Nástrojem Place umísti sprite a jeden pojmenuj player (Select → pole name).
  4. V Select nastav Camera → follow → player. Meze kamery ve výchozím nastavení odpovídají World size (auto); odškrtnutím můžeš táhnout vlastní oranžový rámeček camera-bounds.
  5. Zvol Export → scene.json, nech soubory PNG vedle exportu a scénu převeď.

Změna World size (nebo velikosti jedné vrstvy v panelu Paint) při zvětšení doplní prázdné dlaždice, při zmenšení ořízne a nejdřív se zeptá, pokud by se ztratily namalované. Vše lze vzít zpět (Ctrl+Z). Nastavení Layer size použij, když má být vrstva menší než svět nebo posunutá kvůli paralaxnímu efektu. Ve většině úrovní stačí měnit World size.

Nástroj Klávesa Co dělá
Select 1 / V Vybere a přesune objekt. Opakovaný klik na stejné místo prochází překrývající se objekty. Upravuje také příznaky a barvu dlaždice.
Paint 2 / B Maluje aktivní vrstvu. Táhnutí = štětec, Shift-táhnutí = obdélník, Alt-klik = výplň.
Place 3 / P Umístí vybraný sprite.
HUD 4 Popisek s pevnou polohou na obrazovce; spravuje i vrstvy částic.
Zone 5 Vytvoří tažením spouštěcí oblast, kterou můžeš pojmenovat.
Point 6 Pojmenovaný bod (např. spawn).
Pan H / Space Posun pohledu (posouvá i prostřední tlačítko).

Kolečko posouvá pohled, Ctrl/⌘+kolečko mění měřítko kolem kurzoru, stejně jako +/. Klávesa F zobrazí celý svět. Šipky posouvají výběr (Shift = ×10) nebo posouvají pohled, když nic není vybráno. Ctrl+Z/Y zpět/vpřed, Ctrl+C/V/D kopírovat/vložit/duplikovat, Delete smaže, Esc zruší výběr. Pravý panel se mění podle aktivního nástroje, takže vidíš jen potřebné ovládání. Stavové zprávy nepřerušují práci dialogy prompt() ani alert().

Příznak dává dlaždici význam, který čte hra, ale nemění její vzhled. Načítání scény připraví vyhledávací tabulky, takže herní kód nemusí pracovat s pevně zadanými čísly dlaždic:

flag hra to čte jako typické použití
solid view.is_solid(tx, ty) zdi / podlaha blokující pohyb
coin view.tile_has(tx, ty, "coin") sběratelný předmět, hra ho po sebrání odebere
goal view.tile_has(tx, ty, "goal") východ z úrovně / cílová dlaždice
hazard view.tile_has(tx, ty, "hazard") láva / bodliny, co zraní hráče

Přepínačem Show flag badges on map v panelu Paint zapneš barevné značky v rozích dlaždic. Volba Paint → + Colour tileset vytvoří jednoduchou barevnou sadu bez obrázků. Barvy upravíš výběrem barvy a další přidáš pomocí + add colour.

Převod a spuštění na zařízení nebo v simulátoru

Sekce “Převod a spuštění na zařízení nebo v simulátoru”

PNG nech vedle staženého scene.json, pak:

Terminal window
python3 tools/scene_build.py my.scene.json # -> my_scene.py (SCENE = {...})
python3 sim/run.py <konzument, který importuje my_scene> # náhled v simulátoru
tools/build_mpy.sh # volitelně: my_scene.mpy pro zařízení

Ve hře scénu načti přes picogame_scene.load(pg, my_scene.SCENE, font=...). Úplný příklad hry postavené na převedené scéně najdeš v examples/picogame_scene_example.py.