Editor Levelů

Toto je hlavní prostředí, kde skládáte jednotlivé herní úrovně z dlaždic, barev a entit.

Levý panel (Kontextové Menu Editoru Levelu):

• Název levelu: Umožňuje změnit název aktuálně editovaného levelu.
• Rozměry Levelu: Zde nastavujete celkovou šířku a výšku vašeho levelu v pixelech a velikost jedné "buňky" (pixelu), ze které se level skládá.
• Pozadí Levelu: Vyberte barvu, která bude tvořit pozadí vašeho levelu.
• Mřížka: Můžete zapnout/vypnout zobrazení mřížky, nastavit její barvu a průhlednost. Mřížka pomáhá s přesným umisťováním prvků. Klávesová zkratka: G.
• Zoom Editoru: Umožňuje přiblížit nebo oddálit pohled na pracovní plochu editoru levelu. Klávesové zkratky: +, -, 0.
• Akce (Level): Tlačítko pro vymazání veškerého obsahu (dlaždic, barev) z aktuálního levelu.

Střední plátno:

Hlavní kreslící plocha. Pohyb po plátně (pan) se provádí držením prostředního tlačítka myši nebo držením klávesy Mezerník a tažením myší. Zoom kolečkem myši.

Pravý panel:

Obsahuje Nástroje, Paletu barev a Vlastnosti dlaždic. Více viz sekce "Nástroje".

Spodní panel (Editor Dlaždic):

Zobrazí se, když je aktivní nástroj "Štětec dlaždic" (B). Umožňuje vytvářet a editovat dlaždice. Více viz sekce "Editor Dlaždic".

Editor Dlaždic

Spodní panel, který se objeví při použití nástroje "Štětec dlaždic" (B) nebo po dvojkliku na dlaždici v paletě, slouží k vytváření a detailní úpravě jednotlivých dlaždic.

Paleta Dlaždic (levá část spodního panelu):

Zobrazuje všechny dostupné vlastní dlaždice. Kliknutím na dlaždici ji vyberete pro štětec (Tile Brush) a zároveň se načte do editoru dlaždic napravo.

• (Nová dlaždice): Vytvoří novou, prázdnou dlaždici o výchozí velikosti (nastavitelné v `config.js` nebo dle posledně použité).
• (Duplikovat dlaždici): Vytvoří kopii aktuálně vybrané dlaždice v editoru dlaždic.
• (Smazat dlaždici): Smaže aktuálně vybranou dlaždici z palety (a potenciálně i z levelů, kde byla použita).
• (Importovat z obrázku): Umožňuje načíst obrázek (PNG, JPG) a převést jej na jednu nebo více dlaždic.
  • Strategie "Jedna dlaždice": Celý obrázek se stane jednou dlaždicí (oříznut na max. velikost).
  • Strategie "Rozdělit na mřížku": Obrázek se rozdělí na menší dlaždice podle zadané šířky a výšky buňky mřížky.
• (Načíst sadu dlaždic): Načte celou sadu dlaždic z `.json` souboru (přepíše aktuální sadu).
• (Uložit sadu dlaždic): Uloží aktuální sadu vlastních dlaždic do `.json` souboru.

Editor Dlaždice (pravá část spodního panelu):

Zde upravujete pixely vybrané dlaždice.

• Název dlaždice: Můžete pojmenovat dlaždici pro lepší orientaci.
• (Nastavit výchozí vlastnosti): Přiřadí aktuálně nastavené "Vlastnosti Dlaždice" z pravého panelu editoru levelu jako výchozí pro tuto konkrétní dlaždici. Když pak tuto dlaždici použijete štětcem, automaticky se jí přiřadí tyto vlastnosti.
• Nástroje ( Tužka, Guma, Kapátko): Slouží k přímému kreslení nebo mazání pixelů na plátně editoru dlaždice. Barva se bere z barevného kolečka vedle.
• Barva: Výběr barvy pro kreslení v editoru dlaždice.
• Rozměry (Š, V): Změna šířky a výšky aktuálně editované dlaždice v pixelech. Po zadání hodnot potvrďte tlačítkem .
• Zoom: Přiblížení a oddálení pohledu na plátno editoru dlaždice.

Editor Postav

V této sekci vytváříte a spravujete šablony postav (hráč, nepřátelé, NPC) a jejich animace. Přepnete se sem z hlavního (globálního) menu.

Levý panel (Kontextové Menu Editoru Postav):

• Šablony Postav (dropdown): Seznam všech vytvořených šablon postav. Výběrem postavy ji načtete pro úpravy.
• Tlačítka pro správu postav:
  • Nová: Vytvoří novou, prázdnou šablonu postavy.
  • Přejmenovat: Umožní změnit název vybrané šablony postavy.
  • Duplikovat: Vytvoří kopii vybrané šablony postavy.
  • Smazat: Odstraní vybranou šablonu postavy.
• Rozměry snímku (Š, V): Definuje globální šířku a výšku (v pixelech) pro všechny snímky animací této postavy.
• Typ (pro hru): Určuje základní chování a kategorii postavy ve hře:
  • Hráč: Postava ovládaná hráčem.
  • Nepřítel: Postava s nepřátelským chováním.
  • NPC: Nekontrolovatelná postava (Non-Player Character), může mít dialogy.
  • Obecná: Pro animované objekty, které nemají specifickou herní logiku.
  • Značka Spawnu Hráče: Speciální typ pro označení místa, kde se hráč objeví (grafika se ve hře nezobrazuje).
• Herní Statistiky (dle typu): V závislosti na zvoleném typu se zde mohou objevit další nastavení:
  • Pro Hráče: Základní rychlost pohybu, síla skoku.
  • Pro Nepřítele: Dotykové poškození (damage při kontaktu s hráčem).
  • Pro NPC: Výchozí text dialogu.

Střední část (Editor Snímku Postavy):

Velké plátno, kde kreslíte aktuálně vybraný snímek z vybrané animace. Pro kreslení se používají nástroje Tužka (P), Guma (E) a Kapátko (I) a barva z pravého panelu editoru.

Pod plátnem (nebo jako samostatný nástroj) může být aktivována možnost definovat Kolizní Zónu (Collision Box) pro aktuální snímek. Tento obdélník určuje, jak postava koliduje s okolím ve hře.

Spodní panel (Editor Animací):

Tento panel je aktivní, když jste v Editoru Postav.

• Správa Animací (levý sloupec):
  • Dropdown Animace: Seznam standardních slotů animací (Stoj, Chůze, Skok atd.) a možnost vytvořit vlastní. Pokud animace pro slot neexistuje, zobrazí se "(vytvořit)".
  • Přejmenovat: Přejmenuje klíč vlastní (nestandardní) animace.
  • Smazat: Smaže vlastní animaci nebo vyprázdní snímky standardní animace.
• Časová Osa Snímků (střední sloupec):
  • Zobrazuje miniatury všech snímků aktuálně vybrané animace. Kliknutím na miniaturu ji vyberete pro editaci na středním plátně.
  • Ovládací prvky snímků: Přidat nový (), Duplikovat (), Kopírovat (), Vložit (), Smazat (), Posunout doleva (), Posunout doprava ().
  • Délka snímku (ms): Nastavuje, jak dlouho se aktuálně vybraný snímek zobrazí v animaci (v milisekundách).
• Přehrávání & Volby (pravý sloupec):
  • Náhledové plátno: Zobrazuje přehrávanou animaci.
  • Přehrát/Pauza ( / ), Stop (): Ovládání přehrávání animace.
  • Smyčka (checkbox): Určuje, zda se animace bude po dokončení opakovat.
  • Cibule (Onion Skin): Počet předchozích/následujících snímků, které se poloprůhledně zobrazí na editačním plátně pro snazší animování.
  • FPS (Snímků za sekundu): Ovlivňuje rychlost přehrávání animace (pokud jednotlivé snímky nemají vlastní délku trvání).

Mapa Levelů

Toto je váš hlavní přehled všech levelů v projektu. Každá buňka v mřížce reprezentuje potenciální nebo existující level.

• Vytvoření levelu: Klikněte na prázdnou buňku. Zobrazí se dialog pro nastavení názvu a rozměrů nového levelu.
• Výběr levelu pro editaci: Klikněte na existující level (zobrazí se jeho náhled). Tím se level označí jako aktivní (zvýrazní se). Další kliknutí na již aktivní level (nebo použití tlačítka "Editor Levelu" v hlavním menu) vás přepne do editoru tohoto levelu.
• Smazání levelu: Po kliknutí na existující level se vpravo dole objeví tlačítko s ikonou koše . Kliknutím na něj (a potvrzením) level smažete.
• Navigace: Použijte prostřední tlačítko myši nebo Mezerník + tažení myší pro posun mapy. Kolečkem myši mapu přibližujete/oddalujete. Vpravo dole se může objevit plovoucí ovladač zoomu.
• Levý panel (Kontextové Menu Mapy Levelů):
  • Nastavení Projektu: Zde vybíráte, která z vašich vytvořených šablon postav bude reprezentovat hráče ve hře, a jaká bude její výchozí animace (např. "idle").
  • Smazat Projekt: Umožňuje smazat celý aktuální projekt (všechny levely, dlaždice, postavy). Tato akce je nevratná!
  • Informační box: Může obsahovat tipy nebo uvítací zprávu.

Nástroje (Pravý panel v Editoru Levelu)

Pravý panel v Editoru Levelu obsahuje sadu nástrojů pro tvorbu a úpravy.

• Tužka (P): Kreslí jednotlivé pixely aktuálně vybranou barvou. Pravým tlačítkem maže (kreslí průhlednou barvou).
• Čára (L): Klikněte a táhněte pro nakreslení rovné čáry aktuální barvou.
• Obdélník (R): Klikněte a táhněte pro nakreslení obdélníku. Ve "Volbách nástroje" můžete zvolit, zda má být vyplněný.
• Kruh/Elipsa (C): Klikněte a táhněte pro nakreslení elipsy (pokud táhnete se Shiftem, vytvoří se kruh - *funkce Shiftu může záviset na implementaci*). Ve "Volbách nástroje" můžete zvolit, zda má být vyplněný.
• Výplň (F): Kliknutím na oblast vyplní souvislou plochu stejné barvy aktuálně vybranou barvou.
• Guma (E): Maže obsah buněk (dlaždice i barvu).
• Štětec dlaždic (B): Kreslí aktuálně vybranou dlaždicí z palety dlaždic (spodní panel). Zároveň se aplikují "Vlastnosti dlaždice" nastavené v pravém panelu. Ve "Volbách nástroje" můžete zapnout přichytávání k mřížce o velikosti dlaždice.
• Kapátko (I): Kliknutím na pixel na mapě vyberete jeho barvu (pokud je to barevný pixel) nebo dlaždici a její vlastnosti (pokud je to dlaždice) do aktuálního výběru. Automaticky přepne na příslušný nástroj (Tužka nebo Štětec dlaždic).
• Výběr/Přesun (V): Umožňuje vybrat obdélníkovou oblast na mapě. Vybranou oblast lze poté přesunout, kopírovat (Ctrl+C), vyjmout (Ctrl+X) nebo smazat (Delete/Backspace). (Funkce kopírování/vkládání mohou být ve vývoji.)
• Umístit Entitu (X): Umožňuje umisťovat instance vytvořených šablon postav (nepřátelé, NPC, objekty) do levelu. Šablonu vyberete ve "Volbách nástroje". Pravým tlačítkem myši můžete smazat entitu pod kurzorem.
• Editor Postav (Shift+C): Rychlé přepnutí do Editoru Postav.
• Definovat Kolizní Zónu: Tento nástroj se objeví v Editoru Postav (na středním plátně) a slouží k manuálnímu definování obdélníkové kolizní zóny pro aktuální snímek animace.

Volby Nástroje:

Pod seznamem nástrojů se zobrazují specifické volby pro aktuálně aktivní nástroj (např. "Vyplnit tvar" pro Obdélník/Kruh, výběr šablony pro "Umístit Entitu").

Vlastnosti Dlaždice:

Když je aktivní nástroj "Štětec dlaždic", můžete zde vybrat typ vlastnosti (např. Pevná stěna, Plošina, Nebezpečí) a nastavit její parametry. Tyto vlastnosti se pak přiřadí každé dlaždici, kterou umístíte.

Paleta barev:

Výběr aktuální barvy pro kreslení. Obsahuje základní sadu barev a vaši vlastní paletu, do které můžete přidávat barvy z výběru (). Barvy z vlastní palety lze odstranit pravým kliknutím. Celou vlastní paletu můžete uložit nebo načíst ze souboru (.json, .gpl).

Vrstvy:

Editor podporuje práci s vrstvami. Můžete přidávat (), mazat (), posouvat (, ), přejmenovávat (dvojklik na název), měnit viditelnost ( / ), průhlednost (posuvník) a zamykat ( / ) jednotlivé vrstvy. Vrstvy s ikonou (Kreslit vpředu) se ve hře vykreslí nad hráčem a entitami, ostatní za nimi.

Ukládání & Načítání Projektu

Pixid umožňuje ukládat a načítat celý váš projekt, včetně všech levelů, dlaždic, postav a nastavení.

• Uložit Projekt (Ctrl+S): Nachází se v horní liště (a v globálním menu). Uloží celý aktuální projekt do jednoho souboru ve formátu `.json` do vašeho počítače (do složky Stažené soubory). Název souboru bude odvozen od názvu projektu.
• Načíst Projekt (Ctrl+O): Nachází se v horní liště (a v globálním menu). Otevře dialog pro výběr `.json` souboru s projektem Pixid. Načtení projektu přepíše veškerý neuložený obsah aktuálního projektu.

Automatické ukládání a nepřihlášení uživatelé:

Pokud používáte Pixid jako nepřihlášený host, váš postup se ukládá automaticky do lokálního úložiště vašeho prohlížeče. Při příštím otevření Pixid ve stejném prohlížeči by se měl váš projekt obnovit. Přesto důrazně doporučujeme pravidelně ukládat projekt do souboru pomocí tlačítka "Uložit Projekt", zejména před zavřením prohlížeče nebo vymazáním jeho dat.

Přihlášení přes Google může v budoucnu nabídnout integraci s Google Drive pro pohodlnější ukládání a synchronizaci projektů napříč zařízeními (tato funkce je ve vývoji).

Ukládání specifických sad:

• Sada dlaždic: V Editoru Dlaždic (spodní panel) můžete uložit () nebo načíst () pouze sadu vlastních dlaždic.
• Paleta barev: V pravém panelu můžete uložit nebo načíst vlastní paletu barev.

Export Hry a Obsahu

Pixid nabízí několik možností, jak exportovat vaši práci.

• Exportovat PNG (Akt. level): Nachází se v horní liště (dostupné v Editoru Levelu). Exportuje aktuálně zobrazený level (včetně všech viditelných vrstev sloučených dohromady) jako obrázek ve formátu PNG.
• Exportovat Spritesheet (Akt. level): Nachází se v horní liště (dostupné v Editoru Levelu). Exportuje každou viditelnou vrstvu aktuálního levelu jako samostatný snímek v jednom PNG obrázku (spritesheetu).
• Exportovat Hru (HTML): Nachází se v horní liště. Toto je hlavní funkce pro export vaší plošinovky. Zabalí všechny potřebné levely, postavy, animace a základní herní logiku do jednoho spustitelného HTML souboru. Tento soubor pak můžete sdílet nebo nahrát na web.
  • Vrstvy levelů jsou "zapečeny" do obrázků pro optimalizaci výkonu.
  • Obsahuje data postav a jejich animací.
  • Vyžaduje, aby byla v projektu nastavena "Postava Hráče" (v levém panelu na Mapě Levelů).

Při exportu hry se ujistěte, že máte uložený svůj projekt, protože export generuje samostatný soubor a neukládá změny v editoru.

Klávesové Zkratky

Urychlete si práci s těmito zkratkami:

Globální:

• Ctrl + S: Uložit Projekt
• Ctrl + O: Načíst Projekt
• Ctrl + Z: Zpět (Undo) - v kontextu editoru levelu
• Ctrl + Y: Vpřed (Redo) - v kontextu editoru levelu
• Mezerník (držet): Aktivuje režim Pan (posun pohledu) v editorech
• Esc: Zrušit aktuální akci (např. kreslení tvaru, výběr), zavřít modální okno, zastavit hru, zpět na mapu levelů z editoru.

Editor Levelu:

• P: Tužka
• E: Guma
• B: Štětec dlaždic
• I: Kapátko
• L: Čára
• R: Obdélník
• C: Kruh/Elipsa
• F: Výplň (Bucket)
• V: Výběr/Přesun (Arrow)
• X: Umístit Entitu
• G: Přepnout Mřížku
• M: Přepnout Levý (kontextový) panel
• T: Přepnout Pravý panel nástrojů
• + / =: Přiblížit
• -: Oddálit
• 0 (nula): Resetovat Zoom a Pozici
• Delete / Backspace: Smazat vybraný obsah (s nástrojem Výběr/Přesun)

Editor Dlaždic (Spodní panel):

(Když je aktivní spodní panel editoru dlaždic)

• Nástroje (Tužka, Guma, Kapátko) se volí kliknutím.

Editor Postav & Animací:

(Když jste v Editoru Postav)

• Shift + C: Rychlé přepnutí na nástroj/pohled Editoru Postav (pokud je definováno).
• Ctrl + C (v seznamu snímků): Kopírovat vybraný snímek animace.
• Ctrl + V (v seznamu snímků): Vložit zkopírovaný snímek animace za aktuálně vybraný.

Poznámka: Některé zkratky (zejména ty s jedním písmenem) mohou být aktivní pouze tehdy, když není fokus na žádném textovém inputu.