Programování her v XNA – série webcastů

Tomáš Slavíček       2. 5. 2011       C#, Visual Studio, Grafika       5565 zobrazení

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.

had banner3

 

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.

 

hodnocení článku

2 bodů / 2 hlasů       Hodnotit mohou jen registrované uživatelé.

 

Nový příspěvek

 

Diskuse: Programování her v XNA – série webcastů

Super, ted jeste neco dalsiho. ;)

Treba "Space invaders"

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Jak si udělat střílecí hru s raketkou jsem popisoval například v tomhle seriálu: http://smartmania.cz/clanky/vyvijime-pro...

Část jsem nahrával i na video, viz díly 2 až 7 tady: http://www.youtube.com/playlist?list=PLD...

Odkaz na všechny moje články o XNA: http://smartmania.cz/forum/viewtopic.php...

Také doporučuji seriály o vývoji her na stránkách devbook.cz: http://www.devbook.cz/c-sharp-xna-game-s...

nahlásit spamnahlásit spam 0 odpovědětodpovědět

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

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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?

nahlásit spamnahlásit spam 2 / 2 odpovědětodpovědět

Kompletní zdrojové kódy sem zatím k dispozici dávat nebudu, možná někdy později. Tutoriál si alespoň prakticky vyzkouší více lidí. Připomínám, že ale návod není striktní, mnoho částí hry si můžete upravit po svém, případně doplnit a vylepšit. Je tam mnoho prostoru pro kreativitu.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Na úvodu jste psal, že budete s panem Hercegem a panem Pazderkou dělat webovou stránku o XNA Frameworku.Také jste napsal, že se spuštění opozdí, mohu se zeptat, jesli alespoň zhruba víte, kdy bude web v provozu ?

Já osobně totiž žádný český web o XNA snad neviděl, takže stránky budou určitě velkým přínosem...

nahlásit spamnahlásit spam 0 odpovědětodpovědět

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

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

hej tomasi kde se da stahnout c++?

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

Č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.

nahlásit spamnahlásit spam 2 / 2 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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.

nahlásit spamnahlásit spam 2 / 2 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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 ;)

nahlásit spamnahlásit spam 2 / 2 odpovědětodpovědět

Jojo, plánuji natočit některé praktické hands-on-laby, co budu mít o XNA, na webu by mohly být během následujících týdnů :)

nahlásit spamnahlásit spam 2 / 2 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

Díky moc, přesně takovýhle návod jsem hledal. :)

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

Ještě bych měl dotaz, jak udělám abych každé zdi nastavil pozici, kde se objeví ?

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

Zdravim, jak zamezim když vygeneruji stěny, aby se nestalo že se budou překrývat ?

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Zdravím, při generování nové stěny si můžete projít všechny už vygenerované a posoudit, zda s touto novou stěnou nekolidují - příkazem Rectangle.Intersect(obdelnik1, obdelnik2); Pokud vám tato metoda vrátí true, můžete si zkusit vygenerovat jinou pozici a případně znovu ověřit tuhle podmínku.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

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.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Vyřešeno, zapomněl jsem že když, napíšu příkaz this.LoadContent();

Že se načte celý obsah...

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

moooocik díky :) zapoměl jsem na to .)

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

moooocik díky :) zapoměl jsem na to .)

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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

nahlásit spamnahlásit spam 0 odpovědětodpovědět
'před to musíte napsat
spriteBatch.Begin;
'pak všechno vykreslování
spriteBatch.Draw(Texture, Rectangle, Color);
'a nakonec
spriteBatch.End;
nahlásit spamnahlásit spam 0 odpovědětodpovědět

Jojo, tohle je docela častá chyba. Zkontrolujte si, že volání spriteBatch.Begin() máte v celé metodě Draw() jen jednou (a máte ho na začátku), stejně tak že volání spriteBatch.End() zde máte jen jednou (někde na konci). Všechny volání spriteBatch.Draw() potom musí být mezi těmito příkazy .Begin() a .End().

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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

nahlásit spamnahlásit spam 0 odpovědětodpovědět

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 :)

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Stejně tak ani rectangle a pomocí buttonů mi to přijde trochu zbytečné.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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?

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Cílem by měla být hra pro počítač a nebo pro telefony s Windows Phone 7? Použít se dají obě technologie, každá má své výhody a nevýhody. V XNA máte k dispozici připravenou herní smyčku a další funkce hodící se ke tvorbě her (např. pro práci s vektory apod.). Obecně v XNA se dají dělat i trochu složitější hry, protože je to vlastně jen "obálka" okolo DirectX, můžete si tam dovolit hodně.

Jednoduchá hra by se dala ale vytvořit i v Silverlightu. Ten se od XNA hlavně liší koncepčně (oddělením vzhledu v jazyce XAML od logiky aplikace, využíváním vektorové grafiky apod.), takže může záležet i na tom, která technologie vám víc bude vyhovovat. V Silverlightu bude také jednodušší vytvořit různá tlačítka, nastavovátka, dialogy apod., ty byste si musel v XNA napsat sám.

Mimochodem, jako jedna z vývojářských novinek Windows Phone 7 aktualizace Mango, přibyla možnost propojování Silverlightu a XNA. Viděl jsem myslím demíčko, jak jim běžela 3D grafika i na webu. U desktopových aplikací by to mohlo být také možné takhle pohodlně propojovat.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

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.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Tohle by se asi dělalo lépe a rychleji v Silverlightu, můžete to zkusit. Ale myslím, že je to opravdu hlavně o osobních preferencích. Já bych šel asi do XNA, protože ho znám lépe a nějaké komponenty atd. už v něm mám napsané.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Chápu, díky za odpověď.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

Dokončil jsem 6. díl, a pokaždé, když hru spustím, had bliká. Když projede spodem obrazovky a objeví se nahoře, blikat přestane, ale taky přestane sbírat jídlo. Může mi někdo poradit?

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Chtělo by to ten zdrojový kód, jinak si nemám podle čeho ověřit, kde dělám chybu. podle videa jsem kód prošel znovu a i po 10 díle je chyba pořád stejná.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Programování her v XNA – série webcastů

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 ?

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Nejde všechno udělat najednou, v budoucnu další díly možná doplním. Jak si tuhle hru upravit pro WP7 jsem ale v krátkosti popisoval před několika týdny v Praze na přednášce, na slajdy se můžete podívat tady: http://jdem.cz/mfqj3

Tuhle přednášku, v trochu upravené formě, bych si chtěl ještě někdy zopakovat, možná i v dalších městech. O Windows Phone 7 mám v přípravě také několik článků, v nejbližší době se k nim ale nejspíš nedostanu (začíná mi teď zkouškové období, dokončuji bakalářku a připravuji se na státnice).

nahlásit spamnahlásit spam 0 odpovědětodpovědět

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 .

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Zdravim, zajimalo by mě, jak to aktualně vypadá s tím webem o XNA, o kterem jste se zminoval v clanku, dekuji.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Web máme v přípravě, ale ještě to chvíli potrvá. Design je hotový, redakční systém připravený, ale spolupracujeme na něm tři lidé, volného času je málo. Ještě chvilku vyčkejte :)

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

To samozřejmě chápu :-) Díky za rychlou odpověd :-) Už se teším...

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět
                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback