flash 5: Škola hrou IV - Grafika.cz - vše o počítačové grafice

2. října 2002, 00.00 | V dnešním díle si zahrajeme proti počítači, naučíme se vytvářet preloader a zároveň hru dokončíme.

Obdržel jsem několik e-mailů s dotazy na možnost jízdy s oponentem, něco se objevilo také v minulé diskusi, takže to bude dnešním tématem č. 1. Kromě toho se seznámíme s funkcí preloaderu a způsobem jeho tvorby. Začátečníkům doporučuji prostudovat 1. díl, kde se dozvíte základy pro tvorbu flashových prezentací.

Preloader má funkci především informační – informuje diváka o stavu načítání flashové ukázky. Formu může mít jakoukoli, v naší ukázce uvidíte jednoduchou grafickou i textovou podobu této informace. Přesněji řečeno jste ji měli možnost vidět, protože v této chvíli je již ukázka načtena a vy máte možnost zahájit hru.

rally6.fla

Frame 1 ovládá celý preloader:

if (_root._framesloaded >= _root._totalframes) {
tl._visible=1;
stop ();
} else {
tl._visible=0;
done = (_root.getBytesLoaded()/_root.getBytesTotal())*100;
stazeno = Math.ceil(done)+"%";
rucicka._rotation = -120+done*2.4;
}

Je-li splněna podmínka načtení všech snímků, zobrazí se pomocí tl._visible=1 objekt tl, ve kterém je jednoduché tlačítko pro zahájení jízdy. V opačném případě je do dynamického textového pole s názvem stazeno zapsána informace o průběhu stahování. Tato informace je pomocí Math.ceil zaokrouhlena na nejbližší celé číslo nahoru (ceiling = strop).

_root.getBytesLoaded() obsahuje informaci o množství načtených dat
_root.getBytesTotal() obsahuje informaci o celkové velikosti prezentace

Objekt rucicka je přinucen se otáčet podle zjištěného stavu načtení, tedy každým procentem o 2,4 stupně. Pro Výchozí pozici je ručička pootočena o 120 stupňů zpět (rucicka._rotation = -120+done*2.4;).

Při vytváření preloaderů je můžete testovat pomocí CTRL+ENTER a znovu CTRL+ENTER. V menu DEBUG máte možnost měnit rychlost připojení pro testovací účely.

Frame 5 zajistí odpočet před startem a vypadá takto:

go = Math.round((odpocet-getTimer())/1000);
if (go>0) {
way._x=wx;
way._y=wy;
way.spd=0;
car1._x=cx;
car1._y=cy;
car1.spd=0;
gotoAndPlay (4);
}

Do dynamického textového pole go se zapíše údaj o počtu vteřin před startem. Využití getTimer() pro měření času jsme si popsali v minulém díle. Abychom zamezili "ulití" startu, budeme pozice aut fixovat podle proměnných wx, wy, cx, cy. Jejich hodnoty jsme zjistili na frame 3.

MC car1 při své jízdě sleduje MC vodic1. Jede neustále na plný plyn směrem k tomuto MC. Vodic1 se ale dojet nenechá – pohybuje se ve směru MC bod1 maximální rychlostí. Jakmile dorazí k MC bod1, čeká na dojetí auta. Celý způsob jízdy snadno pochopíte po zviditelnění MC vodic1 a bod1 – stiskněte tlačítko v levém dolním rohu scény.

Možná si řeknete, proč je tam ten malý žlutý vodic1? Bez něj by auto také jelo ve stanoveném směru, ale při projetí červeným bodem by se natočilo ve směru dalšího červeného bodu okamžitě.

Jak tedy vypadá script pro ovládání jízdy oponenta? Je umístěn přímo na MC car1, toto je jeho hlavní část:

1.    spd += 0.9;
2.    dirV = Math.atan2(_root.vodic1._y-_root.bod1.vod._y-_root.way._y, _root.vodic1._x-_root.bod1.vod._x-_root.way._x)*180/Math.PI+90;
3.    dirVX = Math.sin((Math.PI/180)*dirV)*spd;
4.    dirVY = Math.cos((Math.PI/180)*dirV)*spd;
5.    _root.vodic1._x -= dirVX-_root.way.wayX;
6.    _root.vodic1._y += dirVY-_root.way.wayY;
7.    dir = Math.atan2(this._y-_root.vodic1._y, this._x-_root.vodic1._x)*180/Math.PI+90;
8.    dirX = Math.sin((Math.PI/180)*dir)*spd;
9.    dirY = Math.cos((Math.PI/180)*dir)*spd;
10.  wayX += (dirX-wayX)/spd/tire;
11.  wayY += (dirY-wayY)/spd/tire;
12.  this._x -= wayX-_root.way.wayX;
13.  this._y += wayY-_root.way.wayY;
14.  this._rotation = dir;
15  _root.way.hitTest(this._x, this._y, 1) ? spd /= mspd : spd /= 1.4;

Nevypadá to skvěle? Já vím, nevypadá... Pro přehlednost jsem řádky očísloval.

1.    zvýší proměnnou spd o 0.9
2.    vypočte úhel MC vodic1 k bod1 a uloží do proměnné dirV
3.    určí změnu souřadnic na ose x v závislosti na směru dirV a rychlosti
4.    určí změnu souřadnic na ose y v závislosti na směru dirV a rychlosti
5.+6. změní pozici MC vodic1 podle výpočtu na řádcích 3 a 4 a podle pohybu trati samé, která se hýbe na pozadí podle jízdy mého auta
7.    vypočte úhel MC car1 k vodic1 a uloží do proměnné dir
8.    určí změnu souřadnic na ose x v závislosti na směru dir a rychlosti
9.    určí změnu souřadnic na ose y v závislosti na směru dir a rychlosti
řádky 10 a 11 jsou nutné pro vytvoření smyku
12.+13. změní pozici MC car1 podle výpočtu na řádcích 8 až 11 a podle pohybu trati, která se hýbe na pozadí podle jízdy mého auta
14.  natočení auta ve směru k MC vodic1
15.  v tom písku to vůbec nejede...

To je vše přátelé. Omlouvám se za své grafické nadání, snad vám prožité trauma vynahradily použité scripty :). Příště už se k té střílečce jistě dostaneme. Máte-li jakékoli nejasnosti nebo návrhy – využijte diskusi pod článkem.