Open Source im professionellen Einsatz
Linux-Magazin 04/2003

Das Canvas-Widget von Tk für Spiele nutzen

Spielkind

Das schnelle Entwickeln von GUI-Anwendungen ist eine der Stärken von Tcl/Tk. Ein einfaches Spiel zeigt verschiedene Aspekte des Canvas-Widgets, von Animation über Bilder bis Zahlendarstellung.

571

Zu ihrem vierten Geburtstag wollte ich meiner Tochter etwas Besonderes schenken: ein selbst geschriebenes Spiel. Es sollte irgendwas mit Zahlen zu tun haben und natürlich Spaß machen - Edutainment also, für spielerisches Lernen. Eine Idee war schnell gefunden: Die Spielerin soll Zahlen erkennen, die auf dem Bildschirm auftauchen, und jeweils die passende Taste drücken.

Soweit zu "Edu", fehlt noch das "tainment", die nette Verpackung. Beim Vorlesen der Geschichte vom kleinen Wassermann kam die zündende Idee: ein Fisch, der Luftblasen mit den Zahlen aufsteigen lässt. Da ich Karpfen nicht besonders lustig finde, gibt es stattdessen einen Bitterling, zu dem auch gleich eine Teichmuschel als Lebensgefährten gehört. Diese Muschel produziert - gewissermaßen als Belohnung für jede gefundene Zahl - eine Perle.

Nach der Idee machte ich mich an die Umsetzung - natürlich mit Tcl. Das Ergebnis ist in Abbildung 1 zu sehen. Da das Tcl-Programm recht überschaubar ist, steht der komplette Code in einer einzelnen Datei, inklusive aller Bilder. Aus Platzgründen enthält Listing 1 keine Daten für die Bilder, die vollständigen Quellen stehen wie immer auf dem FTP-Server des Linux-Magazins bereit[2].

Bunte Unterwasserszene

Das Spielfeld wird mit dem Canvas-Widget dargestellt, hier gilt es, den Hintergrund zu zeichnen, ein paar Wasserpflanzen und Sand als Dekoration, den Fisch, die Muschel und die Blasen natürlich. Mit meinen Zeichenkünsten ist es leider nicht sonderlich weit her, also habe ich den Bitterling und die Teichmuschel per Google gesucht. Den Hintergrund bildet ein großes Bitmap, das auch die Muschel und die Wasserpflanzen zeigt (Gimp sei Dank).

Von Haus aus kann Tk nur wenige Bitmap-Typen lesen und darstellen. Anders als bei anderen Bildformaten kann Tk aber Bilder im GIF-Format nicht nur aus einer Datei lesen, sondern auch direkt aus einem String. Dieser String muss die Bilddaten Base-64-kodiert enthalten (auch Mime-encoded genannt). Das Umwandeln geht mit Hilfe der Tcllib[1] in wenigen Zeilen:

package require base64
set fd [open bitterling.gif]
fconfigure $fd -translation binary
set bin [read $fd]
close $fd
set bild [base64::encode $bin]

Nun enthält »$bild« das Bild in der Base-64-Darstellung. Diese Variante stellt die Binärdaten ausschließlich durch Ascii-Zeichen dar. Das hat den Vorteil, dass man den String-Inhalt direkt in den Quellcode einfügen kann, ohne den Editor oder den Interpreter zu verwirren. Aus dem String lässt sich dann wieder ein Bild zum Anzeigen erzeugen:

package require Tk
image create photo bitterling -data $bild
label .test -image bitterling
pack .test

Die Tcllib ist in den meisten Linux-Distributionen bereits enthalten, die neuste Version kann man von[1] holen. Das Installieren übernimmt ein Skript, das im Paket zu finden ist.

Die Leinwand

Das Fischbild und den Hintergrund malt das Spiel auf ein Canvas (eine Leinwand; siehe Zeile 37). Pro Foto genügt ein Kommando dieses Widgets:

$canvas create image 0 500 
  -image hintergrund -anchor sw

Wenn alle Bilder positioniert sind, schwebt der Bitterling an einem Tannenwedel und knabbert daran. Aber kein echter Fisch verharrt permanent auf der gleichen Stelle, also muss sich auch der Bitterling bewegen. Diese Aufgabe übernimmt die Prozedur »fischBewegen« ab Zeile 55. Zuerst berechnet sie einen zufälligen Wert für die Verschiebung in x- und y-Richtung, dann bewegt sie den Fisch entsprechend. Der Animationstrick steht in der letzte Zeile: Hier sorgt die Prozedur mit »after« dafür, dass sie von der Event-Queue nach einer bis zehn Millisekunden wieder aufgerufen wird. Zwischendurch kann die Queue andere Events abarbeiten.

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Übersetzungskünstler

    Lexer und Parser in Perl schreiben ist keineswegs langbärtigen Gurus vorbehalten. Am Beispiel eines mathematischen Formelparsers nimmt dieser Perl-Snapshot die Angst vor Token und RPN.

  • Augenweide

    Vor kaum zehn Jahren beherrschten graue Anwendungen den grauen Hintergrund des Unix-Desktops. Heute präsentieren sich KDE und Gnome mit moderner Oberfläche. Ihre Gestaltung verlangt ein geschultes Auge und guten Geschmack, beim Anzeigen und Erzeugen der Elemente hilft Tcls Werkzeugkasten.

  • HTML 5

    Dank HTML 5 lassen sich Client-Server-Anwendungen mit grafischer Oberfläche programmieren, wie sie das Web bisher nicht kannte. Dieser Artikel zeigt, wie das mit Canvas, SVG und Websockets geht. Die Bibliotheken Jquery, Visualize und Autobahn helfen bei der Arbeit.

  • Bildhafte Kurven

    Das Sprichwort "Ein Bild sagt mehr als tausend Worte" gilt auch beim Anzeigen großer Datenmengen. Für die meisten Diagrammtypen genügen wenige Zeilen Tcl-Code, um Messwerte oder Ergebnisse auf dem Bildschirm grafisch ansprechend und übersichtlich darzustellen.

  • C++11

    Was dem Perl-Programmierer altvertraut ist, fehlte C++ bisher. Der neue Sprachstandard C++11 bringt reguläre Ausdrücke ins Spiel, mit denen sich Textmuster beschreiben und finden lassen.

comments powered by Disqus

Ausgabe 04/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.