Vel, vi nærmer oss slutten av 2009, og som alltid er disse siste dagene i desember en tid for refleksjon, minner og nostalgi. På Activetuts + forsøker vi å være fremtidsrettet, flytte med tiden og omfavne teknologien. Å si det, det er også viktig vi appellerer til alle våre lesere, så for de av dere som ikke har gjort hoppet ennå, la oss avslutte året med litt ActionScript 2.0!
I denne opplæringen lager du et enkelt AS2 slangespill.
Start Flash, og klikk Opprett ny: Flash-fil (Actionscript 2.0). Du kan stille scenestørrelsen til det som passer deg - jeg har satt min til 500 x 350. Jeg anbefaler deg å sette framerat til 30 fps.
Nå kan du enten bestemme seg for å følge dette trinnet og tegne de nødvendige filmklippene selv, eller du kan hoppe videre og bruke dem jeg opprettet. Hvis du vil bruke dem jeg opprettet, kan du finne dem i kildefilen. Bare legg dem til biblioteket og dra dem på scenen. Hvis du skal tegne din egen: du trenger ikke å bokstavelig talt tegne det samme som jeg gjorde, men sørg for at du holder deg til størrelsene.
Det første vi skal skape er gropen for slangen å streife rundt. Lag et rektangel på 400 x 250 og konverter det til en filmklipp. Pass på at du tar hensyn til registreringspunktet; gjør det øverst til venstre.
Pass på at du gir slangen pit forekomstnavnet slangegrop og juster den litt over midten av scenen (slik at vi kan legge til tekst under det senere, uten å bryte opp estetikken).
Tegn en firkant (kanskje med avrundede hjørner) uten en kantlinje (størrelse 25 x 25) og kopier den slik at du har 2 nøyaktig det samme. Konverter en av dem til en filmklipp. Igjen, vær oppmerksom på den øverst til venstre registreringen.
Pass på at du oppgir navnet på forekomsten bodypart0 og kontroller at størrelsen er 25 x 25.
Skriv inn "head" movieclip. Når du er inne i det, legg til denne linjen med kode til den første og eneste rammen:
Stoppe();
Nå tegner et lite ansikt på slangens hode, slik at du kan fortelle det bortsett fra andre kroppsarter.
Legg til en andre ramme til "head" movieclip, og i denne rammen tegner du et trist eller dødt ansikt.
Husk duplikatfeltet du opprettet i trinn 3? Vi skal konvertere den til en filmklipp nå. Vær oppmerksom på registreringspunktet igjen.
Pass på at du oppgir navnet på forekomsten kroppsdel.
Opprett et dynamisk tekstfelt under høyre hjørne av slangen. Pass på at du stiller variabelen til poengsum. Pass også på at feltet er bredt nok til flere tegn, og justert til høyre. Resten av innstillingene kan settes i henhold til din egen stil - jeg brukte Tahoma 24 Bold.
Siden det er et dynamisk tekstfelt, må vi legge inn skrifttypen. Klikk på innlemmeknappen i egenskapspanelet (hvor du bare definerte variabelen og tekststilen).
Du får se popupen som vises nedenfor. Pass på at du velger Tall [0 ... 9].
Tegn en blå sirkel uten en kantlinje, størrelse 25 x 25, og slett deretter senteret med viskelærverktøyet. Velg nå sirkelen som gjenstår og konverter den til en filmklipp. Alternativt kan du designe et stykke mat for deg selv, så lenge det forblir 25 x 25.
Gi maten et overraskende eksempelnavn på mat. Dobbeltklikk at størrelsen er 25 x 25.
Venstre under slangen grop virket som et godt sted å sette noen pekere. Skriv bare den statiske teksten "Bruk piltastene til å flytte" her. Jeg vet, piltastene virker ikke ennå, men vi kommer snart til det. jeg lover!
Tegn et hvitt torg (et sted utenfor scenen, for nå) og legg til teksten "Du døde!" til det. Dette er popupen vi viser etter at noen har mistet et spill.
Konverter den til en filmklipp, og gi den forekomstnavnet popup også. For tilpasningsformål har jeg satt registreringspunktet til senteret.
Dobbeltklikk på popupen du nettopp har opprettet for å skrive den inn. Når du er inne i det, opprett et dynamisk tekstfelt (variabel = poengsum) og en knapp som leser teksten Spill igjen.
Knappen skal gis forekomstnavnet againbutton.
På innsiden av knappen kan du opprette en litt mørkere "Over" og enda mørkere "Down" -tilstand.
Gratulerer, du har opprettet alle visuelle objekter som kreves for slangespillet. Nå over til koden!
Før jeg kaster en del kode på deg, forteller jeg deg hva du skal gjøre med det. Alle koden i denne opplæringen går på den første og eneste rammen av filmen. Du trenger ikke å feste den på knapper eller noe. Nå, se på dette stykke ActionScript.
Redaktørens merknad: Beklager for dette folkets kode, ikke synkroniseringslampen for kodeks vil ikke vise denne delen av ActionScript i FireFox. Ta en titt på koden her.
I et nøtteskall gjør denne delen av koden følgende. Først blir det opprinnelige bodypartet gjort usynlig - vi bruker snart duplikater. Noen standardverdier er (re) sett, noen duplikater som er igjen fra forrige spill, blir slettet. I do while () sløyfen får mat og bodypart0 (hodet) en x- og y-koordinat. Hvis dette stemmer (slik at de er på samme sted), får de en ny koordinat, til vi ikke lenger har en kamp. Deretter settes arraysene der vi skal inneholde bodyparts 'x- og y-koordinater.
I denne delen av kode lager vi et keyListener-objekt, som vi legger til Key, som representerer tastaturet. Når en tast trykkes, utløses onKeyDown-funksjonen. Fra getCode () -funksjonen vil vi avlede hvilken tast som ble trykket og deretter definere retningen i henhold til dette. Vi lagrer dette i retning variabel for senere bruk. Husk: Alle koden for denne opplæringen går på den første og eneste rammen av filmen.
keyListener = nytt objekt (); keyListener.onKeyDown = function () keycode = Key.getCode () hvis (nøkkelkode == 37) retning = 'venstre' annet hvis (nøkkelkode == 38) retning = 'opp' annet hvis 39) retning = 'høyre' annet hvis (nøkkelkode == 40) retning = 'ned'; Key.addListener (keyListener);
Funksjonen her nede er en stor. Den utføres på hver ramme, men bare virkelig gjør noe hver fem ramme. Det kontrollerer om slangen ikke beveger seg utenfor boksen, og flytter deretter alle kroppsdelene til sin nye posisjon. Det sjekker deretter om maten er der også, og spiser den ved hjelp av eat () -funksjonen, diskuterer vi senere. Deretter sjekker det om slangen knuses i en vegg, og til slutt kontrollerer den om slangen biter seg i halen. Alle disse funksjonene vil bli lagt til snart (insideSnake (), dead (), etc.). Husk: Alle koden for denne opplæringen går på den første og eneste rammen av filmen.
this.onEnterFrame = function () if (game) hvis (framecount / 5 == Math.ceil (framecount / 5)) hvis (! (bodypart0._y <= snakepit._y && direction == 'up') && !(bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2 && direction == 'down') &&! (bodypart0._x + bodypart0._width> = snakepit._x + snakepit._width - 2 && direction == 'right') &&! bodypart0._x <= snakepit._x && direction == 'left')) bodypartsy[0] = bodypart0._y; bodypartsx[0] = bodypart0._x; for (i=bodypartsy.length-1;i > 0; I -) eval ('bodypart' + i) ._ y = bodypartsy [(i-1)] eval ('bodypart' + i) ._ x = bodypartsx [(i-1)] bodypartsy [i] = eval 'bodypart' + i) ._ y bodypartsx [i] = eval ('bodypart' + i) ._ x hvis (food._x == bodypart0._x && food._y == bodypart0._y) eat hvis (retning) hvis (retning == 'opp') hvis (bodypart0._y <= snakepit._y) dead() else bodypart0._y-= bodypart0._width else if (direction == 'down') if (bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2) døde () annet bodypart0._y + = bodypart0._width annet hvis (retning == 'høyre') if (bodypart0._x + bodypart0._width> = snakepit ._x + snakepit._width - 2) dead () else bodypart0._x + = bodypart0._width annet hvis (retning == 'venstre') hvis (bodypart0._x <= snakepit._x) dead() else bodypart0._x-= bodypart0._width if (game) if (insideSnake(bodypart0._x,bodypart0._y,true)) dead() framecount++
Denne er fin og enkel. Den utfører de tiltakene som må tas når slangen dør: poenget må defineres i popupen, popupen vises, slangen er dødsfall vist og spillvariabelen satt til feil (når spillet avsluttet).
funksjon dead () popup.score = 'score:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) spill = false;
Funksjonen nedenfor utløses i funksjonen onEnterFrame vi diskuterte tidligere, når maten hentes. Det dupliserer først en del av slangens kropp, og plasserer den på stedet for det siste bodypartet (slik at det blir med i linjen på neste ramme). Koordinatene legges til koordinaten som inneholder arrays, og maten er reposisjonert (et sted ikke inne i slangen!). Også poengsummen er oppdatert.
funksjonen spise () duplicateMovieClip (bodypart, 'bodypart' + bodypartsy.length, this.getNextHighestDepth ()) bodypart0.swapDepths (this.getNextHighestDepth ()) eval ('bodypart' + bodypartsy.length) ._ y = eval ('bodypart '+ (bodypartsy.length-1)) ._ y eval (' bodypart '+ bodypartsx.length) ._ x = eval (' bodypart '+ (bodypartsy.length-1)) ._ x bodypartsy.push (eval (' bodypart ' + bodypartsy.length) ._ y) bodypartsx.push (eval ('bodypart' + bodypartsx.length) ._ x) gjør food._x = snakepit._x + Math.floor (((snakepit._width-food._width) / food._width) * Math.random ()) * food._width food._y = snakepit._y + Math.floor ((snakepit._height-food._height) /food._height) * Math.random ()) * food._height mens (insideSnake (food._x, food._y)); score = bodypartsx.length-1
Denne funksjonen kontrollerer bare om de innputtede koordinatene samsvarer med noen av koordinatene til slangens kroppsformer. Hvis hoppehode er satt til ekte, er det tillatt å matche hodens koordinater (når du sjekker om hodet biter halen, kommer dette til nytte).
Funksjon insideSnake (xneedle, yneedle, skiphead) if (skiphead) startat = 1; ellers startat = 0; for (q = startat; qTrinn 20: Popup-knappen
Som en siste bit av kode; vi må fortsatt legge til en utløsingsfunksjon til knappen inne i popup-vinduet! Det vil utløse funksjonen newgame () vi diskuterte tidligere, da den ble klikket. Husk: Alle koden til denne opplæringen går på den første og eneste rammen av filmen din - inkludert denne teksten om knappen!
popup.againbutton.onRelease = function () newgame ()Trinn 21: Pakke det hele opp
Jeg er sikker på at du har gjort dette før, men nå er klokken: Trykk Ctrl + Enter (eller Cmd + Enter på en Mac) for å kompilere SWF-filen og teste spillet ditt. Det skal nå være fullt funksjonelt. Nyt!
Konklusjon
Hvis du gjorde det hele veien her; Gratulerer! Du skapte ganske et vanedannende spill, i AS2! Selvfølgelig er et spill aldri ferdig. Det er alltid rom for kreativ forbedring.
Hvis du har spørsmål eller forslag, vær så snill å kommentere nedenfor. Også, jeg er ganske nysgjerrig på å se filer produsert som et resultat av denne opplæringen - jeg vil gjerne se en lenke i kommentarene!
Takk for at du lest min opplæring. Jeg håper du likte det så mye som jeg gjorde.