Share
Vandaag leert u hoe u de achtergrondkleur van een sprite-werkblad kunt verwijderen met AS3 en slaat u het resultaat over naar een bitmapcanvas. Lees verder voor meer informatie!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Dus, het is tijd om je spritesheet te tekenen. Open je favoriete 'pixel-art' programma en maak een afbeelding van 128x128 en geef het een achtergrondkleur van '# e731f2' wat een mooie paarse kleur is!
Dit is mijn geweldige kunstwerk:
Sla je afbeelding ergens georganiseerd op en laat ons doorgaan!
Nu, ik noem dit een sprite vel ook al is het maar één afbeelding. Een 'sprite sheet' bestaat meestal uit meer dan één sprite, maar we kunnen ons voorstellen dat we meer hebben, juist?
Hoe dan ook, als u Flash CS4 of hoger gebruikt, importeert u eenvoudig uw afbeelding via Bestand | Importeren | Importeren naar bibliotheek:
Als u een andere AS3 IDE gebruikt, heb ik het SWC-bestand opgenomen, dus u moet deze stap waarschijnlijk overslaan. Als u uw eigen afbeeldingen wilt insluiten, weet ik zeker dat uw IDE naar keuze deze functie heeft.
We hebben nu onze sprite sheet in de bibliotheek; we zouden er echt in moeten slagen Klasse.
Klik met de rechtermuisknop op de afbeelding in de bibliotheek en selecteer 'Eigenschappen'. Geef de afbeelding de volgende eigenschappen:
Druk op OK. Als u een waarschuwing krijgt, negeer deze dan gewoon; het maakt hier niet uit.
Als u niet bekend bent met het concept van een documentklasse, bekijk dan deze Quick Tip voordat u verder leest.
Maak een nieuwe 'ActionScript 3.0-klasse' en geef deze de naam 'Hoofd'. Wanneer het bestand is gemaakt, slaat u het op als 'Main.as'.
Deze code moet in onze nieuwe klas worden geplaatst:
pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main () // constructor code
We zijn echter nog niet klaar! Als u de Flash IDE gebruikt, navigeert u naar het 'Properties Panel' en stelt u de 'Document Class' in op 'Main'. Als u zich afvraagt wat dat doet, betekent dit dat uw toepassing / game wordt uitgevoerd door de Flash Player, Main.as wordt de klasse die is gekoppeld aan de SWF zelf. Gaaf he?
Start het programma; als je geen fouten krijgt, zou je goed moeten zijn om te gaan!
Voordat we een blitting doen, moeten we eerst een canvas maken om op te blitsen. Als je niet zeker bent van het begrip Blitting of als je er meer over wilt weten, bekijk dan deze tutorial.
Nu zullen we een nieuwe Bitmap-variabele declareren, waarmee we de afbeelding zullen blussen (kopiëren).
privé var canvas: Bitmap;
Nadat we dit hebben gedaan, zullen we een toevoegen functie riep Initialize () waarmee we alles netjes kunnen instellen:
public function Main () Initialize ();
Laten we nu de functie maken:
private function Initialize (): void canvas = new Bitmap (nieuwe BitmapData (550, 400, false, 0x000000)); // Stelt het canvas in op zwart. stage.addChild (canvas); // Voegt het canvas toe aan het werkgebied.
We zijn echter nog steeds niet klaar, want we moeten nog steeds het invoer:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData;
Start het programma; als het een zwarte achtergrond heeft, werkte het!
Allereerst moeten we een nieuwe variabele van het type maken SpriteSheet - wat de Klasse was voor de afbeelding die we eerder importeerden, onthoud?
privé var canvas: Bitmap; privé var spriteSheet: SpriteSheet;
We zullen het dan initialiseren:
private function Initialize (): void canvas = new Bitmap (nieuwe BitmapData (550, 400, false, 0x000000)); // Stelt het canvas in op zwart. spriteSheet = nieuwe SpriteSheet (); // Stelt spriteSheet in voor een exemplaar van de afbeelding die we hebben gemaakt. stage.addChild (canvas); // Voegt het canvas toe aan het werkgebied.
Start het programma en je zou niets moeten zien; laten we dat meteen oplossen!
Nu moeten we een toevoegen ENTER_FRAME evenement. Hierdoor kan het programma 24 keer per seconde (24 fps) in ons geval worden bijgewerkt.
In de Hoofd() functie, voeg de volgende regel toe:
public function Main () Initialize (); stage.addEventListener (Event.ENTER_FRAME, Update);
Nu moeten we het maken Bijwerken() functie. Voeg deze functie toe na de andere functies:
privéfunctie Update (e: Event): void
Vergeet het invoer:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData; import flash.events.Event;
Nu zijn we klaar om wat te blitten!
Hier komt het interessante deel!
Oke, dus wat we willen doen is:
Typ de volgende code in de updatefunctie:
persoonlijke functie Update (e: Event): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nieuwe rechthoek (0,0, stage.width, stage.height), 0x000000); canvas.bitmapData.copyPixels (spriteSheet, nieuwe Rectangle (0,0,128,128), nieuw Point (100, 100)); canvas.bitmapData.unlock ();
Als je dit uitvoert, krijg je je afbeelding op het canvas! Dit is echter niet alleen waar we naar streven, we willen die achtergrondkleur ook uit de afbeelding verwijderen.
Ik zal eerst een deel van de bovenstaande code toelichten:
Accentsconagua
canvas.bitmapData.lock (); - Deze regel optimaliseert de blitting en het is een goede gewoonte om het meestal te typen!canvas.bitmapData.fillRect (); - Deze lijn wist het canvas door het te vullen met een zwarte kleur. canvas.bitmapData.copyPixels (); - Niet erg nuttig in onze situatie maar kopieert alle pixels van een deel van een afbeelding. canvas.bitmapData.unlock (); - Dit werkt met slot() om het proces te optimaliseren.Nu zou je dit op het scherm moeten hebben ...
Ja, ik weet het, je hebt waarschijnlijk gelijk. Ik denk dat we ook van de paarse af moeten ...
Eindelijk is het tijd om de paarse kleur te verwijderen!
Wat we willen doen, is elke pixel controleren; als de pixel paars is, kopiëren we deze niet naar het canvas. Om dit te doen, zullen we onze eigen functie vervullen.
Verandering Bijwerken() Naar het volgende:
persoonlijke functie Update (e: Event): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nieuwe rechthoek (0,0, stage.width, stage.height), 0x000000); CustomBlitting (spriteSheet, nieuwe Rectangle (0,0,128,128), new Point (100, 100), 0xE730F2); canvas.bitmapData.unlock ();
Onze nieuwe functie (CustomBlitting (), die we nog niet hebben geschreven) neemt de meeste parameters die copyPixels doet, samen met een extra: de kleur die we willen verwijderen.
Tijd om de functie te schrijven. Deze code kan ingewikkeld lijken als je nog nooit een hebt gedaan geneste for-loop voor. De manier waarop deze lus werkt is eigenlijk:
persoonlijke functie CustomBlitting (src: BitmapData, srcRect: Rectangle, destPoint: Point, color: uint): void for (var i: int = 0; i < srcRect.height; i++ ) for( var j:int = 0; j < srcRect.width; j++ ) var currentPixel:uint = src.getPixel( srcRect.x + j, srcRect.y + i ); if( currentPixel != color ) canvas.bitmapData.setPixel( destPoint.x + j, destPoint.y + i, currentPixel );
Laat me de getPixel en setPixel uitleggen, hoewel ze waarschijnlijk zelfverklarend moeten zijn:
getPixel (x, y); - Hiermee wordt de kleur van een pixel op de X, Y-locatie geretourneerd.setPixel (x, y, kleur); - Hiermee wordt de kleur van een pixel ingesteld kleur op de X, Y-locatie van het canvas.Als u het programma uitvoert, werkt het!
Ik heb maar één uitdaging voor je om te doen voor deze tutorial:
Accepteer een array met kleuren als een parameter en verwijder alle kleuren uit de afbeelding in de array.
Succes!
Ik hoop dat je deze tutorial leuk vond en dat je vandaag iets nieuws hebt geleerd. Als je me je SWF wilt laten zien met de voltooide uitdagingen, kun je hieronder een reactie achterlaten!
