Share
"Blit" is om bits van een deel van het grafische geheugen van een computer naar een ander deel te kopiëren. Deze techniek behandelt rechtstreeks de pixels van een afbeelding en trekt ze rechtstreeks naar het scherm, waardoor het een zeer snelle weergavetechniek is die vaak perfect is voor snelle 2D-actiespellen.
De meeste gamedev-platforms ondersteunen een vorm van blitting; hier gebruik ik gewone Flash en AS3 voor een webvriendelijke demo.
Eerst moeten we weten hoe we een oppervlak in het grafische geheugen kunnen creëren. In Flash kunnen we dit als volgt doen:
var bmd: BitmapData = nieuwe BitmapData (550, 500);
Hiermee wordt een rechthoek gemaakt die bestaat uit 550 keer 500 pixels - d.w.z. kleurpunten. We kunnen deze pixels vervolgens weergeven door deze pixeldata door te geven aan een bitmap-object en deze toe te voegen aan het scherm:
var bitmap: Bitmap = nieuwe Bitmap (bmd); addChild (bitmap); // voeg toe aan het scherm met de weergavelijst van Flash
Hierdoor wordt eenvoudig een witte rechthoek van 550 x 500 pixels weergegeven, omdat wit de standaardkleur is voor pixels in een nieuwe BitmapData voorwerp.
Laten we nu eens aannemen dat we een achtergrond op deze rechthoek willen tekenen. We kunnen dit doen door de pixels van onze achtergrondafbeelding te kopiëren rechtstreeks in het bestaande BitmapData voorwerp, in plaats van een nieuwe afbeelding aan het scherm toe te voegen.
// niet weergegeven: import van een afbeelding in het object backgroundImage. var backgroundRectangle: Rectangle = new Rectangle (); backgroundRectangle.x = 0; backgroundRectangle.y = 0; backgroundRectangle.width = backgroundImage.width; backgroundRectangle.height = backgroundImage.height; bmd.copyPixels (backgroundImage, backgroundRhoekangle, new Point (0,0));
In de bovenstaande code hebben we een afbeelding geïmporteerd in de achtergrond afbeelding object (dit kan een JPEG-foto zijn, een afbeelding van de webcam van de gebruiker, een procedureel gegenereerde achtergrond - het maakt niet uit), en definieerde vervolgens een rechthoek die een gebied van deze afbeelding omlijnde (in dit geval hebben we net geschetst de volledige afbeelding).
Vervolgens hebben we de pixels van dit rechthoekige gebied van de afbeelding gekopieerd naar de bestaande 550 x 500 pixels BitmapData object van vóór - het nieuw punt (0,0) zegt alleen dat we moeten beginnen bij de coördinaten (0,0) (dat wil zeggen de linkerbovenhoek) van de 550x500px BitmapData.
Ervan uitgaande dat de geïmporteerde afbeelding ook 550x500px is, betekent dit dat het ons effen wit volledig bedekt BitmapData. Nu, sinds onze bmp Bitmap is hieraan gekoppeld BitmapData, we zullen de afbeelding op het scherm zien verschijnen!
We kunnen er vervolgens nog een afbeelding aan toevoegen. Laten we dat zeggen faceImage is een afbeelding van 75x75 pixels van een gezicht met een transparante achtergrond. We kunnen dit gewoon doen:
// niet getoond: import van een afbeelding in het faceImage-object. var faceRectangle: Rectangle = new Rectangle (); faceRectangle.x = 0; faceRectangle.y = 0; faceRectangle.width = faceImage.width; faceRectangle.height = faceImage.height; bmd.copyPixels (faceImage, faceRhoekangle, new Point (Math.random () * 550, Math.random () * 500));
Het is bijna dezelfde code als voorheen: de pixels van het gezichtsbeeld worden gekopieerd naar de BitmapData, bovenop de bestaande pixels die werden gekopieerd van de achtergrondafbeelding. Het grote verschil is dat we het gezicht kopiëren naar een willekeurige positie, in plaats van (0,0).
Dit is hoe dit eruit ziet in actie:
Het is belangrijk om te vermelden dat dit gezichtsafbeelding niet alleen "gelaagd" is bovenop de achtergrondafbeelding; de pixels van de (oorspronkelijk gewoon wit) BitmapData werden elk afzonderlijk gewijzigd om overeen te komen met de pixels van de achtergrondafbeelding en vervolgens werd een 75 x 75 pixels groot gebied van pixels gewijzigd nog een keer om de pixels van de gezichtsafbeelding te evenaren. Wanneer u de demo hierboven reset, alle pixels in de 550x500px BitmapData worden gewijzigd zodat ze weer overeenkomen met de pixels van de achtergrondafbeelding.
Omdat de computer de afzonderlijke pixels van de bitmap rechtstreeks wijzigt, in plaats van te proberen verschillende verschillende lagen bij te houden, is deze methode ongelooflijk snel. In de onderstaande demo heb ik een paar eenvoudige fysica toegevoegd en honderden afbeeldingen per seconde afgespeeld.
Hoewel blitten al erg snel is, zijn er dingen die we kunnen doen om het nog sneller te maken.
Ten eerste kunnen we dat slot de bitmap voordat u wijzigingen aanbrengt in de BitmapData waaraan het is gekoppeld.
Terwijl de bitmap is ontgrendeld, probeert deze alle wijzigingen die in de map zijn aangebracht weer te geven BitmapData zoals die wijzigingen zijn aangebracht - dus als we 100 afbeeldingen in een enkele lus blussen, dan heeft de computer te maken met het achter elkaar weergeven van al die wijzigingen, de een na de ander, in een zeer korte tijd.
In plaats daarvan kunnen we de bitmap vergrendelen, de 100 objecten blitsen op de BitmapData, en ontgrendel dan de bitmap; de bitmap verandert niet terwijl deze is vergrendeld, ook al is de BitmapData verandert 100 keer. Dat betekent dat de computer de bitmap slechts eenmaal per lus opnieuw hoeft te renderen, in plaats van 100 keer - veel sneller!
Een tweede optimalisatietechniek is om het aantal pixels dat we op een bepaald moment blitten te verminderen. Laten we bijvoorbeeld aannemen dat we een achtergrondafbeelding hebben geblazen en vervolgens een gezichtsafbeelding blitsen, en dan willen we verwijderen het gezicht en ga terug naar een lege achtergrond. (Vergeet niet dat de afbeeldingen niet gelaagd zijn; de pixels van het gezicht zijn gekopieerd over de pixels van de achtergrond.)
De eenvoudigste manier om dit te doen is om eenvoudig de volledige achtergrondafbeelding van 550 x 500 pixels op de blitse te plaatsen BitmapData nogmaals, alles bedekken dat er eerder was.
Maar hier is een alternatief: we kunnen uitzoeken welk gedeelte van het scherm het gezichtsbeeld bedekt, en dan een rechthoekig gedeelte van de achtergrond over dat gebied blitsen! Deze techniek staat bekend als vuile rechthoeken.
Blits is vaak een uitstekende keuze voor de weergavemethode voor 2D-actiegames, omdat het een snelle manier biedt om heel veel individuele wijzigingen aan het scherm te maken door de pixels rechtstreeks te bewerken.
Het is vaak minder geheugenintensief dan andere renderingmethoden, omdat er minder grafische informatie moet worden opgeslagen - alles zit in één enkele bitmap.
Houd er rekening mee dat deze snelheid en kracht meestal de prijs van het gemak met zich meebrengt. Als u bijvoorbeeld een voorgrondobject wilt krimpen tot niets, kunt u niet alleen de breedte en hoogte waarden; je moet de achtergrond er bovenop opnieuw tekenen en dan het object een beetje kleiner maken, steeds opnieuw.
Accentsconagua