Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in februari 2010.
In deze zelfstudie maakt u een herbruikbare scoreklasse die meetelt tot het nieuwe totaal wanneer punten worden toegevoegd (in plaats van omhoog te springen naar de nieuwe score). We behandelen het maken van afbeeldingen en code.
In sommige games wanneer u punten behaalt, ziet u dat uw score onmiddellijk naar het nieuwe totaal gaat. Ik denk dat het veel cooler is als de score één voor één optelt, zodat de speler "punten kan verzamelen". Dat is wat we hier gaan maken.
Hier is een voorbeeld van de scoreklasse in actie:
Het belangrijkste idee achter deze zelfstudie is om u te leren hoe u de "optel" -functionaliteit programmeert, maar ik zal u ook laten zien hoe u de coole LED-display kunt creëren die u in de preview ziet. We beginnen met het ontwerpen van de nummers:
Maak een nieuw Flash-bestand (ActionScript 3.0). Je filminstellingen zijn afhankelijk van je game. Voor deze demo installeer ik mijn film als 500x300, zwarte achtergrond en 30 fps.
Maak een nieuw filmclipsymbool (invoegen> nieuw symbool). Geef dit symbool de naam "cijfer".
Gebruik de teksttool in de filmclip om een nummer 0 toe te voegen aan het symbool. Ik gebruik een lettertype met de naam Digital Readout, maar elk lettertype met een LED-stijl zou moeten werken.
Zet het tekstformaat op 40 pt en maak het een lichte oranje / oranje kleur (# F4C28B). Stel het Alineaformaat in op gecentreerd.
Voeg twee afzonderlijke gloeifilters toe aan uw tekstveld. Stel de kleur in op rood (# FF0000) voor beide en stel de sterkte van beide in op 200%.
Schakel het selectievakje Binnenste gloed in voor één en stel de vervaging in op 2px. Verlaat de ander met 5px Blur.
Je kunt een andere kleur gebruiken als je wilt (blauw of groen ziet er allebei cool uit). De truc om het er realistisch uit te laten zien, is door de tekstkleur een beetje vervaagd te maken en de gloed een verzadigde kleur te geven. Hierdoor lijkt het erop dat het licht uitstraalt.
Maak keyframes op frames 1-10 van de cijferfilmclip. Een eenvoudige manier om dit te doen is om frames 1-10 te selecteren (klik frame 1, dan Shift-klik frame 10) en druk op F6.
U zou nu 10 frames moeten hebben, elk met een keyframe met uw gloeiend 0 tekstveld. Ga door elk frame en verander de cijfers zodat je de cijfers 0-9 hebt. Frame 1 heeft "0", frame 2 heeft "1", frame 3 heeft "2", enz.
Noem deze laag "nummers".
We voegen nu een "uit" -status toe voor de LED-nummers, zodat u de niet verlichte segmenten van de LED-display kunt zien.
Kopieer je 8 cijfers (in frame 9). Maak een nieuwe laag met de naam "achtergrond". Gebruik de nieuwe laag om Plakken op zijn plaats te gebruiken (Bewerken> Plakken op zijn plaats) om het achtcijfer in de exacte positie te plakken als degene die we hebben gekopieerd.
Verwijder de gloed van het nieuwe 8-cijferige en verander de kleur in donkergrijs (# 333333). Voeg een vervagingfilter toe met de vervaging ingesteld op 3px. Verplaats deze laag onder de laag 'getallen'.
Nu kun je door de frames schrobben en zien hoe de onverlichte segmenten van de LED achter elk nummer verschijnen.
Maak een nieuwe laag met de naam "acties". Open het deelvenster Acties en voeg een stop () -actie toe aan frame 1.
Hierdoor blijft het display '0' weergeven totdat we het anders vertellen.
Waarom plaatsen we elk cijfer handmatig op een eigen frame in plaats van een dynamisch tekstveld te gebruiken? Goede vraag.
De belangrijkste reden is dat dit het flexibeler maakt om de afbeeldingen later te updaten. Als u het ontwerp wilt wijzigen en bitmaps voor de getallen wilt gebruiken, of als elk cijfer in een ander lettertype of andere kleur wordt weergegeven, kunt u dat eenvoudig doen.
Ook als ontwerpers en ontwikkelaars samenwerken aan een project, is het het beste om dingen te maken op een manier die ontwerpers gemakkelijke toegang geeft tot zoveel mogelijk van de afbeeldingen..
Ik vind dat deze opstelling dat meer doet dan alleen het gebruik van dynamische tekst.
Maak een nieuwe filmclip met de naam "Score". Vink 'Exporteren voor ActionScript' aan en stel de klassenaam ook in op 'Scoren'.
Sleep de cijferfilmclip uit de bibliotheek naar de Score filmclip. Dupliceer de cijferclip (bewerken> dupliceren) zes keer (dus je hebt zeven cijfers) en plaats ze gelijkmatig in.
Omdat we slechts zeven cijfers hebben, is de maximale score die we kunnen weergeven 9.999.999. Als je game hogere scores nodig heeft, voeg dan meer cijfers toe.
Voeg een beetje meer spatie toe tussen elk derde cijfer om komma-scheidingstekens toe te staan.
Selecteer de meest linkse cijferige filmclip en geef deze de instantienaam "digit1". Noem de volgende rechts "digit2", dan "digit3" enzovoort.
Maak een nieuwe laag met de naam "komma's".
De eenvoudigste manier om de komma's er precies zo uit te laten zien als de getallen, is om naar een van de cijferfragmenten te gaan en een van de nummertekstvelden te kopiëren.
Terug in de Score filmclip, plak het tekstveld in de komma's laag en verander het aantal in een komma. Dupliceer het en verplaats het zo vaak als je nodig hebt.
Voor de achtergrond Score voegen we gewoon een eenvoudige afgeronde rechthoek toe.
Maak een nieuwe laag met de naam "achtergrond" en plaats deze achter de aantallen- en komma-lagen. Selecteer het gereedschap Rechthoek en houd Option ingedrukt en klik (Alt-klik) op het werkgebied. Maak een rechthoek 200px x 40px met 3px hoeken (maak de uwe langer als u meer cijfers hebt). Maak de vulling zwart en de lijn 1px grijs (# 666666).
Om de een of andere reden verstoort Flash altijd beroertes op afgeronde rechthoeken. Om dit te omzeilen, selecteert u de lijn en kiest u Modify> Shape> Convert Lines to Fills. Dit zet de lijn om van een lijn naar een gevulde vorm en deze zal niet langer vervormen.
Als u denkt dat dit een totale hack is van een tijdelijke oplossing voor basisfunctionaliteit die jaren geleden al had moeten worden opgelost, raad ik u aan contact op te nemen met Adobe en hem te laten weten.
Welke afbeelding zou compleet zijn zonder een iPhone-achtige glans?
Maak een nieuwe laag boven alles genaamd "shine". Voeg een nieuwe afgeronde rechthoek toe, iets kleiner dan de achtergrond. Deze keer geef je het geen streek en vul je het met een wit verloop van 20% Alpha tot 0% Alpha.
Maak een nieuw Actionscript-bestand met de naam "Score.as". Sla het op in dezelfde map als je hoofd Flash-bestand. Omdat de naam van deze klasse en de naam van de exportklasse van onze Score-filmclip hetzelfde zijn, zal Flash ze automatisch koppelen.
Voeg deze code toe aan het Score.as-bestand:
pakket import flash.display.MovieClip; import flash.events.Event; public class Score breidt MovieClip uit // CONSTRUCTOR public function Score ()
Dit is voorlopig slechts een lege schil van een klasse. We moeten de klasse MovieClip uitbreiden omdat deze klasse is gekoppeld aan een filmclip in de bibliotheek, dus we moeten ook de MovieClip-klasse importeren. We zullen de ENTER_FRAME-gebeurtenis gebruiken, dus we importeren ook de gebeurtenisklasse.
Voeg deze twee regels toe aan de scoreklasse net boven de constructorfunctie.
private const SPEED: int = 1; // hoe snel privé const te tellen NUM_DIGITS: int = 7; // hoeveel cijfers zijn er in de score
Dit zijn twee constanten - een soort van instellingen voor de klas.
Laten we nu een paar variabelen toevoegen. Zet deze net onder de constanten:
privé var _totalScore: int = 0; privé var _displayScore: int = 0;
Deze variabelen bevatten de twee verschillende versies van onze score. "_totalScore" is de feitelijke score. "_displayScore" is het nummer dat momenteel is
wordt weergegeven op het LED-display. Als ik 50 optel bij de score, zal de _totalScore onmiddellijk 50 zijn, maar de _displayScore zal 1 zijn, dan 2, dan 3, tot het 50 is.
Als je ooit de werkelijke score wilt weten (graag naar je high score boards sturen) gebruik je _totalScore omdat _displayScore misschien niet accuraat is.
Ik gebruik underscores aan het begin van de variabelenamen om aan te geven dat dit privévariabelen zijn.
Dus als _totalScore een privévariabele is, hoe krijgen we dan toegang van buiten de scoreklasse? We zullen een "accessor" of "getter" -methode gebruiken.
Voeg deze methode toe onder de constructorfunctie:
// openbare accessor voor de publieke functie totalScore krijgt totalScore (): int return _totalScore;
Deze methode retourneert eenvoudig de waarde van de _totalScore-variabele. Het geeft ons een manier om toegang tot die waarde te krijgen zonder het als publieke variabele bloot te leggen.
We hebben een manier nodig om punten toe te voegen aan de score. Voeg deze methode toe:
// voeg een bedrag toe aan de score public function add (amount: int): void _totalScore + = amount; addEventListener (Event.ENTER_FRAME, updateScoreDisplay); // start het weergeven van het scherm
Deze methode accepteert een geheel getal "bedrag" dat wordt toegevoegd aan de _totalScore-variabele. De tweede regel start een ENTER_FRAME-gebeurtenis die een methode aanroept genaamd updateScore elk frame weergeven. We zullen dat volgende toevoegen.
Voeg nu de updateScoreDisplay-methode toe. Dit is waar alle coole optelfunctionaliteit zal plaatsvinden. Het moet een evenement accepteren omdat het wordt gebeld door een ENTER_FRAME-gebeurtenis.
// dit voert elk frame uit om de score bij te werken persoonlijke update updateScoreDisplay (e: Event): void
Laten we nu wat functionaliteit toevoegen. Het eerste dat deze methode zal doen, is de _displayScore-variabele te verhogen met het bedrag dat we instellen in onze SPEED-constante:
// verhoog de display-score met het snelheidsbedrag _displayScore + = SPEED;
Er is hier echter een potentieel probleem. Wat als onze snelheid is ingesteld op 10 en we proberen 5 bij te dragen aan de score? De displayScore zal hoger zijn dan de totalScore. Laten we een paar regels toevoegen om dat te verhelpen:
// zorg ervoor dat de display score niet hoger is dan de werkelijke score als (_displayScore> _totalScore) _displayScore = _totalScore;
Dat controleert of de displayScore hoger is dan de totale score en, als dat zo is, stelt de displayScore gelijk aan de totale score.
Vervolgens moeten we de voorloopnullen toevoegen aan de score. We doen dit door de displayScore om te zetten in een string en nullen toe te voegen totdat de lengte gelijk is aan het aantal cijfers dat is gedefinieerd door de constante NUM_DIGITS:
var scoreStr: String = String (_displayScore); // cast displayScore als een tekenreeks // voeg voorloopnullen toe terwijl (score Lengte < NUM_DIGITS) scoreStr = "0" + scoreStr;
Om nu de score daadwerkelijk weer te geven gaan we door elk van onze cijferfragmenten lopen (onthoud dat we toen "digit1", "digit2", etc.) noemden en gebruik het overeenkomstige nummer uit de score-reeks om het framenummer van de klem:
// doorlussen en werk elk cijfer bij voor (var i: int = 0; i < bedrag met NUM_DIGITS; i ++) var num = int (scoreStr.charAt (i)); dit ["cijfer" + (i + 1)]. gotoAndStop (num + 1); // plaats het cijfer mc in het rechterframe
De methode charAt haalt het teken uit een tekenreeks op de opgegeven positie. Hiermee kunnen we karakter voor teken door de scoretekenreeks gaan.
Met de haakjes in de volgende regel kunnen we de naam van de clip dynamisch maken. De code, Deze [ "cijfer" + (i + 1)] opent de clip met de naam "digit1" of "digit2", enz., afhankelijk van de waarde van ik.
We gebruiken "num + 1" als framenummer omdat de framenummers met 1 worden gecompenseerd door de cijfers die erin staan (frame 1 toont 0, frame 2 toont 1, etc.)
Het laatste wat we in deze methode moeten doen, is controleren of de displayScore en de totale score gelijk zijn. Als dat het geval is, kunnen we de luisteraar verwijderen en voor nu stoppen met het aanroepen van deze methode.
// als de weergavescore gelijk is aan de totale score, verwijder de gebeurtenis enterframe als (_totalScore == _displayScore) removeEventListener (Event.ENTER_FRAME, updateScoreDisplay);
Als u ergens in die stap bent verdwaald, kunt u de bronbestanden bekijken om de voltooide klasse te zien.
Als u deze klasse wilt gebruiken, sleept u de Score-filmclip uit de bibliotheek naar het werkgebied en geeft u deze de instantienaam "myScore". U kunt punten aan uw score toevoegen door deze regel in uw documentklasse te gebruiken:
myScore.add (50);
U kunt hiervan een voorbeeld zien in de bronbestanden. Ik voeg aan de score toe wanneer er op de bumpers wordt geklikt, maar u zult waarschijnlijk add () aanroepen wanneer er gebeurtenissen in uw game optreden.
Als u de score van de speler wilt weten, kunt u de totaalscore behalen door:
myScore.totalScore
Dit roept de accessor-methode aan en retourneert de waarde van _totalScore.
Je hebt nu een herbruikbare tellende Score-klasse die je in elk van je games kunt gebruiken.
Ik denk dat de LED-look cool is, maar je moet het ontwerp beslist aanpassen aan het uiterlijk van je game. Hier zijn een paar ideeën voor verschillende ontwerpen om u op weg te helpen:
Bedankt voor het lezen van deze tutorial. Laat me weten wat je denkt!
Accentsconagua