Vier gewinnt
Bedienungsoberfläche
So, nun ist es an der Zeit, Delphi zu starten und mit der Vorbereitung zum Programmieren zu beginnen, denn was jetzt folgt, ist eigentlich noch kein Programmieren … Das Erstellen der Benutzeroberfläche ist etwas, was man mit ein wenig Übung in wenigen Mausklicks fertig hat, da Delphi hier zahlreiche komfortable Möglichkeiten bietet.
Das Hauptformular
Wir werden nun als erstes das Hauptformular, also das Formular, welches das Spiel beinhaltet, gestalten.
Als erstes nehmen wir uns das Formular selbst vor. Dazu klicken wir auf das Formular und suchen im Objektinspektor (links) die Eigenschaft Caption. Diese ändern wir auf „4 Gewinnt“ wodurch dieses oben in der Titelleiste des Formulars steht.
Unser fertiges Formular wird sich in zwei Bereiche unterteilen. Zum Einen ist da das Spielfeld und zum Anderen die Steuerung des Programmes, also der Teil, wo der Benutzer mit dem Programm interagieren kann. Damit das Ganze auch übersichtlich irest, benötigen wir zur räumlichen Trennung zunächst ein Panel (Registerkarte Standard). An diesem werden wir im Folgenden einige Eigenschaften anpassen. Als erstes kommt die Beschriftung weg ? das Feld „Caption“ wird geleert.
Anschließend setzen wir den Wert der Eigenschaft „Align“ auf „alLeft“. Das Panel sollte nun an den linken Rand hüpfen. Die Eigenschaft „Align“ stellt verschiedene Möglichkeiten bereit, die Ausrichtung eines Objektes auf dem Formular unabhängig von Größenänderungen zu machen. In diesem speziellen Fall befindet sich das Panel immer am linken Rand und hat die Höhe des Formulars, egal wie der Benutzer die Größe verändert.
Die Breite des Panels können wir weitestgehend beliebig einstellen, dabei sollten wir aber trotzdem genug Platz für einige Buttons lassen, da auf diesem Panel später die Steuerung des Programmes Platz finden soll. Ein zu breites Panel wiederum würde im folgenden die zur Verfügung stehende Fläche für das Spielfeld einschränken.
Anschließend setzen wir in den freien Bereich des Formulars eine Paintbox (Registerkarte System). Auf dieser Komponente wird später die Darstellung des Spielfeldes erfolgen. Damit diese immer so groß wie möglich ist, setzen wir „Align“ auf „alClient“. Dies hat zur Folge, dass die Paintbox (oder ein anderes Objekt mit dieser Eigenschaft) immer den gesamten zur Verfügung stehenden Platz beansprucht.
Da wir später vom Programm aus auf die Paintbox zugreifen wollen, benennen wir diese um in „Anzeigeflaeche“. Durch sprechende Namen bei Komponenten erleichtert man es sich, im Programm den Überblick zu behalten. Beim Benennen hat man weitestgehend freie Hand, es dürfen nur keine Sonderzeichen und Umlaute vorkommen. Dennoch sollte darauf geachtet werden, dass die Namen einem gleichmäßigen Aufbau folgen.
Zur besseren Unterscheidung kann man auch vor den Namen noch eine Abkürzung der Komponentenbezeichnung setzten (zum Beispiel: pbx für Paintbox, oder pnl für Panel).
Für die „Unterlage“ des Spielernamens nehmen wir ein zweites Panel und platzieren es auf dem ersten. Wir schreiben statt der vorhandenen Caption „Spieler 1“ und setzten „Align“ auf „alTop“. Weiterhin setzten wir „Color“ auf „clGreen“. Das Ergebnis spricht hierbei für sich und bedarf keiner Erläuterung. Durch dieses Panel wird später immer die Farbe des aktiven Spielers dargestellt. Dies bedeutet aber, dass regelmäßig darauf zugegriffen werden muss, weswegen wir dem ganzen einen sinnvollen Namen geben („pnlSpieler“).
Anschließend klicken wir einmal auf die Eigenschaft „Font“ und dann anschließend auf den Button mit den drei Punkten (siehe Bild rechts).
Es öffnet sich ein Dialog, in dem wir wie in einem Textverarbeitungsprogramm die Schrift verändern können. Sinnvoll ist es, die Schrift fett zu machen, vielleicht eine oder zwei Nummern größer und weiß. Dadurch ist sie bei den meisten Farben recht gut zu erkennen. Vorausgesetzt, der Spieler entscheidet sich nicht für Silber …
Als nächstes benötigen wir fünf Buttons (Registerkarte Standard), die wir alle im unterem Bereich des ersten Panels platzieren.
Nun markieren wir alle (Shift drücken und der Reihe nach anklicken, erneutes Klicken hebt die Markierung auf), Rechtsklicken, wählen „Position“ und dann „Ausrichten“. Hier haben wir verschiedene Optionen zur gleichmäßigen Ausrichtung der Komponenten. Wir wählen bei „Horizontal“ die Option „Linker Rand“ und bei „Vertikal“ „gleicher Abstand“. Die Optionen und das Ergebnis sprechen für sich.
Man muss selber nur noch darauf achten, dass die Objekte nicht zu nah am Rand oder zu weit davon weg sind, dadurch wird das Ganze recht ansehnlich. Nun gibt es aber immer User, die der Meinung, sind an der Größe des Formulars Herumwerkeln zu müssen.
Bei den momentanen Einstellungen würden dann die Buttons entweder weiter vom Rand wegkommen, oder darunter verschwinden, da das Panel sich ja mit dem Formular verändert.
Deshalb suchen wir die Eigenschaft „Anchors“ drücken dort auf das „+“ und setzen „akBottom“ auf „true“, wodurch der Abstand des Buttons zum unteren Rand konstant bleibt. Zusätzlich müssen wir noch „akTop“ auf „false“ setzen, da sonst auch der Abstand zum oberen Rand konstant bleiben würde und die Buttons sich beim Verändern des Formulars auch verändern würden. Da Buttons zu den Objekten gehören, auf die zugegriffen wird, benennen wir sie um: „btnBeenden“, „btnEinstellungen“, „btnSpeichern“, „btnLaden“, „btnNeu“.
Damit sie auch dem Benutzer gefallen, bekommen sie noch einen sinnvolleren Text: „Beenden“, „Einstellungen“, „Speichern“, „Laden“, „Neues Spiel“.
Nun ist das Hauptformular und damit die Hülle des Programmes fertig. Des Resultat können wir uns jetzt schon anschauen, indem wir das Programm compilieren. Dazu drücken wir einfach F9, oder klicken den grünen Pfeil in der Symbolleiste von Delphi an.
Schon haben wir ein recht ansehnliches Programm vor uns. Das Formular bietet hierbei, ohne das wir etwas dafür getan hätten, die Standardoptionen, die ein Fenster unter Windows eben bietet. Wenn wir auf das X klicken wird das Programm beendet und wir landen wieder bei Delphi. Man kann das Fenster minimieren, maximieren oder manuell eine beliebige Größe einstellen.
Hierbei zeigt sich ein ernstes Problem … wir können das Fenster so klein machen, das für die Spielfläche kein Platz mehr bleibt, oder die Komponenten der Programmkontrolle ineinander geschoben werden. Das ist natürlich sehr unschön, vor allem weil es immer jemanden geben wird, der dies ausprobiert.
Glücklicherweise ist es recht einfach, das zu unterbinden. Dazu beenden wir das Programm und schauen uns noch einmal die Eigenschaften des Formulars an. Eine dieser ist „Constraints“. Mit Hilfe dieser Eigenschaft lassen sich Minimal- und Maximalgröße des Formulars festlegen. Eine Maximalgröße braucht unser Formular nicht. Daher belassen wir die Eigenschaften
„MaxHeight“ und „MaxWidth“ auf 0, wodurch sie von Delphi nicht beachtet werden.
„MinHeight“ und „MinWidth“ setzen wir auf einen sinnvollen Wert. In unserem Fall ist dies 400 bzw. 700.
Wer mag kann das Ganze jetzt noch einmal Compilieren und wird feststellen, dass es nicht mehr möglich ist, das Fenster kleiner als die eingestellte Größe zu bekommen.
Nachdem dieses Problem auch ausgeräumt ist, können wir uns der Gestaltung des Dialoges, in dem der Nutzer Einstellungen an dem Programm vornehmen können soll, widmen.
Einstellungen-Dialog
Für den Dialog benötigen wir als erstes ein neues Formular. Man könnte zwar auch alles auf einem Formular regeln, aber das ist aufwendiger und vor allem unübersichtlicher im Programmaufbau.
Daher klicken wir auf Datei ? Neu ? Formular (– Delphi für Win32). Der Teil in Klammern ist nur bei Versionen vorhanden, welche auch andere Sprachen Unterstützen, zum Beispiel RAD Studio 2007.
Tadaa! Schon serviert uns Delphi ein neues, leeres Formular mit dem wir neuerlich Unfug treiben können.
Natürlich soll in der Titelleiste nicht Form2 stehen, deshalb ändern wir „Caption“ auf „Einstellungen“. Da wir auf das Formular zugreifen müssen (irgendwie muss das Spiel ja wissen, was der Benutzer eingestellt hat), benennen wir es um in „FormEinstellungen“.
Spätestens an dieser Stelle ist es an der Zeit, dass wir uns Gedanken machen, was der Benutzer am Spiel überhaupt verändern können soll. Je nach dem, was man eigentlich vor hat, sollte man das schon zu Beginn, bei der allgemeinen Planung tun. Dies ist vor allem dann wichtig, wenn man das Programm für einen Kunden schreibt, oder wenn man nicht alleine an dem Projekt arbeitet.
Der Architekt muss schließlich auch seinen Kunden fragen, wo die Steckdose in die Wand soll und das möglichst nicht erst, wenn es an der Zeit ist die Steckdosen einzubauen, weil sonst der ganze Bau ins Stocken kommt, sich sämtliche Termine verschieben und dann am Ende der Winter kommt und noch kein Dach auf dem Haus ist …
Aufgabe: Überlege dir, was der User einstellen können soll, beachte dabei, dass das Ganze zum einen sinnvoll sein sollte und außerdem mit dem Programm zu tun hat und dessen Umfang nicht sprengt.
Es ist also weder Sinn der Übung die Begrüßungsmelodie von Windows zu ändern, noch spezielle Einstellungen zur KI vorzunehmen, da wir zu Beginn entschieden haben, eine solche außen vor zu lassen.
Ich habe mich dazu entschieden, dass der Spieler einstellen kann, wie breit ein einzelnes Feld ist, welche Farben die jeweiligen Spieler haben und wie diese heißen. Wer dem Nutzer weitere Möglichkeiten geben möchte, kann dies im Anschluss an das Tutorial als weiterführende Übung tun. Die nachfolgenden Schritte werde ich nur noch kurz erläutern, da der Ablauf derselbe ist wie beim Hauptformular.
Wir benötigen fünf Label, zwei Panels, drei Edits und drei Buttons, welche wir dann in etwa so anordnen:
Die Edits heißen „edtFelderbreite“, „edtSpieler1Name“ und „edtSpieler2Name“. Die Panels, welche verwendet werden um die Farbe sowohl darzustellen, als auch zu ändern, heißen „pnlAendernSpieler1“ und „pnlAendernSpieler2“. Die Buttons hören auf die Namen „btnOK“, „btnAbbrechen“ und „btnGrundEinstellungen“.
Beim OK-Button ändern wir außerdem Modalresult auf „mrOK“ und beim Abbrechen Button auf „mrCancel“. Das brauchen wir später, um fest zu stellen was der Nutzer geklickt hat.
Zur Erinnerung: Ausrichten können wir die Objekte, mittels Rechtsklick und Auswählen von „Position“ ? „Ausrichten“.
Wer sich jetzt seinen Einstellungsdialog im Programm anschauen will, der macht auf dem Hauptformular einen Doppelklick auf den Button Einstellungen und tippt dort
FormEinstellungen.ShowModal;
ein.
Wenn wir dann F9 drücken, kommt eine Nachfrage, die ihr mit „Ja“ beantwortet und drückt noch einmal F9. Dann könnt ihr im Programm durch Klicken auf „Einstellungen“ den Dialog öffnen.
Nachdem dies erledigt ist, sind wir mit der Hülle des Programms vollkommen fertig und können erst einmal Pause machen, bevor wir uns auf das eigentliche Programmieren stürzen.