Share
În acest tutorial, vom desena un dreptunghi de selecție cu mouse-ul (așa cum se vede în jocurile de strategie precum StarCraft și Command and Conquer) și vom învăța cum să selectăm unități cu dreptunghi!
Să aruncăm o privire la rezultatul final la care vom lucra:
Faceți clic și trageți cu mouse-ul pentru a desena un dreptunghi care va selecta orice soldat pe care îl atinge.
Dacă utilizați Flash, creați un nou fișier ActionScript 3.0 cu dimensiunea "550 x 400". Cu toate acestea, dacă nu utilizați Flash IDE și folosiți un altul, cum ar fi FlashDevelop sau Flash Builder, acest tutorial conține fișierele SWC, astfel încât să puteți folosi MovieClips din cadrul IDE preferat. Dacă sunteți curios cum să importați MovieClips cu IDE-ul dvs., consultați Ghidul începătorului pentru FlashDevelop și Ghidul începătorului pentru FDT!
De asemenea, trebuie să menționez că am inclus fișierul FLA în cazul în care nu doriți să vă desenați materialele proprii.
Ok, acum s-ar putea să fii puțin confuz dacă nu ai mai lucrat cu clase înainte. Dacă doriți să aflați mai multe despre motivul pentru care cursurile sunt importante în programare, consultați acest articol de kirupa sau acest ghid pentru clasa de documente.
Creați o nouă "clasă ActionScript 3.0" și dați-i numele "SelectionDemo". Când fișierul a fost creat, salvați-l ca "SelectionDemo.as". Ar trebui să salvați fișiere tot timpul. Nu pot să subliniez acest lucru suficient, dar numărul de ori pe care l-am uitat să salvez munca pe care am făcut-o și i-am pierdut totul nu-i mai trebuie să mă gândesc. Deci vă rog, salvați fișierele!
Dacă utilizați un IDE care generează codul pentru dvs. atunci când creați clasa, ar trebui să aveți majoritatea codului de mai jos. Cu toate acestea, trebuie să adăugați încă liniile pe care le-am evidențiat:
pachet import flash.display.MovieClip; clasa publică SelectionDemo extinde MovieClip funcția publică SelectionDemo ()
Încă nu am terminat! Dacă utilizați Flash IDE, navigați la panoul "Proprietăți" și setați "DocumentClass" pe "SelectionDemo". Dacă vă întrebați ce înseamnă, atunci când aplicația / jocul dvs. este rulată de Flash Player, această clasă va fi clasa principală care gestionează jocul. Tare nu?
Rulați programul; dacă nu obțineți nici o eroare atunci ar trebui să fiți bine să mergeți!
Acum ar trebui să fim gata să facem dreptunghiul! Această parte va conține câteva funcții, asta-i tot. Mai jos este codul pentru desenarea dreptunghiului:
pachet // IMPORTAREA CLASEI WE NEED import flash.display.MovieClip; importul flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; clasa publică SelectionDemo extinde MovieClip public var selectionRect: Rectangle; // Va păstra datele pentru dreptunghiul nostru. public var selectionSprite: Sprite = Sprite nou (); // Efectuarea unui nou Sprite pentru desenarea dreptunghiului. funcția publică SelectionDemo () // Adăugarea ascultătorilor stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); funcția publică SetStartPoint (me: MouseEvent): void selectionRect = nou dreptunghi (stage.mouseX, stage.mouseY); // Crearea dreptunghiului de selecție.
Acum, e inutil să ai un dreptunghi pe care nu-l putem vedea, nu-i așa? Exact, deci să începem!
Mare, acum trebuie să tragem dreptunghiul pe ecran folosind selectionSprite variabilă pe care ați văzut-o în ultimul fragment. De ce să folosiți un sprite, vă întrebați? Toți Sprites conțin a grafică obiect, care la rândul său conține o metodă numită drawRect () acest lucru ne permite să tragem cu ușurință un dreptunghi dinamic în AS3.
Mai jos, am plasat codul pentru desenarea dreptunghiului, cu comentarii:
pachet // IMPORTAREA CLASEI WE NEED import flash.display.MovieClip; importul flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; importul flash.events.Event; clasa publică SelectionDemo extinde MovieClip public var selectionRect: Rectangle; // Va păstra datele pentru dreptunghiul nostru. public var selectionSprite: Sprite = Sprite nou (); // Efectuarea unui nou Sprite pentru desenarea dreptunghiului. public var isMouseHeld: Boolean; // Ne va spune dacă butonul mouse-ului este funcția publică Up / Down SelectionDemo () // Inițierea isMouseHeld = false; // Mouse-ul nu este încă ținut. stage.addChild (selectionSprite); // Adăugarea selecțieiSprii la scenă. starea.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Ascultați pentru țineți mouse-ul. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Ascultați pentru eliberarea mouse-ului. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Executați această funcție în fiecare cadru (24 FPS). funcția publică SetStartPoint (me: MouseEvent): void selectionRect = nou dreptunghi (stage.mouseX, stage.mouseY); // Crearea dreptunghiului de selecție. isMouseHeld = adevărat; // Mouse-ul este acum ținut. funcția publică RemoveRectangle (me: MouseEvent): void isMouseHeld = false; // Mouse-ul nu mai este ținut. funcția publică UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Ștergeți dreptunghiul astfel încât să fie gata să fie tras din nou. dacă (isMouseHeld) selectRect.width = stage.mouseX - selectionRect.x; // Setați lățimea dreptunghiului. selectionRect.height = stage.mouseY - selectionRect.y; // Setați înălțimea dreptunghiului. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0.6); // Setați marginea dreptunghiului. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Setați umplutura și transparența dreptunghiului. selectionSprite.graphics.drawRect (selecțieRect.x, selecțieRect.y, selecțieRect.șir, selecțieRect.height); // Desenați dreptunghiul pe scenă! selectionSprite.graphics.endFill (); // Opriți umplerea dreptunghiului.
Dacă aveți codul respectiv, rulați aplicația și urmăriți-o!
În bliț, creați un nou filmClip și desenați unitatea. În primul cadru, trageți doar o unitate; în cel de-al doilea cadru, adăugați un cerc verde sub unitate sau ceva care îi permite jucătorului să știe că unitatea a fost selectată. Ar trebui să arate ceva de genul:
De asemenea, am atras doar un fundal ierboaric pe scena pentru a face sa arate bine :)
Acum ați creat MovieClip, faceți clic dreapta pe simbolul din Bibliotecă și selectați Proprietăți. Bifați casetele care afișează "Export la ActionScript" și "Export în cadru 1". Apoi, dați-i numele "Unitate". Proprietățile dvs. ar trebui să arate astfel:
Notă: când faceți clic pe "OK", puteți primi un avertisment, deoarece nu există încă o astfel de clasă "Unitate". Dacă da, faceți clic pe OK și vom remedia acest lucru acum, făcând o nouă clasă!
Amintiți-vă mai devreme când ați exportat unitatea MovieClip? Aici creăm clasa pentru filmul respectiv. Deci, creați un nou fișier de clasă ActionScript numit "Unit.as" și plasați acest cod în cadrul clasei:
pachet import flash.display.MovieClip; unitatea publică de clasă extinde MovieClip public var isActive: Boolean; // Ne spune dacă unitatea este selectată sau nu. funcția publică funcția () isActive = false; // Unitatea nu a fost încă selectată. gotoAndStop (1); // Mergeți la și rămâneți pe primul cadru (fără inel de selecție).
Înainte, tovarăși!
Acum este momentul să adăugați Unitățile la scenă și să le dați o poziție. De asemenea, vom plasa fiecare unitate într-un "Array". O matrice este în principiu o listă care ne permite să accesăm lucrurile din interiorul ei folosind un index. Un exemplu excelent de matrice este exact la Republica de Cod; acestea au fost, de asemenea, explicate aici în AS3 101: Arrays.
Aici este codul actualizat pentru "SelectionDemo.as". Mai întâi, adăugăm o nouă arhivă publică numită unitList imediat după celelalte variabile:
public var selectionRect: dreptunghi; // Va păstra datele pentru dreptunghiul nostru. public var selectionSprite: Sprite = Sprite nou (); // Efectuarea unui nou Sprite pentru desenarea dreptunghiului. public var isMouseHeld: Boolean; // ne va spune când mouse-ul este Up / Down public unitate varList: Array; // Toate unitățile vor fi ținute aici
Apoi, actualizăm Principal funcția prin plasarea unei funcții numite PlaceUnits (15);. Vom crea acest lucru într-un moment.
funcția publică SelectionDemo () // Initializarea isMouseHeld = false; // Mouse-ul nu este încă ținut. stage.addChild (selectionSprite); // Adăugarea selecțieiSprii la scenă. PlaceUnits (15); // Apelarea unei funcții pentru a plasa unitățile pe scenă. // Adăugarea ascultătorilor stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Ascultați pentru țineți mouse-ul. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Ascultați pentru eliberarea mouse-ului. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Executați această funcție în fiecare cadru (24 FPS).
Este timpul să faceți această funcție! Ok, vom plasa această funcție după UpdateGame (e: Event): void funcția și ce va face această funcție este să adăugați cantitatea de unități pe care ați specificat-o în paranteze la scenă. Vom adăuga, de asemenea, unitățile pe listă și le vom oferi poziții aleatorii pe scenă, asigurându-ne că nu vor putea să iasă din scenă.
funcția publică PlaceUnits (suma: int): void unitList = new Array (); // Efectuarea unui nou tabel (listă) pentru a ține toate unitățile. pentru (var i: 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).
Când executați acest lucru, ar trebui să aveți 15 unități plasate aleatoriu. Este timpul să treceți și programați selecția unității.
Când executați jocul, probabil veți vedea că există o suprapunere ciudată a unităților. Să rezolvăm asta! Acest lucru este extrem de ușor și va necesita doar o mică schimbare la PlaceUnits () funcţie.
Practic, ceea ce trebuie să facem este să adăugăm toate unitățile într-o listă Array (listă) și apoi să sortăm lista pe baza Y (poziția verticală) a unităților. Cu cât proprietatea Y este mai mică, cu atât mai mult ar trebui să fie înapoi. Vom schimba PlaceUnits () funcția:
Accentsconagua
funcția publică PlaceUnits (suma: int): void unitList = new Array (); // Efectuarea unui nou tabel (listă) pentru a ține toate unitățile. pentru (var i: 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. Acolo o avem? nu mai sunt suprapuse!
Acum, în fiecare cadru vom verifica dacă au fost selectate unități; dacă au atunci vom face inelul de selecție să apară.
Editați UpdateGame () funcționează la următoarele:
funcția publică UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Ștergeți dreptunghiul astfel încât să fie gata să fie tras din nou. dacă (isMouseHeld) selectRect.width = stage.mouseX - selectionRect.x; // Setați lățimea dreptunghiului. selectionRect.height = stage.mouseY - selectionRect.y; // Setați înălțimea dreptunghiului. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0.6); // Setați marginea dreptunghiului. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Setați umplutura și transparența dreptunghiului. selectionSprite.graphics.drawRect (selecțieRect.x, selecțieRect.y, selecțieRect.șir, selecțieRect.height); // Desenați dreptunghiul pe scenă! selectionSprite.graphics.endFill (); // Opriți umplerea dreptunghiului. CheckForSelection (); // Vom verifica dacă au fost selectate unități.
După cum puteți vedea, am adăugat o funcție numită CheckForSelection (). Să creăm această funcție după celelalte:
Funcția publică CheckForSelection (): void pentru fiecare (unitate var: Unitate în unitateList) // Pentru fiecare unitate care se află în lista Array (listă)? if (unit.hitTestObject (selectionSprite)) // Daca selectionSprite atinge unitatea. unit.select (); // Faceți unitatea selectată. altceva unit.deselect (); / / Deselectați unitatea.
După cum puteți vedea în liniile evidențiate, Selectați() și deselectarea () funcții nu există. Deschideți "Unit.as" și să le punem în:
pachet import flash.display.MovieClip; unitatea publică de clasă extinde MovieClip public var isActive: Boolean; // Ne spune dacă unitatea este selectată sau nu. funcția publică funcția () isActive = false; // Unitatea nu a fost încă selectată. gotoAndStop (1); // Mergeți la și rămâneți pe primul cadru (fără inel de selecție). funcția publică select (): void isActive = true; // Unitatea este selectată. gotoAndStop (2); // Arata inelul. funcția publică deselect (): void isActive = false; // Unitatea nu este selectată. gotoAndStop (1); // Nu afișați inelul.
Rulați jocul și totul ar trebui să funcționeze!
Acum că ați finalizat cu succes acest tutorial, acum am câteva provocări pe care să le urmați. Simțiți-vă liber să le ignorați, dar urmarea acestora vă va ajuta să învățați.
Începător:
Intermediar:
Avansat:
Faceți doar provocările cu care vă simțiți confortabil!
Mulțumesc că ați citit acest tutorial și sper că ați învățat ceva nou. De asemenea, aș dori să-i mulțumesc lui Tomas Banzas pentru arta pe care a făcut-o!
Dacă ați finalizat unele dintre provocări și doriți să prezentați rezultatele, vă rugăm să postați un link în comentarii - mi-ar plăcea să le văd!
