Deploy en tank på oppdrag i en isometrisk War Zone
Del
Del
3
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne leksjonen skal vi lage en liten tank flytte søknaden. Kjernen i denne opplæringen er å lage en tank sikte på musepekeren og kjør mot et museklikk.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Beveg musen for å gjøre turret sikte på det, og klikk hvor som helst for å komme på tanken å kjøre til det punktet
Trinn 1. : Grafikk Intro
Vel, la oss komme i gang .. For denne opplæringen vil vi trenger tank og tårn grafikk. Jeg brukte Google SketchUp 7 for å gjøre mine.
Først laget jeg en tank som helhet. Så snudde jeg programmets visningsmodus til «parallellprojeksjon", posisjonering kameraet mitt i en 45 ° vinkel til tanken å lage en illusjon av isometrics i spillet.
Vær så snill, ikke døm meg for forferdelige grafikk Jeg kan virkelig gjøre mye bedre, men dette er bare for moro skyld forklaring :)
Så jeg gjemte turret slik at bare tanken kroppen synlig og roteres kroppen ved 45 °-åtte ganger, gjengi hver posisjon separat. Så jeg oppnådde 8 forskjellige visninger av kroppen. Jeg gjorde det samme til turret mens tanken ble skjult. Jeg reddet alle 16 bildene som PNG 24 med alfakanal. Du kan se det endelige resultatet nedenfor. (Dette er egentlig ikke nok for denne type bevegelse, det ville være bedre å ha dobbelt så mange visninger av tanken, men det er nok i forbindelse med denne opplæringen.)
.
Du ikke nødvendigvis trenger å bruke Google SketchUp selvfølgelig, kan du ønsker å bruke 3ds max eller Maya eller hva du vil, kan du også bruke mine grafikk for å øve hvis du ikke vil eller kan ikke lage din egen grafikk.
Trinn 2: New Flash Prosjekt
Nå åpner opp Flash (jeg bruker Adobe Flash CS4) og velg Opprett ny Flash-fil (Actionscript 3.0). Vi trenger bare det å lage en tank MovieClip og koble Game klassen til den senere
Trinn 3:.. Sett Document Properties
Høyreklikk på scenen og gå til Properties Dokument elementet. Gjør det 600 x 400 (eller hva du vil) og 21 bilder per sekund (dette bildefrekvens synes å være optimal for meg så jeg nesten alltid bruke den. Det spiller egentlig ingen rolle, men).
Klikk OK. Gå til Fil > Lagre som Hotell og lagre denne filen som tank.fla i noen mappe på datamaskinen din (jeg anbefaler deg å lage en tank mappe og sette filen inne). Nå kan du gå til Fil > Import > Importer til bibliotek Opprett en ny tomt symbol ved å klikke denne lille ikonet i biblioteket: Velg MovieClip type og kaller symbolet "tank". Sett registreringspunkt i sentrum (registreringen er at liten svart firkant som rutenett av hvite firkanter, for de som ikke vet) Etter symbolet opprettet den vises i biblioteket (navnet "tank" er bare en kosmetisk navn som utelukkende brukes i biblioteket så det spiller ingen rolle hva du kaller det). Åpne den ved å dobbeltklikke på ikonet. Så 1.png fra biblioteket og dra den inn på symbolet etappe. Justere bildet til symbolet registrering punkt som i dette skjermbilde: Du vil registreringen poeng å være i sentrum av tankens svingradius Gå til symbol tidslinje. Endre navn på "Layer 1" til "Tank". Tanken din kropp image (1.png) bør være på det første bildet i dette laget. Klikk på andre ramme og uten å slippe museknappen dra markøren til det 8. ramme velge rammer 2 til 8. Høyreklikk deretter dette valgte området og velg "Konverter til tomme nøkkelbilder" Når 7 tomme nøkkelbilder er opprettet, velger du den andre rammen og dra 2.png til det samkjøre bildet med registreringspunkt (akkurat som du gjorde med 1.png); forestille seg at registreringspunktet er en akse at tanken vil bruke til å snurre rundt når den er slått. Gjør det samme til resten av rammene. Du trenger ikke å justere det veldig presist, men jo mer nøyaktig du justere det bedre bevegelsen vil se når tanken forsøker å følge markøren som spillet går Etter at du har dratt hvert bilde for å symbol scenen og justert dem velge det første bildet, og trykk F9 for å åpne handlinger panelet. Skriv inn en enkelt metode "stop ();" i det og lukke panelet. Dette er et viktig skritt fordi vi ikke ønsker at våre tanken å starte automatisk spinne rundt så snart det er lagt til scenen. Gå til biblioteket og lage en ny MovieClip symbol. Kall det turret Legg merke til at jeg har kalt turret bilder som dette: 1-.png, 2-.png og så videre, slik at de ikke ville erstatte tanken bildene når de importeres til biblioteket. Det kan være lurt å bruke mapper for å sette bildene inn. I dette tilfellet din turret og tank bilder kan ha samme navn Etter at vi er ferdig med turret symbol, åpne opp tanken symbol på nytt , opprette et nytt lag over "Tank" lag og dra turret filmklipp fra biblioteket på dette laget. Innrett turret med tanken kroppen. Resultatet skal se slik ut: Klikk én gang på turret å velge den (blå firkant rundt det vil indikere at det er valgt): ... så gå til egenskaper og gi den og forekomst navn mTurret (for MovieClip turret). Klikk på "Scene 1" for å avslutte modus symbol redigering Høyreklikk tanken symbol i biblioteket, velg Egenskaper (eller Heis hvis du bruker Flash CS3) fra rullegardinmenyen (pass på at du er i en avansert modus) , sjekk "Export for Actionscript", og for klassen 'navn skriv inn "Tank" (med stor T). Dette trinnet vil tillate oss å koble våre Tank MovieClip til de instanser som er opprettet ved hjelp av vårt Tank klasse i fremtiden Den grafikk delen er over for denne gang.; du kan slette den tanken fra scenen. Vi vil legge den programma senere I din Flash Authoring verktøy gå til Fil > Nye Gå til mappen der du lagret tank.fla fil og opprette en ny mappe som heter "main" inne. Lagre Actionscript-fil i denne mappen som TankMaker.as Først av alt, lage en pakke og importere de nødvendige klassene inn i det: Ordet "main" her betyr plasseringen av denne filen i forhold til vår tank.fla Vi må "vise" klasser å vise våre eiendeler på skjermen og "events" for å holde orden på mus hendelser Nå må vi erklære en public class TankMaker (i henhold til Actionscript-fil navn) og nødvendig variabler: Jeg erklærte alle variablene som "private" fordi jeg ikke vil at de skal være tilgjengelig fra hvor som helst utenfor denne klassen Rett under den siste variabelen opprette en offentlig funksjon og kaller det TankMaker. Det kommer til å være konstruktøren av klassen. Deretter legger en hendelse lytteren for Event.ADDED_TO_STAGE til det slik at vi kan lage vår tank objekt bare etter etappen er. Deretter passere denne hendelsen til metoden kalles addStage Etter at scenen er opprettet og ADDED_TO_STAGE hendelsen har utløst addStage () metoden det er på tide å lage en tank eksempel. Erklærer en privat funksjon og kaller det addStage. Datatypen av funksjonen vil være: Event. Og returtypen vil være "tom" fordi vi ikke kommer til å returnere noe fra den Opprett en egen funksjon mouseMoveListener () med en data type mus begivenhet å håndtere musebevegelser over scenen. Arrangementet lytteren å utløse denne funksjonen ble opprettet i forrige trinn Under slutten av vår mouseMoveListener () -funksjonen opprette en egen funksjon som heter mouseDownListener () med datatypen MouseEvent og gi det til moveTankOnEnterFrame metoden: Opprett en ny privat funksjon kalt moveTankOnEnterFrame () og inni den kalle en metode moveToCoordinates () med 3 parametre: Dette vil til slutt føre til at tanken å kjøre mot klikket punkt, hver ramme Nå har vi kalt moveToCoordinates () metoden, men vi har ikke skapt den ennå. La oss gjøre det nå. Tx og Ty vil ikke bli brukt, men vi må lage så mange parametere som vi ringte. Dette er hvordan det ser ut: Hvorfor bruke en avstand på 15? Vel, jeg fant ut at det aldri går utover 15 ved ganske enkelt å spore det slik: ... du kan gjøre det samme hvis du vil;) Som klassen vår er klar, la oss ta en titt på det som en helhet: Gå til Fil > Nye Her er koden for Game.as Klasse:.. Lagre filen. Alt den gjør er å lage en tank og legge den til hovedscenen, klar til å kontrollere Åpne opp tank.fla og gå til Properties panel. For klasse type i "Game" og lagre filen. Aha! Det vi går. Nå kan du trykke CTRL + ENTER på PC (CMD + RETURN på Mac) og teste spillet. Jeg håper du likte denne opplæringen, takk for lesing :) Anmeldelser
Trinn 4: Importere tanken bilder til Library
. Finn mappen der du lagret dine åtte tank bilder, velger dem alle og import til biblioteket
Trinn 5:.. New Symbol
Trinn 6:. Rediger Symbol
Trinn 7:. Lag Syv Blanke Key Frames
Trinn 8:. Drag All Bilder på scenen
Trinn 9:. Forhindre Tidslinje fra Spille
Trinn 10: Lag en Turret MovieClip
. Dobbeltklikk på symbolet ikon og gjøre det samme du gjorde med tanken MovieClip (trinn 4. til 8.) til turret men ved hjelp av turret bilder. Justere den til registreringspunktet på denne måten, på det punktet rundt som turret ville selvsagt slå:
Trinn 11:. Montering av Tank
Trinn 12: Gi Turret en Instance Name
Trinn 13 : Eksportere Din Tank for Action
Trinn 14:. Opprett en ny Action File
og opprette en ny Actionscript-fil.
Trinn 15: Save Your File
. Plasseringen av denne filen bør derfor være: tank /main /TankMaker.as
Trinn 16: La oss skrive noen kode
pakken hoved {import flash.display. *; import flash.events. *;}
Trinn 17:. Public Class og variabler
pakken hoved {import flash.display. *; import flash.events. *; public class TankMaker strekker Sprite {//forekomsten av vår Tank klasse (som vi eksportert for action før) private Var Tank: Tank; //De vars å holde koordinatene til et punkt der vi ønsker vår tank å flytte private Var moveTankToX: Number; private Var moveTankToY: Number; //Koordinatene for det punkt hvor tanken skal dens egen turret Div turnTurretToX: Nummer; private Var turnTurretToY: Number; //Nåværende posisjon av tanken private Var currentTankPositionX: Number; private Var currentTankPositionY: Number; private Var tankSpeed: Number = 2; //Det punktet der tanken beveger seg etter et museklikk privat Var Clickpoint: Object; //Vinkelen på tanken og turret rotasjon i radianer privat Var ATAN2: Nummer; private Var turretAtan2: Number; }}
Trinn 18:. Lag en Constructor Metode
offentlig funksjon TankMaker () {addEventListener (Event.ADDED_TO_STAGE, addStage);}
Trinn 19:. Lag en Tank Instance
privat funksjon addStage (e: Hendelses):. Void {//oppretter en ny tank forekomst av filmklipp //som du hadde eksportert for action tank = new Tank (); //Nå et lite triks, skalert jeg min tank ned //til størrelsen på om lag en fjerdedel av sin opprinnelige størrelse //slik at det var ikke så stort tank.scaleX = 0,25; tank.scaleY = 0,25; //Setter utgangsstillingen av tanken rett //i sentrum av scenen tank.x = stage.stageWidth /2; tank.y = stage.stageHeight /2; //Og legge den til displayet liste addChild (tank); //Nå legge hendelsen lyttere for mus ned og mus flytte //hendelser til scenen stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownListener); stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveListener); }
Trinn 20: Håndtering musebevegelser
privat funksjon mouseMoveListener. (E: MouseEvent): void {//oppretter en variabel for å holde den relative vinkel //mellom mus nåværende posisjon i grader //og tank nåværende posisjon Var vinkel: Number; //De neste 2 variabler er gonna be //lik muse nåværende posisjon turnTurretToX = e.stageX; turnTurretToY = e.stageY; //Beregne den relative vinkel i radianer //mellom musens curent posisjon //og tanken nåværende posisjon turretAtan2 = Math.atan2 (turnTurretToY - currentTankPositionY, turnTurretToX - currentTankPositionX); //Beregne den samme vinkel i grader. //For å få grader ut av radianer vi må //formere radianer med 180 og dele resultatet med PI //Men her er noen spesifikk av Flash //beregner den vinkelen ikke 0-360 //men 0-180 og fra - 180-0 //så la oss legge til noen betinget for å bli kvitt dette problemet hvis (Math.round (turretAtan2 * 180 /Math.PI) < 0) {//hvis vinkelen er mellom 0 og -180 legge 360 til den vinkelen = Math.round (turretAtan2 * 180 /Math.PI) + 360; } Else {//hvis ikke, regne det som vanlig vinkel = Math.round (turretAtan2 * 180 /Math.PI); } //Ha vår vinkel verdien som er lagret i en variabel //la oss rotere vår turret mot musepekeren //Jeg har gjort mye av beregninger prøver å //finne det ut, slik at du kan prøve å undestand min logikk //Jeg er bare å plukke den rette rammen av turret MC avhengig //på vinkelen på musen fra turret if (vinkel > 240 & & vinkel < 300) {//gå inne i tanken MovieClip deretter inne mTurret //gå til rammen 1 og stoppe tank.mTurret.gotoAndStop (1); } If (vinkel > 300 & & vinkel < 340) {tank.mTurret.gotoAndStop (2); } If ((vinkel > = 0 &Co. &Co. vinkel < 20) || (vinkel > 340 &Co. &Co. vinkel < = 360)) {tank.mTurret.gotoAndStop (3); } If (vinkel > 20 &Co. &Co. vinkel < 60) {tank.mTurret.gotoAndStop (4); } If (vinkel > 60 & & vinkel < 120) {tank.mTurret.gotoAndStop (5); } If (vinkel > 120 & & vinkel < 160) {tank.mTurret.gotoAndStop (6); } If (vinkel > 160 & & vinkel < 200) {tank.mTurret.gotoAndStop (7);; } If (vinkel > 200 & & vinkel < 240) {tank.mTurret.gotoAndStop (8); } //End}
Trinn 21: Mouse Klikk Handler
privat funksjon mouseDownListener (e: MouseEvent): void {//når klikket skjer tildele neste variabel //koordinatene til musepekeren nåværende posisjon moveTankToX = e.stageX; moveTankToY = e.stageY; //Og legge arrangementet lytteren å flytte tanken bilde for bilde addEventListener (Event.ENTER_FRAME, moveTankOnEnterFrame); }
Trinn 22: Move Tank Frame By Frame
privat funksjon moveTankOnEnterFrame (e: Hendelses ) {moveToCoordinates (tank, moveTankToX, moveTankToY);}
Trinn 23: Lær Tank To Move
.
private funksjons moveToCoordinates (tank_mc: Tank, TX: Antall, Ty: Number) {//oppretter en variabel for å holde den relative vinkel //mellom mus nåværende posisjon i grader //og tanken nåværende posisjon //eksisterer denne variabelen bare inne denne funksjonen slik //du vi kan bruke det samme navnet som vi brukte før Var vinkel: Number; //Beregne vinkelen (husk moveMouseListener //gjør vi det samme her, men med den tanken selv?) If (Math.round (ATAN2 * 180 /Math.PI) < 0) {vinkel = Math.round (ATAN2 * 180 /Math.PI) + 360; } Else {vinkel = Math.round (ATAN2 * 180 /Math.PI); } If (vinkel > 240 & & vinkel < 300) {tank.gotoAndStop (1); } If (vinkel > 300 & & vinkel < 340) {tank.gotoAndStop (2); } If ((vinkel > = 0 &Co. &Co. vinkel < 20) || (vinkel > 340 &Co. &Co. vinkel < = 360)) {tank.gotoAndStop (3); } If (vinkel > 20 &Co. &Co. vinkel < 60) {tank.gotoAndStop (4); } If (vinkel > 60 & & vinkel < 120) {tank.gotoAndStop (5); } If (vinkel > 120 & & vinkel < 160) {tank.gotoAndStop (6); } If (vinkel > 160 & & vinkel < 200) {tank.gotoAndStop (7); } If (vinkel > 200 & & vinkel < 240) {tank.gotoAndStop (8); } //Gi Clickpoint en verdi av en gjeldende museposisjon //når et klikk oppstår Clickpoint = {x: moveTankToX, y: moveTankToY}; //Beregne vinkelen i radianer mellom pekerens //nåværende posisjon og tank ATAN2 = Math.atan2 (clickPoint.y - tank_mc.y, clickPoint.x - tank_mc.x); //Nå legge en verdi på ATAN2 cosinus til tankens X posisjon //og sinus til sin Y posisjon hver ramme tank_mc.x + = Math.cos (ATAN2) * tankSpeed; tank_mc.y + = tak i Math.sin (ATAN2) * tankSpeed; //Nå gi verdiene til currentTankPositionX og //currentTankPositionY som vi brukte i vår mouseMoveListener currentTankPositionX = tank_mc.x; currentTankPositionY = tank_mc.y; //Og til slutt et lite triks. Siden vi ikke ønsker vår tank til //Start kaotisk vibrerer når den når sin destinasjon //må vi beregne avstanden mellom tankens posisjon og //klikkpunktet, og hvis det er mindre enn 15, fjerne ENTER_FRAME lytteren if ( Math.abs (tank_mc.x - clickPoint.x) < 15 & & Math.abs (tank_mc.y - clickPoint.y) < 15) {removeEventListener (Event.ENTER_FRAME, moveTankOnEnterFrame); }}
trace (Math.abs (tank_mc.x - clickPoint.x));
Trinn 24: overviewing hele Class
pakke main {import flash.display *.; import flash.events. *; public class TankMaker strekker Sprite {private Var Tank: Tank; private Var moveTankToX: Number; private Var moveTankToY: Number; private Var turnTurretToX: Number; private Var turnTurretToY: Number; private Var currentTankPositionX: Number; private Var currentTankPositionY: Number; private Var tankSpeed: Number = 2; private Var Clickpoint: Object; private Var ATAN2: Number; private Var turretAtan2: Number; offentlig funksjon TankMaker () {addEventListener (Event.ADDED_TO_STAGE, addStage); } Private funksjon addStage (e: Hendelses): void {tank = new Tank (); tank.scaleX = 0,25; tank.scaleY = 0,25; tank.x = stage.stageWidth /2; tank.y = stage.stageHeight /2; addChild (tank); stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownListener); stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveListener); } Private funksjon mouseMoveListener (e: MouseEvent): void {var vinkel: Number; turnTurretToX = e.stageX; turnTurretToY = e.stageY; turretAtan2 = Math.atan2 (turnTurretToY - currentTankPositionY, turnTurretToX - currentTankPositionX); if (Math.round (turretAtan2 * 180 /Math.PI) < 0) {vinkel = Math.round (turretAtan2 * 180 /Math.PI) + 360; } Else {vinkel = Math.round (turretAtan2 * 180 /Math.PI); } If (vinkel > 240 & & vinkel < 300) {tank.mTurret.gotoAndStop (1); } If (vinkel > 300 & & vinkel < 340) {tank.mTurret.gotoAndStop (2); } If ((vinkel > = 0 &Co. &Co. vinkel < 20) || (vinkel > 340 &Co. &Co. vinkel < = 360)) {tank.mTurret.gotoAndStop (3); } If (vinkel > 20 &Co. &Co. vinkel < 60) {tank.mTurret.gotoAndStop (4); } If (vinkel > 60 & & vinkel < 120) {tank.mTurret.gotoAndStop (5); } If (vinkel > 120 & & vinkel < 160) {tank.mTurret.gotoAndStop (6); } If (vinkel > 160 & & vinkel < 200) {tank.mTurret.gotoAndStop (7);; } If (vinkel > 200 & & vinkel < 240) {tank.mTurret.gotoAndStop (8); }} Privat funksjon mouseDownListener (e: MouseEvent): void {moveTankToX = e.stageX; moveTankToY = e.stageY; addEventListener (Event.ENTER_FRAME, moveTankOnEnterFrame); } Private funksjon moveTankOnEnterFrame (e: Hendelses) {moveToCoordinates (tank, moveTankToX, moveTankToY); } Private funksjon moveToCoordinates (tank_mc: Tank, TX: Antall, Ty: Number) {var vinkel: Number; if (Math.round (ATAN2 * 180 /Math.PI) < 0) {vinkel = Math.round (ATAN2 * 180 /Math.PI) + 360; } Else {vinkel = Math.round (ATAN2 * 180 /Math.PI); } If (vinkel > 240 & & vinkel < 300) {tank.gotoAndStop (1); } If (vinkel > 300 & & vinkel < 340) {tank.gotoAndStop (2); } If ((vinkel > = 0 &Co. &Co. vinkel < 20) || (vinkel > 340 &Co. &Co. vinkel < = 360)) {tank.gotoAndStop (3); } If (vinkel > 20 &Co. &Co. vinkel < 60) {tank.gotoAndStop (4); } If (vinkel > 60 & & vinkel < 120) {tank.gotoAndStop (5); } If (vinkel > 120 & & vinkel < 160) {tank.gotoAndStop (6); } If (vinkel > 160 & & vinkel < 200) {tank.gotoAndStop (7); } If (vinkel > 200 & & vinkel < 240) {tank.gotoAndStop (8); } Clickpoint = {x: moveTankToX, y: moveTankToY}; ATAN2 = Math.atan2 (clickPoint.y - tank_mc.y, clickPoint.x - tank_mc.x); tank_mc.x + = Math.cos (ATAN2) * tankSpeed; tank_mc.y + = tak i Math.sin (ATAN2) * tankSpeed; currentTankPositionX = tank_mc.x; currentTankPositionY = tank_mc.y; if (Math.abs (tank_mc.x - clickPoint.x) < 15 & & Math.abs (tank_mc.y - clickPoint.y) < 15) {removeEventListener (Event.ENTER_FRAME, moveTankOnEnterFrame); }}}}
Trinn 25: Slutt Strokes
, og opprette en ny Actionscript-fil. Lagre det som "Game.as" i samme mappe som din tank.fla fil. Dette vil være vårt dokument klasse
Pakke {import flash.display *; //Importere innholdet i våre hovedmappen import hoved. *; public class Spill strekker MovieClip {private Var newTank: TankMaker; offentlig funksjon Game () {//oppretter en ny forekomst av vår tank maker klasse newTank = new TankMaker (); //Og legge den til scenen selvfølgelig addChild (newTank); }}}
Trinn 26:. Fest Spill Class til FLA