Workshop 04: Bitmaps und Panels
Bitmaps
Eine Bitmap ist nichts weiter als eine mit einem Malprogramm erstellte Bilddatei. Lite-C kann viele Bitmap-Formate verwenden: pcx, bmp, tga, dds, jpg... jede 24 bit true color- (absolut empfohlen) oder 8-bit-Datei (nicht empfehlenswert). Ich kann mir keinen vernünftigen Grund vorstellen, weshalb Sie ein 8-bit-, also ein 256-Farben-Bild verwenden sollten... ach ja, jetzt weiss ich warum!
a) Ihr Spiel sieht einfach zu gut aus und Sie wollen es ein wenig hässlicher machen.
b) Ihre sämtlichen Kunden haben alte 3D-Karten (z. B. S3 Trio3D oder Voodoo1) und Sie wissen, dass das Game auf ihren PCs schneller läuft wenn Sie 8-bit-Bitmaps verwenden.
Sie sollten immer true color-Texturen nehmen, glauben Sie mir! Ich jedenfalls würde kein Spiel kaufen, dessen Level in nur 256 Farben dargestellt werden. Äußerem haben 32-bit Targa (tga)-Bitmaps einen zusätzlichen Alphakanal der jedem Pixel einen Transparenzwert zuweist. Diesen Alphakanal können Sie in Ihrem Paintprogramm (Photoshop, Paint Shop Pro, etc) erstellen.
Wie definieren wir eine Bitmap? Sehen Sie sich das Beispiel unten an:
BMAP* health_pcx = "health.pcx";
Ok, wir haben also das Schlüsselwort BMAP mit einem angehängten Sternchen (*). Dem folgt ein Name und dann schreiben wir die betreffende Datei in " " Anführungszeichen und beenden unsere lite-C-Zeile wie üblich mit einem Semikolon. Ich habe meine Bitmap health_pcx genannt, aber Sie können ihr auch irgendeinen anderen Namen geben; z. B.:
BMAP* test = "health.pcx";
Sehen Sie was ich sehe? Wenn ich diese Bitmap (vielleicht in ein paar Tagen oder Wochen) in meinem Game verwenden will, wird test kein besonders bezeichnender Name für mich sein und ich muss wieder und wieder die Definition überprüfen, um herauszufinden, was "test" eigentlich bedeutet. Schön, definieren wir die Bitmap folgendermaßen:
BMAP* health = "health.pcx";
Glauben Sie, Sie können sich nach ein paar Wochen noch daran erinnern was health ist? Ich höre Sie fragen: "ist health eine var, eine Bitmap oder was?" Gar nicht davon zu reden, dass Sie Fehlermeldungen kriegen wenn Sie versuchen eine var mit dem Namen einer Bitmap zu definieren.. Ich rate Ihnen wirklich, für sämtliche in Ihrem Projekt verwendete Einzelteile sinnvolle Namen zu wählen. Mir jedenfalls genügt ein Blick auf den Namen health_pcx und schon weiss ich, es dreht sich um eine Bitmap aus einer pcx-Datei. Mit den Definitionen für bmp- und tga-Dateien verfahre ich ähnlich:
BMAP* ammo_bmp = "ammo.bmp";
BMAP* armor_tga = "armor.tga";
Andere Leute haben andere Methoden der Namensgebung, z. B.bmHealth (die Anfangsbuchstaben bm stehen hier für Bitmap). Was immer Sie auch benutzen, achten Sie darauf, es den ganzen Code hindurch beizubehalten!
Bitmaps sind wichtige Bausteine für unsere Spiele. Wann immer Sie ein Bild auf Ihrem Bildschirm sehen, es steckt eine Bitmapdefinition dahinter. Worauf warten wir? Lassen wir die die geballte Bitmap-Kraft von der Leine! Ich habe ein cooles Bild erstellt und das will ich jetzt dem Bildschirm dargestellt sehen! Ok, das lässt sich machen, allerdings müssen wir vorher noch ein paar Dinge lernen und zwar über...
Panels
Jedes Spiel braucht Panels! Wenn in Ihrem Spiel ein Armaturenbrett, ein Cockpit, ein Knopf, ein Startbild, ein Inventory etc. vorkommt, brauchen Sie ein Panel - eine rechteckige Bitmap, die "über" Ihren Bildschirm gelegt wird. Zur Darstellung von 2D-Komponenten benutzt jedes Spiel eine 2D-Engine. Lite-C beinhaltet sowohl eine 3D- als auch eine 2D-Engine.
Bevor wir anfangen, will ich Ihnen einige Panelbeispiele aus einem meiner Demos zeigen:
Was lässt sich mit diesen Panels alles
machen? Ich meine, was können wir mit den GUI (Graphical User
Interface)-Objekten in lite-C alles anfangen?
a) Standardpanels - Bilder, die über
den Bildschirm gelegt werden und so einen Teil unserer 3D-Welt überdecken.
b) Ziffern (digit) - Panel-Elemente, die Zahlen
und Text darstellen können.
c) Fenster (window) - Panel-Elemente, z.B. für
einen Kompass, eine animierte Spieler-Bitmap, einen Gesundheitsbalken usw.
b) Knöpfe (button) - anklickbare Panel-Elemente
zum Aufrufen von Funktionen.
e) Schieberegler (slider) - verschiebbare Panel-Elemente
zum Einstellen eines Wertes, z.B. zur Lautstärkeregelung in einem Spiel.
f ) Zeiger (needle) - ein rotierendes Panel-Element zur Anzeige von Rundinstrumenten,
Uhren und dergleichen.
Sie sehen also, da steckt Einiges drin - Panels bieten eine Menge an interessanten Möglichkeiten für unser Spiel. Lesen Sie a) bis e) noch einmal und dann sehen Sie sich das Bild unten genau an. So sehen all diese Panel-Elemente aus:
Widerstehen Sie der Versuchung, zu glauben, ich hätte all diese Panels und Panel-Elemente in einem meiner Spiele verwendet! Viele davon habe ich zu Anschauungszwecken mit einem Malprogramm eingefügt, einfach damit Sie sofort sehen, was alles machbar ist. An die Arbeit!
Starten Sie Lite-C und öffnen Sie die Datei mit dem Namen script04 im Ordner workshop04:
////////////////////////////////////////////////////////////////////
BMAP* first_pcx = "first.pcx"; // meine erste bmap
PANEL* first_pan = //mein erstes panel
{
pos_x = 0;
pos_y = 0;
layer = 1;
bmap = first_pcx;
flags = OVERLAY | SHOW;
}
/////////////////////////////////////////////////////////////////////
function main()
{
screen_size.x = 800;
screen_size.y = 600;
screen_color.blue = 150;
}
Nicht allzuviel Code, oder? Machen wir einen Testlauf:
Dieses Panel sieht doch recht hübsch aus und daraus können Sie schließen, dass es nicht von mir gemalt wurde. Ich habe ein Beispielpanel genommen. Die gute Nachricht ist die, dass ein Panel eine unregelmäßige Form haben kann. Ja, aber was ist mit den rechteckigen Bitmaps? Moment mal... die Bitmap ist tatsächlich rechteckig!
Die Engine betrachtet jeden Pixel, dessen Rot- (R), Grün- (G) und Blauwerte (B) gleich Null sind, als durchsichtig. Daher kann ich Panels von jedweder Form erstellen, genauso wie das, das ich in meinem Beispiel genommen habe. Betrachten wir ein anderes Beispiel: die rechteckige Bitmap links, wird im Level als gelbes Dreieck dargestellt, denn der andere Teil ist tiefschwarz, hat also die R, G, B - Werte von Null:
Zeit, die Definition unseres Panels im Detail unter die Lupe zu nehmen:
PANEL* first_pan
=
{
pos_x = 0;
pos_y = 0;
layer = 1;
bmap = first_pcx;
flags = OVERLAY | SHOW;
}
Was haben wir hier? Zuerst mal das Schlüsselwort PANEL* und dann den Namen des Panels. Damit ich, ohne mir immer wieder aufs neue die Definition betrachten zu müssen, immer gleich weiss, dass es sich hier um ein Panel handelt, suche mir einen Namen aus, der auf "pan" endet. Klar, Sie können einen anderen Namen wie etwa pnFirst nehmen, das ist ja soweit nichts neues... Ich wette, das wirklich Interessante befindet sich zwischen diesen geschweiften Klammern. 1) bmap = first_pcx sagt der Engine, dass Sie die vorher definierte Bitmap namens first_pcx verwenden soll. Wenn Sie deren Definition noch einmal sehen wollen, schreibe ich sie Ihnen hier ein letzten mal auf. Denken Sie immer daran, zuerst die Bitmap zu definieren und erst danach das Panel, das sie verwendet.
BMAP* first_pcx = "first.pcx";
Tipp: Wenn Sie vorher keine BMAP definieren wollen, können Sie in der Paneldefinition auch
PANEL* first_pan =
{
...
bmap = "first.pcx";
...
schreiben. Dies definiert eine BMAP intern und verwendet sie fürs Panel.
2) pos_x = 0 und pos_y = 0 sorgen dafür, dass das Panel auf Ihrem Bildschirm bei x = 0 und y = 0 angezeigt wird. Werfen Sie einen Blick in die obere, linke Ecke Ihres Bildschirms - das ist der Punkt an dem pos_x und pos_y gleich 0 sind.
Gut. Wenn Sie also einen höheren pos_x-Wert nehmen, wird das Panel demnach weiter nach rechts verschoben dargestellt... Was, wenn ich für pos_x = 200 und für pos_y = 300 nehme? Ändern wir doch gleich einmal das Skript!
////////////////////////////////////////////////////////////////////
PANEL* first_pan =
{
pos_x = 200;
pos_y = 300;
layer = 1;
bmap = first_pcx;
flags = OVERLAY | SHOW;
}
/////////////////////////////////////////////////////////////////////
Zeit für einen Testlauf. Was passiert hier?
Ein einfaches Bild sagt mehr, als tausend Worte. Auch wenn wir die Engine mit falschen pos_x- und pos_y-Werten füttern, wird sie sich nicht beschweren. Sind die Zahlen zu klein (unter Null) oder zu groß, sehen Sie Ihre Panels einfach nicht, da sie außerhalb des Bildschirms plaziert werden!
3) Die dem Layer zugewiesene Zahl legt die Stelle, an der das Panel in einer Reihenfolge von mehreren, sich überlappenden Panels steht, fest. Elemente mit einem höheren Layer-Wert werden über denen mit niedrigeren Werten dargestellt. Wenn Sie nun ein zweites Panel definieren und in seiner Definition layer = 2 angeben, werden Sie feststellen, dass es über dem Panel mit layer = 1 erscheint; ganz so, wie auf dem folgenden Bild:
Auf diese Weise lassen sich verschiedene Bitmaps miteinander zu vielfältigen, richtig gut aussehenden (eventuell gleitenden) Panels kombinieren.
4) Schön, sieht ganz so aus, als lernen wir hier einiges an Neuem...
flags = OVERLAY | SHOW;
Diese Zeile ermöglicht das Setzen einiger Flags (Eigenschaften) des Panels. Sprechen wir doch am besten gleich jetzt über diese Eigenschaften:
- OVERLAY sagt der Engine, dass Sie die schwarz (RGB = 000) gemalten Teile des Panels als durchsichtig betrachten soll. Lassen wir das overlay-Flag weg, sehen wir das gesamte Panel mitsamt seiner schwarzen Teile - es sei denn, die Panel-Bitmap wäre bereits selbst ein transparentes TGA- oder DDS-Bild. Übrigens, Panel-Flags wie OVERLAY beeinflussen nicht nur die Bitmap, sondern auch andere Elemente des Panels. Wir kommen dazu im folgenden Workshop.
- SHOW bedeutet, dass das Panel bei Programmstart sichtbar ist. Wenn Sie bei einem Ihrer Panel das SHOW-Flag gesetzt haben, es aber nirgends auf Ihrem Bildschirm entdecken können, sollten Sie Ihre pos_x- und pos_y-Werte überprüfen - sie könnten zu hoch oder zu niedrig sein.
- Und " | " sagt der Engine, dass sie beide Flags setzen soll. "|" ist der ODER-Operator in C und wird normalerweise zur Kombination von Flags verwendet. Sorgen Sie dafür, dass Sie links und rechts von "|" ein Leerzeichen haben.
Die nächsten Workshops befassen sich mit dem Erstellen von Panel-Elementen: Ziffern, Fenster, Knöpfen, Schiebereglern und Balkenanzeigen.