Share
I denne opplæringen vil vi tegne et utvalg rektangel med musen (sett i strategispill som StarCraft og Command and Conquer), og vi vil også lære å velge enheter med rektangelet!
La oss se på det endelige resultatet vi vil jobbe for:
Klikk og dra med musen for å tegne et rektangel som vil velge hvilken som helst soldat som den berører.
Hvis du bruker Flash, lager du en ny ActionScript 3.0-fil med størrelsen '550 x 400'. Men hvis du ikke bruker Flash IDE og bruker en annen, for eksempel FlashDevelop eller Flash Builder, inneholder denne opplæringen SWC-filene, slik at du kan bruke MovieClips fra din foretrukne IDE. Hvis du er nysgjerrig på hvordan du importerer MovieClips med din IDE, sjekk ut Beginners Guide til FlashDevelop og Beginner's Guide to FDT!
Jeg bør også være oppmerksom på at jeg har tatt med FLA-filen hvis du ikke ønsker å tegne noe av ditt eget materiale.
Ok, nå kan du være litt forvirret hvis du ikke har jobbet med klasser før. Hvis du ønsker å lære mer om hvorfor klasser er viktige i programmeringen, sjekk ut denne artikkelen av kirupa, eller denne veiledningen til dokumentklassen.
Opprett en ny 'ActionScript 3.0 Class' og gi den navnet 'SelectionDemo'. Når filen er opprettet, lagre den som 'SelectionDemo.as'. Du bør lagre filer hele tiden. Jeg kan ikke stresse dette nok, men hvor mange ganger jeg har glemt å redde arbeid som jeg har gjort og mistet alt, har ikke tenkt på. Så vær så snill, lagre filene!
Hvis du bruker en IDE som genererer koden for deg når du oppretter klassen, bør du ha mesteparten av koden nedenfor. Du må likevel legge til linjene som jeg har uthevet:
pakke import flash.display.MovieClip; offentlig klasse SelectionDemo utvider MovieClip offentlig funksjon SelectionDemo ()
Vi er ikke ferdige ennå! Hvis du bruker Flash IDE, naviger til 'Egenskaper Panel' og sett 'DocumentClass' til 'SelectionDemo'. Hvis du lurer på hva det betyr, betyr det at når din applikasjon / spill drives av Flash Player, vil denne klassen være hovedklassen som styrer spillet. Kult, hei?
Kjør programmet; Hvis du ikke får noen feil, bør du være god å gå!
Nå skal vi være klare til å gjøre rektangelet! Denne delen vil inneholde noen få funksjoner, det er alt. Nedenfor er koden for tegning av rektangelet:
pakke // IMPORTERE DE KLASSEENE vi trenger importere flash.display.MovieClip; importer flash.events.MouseEvent; importer flash.geom.Rectangle; importer flash.display.Sprite; offentlig klasse SelectionDemo utvider MovieClip public var selectionRect: Rectangle; // Vil holde dataene for rektangelet. offentlig var selectionSprite: Sprite = new Sprite (); // Lag en ny Sprite for å tegne rektangelet. offentlig funksjon SelectionDemo () // Legge til lyttere stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); offentlig funksjon SetStartPoint (meg: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Opprette valget rektangel.
Nå er det litt ubrukelig å ha et rektangel som vi ikke kan se, ikke sant? Nøyaktig, så la oss komme i gang!
Flott, nå må vi tegne rektangelet på skjermen ved hjelp av selectionSprite variabel du sett i siste utdrag. Hvorfor bruke en sprite, spør du? Alle Sprites inneholder a grafikk objekt, som igjen inneholder en metode som kalles drawRect () Dette gjør at vi enkelt kan tegne et rektangel dynamisk i AS3.
Nedenfor har jeg plassert koden for å tegne rektangelet med kommentarer:
pakke // IMPORTERE DE KLASSEENE vi trenger importere flash.display.MovieClip; importer flash.events.MouseEvent; importer flash.geom.Rectangle; importer flash.display.Sprite; importere flash.events.Event; offentlig klasse SelectionDemo utvider MovieClip public var selectionRect: Rectangle; // Vil holde dataene for rektangelet. offentlig var selectionSprite: Sprite = new Sprite (); // Lag en ny Sprite for å tegne rektangelet. offentlig var isMouseHeld: boolsk; // Vil fortell oss om museknappen er Opp / Ned offentlig funksjon SelectionDemo () // Initializing isMouseHeld = false; // Musen holdes ikke enda. stage.addChild (selectionSprite); // Legg til valgetSkjul til scenen. stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Hør for museklikk. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Lytt til musens utgivelse. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Kjør denne funksjonen hver ramme (24 FPS). offentlig funksjon SetStartPoint (meg: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Opprette valget rektangel. isMouseHeld = true; // Musen holdes nå. offentlig funksjon RemoveRectangle (meg: MouseEvent): void isMouseHeld = false; // Musen holdes ikke lenger. offentlig funksjon UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Fjern rektangelet slik at det er klart å bli trukket på nytt. hvis (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Angi bredden på rektangelet. selectionRect.height = stage.mouseY - selectionRect.y; // Sett høyden på rektangelet. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); // Sett grensen til rektangelet. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Sett fyll og gjennomsiktighet av rektangelet. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Tegn rektangelet til scenen! selectionSprite.graphics.endFill (); // Stopp å fylle rektangelet.
Hvis du har den koden, kjør programmet og se det virke!
I flash lager du en ny MovieClip og tegner en enhet. I den første rammen tegner du bare en enhet; I den andre rammen legger du til en grønn sirkel under enheten eller noe som lar spilleren vite at enheten er valgt. Det skal se slik ut:
Jeg har også nettopp tegnet en rask gresk bakgrunn på scenen for å få det til å se fint ut :)
Nå har du opprettet MovieClip, høyreklikk symbolet i biblioteket ditt og velg Egenskaper. Merk av i boksene som sier "Eksporter til ActionScript" og "Eksporter i ramme 1". Gi så navnet 'Enhet'. Dine eiendommer bør se slik ut:
Merk: Når du klikker "OK", kan du få en advarsel fordi det ikke finnes en slik klasse "Enhet" ennå. Hvis ja, klikk OK, og vi skal fikse dette nå ved å lage en ny klasse!
Husk før du eksporterte Unit MovieClip? Det er her vi lager klassen for den MovieClip. Så opprett en ny ActionScript-klassefil som heter 'Unit.as' og plasser denne koden i klassen:
pakke import flash.display.MovieClip; offentlig klasse Enhet utvider MovieClip public var isActive: Boolean; // Forteller oss om enheten er valgt eller ikke. offentlig funksjon Enhet () isActive = false; // Enheten er ikke valgt ennå. gotoAndStop (1); // Gå til og hold deg på den første rammen (ingen valgring).
Fremover, kamerater!
Nå er det på tide å legge til enhetene på scenen og gi dem en posisjon. Også, vi skal plassere hver enhet i et "Array". En matrise er i utgangspunktet en liste som tillater oss å få tilgang til tingene inni den ved hjelp av en indeks. Et godt eksempel på arrays er rett ved Republic of Code; De har også blitt forklart her i AS3 101: Arrays.
Her er den oppdaterte koden for 'SelectionDemo.as'. Først legger vi til et nytt offentlig kallt Array unitList like etter de andre variablene:
public var selectionRect: Rektangel; // Vil holde dataene for rektangelet. offentlig var selectionSprite: Sprite = new Sprite (); // Lag en ny Sprite for å tegne rektangelet. offentlig var isMouseHeld: boolsk; // Vil fortell oss når musen er Opp / Ned offentlig var unitList: Array; // Alle enhetene holdes her inne
Deretter oppdaterer vi Hoved funksjon ved å plassere en funksjon som kalles PlaceUnits (15);. Vi vil skape dette på et øyeblikk.
offentlig funksjon SelectionDemo () // Initialisering isMouseHeld = false; // Musen holdes ikke enda. stage.addChild (selectionSprite); // Legg til valgetSkjul til scenen. PlaceUnits (15); // Kaller en funksjon for å plassere enhetene på scenen. // Legge til lyttere stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Hør for museklikk. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Lytt til musens utgivelse. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Kjør denne funksjonen hver ramme (24 FPS).
Tid til å gjøre funksjonen! Ok, vi vil plassere denne funksjonen etter UpdateGame (e: Hendelse): void funksjonen og hva denne funksjonen vil gjøre er å legge til mengden enheter du angir i parentesene til scenen. Vi vil også legge til enhetene i listen og gi dem tilfeldige stillinger på scenen mens de sørger for at de ikke kan gyte av scenen.
offentlig funksjon PlaceUnits (mengde: int): void unitList = new Array (); // Opprette en ny Array (liste) for å holde alle enhetene. for (var jeg: int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. stage.addChild(unit); // Adding the new unit to the stage. unitList.push( unit ); // Placing the unit in the Array(list).
Når du kjører dette, bør du ha 15 enheter tilfeldig plassert. Tid til å gå videre og programmere enhetens valg.
Når du kjører spillet, vil du sannsynligvis se at det er en merkelig overlapping av enhetene. La oss fikse det! Dette er ekstremt enkelt og krever bare en liten endring i PlaceUnits () funksjon.
I utgangspunktet er det vi trenger å legge til alle enhetene i en Array (liste), og deretter sortere listen basert på enhetens Y (vertikale posisjon). Jo lavere Y-egenskapen, jo lenger bakover skal det være. Vi vil endre PlaceUnits () funksjon til:
Accentsconagua
offentlig funksjon PlaceUnits (mengde: int): void unitList = new Array (); // Opprette en ny Array (liste) for å holde alle enhetene. for (var jeg: int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. unitList.push( unit ); // Placing the unit in the Array(list). unitList.sortOn("y", Array.NUMERIC); // Sorting the list in order of the 'y' properties! for( var j:int = 0; j < amount; j++ ) // We will run through this loop again to add the units. stage.addChild( unitList[j] ); // This adds the 'sorted' unit to the stage. Der har vi det? ikke flere overlapper!
Nå vil hver ramme sjekke om noen enheter er valgt; Hvis de har det, vil vi få deres valgring til å vises.
Rediger UpdateGame () funksjon til følgende:
offentlig funksjon UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Fjern rektangelet slik at det er klart å bli trukket på nytt. hvis (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Angi bredden på rektangelet. selectionRect.height = stage.mouseY - selectionRect.y; // Sett høyden på rektangelet. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); // Sett grensen til rektangelet. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Sett fyll og gjennomsiktighet av rektangelet. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Tegn rektangelet til scenen! selectionSprite.graphics.endFill (); // Stopp å fylle rektangelet. CheckForSelection (); // Vi vil sjekke for å se om noen enheter er valgt.
Som du kan se, la vi til en funksjon som heter CheckForSelection (). La oss skape den funksjonen etter de andre:
offentlig funksjon CheckForSelection (): void for hver (varenhet: Enhet i unitList) // For hver enhet som er i Unit Array (liste)? if (unit.hitTestObject (selectionSprite)) // Hvis valgSprite berører enheten. unit.select (); // Gjør enheten valgt. ellers unit.deselect (); // De-velg enheten.
Som du kan se i de uthevede linjene, å velge() og fjerner markeringen () Funksjoner eksisterer ikke. Åpne opp 'Unit.as' og la oss legge dem inn:
pakke import flash.display.MovieClip; offentlig klasse Enhet utvider MovieClip public var isActive: Boolean; // Forteller oss om enheten er valgt eller ikke. offentlig funksjon Enhet () isActive = false; // Enheten er ikke valgt ennå. gotoAndStop (1); // Gå til og hold deg på den første rammen (ingen valgring). offentlig funksjon velg (): void isActive = true; // Enheten er valgt. gotoAndStop (2); // Vis ringen. offentlig funksjon avvelg (): void isActive = false; // Enheten er ikke valgt. gotoAndStop (1); // Ikke vis ringen.
Kjør spillet og alle skal jobbe!
Nå som du har fullført denne opplæringen, har jeg nå noen utfordringer for deg å følge. Du er velkommen til å hoppe over dem, men å følge dem vil hjelpe deg med å lære.
Nybegynner:
middels:
Avansert:
Gjør bare de utfordringene du føler deg komfortabel med!
Takk for at du har lest denne opplæringen, og jeg håper du lærte noe nytt. Også, jeg vil også takke Tomas Banzas for kunsten han gjorde!
Hvis du har fullført noen av utfordringene og ønsker å vise resultatene, vennligst legg inn en lenke i kommentarene - jeg vil gjerne se dem!
