Workshop 05: Ziffern und Fenster
Ziffern
Prima, nun wissen wir also, wie man Panels erstellt... was kommt jetzt? Spielen wir ein wenig mit Ziffern (digits), einem Panelelement, das numerische Werte anzeigen kann. Starten Sie Lite-C und öffnen Sie die Datei script05 im workshop05:
//////////////////////////////////////////////////////////////////// PANEL* first_pan = { digits(320, 200, 2, "Arial#150b", 1, sys_seconds); flags = SHOW | OUTLINE; } /////////////////////////////////////////////////////////////////////
Ich mag kurze Beispiele aber hier sehe ich doch etwas Seltsames: ich dachte, eine Paneldefinition müsse eine bmap = irgendeine_bitmap;-Zeile sowie eine Position pos_x und pos_y enthalten!? Naja... wenn Sie kein Bild für Ihr Panel brauchen, brauchen Sie auch keine Codezeile, die es definiert und wenn die Position weggelassen ist, wird angenommen, dass sie 0 ist. Wir werden hier nur ein paar Zahlen darstellen und dafür brauchen wir keine Bitmap.
Die "digits"-Definition sieht nicht allzu kompliziert aus. Betrachten wir erstmal diese Codezeile:
digits(320, 200, 2, "Arial#150b", 1, sys_seconds);
- "digits" ist das Schlüsselwort, das immer dann gebraucht wird, wenn wir eine Zahl am Bildschirm anzeigen wollen.
- die ersten beiden Zahlen (320 und 200) stehen für die Position der Ziffer auf dem Panel. Hat das Panel z. B. "pos_x = 20" und "pos_y = 30" und die "digit"-Definition hat "410" und "200", sehen wir die betreffende Zahl auf dem Bildschirm an der Position x = 430 und y = 230, alles klar?
- 2 ist ein Format-Code. In diesem Fall ist es lediglich die Anzahl der Ziffern, die zur Anzeige unserer Zahl gebraucht werden. In meinem "digits"-Beispiel kann ich Zahlen bis 99 (2 Ziffern) anzeigen, würde ich nun die 2 durch eine 5 ersetzen, läge das Limit bei 99,999. Es gibt auch kompliziertere Format-Codes, die die Anzahl von Dezimalen angeben oder das Hinzufügen von Text ermöglichen (wie in unserem Beispiel in workshop02);Im Gamestudio-Handbuch können Sie alles darüber nachlesen. Ich habe den Link zu der betreffenden Seite im Online-Handbuch unten aufgeführt.
- "Arial#150b" bedeutet, dass wir den Arial-Zeichensatz in einer Größe von 150 Punkt und in Fettdruck (b für bold) verwenden. Durch Angabe von * würden wir stttdessen den Default-Font verwenden, einen kleinen Zeichensatz, der für Testzwecke zur Anzeige von Zahlen benutzt wird. Wir können auch irgendwelche anderen schicken Truetype- oder Bitmap-Zeichensätze definieren und benutzen.
- 1 ist ein Faktor, der den anzuzeigenden Wert multipliziert. Kein Grund sich jetzt darüber den Kopf zu zerbrechen, wir werden hier fast immer (wenn nicht sogar ausschließlich) 1 nehmen.
- sys_seconds schließlich ist der Name der Variablen, die angezeigt wird. Sie kann durch irgendeine andere Variable ersetzt werden.
Schön, jetzt wo wir über all das gesprochen haben, können wir eine etwas allgemeinere digit-Definition aufstellen:
digits (x, y, format, font, factor, variable);
(Tipp: in älteren Skripts finden Sie dieses oft anders geschrieben, etwa "digits = x, y, format, font, factor, variable;". Anders als in den meisten anderen Fällen akzeptiert die Engine hier verschiedene Schreibweisen. Dies resultiert aus der geschichtlichen Entwicklung von Acknex).
Starten wir einen Testlauf der Skript-Datei:
Ich kann meine Zahl auf dem Bildschirm sehen und ihr Wert ändert sich jede Sekunde - genauso wie bei einer Uhr! Ich bin sicher, "sys_seconds" ist wieder eine vordefinierte Variable, denn ich musste ja keine Definition dafür schreiben. Sie können zur Positionsänderung der Ziffern auf dem Bildschirm ein bisschen mit "320" und "200" herumspielen und wenn Sie pos_x und pos_y auch noch ändern, sehen Sie dass die Position des Panels verschoben wird, die Ziffern aber ihre Lage auf dem Panel beibehalten. Übrigens, das OUTLINE flag im Panel sorgt für den schwarzen Rand um die Ziffern.
Diese digits sind cool! Ich kann sie zum Anzeigen der Spielergesundheit und der Panzerung verwenden, die Menge der Kugeln und Anzahl von Leben ausgeben... immer, wenn ich einen Wert anzeigen muss, werde ich ein digit dafür benutzen! Aber moment mal... wie stelle ich mehrere solcher digits dar? Wir fügen ganz einfach noch ein paar mehr "digits" in unsere Paneldefinition ein (diesmal zur Abwechslung mit dem default-Font):
digits (370, 200, 2, *, 1, sys_hours);
digits (390, 200, 2, *, 1, sys_minutes);
digits (410, 200, 2, *, 1, sys_seconds);
Wenn Sie über die nötige Kühnheit verfügen, ersetzen Sie jetzt die einzelne "digits"-Zeile in "script05" durch diese drei Zeilen oben und Sie haben eine zwar einfache aber voll funktionsfähige Uhr:
Windows
Ich rede hier nicht von einem Betriebssystem, sondern von einem Panelelement, das unter Verwendung einer Variablen wie ein Fenster einen bestimmten Ausschnitt einer Bitmap anzeigt. Wenn Sie sich fragen ob so ein Window überhaupt von Nutzen ist, glauben Sie mir, es ist. Sie werden ein Window immer dann verwenden, wenn Sie einen Kompass oder vielleicht einen in Länge oder Breite wandelbaren (horizontalen oder vertikalen) Balken erstellen wollen; z. B. ein paar Anzeigesäulen für den Grad der Gesundheit in Ihrem Kampfspiel:
Ich will Ihnen zeigen wie diese Fenster funktionieren und dann können Sie selbst entscheiden wann und warum Sie die Dinger anwenden.
Stellen wir uns vor, wir wollen in unserem Game eine Taschenlampe benutzen. Da hätten wir gerne eine Batterieanzeige: sind sie voll, möchten wir ein kleines grünes Bildchen auf dem Bildschirm. Sobald die Energie in den Batterien knapper wird, wollen wir ein gelbes Bildchen und wenn sie dann endgültig alle sind, ein rotes:
Natürlich sähe so eine Batterieanzeige noch besser aus, wäre der Übergang zwischen den Farben fließender..
Keine Sorge, das lässt sich alles mit einer einfachen Fenster- oder sogenannten "Window"-Definition machen. Zuerst kreieren wir eine lange Bitmap, die so aussieht:
Als nächstes nehmen wir eine Window-Definition, die, wie auf dem Bild unten, diese Bitmap durch einen kleinen Rahmen gleiten lässt:
Der Teil der Bitmap, der sich außerhalb des Rahmens befindet (Sie haben es geahnt) ist unsichtbar. Also kann der Spieler nur das Bild innerhalb des Rahmens sehen. Sie ändern einfach nur eine Variable, die die Bitmap mithilfe einer "Window"-Definition nach rechts oder links verschiebt.
Nun, da Sie die Grundlagen begriffen haben, wollen wir einen Höhenmesser für unser Flugzeug bauen:
Es ist einigermaßen einleuchtend, dass wir eine Bitmap wie diese brauchen:
Wir wollen nur einen Teil der Bitmap anzeigen und zwar den, der mit einer bestimmten Höhe unseres Flugzeugs übereinstimmt. Wie machen wir das?
Wir müssen eine Variable, die angezeigt wird, und ein window definieren - verwenden Sie den Panel-Code aus script05_2.c:
/////////////////////////////////////////////////////////////////////////////////////////////////////
var altitude = 0; // Höhe
PANEL* first_pan =
{
bmap = "frame.pcx";
window (40, 10, 178, 160, "height.pcx", 0, altitude);
flags = SHOW;
}
//////////////////////////////////////////////////////////////////////////
Betrachten wir die Änderungen: wir haben eine neue var namens "altitude" und
benutzen zwei Bitmaps im Panel. Eine dient als Rahmen für den Höhenmesser
(wir brauchen den nicht wirklich, aber es sieht doch cool aus) und die
andere wird in der window-Definition gebraucht. Und natürlich
haben wir innerhalb des Panels first_pan die window-Definition
selbst!
Zeit unser Skript zu starten! Klicken Sie also auf den Testlaufknopf und schon sehen Sie folgendes Bild:
Falls es Sie überrascht, diese Bitmaps auf dem Bildschirm zu sehen: Ich habe sie erstellt und im Ordner workshop05 gespeichert. Drücken Sie jetzt zum Hervorzaubern der Konsole die [TAB]-Taste und tippen Sie folgende Codezeile ein
altitude = 150;
mit [Eingabe] bestätigen:
Wie Sie sehen hat sich die Bitmap verändert und wir sind dicht an 185 Fuss / Kilometern / was auch immer. Sie können alle möglichen Werte eintippen, werden aber feststellen, dass große Werte wie dieser:
altitude = 1000;
nicht passend angezeigt werden. Das liegt daran, dass die hier verwendete Bitmap nur eine Höhe von 780 Pixeln hat. Nehmen Sie also, wenn nötig, kleinere Variablen-Bereiche oder größere Bitmaps.
Betrachten wir uns so ein typisches "Window"-Bild samt Definition einmal schrittweise:
window (x, y, size_x, size_y, bitmap, variable_x, variable_y);
- window ist das Schlüsselwort, das wir nunmal immer benutzen müssen, wenn wir ein Fenster definieren.
- x und y bestimmen die Position des Fensters auf dem Panel. Hat das Panel die Positionen pos_x = 200 und pos_y = 100 und unser Fenster hat x = 30 und y = 20, wird die fürs Fenster verwendete Bitmap bei x = 230 und y = 120 auf dem Bildschirm plaziert.
- size_x und size_y legen die Größe des Fensterausschnitts auf x bzw. y fest. Sie wissen ja, die eigentliche Bitmap ist sehr gros's und diese Zahlen bestimmen entlang von x und y den sichtbaren Teil der Bitmap.
- bitmap ist der Name einer vorher definierten BMAP, oder der Dateiname der fürs Fenster benutzten Bitmap (height_pcx).
- variable_x liefert den horizontalen Offset der fürs Fenster verwendeten Bitmap. Die rote Bitmap soll nicht nach rechts oder links verschoben werden, also nehmen wir hier 0.
- variable_y liefert den vertikalen Offset der fürs Fenster verwendeten Bitmap. Wir wollen unsere Bitmap nach oben und unten verschieben, also nehmen wir hier eine Variable (var altitude).
Zusammenfassung: Wenn Sie ein Fenster oder "Window" erstellen, sieht man nur einen kleinen Ausschnitt der dafür verwendeten Bitmap. Ändert man variable_x oder variable_y (in unserem Skript altitude), wird die lange Bitmap je nachdem entlang der x- oder der y-Achse verschoben und somit sind andere Teile der Bitmap auf dem Bildschirm zu sehen. Die Größe des Fensterausschnitts (das, was Sie tatsächlich sehen) wird durch size_x und size_y bestimmt.