Programování flash her – 5 – Načtení obrázků, zvuků, xml souborů…

10.1.2013 by: Aimia

Programování flash her – 5 – Načtení obrázků, zvuků, xml souborů…

Dnes popíši jak se dají načítat ve Flash Developu(Flex SDK) obrázky, zvuky a další soubory. Tyto zdroje budou zabaleny přímo do výsledného flash videa souboru.

//

Jak načítat externí zdroje

Je více způsobů jak se dá ve flashi pracovat s externími soubory. Jeden ze způsobů je mít obrázky uložené mimo .swf soubor v adresářích, online na serveru apod. a načítat je pomocí Loaderu. To je výhodné např. u mp3 přehrávačů, pokud potřebujete dynamicky načítat data(např. konfigurační xml), pokud chcete mít velikost swf souborů co nejmenší apod.

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderReady);
 
var fileRequest:URLRequest = new URLRequest("myImage.jpg");
myLoader.load(fileRequest); // začne načítat, načítá se asynchronně, proto před použitím obrázku musíte počkat na vyvolání události Event.COMPLETE
 
public function onLoaderReady(e:Event) {
    // obrázek načten, můžeme jej přidat do scény
    addChild(myLoader);
}

Já používám druhý způsob. FlexSDK umožňuje zdroje přímo „přilinkovat“ (dokonce je i zkomprimuje, takže zabírají míň místa). Většina herních portálů totiž vyžaduje jeden jediný .swf soubor, který se nahraje na server a obsahuje veškeré zdroje i kód hry.

Pozn.: Zjistil jsem že největší velikost(samozřejmě závisí od hry) většinou zabírá hudba. Flash nezkomprimuje hudbu, takže 2MB mp3 vám navýší velikost hry o 2MB. Naproti tomu png umí docela dobře zkomprimovat. Ale dejte si pozor na jpg, stalo se mi že jsem je ukládal ve kvalitě 85% a flash je ještě nějak poupravil a výsledek vypadal na jpg 60% kvality.

Pozn.2: Nejčastěji budete používat nejspíš png obrázky. Ty je dobré optimalizovat přes nějaký Png optimizer, ušetříte tím dost místa. Já používám PNG OUT

Načtení zvuků a hudby

Níže uvedeným kódem řekneme kompilátoru, že budeme někde v projektu chtít načíst click.mp3 soubor.

[Embed (source = "../res/audio/click.mp3")]        
public static const AUDIO_CLICK:Class;

Zatím jej nemáme v žádné proměnné. Přístup k tomuto zvuku získáme vytvořením objektu Sound.
Hudba i zvuky jsou ve Flashi reprezentovány objektem Sound, proto je vytvoříme takto:

var sound:Sound = new AUDIO_CLICK() as Sound;
sound.play();  // přehrajeme zvuk

Pozn: Často se mi stalo že některé zvuky nešly zkompilovat. Flex SDK hlásilo, že nemůže zvuk transkódovat. Stává se to většinou u zvuků uložených ve framerate 48kHz. Zvuk stačí přeuložit na 44kHz, např. pomocí programu Audacity

Načtení obrázků

Flash podporuje klasické grafické formáty. Celý výčet najdete v dokumentaci. Já používám buď png, pokud potřebuji průhlednost, nebo .jpg abych šetřil místem. Do Flash Developu můžete také načíst vektorovou grafiku(formát .swf)

[Embed (source="../res/gfx/bg.swf")]
public static const BG:Class;

a načtení provedeme takto(použijeme MovieClip, v případě že jde o animaci).

var bg:MovieClip = new BG() as MovieClip;

Obdobně načteme bitmapové obrázky.

[Embed (source="../res/gfx/logo.png")]
public static const LOGO:Class;
 
var logo:Bitmap = new LOGO() as Bitmap;

Už jsem to dříve zmínil, že ve svých hrách většinou používám jen bitmapy. Vectorovou grafiku jen ojediněle. Je to proto že zobrazení bitmap je rychlejší, většina grafiků dělá stejně ve Photoshopu(sehnat někoho kdo umí Flash animace je celkem problém) a hlavně mi to umožňuje mít animace pod kontrolou(flash animace se přehrávají na základě časové osy. Já ale potřeboval mít možnost animaci kdykoliv zastavit a mít navíc jistotu, že poběží správně i když fps dočasně klesne například na 15 fps). A v neposlední řadě v případě portace na jiné platformy nemusíte předělávat grafiku.

Zpracování dalších souborů

Flash umožňuje načítat také xml soubory, textové soubory a jakékoliv jiné datové soubory. Není tedy problém načítat data uložená v jiných editorech(editory map, 3D objekty apod.)

Uvedu načtení xml souboru:

[Embed(source='test.xml', mimeType="application/octet-stream")]
public static const XML:Class;
 
var ba:ByteArray = (new XML()) as ByteArray;
var s:String = ba.readUTFBytes( ba.length );
xml = new XML( s );

Závěr

Dnes jsem ukázal jak načíst do vaší hry obrázky, zvuky případně další soubory. Co bude v dalším díle ještě nevím, ale pokud máte nějaké dotazy k tomuhle dílu, komentujte.

Comments

8 komentářů to “Programování flash her – 5 – Načtení obrázků, zvuků, xml souborů…”
  1. Radim napsal:

    Už sa teším na ďalší diel.

    Díky.

  2. David napsal:

    Kdy bude další díl a kolik jich planujes ?

    • Aimia napsal:

      Dílů nemám stanovený počet, občas musím něco rozdělit atd. Dokud budu mít o čem psát tak tolik bude dílů 🙂 Další díl chci napsat co nejdřív, ale bůh ví co mi do toho zase vleze. Každopádně na to myslím takže buďte trpěliví

  3. TTom napsal:

    Jen tak dále, taky už se těším.
    Jenom by mně zajímaly nějáké základy syntaxe, co známená to void na konci ?

    • Aimia napsal:

      Ahoj, základy jsem probírat nechtěl, je toho plno na internetu. Ale popřemýšlím. Void na konci znamená že funkce nevrací žádnou hodnotu.

  4. goly_alpha napsal:

    kdy bude další díl

Leave a Reply