Share
"Blit" bedeutet, Bits aus einem Teil des Grafikspeichers eines Computers in einen anderen Teil zu kopieren. Diese Technik behandelt die Pixel eines Bildes direkt und zeichnet sie direkt auf den Bildschirm. Dies macht sie zu einer sehr schnellen Rendertechnik, die sich oft für schnelle 2D-Action-Spiele eignet.
Die meisten gamedev-Plattformen unterstützen irgendeine Form des Blits; hier verwende ich normales Flash und AS3 für eine webfreundliche Demo.
Zuerst müssen wir wissen, wie eine Oberfläche im Grafikspeicher erstellt wird. In Flash können wir das so machen:
var bmd: BitmapData = neue BitmapData (550, 500);
Dadurch entsteht ein Rechteck aus 550 mal 500 Pixel - d. h. Farbpunkte. Wir können diese Pixel dann anzeigen, indem wir diese Pixeldaten an ein Bitmap-Objekt übergeben und dem Bildschirm hinzufügen:
var-Bitmap: Bitmap = neue Bitmap (bmd); addChild (Bitmap); // mit der Anzeigeliste von Flash zum Bildschirm hinzufügen
Dadurch wird einfach ein weißes Rechteck mit 550 x 500 Pixel angezeigt, da Weiß die Standardfarbe für Pixel in einem neuen ist BitmapData Objekt.
Nehmen wir an, wir wollen einen Hintergrund auf dieses Rechteck zeichnen. Wir können dies tun, indem Sie die Pixel unseres Hintergrundbildes kopieren direkt ins Bestehende BitmapData Objekt, anstatt ein neues Bild auf dem Bildschirm hinzuzufügen.
// nicht gezeigt: Importieren eines Bildes in das backgroundImage-Objekt. var backgroundRectangle: Rectangle = new Rectangle (); backgroundRectangle.x = 0; backgroundRectangle.y = 0; backgroundRectangle.width = backgroundImage.width; backgroundRectangle.height = backgroundImage.height; bmd.copyPixels (backgroundImage, backgroundRectangle, neuer Punkt (0,0));
Im obigen Code haben wir ein Bild in die importiert Hintergrundbild object (dies könnte ein JPEG-Foto sein, ein Bild von der Webcam des Benutzers, ein prozedural erzeugter Hintergrund - das spielt keine Rolle), und definierte dann ein Rechteck, das einen Bereich dieses Bildes umriss (in diesem Fall haben wir es gerade beschrieben das gesamte Bild).
Dann haben wir die Pixel aus diesem rechteckigen Bildbereich in die vorhandenen 550x500px kopiert BitmapData Objekt von vor - der neuer Punkt (0,0) sagt nur, dass wir bei den Koordinaten beginnen sollten (0,0) (d. h. die obere linke Ecke) des 550x500px BitmapData.
Vorausgesetzt, das importierte Bild ist ebenfalls 550x500px, bedeutet, dass es unser schlichtes Weiß vollständig bedeckt BitmapData. Jetzt seit unserer bmp Bitmap ist damit verbunden BitmapData, Das Bild erscheint auf dem Bildschirm!
Wir können dann ein weiteres Bild hinzufügen. Sagen wir das mal faceImage ist ein 75x75px-Bild eines Gesichts mit transparentem Hintergrund. Wir können das einfach tun:
// nicht gezeigt: Importieren eines Bildes in das faceImage-Objekt. var faceRectangle: Rechteck = neues Rechteck (); faceRectangle.x = 0; faceRectangle.y = 0; faceRectangle.width = faceImage.width; faceRectangle.height = faceImage.height; bmd.copyPixels (faceImage, faceRectangle, neuer Punkt (Math.random () * 550, Math.random () * 500));
Es ist fast derselbe Code wie zuvor: Die Pixel des Gesichtsbildes werden auf den Bildschirm kopiert BitmapData, auf die vorhandenen Pixel, die aus dem Hintergrundbild kopiert wurden. Der große Unterschied ist, dass wir das Gesicht eher in eine zufällige Position kopieren als (0,0).
So sieht das in Aktion aus:
Es ist wichtig zu erwähnen, dass dieses Gesichtsbild nicht einfach über dem Hintergrundbild "geschichtet" wird. die Pixel des (ursprünglich schlichtes Weiß) BitmapData wurden einzeln geändert, um mit den Pixeln des Hintergrundbildes übereinzustimmen, und dann wurde ein 75x75px-Bereich von Pixeln geändert nochmal um die Pixel des Gesichtsbildes abzugleichen. Wenn Sie die obige Demo zurücksetzen, werden alle Pixel im 550x500px angezeigt BitmapData werden geändert, um wieder zu den Pixeln des Hintergrundbildes zu passen.
Da der Computer die einzelnen Pixel der Bitmap direkt ändert, anstatt zu versuchen, verschiedene Ebenen zu verfolgen, ist diese Methode unglaublich schnell. In der folgenden Demo habe ich einige einfache Physik hinzugefügt und blende Hunderte von Bildern pro Sekunde.
Obwohl das Blitting bereits sehr schnell ist, gibt es Dinge, die wir noch schneller machen können.
Erstens können wir sperren die Bitmap, bevor Sie Änderungen an der BitmapData dass es mit verbunden ist.
Während die Bitmap nicht gesperrt ist, wird versucht, alle an der Datei vorgenommenen Änderungen wiederzugeben BitmapData wie diese Änderungen vorgenommen werden - Wenn wir also 100 Bilder in einer einzigen Schleife erstellen, muss sich der Computer mit dem Rendern all dieser Änderungen in sehr kurzer Zeit auseinandersetzen.
Stattdessen können wir die Bitmap sperren und die 100 Objekte auf die blit setzen BitmapData, und entsperren Sie die Bitmap. Die Bitmap ändert sich nicht, solange sie gesperrt ist, obwohl die Bitmap gesperrt ist BitmapData ändert sich 100 mal. Das bedeutet, dass der Computer die Bitmap nur einmal pro Schleife neu rendern muss, und nicht 100 Mal - viel schneller!
Eine zweite Optimierungstechnik besteht darin, die Anzahl der Pixel zu reduzieren, die wir gleichzeitig blittieren. Nehmen wir zum Beispiel an, wir bliten ein Hintergrundbild und dann ein Gesichtsbild darüber, und dann wollen wir Löschen das Gesicht und zurück zu einem leeren Hintergrund. (Denken Sie daran, dass die Bilder nicht überlagert sind; die Pixel des Gesichts wurden über die Pixel des Hintergrunds kopiert.)
Der einfachste Weg, dies zu tun, besteht darin, einfach das gesamte Hintergrundbild mit 550x500px auf das BitmapData wieder alles vertuschen, was vorher da war.
Aber hier ist eine Alternative: Wir können herausfinden, welchen Bereich des Bildschirms das Gesichtsbild verdeckt, und dann einen rechteckigen Abschnitt des Hintergrunds über diesem Bereich blitfen! Diese Technik ist bekannt als schmutzige Rechtecke.
Blitting ist oft eine großartige Wahl für die Rendering-Methode für 2D-Actionspiele, da auf diese Weise viele individuelle Änderungen am Bildschirm sehr schnell vorgenommen werden können, da die Pixel direkt bearbeitet werden.
Es ist oft auch weniger speicherintensiv als andere Rendering-Methoden, da weniger grafische Informationen gespeichert werden müssen - alles in einer einzigen Bitmap.
Denken Sie daran, dass diese Geschwindigkeit und Leistung normalerweise mit dem Preis der Bequemlichkeit einhergeht. Wenn Sie beispielsweise ein Vordergrundobjekt auf Null schrumpfen lassen möchten, können Sie es nicht einfach ändern Breite und Höhe Werte; Sie müssen den Hintergrund darüber neu zeichnen und dann das Objekt immer wieder etwas kleiner zeichnen.
Accentsconagua