Natočil jsem sérii webcastů (cca 10-15 minutových videí) o programování her v XNA frameworku. Zmiňuji tam základní principy XNA a na praktickém příkladě popisuji jednotlivé jeho zajímavé vlastnosti. V průběhu těchto 10 dílů si společně vytváříme 2D hru hada, který může sbírat objekty, projíždět stěnami a podobně. Po sebrání jídla se ukazuje animovaná záře, pro vykreslování textu máme naprogramovanou vlastní komponentu.
Tyto webcasty jsem natáčel především pro náš nový web o XNA, na kterém teď spolu s Tomášem Hercegem a Štěpánem Pazderkou pracujeme. Vzhledem k tomu, že se jeho spouštění nejspíš ještě chvíli opozdí, pro velké zájemce je dávám k dispozici už i sem. Jako hosting jsem zvolil Youtube, protože přehrávač z tohoto webu má v dnešní době už skoro každý mobil, existují prográmky pro stažení videa do počítače apod. Doporučuji prohlížet v rozlišení 720p. Odkaz na kompletní Youtube playlist je k dispozici zde.
Obrázky pozadí, článků hada, jídla apod. dávám k dispozici ke stažení zde.

1. díl – XNA obecně
V tomto díle si popíšeme hlavní vlastnosti XNA frameworku. Ukážeme si, jaké hry už v XNA byly vytvořeny, popíšeme si v jakých jazycích a vývojových nástrojích můžeme programovat. Zorientujeme se v prostředí a založíme si nový projekt. Povíme si, co je potřeba udělat, aby naše hotová hra běžela i na jiných počítačích.
2. díl – Herní smyčka, vykreslení obrázku
Tentokrát se pořádně zorientujeme v kódu, popíšeme si herní smyčku. Ukážeme si její využití na praktickém příkladě, vykreslíme si opakující se obrázek na pozadí. Povíme si, co je to Content, popíšeme si vykreslování pomocí SpriteBatch. Ukážeme si, jak změnit velikost okna nebo jak si spustit hru na celou obrazovku.
3. díl – Vykreslování více herních objektů
Začneme si programovat hru, jednoduchého hada, který bude umět projíždět stěnami. Budeme chtít vykreslovat v cyklu více objektů najednou – vytvoříme si novou třídu Sprite. Tu si naimplementujeme. Ve třídě Game1 si potom tyto objekty uložíme do dynamického pole a vykreslíme si je. Ukážeme si také, jak změnit barvu vykreslovaných obrázků.
4. díl – Zpracování vstupu, pohyb objektu
V tomto díle si rozpohybujeme našeho hada, bude se moci pohybovat určitou rychlostí po zadaném úhlu. Vysvětlíme si, jak můžeme podle tohoto úhlu určit jeho novou pozici. Popíšeme si, jak udělat rychlost pohybu nezávislou na snímkovací frekvenci. Naučíme se zjišťovat a posuzovat stav klávesnice. Nakonci si ještě doplníme možnost projíždění hada skrz stěny.
5. díl – Generování jídla, kolize s objekty, animace záře 1/2
Vygenerujeme si několik položek jídla, které bude had sbírat. Ukážeme si, jak pracovat s náhodou, položky budou rozmístěné na náhodném místě a jejich barva bude rovnoměrně od žluté po červenou. Podíváme se, jak si jednoduše můžeme v XNA ošetřit kolize hlavy hada a jídla. Začneme pracovat na objektu animované záře.
6. díl – Animace záře 2/2
Dokončíme si objekt animované záře. Naimplementujeme si metodu, ve které budeme měnit její pozici a velikost. Při kolizi hada a jídla budeme vytvářet nové objekty této záře, ty s již skončenou animací budeme odstraňovat. Nakonec si ukážeme, jak také můžeme měnit její průhlednost a jak se to vlastně dělá od XNA verze 4.0.
7. díl – Komponenty v XNA 1/2
Podrobně si popíšeme, co jsou to objekty GameComponent a DrawableGameComponent, jaký mají vztah s voláním metod třídy Game1 a jak je můžeme využít. Začneme si vytvářet třídu Score, ve které budeme chtít vykreslovat aktuální bodovou hodnotu počtu sebraných položek jídla. Ukážeme si použití dalšího Content Manageru v této komponentě.
8. díl – Komponenty v XNA 2/2, vykreslování textu
Dokončíme si naši komponentu Score. Ukážeme si, jak se v XNA pracuje s textem, jak změnit velikost písma, nebo styl. Povíme si, co je potřeba udělat, aby se nám správně vykreslovaly české znaky. Naši komponentu si ve třídě Game1 zaregistrujeme a otestujeme si její funkčnost.
9. díl – Přidávání dalších dílků k ocasu, následování cesty 1/2
V tomto díle si popíšeme, jak přidávat další dílky k ocasu, aby mířily na správnou stranu. Připravíme si strukturu pro ukládání cesty, kudy had jel. Tuto cestu potom budou následovat dílky ocasu.
10. díl – Ocas – následování cesty 2/2
Dokončíme si implementaci cesty, po které budou následovat dílky ocasu. Popíšeme si metodu, která vrací pozici v případě zadané vzdálenosti od hlavy. Budeme to dělat tak, aby cesta mohla projíždět i stěnami. Nakonec si ošetříme kolize hlavy s ocasem a ukážeme si, jak si můžeme jednoduše spustit novou hru.
Microsoft MVP v kategorii XNA/DirectX a Microsoft Student partner. Absolvent Bc. studia na MFF UK, nyní student počítačové grafiky na ČVUT FEL. Věnuji se vývoji v XNA a pro Windows Phone. Zajímám se o návrh her a další multimediální tvorbu. Autor her HexaLines, Glow Arkanoid a dalších. Ve volném čase si rád najdu čas na in-line brusle, nebo další zajímavé aktivity. Můj Twitter: @tomasslavicek - Kontakt: mail(zav.)tomasslavicek(teč.)cz
Source
Datum: 5.5.2011 15:53
Autor: neregistrovaný (212.158.155.12)
Hodnocení autora: není
Příspěvků: 0
Zdravím. Super série :-) Už dlouho jsem na nic podobného nenarazil :-) Díky za tuto sérii :-)
P.S.: Bylo by možné si někde stáhnout kompletní zdrojové kódy?
Dotaz
Datum: 4.5.2013 12:51
Autor: neregistrovaný (85.132.190.213)
Hodnocení autora: není
Příspěvků: 0
Dobrý den, jmenuji se Ant. Šrajer a spolu se synem jsme autoři deskové hry Arrivée. Rádi bychom s Vámi navázali spolupráci, které ale samozřejmě musí předcházet vzájemná dohoda a vysvětlení představy. Můžete se s námi spojit na e-mailu: tonygames@seznam.cz ? Děkujeme moc. Šrajer
Otázka
Datum: 19.5.2011 0:21
Autor: neregistrovaný (87.197.139.119)
Hodnocení autora: není
Příspěvků: 0
Tutoriáy som si zatiaľ len prešiel ,ale pozdávajú sa mi :-) Viac napíšem až keď ich celé pozriem . Len s jeden veci som sklamaný . Bolo písane ,že hra bude aj pre mobily (OS WP7) . Prosím ťa ,prečo nie je ? Alebo bude ?
Re: Otázka
Datum: 19.5.2011 20:34
Autor: neregistrovaný (87.197.139.119)
Hodnocení autora: není
Příspěvků: 0
Držím palce ,aby ti to vyšlo :-) A ak by si mohol ,prosím sprav aj tie videa na Windows Phone 7 (myslím toho hada) . To asi nebudú také veľké zmeny a ty to určite hravo zvládneš . Určite by to mnohý ocenili ,keby spravíš aj pre WP7 .
Re: Otázka
Datum: 20.7.2011 17:11
Autor: neregistrovaný (92.62.224.12)
Hodnocení autora: není
Příspěvků: 0
Zdravim, zajimalo by mě, jak to aktualně vypadá s tím webem o XNA, o kterem jste se zminoval v clanku, dekuji.
Re: Otázka
Datum: 21.7.2011 10:43
Autor: neregistrovaný (92.62.224.12)
Hodnocení autora: není
Příspěvků: 0
To samozřejmě chápu :-) Díky za rychlou odpověd :-) Už se teším...
Logická hra - XNA || normální aplikace?
Datum: 26.7.2011 17:09
Autor: neregistrovaný (92.62.224.13)
Hodnocení autora: není
Příspěvků: 0
Zdravím, předně díky za krásné návody.
Zadruhé bych se chtěl zeptat. Mám v hlavě nápad na jednodochou 2D hru ovládanou podobně jako např. hledáni min. Prostě relativně statické, jen pár animací apod. Má to podle Vás smysl dělat přes XNA nebo je to lepší naroubovat jako normální aplikaci jen s použitím základních .NET SL knihoven?
Re: Logická hra - XNA || normální aplikace?
Datum: 5.8.2011 19:57
Autor: neregistrovaný (92.62.224.13)
Hodnocení autora: není
Příspěvků: 0
Cílová platforma WP7 popř web. Šlo mi spíše o to, jestli má smysl dělat jednoduchou logickou hru nezávislou na soustavném updatování a vykreslování pomocí XNA a není jí lepší udělat jako klasickou aplikaci s využitím klasických SL komponent.
Více méně u takových šachů (podobný styl ovládání) by podle Vás bylo lepší použít akcelerované XNA (kvůli lepší práci s vektory) nebo klasické SL komponenty. (např. "šachvnice" z klikatelných pictureboxů)
//strukturální rozdíl samozřejmě chápu
Díky moc.
Re: Logická hra - XNA || normální aplikace?
Datum: 5.8.2011 22:12
Autor: neregistrovaný (92.62.224.13)
Hodnocení autora: není
Příspěvků: 0
WP7 - hra
Datum: 9.8.2011 18:53
Autor: neregistrovaný (92.62.224.13)
Hodnocení autora: není
Příspěvků: 0
Zdravím, pomocí jakých prvků byste vykresloval herní pole (např. šachovnici nebo podobné) v normální WP7 aplikaci. Jediné co zvládá obrázky je image a ten zase nemá event clicked.
Re: WP7 - hra
Datum: 9.8.2011 18:55
Autor: neregistrovaný (92.62.224.13)
Hodnocení autora: není
Příspěvků: 0
Stejně tak ani rectangle a pomocí buttonů mi to přijde trochu zbytečné.
Hodnocení a zdrojáky
Datum: 29.8.2011 20:09
Autor: neregistrovaný (86.63.214.121)
Hodnocení autora: není
Příspěvků: 0
Dobrý den,
návod je pěknej, ale drobnej nedostatek vidim v tom, že tento tutoriál je spíše návodem na hru, než na popis a používání XNA. Většina kódu je spíše logika pohybu, než používání XNA. To je vidět i na počtu shlédnutí videí na youtube kde první má přes 600 a 9.díl kolem 110, takže ne každému se chce opisovat mnoho řádků kódu.
Každopádně děkuji za tutorial, těším se na stránky o XNA a kdyby někdo chtěl zdrojové kódy, tak mi napište na amdalifuk{na}gmail<tecka>com Alifuk
Re: Hodnocení a zdrojáky
Datum: 5.10.2011 11:08
Autor: neregistrovaný (193.86.114.222)
Hodnocení autora: není
Příspěvků: 0
Ani me se nechce opisovat tuny radku kodu. Ale me jde prevazne o to podivat se na moznosti XNA a jak se s tim zhruba pracuje. Tohle ma byt uvod do XNA. Clovek se ma zamyslet a vymyslet dalsi reseni, pripadne upravovat a nejen opisovat opisovat. Programovani je o psani stovek radku kodu, takze kdyz se vam to nechce opisovat zhlednete to, znate uvodni moznosti XNA a vmyslete si to po svem :)
snake
Datum: 27.10.2011 7:33
Autor: neregistrovaný (46.13.106.29)
Hodnocení autora: není
Příspěvků: 0
ahoj mám takový problém :spriteBatch.Draw(Texture, Rectangle, Color);
v tomto mi to hází chybu ... podtrhává to ;
Begin must be called successfully before a Draw can be called.
Prosím poraďte
mooc
Datum: 27.10.2011 16:32
Autor: neregistrovaný (46.13.106.29)
Hodnocení autora: není
Příspěvků: 0
moooocik díky :) zapoměl jsem na to .)
mooc
Datum: 27.10.2011 16:32
Autor: neregistrovaný (46.13.106.29)
Hodnocení autora: není
Příspěvků: 0
moooocik díky :) zapoměl jsem na to .)
Kolize Wall x Wall
Datum: 4.1.2012 16:29
Autor: neregistrovaný (85.71.100.142)
Hodnocení autora: není
Příspěvků: 0
Zdravim, jak zamezim když vygeneruji stěny, aby se nestalo že se budou překrývat ?
Levels
Datum: 4.1.2012 17:44
Autor: neregistrovaný (85.71.100.142)
Hodnocení autora: není
Příspěvků: 0
Díky :) A nyní jak mohu vytvořit další Levely ?
Udělal jsem podmínku, že pokud je score větší než 9, nastaví se level 2
a pod to jsem udělal podmínku, že pokud je level 2, a je zmáčknutý Enter, nastaví se parametry podobně jako u endOfGame, a změní se rychlost hada. Ale bohužel had má 2 hlavy.
Re: Levels
Datum: 4.1.2012 17:50
Autor: neregistrovaný (85.71.100.142)
Hodnocení autora: není
Příspěvků: 0
Vyřešeno, zapomněl jsem že když, napíšu příkaz this.LoadContent();
Že se načte celý obsah...
Generování pozice, od minulého přidáni
Datum: 5.1.2012 19:40
Autor: neregistrovaný (85.71.100.142)
Hodnocení autora: není
Příspěvků: 0
Ještě bych měl dotaz, jak udělám abych každé zdi nastavil pozici, kde se objeví ?
Dík
Datum: 5.2.2012 19:15
Autor: neregistrovaný (90.177.205.252)
Hodnocení autora: není
Příspěvků: 0
Díky moc, přesně takovýhle návod jsem hledal. :)
Další...
Datum: 17.3.2012 10:58
Autor: neregistrovaný (109.80.167.98)
Hodnocení autora: není
Příspěvků: 0
Zdravím,
plánujete další návody ohledně programování v XNA? Tato série s mi zdá jako spíš návod na tvorbu určité hry, ale myslím že by se tu hodil nějaký návod či seznam nejčastěji používaných funkcí a jejich český přehledný překlad ;)
Mates
Datum: 17.4.2012 16:12
Autor: neregistrovaný (90.176.181.194)
Hodnocení autora: není
Příspěvků: 0
Dobrý den
Chtěl bych se zeptat jak by se to dokončené hry dal vložit text který by buď byl načasován že jak by zmizel tak by se spustila hra, nebo po odkliknutí klávesy. Třeba jako na začátku hry: čím se to ovládá atd... a na konci: třeba text prohrál jsi, nebo postupuješ do dalšího levelu.
Díky
Menu a tlačítka
Datum: 17.5.2012 15:58
Autor: neregistrovaný (89.102.140.57)
Hodnocení autora: není
Příspěvků: 0
Zdravím,
návody jsou pěkné a jsou dobře vysvětleny. Já bych ale chtěl do hr přidat ještě menu nebo různá tlačítka například pro přechod do dalšího levelu (kliknu a jsem v dalším levelu). Bohužel nevím jak na to. V XNA nejsou jednotlivé objekty (panely, tlačítka ...), jako je tomu u C#. Potřeboval bych prosím poradit, jak nějaké jednoduché tlačítko naprogramovat a přidat mu nějaké události.
A ještě se chci závěrem zeptat, zda je lepší dělat menu hry na začátku vytváření hry nebo až na konci.
Error
Datum: 29.5.2012 6:51
Autor: neregistrovaný (94.113.176.60)
Hodnocení autora: není
Příspěvků: 0
Čau ve string.cs mi to hazí error tady:public Sprite(Texture2D texture, Rectangle rectangle, Color color) . Přesněji u slova "Sprite" . S timto textem - method must have a return type. Poradíte co mám dělat díky.
Chyba v tutoriálu?
Datum: 3.7.2012 2:32
Autor: neregistrovaný (83.240.81.40)
Hodnocení autora: není
Příspěvků: 0
Ve třetím díle - metoda Draw třídy Sprite vykresluje sprite pomocí veřejného atributu Rectangle:
spriteBatch.Draw(Texture, Rectangle, Color);
ale ve čtvtém díle v metodě Update třídy Game1 přepisujete pouze veřejný atribut Position objektu Sprite.
K žádnému viditelnému pohybu tedy nedojde.
c++
Datum: 29.10.2012 15:59
Autor: neregistrovaný (188.167.23.195)
Hodnocení autora: není
Příspěvků: 0
hej tomasi kde se da stahnout c++?
Super
Datum: 10.4.2013 21:13
Autor: neregistrovaný (94.230.150.5)
Hodnocení autora: není
Příspěvků: 0
Super, ted jeste neco dalsiho. ;)
Treba "Space invaders"
Dotaz na spolupráci
Datum: 4.5.2013 12:52
Autor: neregistrovaný (85.132.190.213)
Hodnocení autora: není
Příspěvků: 0
Dobrý den, jmenuji se Ant. Šrajer a spolu se synem jsme autoři deskové hry Arrivée. Rádi bychom s Vámi navázali spolupráci, které ale samozřejmě musí předcházet vzájemná dohoda a vysvětlení představy. Můžete se s námi spojit na e-mailu: tonygames@seznam.cz ? Děkujeme moc. Šrajer