Börja med spelprogrammering i flash
Börja med spelprogrammering i Flash
Slutgiltig version.
Flash är en alldeles utmärkt plattform att göra spel på, och framför allt är det en väldigt bra plattform att börja göra spel på. Jag kommer skriva en kort introduktion till programmering och förklara syntaxen för actionscript kortfattat.
Om det är några oklarheter säg gärna till så att jag kan lägga till förklaringar där det behövs, jag har med flit minskat på mängden förklaring mot slutet av guiden säg gärna till om ni tycker att det behövs mer på något specifikt ställe. Denna guide använder verktyget adobe flash som finns som en 30-dagars trial på http://www.adobe.com/products/flash/
Nioreh83 gav ett väldigt bra förslag på alternativa verktyg som är gratis;
Ursprungligen inskrivet av Nioreh83
En sak som borde tilläggas är att man faktiskt kan göra flashspel/applikationer utan att köpa Flash som är ganska dyrt. Allt kan lösas med open source-alternativ. Att skriva kod i Flash är dessutom en ganska kass upplevelse.
För de som vill utveckla flashspel helt gratis rekommenderar jag det grymma IDE:t FlashDevelop tillsammand med Adobes gratis Flex SDK. För att göra vektorgrafik till ditt spel kan jag rekommendera Inkscape.
FlashDevelop är mycket trevligt att koda i med code hinting och auto completion eller vad det nu kallas.
Lite bra länkar:
http://www.flashdevelop.org/wikidocs/index.php?title=Main_Pag...
http://opensource.adobe.com/wiki/display/flexsdk/Downloads
http://www.inkscape.org/
Innehåll
1 - Komma igång med flash
1.1 - Nytt projekt
1.2 - Gränssnittet
1.3 - MovieClips
2 - En snabbkurs i ActionScript 3.0
2.1 - Variabler
2.2 - Semikolon
2.3 - Scope
2.4 - If-satser
2.5 - Loopar
2.6 - Funktioner
2.7 - Klasser
3 - Börja med spelet
3.1 - Skapa spelarklassen
3.2 - Rita en spelare
3.3 - Börja skriva kod
3.4 - Styrning
3.5 - Kollisionstest
3.6 - Gravitation
3.7 - Mark
3.8 - Hoppa
4 - Fiende
4.1 - Deklarera fiendeklassen
4.2 - Rita fiende
4.3 - Programmera fiende
4.4 - Fientlig fiende
4.5 - Tweaka
5 - Animera spelaren
5.1 - Idle-animation
5.2 - Spring-animation
5.3 - Animationskod
6 - Avslutning
6.1 - Källkod
1 - Komma igång med flash
1.1 - Nytt projekt
Skapa en ny fil av typen "Flash file (Action script 3.0)" och spara den sedan i en ny mapp på ett lämpligt ställe. Projekt innehåller vanligtvis ett flertal kodfiler så skapa med fördel en egen mapp, annars så kan jag garantera att det kommer bli rörigt. I detta projekt nöjer vi oss dock med 3 st filer.
1.2 - Gränssnittet
I gränssnittet så finns det några olika fönster som är viktiga (vissa kanske inte är synliga, gå då till Window i verktygsfältet och klicka fram de som behövs):
Scene - Ytan i mitten där man kan rita och lägga ut andra objekt.
Timeline - Här visas alla aktuella lager och frames. Används för att kontrollera animationer och liknande. Notera att för att förlänga en bild så väljer man "Insert Frame" efter ett högerklick, för att kunna rita något nytt måste man välja "Insert Keyframe".
Actions - Här skriver man all kod, det finns funktioner såsom automatisk formatering och "syntax highlighting" vilket luddigt förklarat betyder att olika typer av kod färgas olika.
Properties - Inställningar för det som är markerat.
Library - Filens bibliotek med grafik och ljud som kan användas.
Här kan man se hur alla dessa fönster ser ut (jag har dock möblerat om en hel del):
1.3 - Movie Clips
Det mesta som man vill rita ut kommer man att rita ut som ett "movie clip". Ett movie clip är helt enkelt ett objekt som till exempel kan ha animationer eller kod knuten till sig. Alla dessa movie clips hamnar i Library och kan antingen så kan man dra ut movie clips till scenen för hand eller så kan man lägga till movie clips till scenen via kod.
2 - En snabbkurs i ActionScript 3.0
Programmering handlar om att formulera sig i text på ett sätt som datorn kan processa, det innebär att man måste vara väldigt specifik och allting man skriver kan bara tolkas på ett sätt. Koden körs rad för rad, uppifrån och ner, det finns sätt att kontrollera hur koden körs och det kallas loopar och if-satser vilket vi kommer gå in på mer senare.
Nedan följer en väldigt kortfattad introduktion till några grundläggande koncept inom programmering, om du redan är bekant med programmering så går det med stor säkerhet bra att hoppa över denna del. Jag förklarar några viktiga koncept och presenterar lite exempelkod för att illustrera hur det fungerar, om någonting är oklart så fråga gärna så ska jag försöka förtydliga. Alla beskrivningar är inte 100% korrekta och formella men det är ofta avsiktligt för att förenkla i början, jag tror att jag redan har tillräckligt mycket tillkrånglingar som det är nu.
Den mesta av koden nedan går att köra genom att klistra in i actions-fönstret när man står vid scenen och sedan klicka ctrl-enter. Då kommer också eventuellt kompileringsfel att dyka upp. Det går dock inte att kompilera de exempel på syntax som jag visar, och inte heller exemplet med klasser - däremot demonstrerar jag hur man kan använda klasser lite senare i guiden.
2.1 - Variabler
Det kanske viktigaste man måste tala om för datorn är var och hur data ska lagras, detta gör man med hjälp av variabler. En variabel är en plats i minnet där man får lagra data av en viss typ. Denna typ väljer när man deklarerar variabeln. Dessa olika typer av variabler är oftast någon grundläggande typ, till exempel ett heltal, ett decimaltal, en textsträng eller sant/falskt men det finns även mer invecklade typer. För att deklarera en variabel i actionscript så skriver man:
var variabelNamn:datatyp;
var är ett nyckelord som talar om för flash att det kommer en variabel, variabelNamn är den texten som man skriver för att skriva till eller läsa från variabeln. dataTyp är den typen av data som man vill lagra, de grundläggande datayperna som man främst kommer använda är:
int - Ett heltal som kan vara positivt och negativt.
uint - Ett heltal som bara kan vara positivt.
Number - Ett decimaltal.
String - En textsträng.
Boolean - En variabel som innehåller sant eller falskt.
Användning av variabler (främst gäller detta variabler som innehåller något form av tal) kommer vara bekant från matematiken, man utnyttjar nämligen operatorerna =, +, - och * för att utföra beräkningar och tilldelningar på variablerna, exempel:
var a:int;
a = 5;
var b:int;
b = 7;
a = a + b;
trace(a);
I detta exempel så skapar vi först en variabel som heter a och som är av typen int vilket är en förkortning av integer och som betyder att vi i den kan lagra heltal, i denna variabel lagrar vi värdet 5. Därefter skapar vi en till variabel som vi kallar för b och som också är av typen int, där lagrar vi 7. På nästa rad adderar vi a och b (vilket i detta exempel blir 12) och lagrar detta i a igen. Nu kommer a att innehålla värdet 12 och b fortfarande 7. I den sista raden skriver vi ut värdet på a till output genom en funktion som heter trace, det kommer då stå 12 i ett fönster kallat Output.
2.2 - Semikolon
Som ni ser finns det semikolon efter alla rader kod hittills, men det ska inte vara semikolon efter alla rader kod vilket kommer märkas snart.
2.3 - Scope
Alla variabler har ett visst scope (livslängd eller räckvidd är kanske en bra översättning). Den grundläggande regeln (som visserligen inte alltid stämmer) är att alla variabler finns att använda tills dess att det paret av måsvingar som de deklareras inom avslutas, därefter kan de inte användas längre.
2.4 - If-satser
Om man vill testa en variabel och bara utföra kod om det testet stämmer så använder man någonting som kallas för if-satser, och det ser ut som följer:
if (uttryck)
{
} [else [if(uttryck)]
{
}]
Det fungerar som så att ifall det som står inom parenteserna utvärderas till sant så kommer koden inom måsvingarna att köras, om det är falskt så går man till else (som i exemplet ovan är inom klamrar för att man inte behöver skriva med else i varje if-sats - klamrarna ska inte vara med när man använder else). Vid else kan man lägga in en till if-sats som även den ska utvärderas, men detta är frivilligt det med (samma sak med klamrarna). Notera också avsaknaden av semikolon. Exempel på hur if kan användas:
var a:int = 5;
var b:int;
if (a > 6)
{
b = 2;
} else
{
b = 7;
}
trace(a + b);
I if-satsen så kontrolleras om a är större än 6, ifall detta är sant så tilldelas b värdet 7. Om detta är falskt så tilldelas b värdet 7. Just detta exempel är rätt meningslöst då vi garanterat vet vad a är och if-satsen är därmed onödig då koden där 7 tilldelas till b alltid körs. Till sist så adderar vi a och b och skriver ut resultatet, vilket kommer vara 12.
2.5 - Loopar
Om man vill utföra samma sak flera gånger så kan man använda någon av de olika typer av loopar som finns, jag kommer här att gå igenom den vanliga for-loopen då det är förmodligen den man kommer använda klart mest. En "vanlig" for-loop ser ut som följande:
for (initialisering; testuttryck; efter-varje-loop)
{
}
I initialisering brukar man deklarera variabler som har med att hantera hur loopen ska köras, i testuttryck väljer man för vilket uttryck som loopen ska köras och i efter-varje-loop så körs kod som ska köras varje varv. Exempel på hur man brukar använda detta:
for (var i:int = 0; i < 20; ++i)
{
trace(i);
}
Denna kod skriver ut siffrorna 0-19 i output. Den fungerar som så att i initialiseringen skapar vi en variabel som heter i och är av typen int (i, j, k, m, n är vanliga namn på denna variabel) och den sätts till värdet 0. I testet så sätter vi att loopen ska köras så länge som i är mindre än 20. I den sista delen så väljer vi att efter varje runda så ska i ökas med 1 genom att använda operationen ++. Inuti loopen så skriver vi ut i med hjälp av trace.
För att se vilka övriga loopar som finns så kan ni studera denna sidan.
Dokumentationen är för övrigt en väldigt bra sida för att få reda saker om flash och man tjänar väldigt mycket på att lära sig använda den effektivt, det är viktigt att kunna läsa dokumentation när man programmerar då det är någonting man inte sällan finner sig göra.
2.6 - Funktioner
Funktioner är till för att underlätta genom att möjliggöra att vi kan dela upp koden i bitar och dessutom ge oss möjligheten att undvika att skriva om samma kod flera gånger (det vill man väldigt gärna undvika av flera anledningar, den främsta är att det är jobbigt). En funktion ett namn, ett antal parametrar och en returtyp. En funktion deklareras på följande sätt:
function funktionsNamn(parameter1:datatyp, parameter2:datatyp, osv...):returtyp
{
}
Namnet på funktionen är det som man nyttjar för att anropa funktionen (använda den). Parametrarna återfinns inom parenteserna och där definierar man den data som man vill få från den som anropar funktionen och kan inom funktionen användas precis som vanliga variabler, antalet parametrar kan vara noll om man så vill och mig veterligen finns det ingen över gräns som man begränsas av vid normal användning. När man gör funktioner vill man ofta skicka tillbaka något värde, då måste man ha satt returtyp till att vara samma datatyp som man skickar tillbaka. Man lägger all kod för funktionen mellan måsvingarna - funktionens scope. Exempel på en funktion:
function add(a:int, b:int):int
{
return a +b;
}
Denna funktion adderar a och b och skickar tillbaka värdet genom att använda nyckelordet return. Exempel på hur denna funktion kan användas:
var a:int = 5;
var b:int = 7;
a = add(a, b);
Notera att det går att tilldela variabler ett värde med = på samma rad som de deklareras, detta gör så att koden blir lite kortare. På den sista raden så tilldelar vi resultatet av funktionen till a, och a kommer som i tidigare exempel att innehålla 12.
2.7 - Klasser
En central del för programmering inom ActionScript 3.0 är objektorienteringen. Det innebär att man programmerar med hjälp av något som kallas klasser, en klass är en förenkling av någonting man vill simulera. Om man exempelvis vill ha med en glödlampa i sitt projekt så skapar man en klass som heter LightBulb (det är lämpligast att programmera på engelska), denna klass kan sedan till exempel innehålla variabler som håller reda på ljusstyrkan och om den är tänd och sedan innehålla funktioner för att tända och släcka den. Exempel på detta:
public class LightBulb
{
public var m_IsOn:Boolean;
private var m_Effect:int;
public function switch()
{
if (m_IsOn)
{
m_IsOn = false;
} else
{
m_IsOn = true;
}
}
}
Notera hur det här används nyckelord såsom private och public. Detta signalerar hur de olika delarna ska vara åtkomstbara för andra delar av programmet. Är det public så kommer variabeln/klassen/funktionen vara synlig för övriga delar av programmet, är det private så kommer det enbart att vara synligt inom sitt scope. Till exempel så kommer variabeln m_Effect endast gå att använda inom klassen LightBulb då den är private medan variabeln m_IsOn kan användas från hela programmet då den är public. Alla variabler som man i en klass deklarerar med var är unika för varje instans (kopia) av klassen som man skapar, för att skapa en variabel som är likadan för alla instanser så kan man använda static istället för var.
Jag väljer att döpa variabler som ligger i klasser så att de börjar med prefixet m_, detta är en helt personlig preferens som jag fått av att läsa en bok vid namn Game Coding Complete. Själv tycker jag att det är trevligt att döpa variabler så men det är upp till var och en vad man själv gillar (tills man kommer till ett företag, då måste man följa standarden som förmodligen finns på företaget).
Om man nu vill använda denna LightBulb-klass som gör man som nedan:
var light:LightBulb = new LightBulb();
trace(light.m_IsOn);
light.switch();
trace(light.m_IsOn);
På första raden så deklarerar vi en variabel av typen LightBulb (som ni ser går det att använda även klasser som datatyper), till den så måste vi skapa en ny instans av LightBulb genom att anropa nyckelordet new. Det kan liknas med att skapa ett föremål (instans) av en ritning (klass).
Därefter så skriver vi ut värdet på variabeln m_IsOn som finns inuti light genom att skriva light.m_IsOn, detta illustrerar sätter man kommer åt variabler och funktioner inom objekt - genom att skriva en punkt och sedan namnet på variabeln/funktionen. Därefter anropar vi funktionen switch() på vår light och den kommer då att skriva ut något annat då vi nästa gång skriver ut värdet av light.m_IsOn.
3 - Börja med spelet
3.1 - Skapa spelarklassen
Skapa ytterligare en ny fil, denna gången av typen ActionScript File, lägg den i samma mapp som projektet och döp den till Player.as. Detta är den fil där kod för spelaren ska placeras, lägg till följande kod i textfönstret:
package
{
import flash.display.MovieClip;
public class Player extends MovieClip
{
}
}
I koden ovan så väljer vi att jobba i ett package utan namn (allt som ligger däri är åtkomligt utan att vi måste specificera var vi hittar det). Därefter väljer vi att använda oss av klassen MovieClip som är fördefinierad av flash genom nyckelordet import. Det sista vi gör är skapar en public (åtkomlig överallt) klass som vi kallar Player, denna klass sätter vi att utöka MovieClip-klassen genom att skriva nyckelordet extends vilket innebär att vi får tillgång till all funktionalitet som ett movieclip har, främst att det går att rita ut på skärmen.
3.2 - Rita en spelare
Det är nu dags att rita en spelare, och då jag är jättedålig på att rita så kommer jag göra en streckgubbe. Gå tillbaka till spelfilen (den som slutar på .fla) och välj penselverktyget och rita på, det är inte alls viktigt hur det ser ut så spendera inte jättemycket tid här.
Markera gubben och tryck F8, detta kommer att göra om gubben till en symbol (ett MovieClip eller en bild eller liknande), i rutan som dyker upp skriv Player som namn och klicka i rutan "Export for actionscript" samt se till att rutan "Export in frame 1" är ikryssad. Se även till att det står Player i textfältet märkt "Class". Se även till att referenspositionen hamnar i mitten av spelaren, det gör man genom att mitten-rutan i de 9 fyrkanterna märkta Registration är markerad (alltså inte som det är på bilden, mitten ska vara markerad istället).
Nu kommer spelaren att hamna i biblioteket samt vara på scenen som ett MovieClip av typen Player, att vi kryssade i "Export for actionscript" och valde att skriva Player i fältet märkt Class innebär även att MovieClip'et är knutet till vår kod som vi skrev tidigare. Det är nu dags att göra lite mer kod så att det händer någonting spännande!
3.3 - Börja skriva kod
Öppna filen Player.as och lägg till följande kod över eller under den befintliga import-raden:
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
Detta ger oss tillgång till en klass som heter Timer som är till för att automatiskt anropa en specifik funktion i vår kod med jämna intervall. TimerEvent är det som skickas med i varje anrop till vår funktioner, det är egentligen ingenting som vi bryr oss om ännu men som ändå måste med, likaså med Event.
Lägg till följande som sista rad inuti klassen Player (det vill säga innan måsvingen som avslutar klassen Player):
private var m_Timer:Timer;
Detta deklarerar en private (ej åtkomlig för andra klasser) variabel av typen Timer. Denna ska vi senare skapa en instans av och konfigurera att anropa en annan funktion i vår klass med jämna intervall.
Lägg nu till följande kod inom klassen Player:
private function Update(event:TimerEvent):void
{
x = x + 10;
}
Här skapas en funktion som heter Update, den tar en parameter av typen TimerEvent och returnerar ingenting (void). Det som händer inuti funktionen är att variabeln x ökas med 1. Denna variabel är någonting vi har fått ifrån MovieClip och kontrollerar spelarens position på scenen. Denna position har origo (startpunkt) i övre vänstra hörnet och x är positivt åt höger och y är positivt nedåt (ja, nedåt). Att y ökar ju längre ner på scenen man kommer är rätt ovant i början men man vänjer sig efter ett tag.
Vi lägger nu till en konstruktor för vår klass, en konstruktor är en funktion som heter likadant som klassen och anropas när vi skapar en instans av klassen (lägg denna inom klassen Player):
public function Player()
{
m_Timer = new Timer(20);
m_Timer.addEventListener(TimerEvent.TIMER, Update);
m_Timer.start();
}
Det som händer inuti är att på första raden så skapar vi en instans (vi gör ett riktigt objekt av vår klass) av Timer till vår variabel genom att skriva new, som parameter skickar vi värdet 20 vilket innebär att timern kommer skicka uppdateringar var 20:e millisekund. Nästa rad talar om för Timern vilken funktion som ska anropas varje runda, vi sätter detta till vår nyligen skrivna Update-funktion, den första parametern anger helt enkelt att det är när timern uppdaterar som funktionen ska anropas. På sista raden så startas timern så att den börjar anropa vår funktion.
Nu så kommer det faktiskt att hända någonting om man kör igång projektet! Växla till .fla-filen och tryck Ctrl-Enter för att starta. Gubben kommer då att röra sig rätt så snabbt åt höger, det är en bra början - härnäst väntar styrning.
3.4 - Styrning
Att få reda på inmatning från mus och tangentbord fungerar på liknande sätt som Timern vi använde ovan. Man ber om att flash ska anropa en funktion varje gång en tangent trycks ner. För att kunna använda det måste vi först lägga till ett par imports:
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
Genom dessa kan vi snart be flash om att få tangentbordsinmatning som snart kommer visas. Vi kommer att registrera en event listener för eventet (händelsen) att en tangent trycks ner. En event listener är en funktion som tar ett event in som parameter och som anropas varje gång någonting inträffar som man lyssnar efter.
Lägg följande kod i klassens konstruktor (funktionen som heter Player):
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
Här används nyckelordet stage, det betyder att det är scenen som vi samlar inmatning från. Till stage lägger vi alltså till två event listeners, en som lyssnar på när tangenter trycks ner (den första) och en som lyssnar efter att tangenter släpps upp.
Gör först en variabel i klassen Player som är av typen int och som heter m_Move, sätt variabeln till private. Facit: (private var m_Move:int;). Sedan skapar vi två stycken konstanter av typen int som vi kan använda oss av (läggs i klassen Player):
public const RIGHT:int = 1;
public const LEFT:int = -1;
Nyckelordet const betyder att det är ett konstant värde som inte kan ändras, dessa sätter vi till att vara 1 respektive -1. I detta fallet är det enbart för att göra koden tydligare.
För att lyssna efter inmatning så väljer vi ovan två funktioner, keyDownHandler och keyUpHandler vilka ser ut såsom:
function keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.RIGHT)
{
m_Move = RIGHT;
} else if(event.keyCode == Keyboard.LEFT)
{
m_Move = LEFT;
}
}
function keyUpHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.RIGHT)
{
if (m_Move == RIGHT)
{
m_Move = 0;
}
} else if (event.keyCode == Keyboard.LEFT)
{
if (m_Move == LEFT)
{
m_Move = 0;
}
}
}
Båda dessa funktioner tar in en parameter av typen KeyboardEvent då det är en tangentbordsnedtrycknining som vi lyssnar efter, denna parameter kallas event i båda funktionerna. I denna event så finns det en variabel som heter keyCode, med hjälp av denna så kan vi läsa av vilken tangent som trycktes ner (eller släpptes upp). Vi testar om det är någon tangent som vi är intresserade av som trycks ner genom att först jämföra med Keyboard.RIGHT (högerpilen),om så inte är fallet så testar vi med hjälp av else ifall det är Keyboard.LEFT (vänsterpilen) som trycks ner. Beroende på vilken tangent som trycks ner så sätter vi vår variabel m_Move till antingen LEFT eller RIGHT (vilket är konstanterna som vi definierade nyss).
Om vi skulle köra igång projektet nu så skulle det inte hända någonting speciellt då vi inte gör någonting av vår processade input. Detta löser vi genom att förändra funktionen Update så att den ser ut som följande:
Som en övning, testa att implementera detta själv. Det som funktionen ska göra är att variabeln x ska ändras med avseende på m_Move så att spelaren kan förflyttas höger och vänster. Hädanefter kommer de flesta kodsnuttar att uppmana till att träna på att koda, man lär sig mycket bättre genom att skriva kod och försöka lösa problem själv så det är någonting som jag verkligen uppmuntrar till och jag kommer att lämna en hel en liten bit luft innan kod och eventuella tips.
private function Update(e:TimerEvent):void
{
x += m_Move * 10;
}
Det som görs är helt enkelt att x ökas med m_Move (multiplicerat med 10 för att få lite högre fart). Detta fungerar då m_Move är 1 vid rörelse åt höger och då kommer x att öka, och vice versa för rörelse åt vänster. Då m_Move är noll så blir x oförändrat.
3.5 - Kollisionstest
Nu kan dock spelaren röra sig utan för skärmen, det är ju inte så bra. Vi bör därför testa om spelarens position är utanför skärmen. Gör en ny funktion i Player som heter checkBounds, inga parametrar, inget returvärde och den ska inte vara synlig för andra. Denna funktion ska kontrollera om spelarens position i x-led ligger inom scenen, om så ej är fallet så ska spelaren flyttas så att positionen är inom gränsen, de gränser som ska testas mot är 0 och stage.stageWidth (bredden på scenen). Glöm inte heller att anropa på funktionen från Update, och gör detta helst efter att spelarens position är modifierad så att spelaren inte flyttas utanför skärmen precis efter att vi korrigerat positionen.
private function Update(e:TimerEvent):void
{
x += m_Move;
checkBounds();
}
private function checkBounds():void
{
if (x < 0)
{
x = 0;
} else if(x > stage.stageWidth)
{
x = stage.stageWidth;
}
}
Det som händer i checkBounds är att positionen testas mot 0 med hjälp av en if-sats och om spelarens position är mindre så sätts positionen till 0. Om positionen inte är mindre än 0 så testas om den ligger utanför scenen bredd, och så är fallet så sätts positionen till scenens bredd.
3.6 - Gravitation
Nu skulle det vara häftigt med lite fysik, gravitation närmare bestämt. Gravitation fungerar så att man lagrar en hastighet för spelaren, denna hastighet ökas i riktningen neråt vid varje uppdatering och sedan adderas helt enkelt denna hastighet till spelarens position. Börja med att skapa en private variabel som är av typen Number och som heter m_Vy (V står för Velocity), och initialisera den ett valfritt värde, med fördel ett negativt som inte är alltför stort (jag valde -10) då det ger bäst effekt. Se till att denna variabel ökar vid varje uppdatering och addera sedan variabeln till positionen.
private function Update(e:TimerEvent):void
{
m_Vy += 0.7;
y += m_Vy;
x += m_Move;
checkBounds();
}
private var m_Vy:Number = -10;
Det som sker här är att vi deklarerar en variabel som heter m_Vy och initialiserar den till -10. Denna variabel representerar hastigheten i yled för spelaren och denna variabel ökas med ett visst värde varje frame för att simulera accelerationen från gravitationen, därefter ökas y-koordinaten med hastigheten i y-led.
3.7 - Mark
Problemet nu är att man trillar utanför skärmen, så det roliga tar slut på bara någon sekund. Men man kan ändå skymta att det finns gravitation med i bilden - framförallt eftersom spelaren försvinner ;). Modifiera funktionen checkBounds så att den även kollar mot stage.stageHeight för att se ifall spelaren är under kanten eller inte. För att undvika att halva spelaren är utanför kanten kan man ta hjälp av variabeln height för att få reda på hur hög ens egna figur är. Om spelaren är utanför kanten ska även hastigheten i y-led sättas till 0.
private function checkBounds():void
{
if (x < 0)
{
x = 0;
} else if(x > stage.stageWidth)
{
x = stage.stageWidth;
}
if (y + height / 2 > stage.stageHeight)
{
y = stage.stageHeight - (height/2);
m_Vy = 0;
}
}
På ungefär samma sätt som förut så jämförs spelarens koordinat mot kanten, fast denna gången i y-led. Notera hur jämförelsen utförs med hjälp av height / 2. Detta innebär att man testar mot underdelen av MovieClipet istället (förutsatt att referenspunkten är satt i mitten) vilket gör att gubben inte hamnar delvis utanför fönstret. Positionen korrigeras även enligt height / 2. I övrigt innehåller funktionen inga överraskningar utan fungerar som specifierat ovan.
3.8 - Hoppa
Nästa steg är att göra så att man kan hoppa. Tänk lite på hur detta kan göras, notera att det ska bara vara möjligt att hoppa om man står på marken. Inom spoilern finns tips hur detta skulle kunna implementeras men försök gärna att komma fram till en egen lösning, det är just sådant som programmering till stor del går ut på och det är ju det som är det roligaste! Jag måste dock förvarna att detta kan vara ett ganska så svårt problem att lösa.
Använd en variabel som heter m_Falling och intialisera denna till true. Sätt denna variabel till false varje gång kollision upptäcks och sätt den till true varje gång spelaren hoppar och låt bara spelaren hoppa när variabeln är false. Denna variant är inte jätterobust men den duger bra att börja med (om den bara utökas lite så fungerar den för det mesta men då måste andra större ingrepp göras i koden). För att göra så att spelaren hoppar så sätt helt enkelt y-hastigheten till ett lagom stort negativt värde (-15 till exempel) när ett KeyboardEvent med keyCode Keyboard.UP mottags i keyDownHandler.
private function checkBounds():void
{
if (x < 0)
{
x = 0;
} else if(x > stage.stageWidth)
{
x = stage.stageWidth;
}
if (y + height / 2 > stage.stageHeight)
{
y = stage.stageHeight - (height/2);
m_Vy = 0;
m_Falling = false;
}
}
function keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.RIGHT)
{
m_Move = RIGHT;
} else if(event.keyCode == Keyboard.LEFT)
{
m_Move = LEFT;
} else if(event.keyCode == Keyboard.UP)
{
if (!m_Falling)
{
m_Vy = -15;
m_Falling = true;
}
}
}
private var m_Falling = true;
Nu börjar det bli lite krångligare kod. Att kunna hoppa baserar sig på att variabeln m_Falling är satt till false eftersom man måste stå på marken för att kunna hoppa. Vi vet att man inte faller så fort man rör marken, alltså sätter vi den variabeln till false när vi känner av att spelaren är nedanför skärmkanten i funktionen checkBounds. Dessutom finns det bara ett tillfälle då man kan börja falla igen och det är efter att man har hoppat, så då sätter vi alltså m_Falling till true.
Detta exempel fungerar dock inte jättebra om man vill att en spelare ska kunna springa ner från plattformar, då får man tillämpa någon annan algoritm.
4 - Fiende
4.1 - Deklarera fiendeklassen
Nu när man kan hoppa och springa runt så känns det som att det fattas någonting, en fiende till exempel. Skapa en ny klass som heter Enemy och som extendar MovieClip, precis som Player gör (se början av guiden för en närmare beskrivning på hur man gjorde för att göra nya klasser) och kopiera all kod som inte har med inmatning att göra från Player till Enemy:
package
{
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
public class Enemy extends MovieClip
{
public function Enemy()
{
m_Timer = new Timer(20);
m_Timer.addEventListener(TimerEvent.TIMER, Update);
m_Timer.start();
}
private function Update(e:TimerEvent):void
{
m_Vy += 0.7;
y += m_Vy;
checkBounds();
}
private function checkBounds():void
{
if (x < 0)
{
x = 0;
} else if(x > stage.stageWidth)
{
x = stage.stageWidth;
}
if (y + height / 2 > stage.stageHeight)
{
y = stage.stageHeight - (height/2);
m_Vy = 0;
}
}
private var m_Vy:Number = -10;
private var m_Timer:Timer;
}
}
4.2 - Rita fiende
Nu är det dags att rita en fiende, välj cirkelverktyget och rita en boll i en snygg färg. Jag valde röd. Markera sedan bollen och konvertera den till ett MovieClip genom att klicka F8. Sätt namnet till Enemy och kryssa i "Export for actionscript" samt "Export in frame 1" och sätt klassen till Enemy. Sätt även registration i mitten.
Gör även en ny blank keyframe efter första framen och skriv GAME OVER med stora bokstäver över skärmen i någon snygg font. Gå sedan tillbaka till frame 1 och skriv stop(); i actionscript-fönstret. Detta gör så att flash stannar på frame 1 och inte börjar spela upp hela filmen.
4.3 - Programmera fiende
Enemy kommer inte vara så spännande så vi lägger till att den kan röra sig även i sidled. Vi vill även att fienden ska kunna studsa mot alla kanter av skärmen. Tänk även på att det kan vara bra att förändra vissa delar av checkCollision så att inte halva fienden hamnar utanför skärmen i sidled. Inom spoilern finns tips hur detta kan göras men försök gärna själv först.
Ungefär som hastigheten i y-led så kan x-hastigheten lagras i en variabel som heter exempelvis m_Vx, denna variabel kan initialiseras till någonting så att fienden rör sig i sidled från början. Att bollen studsar är lite klurigare. Ett bra sätt att göra det på att helt enkelt att byta tecken på hastigheten i den riktning som fienden kolliderar mot en vägg.
private function checkBounds():void
{
if (x - width / 2 < 0)
{
x = width / 2;
m_Vx = -m_Vx;
} else if(x + width / 2 > stage.stageWidth)
{
x = stage.stageWidth - width / 2;
m_Vx = -m_Vx;
}
if (y + height / 2 > stage.stageHeight)
{
y = stage.stageHeight - (height/2);
m_Vy = -m_Vy;
}
}
private var m_Vx:Number = 5;
Det som sker här är att hastighets-variabeln i den riktning det är fråga om helt enkelt byter tecken vid kollision. Detta gör så att det ser ut som att bollen studsar, vilket är fruktansvärt ballt. Vi lägger även till en variabel som håller koll på hastigheten i x-led. Tyvärr är fienden ännu inte så fientlig, men det ska vi snart fixa!
4.4 - Fientlig fiende
Gå till .fla-filen och markera MovieClipet som innehåller Player och som ligger på scenen. Notera att i properties så finns det ett fält märkt instance name, detta är namnet som vi kan använda för att referera till spelaren i kod, och det vill vi gärna göra. Döp Player till player, och gör sedan samma sak med Enemy fast döp den till enemy. Lägg sedan till en public variabel i klassen Player som är av typen MovieClip och döp den till m_Enemy.
I update ska det även läggas till en kontroll ifall spelaren kolliderar med detta m_Enemy-movieclip. För att göra detta måste man först kontrollera så att m_Enemy är skilt från null, och sedan använda funktionen hitTestObject för att testa kollision. Ifall kollision sker så ska scenen byt frame till frame 2. Adobe (jag är rätt säker på att det infördes efter att adobe köptde upp flash men jag kan ha fel) tyckte dock tydligen att det var för enkelt att skriva _root.gotoAndStop(2); så från och med actionscript 3.0 måste man istället skriva: MovieClip(root).gotoAndStop(2);. Glöm inte heller att stoppa båda timers (tips: byt m_Timer från private till public i enemy).
private function Update(e:TimerEvent):void
{
m_Vy += 0.7;
y += m_Vy;
x += m_Move * 10;
checkBounds();
if (m_Enemy != null)
{
if (hitTestObject(m_Enemy))
{
m_Timer.stop();
//Jag har bytt fiendens timer från private till public
m_Enemy.m_Timer.stop();
MovieClip(root).gotoAndStop(2);
}
}
}
public var m_Enemy:MovieClip;
Det som händer är att man först kollar ifall det finns en enemy lagrad i m_Enemy genom att kolla den mot null, om det finns ett objekt så använder man flashs inbyggda funktion hitTestObject som testar det egna objektet mot m_Enemy och returnerar true ifall de kolliderar. Ifall de kolliderar så stoppar vi vår timer så att vi inte får en massa felmeddelanden, vi stoppar även fiendens timer som jag i smyg har bytt från private till public. Sedan byter vi frame på scenen som vi får tag på genom MovieClip(root). gotoAndStop innebär att den stannar på framen som den går till, vilket vi vill - annars hade vi kunnat använda gotoAndPlay istället.
Testa sedan om det fungerar, om allting går som det ska så måste man numera undvika fienden för att överleva! Om det av någon anledning inte går som det ska så kan jag rekommendera att ni försöker lösa det själva, man lär sig väldigt bra genom att rätta kompilatorfel. Annars är det bara att slänga iväg en fråga så ska jag svara så gott jag kan. Jag kommer att bifoga mitt slutgiltiga projekt längre ner också.
4.5 - Tweaka
Det är nu det är dags för att tweaka lite värden på gravitation, hur stor spelaren är, hur fort bollen färdas och så vidare för att göra ett lite utmanande och spännande spel! Jag utelämnar detta åt läsaren som en sista övning.
5 - Animera spelaren
Det ser rätt så stelt ut när man springer runt utan animationer, och det är inte heller någonting som är jättekomplicerat att lägga in. Jag rekommenderar att medan ni testar animationer så gör spelaren odödlig genom att i .fla-filen med scenen markerad på frame 1 byta ut raden:
player.m_Enemy = enemy;
till:
player.m_Enemy = null;
På detta sätt så kontrollerar spelare inte om man krockar med fienden och det blir betydligt lättare att kolla sina animationer.
5.1 - Idle-animationen
För ett häftigare resultat är det lämpligt att tillämpa det som står nedan med att rita en massa keyframes på att animera spring-animationen istället för idle-animationen. Min idle-animation bestod enbart av två keyframes som ni kan se i det bifogade projektet.
Börja med att dubbelklicka på spelaren på scenen för att öppna dess movie clip. Då får man fram en ny timeline som gäller för enbart spelarens movie clip, det är här vi ska rita alla animationer. Börja med att rita ett antal keyframes som bilder den animationen som ska visas när spelaren är idle. För att rita detta så högerklickar man och väljer "Insert keyframe" för varje bild som man vill rita, eller "Insert blank keyframe" om ni inte vill att det som tidigare fanns på timelinen ska följa med.
När alla keyframes är färdiga, markera den första keyframen i animationen och skriv sedan in vad animationen ska heta i fältet label i properties-fönstret. Denna animation valde jag att kalla "idle". För att se en preview på animationen så kan man trycka enter.
Efter den sista keyframen i animationen så lägg till ytterligare en keyframe (den kommer inte att synas så man behöver inte rita en ny bild till den), gå sedan till kodfönstret och skriv:
gotoAndPlay("idle");
Detta kommer göra så att när animationen når den sista keyframen så börjar den om, vilket skapar en loop. Detta innebär att vi har ett rätt så stor flexibilitet vad gäller våra animationer vilket kommer synas lite senare när vi gör en spring-animation.
Förmodligen så vill man att varje keyframe ska synas lite längre tid än vad som är standard. Då kan det vara smidigt att lägga in vanliga frames mellan keyframes för vid vanliga frames så förändras inte bilden. Detta för att animationen annars skulle gå alldeles för fort (det går inte att sänka hastigheten på enskilda movie clips). Mitt spel körs i 30 fps (ställs in i properties vid scenen utan något markerat) och jag har lagt in 2 st frames efter varje keyframe för att få en lämplig hastighet men det beror på hur många keyframes man orkar rita.
5.2 - Spring-animation
Spring-animationen bör inledas med att det finns några frames som ger en snyggare övergång från att vara idle tills det att man springer än om man bara börjar med en spring-loop. Gör precis som i idle och rita några keyframes och lägg in vanliga frames för att utöka längden på varje keyframe. Lägg även in en label på första framen som heter "run".
Skillnaden mot hur vi gjorde i "idle" är att vi efter denna animation som är en övergång från att vara idle till att spelaren springer är att vi helt enkelt fortsätter med att göra en spring-loop. Animera på samma sätt här. Den första framen i spring-loopen kan döpas till någonting i stil med "runloop". I vår kod för att loopa skriver vi då alltså nu istället:
gotoAndPlay("runloop");
När vi då sätter animationen till "run" så kommer först övergången att spelas upp en gång och sedan kommer spring-loopen igång, vilket ger ett bra resultat.
5.3 - Animationskod
Det är nu dags att göra några förändringar i Player.as. Vi måste hålla reda på vilken animation som redan spelas så att vi inte startar om samma animation som vi redan är i, sen vill vi gärna skriva en funktion för att sätta animation så att det räcker med att skriva till exempel setAnimation("idle"); när vi vill byta animation.
I vårt fall vill vi även helst undvika att behöva göra en animation för att springa åt varje håll. Det vore istället smidigt att spegelvända spelaren när man springer åt vänster, då behöver vi bara rita animationen för att springa åt höger. Detta gör vi genom att använda scaleX vilket är variabeln för att kontrollera storleken i x-led för ett movieclip, om vi sätter scaleX till -1 så innebär det en spegelvändning av ett movie clip. När vi anropar på vår setAnimation så är det ett bra ställe att korrigera scaleX beroende på vilket håll vi rör oss åt.
public function setAnimation(anim:String):void
{
if (m_Move == LEFT)
{
scaleX = -1;
} else
{
scaleX = 1;
}
if (m_Animation != anim)
{
m_Animation = anim;
gotoAndPlay(anim);
}
}
private var m_Animation:String ;
Koden ovan håller som specificerat reda på vilken animation som är aktuell samt spegelvänder movieclipet beroende på åt vilket håll spelaren rör sig.
Det som återstår är nu att sätta animationen när tangenter släpps ner eller trycks upp:
function keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.RIGHT)
{
m_Move = RIGHT;
setAnimation("run");
} else if(event.keyCode == Keyboard.LEFT)
{
m_Move = LEFT;
setAnimation("run");
} else if(event.keyCode == Keyboard.UP)
{
if (!m_Falling)
{
m_Vy = -15;
m_Falling = true;
}
}
}
function keyUpHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.RIGHT)
{
if (m_Move == RIGHT)
{
m_Move = 0;
setAnimation("idle");
}
} else if (event.keyCode == Keyboard.LEFT)
{
if (m_Move == LEFT)
{
m_Move = 0;
setAnimation("idle");
}
}
}
Testa och se hur det fungerar, nu bör det spelas upp animationer när man springer - och även när man är idle om ni la in en speciell animation för det. Det vore även snyggt med en animation för att hoppa och kanske en animation för när man faller, men att implementera det överlämnar jag som en övning åt läsaren.
Klicka här för ett demo! (ofarlig fiende)
Klicka här för ett demo! (farlig fiende)
6 - Avslutning
Detta är bara början och det är nu det roliga börjar med att göra sitt första alldeles egna spel! Personligen inledde jag min bana inom flashprogrammering med en asteroid-klon med ljud och allting till och det var ett riktigt roligt projekt, dock var det i actionscript 2.0 (eller kanske 1.0, minns inte riktigt) så källkoden är tyvärr inte längre alltför aktuell. Som avslutning vill jag önska ett stort lycka till och jag hoppas att åtminstone någon kanske har fått upp ögonen för flash genom denna guide. Jag skulle väldigt gärna uppskatta kommenterar om ni hittat några fel eller oklarheter, jag har testat all kod men det är mycket möjligt att jag har missat någonting och att det blivit något copy&paste fel från flash eller liknande.
6.1 - Källkod
Klicka här för att ladda ner projektet!
Slut!
