Workshop 06: Knöpfe und Regler
Knöpfe
Ein Knopf (oder neudeutsch Button) ist ein weiteres anklickbares Panelelement. Kommen Sie, Sie klicken täglich auf hunderte von Buttons, Sie wissen worum es sich handelt! Betrachten wir uns eine typische Knopf-Definition:
button (x, y, bitmap_normal, bitmap_released, bitmap_over, function_clicked, function_released, function_over);
Das ist eine ziemlich lange Definition! Dann wollen wir mal jeden Ausdruck mithilfe von Abbildungen durchgehen:
- x und y liefern die Position des Knopfes auf dem Panel. In der Abbildung unten sehen Sie, dass x = 70 und y = 60 ist. Diese Koordinaten funktionieren für Knöpfe ganz genauso wie bei Ziffern (digits) und Fenstern (window), haben aber eine Zusatzbedingung: Um auf Mausklicks zu reagieren, muss der Knopf komplett auf dem Panel liegen, d.h. normalerweise innerhalb der Panel-bmap.
- bitmap_clicked ist die Bitmap, die in dem Moment auf dem Knopf erscheint, wenn Sie mit der linken Maustaste draufklicken: (der grüne Smiley ist übrigens mein Mauszeiger)
- bitmap_normal ist bei Spielstart auf dem unberührten Knopf zu sehen:
- bitmap_over wird angezeigt, wenn die Maus über den Knopf bewegt, dieser aber nicht angeklickt wird:
- function_clicked heißt eine Funktion, die dann ausgeführt wird, wenn wir auf den Knopf klicken.
- function_released ist der Name einer Funktion, die ausgeführt wird, wenn die Maus den Knopf verlässt oder wir den linken Mausknopf über dem Knopf loslassen.
- function_over nennt sich die Funktion, die zum Zuge kommt, wenn der Mauszeiger ohne Klicken nur über den Knopf geführt wird.
(Tipp: Schreiben Sie ans Ende der Knopf-Funktionen keine Klammern. Wenn Sie ein Klammernpaar hinzufügen, sagen Sie der Engine nämlich, sie soll eine solche Funktion sofort aufrufen (d.h. starten) und das wollen Sie ja nicht. Die Funktionen sollen nur dann laufen, wenn die Knöpfe gedrückt sind. Hier macht das noch nicht viel, aber Sie werden noch einer Menge an Situationen begegnen, wo das Vorhandensein eines extra Klammernpares zu falschen Ergebnissen - d.h. Bugs - führt.)
Bereit, einen zwar einfachen aber vollkommen funktionsfähigen anklickbaren Knopf zu bewundern? Nun denn, starten wir unsere script06-Datei:
Ich wollte den Code so kurz wie möglich halten und doch sehen wir einige interessante Dinge:
a) Ein Panel.
b) Einen Mauspfeil (sieht aus wie eine Hand),
den man bewegen kann.
c) Einen Knopf, der, wenn der Mauszeiger darüber
ist, seine Bitmap von blau nach rot verändert
d) Der gleiche Knopf ändert seine Bitmap
von blau nach grün wenn wir mit der linken Maustaste draufklicken
und sie festhalten.
e) Wenn wir den "Quit"-Knopf anklicken,
wird das Programm sobald wir die linken Maustaste loslassen beendet.
Hier sind die drei für den Knopf benutzten
Bitmaps:
quitnormal_pcx
quitover_pcx
quitclicked_pcx
Betrachten wir den Code:
////////////////////////////////////////////////////////////////////
function main()
{
screen_size.x = 800;
screen_size.y = 600;
screen_color.blue = 150;
mouse_mode = 4;
}
function quit_program()
{
while (key_any) {wait (1);}
sys_exit(NULL);
}
//////////////////////////////////////////////////////////////////////
PANEL* main_pan =
{
bmap = "main.pcx";
pos_x = 250;
pos_y = 200;
button (250, 134, "quitclicked.pcx", "quitnormal.pcx", "quitover.pcx", quit_program, NULL, NULL);
flags = OVERLAY | SHOW;
}
//////////////////////////////////////////////////////////////////////
Für den "Quit"-Knopf habe ich drei Bitmaps verwendet, außerdem habe ich per mouse_mode = 4 die Maus aktiviert. Die Maus-Einzelheiten ignorieren wir in diesem Workshop, aber wir wollen uns ein wenig über die kleine Funktion unterhalten, die das Programm durch Anklicken des Buttons beendet.
Wenn wir uns die Knopfdefinition am Anfang des Workshops ansehen, stellen wir fest, dass die Funktion quit_program der Funktion function_clicked entspricht. Sie wird also gestartet, wenn wir auf den "Quit"-Knopf klicken und das ist schon mal gut. Die erste Code-Zeile sagt dem Programm, es soll warten bis sämtliche Tasten und alle Maustasten losgelassen sind. Die zweite Zeile ruft eine Funktion auf, die das Programm beendet. Grübeln Sie nicht so lange über dieser "while"-Codezeile - ihre Zeit ist noch nicht gekommen. Falls Sie auf der Suche nach einer kompletten Liste vordefinierter Engine-Funktionen sind, werfen Sie einen Blick ins Referenzhandbuch: dort finden Sie die sämtlichen Funktionen und auch noch eine handvoll Beispiele.
Ich musste die Funktion quit_program vor die Panel-Definition setzen, denn (Sie sollten es sich merken) wir müssen alles definieren bevor wir es verwenden. Zeit, den Code für die Knopf-Definition unter die Lupe zu nehmen:
button (250, 134, "quitclicked.pcx", "quitnormal.pcx", "quitover.pcx", quit_program, NULL, NULL);
Wie Sie sehen, setze ich die üblichen x- und y-Positionen und gebe drei Bitmaps für den Knopf an. Die beiden letzten Funktionen (function_released und function_over) wurden jeweils durch NULL ersetzt was einfach gar nichts auslöst. Wir verwenden hier nur die erste Funktion, nämlich die, die durch Anklicken des Knopfes aufgerufen wird. Meistens werden Sie die beiden anderen Funktionen gar nicht brauchen, aber vielleicht haben Sie in einem Ihrer Projekte ja doch Verwendung dafür.
Wenn Sie sich die Knopf-Bitmaps oben ansehen, können Sie sehen, dass die schwarzen Ecken abgeschnitten werden. Dies wird auch vom OVERLAY Flag bewirkt. Flags beeinflussen nicht nur die Panelbitmap selbst, sondern auch die Bitmaps anderer Panel-Elemente. Eine alternative Methode für teilweise Transparenz von Bitmaps ist das Verwenden eines 32 Bit Bildformats mit Alphakanal, z.B. 32 Bit TGA Bilder. Im Workshop zu Sprites werden wir mehr darüber lernen.
Falls Sie mehrere Knöpfe auf einem Panel haben wollen, fügen Sie einfach weitere Knopf-Definitionen hinzu. Ich schlage vor, Sie erstellen drei Bitmaps für einen neuen Knopf und achten Sie darauf, dass sie gleich gros's sind. Definieren Sie die Bitmaps und fügen Sie dann den neuen "button"-Code ein. Für alle diesem Knopf zugewiesenen Funktionen nehmen Sie NULL. Während Sie damit beschäftigt sind, bereite ich schon mal den nächsten Workshop vor...
Schieberegler
Ein Schieberegler (Slider) ist ein mit der Maus verschiebbares Panelelement und dient dazu, den Wert einer bestimmten Variablen einzustellen. Wir können sowohl vertikale, als auch horizontale Regler haben und wir können ihren Spielraum bestimmen. Schieberegler werden meistens zum Einstellen der Lautstärke von Geräuschen und Musik oder des Gamma-Faktors usw. verwendet,
So sieht es üblicherweise aus, wenn Ihr Slider in Aktion ist:
Ok, ich habe es gehört! Diese Regler sehen nicht wirklich danach aus und vor allem wissen Sie gar nicht wo deren Anfangs- und Endpositionen sind. Malen Sie sich doch das was Sie brauchen über Ihr bereits vorhandenes Panel! Und so könnte es dann ungefähr aussehen:
Nun fügen wir die beiden Regler hinzu:
Na also, das sieht doch schon deutlich mehr nach einem Slider aus! Sicher überrascht es Sie nicht weiter, dass der Code für einen Regler aus nur einer einzigen Zeile besteht. Unten sehen Sie eine typische Regler-Definition:
hslider (x, y, size_in_pixels, slider_bitmap, minimum_value, maximum_value, variable);
vslider
(x, y, size_in_pixels, slider_bitmap, minimum_value, maximum_value,
variable);
Diese beiden Reglertypen verwenden dieselbe
Definition! Jetzt wollen wir einen Regler in Aktion haben: starten
Sie Lite-C und öffnen
Sie die Datei script06_2:
//////////////////////////////////////////////////////////////////// #include <acknex.h>
#include <default.c>
//////////////////////////////////////////////////////////////////// var speed = 50; BMAP* mouse_pcx = "mouse.pcx"; // für Mauszeiger verwendete bitmap //////////////////////////////////////////////////////////////////// function main() { screen_size.x = 800;
screen_size.y = 600;
screen_color.blue = 150; mouse_map = mouse_pcx; mouse_mode = 4; } ////////////////////////////////////////////////////////////////////// PANEL* main_pan = { bmap = "main2.pcx"; pos_x = 250; pos_y = 200; vslider (16, 71, 90, "slider.pcx", 0, 100, speed); digits (15, 50, 3, *, 1, speed); flags = OVERLAY | SHOW; } ////////////////////////////////////////////////////////////////////
Wie Sie wissen, bin ich ein netter Kerl und deshalb habe ich für Sie ein Panel mit einer Reglerskala drauf gemalt. Es heisst main2.pcx. Wir haben jetzt eine Bitmap für den Mauszeiger aktiviert, als Abwechslung zu der Default-Hand (Maus-Bitmaps sind nur innerhalb des Engine-Fensters sichtbar und verschwinden in der Titelleiste). Für den Regler verwenden wir eine neue Variable namens speed (Sie können sie auch sonstwie nennen) mit dem Anfangswert 50. Außerdem brauchen wir eine digits-Definition zum Anzeigen des Wertes der Variablen.
Worauf warten Sie noch? Starten Sie einen Testlauf des Skripts!
Falls es Ihnen nicht gelingt, die script06_2-Datei zum Laufen zu bringen, haben Sie vergessen, in Lite-C's Options / Preferences / Environment “Use the current file for Test Run” zu markieren. Klicken Sie jetzt auf den Regler, verschieben Sie ihn und Sie sehen, wie sich der Zahlenwert zwischen 0 und100 bewegt. Wenn wir den Bereich kennen, lassen sich numerische Werte auf diese Weise schnell und einfach eingeben.
Besprechen wir unsere Regler-Definition:
vslider (16, 71, 90, "slider.pcx", 0, 100, speed);
Ok, wir haben also die x- und y-Koordinaten so gesetzt, dass sie zur Skala unserer Panelbitmap passen size_in_pixels (also die vertikale Größe unserer Skala) ist 90. Für den Regler selbst nehmen wir die Bitmap mit dem Namen "slider_pcx" und wir ändern den Wert unserer Variable "speed" von 0 in 100. Wenn Sie uns jetzt allen zeigen wollen, dass Sie diese Schieberegler perfekt beherrschen, erstellen Sie doch noch den Code für eine horizontale Regler-Definition im gleichen Panel.
Ruhen wir erst mal ein bisschen aus.
Weiter: Strings, Texte und Fonts