Jak na framovou animaci v UWP (univerzálních aplikací) pomocí XAML + C#? Zde najdete postup, jak si vytvořit kkomponentu která zvládne nejen to, ale i další typy animací a bude možné ji použít i pro tvorbu herního světa skládáním ze spritů, ať již statických či animovaných.

1. Úvod

Animace založená na rychlém střídání jednotlivých obrázků je podstatou filmové technologie.

XAML umožňuje animace objektů i obrázků na základě plynulé změny hodnot určitých vlastností či transformací (např. úhel otočení, změnu měřítka, posun apod.) prostřednictvím třídy Storyboard, DoubleAnimation a dalších. Ta však nedokáže postihnout případy, kdy se v rámci animace mění obsah obrázku samotného. V těchto případech, chceme-li setrvat u 2D, je zatím stále nejefektivnější všechny tyto proměny nakreslit (ať již ručně, v grafickém editoru nebo pomocí 3D animace) jako jednotlivé obrázky a ty pak rychle za sebou střídat jako u animovaného filmu, aby vznikl dojem pohybu, který má objekt v dané situaci představovat.

Bývá zvykem, tyto jednotlivé obrázky (sprity, u animace pak framy) neukládat jako samostatné soubory, ale poskládat je do jednoho velkého obrázku (sprite sheet) vedle sebe a následně zobrazovat pouze jeho výřezy obsahující právě tyto jednotlivé malé obrázky. Do jednoho obrázku je přitom možné vměstnat ne jen jednu animaci, ale mnoho animací a stejný postup se používá i v případě, že tyto sprity jsou statické, tj. jedno obrázkové bez animace (viz např. tento článek). Tento postup je výhodný z několika důvodů:

• opakovatelnost použití
  • jednotlivé sprity se mohou na obrazovce v různých kombinacích opakovat, navazovat na sebe nebo se překrývat a vytvářet tak dojem rozsáhlého obrazu či herního světa
  • každému políčku (spritu) lze přiřadit i určité vlastnosti, které se pak opakovaně používají všude kde je vykreslen
  • mapy takovýchto světů pak lze definovat jednoduchými textovými či binárními zápisy, čímž je vytvořeno mnohem více oblastí či úrovní každé hry s týmiž sprite sheety
• úspora paměti
  • do paměti stačí načíst jeden či jen několik málo obrázků
  • opakovaně se pak používá pouze reference na tento jeden načtený sprite sheet obrázek a více jeho instancí se nevytváří
• rychlost
  • zaměnit výřez v rámci jednoho obrázku je při správném použití rychlejší, než vyměnit celý obrázek
  • určité technologie, jak SW tak HW, s tímto postupem počítají a výkonnostně jej podporují
  • pokud jsou zdroje stahovány z internetu, tak jeden větší soubor se stáhne rychleji než mnoho malých
• skiny
  • pro změnu vzhledu celé hry stačí zaměnit jeden soubor s obrázkem
• správa
  • jeden obrázek s mnoha sprity je během tvorby programu přehlednější a snazší na údržbu než mnoho malých
  • pro generování sprite sheetu z více souborů s jednotlivými sprity existuje mnoho nástrojů

Jak již bylo zmíněno, s principem vykreslování scény pomocí spritů z jednoho zdrojového obrázku počítá hardware grafických karet i některé technologie pro tvorbu software. V základu je to samotný Direct X pro 2D hry, nad kterým pracovala například technologie XNA, jejíž podpora již bohužel byla ukončena a nahrazena DirectX projekty pro C++, nicméně díky projektu Monogame lze i na dále stejným principem psát hry v C#.

Pokud na C# trváte i v univerzálních aplikacích (UWP) pro Windows 10, nebo jen nechcete opouštět XAML, který přímou podporou tohoto typu zobrazování spritů ani jejich animování nedisponuje, může být pro vás tento návod užitečný. Obsahuje totiž podrobný postup vytvoření vlastní třídy pro XAML prvek, který bude umět zobrazovat jak jednotlivé sprity z většího obrázku, tak je i animovat rychlým přepínáním jejich jednotlivých framů.