1. Brejlův Game Maker tutoriál - Chyť míč!

Sem vkládejte editovatelné kusy kódu a tutoriály.
Odpovědět
Uživatelský avatar
Brejlounek
Příspěvky: 183
Registrován: srpen 5, 2011, 10:52 pm
Facebook: http://facebook.com/

1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Brejlounek » srpen 7, 2011, 3:42 pm

Už poměrně dlouho si řikam, že na VCH chybí pořádnej tutoriál pro úplné nováčky, prostě jak začít s Game Makerem zcela od píky - já se tak odpích od tutoriálu v dávnym PPKčku, ale dneska nevim, jestli bych dokázal jako dvanáctiletej něco najít. Tak sem udělal tutoriál, kterej osvětluje základní principy Game Makeru na typickym prvnim příkladu "Chyť míč!". Podobně jako vedle Senzi, jeho tutoriál mi přišel ale takovej dost rychlej a nepřehlednej, nováček by z něj moc nadšenej nebyl. Tady to teda je! (trvalo mi to skoro 3 hodiny čistýho času dát dohromady, uff O_o)


1. Game Maker tutoriál - Tvoje první hra “Chyť míč”


Pokud jsi právě zjistil, že existuje program Game Maker, zatím jsi nic nevytvořil a chtěl by ses naučit, jak v něm dělat hry, jsi na správném místě! Vítej v tutoriálu, který tě seznámí s úplnými základy programu Game Maker. :)


A jdeme na GTA!

Nepředpokládej, že hned po přečtení tohoto prvního tutoriálu budeš umět vytvořit nějakou “velkou” hru konkurující GTA4 nebo Crysis. Když pominu, že je to i pro velký tým lidí hodně náročný kus práce, Game Maker něco takového neutáhne jak graficky, tak i systémově - Game Maker je stvořen tak, aby něm šly nejlépe tvořit 2D hry, tím myslím ploché hry, bez prostoru. Prostorové 3D hry jde v Game Makeru do jisté míry také tvořit, o tom jindy.

Výhoda Game Makeru ale spočívá v tom, že nemusíš být nějaký extra dobrý programátor na to, aby sis dokázat vytvořit jednoduchou hru. S trochou toho matematicko-logického myšlení a naučením se jazyka už pak má ovšem programátor daleko víc volnosti (a stále je to o hodně jednodušší, než v ostatních jazycích). Game Maker je prostě skvělý způsob, jak začít programovat.

Ještě bych měl možná pro začátek podotknout, že je u programování obrovskou výhodou umět anglicky. Nejen proto, že jsou programy většinou anglicky (čeština pro ně lze stáhnout jen občas), ale hodně návodů je pro ně napsáno anglicky a samotný programovací jazyk je založen na angličtině. Přestože pro Game Maker asi ještě nějaká ta čeština pořád existuje, nedoporučoval bych ho moc počešťovat - jednak se naučíš líp anglicky a pak nebudeš vyjevenej, až ti někdo bude ukazovat “roomy” a ne “místnosti”. :)

Ale už se nebudeme nadále zdržovat a vrhneme se na tvoření naší první hry v Game Makeru! :)


Co budeme tvořit?

Vytvoříme si jednoduchou hru - po obrazovce nám bude běhat míček a úkolem hráče bude na něj klikat a navyšovat tak svoje skóre. Prostě bezcílná jednoduchá hříčka perfektní na první seznámení! :)

Sprity pro zeď a kuličku si tu můžeš stáhnout: http://dl.dropbox.com/u/9713628/gmtut1.zip


1. Kde mám ten Game Maker?

Instalátor Game Makeru si lze stáhnout na webu yoyogames.com, konkrétně na této adrese: http://yoyogames.com/game_showcases/273/legacy_download

Volně stažitelná je jeho Lite verze, to jest verze s vypnutými pokročilejšími funkcemi. Pro naše účely bude bohatě stačit; v době psaní článku plná verze stojí $40. V době psání tutoriálu je aktuální verze Game Makeru 8.1, kdyby se budoucí verze v něčem výrazně lišily, poupravím.

Když Game Maker poprvé spustíme a zavřeme výzvu k upgradování na placenou verzi a Game Maker News, otevře se nám přibližně takovéhle okno:

Obrázek

Teď jsi zřejmě zmaten tím, co tohle asi může znamenat. Nejlepším způsobem pochopení rozhraní programu je jeho používání, tak se na to rovnou vrhneme.

2a. Zeď - přiřazení obrázku

Celý Game Maker funguje na principu objektů. Všechno, co v Game Makeru děláme je to, že vytvoříme různé typy objektů, přiřadíme jim vzhled (obrázek), umístíme je na místa na obrazovce a řekneme jim, jak se budou mezi sebou chovat.

Začneme tím, že do naší hry umístíme zdi. Naším prvním krokem bude zajistit pro budoucí objekt zdi, jak bude vypadat. Vytvoříme si tedy uvnitř Game Makeru obrázek, který později přiřadíme k objektu zdi. Obrázkům přiřazeným k objektům se říká sprite [sprajt]. Vytvoříme si tedy sprite kliknutím na ikonku červeného pacmana v horním panelu:

Obrázek

Otevře se nám okno nadepsané Sprite properties, pomocí kterého načteme sprite zdi.

Obrázek

Do políčka vlevo nahoře vedle nápisu “name” napiš nějaké jednoduché pojmenování pro sprite bez diakritiky nebo speciálních znaků, které nezačíná číslicí, třeba zed_sprite (podtržítka _ a pomlčky - tomu nevadí). Jasně, klidně si můžeš nechat pojmenovávání sprite0, sprite1, sprite2 atd., při větším počtu spritů by ses v tom ale ztratil.


Obrázek

A teď už nám stačí jen načíst sprite. Klikni na Load Sprite a otevři si svůj vlastní obrázek o rozměrech 32x32 pixelů nebo ten ode mne pojmenovaný “zed.png”.

Obrázek

Všimni si, že v adresáří “Sprite” v levém panelu přibyl nový sprite zed_sprite i s jeho zmenšeninou jako ikonkou vedle. Tato adresářová struktura nám ukazuje, jaké máme v našem projektu sprity nebo další zdroje (anglicky resources).

A tímto jsme s naším spritem hotovi. Samozřejmě, jde toho se sprity v Game Makeru dělat o hodně víc, ale pro začátek nám tohle bohatě stačí. Můžeš si kliknout na OK, aby ti okno tohoto spritu dál nepřekáželo.


2b. Zeď - vytvoření objektu

Nyní si vytvoříme objekt zdi a přiřadíme mu jeho sprite. Objekty se vytváří kliknutím na modrou kouli nedaleko tlačítka na vytvoření spritu.

Obrázek

Objekt si zase nějak smysluplně pojmenujeme, třeba “zed”. Pozor, pokud jsi pojmenoval sprite “zed”, už stejně nepojmenovávej objekt (a v budoucnu ani nic jiného). Game Maker by pak byl zmaten, co tím “zed” vlastně myslíš.

Hned pod určením jména je roletka “Sprite”. Klikneme na tlačítko vpravo od roletky a vybereme náš sprite zed_sprite. Takto jsme právě objektu zed přiřadili, jak bude vypadat.

Obrázek

A tím jsme prozatím s objektem zed hotovi. Zatím chceme, aby nám na obrazovce stála a nic nedělala, což teď přesně bude dělat.

Všimni si, že se v levém panelu teď objevila položka zed pod adresářem “Objects”.


2c. Zeď - rozmístění po obrazovce

Teď už nám zbývá zeď rozmístit po obrazovce. Game Maker používá pro obrazovky zdroje podobného typu jako sprity nebo objekty, jmenují se “room”, česky místnosti. Room vytvoříme kliknutím na ikonku okna.

Obrázek

V otevřeném room properties okně se ujistíme, že jsme v záložce “objects” a v roletce máme vybrán objekt zed. Na plochu obrazovky vpravo teď levým kliknutím myši můžeme nanášet objekt zed. Přidržením klávesy Shift a táhnutím myši můžeme vytvořit více objektů v řadě za sebou. Pravým tlačítkem a vybráním “Delete” můžeme objekt smazat, když se nám některý nepovede umístit, přidržením Shiftu se maže už jen levým myšítkem. Ohraničíme celou obrazovku zdí.

Obrázek


2d. Zeď - první spuštění

Už jsme toho celkem dost udělali, navrhuji náš projekt uložit. Teď zkusíme “hru” poprvé spustit, stačí nám kliknout na zelený trojúhelníček.

Obrázek

Po zkompilování a načtení hry se nám zobrazí okno s tak rozestavěnými zdmi, jak jsme je tam dali. Nic zatím ale nepůjde dělat víc, protože jsme ani nic víc nenastavili. Okno musíme zavřít, abychom se dostali zpátky do Game Makeru.


3a. Kulička - událost vytvoření

A nyní přichází ta zajímavá část. Teď už se vrhneme na nastavování chování kuličky. Budeme ji chtít rozhýbat.

Vytvoříme si nový sprite, třeba kul_sprite a načteme si do něj buď svůj obrázek kuličky nebo ten, co si ode mne můžeš stáhnout, o velikosti 32x32 pixelů. Ještě v okně pro úpravu spritů (pokud jsi ho už omylem zavřel, dvojklikni na jméno spritu v seznamu) klikneme vlevo dole pod nápisem origin na center. To nám sprite na objektu vycentruje, bez tohoto opatření by byl sprite nalepený na pozici objektu doprava dolů. Pokud mě teď úplně nechápeš, nevadí, je to pro nás zatím skoro nepodstatné.

Obrázek

Následně si vytvoříme objekt kul a přiřadíme mu vytvořený sprite kul_sprite - zatím tedy stejný postup jako při tvoření zdi. Teď budeme kuličce nastavovat chování. Pokud sis okno objektu kul zavřel, dvojklikni si na něj nalevo v seznamu.

Chování objektů v Game Makeru je založeno na principu událostí (event [ívnt]) a akcí (action [ekšn]). U jedné události může být i více akcí. Když se tedy naše kulička vytvoří (událost), přesune se na náhodnou pozici v místnosti (akce) a začne se pohybovat náhodným směrem (akce). Přesně tohle teď řekneme Game Makeru.

Obrázek

V okně pro nastavení objektu vidíme dva hlavní sloupce, pro události a k nim přidružené akce. Klikneme na Add Event pod oknem pro události a vybereme Create (create je anglicky vytvořit, je to událost vytvoření objektu).

Obrázek

Máme vybraný event create, takže akce, které budeme dávat do pravého sloupečku, se vykonají hned po vytvoření objektu. Vpravo máme možnost vybírat z několika skupin akcí, nám teď bude stačit první roletka move. Z ní přetáhneme do sloupečku pro akce akci “jump to random” (přeskočit na náhodnou pozici).

Obrázek

Otevře se nám okno s možností zadat dvě čísla. To nám umožňuje, aby se kulička ukázala jen na místě mřížky dané velikosti, to nás teď nezajímá. Klikneme na OK.

Ještě kuličku rozpohybujeme. Pod vytvořenou akci přetáhneme akci “move fixed”. V otevřeném okně vidíme možnost zvolit si možné směry kuličky a hodnotu Speed (rychlost). Označíme čtyři diagonální směry a rychlost (což je vlastně počet pixelů za třicetinu sekundy) nastavíme třeba na 15. Klikneme na OK.

Obrázek

Otevřeme si již vytvořený room dvojklikem na jeho název v listu nalevo, na záložce “objects” vybereme náš objekt kuličky a umístíme ho jednou někam doprostřed roomu a hru spustíme opět zelenou šipkou.

Vida, funguje to! Kulička se přemístila na náhodné místo a putuje si náhodným směrem. Jenže si putuje stále rovně a nic jí v tom nebrání. Přidáme tedy odrážení od stěn.


3b. Kulička - odrážení od stěn

Pokud se tedy naše kulička potká se stěnou (událost), odrazí se (akce). Přidáme k našemu objektu kuličky tedy novou událost Collision (kolize) a z nabídky vybereme objekt zed.

Obrázek

Akce, co budeme dávat do pravého sloupce, se tedy vykonají, kdykoliv bude objekt kuličky na kterémkoli z objektů zed, porotože máme vybrán event “-><- zed”. Vybereme akci bounce a přetáhneme ji do pole akcí.

Obrázek

Opět se nám objeví okno pro nastavení akce. U roletky against vybereme all objects (kdybychom tam nechali solid objects, kulička by se odrážela jen od objektů se zaškrtlou vlastností solid, to lze zaškrtnout hned pod výběrem spritu).

Kuličku v roomu stále máme, zapneme tedy hru a co nevidíme - kulička se nám odráží! Jupí!


3c. Kulička - klikání

Pokud na kuličku klikneme (událost), měla by přeskočit někam jinam (akce) a začít se pohybovat opět náhodným směrem (akce) a ke skóre by se měl přičíst jeden bod (akce).

Přiřadíme ke kuličce událost Mouse > Left pressed.

Obrázek

Chceme, aby se kulička přenesla na náhodné místo a začala se pohybovat náhodným směrem. To už přiřadit umíme. Pro akci přičtení skóre se ale musíme poohlédnout do score. Přetáhneme akci Set score.

Obrázek

Do políčka new score napíšeme 1 a dole zaškrtneme políčko Relative. Políčko Relative nám vlastně udává, že to, co zadáváme do políčka new score se k aktuálnímu skóre přičte (bez zaškrtnutí políčka Relative by se skóre prostě nastavovalo na 1, když bychom místo 1 zadali -1, vždy by se od skóre odečetlo 1).

A zase si hru můžeme vyzkoušet. Pokud klikneme na kolečko a trefíme se, kolečko přeskočí jinam a změní svůj směr. Jupí, kde máme ale to skóre? Nikde, protože jsme Game Makeru nikde neřekli, že ho má zobrazovat.


4. Vykreslení skóre

Skóre nemůžeme vykreslovat naší kuličkou z jednoho prostého důvodu. Objekt v Game Makeru buď může mít sprite nebo bude vykreslovat, ale nebude nijak viditelný. Je ještě možnost kuličkou vykreslovat na sebe svůj sprite a k tomu ještě skóre, to už by ale toho bylo moc.

Vytvoříme nový objekt, pojmenujeme ho třeba skore a nebudeme mu nastavovat žádný sprite. Určíme si u něj událost Draw (tuto událost vždy používej na vykreslování, jinde nefunguje!).

Obrázek

Dvě políčka vedle Set Score je k dispozici akce Draw score, přetáhneme ji tedy do právě vytvořeného Draw eventu. Máme možnost nastavit x a y - to jsou souřadnice, na kterých se bude skóre vykreslovat (počítané od levého horního rohu obrazovky; x je kladné směrem doprava, y směrem dolů (narozdíl od kartézských souřadnic, kde je y kladné směrem nahoru)). Při základní hodnotě x=0, y=0 by text byl příliš přes naši zeď; ideální hodnoty jsou tak x=40, y=40. Do caption si zasej cokoliv chceš, aby se zobrazovalo před samotným skóre.

Nesmíme zapomenout objekt skore také umístit do naší místnosti. Zobrazí se tam jako otazník v kolečku, tak se zobrazují objekty bez přiřazených spritů. Můžeme ho umístit kamkoliv, je to úplně jedno.

Po spuštění hry zjišťujeme, že přesně tak, jak jsme nastavili nám to vykresluje skóre. Jupí! Projekt si nezapomeneme uložit.


5. Publikování hry

Dokončili jsme tedy naši skvělou hru-nehru a chceme ji někomu ukázat. Můžeme mu dát náš soubor projektu “chytkuli.gm81”, na jeho otevření a spuštění by ale musel mít nainstalován Game Maker, tisknout zelenou šipku a mohl by se nám hrabat v tom, jak to máme udělané.

Proto Game maker umí hru zkompilovat (přepsat do strojového kódu, kterému počítač rozumí i bez Game Makeru) do formátu spustitelného exe souboru. Je to velmi jednoduché, stačí zvolit File > Create executable... a uložit exe soubor. Exe soubory zvláště z nových verzí GM bávají velmi velké, vyplatí se je zabalit do zipu nebo raru. Můžeme tak ale rozšiřovat naše nádherné hry.


Závěr

Uff! Tak, jsme na konci. To byl první tutoriál osvětlující snad dobře uchopitelnou formou i pro úplného nováčka základy programu Game Maker. Zatím jsme téma vskutku jen nakousli, možnsoti Game Makeru jsou ještě o dost větší. O tom ale třeba zase příště :)

Doufám, že máš z první hry aspoň takovou radost jako já z toho, že sem dopsal tenhle první tutoriál! :D Kdyby byl někde nějaký problém, stačí říct. A experimentování se meze nekladou! :)

Uživatelský avatar
Mikos
Příspěvky: 233
Registrován: srpen 6, 2011, 12:34 am

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Mikos » srpen 7, 2011, 3:53 pm

Nechcem to odsudzovať, ale myslím, že je zbytočne písať znova o tom istom. Vidím, že si to spravil pre tých, ktorý Game Maker otvorili prvý krát v živote, ale lepšie by to bolo podľa mňa hodiť do tej istej témy čo tu už je, lebo to je o tom istom. Alebo ešte lepšie by bolo spraviť tutorial osobitne zameraný pre tých, ktorý otvorili prvý krát Game Maker a popísať im prostredie ;).

Ale aj snaha sa cenní a aspoň to tu nieje mrtve a sú tu nové tutoraly.

GW ;) :D

Uživatelský avatar
Milcho
Příspěvky: 70
Registrován: srpen 6, 2011, 1:45 pm

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Milcho » srpen 7, 2011, 5:47 pm

podla mňa tento tutoriál začiatočníkom plne stačí...
potom si pozrú zasa tutoriál zemraný ne niečo iné.. ale budú vedieť jak čo..

čiže si myslím že je to pre nich super tutoriál :)

Uživatelský avatar
Vojtas
Příspěvky: 288
Registrován: srpen 6, 2011, 5:19 pm
Facebook: http://www.facebook.com/#!/pro
Kontaktovat uživatele:

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Vojtas » srpen 15, 2011, 4:00 pm

U podobných tutoriálů vždy chtě-nechtě uroníl slzu nostalgie... :cry:
Více o mně a mých "hrách" na twitteru: https://twitter.com/VojtaKoci
Budu rád, podíváte-li se i na můj nový blog o všeobecném dění a mých nejen herních projektech: http://vojtakoci.blogspot.cz/

Uživatelský avatar
Brejlounek
Příspěvky: 183
Registrován: srpen 5, 2011, 10:52 pm
Facebook: http://facebook.com/

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Brejlounek » srpen 15, 2011, 6:39 pm

No Mikosi, sme to začali poněkud dělat dvá... Aspoň je vidět, jak umí Fiola burcovat :D

Jojo Micho, přesně tak sem to chtěl, kickstart. Tohle je úplnej základ a něco víc o jednotlivejch akcích, spritech a tak už de dohledat...

Přesně tak, Vojtasi. Nostalgie při po dlouhý době přesouvánim ikonek byla velká :D

Ale tak execute a line of code vlastně přetahuju furt, když se to veme :)

Uživatelský avatar
Vojtas
Příspěvky: 288
Registrován: srpen 6, 2011, 5:19 pm
Facebook: http://www.facebook.com/#!/pro
Kontaktovat uživatele:

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Vojtas » srpen 15, 2011, 7:54 pm

No, na ikonky zrovna ve šťastném nevzpomínám... Tohle jsem napsal někomu do poradny:
No, myslím, že je pro tvé dobro odnaučit se používat to hrozné zlo jménem I**NKY (pro jistotu jsem to cenzuroval), ale budiž. Ten postup, který Seeker zmínil je mnohem lepší... Jen ti prozatím poradim, že x a y souřadnice se v ikonkách měněj pomocí :gmico72: tuším. Jinak vspeed a hspeed se mění pomocí :gmico122: a :gmico51: ...


:mrgreen:
Více o mně a mých "hrách" na twitteru: https://twitter.com/VojtaKoci
Budu rád, podíváte-li se i na můj nový blog o všeobecném dění a mých nejen herních projektech: http://vojtakoci.blogspot.cz/

Uživatelský avatar
Dody
Příspěvky: 53
Registrován: srpen 9, 2011, 9:01 am
Facebook: http://www.facebook.com/profil

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Dody » srpen 16, 2011, 7:58 am

Vojtas:To si psal mě :mrgreen: :lol:

Uživatelský avatar
reMind
Příspěvky: 72
Registrován: srpen 10, 2011, 6:39 pm

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od reMind » srpen 16, 2011, 8:42 am

jo.. na tomhle sem taky kdysi začínal, hodně mi to dřív pomohlo..

Uživatelský avatar
kost
Příspěvky: 265
Registrován: srpen 5, 2011, 10:48 pm

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od kost » srpen 16, 2011, 10:47 am

Jo, jo. Starý známý tutoriál, kterým si prošel snad každý, skvělá práce! :3

Uživatelský avatar
lamarr007
Příspěvky: 37
Registrován: srpen 11, 2011, 2:02 pm

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od lamarr007 » srpen 20, 2011, 6:00 pm

Není to náhodou to samé jako Chyť klauna ?
http://sandbox.yoyogames.com/make/tutorials
Chyť ovoce ! - Obrázek
Nová verze 1.3 !Pong Lamarr Edition - Obrázek

Uživatelský avatar
Carny
Příspěvky: 33
Registrován: srpen 7, 2011, 12:19 pm
Facebook: Anti-Facebook :D

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od Carny » srpen 20, 2011, 9:27 pm

Super Tutoš ;) Konečně to někoho napadlo udělat TuT pro uplne začátečníky :)

Kdy bude pokračování? :)

bexiczek
Příspěvky: 20
Registrován: prosinec 4, 2011, 8:58 pm

Re: 1. Brejlův Game Maker tutoriál - Chyť míč!

Příspěvek od bexiczek » prosinec 5, 2011, 9:04 pm

Pro začátéčníky je to velice dobré, díky za tento tutoriál.

Odpovědět

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 0 hostů