Jak na vlastní sprajty

V Petrovské tutoriálové vsuvce si popíšeme tvorbu vlastních sprajtů.

Nebudeme se zabývat malováním vlastních sprajtů, ty jsou zřejmě jasné. Zaměříme se na případ, kdy máme nějaké vlastní 2D sprajty a chceme je importovat do Petra. Dejme tomu, že se jedná o sprajtovou klasiku, postavičku Lem­mingse - walkera (neboli česky Lumík Procházka).

Obrázek, který máme k dispozici, má 8 fází pohybu, každá s rozměrem 16 x 16 bodů. Vzhledem k současnému běžnému rozlišení monitorů naimportujeme sprajt do dvojnásobné velikosti, 32 x 32 bodů. Aby byl na obrazovce vůbec vidět. Těžko budeme totiž předpokládat, že použijeme originální videomód 320 x 200 bodů.

V programu v Petrovi si v poli Společné proměnné a funkce připravte nový sprajt (přetažením prázdného sprajtu z pole Knihovna proměnných a funkcí). Dvojklikem na sprajt a volbou Vlastnos­ti vyvolejte nastavení vlastností sprajtu. Vlastnosti nastavte následujícím způsobem.

• Prodleva mezi fázemi: 110 (určuje dobu v milisekundách mezi jednotlivými fázemi animace)
• Fází na krok: 8 (určuje rychlost pohybu, kolik fází je potřeba na překonání vzdálenosti jednoho políčka)
• Hladina k zobrazení: 1000 (je výšková hladina určující, jak se budou sprajty překreslovat přes sebe)
• Fází pro klid: 1 (počet fází, pokud se sprajt nepohybuje)
• Fází pro pohyb: 8 (počet fází, pokud se sprajt pohybuje)
• Směrů: 2 (počet směrů, kterými se sprajt bude pohybovat)
• Šířka obrázku: 1 (šířka obrázku sprajtu, udává se v políčkách, tj. násobek 32 bodů)
• Výška obrázku: 1 (výška obrázku sprajtu, udává se v políčkách, tj. násobek 32 bodů)

Do programu si načteme grafiku. Máme k dispozici dva způsoby. Buď obrázek s grafikou uložíme do Petrovské složky Picture ve formátu BMP ne­bo JPG a obrázek pak přetáhneme do programu z pole Knihovna proměnných a funkcí, nebo obrázek otevřeme v nějakém editoru, zkopírujeme do schránky (Ctrl+A a Ctr­l+C), v Petrovi připravíme prázdný obrázek stejných rozměrů a grafiku do něj vložíme ze schránky Ctrl+V. Při importu barev obrázku se uplatní nastavení přepínače Úpra­vy / Ditherin­g, který určuje, zda se použije dithe­ring. Budete-li pozorovat, že obrázek je nepřirozeně tečkovaný, přepínač Dithe­ring vypněte. Vypnutí přepínače je vhodné u kreslených obrázků s málo barvami. Ovšem pozor ať ho nezapomenete opět zapnout až budete do programu načítat například fotografie JPG. V obrázku vyplňte pozadí postaviček průhlednou barvou a obrázek zvětšete na dvojnásobek, aby měly fáze animace rozměr 32 x 32 bodů.

Nyní přeneseme obrázky do sprajtů. Označte první fázi v obrázku jako blok 1x1 políčko (tj. 32 x 32 bodů, k orientaci použijte orientační síť editoru). Ctrl+C zko­píruje blok do schránky. Dvojklikem na sprajt a pak dvojklikem na příslušné políčko sprajtu se dostanete do editace jedné fáze sprajtu, pomocí Ctrl+V o­brázek fáze vložíte do sprajtu. Takto postupujte pro všech ostatních 8 fází animace. Jednu z fází použijte i pro stav klidu.

Po přenesení fází pohybu pro jeden směr vyvolejte opět editaci sprajtu dvojklikem na něj a pravým tlačítkem zkopírujte fáze i do dalšího směru. Postupně vyvolávejte editace fází v druhém směru a obrázky horizontálně převracejte.

Na závěr sprajt vyzkoušejte. Stiskněte tlačítko Test, objeví se testovací okno. Klikáním do okna můžete sprajt rozpohybovat po ploše. Překreslením políčka prázdné políčko můžete změnit pozadí testovacího okna.

Druhý případ, kterým se budeme zabývat, je vytvoření sprajtu importem z grafiky ve vyšším rozlišení (např. fotografie). Dejme tomu, že chceme vytvořit sprajt stíhačky. Na internetu jsme si našli někde ně­jakou fotogra­fii. Už nevíme kde a co to je? Hrubá chyba, zdroje je třeba si vždy značit. Tak například zde jsme našli ruský bombardér Sukhoi Pak Fa T-50. Chceme ho použít do střílečky s horním pohledem, proto nás zajímá fotografie shora.

Nejdříve si připravíme holý obrázek objektu tím, že odstraníme pozadí z fotografie. V popisu se zaměříme na Photoshop. Je možné použít i grafický editor Petra, jen to bude pracnější. Ve Photoshopu použijte k označení obrysu stíhačky nástroj magnetické laso. Podrobnější popis postupu naleznete v tutoriálu Vyt­váříme textury - 2D objekty. Po vyříznutí stíhačky ji zkopírujte do nového obrázku a rozšiřte plátno na čtvercový rozměr (v našem příkladu 459 x 459 bodů).

V Petrovi si připravte nový sprajt. V jeho nastavení změňte počet směrů například na 8 a velikost obrázku na 2 x 2 políčka.

Nyní budeme postupně importovat jednotlivé směry sprajtu. Zmenšete obrázek na rozměr 64 x 64 bodů. Zkonvertujte obrázek do paletových barev Petra pomocí funkce Obraz / Re­žim / Indexova­ná barva s využitím importovací tabulky palet Petra, kterou si můžete stáhnout v archivu na konci článku. . Obrázek označte Ctrl+A a vložte do schránky s Ctrl+C. Přepněte se do programu v Petrovi, dvojklikněte na sprajt a poté na obrázek prvního směru. Obrázek vložte ze schránky s Ctrl+V. Používáte-li jiný editor, můžete přenést obrázek i ve formátu True Color, jen budete muset odmazávat pozadí obrázku. V nejhorším případě můžete použít editor Petra - obrázek načtěte přes knihovnu do programu, překreslete pozadí průhlednou barvou, udělejte si kopii do druhého obrázku, kopii zmenšete na rozměr 2 x 2 políčka, její obsah přeneste přes schránku do sprajtu.

V historii Photoshopu se vraťte o 3 kroky zpět, do doby, než jste měnili velikost sprajtu. Vyvolejte Úpra­vy / Transfor­mace / Otočit a zadejte na horní liště úhel otočení -45°, potvrďte 2x Enter. Obrázek přeneste do Petra opět zmenšením na 64 x 64 bodů, importem do palet Petra a přenesením přes schránku. V případě, že používáte jenom editor Petra, otočte obrázek v původní velikosti (ale s odmazaným pozadím) o 45° a ten pak použijte po zmenšení jako druhý směr sprajtu.

Nyní si již vystačíme s editorem Petra. Rozkopírujte první dvě fáze do ostatních fází tak, abyste pak mohli jen operací otočení o 90° dosáhnout ostatních směrů otočení. Druhý směr 45° jsme museli dělat ve Photoshopu z originálního obrázku (resp. v Petrovi z původního velkého obrázku), protože otočením zmenšeného obrázku v editoru Petra by již značně poklesla kvalita grafiky. Ostatní otočení o 90° jsou již bezztrátové operace a proto si vystačíme s editorem Petra.

Snadno bychom mohli podobným způsobem vytvořit libovolný počet směrů sprajtu. Vždy je však potřeba otáčet obrázek ve vyšší kvalitě a teprve potom ho zmenšit na koncovou velikost. Zmenšené obrázky otáčet jen po 90 stupních.

Někdy můžeme chtít pod sprajty mít ještě stín. Připravíme si ho opět jako sprajt. Použijeme oříznutý obrázek stíhačky. Nástrojem kouzelná hůlka označte průhledné okolí stíhačky, výběr invertujte a vnitřek stíhačky vyplňte některou barvou (například černou). Při výplni použijte maximální toleranci, 255. Takto připravený obrázek importujte do sprajtu Petra podobně jako obrázek stíhačky s tím rozdílem, že po vložení do Petra černou barvu stíhačky vyplňte stínovou barvou.