Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games
Code

Vytváření "Flux": Jednoduchá flashová hra s Gravity mechanik

by
Difficulty:BeginnerLength:LongLanguages:

Czech (Čeština) translation by Jakub Dokoupil (you can also view the original English article)

V tomto kurzu já vysvětlím, hlavní kroky a pracovní postup pro vytvoření jednoduché vesmírná přežití hra, založena na gravitace mechanik, vysvětlil v předchozím tutoriálu. Tato hra je napsána v AS3 pomocí FlashDevelop.


Hrát hru

Klávesami Šipka vlevo a vpravo manévrovat vaše loď, nahoru a dolů šipkami zvýšit nebo snížit velikost magnetického pole, které produkuje a mezerníku k obrácení polarity. Bílé krystaly ke zvýšení zásoby paliva -, ale vyhnout se ty červené, Sbírejte, protože používají ji. Ne hit rock, nebo je to konec hry!

V tomto kurzu nebudeme vytvářet skutečně plné hry zobrazené výše; pak jen začnem, tím, že velmi jednoduché provedení s jednoduchou grafiku a jen jeden druh objektu. Nicméně do konce, byste měli zjistit dost, aby mohli přidat další funkce!

Hra sama o sobě je velice jednoduchý ve svém současném stavu - Podívejte se na tuto kritiku tipy, jak si můžete vzít to od jednoduché demo plnou hru!


Pojďme začít!

Vytvořit nový projekt AS3 v FlashDevelop a nastavte jeho rozměry na 550x600px.


Krok 1: Identifikace herní objekty

Existuje šest objektů v částice, které lze identifikovat hru výše:

  • Energie - reprezentována objektem bílý oválný tvar
  • Asteroidů - zastoupené objektem rockově
  • Energetické spotřebitel - reprezentované rudá hvězda svázán se zeleným světlem.
  • Hvězdy - pozadí
  • Rozsah indikátor - reprezentované bílý kruh
  • Loď - hráč objektu

Samozřejmě můžete přidat do jiného objektu, aby interaktivní hru nebo přidat novou funkci. Pro tento kurz bude prostě uděláme


Krok 2: Energetická třída

Z objektů jsme identifikovali čtyři z nich skutečně pracují stejným způsobem: tím pádem od shora dolů.

Jsou to:

  • Hvězdy
  • Přívod energie
  • Spotřeba energie
  • Planetka

V tomto kurzu budeme pouze objekty "zásobování energií", mimo výše uvedené čtyři. Tak začněme vytvořením těchto objektů a jejich upadl, náhodné reprodukující pozici a rychlost.

Začněte vytvořením energetické třídy:


Krok 3: GameScreen třída

Tato třída bude nakonec kontrolovat většinu aspektů naší hry, včetně hnutí hráče a herní smyčky.

Vytvořte třídu:

To je vše, potřebujeme pro tuto chvíli.


Krok 4: Aktualizovat hlavní třída

Nyní vytvoříme instance GameScreen v rámci hlavní:

Proč se obtěžovat? No tak to bude jednodušší přidat extra obrazovky později, pokud chceme (jako preloader, úvodní obrazovku, hru přes obrazovky...).


Krok 5: Zavedení správce třídy

Aby se zabránilo GameScreen třídy stává příliš velký nepořádek, budeme používat samostatné třídy spravovat každý objekt.

Každý manager třída bude obsahovat všechny funkce, které se týkají a pracovat s konkrétním objektem. Zde je třída EnergyManager:

Všimněte si, že jsme vyžadují odkaz na GameScreen mají být předány do konstruktoru, a uložíme tento odkaz soukromé proměnné. Jsme také nastavit vektor ukládat odkazy na všechny energetické objekty.

Zatím třída obsahovat žádné další funkce; přidáme je do později.


Krok 6: Vytvoření energie

Přidejte níže uvedené funkce pro tvorbu energie, to je jen funkce; Zavoláme funkci později z GameScreen třídy:

Vytvoření nové dodávky energie s rychlostí 4, přidat do seznamu zobrazení (přes GameScreen), přidejte jej do vektoru veškerou energii objekty, že jsme právě vytvořili a nastavte jeho pozici na náhodný bod v určitých mezích.

Calculation.generateRandomValue (#, #) je statická funkce jsme nepsal, ale tak Udělejme to teď. Vytvořit novou třídu s názvem výpočet a přidat tuto funkci:

Tato funkce bude generovat náhodné číslo mezi dvěma hodnotami, které jsou jí předány. Získáte další informace o jak funguje tento rychlý Tip. Vzhledem k tomu, to je statická funkce, nepotřebujeme k vytvoření instance výpočtu, aby ji volat.

Co je funkce addEnergyToScreen()? Ještě jsme nedefinovali, tak se to dělá. Přidáte do GameScreen:

To jen přidává předaná instance energie do seznamu zobrazení. Uděláme také odpovídající funkce Odstranit objekt dané energie z obrazovky:


Krok 7: Vytváření energie

Nastavíme časovač, který definuje interval pro každý tření. Tento kód je ve funkci konstruktoru je GameScreen:

Takže každé tři sekundy, časovač bude volat spawnEnergy(). Pojďme napsat tuto funkci:


Krok 8: Vytvoření hráče

Pojďme použít jiný, větší kruh k reprezentaci hráč. Nebojte se, import obrázku namísto použití:

Přidáte tento kód do GameScreen přidat hráče na obrazovku:

Zatím bychom měli mít několik dodávek energie pádu několika sekund a hráč, která se objeví uprostřed obrazovky:

playerandenergy.

Krok 9: Přesun hráč

Existují v podstatě dva způsoby pohybu:

  1. Použití logických hodnot (pravda/nepravda) - pravda = přesun, false = nehýbe. Po stisknutí klávesy se šipkou vpravo, hodnota pro "Posun doprava" se změní na true. V každé aktualizaci snímku "pohyblivý právo" je pravda, zvýšíme hodnotu x objektu.
  2. Pomocí přímého aktualizovat každý snímek - při stisknutí klávesy se šipkou vpravo, objekt je řekl, aby pohyb doprava, tím, že zvyšuje jeho hodnotu x.

Druhá metoda nevede k hladké hnutí, když neustále klávesy, ale na první metoda nemá - takže jsme se použít první metodu.

Existují tři jednoduché kroky k tomu:

  1. Vytvořte dvě proměnné typu Boolean, jeden pro pohyb doprava a jeden pro posun vlevo.
  2. Booleovská hodnota přepnete, když klávesy jsou stisknutí nebo uvolnění:
  3. Na základě těchto logické hodnoty ve skutečnosti pohyb hráče každý snímek:

    Nezapomeňte si nejprve vytvořit funkci naslouchání z rámečku událost enter, "aktualizace":

    Udržujte hráče v rámci hranice obrazovky:

Zde je jak to všechno vypadá, na místě:


Krok 10: Přesun dodávky energie

V současnosti jsou dodávky energie tření ale nehýbe. Použijeme funkci GameScreen.update() k jejich přesunutí, protože to běží každý snímek.

Přidáte tento kód do GameScreen.update():

Teď samozřejmě potřebujeme k EnergyManager.moveAll() funkce, tak přidat do EnergyManager.as:


Krok 10: Detekce kolizí

Budeme potřebovat zjistit kolize mezi každý objekt energii a hráč. (Pokud vyvíjíte hru dále, budete muset zkontrolovat planetek a spotřebitelé energie, ale ne pro hvězdy.)

Nejlepším místem pro zpracování těchto kontrol je uvnitř EnergyManager, spustí každý rám GameScreen.

Jedna věc, aby zvážila: kolize kontroluje, bude mezi dvěma kruhy, takže hitTestObject() není ideální. Místo toho budeme používat metody popsané v tomto kurzu.

Můžeme napsat funkci jako níže:

  • Řádek 32: Všimněte si, že jsme se projít v odkazu na hráče, tak, že můžeme přístup jeho pozici.
  • Řádek 38: V energetice je zkratka pro zásobování energií.
  • Linka 40 & 41: najít rozdíl v x a y souřadnice mezi přehrávačem a zásobování energií, kterou v současné době prověřujeme.
  • Řádek 43: Vypočítejte vzdálenost mezi objekty prostřednictvím Pythagoras.
  • Řádek 45: Kontrola kolizí; 28 je součtem poloměrů dvou objektů (hráč poloměr je 20, energetické poloměr je 8).
  • Linka 46 & 47: Odeberte dodávek energie z obrazovky a vektoru.
  • Linka 51: přidáte maximálně jednu jednotku energie na snímek.

Linka 51 by se mohly změnit na energyTransfer += 1, aby hráči absorbovat více energie objektů najednou. Je to na vás - to vyzkoušet a zjistit, jak to ovlivní hru.


Krok 11: Volání rutiny detekce kolize

Potřebujeme zjistit kolize každý snímek, takže bychom měli zavolat funkci, kterou jsme právě napsali z GameScreen.update().

Za prvé musíme vytvořit proměnnou celé číslo k ukládání energie přenosu hodnotu z funkce detekce kolizí. Budeme používat tuto hodnotu pro zvýšení lodní energii a přidání hráče skóre.


Krok 12: Newtonův gravitační zákon

Než půjdeme do vytváření herních mechanik pro funkci "Push" a "Vytáhnout" lodi, chtěl bych zavést pojem fyzika, na nichž je založena mechanik.

Myšlenka je přilákat objektu směrem k přehrávači prostřednictvím síly. Newtonův zákon všeobecné gravitace nám dává skvělou (a jednoduché) matematického vzorce můžeme použít k tomu, kde síla je gravitační síla:

G je jen číslo, a můžeme jej nastavit na cokoliv, co se nám líbí. Stejně tak můžeme nastavit masy jednotlivých objektů ve hře na všechny hodnoty, které se nám líbí. Gravitace dochází přes nekonečné vzdálenosti, ale v naší hře, budeme mít mezního bodu (označen bílý kruh v demo od začátku kurzu).

Jsou dvě nejdůležitější věci k poznámce o tento vzorec:

  • Síla je síla závisí na náměstí vzdálenosti mezi dvěma objekty (takže pokud objekty, které jsou dvakrát tak daleko, síla je jedna čtvrtina tak silný).
  • Směr síly je podél přímé linie spojující dva objekty ve vesmíru.

Krok 13: Revize matematické pojmy

Než začneme, kódování herní mechaniky pro funkci "Push" a "Vytáhnout", buďme jasné, na co budeme chtít:

frameWork

V podstatě chceme A (hráč) vyvinout sílu na B (krystal) a přesunout B vůči A na základě této síly.

Měli bychom přehodnotit několik pojmů:

  • Flash pracuje ve stupních, nikoli radiány.
  • Flash souřadnicový systém má svou y obrácené: jít dolů znamená zvýšení y.
  • Můžeme získat úhel čáry spojující počítače A a B pomocí Math.atan2 (Bičánek - A.y, B.x - A.x).
  • Můžeme použít trigonometrii zjistit, kolik potřebujeme přesunout B na obou osách, založené na tento úhel a sílu:
    • B.x += (Force*Math.cos(angle));
    • Bičánek += (Force*Math.sin(angle));
  • Používáme je Pythagoras věta přijít na vzdálenosti mezi dvěma objekty:

Další informace naleznete viz kurzy Gravity v akci a trigonometrie pro vývojáře Flash hra.


Krok 14: Implementace Push a Pull

Na základě předchozího vysvětlení, můžeme přijít s osnovou pro náš kód, který přitahuje Každý krystal na lodi:

  1. Rozdíl v x a y mezi lodí a daný krystal.
  2. Najděte úhel mezi nimi, v radiánech.
  3. Najděte vzdálenost mezi nimi pomocí Pythagoras.
  4. Zkontrolujte, zda je objekt uvnitř lodi gravitačního pole.
  5. Pokud ano, výpočet gravitační síly a...
  6. .. .apply síla, změna x a y hodnoty krystalu.

Ukázkový kód:

  • Linka 53: Získejte odkaz na hráče.
  • Řádek 55: jsme smyčka prostřednictvím každého objektu energií.
  • Linka 61: najdete úhel mezi lodí a energii.
  • Linka č. 63: najdete vzdálenost mezi nimi, taky.
  • Linka 65: Zkontrolujte, zda je energie uvnitř lodi silové pole.
  • Linka 67: použijte vzorec:
    • 4 = G, "gravitační konstanta" jsem zvolil.
    • 50 = m1, hmotnost lodi hráče.
    • 10 = m2, hmotnost objektu energií.
  • Linka 69: aplikovat hnutí.

Tady je timelapse, ukazující, jak to vypadá:

Všimněte si, že energie pohybuje rychleji, blíže se dostane na loď, díky funkční spolehlivosti r.

Můžeme-li implementovat funkci tlačí jen tím, že síla negativní:

Zde se objekt pohybuje pomaleji, jak se dostane dál od hráče, neboť síla čím dál slabší.


Krok 15: Použije mechanik

Samozřejmě, že budete potřebovat tuto funkci spustit každý snímek GameScreen - ale před tím budeme muset použít logické funkce lze přepínat mezi dvěma funkcemi:

Budeme používat true pro "Push" a false pro "Pull".

Vnitřní KeyDownHandler():

Poté budete muset zkontrolovat booleovská hodnota každého rámce. Přidáte tuto metodu update():


Krok 16: modifikace

Možná zjistíte, že pohyb nevypadá tak hezky. To může být síla není zcela ideální, nebo kvůli funkční spolehlivosti r.

Chtěl bych změnit vzorec jako tak:

Jak vidíte, jsem se hodnota "G" na 0,8 a změnil síly závisí na vzdálenosti mezi objekty, spíše než vzdálenost na druhou.

Zkuste to a uvidíte, pokud si změnu. Vždy můžete změnit jej však se vám líbí.


Krok 17: Text třída

Budeme potřebovat zobrazit text na obrazovce, ukazující skóre a lodní zbývající energii.

Za tímto účelem budujeme novou třídu, Text:

Je to velmi jednoduché; je to v podstatě MovieClip s textové pole uvnitř.


Krok 18: Přidávání energie pro hráče

Aby hra nějakou výzvu, uděláme lodní energie zvyknete pomalu, tak, že hráč musí sbírat energii pro dobití.

Aby lodní napájení se objeví na samotné lodi, můžeme jednoduše přidat instance textu do seznamu zobrazení objektu loď.

Prohlašuji, že tyto proměnné v rámci loď třídy:

Budeme muset udržet množství energie (obě uloženy a zobrazeny) aktualizovány každý snímek, takže přidejte tuto novou funkci hráče:

Za prvé, v konstruktoru:

A pak...

Moc se sníží každý snímek o 1/24 z celku, což znamená, to bude snížit o jednu plnou jednotku každou sekundu.

Musíme to spustit každý snímek, takže přidejte tento řádek do GameScreen.update():


Krok 19: Aby zvýšení energie

Když loď srazí s objektem energii, chceme zvýšit svou sílu.

V GameScreen.update() přidejte zvýrazněný řádek:

Pamatujte, že můžete změnit, kolik energie je vrácena v EnergyManager.checkCollision() funkce.


Krok 20: Nastavení skóre

Opět budeme potřebovat třída text. Tentokrát budeme zobrazovat "Score" a pak hodnotu.

Tady budeme potřebovat tři více proměnných:

  • Text "Skóre".
  • Skóre hodnota text.
  • Proměnnou pro uložení aktuální skóre.

Prohlašuji, že v GameScreen třídě:

V konstruktoru přidejte tento kód:

Nyní ve funkci update(), přidáte tuto:

To je ono - vytvořili jsme základní verzi výše uvedené hry!

Podívejte se (budete muset stránku znovu načíst):


Další funkce a leštění

Místo na pozadí

Možná také chcete pozadí s vložený obrázek a hvězd. Přidáte do hlavní třídy:

Nyní vytvořte třídu Star:

V konstruktoru Main() přidejte vytvoření hvězd:

Tady je skutečný createStars() funkce:

S náhodné alfa, velikosti, polohy a rychlosti je možné generovat pseudo-3D pozadí.

Rozsah indikátor

Kruh ukazatele vzdálenosti lze jednoduše vytvořením další kruh a jeho přidáním do seznamu zobrazení lodi, stejně jako jak jste přidali text ukazatele výkonu. Ujistěte se, že kružnice je soustředěn na lodi a má poloměr roven lodní nabízenou/vyžádanou replikaci rozsahu.

Přidání průhlednosti (alfa hodnota) do kruhu pod kódem:

Zkuste přidat další ovládací prvky, které činí rozsah zvýšeny nebo sníženy stisknutí kláves Šipka nahoru a dolů.


Závěr

Doufám, že se vám to líbilo tento kurz! Zanechte svůj komentář.

Dále: Přečtěte si tuto kritiku pokyny k převzetí tok od jednoduché demo plnou hru!

Advertisement
Advertisement
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.