Tutorial Verb-Coin-Interface Teil 1

Dieses Tutorial beschreibt, wie du ein Verb-Coin-Interface zusammen mit einem Inventar in der Bildschirmmitte einrichtest, ganz ähnlich wie im Adventure The Curse of Monkey Island (MI3) von 1997. Wir bauen die Steuerung von MI3 nicht in allen Details nach, der Grundmechanismus ist aber derselbe.

Das Tutorial hat 2 Teile:

• Teil 1 (diese Seite) behandelt die Grundlagen: das Coin-Interface und das Inventar. Hier wird nicht geskriptet, alles läuft über die Einstellungen und das Aktionssystem von Visionaire.
• Teil 2 vervollständigt den Aktionstext, denn am Ende von Teil 1 werden wir sehen, dass er noch nicht wie gewünscht funktioniert. Außerdem bringt er mehr Abwechslung bei den Befehlen, denn in MI3 hängen die Befehle vom Objekt ab: Der Papagei auf der Münze kann zum Beispiel „Reden“, „Essen“ oder „Pusten“ bedeuten. Dafür brauchen wir etwas Lua und ein bisschen Tüftelei.

Die Projektdateien kannst du unten auf beiden Tutorialseiten herunterladen. Die meisten Grafiken hat Esmeralda für ihr Menü-Tutorial erstellt.

---

---

Zur Steuerung von Monkey Island 3

So funktioniert das Interface in MI3:

• Das Befehls-Interface ist eine Münze (Verb Coin) mit drei Befehls-Buttons: Hand (Nehmen, Drücken, Benutzen), Totenkopf (Ansehen) und Papagei (Reden, Essen, Trinken, Pusten, Beißen). Klickt der Spieler mit der linken Maustaste auf ein Objekt oder einen Charakter und hält die Taste eine Weile gedrückt, öffnet sich die Münze unter dem Cursor. Mit weiterhin gedrückter Taste führt er die gewünschte Aktion aus, indem er die Taste über dem Befehl loslässt. Danach verschwindet die Münze.
• Das Inventar öffnet sich per Rechtsklick. Es erscheint in der Bildschirmmitte, die Szene bleibt dahinter sichtbar. Klickt der Spieler auf ein Item, wird dessen Grafik zum Cursor. Bewegt er den Cursor aus dem Inventar, schließt es sich. Ein gezogenes Item wendet er per Klick auf ein Objekt an.
• Steht der Cursor über einem Objekt, Charakter oder Item, ändert er seine Farbe, und unten im Bild erscheint der Aktionstext.

Allgemeine Elemente der Oberfläche

Cursor

• Lege im Bereich „Cursors“ einen neuen Cursor mit dem Namen "arrow" an.
• Füge der Animation „Aktiver Cursor“ einen Frame hinzu und wähle das Bild für den aktiven Cursor (orange). Setze den Mittelpunkt der Animation auf die Pfeilspitze.
• Mach dasselbe für die Animation „Inaktiver Cursor“, nur mit dem Bild für den inaktiven Cursor (weiß).

Schriftarten

• Lege im Bereich „Schriftarten“ eine neue Schriftart mit dem Namen "character_text" an.
• Hake die Option „TrueType-Schrift“ an und verknüpfe die TrueType-Schriftdatei.
• Gestalte die Schrift: Größe = 30, Zeichenabstand = 0, Farbe = Weiß (ffffff), Rand = 2, kein Schatten
• Dupliziere die Schriftart und nenne die Kopie "action_text".
• Ändere die Farbe von "action_text" auf Orange und lass die übrigen Einstellungen.

Aktionstext

• Wähle in den Spieleigenschaften als Anzeige für den Aktionstext „Aktionstext in Rechteck zeichnen“.
• Wähle für den Aktionstext die Schriftart "action_text".
• Lege das Rechteck für den Aktionstext mit diesen Werten fest (passend für unsere Auflösung von 1280 x 720 Pixeln): Links = 50, Breite = 1180, Oben = 670, Höhe = 30. Der Aktionstext erscheint dann unten im Bild, mittig im festgelegten Rechteck.

Verb-Coin-Interface

Grundeinstellungen des Interface

• Lege ein neues Interface mit dem Namen "Coin" an.
• Lege im Interface 2 Bedingungen an, "interface_disabled" und "interface_visible", beide standardmäßig false.
• Füge in den Interface-Einstellungen das Hintergrundbild hinzu.
• Achte darauf, dass als Interface-Klasse „Hauptinterface“ eingestellt ist.
• Stelle die Verschiebung auf „Aktuelle Cursorposition“ und trage einen Versatz von X = 50 und Y = 50 ein. Damit rückt das Interface 50 Pixel nach links und 50 Pixel nach oben, sodass das 100 x 100 Pixel große Interface beim Öffnen mittig hinter dem Cursor liegt.

Interface anzeigen

Das Coin-Interface soll erscheinen, wenn der Spieler auf ein Objekt klickt und die Maustaste gedrückt hält. Dafür richten wir in den Spieleigenschaften unter „Mauseigenschaften“ ein globales Mausverhalten ein.

• Setze „Zeit bis gehaltene Maustaste“ auf 250 ms.
• Öffne die Aktion für „Linke Maustaste gehalten (Taste gedrückt)“ und füge diese Aktionsteile hinzu:

1. Wenn Bedingung: wähle die Bedingung "interface_disabled" und „false“. Die folgenden Aktionsteile laufen nur, wenn das Interface nicht gesperrt ist. In diesem Tutorial sperren wir das Interface nie, Abfrage und Bedingung sind also eigentlich nicht nötig. Es ist aber immer gut, das Interface im Spiel einfach über eine Bedingung sperren zu können.
2. Wenn aktuelles Objekt …: wähle „Objekt existiert“. So öffnet sich die Münze nur, wenn der Spieler auf ein Objekt, Item oder einen Charakter klickt (und hält).
3. Objekt speichern: Damit weiß die Engine, dass das aktuelle Objekt dasjenige ist, auf das gleich eine Aktion angewendet wird. Ein Verweis darauf wird intern gespeichert, damit später ein Befehl darauf ausgeführt werden kann.
4. Bedingung ändern: setze die Bedingung "interface_visible" auf true.
5. Interface ein-/ausblenden: blende die Klasse „Hauptinterface“ ein.
6. Ende Wenn
7. Ende Wenn

Interface ausblenden

Es gibt drei Fälle, in denen das Interface wieder verschwinden soll: (1) Der Cursor verlässt den Interface-Bereich, ohne einen Befehl auszuführen. (2) Der Spieler lässt die Maustaste über einer leeren Stelle der Münze los, also nicht über einem Befehls-Button, und führt damit keinen Befehl aus. (3) Der Spieler lässt die Maustaste über einem Befehls-Button los und führt damit einen Befehl aus.

Für Fall (1) muss die Engine erkennen, dass der Cursor das Interface verlässt:

• Aktiviere das Werkzeug für den Interface-Bereich und zeichne im Ansichtsfenster die Umrandung um das Interface. Sonst würde die Engine das ganze Rechteck des Hintergrundbilds (samt transparenter Bereiche) als Interface ansehen.
• Öffne in den Interface-Einstellungen die „Aktion beim Verlassen“ und füge diese Aktionsteile hinzu:

1. Gespeichertes Objekt löschen: entfernt den Verweis auf das Objekt.
2. Bedingung ändern: setze die Bedingung "interface_visible" auf false.
3. Interface ein-/ausblenden: blende die Klasse „Hauptinterface“ aus.

Fall (2) regeln wir in den globalen Mauseigenschaften:

• Öffne die Aktion für „Linke Maustaste gehalten (Taste losgelassen)“ und füge diese Aktionsteile hinzu:

1. Wenn aktuelles Objekt …: wähle „Objekt existiert“. Gemeint ist hier nicht das Szenenobjekt, auf das der Spieler zum Öffnen geklickt hat, sondern einer der drei Befehls-Buttons der Münze, die ebenfalls als Objekte gelten. Wir wollen nur dann etwas tun, wenn der Cursor nicht über einem Button steht. Einen Aktionsteil „Wenn aktuelles Objekt nicht …“ gibt es leider nicht, also setzen wir direkt hinter das „Wenn“ ein „Sonst“, um es umzukehren.
2. Sonst
3. Gespeichertes Objekt löschen: entfernt den Verweis auf das Objekt.
4. Bedingung ändern: setze die Bedingung "interface_visible" auf false.
5. Interface ein-/ausblenden: blende die Klasse „Hauptinterface“ aus.
6. Ende Wenn

Fall (3) regeln wir in den Aktionen der Befehls-Buttons (siehe unten).

Befehls-Buttons

Befehls-Buttons im Interface sind nicht nur zum Anklicken da, sie stellen zugleich die Befehle bereit, die der Spieler im Spiel nutzen kann. Neben den drei sichtbaren Buttons (Ansehen, Reden, Benutzen) brauchen wir einen vierten Befehl als „Standardbefehl“, der immer aktiv ist, wenn kein anderer Befehl aktiv ist. Mit ihm läuft der Charakter durch die Szene und der Spieler zieht Items aus dem Inventar (das ändert sich allerdings in Teil 2).

Standardbefehl

• Hake in den Spieleigenschaften die Option „Ziehen von Items aus dem Inventar erlauben“ an. Damit ist das Ziehen von Items in Visionaire aktiv. Achte außerdem darauf, dass „Standardbefehl aktivieren“ auf „Nur nach erfolgreicher Ausführung“ steht.

• Füge dem Interface "Coin" einen Button mit dem Namen "walk" hinzu.
• Wähle in den Button-Eigenschaften als Button-Typ „Befehls-Button“.
• Lass in den Befehlseigenschaften den Namen leer, setze den Cursor "arrow" und stelle ein, dass der Befehl auf „Objekte und Charaktere“ anwendbar ist. Hake die Option „Items können mit diesem Befehl gezogen werden“ an.
• Wähle in den Interface-Einstellungen den Befehl "walk" als Standardbefehl.

Drei Spielbefehle

• Dupliziere den Button "walk" und nenne die Kopie "use".
• Trage in den Befehlseigenschaften als Namen "Use" ein und nimm den Haken bei der Option zum Ziehen heraus.
• Füge im Reiter „Bild (aktiv)“ das hervorgehobene Bild der Hand hinzu und schiebe es mit dem Verschiebewerkzeug im Ansichtsfenster an seine Position im Interface.
• Aktiviere das Werkzeug für Objektbereiche und zeichne den Bereich um das Symbol des Buttons "use".
• Lege im Reiter „Aktionen“ eine neue Aktion vom Typ „Cursor betritt Button-Bereich“ an und füge diese Aktionsteile hinzu:

1. Aktives/inaktives Bild setzen: verknüpfe den Button "use" und wähle „Aktives Bild“.
2. Befehl setzen: wähle den Befehl "use". Wir setzen den Befehl schon beim Überfahren, damit sich der Aktionstext sofort ändert: Steht der Cursor über der Hand, wird aus „[Objekt]“ der Text „Use [Objekt]“.

• Lege eine Aktion vom Typ „Cursor verlässt Button-Bereich“ an und füge diese Aktionsteile hinzu:

1. Aktives/inaktives Bild setzen: verknüpfe den Button "use" und wähle „Inaktives Bild“. Ein inaktives Bild haben wir nicht verknüpft, weil der inaktive Zustand schon auf den Hintergrund des Interface gemalt ist; der Aktionsteil blendet aber das aktive Bild aus.
2. Befehl setzen: wähle „Standardbefehl“.

• Lege eine Aktion vom Typ „Linksklick“ an und füge diese Aktionsteile hinzu:

1. Interface ein-/ausblenden: blende die Klasse „Hauptinterface“ aus (das ist Fall 3 von oben).
2. Bedingung ändern: setze die Bedingung "interface_visible" auf false.
3. Befehl auf gespeichertes Objekt ausführen
4. Gespeichertes Objekt löschen: entfernt den Verweis auf das Objekt.

• Dupliziere den Button "use" zweimal und nenne die Kopien "look" und "talk".
• Trage in den Befehlseigenschaften als Namen "Look at" bzw. "Talk to" ein.
• Passe die Einstellungen der neuen Buttons an (aktives Bild, Objektbereich, Aktionen).

Inventar-Interface

Grundeinstellungen des Interface

• Lege ein neues Interface mit dem Namen "Inventory" an.
• Lege im Interface 2 Bedingungen an, "inventory_disabled" und "inventory_visible", beide standardmäßig false.
• Füge in den Interface-Einstellungen das Hintergrundbild hinzu.
• Wähle als Interface-Klasse „Inventar“.
• Stelle die Verschiebung auf „Absolut“ und lass den Versatz bei X = 0 und Y = 0. Da unser Interface die volle Spielauflösung hat (1280 x 720 Pixel mit transparentem Rand um das eigentliche Inventar), muss es in der oberen linken Ecke sitzen.
• Setze „Items scrollen um“ auf 9.

Unser Inventar füllt nicht den ganzen Bildschirm, sondern nur die Mitte; die Szene bleibt dahinter sichtbar. Deshalb müssen wir die Interaktion mit der Szene sperren, solange das Inventar offen ist. Sonst könnte der Spieler den Charakter laufen lassen oder sogar Befehle auf Szenenobjekte anwenden.

Dafür legen wir ein weiteres Interface an. Es enthält nur ein transparentes Hintergrundbild in Spielauflösung und liegt hinter dem Inventar. Man sieht keinen Unterschied, aber es blockiert die Interaktion mit der Szene. Wann immer wir das Inventar ein- oder ausblenden, blenden wir also auch dieses Hilfs-Interface ein oder aus.

• Lege ein neues Interface mit dem Namen "Inventory_helper" an.
• Füge in den Interface-Einstellungen das transparente Hintergrundbild hinzu.
• Wähle als Interface-Klasse „Sekundäres Interface“.
• Stelle die Verschiebung auf „Absolut“ und lass den Versatz bei X = 0 und Y = 0.

Interface anzeigen (und ausblenden)

Das Inventar soll erscheinen, wenn der Spieler irgendwo in der Szene rechts klickt. Dafür richten wir in den Spieleigenschaften unter „Mauseigenschaften“ ein globales Mausverhalten ein. Ist das Inventar schon offen, soll ein Rechtsklick es aber wieder schließen.

• Öffne die Aktion für „Rechte Maustaste“ und füge diese Aktionsteile hinzu:

1. Wenn Bedingung: wähle die Bedingung "inventory_disabled" und „false“. Die folgenden Aktionsteile laufen nur, wenn das Inventar nicht gesperrt ist. Wie beim Coin-Interface haben wir die Abfrage nur eingebaut, um das Inventar im Spielverlauf sperren zu können; in diesem Tutorial nutzen wir das nicht.
2. Wenn Bedingung: wähle die Bedingung "interface_visible" und „false“. Ist die Münze schon offen, soll das Inventar nicht erscheinen. Dazu müsste der Spieler rechts klicken, während er die linke Taste gedrückt hält; das ist unwahrscheinlich, aber nicht unmöglich, also verhindern wir es.
3. Wenn Bedingung: wähle die Bedingung "inventory_visible" und „false“. Ein Rechtsklick soll das Inventar öffnen, aber auch schließen, wenn es schon offen ist. Wir brauchen hier also eine Fallunterscheidung.
4. Bedingung ändern: setze die Bedingung "inventory_visible" auf true.
5. Interface ein-/ausblenden: blende die Klasse „Inventar“ ein.
6. Interface ein-/ausblenden: blende die Klasse „Sekundäres Interface“ ein.
7. Sonst
8. Bedingung ändern: setze die Bedingung "inventory_visible" auf false.
9. Interface ein-/ausblenden: blende die Klasse „Inventar“ aus.
10. Interface ein-/ausblenden: blende die Klasse „Sekundäres Interface“ aus.
11. Ende Wenn
12. Ende Wenn
13. Ende Wenn

Interface ausblenden

Im zweiten Fall schließt sich das Inventar, wenn der Cursor den Interface-Bereich verlässt:

• Aktiviere das Werkzeug für den Interface-Bereich und zeichne im Ansichtsfenster die Umrandung um das Inventar (natürlich nur um den sichtbaren inneren Teil).
• Öffne in den Interface-Einstellungen die „Aktion beim Verlassen“ und füge diese Aktionsteile hinzu:

1. Bedingung ändern: setze die Bedingung "inventory_visible" auf false.
2. Interface ein-/ausblenden: blende die Klasse „Inventar“ aus.
3. Interface ein-/ausblenden: blende die Klasse „Sekundäres Interface“ aus.

Platzhalter für Items

• Füge dem Interface "inventory" einen Button mit dem Namen "item_slot_1" hinzu.
• Wähle in den Button-Eigenschaften als Button-Typ „Platzhalter für Items“.
• Aktiviere das Werkzeug für Objektbereiche und zeichne den Platzhalter um das erste Rechteck.
• Wiederhole das für die übrigen 8 Plätze.

Scroll-Buttons

Die Engine zeigt die Scroll-Buttons nur, wenn das Inventar mehr Items enthält, als es Platzhalter gibt.

• Füge dem Interface "inventory" einen Button mit dem Namen "btn_left" hinzu.
• Wähle in den Button-Eigenschaften als Button-Typ „Items hoch/zurück scrollen“.
• Füge im Reiter „Bild (inaktiv)“ das Pfeilbild hinzu und schiebe es mit dem Verschiebewerkzeug im Ansichtsfenster an seine Position im Interface.
• Füge im Reiter „Bild (aktiv)“ das hervorgehobene Bild hinzu und schiebe es an dieselbe Position wie das normale Bild.
• Aktiviere das Werkzeug für Objektbereiche und zeichne den Bereich um den Pfeil-Button.
• Wiederhole das für den rechten Scroll-Button (Button-Typ „Items runter/vorwärts scrollen“).

Interfaces vorbereiten

Damit wir die Interfaces nutzen können, müssen wir sie dem spielbaren Charakter zuweisen und beim Spielstart ausblenden.

• Wähle im Bereich „Charaktere“ den spielbaren Charakter, öffne den Reiter „Interfaces“ und hake alle drei Interfaces an.
• Öffne in den Spieleigenschaften die Startaktion („Beim Start folgende Aktion ausführen“) und füge diese Aktionsteile hinzu:

1. Interface ein-/ausblenden: blende die Klasse „Hauptinterface“ aus.
2. Interface ein-/ausblenden: blende die Klasse „Inventar“ aus.
3. Interface ein-/ausblenden: blende die Klasse „Sekundäres Interface“ aus.

So arbeitest du mit den Befehlen

Die Projektdateien zu diesem Tutorial enthalten eine kleine Szene mit einigen Objekten und Items, an der du die Befehle ausprobieren kannst. Füge dem Objekt eine Aktion hinzu und wähle als Ausführungstyp „Befehl auf Objekt ausgeführt“. Wähle dann den Befehl und baue die Aktion aus Aktionsteilen auf. Für eine Aktion mit einem Item auf dem Objekt (z. B. „Use Key with Door“) wählst du als Ausführungstyp „Item fallen gelassen“ und dann das Item.

Sind wir fertig?

Du weißt ja, dass das erst Teil 1 ist, also natürlich nicht. Startest du das Spiel aus Projektdatei 1, funktioniert alles bestens, nur der Aktionstext nicht ganz: Mit den drei Befehlen klappt er, aber beim Ziehen und Benutzen eines Items ändert er sich nicht. Statt „Use Key with Door“ steht dort nur „Key“ oder „Door“. Das beheben wir in Teil 2.

---

---

Ressourcen