Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Games
Code

Herné menu a obrazovky prechody v HTML5: sprievodca pre Flash vývojári

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Shoot-'Em-Up.
Build a Stage3D Shoot-'Em-Up: Terrain, Enemy AI, and Level Data
Activetuts+ Workshop #5: Frantic 2 - Critique

Slovak (Slovenčina) translation by Jakub Dokoupil (you can also view the original English article)

HTML5 a Flash vývoj môže mať veľa spoločného, ale ako Flash developer som ešte našiel to byť monumentálne úlohu znovu naučiť moja stará zručnosti v HTML5. V tomto tutoriále, ukážem vám, ako som vytvoril animované menu a obrazovkou prechod pre HTML5 videohra.


Konečný výsledok Preview

Pozrite sa na výsledok, budeme pracovať na:

The Menu We Will Be Working Towards
Kliknite na položku vyskúšať demo

Poznámka: posúvanie pozadia, lode, ktoré sa objavujú a otočiť oboch stranách každej položky ponuky a spôsob obrazovka tmavne do čierna, keď vyberiete voľbu.


Úvod

HTML5 a JavaScript sú podobné ActionScript mnohými spôsobmi; tam je veľa prekrývanie syntax, udalosti poslucháčov a metódy. Avšak existujú niektoré veľmi výrazné rozdiely, ktoré budu kryť v tomto tutoriále:

  • Kreslenie tvarov
  • Kreslenie obrázkov
  • Pomocou intervalov
  • Oživovanie
  • Udalosti myši
  • Pridanie podpory pre niekoľko prehľadávačov

Niečo na vedomie je, že tento návod hlavne používa obrázky, ktoré možno stiahnuť so zdrojom, alebo môžete použiť vlastné obrázky, ak by ste mi prosím (budete potrebovať vedieť, výšky a šírky).


Krok 1: Nastavenie

Prvá vec, ktorú musíme urobiť, je pridať <canvas>prvkom v tele HTML súboru, takže vytvoriť jeden volal ShootEmUp.html a vložte nasledovné:</canvas>

Zvýraznené riadky vložiť prvok canvas, ktoré bude poskytovať naše aktuálne ponuky. Pozri toto tutoriál pre sprievodcu na plátne od nuly.

Je už takmer čas začať kódovanie JavaScript! Máme dve možnosti, kde môžete ísť kód; Môžu byť písané v HTML v rámci<script></script> Držať veci jednoduché bude písať nižšie uvedený kód <canvas>element.</canvas> Ale bez obáv používať externý súbor, ak dávate prednosť; len nezabudnite zdroj v.

Náš ďalší krok bude vytvoriť štyri premenné odkaz prvok canvas ľahko.

Najprv sme uvádzaný premennú myCanvas a nastavte ju na ukážte na plátne prvku HTML. Inej premennej s názvom kontext bol vytvorený dostať plátno dimenzionalita (2D). Podobné Flash vytvárame konečnú dve premenné, šírku a výšku, zjednodušiť proces prístupu k vlastnosti Šírka a výška plátna.


Krok 2: Nakladanie a kreslenie obrázkov

Rovnako ako v ActionScript budeme vytvárať inštancie naše obrázky.

Rozhodujúce kus kódu pre každú inštanciu - Zdrojová cesta nám chýba! Zachránil som všetky obrázky v priečinku "Obrázky" v rovnakom adresári ako súbor HTML, takže:

Pred čerpáme obrazy na plátno poďme vytvoriť štyri polia držať pozície a veľkosti tlačidiel (playImage, instructImage, settingsImage, creditsImage). Tieto polia sa použije neskôr vytvoriť myš nad funkcie.

Teraz môžeme čerpať obrazy na plátno; to možno vykonať v rámci onload funkcie pre každý obrázok, ale funkciou onload nemusí byť zahrnuté - môžeme jednoducho použiť drawImage().

Ak sa skúša teraz, mali by ste vidieť statický obrázok z menu, ktoré budeme čoskoro vdýchnu život. Loď nebola položená do zvyšku obrázky pretože budeme čerpať neskôr v myši udalosť. Mimochodom, ak ste prístav robil to tak ďaleko, udržať vaše premenné zoskupené v hornej časti a urobiť to isté s funkciami.


Krok 3: Animácie pomocou intervalov

JavaScript chýba onEnterFrame() rovnocenné, ale môžeme ľahko vytvárať vlastné pomocou interval (časovač).

Môžu byť zmätení, ako interval pracuje takže stručne vysvetlím. Interval je volaním procedúry update() funkcia každý milisekúnd (1000/rámy) vytvoriť hladké obnovovania. Hodnota snímok ovláda fps; Ak rámy 25, potom prehliadač pokúsi sa volať každý (1000/25 =) 40 milisekúnd.

Náš ďalší zjavné krokom je vytvoriť procedúru update() funkcia

Tri ďalšie funkcie boli len tzv. Clear() sa používa na jasné plátno, pretože na rozdiel od flash plátno funguje ako dávať nálepky na palube; obrázky nie je možné premiestniť, po boli umiestnené. Ďalšie funkcie, move(), sa používa na zmenu hodnoty premenných, ktoré sa používajú s obrázkami. Konečne draw() sa nazýva umiestniť tieto "nálepky".

Zjednodušene povedané, tento kód vymaže všetko vo vnútri obdĺžnika, ktorý je veľkosť plátna a je čerpaná z (0,0), v ľavom hornom rohu. To znamená, že to vymaže celý viditeľný plátno.

Predtým, ako sme sa presunúť na ďalšiu funkciu, je potrebné zaviesť dve premenné. Pozadím bude premenná pre obrázok na pozadí y-pozície a rýchlosti budú použité na odpočítať od pozadím každý cyklus aktualizácie.

O tom, že budeme vyrábať je neustále posúvaný na pozadí. Obraz sa skladá z dvoch identických starfield obrázky, nad sebou, vo väčší obrázok (obrázok je dvojnásobok výšky plátna). Budeme pomaly pohybovať obrázok až do druhej polovice je úplne v zobrazení a potom sme reset polohy obrazu späť na prvý polrok.

Konečne máme funkciu draw(). Všetky obrázky budú prekresľovať, ale jedna zmena všímať je, že hodnota y bgImage bol nahradený s pozadím premennej.

Test teraz a obdivovať plynulé posúvanie pozadia.


Krok 4: Kontrola polohy myši

Jedna vec HTML5 <canvas>chýba podpora pre image je udalosť poslucháčov, čo znamená jednoducho nemôžeme písať playImage.mouseover = function() {}.</canvas> Namiesto toho sme si pozíciu myši vzhľadom na kresliace plátno a zistiť, či je nad objektom.

Dve veličiny zaviedla sa chystáte byť použité na získanie aktuálnej polohy myši. Sme pridali udalosť poslucháči, ako v ActionScript, ktorá volá funkciu checkPos() zakaždým, keď myši pohybuje.

Ak ste upozornení hodnoty mouseX a hnedý, zakaždým, keď ste presunuli myšou by ste si v správnej polohe. Ale je tu jeden problém: nie všetky moderné desktopové prehliadače podporujú túto metódu. Na prekonanie tohto problému môžeme použiť trochu hack namiesto:

To skontroluje, či prehľadávač používa "strana" alebo "vyrovnanie" vlastnosti vrátiť pozície myši a upravuje hodnoty (ak je to potrebné) získať pozície myši vzhľadom na kresliace plátno.

Pamätajte si túto loď sme osvedčil súhlasu, ale nechcel kresliť? Budeme brať že statický obraz, točiť a nech sa objaví vždy, keď sme myši nad tlačidlá!

Prvé štyri premenné sú rovnaké ako predtým (máme dve pozície, pretože bude existovať dve lode). Premenná shipVisible sa nastaví pravda Ak je kurzor nad tlačidlom. Pokiaľ ide o shipSize a shipRotate, sa použijú mierke lode vertikálne a premiestniť ho dať ilúziu, že je spinning. Majte na pamäti, že obrazy stupnice sprava doľava.

Pridajte kód v checkPos() funkcia. Najprv sme postupne prepínať tlačidlá sú (som vymyslel hodnotu pomocou buttonX.length). Ďalej môžeme porovnať mouseX či je väčšia ako tlačidlo aktuálneho buttonX a menej ako jeho buttonX + buttonWidth - t. j. horizontálne medziach tlačidla. Potom opakujeme proces v inom ak vyhlásenie hodnoty Y. Ak je všetko pravda, potom musí byť myši nad tlačidlo, tak nastaviť shipVisible na hodnotu true:

A do prázdnej iný vyhlásenie nastavená na hodnotu false; to potom volal kedykoľvek môžete myšou z tlačidla:

Pod shipVisible = true budeme nastaviť počiatočné hodnoty pre shipX a shipY, a vykonávať všetky mierky v pohybe a kresliť funkcie.

Prvý shipX, ktorý chceme len vľavo od tlačidla, musíme nastaviť hodnotu (aktuálne tlačidlo x - polovica šírky lode) a pohyboval to viac ako 2 pixelov doľava a aby to vyzeralo lepšie. Podobný proces sa opakuje pre prvú shipY. Na druhom shipX sme pozície (aktuálne tlačidlo X + Šírka tohto tlačidla + polovica šírky lode), a potom sme sa Y ako predtým.

Teraz prichádza zložitejšia časť. Máme mierke lode a presuňte ho nad kompenzovať škálovanie. V rámci move() funkcia napísať ak vyhlásenie.

Kód začína odpočítaním hodnoty shipSize, ktoré budú použité na úpravu obrazu, keď budeme čerpať akonáhle dosiahne nulu, proces obráti až je to naplno znova.

Teraz môžeme prejsť do draw() funkcia. Pod všetky ostatné metódy kresliť pridať nasledujúce ak vyhlásenie.

Lode sa pripravujú normálne s výnimkou X pozícií odškodňuje odčítaním polovica aktuálnej mierke.


Krok 5: Kontrola myši klikne

Pridať inú udalosť prijímač pre mouseup a vytvoriť novú premennú pre druhý interval vytvoríme.

Vytvoriť funkciu checkClick().

Ako predtým, skontrolujeme, či je správne pozície myši. Teraz musíme vytvoriť nový interval a zastaviť interval a udalosť poslucháči.

Nič nové tu okrem musíme vytvoriť funkciu nazýva fadeOut(). Musíme tiež vytvoriť inej premennej nazýva čas.

To má niektoré nové metódy, ale je to celkom jednoduché. Pretože sme zastavili všetky udalosti poslucháčov a interval náš jedálny lístok je úplne statické. Tak sme repeatively kreslenie priehľadné čierny obdĺžnik na hornej menu - bez clearing to - dať ilúziu vyblednutiu von.

Variabilná doba sa zvýši zakaždým, keď je funkcia je nazýva, a akonáhle dosiahne určitú hodnotu (po 20 "frames", v tomto prípade prešli) môžeme vymazať aktuálny interval. Tu som reset menu, ale to je, kde by čerpať novú sekciu ponuky.

Jeden Posledná vec k poznámke je, že pri kreslení tvarov na plátne fillStyle je nastavený s hodnotou rgb (červená, zelená, modrá). Ak chcete nakresliť transparentné tvarov, používate rgba (red, green, blue, alpha).

Dúfam, že má mýtov zbavená trochu vzdelávacieho procesu pre prechod z Jednoduché AS3 programovanie jednoduché plátno programovania. Pridať komentár, ak máte nejaké otázky!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.