Tvoříme hry ve Photoshopu - Grafika.cz - vše o počítačové grafice

2. ledna 2008, 00.00 | Přestože nadpis článku může připomínat nevydařený vtip z prvního dubna,
v tomto článku opravdu najdete návod, jak přímo ve Photoshopu vytvořit hru. A
aby toho nebylo málo, podíváme se rovnou na tři různé příklady - hru kostky,
hru pro procvičení práce s myší a jednoduché puzzle. A opravdu použijeme pouze
Photoshop. Nevěříte?

A teď popravdě. Photoshop je grafický program, ne program pro programování (ať už aplikací nebo her). Proto budeme pro práci potřebovat malou výpomoc - plugin Altia PhotoProto, který si můžete ve zkušební verzi stáhnout zdarma (pro Windows i MAC OS X). Pro začátek doporučuji alespoň v rychlosti přečíst článek Altia photoProto: prototypy ve Photoshopu jednoduše a rychle, kde se dozvíte pár základních informací. Pro práci s pluginem je potřeba Photoshop verze minimálně CS (tj. CS, CS2 nebo CS3).

Plugin Altia PhotoProto slouží pro tvorbu prototypů - jednoduchých aplikací, na kterých se testuje vzhled a chování grafiky (tlačítek, posuvníků, oken atd.). Stejně jako ve Photoshopu, ani v něm se nedá nic naprogramovat. Můžeme ale využít možnosti přiřadit tlačítkům různé akce a při troše fantazie vytvořit velmi jednoduché "hry". Poté lze přímo z Photoshopu vygenerovat samospustitelnou aplikaci, tedy plnohodnotný program. Tím jistě překvapíte (nejenom) nejednoho kolegu grafika ;)

Soubory ke stáhnutí

Zde si můžete stáhnout zdrojové soubory (*.psd), se kterými budeme dnes pracovat, a jednotlivé hry (*.exe), které si můžete zahrát.
Hra Kostky (.psd +  prototyp)
Hra Puzzle (.psd + prototyp)
Hra Myš (.psd + prototyp)

Při tvorbě začneme velice jednoduchou hrou kostky. Princip hry je následující - před uživatelem je zobrazeno okno, ve kterém jsou tři kostky. Kliknutím na tlačítko start/stop se začnou kostky náhodně měnit, přičemž střídání kostek lze stisknutím stejného tlačítka zastavit. Cíl je jednoduchý - zastavit tři stejné symboly. Hra navíc obsahuje i skryté tlačítko Cheat, které vždy namíchá tři šestky. Zde je náhled na spuštěnou hru:

Pro práci jsem nejprve vytvořil pozadí s oknem, které obsahuje tři prázdné kostky.

Poté jsem vytvořil šest vrstev s tečkami - viz náhled.

A ty jsem rozkopíroval náhodně nad všechny kostky. V jedné vrstvě jsou vždy všechny tři symboly (viz náhled na paletku vrstvy). Je to proto, že můžeme střídat vždy jen jeden obrázek. To znamená, že se nebudou náhodně měnit všechny tři kostky, bude se jen střídat pár kombinací. Tudíž čím víc kombinací uděláme, tím bude hra "náhodnější".

Aby plugin věděl, co má program dělat, musíme vrstvy přesunout do složek a vhodně pojmenovat. Na následujícím obrázku vidíte všechny vrstvy dokumentu. Pozadí (background a vrstva window back) si všímat nemusíme. Vrstvy jsou statické a nemají žádnou funkci, proto mohou být libovolně pojmenované a nemusí být ve složce. Obrázky teček kostek ale musíme umístit do složky, která začíná názvem deck. To je objekt se sadou obrázků, které se mohou střídat (způsob, jakým se vrstvy střídají, se dá nastavit). Druhá část názvu složky "dots" je jméno sady, třetí část názvu "pingpong" je způsob, jakým se budou obrázky střídat (náhodně), čtvrtá část je rychlost střídání - pauza mezi obrázky. Číslo 0.01 je opravdu malé, takže střídání bude opravdu rychlé a zastavit kostky v tom správném okamžiku bude především otázka náhody.

Sadu obrázků máme nastavenou, to je ale málo. Takto by program nic nedělal. Proto vytvoříme tlačítko, které bude vše spouštět a zastavovat. Do nové složky umístíme obrázky tlačítka a složku pojmenujeme "button" - aby plugin věděl, že se jedná o tlačítko. Druhá část názvu "start" je jméno tlačítka (můžeme nastavit libovolné), třetí část názvu "up" je okamžik, kdy se provede akce. V tomto případě po kliknutí tlačítka myši. Čtvrtá část názvu je již samotná akce. Dots inc znamená, že plugin najde složku se jménem dots a spustí nebo zastaví animaci.

Než vše spustíme a vyzkoušíme, ukážeme si princip fungování "podváděcího" tlačítka Cheat. Krom toho, že můžeme spustit a zastavit animaci střídání teček, můžeme animaci přesunout na konkrétní vrstvu. Tu s třemi šestkami jsem tudíž pojmenoval cheat (viz screenshot - ostatní vrstvy mohou mít libovolná jména) a tlačítko cheat jsem umístil do složky nazvané "button cheat up dots cheat". Přeloženo do češtiny - "v této složce je button (tlačítko) pojmenované cheat, které po kliknutí (up) najde sadu dots a v ní skočí na vrstvu cheat".

Tím by mělo být vše nastaveno, a tak jen stačí v menu File (Soubor) najít funkci Scripts - Altia PhotoProto - Build Prototype.

Program na chvíli přestane reagovat, přičemž plugin vygeneruje a uloží všechny potřebné soubory projektu a nakonec projekt spustí. Pokud je vše správně nastaveno, měla by se před vámi objevit "hra", nebo chcete-li přímo hra. Pár vrstev a jedna akce stačí k tomu, aby grafika ožila a na pár desítek sekund zaměstnala hráče. Podobným způsobem můžete samozřejmě vytvořit i jiné odvozeniny - např. hrací automat. Ani zde se fantazii meze nekladou. Pro jistotu je zde ještě odkaz na archiv se zdrojovým psd souborem a vygenerovanou hrou - Hra Kostky.

Druhá hra, kterou si dnes ukážeme, se sice jmenuje puzzle, ale její princip je trochu jiný. Přestože obsahuje dílky puzzlete, nelze v pluginu nijak jednoduše udělat, aby s nimi šlo posunovat. Proto každý dílek obsahuje několik obrázků, které se střídají po kliknutí myši (žádné posunování dílků tedy neprobíhá). Přesněji každý dílek obsahuje obrázky tři, plus jeden průhledný, tudíž je možné složit tři různé obrázky, nebo mít celou plochu čistou (tak tomu bude na začátku po spuštění). Princip udělání hry již jistě tušíte. Pro každý dílek opět použijeme prvek deck s obrázky a nad každý takový deck umístíme tlačítko, které bude obrázky přepínat (tentokrát ale bez animace). Aby bylo skládání malinko náhodnější, umístíme obrázky do objektů deck přeházeně. Ale nebudeme předbíhat, nejprve screenshot spuštěné hry:

Také tentokrát použijeme obrazovky - Layer Comps. V jednom prototypu můžeme  mít více obrazovek, mezi kterými můžeme přepínat. Krom toho lze ještě Layer Comps použít k nastavení pozadí (Background) a popředí (Foreground). To bude náš případ. Do pozadí umístíme pozadí okna, do popředí umístíme puzzle mřížku a mezi umístíme jednotlivé kostičky. Tímto způsobem budeme moci po správném vyřešení hry mřížku skrýt a bude vidět celý obrázek. Kromě toho budeme Layer Comps používat v dalším projektu, proto se na to tímto způsobem připravíme.

Zde vidíte náhled na jednotlivé dílky puzzlete (bez mřížky). Vždy čtyři (tři obrázky + prázdný) vrstvy jsou v jednom "decku", tentokrát jen pojmenovaném např. dXX. Bez dalšího nastavování. První průhlednou vrstvu uděláme jednoduše tak, že stáhneme Krytí (Opacity) na 0 %. Jak jsme si řekli na začátku, obrázky ve složkách nejsou popořadě, aby nestačilo na každý dílek kliknout pouze jednou.

Poté je potřeba nad každý dílek umístit tlačítko (button), které zobrazí další obrázek v dané složce (funkce inc). Pojmenování tlačítek je pak "button bXX down dXX inc". Aby tlačítko nebylo vidět, má opět stáhnuté krytí na 0 %. Tento krok vypadá jednoduše, ale trvá nejdelší dobu, protože je nutné nad každou kostičku tlačítko zkopírovat a vhodně jej pojmenovat (aby se kliknutím na levý horní dílek nezměnil pravý spodní).

Všechny tyto vrstvy budou zobrazeny v Layer Decku pojmenovaném game_puzzle. Protože je to ale jediná obrazovka, může být jméno libovolné (jak jsme si řekli, Background a Foreground nejsou obrazovky).

Poslední část bude Layer Deck se jménem Foreground - tedy popředí. V něm zobrazíme mřížku, kterou budeme opět moci přepínat tlačítkem. Proto mřížku umístíme do složky deck grid. V mém případě jsem kromě viditelné (vrstva grid_100) a neviditelné mřížky (vrstva grid_no) přidal ještě mřížku poloprůhlednou (vrstva grid_50).

Zapomenout nesmíme ani na tlačítko pro přepínání - pojmenovat jej musíme "button gridbtn down grid inc". Tedy tlačítko se jménem gridbtn, které po kliknutí (down) zobrazí další obrázek ve složce grid.

A to je vše. Projekt opět stačí spustit a po chvilce máme hru, která zabaví ještě více než předchozí. Obzvlášť, pokud do hry umístíte zajímavé fotky. Pokud si chcete hru zahrát, nebo jen prozkoumat zdrojový psd soubor, nezapomeňte si stáhnout archiv Hra puzzle.

Poslední hra je zdaleka nejjednodušší a, i její tvorba zabere nejkratší čas, doba hraní však bez problému přesáhne i několik desítek minut. Vše nakonec skončí buď rozmlácenou myší, nebo dobrým pocitem z dohrané hry. O čem mluvíme? O hře Myš, ve které si procvičíte svou dovednost s tímto počítačovým ukazovátkem. Princip hry je opravdu jednoduchý - projet kurzorem stanovenou trasu bez toho, abyste se dotkli zeleně. Zde je screenshot spuštěné hry:

Při "oživování" projektu přijdou vhod především tlačítka a obrazovky. První obrazovka - newgame, obsahuje pouze jedno tlačítko, které nás přesune na obrazovku game. Důležité je umístění tlačítka, musí být přesně v místě startu.

V této hlavní obrazovce - game, rozmístíme neviditelná tlačítka všude po zelené ploše. Při jakémkoliv kontaktu s jakýmkoliv tlačítkem...

...se ihned skočí na obrazovku gameover. Z té se budeme moci vrátit zpět na obrovku newgame (a z té opět do hry - obrazovku game).

Pro úspěšné hráče pak bude přichystána obrazovka winner.

A teď jednotlivá tlačítka. Pro přechod na jinou obrazovku stačí napsat její jméno. Proto název tlačítka pro novou hru bude vypadat následovně: button btnng up game.

Na obrazovce hry pak budou rozmístěna tlačítka button shX over gameover. Aneb - při jakémkoliv dotknutí se tlačítka ihned skočit na obrazovku gameover.

Všechny tlačítka by mohly vypadat například takto. Abychom věděli, co jsme již udělali a co ne, je dobré pracovat s viditelnými tlačítky (později je skryjeme). To, že jsou občas někde mezery vůbec nevadí. Hráč tato místa nevidí, a tak stejně neví, kde by mohl "projet". Nesnažte se udělat tlačítka co největší, hra bude zbytečně velmi obtížná a nehratelná.

Pouze poslední tlačítko se bude lišit - tímto tlačítkem se skočí na obrazovku pro vítěze - winner. Proto bude název tlačítka button sh1000 over winner.

V této fázi můžeme hru pro jistotu otestovat. Pokud vše funguje, nastavíme Krytí (Opacity) jakékoliv vrstvy na 0%, zkopírujeme styl a vložíme jej pro všechny ostatní vrstvy tlačítek.

Poslední akce budou u tlačítek na obrazovkách gameover a winner. Na obrazovce gameover budeme chtít zkusit hrát hru znovu, proto tlačítko bude odkazovat na obrazovku game.

Zato po obrazovce winner už nebudeme chtít hru nikdy vidět. Proto použijeme akci quit, která celou aplikaci ukončí. A to je opět vše, stačí jen spustit, testovat a hrát. Stejně jako u předchozích projektů naleznete zdrojový psd soubor a vygenerovanou hru v archivu Hra Myš.

Poznámka na konec: Program Adobe Photoshop je velmi často používán k tvorbě grafiky pro hry. Stejně tak většina grafiků používá program i k otestování, jak bude grafika ve hře vypadat. Tyto obrázky, tzv. mock-ups, mohou být jak velmi jednoduché (pouze poskládané prvky), tak složitě animované (což však zabere velmi mnoho času). Slouží především pro grafika, aby sám věděl, jestli obrázek nebo animace v celkové grafice vypadá dobře a zda se tam hodí. Je to jednodušší, než čekat na to, až programátor vše zapracuje do hry a poté grafiku zpětně upravovat.

Díky pluginu Altia PhotoProto je možné tyto mock-ups převést na prototypy. To znamená rozšířit o interaktivní prvky a - jak jsme si dnes ukázali - s trochou fantazie vytvořit klidně i funkční hry. Ostatně, vaše vlastní fantazie je jediné omezení...

Pokud vás tvorba prototypů zaujala a rozhodli jste se plugin začlenit do své práce, neváhejte využít nabídku získat plugin se slevou 100 USD.

Získat plugin Altia photoProto se slevou 100 USD