Einfach Balken zeichnen

Balkenanzeigen für Lebensenergie oder magische Energie ist fast schon so alt wie Computer- oder Videospiele selbst. Sie sind mal hübsch, mal schlicht, aber alle haben eines gemeinsam: Man kann daran eine Menge von etwas erkennen, ohne mit trockenen Zahlen hantieren zu müssen. Egal ob Prozentwerte oder absolute Werte, der Balken ist dein Freund.

In diesem Mini-Tutorial möchte ich eine einfache Lösung zeigen, wie man solche Balken mit XNA und dem SpriteBatch realisieren kann, ohne Texturen laden und ohne zeitraubende Schleifen ausführen zu müssen.

Als Vorbereitung müssen wir eine Textur haben, die wir zwar über die Content-Pipeline laden könnten, aber dies wollten wir ja nicht. Es geht auch ohne Datei:

Texture2D texture = new Texture2D(GraphicsDevice, 1, 1);
texture.SetData<Color>(new Color[] { Color.White});

In der ersten Zeile dieses Codes erstellen wir eine neue Texture mit einer Breite und Höhe von jeweils einem Pixel. Wir benötigen dazu eine Referenz auf das GraphicsDevice, welche aber in der Game-Klasse vorhanden ist. Dies sollte euch also nicht vor größere Schwierigkeiten stellen. Die zweite Zeile befüllt die Texture mit Daten, und zwar aus einem Color-Array, in dem sich lediglich eine einzige Farbe, nämlich weiß befindet.

Warum benötigen wir nur einen einzigen Pixel und warum ist dieser weiß?

Ein einzelner Pixel reicht, weil wir diesen gleich auf die gewünschte Größe skalieren werden. Die Farbe weiß benötigen wir, damit wir diese mit der gewünschten Farbe multiplizieren können und so die Farbe erhalten, die wir möchten.

Erstmal der Code:

Vector2 lifeBarPosition = new Vector2(3, 3); 
int lifeBarHeight = 10; 
int lifeBarLength = 10; 
Rectangle lifeBarRectangle = new Rectangle((int)lifeBarPosition.X, (int)lifeBarPosition.Y, lifeBarLength, lifeBarHeight);

spriteBatch.Begin();
spriteBatch.Draw(texture, lifeBarRectangle, Color.Red); 
spriteBatch.End(); 

Zunächst deklarieren wir ein paar Variablen, die wir im weiteren Verlauf benötigen und die ich hier jetzt kurz erkläre.

lifeBarPosition ist die Position, an der unser Balken erscheinen soll. Es ist die linke, obere Ecke. lifeBarHeight ist die Höhe und lifeBarLength ist die Länge. Aus diesen Werten erzeugen wir das Rechteck lifeBarRectangle vom Type Rechteck.

Das definierte Rechteck stellt genau die Fläche dar, die unser Lebensbalken haben soll. Wir verwenden ein Rechteck, weil dieses sogenannte Destination Rectangle als Parameter für SpriteBatch verwendet werden kann. Geben wir diesen Parameter an – so wie bei spriteBatch.Draw in obigem Beispiel zu sehen – dann wird die verwendete Textur auf die notwendige Größe skaliert. Dies ist in diesem Fall natürlich notwendig, da unsere Texture ja nur einen einzigen Pixel groß ist.

Kommen wir zum letzten interessanten und auch notwendigen Parameter der Draw-Methode des SpriteBatch: Tint. Tint ist eine Farbe, die wir dem SpriteBatch übergeben können und die dazu verwendet wird um eine multiplikative Mischung mit den Quellfarben der Textur durchzuführen. Das klingt im ersten Moment ziemlich kompliziert, ist es aber nicht wirklich: Die Farbe jedes Pixels wird mit dem Tint multipliziert. Verwendet man eine weiße Farbe, so ist die Zielfarbe schlicht und einfach die Ursprungsfarbe.

Ein Wort zum SpriteBatch: In obigem Beispiel wird für jeden Lebensbalken ein eigener SpriteBatch gestartet. Dies ist schrecklich ineffektiv und wurde nur gemacht, damit man den Code zum ausprobieren einfach in ein leeres Projekt packen kann. Der SpriteBatch bezieht seine Geschwindigkeit, wie der Name schon andeutet, aus dem Batching, also dem Zusammenfassen möglichst vieler gleichartiger Operationen. Es ist daher empfehlenswert einen bereits geöffneten SpriteBatch zu verwenden, um das Batching überhaupt erst zu ermöglichen.

Advertisements

Veröffentlicht am 21.10.2009 in Mini-Tutorial, XNA, XNA 3.1, XNA 4.0 und mit , , , , getaggt. Setze ein Lesezeichen auf den Permalink. 2 Kommentare.

  1. steve@byom.de

    Nicht sehr übersichtlich und leider auch nirgends beschrieben wo die Codes reingeschrieben werden müssen, d.h. in der Draw oder Initalize oder sonst wo.

    • Danke für das Feedback.

      Naja, eigentlich liegt es ja auf der Hand: Texturen sollten IMMER in LoadContent geladen oder erzeugt werden und die Darstellung von Objekten erfolgt IMMER in Draw. Das ist und war in jedem XNA-Programm so. Auf beidem liegt hier aber auch nicht der Fokus. Der Sinn dieses MINI-Tutorials ist es, daß erklärt wird, wie man mit dem SpriteBatch Balken zeichnen kann und dies ohne viel Code und mehr wird in diesem Artikel auch nicht gezeigt…

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: