Umíme ve Flashi – 22. díl – hra 4. díl

V dnešním díle oživíme našeho hrdinu, ze kterého se tak stane opravdová chodicí figurka. Navíc také přidáme nové objekty pro snižování a zvyšování počtu životů na hráčově kontě.

Animace figurky

Dosud byla naše figurka pouze statickým objektem, který nijak nereagoval na pohyb nebo jiné akce. Pouze jsme jím pohybovali po scéně, nic víc. Ovšem s tímto se dnes asi těžko prosadíme, a proto upravíme figurku tak, aby doopravdy kráčela podle směru pohybu.

Celkové řešení je velmi jednoduché. Nyní je figurka vložena do symbolu „objekt“. V MC s figurkou pak přidáme dalších několik snímků, kde v každém snímku bude vždy jedna animace pohybující se figurky. Podle právě stisknutého tlačítka pro pohyb se budeme přesouvat po snímcích s jednotlivými animacemi figurky v MC „objekt“.

Pokud chceme, můžeme použít figurku z minulé lekce, ale nic nám nebrání ve vytvoření vlastní figurky, záleží na nás. Nejdříve si ale otevřeme zdrojový soubor z předchozího dílu, který si můžeme stáhnout i zde.

Otevřeme MC s vloženou figurkou a vytvoříme v něm 6 dalších klíčových snímků, do kterých postupně umístíme MC s animacemi, které budou představovat figurku v různých druzích pohybu. Celkem tedy budeme mít v tomto MC 7 klíčových snímků a v každém bude jiný MC s animací figurky. Vedle vrstvy s animacemi zde budeme mít i vrstvu pro ActionScript, i když v tomto případě se bude jednat o velmi jednoduchý příkaz stop();. Vytvoříme tedy další vrstvu, ve které převedeme prvních 7 snímků na klíčové a do každého snímku připíšeme akci „stop();“ a dále na panelu vlastností pojmenujeme každý snímek názvy: „stat, leva, prava, skok, skokleva, skokprava, smrt“.

Na tyto jména se pak budeme později odkazovat při stisknutí určitých kláves pro pohyb. Z názvů je dostatečně patrné, co v kterém klíčovém snímku má být za animaci. K již vytvořeným dvěma vrstvám ještě vytvoříme třetí, která bude sloužit jako neviditelné ohraničení celé figurky.

Vložíme třetí vrstvu a vytvoříme v ní obdélník bez výplně s průhledným okrajem. Velikost obdélníku bude přesně ohraničovat rozměry figurky v poloze „stat“.

Klepněte pro větší obrázek

Takto by měla vypadat časová osa v MC „objekt“

Důvod, proč jsme použili pouze průhledné ohraničení bez výplně je zřejmý. Pokud pohybujeme s velkými průhlednými plochami, flashplayer se pořádně zapotí. Tímto snížíme zatížení procesoru. Samotné ohraničení je důležité pro správnou detekci kolizí s ostatními objekty.

Nyní se přesuneme na hlavní scénu a objekt podlahy převedeme na MC, jehož instanci nezapomeneme pojmenovat „scena“. Jak bylo v úvodu naznačeno, chceme na scénu přidat objekty, které budou ubírat a přidávat životy figurce. Abychom nemuseli používat funkci na každý objekt zvlášť, vložíme všechny objekty společně s objektem podlahy do jednoho MC, zde to bude „scena“.

Úprava ActionScriptu

Ovšem pokud jsme provedli přesun objektu podlahy do nového objektu „scena“, musíme změnit funkci pro detekci kolize panáčka a podlahy. Jedná se funkce události „onEnterFrame“, které jsme měli přiřazené k MC „podl“. Upravená událost bude vypadat následovně:

zivotu = 30;
scena.podl.onEnterFrame = function() {
 if (zivotu<0) {
  if (konec!=true) {
   obj.gotoAndStop("smrt");
   zivoty.text = "Konec hry";
   konec = true;
  }
 } else {
  zivoty.text = "Celkový počet životů:"+zivotu;
  if ((obj._x-obj._width/2)<0 && scena._x<-1*sirkaSceny/2) {
   posunSceny(scena, sirkaSceny/2);
   posunSceny(obj, sirkaSceny/2);
  } else if ((obj._x+obj._width*1.5)>sirkaSceny && (scena._x+scena.podl._width)>sirkaSceny*1.5) {
   posunSceny(scena, -1*sirkaSceny/2);
   posunSceny(obj, -1*sirkaSceny/2);
  }
  if (posunStart != true) {
   if (Key.isDown(Key.LEFT) && Key.isDown(Key.DOWN)) {
    _root.test_hit(scena.podl, obj, -1, 1);
    obj.gotoAndStop("stat");
   } else if (Key.isDown(Key.LEFT) && Key.isDown(Key.UP)) {
    _root.test_hit(scena.podl, obj, -1, -1);
    obj.gotoAndStop("skokleva");
   } else if (Key.isDown(Key.RIGHT) && Key.isDown(Key.DOWN)) {
    _root.test_hit(scena.podl, obj, 1, 1);
    obj.gotoAndStop("stat");
   } else if (Key.isDown(Key.RIGHT) && Key.isDown(Key.UP)) {
    _root.test_hit(scena.podl, obj, +1, -1);
    obj.gotoAndStop("skokprava");
   } else if (Key.isDown(Key.RIGHT)) {
    _root.test_hit(scena.podl, obj, 1, 0);
    obj.gotoAndStop("prava");
   } else if (Key.isDown(Key.LEFT)) {
    _root.test_hit(scena.podl, obj, -1, 0);
    obj.gotoAndStop("leva");
   } else if (Key.isDown(Key.UP)) {
    _root.test_hit(scena.podl, obj, 0, -1);
    obj.gotoAndStop("skok");
   } else {
    _root.test_hit(this, obj, 0, 1);
   }
  }
 }
};

Jak je patrné, k instanci „podl“ přibyla další „scene“. Než ale událost spustíme, nastavíme počáteční hodnotu životů na 30. K funkcím události jsme přidali detekcí zbývajících životů. Pokud je hodnota menší než 0, přesuneme se v MC s figurkou na snímek, kde máme animaci skonání našeho človíčka.

Pokud je pořád dostatečný počet životů, vložíme jejich počet do dynamického textového pole „zivoty“. Pokud jsme toto pole dosud nevytvořili, nyní je ta správní chvíle. Zbytek funkcí v události „onEnterFrame“ je upravený pouze přidáním odskoku na příslušný snímek s animací v MC s figurkou.

Druhou funkcí, která potřebuje úpravu je „test_hit“. Pokud posunujeme figurkou vlevo nebo vpravo a ta se dostane za hranu podlahy, může pořád pokračovat dál, nespadne dolů. Tomu zabráníme touto úpravou:

test_hit = function (ref_obj_3:Object, test_obj_3:Object, p_x:Number, p_y:Number) {
 if (skok) {
  posuv += subSkok;
  if (posuv>maxSkok) {
   skok = false;
   pad = true;
   posuv = p1;
   p_y = 1;
  }
 }
 if (pad) {
  p_y = 1;
  posuv += subSkok;
 }
 test = fut_hit(ref_obj_3, test_obj_3, p_x*posuv, p_y*posuv);
 test2 = fut_hit(ref_obj_3, test_obj_3, p_x*posuv, 2*posuv);
 if (test.cast == "nic") {
  trace("nic");
  if (test2.cast == "nic" && skok != true) {
   test_obj_3._y += posuv;
  } else {
   test_obj_3._y += p_y*posuv;
   test_obj_3._x += p_x*posuv;
  }
 } else {
  skace = false;
  if (skok) {
   skok = false;
   posuv = p1;
   pad = true;
   p_y = 1;
  }
  if (pad) {
   pad = false;
   posuv = p1;
  }
  tx = 1;
  test2 = fut_hit(ref_obj_3, test_obj_3, p_x*tx, p_y*tx);
  if (test2.cast == "nic") {
   do {
    test_obj_3._x += p_x*tx;
    test_obj_3._y += p_y*tx;
    test2 = fut_hit(ref_obj_3, test_obj_3, p_x*2, p_y*2);
   } while (test2.cast == "nic");
  }
 }
};

Pokud hodnota proměnné „test.cast“ je rovna "nic", znamená to že se objekt může pohybovat, my sem doplníme ještě jednu proměnnou „test2“, která testuje přítomnou podlahy v dvojnásobné vzdálenosti hodnoty proměnné „posuv“. V případě že pod figurkou v této vzdálenosti nic není, necháme jí spadnout níž.

Jednou z posledních úprav je přidání události na MC „scena“:

onClipEvent (keyUp) {
 if (this._parent.konec != true) {
  this._parent.obj.gotoAndStop("stat");
 }
}

Tou poslední úpravou je přidání objektů, které budou ubírat a přidávat životy naší figurce. Tyto objekty umístíme v podobě MC do MC „scena“, kde jsou společně s MC podlahy. Na tyto MC můžeme na panelu akcí napsat tento skript:

onClipEvent (keyDown) {
 dotyk = _root.hit(this, this._parent._parent.obj);
 if (dotyk.cast != "nic") {
  _root.zivotu--;
 }
}

Pokud je stisknutá klávesa a tento objekt se protíná s figurkou, dojde k odečtení životů. Stejnou akci dáme i na objekty, které mají za úkol životy přidávat, pouze pozměníme odečítání životů na přičítání.

A máme hotovo, teď už jenom otestovat, výsledek by měl vypadat takto.

Pokud si nejste jistí správností svého postupu, můžete si stáhnout zdrojový soubor dnešního dílu zde.

V příštím díle oživíme nepřátele a trochu vyzbrojíme naší zatím bezbrannou figurku.

Témata článku: Software, Programování, Stat, Klíčový snímek, Elsa, Díl, Klíčová funkce, Stisknutá klávesa, Hra, Ostatní objekty

Určitě si přečtěte

Budoucností Windows 10 je Fluent Design. Takto bude jednou vypadat celý systém

Budoucností Windows 10 je Fluent Design. Takto bude jednou vypadat celý systém

** Fluent Design je vzhled, do kterého postupně Microsoft převleče celý systém ** Staví na průhlednosti a velkých plochách ** Do Windows 10 se z části dostane už zítra při vydání podzimní aktualizace

16.  10.  2017 | Stanislav Janů | 146

Velká podzimní aktualizace Windows 10 je tady: Co přináší Fall Creators Update

Velká podzimní aktualizace Windows 10 je tady: Co přináší Fall Creators Update

** Po půl roce je tu další aktualizace Windows ** A opět přináší hlavně hromadu drobných kosmetických vylepšení ** Podívali jsme se na ty nejzajímavější

Včera | Jakub Čížek | 93


Aktuální číslo časopisu Computer

Nový seriál o programování elektroniky

Otestovali jsme 17 bezdrátových sluchátek

Jak na nákup vánočních dárků ze zahraničí

4 tankové tiskárny v přímém souboji