. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Flash játékok

Falbontó labdajáték készítése Flash MX-ben
  feltöltve: 2004.07.09 | szerző: Ducky | olvasva: 7845 alkalommal

     
 

Ebben a segédletben alapvetően egyszerű műveleteket fogunk gyakorolni egy komplett alkalmazáson keresztül. A cél a klasszikus falbontó játék elkészítése, amit szerintem már mindenki látott valamilyen formában. Az oktatásban nem térünk ki az alapmozgásokra, ezeket mindenki megtalálhatja a Papp Attila által készített 'Dinamikus mozgások ActionScripttel' segédletsorozatban, ami részletesen bemutatja az action script által vezérelt mozgásokat. Előzetesben le kell szögeznünk, hogy ezt a játékot is, mint minden mást, többféleképpen is el lehet készíteni. Ebben a segédletben csak egy alapmódszert nézünk meg a sok közül. Lássunk is neki a feladatnak!

A segédletben a következő játékot fogjuk elkészíteni:

Grafikai elemek elkészítése:

A grafikai elemek elkészítése lesz a folyamat legegyszerűbb része, hiszen nem sok grafikát használunk a programban. Készítsünk egy új mozit, paraméterei -> Width: 400px, Height: 410px, Frame Rate: 30, a háttérszín pedig fehér, de lehet tetszőlegesen bármi más.

A fő timeline-on (root) egyetlen layert, és azon egyetlen frame-et kell létrehozni a lenti képen látható módon, ebben lesz a játék.

Ezen a frame-en rajzoljunk egy egyszerű keretet, majd készítsünk belőle movie clip-et: a neve legyen fbt, az instance neve szintén lehet ugyanaz (Insert/Convert to Symbol). Ebben az mc-ben lesz az egész játék. Azért tesszük egy movie clip-be, hogy a kész program könnyen beilleszthető legyen más mozikba átalakítás nélkül.

Most nézzük meg az fbt mc belső tartalmát. Az mc-n belül négy layer és layerenként három frame lesz, a lenti képen látható módon.

Első frame oszlop:

Az első frame oszlopba kerülnek a játék indításához szükséges elemek. Egy gombot készítsük el tetszőlegesen, a neve legyen gomb. Egy címszó, egy imput text mező (Var: nick) és egy gomb (Instance: mehet_btn). Az elemek alatt lévő grafikák és a gomb a kijelző layerre kerülnek, a text mezők pedig a text layeren kapnak helyet. A keret layeren minden esetben csak a játék kerete lesz.

Itt az első frame oszlopban az action layeren hozzuk létre azt a rövid kódot, ami a játék indításához szükséges, de erről majd később.

Második frame oszlop:

A második frame oszlopban lesz maga a játék. Itt is szükség van néhány grafikai elemre, ezek a játék adatait kijelző text mezők és azok alapjai.

Nézzük végig a képen látható text mezőket és gombokat. A felső sorban az első a név megjelenítése. A 'játékos neve' címszó után egy dynamic text mező található (Var: nick), ez a játékos nevét írja majd ki, ezután a 'téglák' címszó következik, majd egy újabb dynamic text (Var: teg), ez a megjelenő téglák számát fogja kiírni. Az alsó sorban a pont címszóval kezdünk, utána egy dynamic text (Var: score), ez a pontokat fogja megjeleníteni. Ezt követi a 'szint' címszó és egy újabb dynamic text (Var: level), ez jeleníti meg az aktuális játékszintet. A következő címszó a 'labda' és a dynamic text (Var: ball), ez a játékos rendelkezésére álló labdák számát jelzi. Ezután jön két gomb. Az első gomb a 'kilépés' (Instance: kilep_btn), a második gomb pedig a 'pause' (Instance: pause_btn). A text mezők alatt lévő grafikai elemek és a gombok a kijelző layerre kerülnek, míg a text mezőket a text layerre helyezzük.

Ezen a frame oszlopon található még egy mc, ami az aktuálisan induló szint számát jeleníti meg egy rövid animációval. Készítsünk egy új mc-t, a neve legyen 'levs', és tegyünk bele két dynamic text mezőt. Az első dynamic text üresen marad (Var: levk), ebben fog megjelenni a szint száma. A második textben pedig a szöveg lesz (szint indítása), mindkét szövegmezőben ágyazzuk be a fontokat (Properties/Character/All Characters).

Most készítsünk egy új mc-t, a neve legyen 'levelc', és ebbe tegyük bele az előbb elkészített 'levs' mc-t. A levs mc instance neve szintén levs legyen. Erre azért van szükség, mert a szövegmezőkkel végzünk egy rövid kis animációt.

Az animáció első frame-jén a levs mc eredeti méretben szerepel, az alpha értéke 100. Az utolsó előtti frame-en a levs mc-t felnagyítjuk 150%-kal, és az alpha értéke 0 lesz. Így kapunk egy animációt, amiben a szöveg növekszik és elhalványul. Az utolsó frame üres. Ezen a frame-en található egy
stop(); utasítás is, a mozi itt leáll. A legelső frame-en is van egy rövid script.

levs.levk = this._parent.level+".";

Ez a script a játékban szereplő aktuális szint értéket átadja a levs mc-ben lévő levk dynamikus text-nek. Ezáltal minden szintlépéskor az aktuális szintérték fog megjelenni. Most a kész levelc mc-t tegyük a második frame oszlopon a kijelző layerre, és adjuk neki a 'levki' instance nevet, ezzel fogjuk a későbbiekben a futását vezérelni. Ezzel a második frame oszlop is elkészült.

Harmadik frame oszlop:

A harmadik frame oszlopban a játék végén megjelenő szövegeket készítjük elő. Ezek egy része dinamikusan generálódik feltételtől függően, de erre majd a scriptek készítésekor térünk ki.

A legfelső sorban a címszó található, ami közli a játékossal, hogy a játék véget ért. Alatta egy dynamic text található (Var: over, Line Type: Multiline), ami a játék végének okát fogja kiírni. Két oka is lehet a befejezésnek, az egyik az, hogy elfogytak a labdák, a másik pedig az, hogy a játékos minden pályát teljesített, azaz megnyerte a játékot. Az ezt követő sorban a 'játékban elért eredmény' címszó következik, mellette pedig egy dynamikus text mező (Var: scki). A legalsó sorban két gomb található, az első az 'új játék' (Instance: newg_btn), a második pedig a kilépés (Instance: kilep_btn). A text mezők alatti grafikai elemeket és a gombokat a kijelző layeren helyezzük el, a text elemeket pedig a text layer-re tesszük. Ezzel a harmadik frame oszlop is elkészült.
 
     
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .