Jak vytvořit vícestavovou animaci ve hře HTML5

Andy Harris

Když se ve hře HTML5 odehrává veškerý tento pohyb, určitě budete chtít několik sofistikovaných animací. Můžete použítchangeImage ()nebosetImage ()funkce (jsou to dvě různá jména pro stejnou věc) kdykoli změnit obrázek spojený se sprite. Někdy však chcete mnohem propracovanější animace. Podívejte se nawalkAnim.html.



image0.jpg



Probíhá zde spousta výměn obrazů. Chůze animace je ve skutečnosti série osmi různých obrazů rychle vyměnit, aby iluzi chůzi. K dispozici jsou 4 různé animace (jedna pro každý z hlavních směrů), což je celkem 32 různých obrázků. Pokud se však podíváte na kód, uvidíte, žecharaktersprite obsahuje pouze jeden obrázek.

image1.jpg



Tento obrázek je složená animace. Každý řádek představuje směr a každý řádek obsahuje cyklus nebo sérii obrázků, které se mají opakovat.

Therpg_sprite_walk.pngobrázek vytvořil Franck Dupont. Velkoryse zveřejnil tento obrázek na Stránka OpenGameArt.org , kde je známý jako Arikel. Svou práci vydal pod speciální licencí nazvanou Attribution - Share Alike. To znamená, že lidé mohou jeho dílo používat nebo remixovat zdarma, pokud mu připisují původního autora.

Obrázek na pozadí je autorem jménem Hyptosis, který na stejném webu uvolnil obrázky pod veřejnou doménou. Klíčem k prosperující kreativní komunitě jsou talentovaní a přemýšliví přispěvatelé jako Franck a Hyptosis. Neváhejte a podívejte se na otevřený herní umělecký web, kde najdete další skvělá umělecká díla, která můžete ve svých hrách použít, ale nezapomeňte poděkovat autorům a připisovat je autorům, jak si zaslouží.



ThesimpleGame.jsKnihovna obsahuje funkci pro snadné vytváření víceobrazových animací. Podívejte se na kódwalkAnim.htmlvidět, jak to funguje:

 walkAnim.html 

Chcete-li vytvořit animaci, musíte provést několik nových kroků, ale výsledky stojí za námahu.

  1. Získejte obrázek animace.

    Můžete buď vytvořit obrázek sami, nebo se podívat na vynikající zdroje, jako je OpenGameArt.org, abyste našli práci, kterou udělali ostatní. Samozřejmě máte odpovědnost respektovat práci ostatních, ale dnes je k dispozici několik skvělých prací ve velmi tolerantních licencích. Ujistěte se, že je obrázek uspořádán do řádků a sloupců a že každý dílčí obrázek má přesně stejnou velikost.

    Možná budete muset hrát s editorem obrázků, abyste se ujistili, že obrázek má správný formát a znáte velikost každého dílčího obrazu.

  2. Připojte animovaný obrázek ke svému sprite.

    Celý obrázek připojíte ke svému skřítkovi, ale pouze zobrazíte jeho malou část najednou. Je to jednodušší než pracovat s hromadou obrázků a je to také efektivnější.

  3. Vytvořte animační objekt pomocíloadAnimation ()metoda.

    alkohol z třezalky

    Když vyvoláteloadAnimation ()metoda objektu, vytváříte animační nástroj, který pomáhá spravovat animaci. První dva parametry jsou velikost celého obrázku (šířka a výška) a druhé dva parametry jsou šířka a výška každého dílčího obrázku. Pokud tyto hodnoty vyhodnotíte špatně, animace se bude posouvat. Hrajte dál, dokud nedosáhnete správných hodnot:

    character.loadAnimation(192, 128, 24, 32);
  4. Sestavte animační cykly.

    Každý řádek bude přeměněn na cyklus animace. Výchozí verze (bez jakýchkoli parametrů) funguje ve většině situací dobře. Vyhledejte v dokumentaci pokročilejší použití tohoto nástroje:

    character.generateAnimationCycles();
  5. Přejmenujte cykly.

    Animace vytvořené pomocíbuildAnimationCycles ()příkaz mají výchozí názvy, ale téměř vždy je lepší připojit vlastní, smysluplnější jména. Přidejte pole s názvem označujícím, co každý řádek představuje:

    character.renameCycles(new Array('down', 'up', 'left', 'right'));
  6. Nastavte rychlost animace.

    Rychlost animace označuje, jak rychle animace poběží. Hodnota 500 se zdá být pro většinu aplikací správná, ale tuto hodnotu můžete upravit tak, aby procházkový cyklus postavy vypadal, jako by tuto postavu skutečně poháněl:

    character.setAnimationSpeed(500);
  7. Nastavte, který cyklus chcete zobrazit.

    ThesetCurrentCycle ()Metoda umožňuje vybrat cyklus s jedním ze jmen, které jste uvedli vrenameAnimationCycles ()krok:

    character.setCurrentCycle('down');
  8. PoužijtepauseAnimation ()příkaz k pozastavení animace.

    ThepauseAnimation ()příkaz dočasně zastaví animaci.

  9. PoužitíplayAnimation ()zahájit animaci.

    Tato metoda bude nepřetržitě opakovat aktuální cyklus animace.

Jak vidíte, animace přináší hraní her obrovskou zábavu a otevírá vašemu repertoáru celou říši her na hrdiny.