Tutorial: Erste Schritte

Visionaire Studio 3.x
Tutorial: Erste Schritte
Einstieg in die Grafikadventure-Erstellung
mit Visionaire Studio 3
Dieses Tutorial richtet sich an alle Visionaire-Einsteiger, die sich mit der Einarbeitung in das Programm allein anhand des Demospiels schwertun. Es werden
��������������
ausführlich die Schritte beschrieben, die notwendig sind, um eine erste spielbare
Kulisse zu erstellen. So erhält man einen guten Einblick in die generelle Funktionsweise und kann sich im Anschluss – z. B. mithilfe des Demospiels – leichter
weiterführenden Möglichkeiten zuwenden.
Das Tutorial ist die aktualisierte Fassung des gleichnamigen Visionaire-2.8-Tutorials aus dem Jahre 2006.
Für die Durchführung des Tutorials werden die diesem Dokument beiliegenden Grafikdateien
benötigt. Sie wurden dem Maniac-Mansion-Mania-Starterpack im „Day-of-the-Tentacle“-Stil
(DOTT-MMM) von DrEvil entnommen.
Prolog
Bevor Du mit diesem Tutorial loslegst, solltest Du
a) wissen, was ein Grafikadventure ist;
b) schon einmal ein Grafikadventure gespielt haben und möglichst davon begeistert gewesen
sein;
c) die Lust und den Ehrgeiz haben, selbst ein
Grafikadventure zu erstellen;
d) Visionaire Studio 3 heruntergeladen und installiert haben;
e) das Paket mit den Beispieldateien bereit halten
(siehe Kasten oben).
Falls etwas davon nicht zutreffen sollte, so besuche
zunächst die Visionaire-Homepage:
www.visionaire-studio.net
Außerdem solltest Du Dir der Tatsache bewusst sein,
dass für ein Grafikadventure – wie der Name schon
sagt – viele Grafiken notwendig sind. Die musst Du
natürlich selbst erstellen (oder Du musst jemanden
kennen, der das für Dich macht). Visionaire Studio ist
zwar so konzipiert, dass es dem Autor sehr leicht gemacht wird, auch ohne besondere Vorkenntnisse zu
einem Ergebnis zu kommen, aber einen Befehl nach
dem Muster „Male eine Kulisse mit einer Tür und
zwei Fenstern“ wirst Du nicht finden. Du benötigst
also in jedem Falle zusätzlich ein Grafikprogramm
und ein gerüttelt Maß an gestalterischer Kreativität.
Für dieses Tutorial bleibt Dir die Arbeit mit der Grafikerstellung aber noch erspart…
1. Vorbereitungen
Bevor Du loslegst, hast Du natürlich bereits eine
Handlung für Dein Spiel ersonnen, sie in einer einem
Spannungsbogen folgenden Storyline detailliert
ausgearbeitet und das Ganze mit überraschenden
Wendungen, einer Prise Humor, unverwechselbaren Charakteren und kniffligen Rätseln angereichert. Wir übergehen diesen nicht ganz unwichtigen Punkt hier mehr oder weniger und definieren
unsere Handlung wie folgt:
Die Spielfigur befindet sich in einem Zimmer mit verschlossener Tür und muss dieses verlassen.
 Starte den Visionaire-Editor. Wähle Neues Spiel erzeugen,
klicke Weiter und lege eine Projektdatei mit beliebigem
Namen an. Wähle dabei den Ort so, dass der Ordner mit
den Grafikdateien im selben Ordner liegt wie die Projektdatei.
Das Visionaire-System besteht aus zwei Komponenten, nämlich dem Editor, mit dem der Autor (also
Du) das gesamte Spiel zusammenstellt, und dem
Player, mit dem später das fertige Spiel abgespielt
wird. Uns interessiert hier zunächst einmal nur der
Editor (Abb. 1.1).
Am linken Rand findest Du die Schaltflächen mit
den Hauptkategorien (Spiel, Ladebildschirm, Kulissen
und Menüs, Personen, Interfaces etc.). Das ist quasi des
Hauptmenü des Editors. Entsprechend der Auswahl
dort verändert sich der Inhalt des Arbeitsbereichs
rechts daneben.
Auflösung
Eine der ersten Entscheidungen, die Du treffen
musst, wenn Du ein neues Spiel beginnst, ist die
Größe, die Dein Spiel auf dem Bildschirm einnehmen soll. In der (nach dem Programmstart sichtbaren) Kategorie Spiel findest Du unter Auflösung eine
Liste mit möglichen Formaten. Bei der Erstellung
Deiner Grafiken musst Du Dich nach der hier getrof-
Tutorial: Erste Schritte
Hauptliste
2
Arbeitsbereich
Hauptkategorien
Abb. 1.1: Der Visionaire-Editor
fenen Auswahl richten. Und da Du später Objekten
und Wegen Koordinaten zuweisen wirst, ist davon
abzuraten, die Auflösung des Spiels im Laufe des
Entwurfsprozesses noch einmal zu verändern. Wir
orientieren uns an den vorhandenen Grafiken:
 Wähle die Auflösung 320x200.
Für welche Auflösung du dich auch entscheidest
– jedes Spiel ist letztlich sowohl in einem Fenster als
auch im Vollbildmodus abspielbar.
Nun sind zwei wesentliche Spielkomponenten notwendig, nämlich eine Person (Spielfigur) sowie eine
Kulisse, auf der diese Figur sich bewegen kann.
2. Kulissenbau
Die Welt, in der Dein Spiel stattfindet, setzt sich aus
einzelnen Kulissen zusammen. Dabei kann es sich
um einen Raum, eine Straße, einen Wald oder sonst
eine Örtlichkeit handeln. Jede „Location“ wird in
Visionaire als eigenes Kulissenelement angelegt.
Wie andere Elemente auch, werden Kulissen über
die Hauptliste neben den Kategorie-Buttons verwaltet.
 Füge eine neue Kulisse hinzu: wähle die Kategorie Kulissen
und Menüs, drücke die Schaltfläche oberhalb der Liste
und wähle Kulisse (Abb. 2.1).
Ein neues Kulissenelement mit dem Namen Kulisse0
erscheint in der Auflistung. Wenn es angeklickt ist,
erscheint rechts ein neuer Arbeitsbereich mit mehreren über Tabs erreichbaren Seiten, von denen die
erste (Kulissenobjekte) sichtbar ist.
Den Namen Kulisse0 sollte man am besten gleich in
etwas Aussagekräftigeres ändern. Es handelt sich
hierbei um einen internen Namen, der später im
Spiel nirgendwo auftaucht. Zum Unbenennen die
Schaltfläche
oder die F2-Taste nutzen.
 Gib der Kulisse den internen Namen Bernards Zimmer.
Neben diesem internen Namen kann einer Kulisse
ein „öffentlicher“ Name zugewiesen werden. Auf
der Seite Einstellungen findet sich an zweiter Stelle
die Option Kulissenname. Dieser Name kann verwendet werden, um später dem Spieler beim Speichern
oder Laden von Spielständen anzuzeigen, auf welcher Kulisse er sich gerade befindet. Da wir diese
Funktion in diesem
Tutorial nicht nutzen, setzen wir den
Kulissennamen (der
mit dem internen
Namen übereinstimmen kann, aber nicht
Abb. 2.1: Ein neues Kulissenelement hinzufügen
muss) nicht.
Tutorial: Erste Schritte
Nun kommt das Wesentliche: der Kulisse muss eine
Grafik zugewiesen werden. Auf der Seite Einstellungen drückst du die Schaltfläche
neben dem Feld
Hintergrundbild. Es öffnet sich das Fenster Grafik laden,
in dem über eine weitere Schaltfläche
(unten
rechts) der Dateiauswahl-Dialog geöffnet wird.
 Füge die Datei Kulisse\Room.png ein, die wie alle anderen
Testdateien in dem beiliegenden Ordner Tutorial-Dateien
T
zu
finden ist.
Das Fenster Grafik
Visionaire unterstützt unterschiedliche
laden bietet noch Grafikformate, jedoch wird das PNG-ForEinstellmöglich- mat bevorzugt. Nicht zuletzt, da es durch
Alphakanal-Unterstützung optimale
keiten zu Aus- die
Transparenz-Möglichkeiten bietet.
schnitten
und
Transparenzen, die hier aber erst einmal nicht benötigt werden; also schließe das Fenster mit OK.
Die Kulissengrafik wird nun im Arbeitsbereich auf
den Seiten Kulissenobjekte und Wegsysteme angezeigt
und kann dort weiter bearbeitet werden. Denn es
fehlen noch einige wichtige Festlegungen, bevor
eine Person diesen Raum betreten kann.
Weggrenzen
Der gemeine Betrachter erkennt natürlich, wo in der
Grafik der Fußboden, wo die Wände, die Decke und
die einzelnen Objekte sind. Den Spielfiguren aber
muss beigebracht werden, in welchen Bereichen sie
sich bewegen dürfen und in welchen nicht. Dazu
musst Du für jede Kulisse Weggrenzen definieren.
 Lege ein neues Wegsystem für die Kulisse an, indem Du
auf der Seite Wegsysteme den Eintrag Wegsysteme markierst
und die Schaltfläche drückst.
Es sollte nun ein neues Wegsystem namens Wegsystem0 angelegt worden sein, das Du umbenennen
kannst, z. B. in Bernard normal (Abb. 2.2).
Ist der Unterpunkt Weggrenzen des Wegsystems in
der Liste markiert, verwandelt sich der Mauszeiger
– wenn er sich über der Grafik befindet – in ein Fadenkreuz, mit dem die Eckpunkte eines Polygons
direkt in die Kulissengrafik hineingesetzt werden
Abb. 2.2:
3
können (Abb. 2.2). Nur innerhalb dieses Polygons
kann eine Person später umhergehen.
Jedes Polygon muss aus mindestens drei Punkten
bestehen. Geschlossen wird es durch Anklicken
des Startpunktes oder durch Drücken der rechten
Maustaste. Die Punkte eines fertigen Polygons können verschoben oder durch Drücken der Entf-Taste
gelöscht werden. Durch Klick auf die Linie eines fertigen Polygons wird an dieser Stelle ein neuer Punkt
eingefügt (achte auf das sich ändernde Fadenkreuz).
Der ganze Bereich kann mit gehaltener Strg-Taste
auch verschoben werden.
 Setze ein Weggrenzen-Polygon, das den Fußboden des
Zimmers abdeckt.
Während des Spiels wird eine Person innerhalb der
definierten Weggrenzen zu dem Punkt laufen, den
der Spieler mit der Maus anklickt. Sie wird dazu immer den direkten Weg, also die kürzeste Verbindung
nehmen. Ob dies möglich ist, hängt jedoch von der
Form des Weggrenzenpolygons ab. Steht die Person
in Bernards Zimmer z. B. vor dem rechten Fenster und
soll auf die andere Seite des Bettes vor das Bücherregal gehen, wird sie das nicht tun, weil der direkte
Weg durch das Bett führt, was die Weggrenzen nicht
erlauben.
Deshalb werden neben den Weggrenzen auch Wegpunkte gesetzt.
Wegpunkte
Die Wegpunkte bilexakteren Positionierung von
den ein Netz von Zur
Punkten (Weggrenzen-Polygon oder
Verbindungslinen, Wegpunkte-Netz) kann über die Schalt, rechts oben im
entlang derer sich flächen
Arbeitsbereich, in die Grafik hinein- bzw.
die Spielfigur be- aus ihr herausgezoomt werden.
wegt, wenn eine
direkte Verbindung nicht möglich ist. Das Setzen
dieser Punkte funktioniert auf ähnliche Weise wie
bei den Weggrenzen – es muss entsprechend der
Unterpunkt Wegpunkte angeklickt sein. Du wirst sehen, dass die zuvor eingegebenen Weggrenzen zur
besseren Orientierung eingeblendet
bleiben, denn Wegpunkte machen
natürlich nur innerhalb der Weggrenzen Sinn.
Ein neuer Wegpunkt wird immer mit
dem gerade markierten (angeklickten) Punkt verbunden. Zwei vorhandene Wegpunkte kannst Du verbinden, indem Du den einen Punkt
markierst und den anderen mit der
rechten Maustaste anklickst. Auf die
gleiche Weise lassen sich bestehende Verbindungslinien zwischen zwei
Punkten wieder entfernen. Einen
Ein neues Wegsystem – Einzeichnen des Weggrenzen-Polygons
Tutorial: Erste Schritte
4
Punkt löschst Du mit der Entf-Taste.
Auf diese Weise lässt sich eine Netzstruktur realisieren – im Gegensatz
zum Polygon der Weggrenzen.
 Setze ein Netz von Wegpunkten wie in
Abb. 2.3 dargestellt.
Mit Hilfe dieses Netzes sind nun alle
Ecken und somit alle Objekte des
Raumes von jedem Standort aus erreichbar. Natürlich sind noch keinerlei Objekte auf unserer Kulisse definiert, doch dazu kommen wir später.
Zunächst wollen wir sehen, ob unse- Abb. 2.3:
re Wege auch tatsächlich ihren Dienst
tun. Und dafür brauchen wir eine Spielfigur.
Setzen des Wegpunkt-Netzes
3. Eine Person zum Leben erwecken
So wie jede Kulisse im Visionaire-Editor ein eigenes
Element darstellt, so ist auch jede Person ein Element. Neben der Hauptfigur, die der Spieler steuert,
kommen in einem Grafikadventure ja in der Regel
weitere Personen vor, mit denen man z. B. lustige
Unterhaltungen führen kann. Aber auch das Spielen
unterschiedlicher Personen, also ein Wechsel während des Spiels (wie z. B. in The Day of the Tentacle™)
ist mit Visionaire Studio umsetzbar.
Wir beschränken uns in unserem Tutorial zunächst
einmal auf eine einzelne Person. Das Anlegen des
Personenelements geschieht analog zum Anlegen
einer Kulisse.
 Füge eine neue Person hinzu: wähle die Kategorie Personen und drücke die Schaltfläche .
 Benenne die neue Person in Bernard um.
Im rechten Arbeitsbereich erscheinen jede Menge
neue Tabs. Unter dem ersten findest Du eine Liste
mit Bernards Outfits (Abb. 3.1). Hier können für eine
Person verschiedene Austattungen, also unterschiedliche Erscheinungsformen angelegt werden.
Eine Person hat vielleicht einmal Hut und Mantel an
und dann wieder Shorts und T-Shirt. Uns soll in diesem Tutorial ein einzelnes Outfit ausreichen.
 Benenne das vorhandene Outfit Unbenannt in Normal um.
Beim Aufklappen des Outfit-Baums über das kleine
[+] wird die Liste der Animationstypen sichtbar.
Unterhalb der Einträge Geh-Animationen und StandAnimationen sind bereits jeweils vier Animationen
angelegt, die mit front, back, left und right betitelt
wurden. Ein wesentliches Merkmal jeder Person ist
natürlich ihre Bewegung in der Kulisse. Und für jede
Bewegungsrichtung eines jeden Outfits muss dementsprechend eine eigene Animation angelegt werden – was sicherlich zu den schwierigsten Aufgaben
zählt. Es sei denn, man bedient sich (wie in unserem
Fall) bei schon bestehenden Grafiken. Übrigens wird
es in den meisten Fällen besser sein, acht statt nur
vier unterschiedliche Laufrichtungen anzulegen;
das ist zwar noch mehr Animationsarbeit, wertet
die Darstellung aber extrem auf.
Rechts neben der Animationsliste siehst Du den
Animations-Editor, der momentan noch recht
leer ist, da zwar einige Animationen angelegt, aber
noch nicht mit Inhalten gefüllt sind. Dieser Eingabebereich erscheint in dieser Form auch an anderen
Stellen des Editors, an denen Animationen definiert
werden können.
Eine Animation besteht aus einer Aneinanderreihung von Einzelbildern. Im Animations-Editor findest du eine Zeitleiste, in der jedes Animationsbild
(Frame) durch einen kleinen Balken repräsentiert ist.
Der jeweils aktuelle Balken ist mit einem schwarzen
Punkt versehen (Abb. 3.1).
Geh- und StandAnimationen
Zeitleiste
Abb. 3.1: Personenanimation
In unserem kleinen Tutorial beschränken wir uns
auf Geh- und Stand-Animationen. Diese werden
vom Visionaire-Player
automatisch abgespielt,
wenn die Person über
die Kulisse läuft bzw. stehenbleibt.
Tutorial: Erste Schritte
Über die Schaltfläche
im Animations-Editor
kannst Du einer Animation ein neues Frame hinzufügen. Es öffnet sich wieder das bereits bekannte
Grafik-laden-Fenster.
 Klicke unter Geh-Animationen die Animation rightt an und
füge über die Schaltfläche im Animations-Editor
ein neues Frame hinzu. Wähle die Datei Bernard\Gehen_
Rechts\02.png aus.
Beachte, dass wir diesmal – anders als bei der Kulissengrafik – Gebrauch von den zusätzlichen ImportFunktionen im Dialogfenster machen. Denn diesen
grünlichen Hintergrund hinter der Figur wollen wir
ja nicht wirklich haben. Wähle unter Transparenz die
Option Farbe und klicke die dann aktive Schaltfläche
an. Der Mauszeiger wird zur Pipette, mit der Du
die Farbe in der Grafik auswählen kannst, die transparent werden soll, also das Grün (Abb. 3.2).
Abb. 3.2: Transparente Farbe wählen
Der freigestellte Bernard erscheint nun unterhalb
der Zeitleiste im Animationsbereich. Damit der Visionaire-Player später weiß, wie und wo er die Person
auf den Kulissen positionieren soll, muss für jede
Animation ein Referenzpunkt, nämlich die Animationsmitte definiert werden.
 Aktiviere die Schaltfläche und setze die Animationsmitte (Koordinatenkreuz) in etwa so wie in Abb. 3.3.
Die weiteren Bilder der Animation fügst du nacheinander auf die gleiche Weise ein wie das erste.
 Füge der nach rechts gerichteten Animation fünf weitere
Frames hinzu; verwende die Dateien 03.png bis 07.png aus
dem Ordner Bernard\Gehen_Rechts.
Da die Grafikvorlagen schon entsprechend angelegt waren, musst die die einzelnen Frames nicht
mehr nach dem Mittelpunkt ausrichten. In anderen
Fällen kann dies notwendig sein.
Wenn du alle Grafiken in
der richtigen Reihenfolge
und mit transparentem
Hintergrund der Animation hinzugefügt hast,
kannst du einen Ablauftest durchführen. Mit dem
Play-Button oberhalb der Abb. 3.3: Animationsmitte
festlegen
Zeitleiste
spielst du die
5
Animation ab. Du solltest eine flüssige Bewegung
sehen. Allerdings legt Bernard eine Geschwindigkeit vor, die man ihm gar nicht zugetraut hätte. Um
ihn ein wenig zu drosseln, musst du die Pausen zwischen den Einzelbildern verlängern.
 Öffne über die Schaltfläche die Einstellungen der Animation und setze den Wert Pausen [msec] auf 150.
Zurück auf der Seite Animation bearbeiten
schlägt
Bernard nun ein gemäßigteres Tempo an. Dabei
handelt es sich aber nur um die Geschwindigkeit,
mit der die Animation abgespielt wird. Das Tempo,
mit dem die Person sich über die Kulisse bewegen
wird, wird im Feld Gehgeschwindigkeit unterhalb des
Animations-Editors eingestellt. Da dieses für das
gesamte Outfit gilt, ist es nur aktiv, wenn das Outfit
markiert ist.
 Klicke das Outfit Normal an und ändere die Gehgeschwindigkeit auf 100.
Damit ist die Gehanimation nach rechts auch schon
fertig. Und woher weiß der Projektor, dass es sich
hier um die Animation nach „rechts“ handelt? – In
den Einstellungen der Animation ist am Kompass
die Richtung einstellbar (hier bei den vier vorgegebenen Hauptrichtungen bereits voreingestellt).
 Erstelle die Gehanimationen für die Richtungen front und
back mit den Dateien in den Ordnern Bernard\Gehen_Vorne
und Bernard\Gehen_Hinten analog zur Richtung right
r .
Bei der Bewegung nach links machen wir uns die
Sache etwas einfacher. Wir spiegeln einfach die
Rechts-Animation.
 Wähle in den Animationseinstellungen der Richtung left
unter FFolgende Animation spiegeln die Option right.
Auf die gleiche Weise kannst Du nun die Stand-Animationen für alle vier Richtungen anlegen. Dabei
beschränken wir diese jeweils auf ein einzelnes Frame, was oftmals der Fall ist, da eine stehende Person sich eben nicht bewegt; sie könnte aber auch
atmen, mit den Augen zwinkern etc.
 Erstelle die Stand-Animationen mit den Grafiken standing.
png aus den Ordnern Bernard\Gehen_Rechts, Bernard\Gehen_
Vorne und Bernard\Gehen_Hinten.
Die Animation nach links erhälst Du wieder über
eine Spiegelung der Rechts-Animation. Pausen zwischen den Frames brauchst Du nicht zu setzen, da
ja jeweils nur ein Frame vorhanden ist, das dann
dauerhaft angezeigt wird. Und vergiss das Setzen
der Animationsmitten nicht – eine häufige Fehlerquelle.
Spätestens jetzt solltest Du Dein Spiel noch mal abspeichern. Es ist wohl eine alte Computer-Weisheit,
die sich auf so ziemlich jedes Programm anwenden
lässt, dass man gar nicht oft genug zwischenspeichern kann.
Tutorial: Erste Schritte
6
Abb. 3.4: Spieleinstellungen zum Programmstart
Das Spiel starten?
Nachdem nun eine Person und eine Kulisse vorhanden sind, müsste man das Adventure doch eigentlich schon abspielen können, oder?
 Setze in der Kategorie Spiel unter Spieleinstellungen die Erste
Kulisse und die Aktive Person wie in Abb. 3.4.
Die Angabe dieser Startbedingungen ist zwar wichtig, aber der Versuch, das Spiel nun zu starten – entweder über den Menüpunkt Extras » Spiel ausführen
(F9) oder über Datei » Speichern und Ausführen (Strg+F9)
– scheitert dennoch. Der Player schließt sich unverrichteter Dinge gleich wieder. Was der Hauptperson
fehlt, ist ein Interface.
4. Ein Interface anlegen
Als erfahrener Grafikadventure-Experte wusstest du
natürlich längst, woran es noch mangelt. Schließlich muss dem Spieler in irgendeiner Form ein Satz
von Befehlen zur Verfügung stehen (z. B. „Gehe zu“,
„Schau an“, „Nimm“ etc.), und eine Adventure-Figur
ohne Inventar ist nur eine halbe Adventure-Figur.
Auch diesbezüglich ist Visionaire sehr flexibel und
erlaubt unterschiedlichste Lösungen.
In diesem Tutorial setzen wir das klassische Lucasarts™-SCUMM-Interface um, das im unteren Bildschirmdrittel links die Befehlsliste und rechts das
scrollbare Inventar anzeigt. Ein Blick auf unsere Kulisse Bernards Zimmer zeigt, dass hier schon der entsprechende Platz freigehalten worden ist.
Mauszeiger
Bevor wir uns aber explizit dem Interface zuwenden, sind vorbereitend noch zwei Dinge einzurichten. Da wäre zunächst der Mauszeiger (Cursor) für
unser Spiel. Man kann beliebig viele verschiedene
statische oder animierte Cursor anlegen und für die
unterschiedlichsten Befehle verwenden. Wir belassen es bei einem.
 Füge einen neuen Mauszeiger hinzu: wähle die Kategorie
Mauszeiger und drücke die Schaltfläche der Hauptliste.
 Benenne das neue Element in Mauskreuz um.
Im rechten Arbeitsbereich erscheint ein AnimationsEditor, wie Du ihn schon bei der Eingabe der Person
kennengelernt hast. Für jeden Cursor können zwei
Zustände definiert werden, nämlich der inaktive,
also normale Mauszeiger und der aktive Mauszeiger (siehe Tabs). Letzterer wird im Spiel immer dann
angezeigt, wenn man sich mit der Maus über einem
Objekt bewegt, also ein Befehl angewendet werden
kann.
Den inaktiven Mauszeiger werden wir animieren.
Dazu laden wir eine Bildfolge aus nummerierten
Grafikdateien über die Schaltfläche
„in einem
Rutsch“ in die Zeitleiste. Du musst im sich öffnenden Dateiauswahl-Dialog einfach eine der Dateien
auswählen, die anderen werden dann automatisch
dazu geladen.
 Blende die Seite Inaktiver Mauszeiger ein und lade die
Bildfolge kreuz01.png … kreuz11.png aus dem Ordner Cursor
in die Zeitleiste.
Im Fenster Bildfolge laden, das erscheint, wählst du
die Option Farbe. Daraufhin wird der erste Frame
angezeigt, und Du kannst mit der Pipette die Farbe
wählen, die durch Transparenz ersetzt werden soll,
diesmal ein knalliges Magenta.
Nun sollten elf neue Frames, nummeriert von 0 bis
10, in der Zeitleiste erschienen sein (Abb. 4.1). Um
die richtige Ablaufgeschwindigkeit zu erhalten,
musst du die Pause bzw. Anzeigedauer setzen.
 Setze in den Einstellungen die Pausen auf 150.
Jetzt ist eine Vorschau der Animation über die
Schaltfläche
möglich. Durch den karierten Hintergrund ist es etwas schwer zu erkennen, aber es
handelt sich um ein Fadenkreuz, das seine Farbe von
hell nach dunkel verändert. Am besten ist das Kreuz
im vorletzten Frame zu erkennen, deshalb solltest
du dieses anzeigen, um im folgenden den CursorMittelpunkt exakt platzieren zu können. Nutze auch
die Lupen-Funktion zum Heranzoomen.
 Setze durch Klick mit der Maus in die Cursor-Grafik die
Animationsmitte wie in Abb. 4.1.
Für den aktiven Mauszeiger belassen wir es bei einer
statischen Darstellung aus einem einzelnen Frame.
Das Setzen einer Pause kannst du dir hier natürlich
sparen; der Mauszeiger-Mittelpunkt sollte exakt an
derselben Stelle liegen wie beim inaktiven Cursor.
Abb. 4.1: Mauszeiger-Animationsbereich
Tutorial: Erste Schritte
 Füge als aktiven Cursor ein Frame mit der Grafik aus der
Datei Cursor\kreuz01.png ein.
Schriftart
7
Zeichen in der Rei- Wenn Du die Zeichenfolge für das Alphahenfolge ihres Vor- bet aus dieser PDF-Datei herauskopierst,
kommens in der dann achte darauf, dass zwischen den
zeichen U und V womöglich ein ZeilenGrafik eingegeben umbruchszeichen mitkopiert wird. Das
werden. Auf diese muss dann nach dem Einfügen wieder
werden. Oder kopiere die beiden
Weise erfolgt die entfernt
Zeilen einzeln nacheinander.
Zuordnung.
 Gib die folgende Zeichenfolge in das Feld Alphabet ein:
!"#$%&‘()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTU
"
"#$%&‘()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTU
VWXYZabcdefghijklmnopqrstuvwxyzöüäÖÜÄ
 Setze auf der Seite Einstellungen
E
den Zeichenabstand auf 0,
den Zeilenabstand auf 4 und die Leerzeichenbreite auf 3.
Die zweite vorbereitende Einstellung ist die Einrichtung einer passenden Schriftart für den Aktionstext, der im Interface dynamisch angezeigt wird
(z. B. „Benutze
Benutze Schlüssel mit Tür“
Tür“). In Visionaire Studio
kann nicht einfach auf die unter Windows installierten True-Type-Schriftarten zurückgegriffen werden.
Vielmehr ist jedes Zeichen – Buchstaben, Satz- und
Sonderzeichen – als Grafik zu erstellen. Das erlaubt
auch sehr individuelle Schriften.
 Füge eine neue Schriftart hinzu: wähle die Kategorie
Jetzt aber ran ans Interface
Schriftarten und drücke die Schaltfläche der Hauptliste. Nach diesen vorbereitenden Einstellungen können
 Benenne das neue Element in Interface um.
wir jetzt das Interface selbst anlegen.
Glücklicherweise muss nicht jedem Zeichen eine  Füge ein neues Interface hinzu: wähle die Kategorie Intereigene Grafikdatei zugewiesen werden. Der Editor
faces und drücke die Schaltfläche der Objektliste.
kann die einzelnen Zeichen, die alle in einer einzi-  Benenne das neue Element in Standard um.
gen Datei aufgereiht sind, automatisch separieren.
Der Arbeitsbereich rechts ähnelt dem bei den Kulis Wechsle im Arbeitssen. Auch hier muss zunächst die passende Hinterbereich zur Seite
grundgrafik ausgewählt werden.
Einstellungen und wähle
 Füge auf der Seite Einstellungen im Feld Hintergrundbild die
unter Schriftartbild die
Datei Interface\Hintergrund.png ein.
Datei Schriften\Tasche.
png. Definiere dabei
Befehlsschalter
den rosafarbenen
Die Grafik wird auf der Seite Schalter angezeigt. Sie
Hintergrund als Transzeigt neun Befehle und einen großen schwarzen
parenz.
Raum, der Platz für unser Inventar bietet. Aber das
Auf der Seite Schriftart
ganze ist bislang nur ein Bild ohne Funktion. Dessiehst Du, dass in der
halb musst Du jeden zur Verfügung stehenden BeDatei der komplette
fehl als eigenes Schalterobjekt anlegen. Wir beginSchriftsatz vorhanden
nen mit dem ersten Befehl Schau:
ist (Abb. 4.2). Ein Druck Abb. 4.2: Grafikdatei mit
 Füge ein neues Schalterobjekt hinzu: drücke auf der Seite
auf die Schaltfläche
Schriftsatz
Schalter die Schaltfläche .
zeigt Dir, dass Visionaire die einzelnen Zeichen als solche erkannt hat  Benenne den neuen Schalter in Schau um.
– es wird ein Rahmen um jedes identifizierte Ele- Für den Schalter öffnet sich ein neuer Arbeitsbement gesetzt. Wenn Du mit der Maus darüberfährst, reich unten (Abb. 4.3). Definiere den Schalter in den
wird Dir zu jedem Rahmen angezeigt, welches re- Schaltereigenschaften als Befehlsschalter. Auf der Seite
ale Zeichen mit dieser Zeichengrafik verbunden ist Befehlseigenschaften vergibst Du den Namen Schau an.
– das passt noch nicht so
recht zusammen.
Denn
natürlich
beschränkt sich die Zeichenerkennung auf die
Abgrenzung zusammenhängender Pixel; um welches Zeichen es sich jeweils handelt, kann nicht
automatisch
ermittelt
werden. Deshalb müssen
unterhalb der Grafikanzeige im Feld Alphabet alle Abb. 4.3: Einstellungen eines Befehlsschalters
Tutorial: Erste Schritte
Dieser Name wird im Spiel für den Satzbau verwendet; es wird dann beispielsweise heißen: „Schau an
Fenster“. Referenziere den soeben angelegten Cursor
Fenster“
Mauskreuz und lege fest, dass der Befehl auf Objekte
und Personen angewendet werden kann – schließlich
soll man auch Personen anschauen können und
nicht nur Objekte.
 Definiere den Schalter Schau als Befehlsschalter und nimm
alle Einstellungen entsprechend der Abb. 4.3 vor.
Damit ist der Befehl
als solcher definiert.
Nun müssen wir das
Schalterobjekt Schau
nur noch mit dem
Wort Schau auf unserer
Interface-Grafik
verbinden. Über die
Schaltfläche
oberhalb der Grafikanzeige
kannst du in der Grafik Abb. 4.4: Setzen des Objektbereichs in der Interfaceeinen Bereich umranGrafik
den, der während des
Spiels anklickbar ist und den Befehl Schau ausführt.
Die Eingabe des Polygons funktioniert wie bei den
Weggrenzen der Kulisse. Du solltest zur exakteren
Platzierung den Zoom verwenden.
 Zeichne ein Rechteck um das Wort Schau in der InterfaceGrafik wie in Abb. 4.4 (zweifach gezoomte Ansicht).
Auf die gleiche
Weise kannst du Gesetzte Polygonpunkte kannst Du mit
der Maus verschieben oder in Pixelschritnun die übrigen ten mit den Pfeiltasten der Tastatur.
acht Befehle definieren. Also erst jeweils ein passendes Schalterobjekt anlegen und dann – während der Schalter in
der Objektliste markiert ist – das Rechteck um das
passende Wort ziehen.
Die Einstellungen für die einzelnen Schalter variieren. Alle sind Befehlsschalter, und alle bekommen den
Mauskreuz-Cursor zugewiesen, aber:
 Nimm, Öffne, Schliesse, Ziehe und Drücke werden
nur auf Objekte angewendet;
 Rede wird nur auf Personen angewendet; sein
Name lautet Rede mit;
 Benutze ist ein kombinierter Befehl, der nur auf
Objekte angewendet wird; das Verbindungswort ist mit (z. B. für den Befehl „Benutze Schlüssel mit Tür“);
Tür“);
 Gib ist ein 'Gib'-Befehl, der nur auf Personen
angewendet wird; das Verbindungswort ist an
(z. B. für den Befehl „Gib Buch an Laverne“
Laverne“); der
'Gib'-Befehl ist vergleichbar mit dem kombinierten Befehl, jedoch wird hier zusätzlich der übergebene Gegenstand automatisch vom Inventar
8
der einen in das Inventar der anderen Person
verschoben.
 Lege die restlichen acht Befehle an.
 Lege zusätzlich den Befehl Gehe zu als NNormaler
ormaler Befehl
Befehl,,
anwendbar auf Objekte und Personen, an (ohne Rechteck).
Der Befehl Gehe zu hat keine Entsprechung in unserer Interface-Grafik, und ihm muss deshalb auch
kein Rechteck zugewiesen werden. Gehe zu wird der
Standardbefehl, der im Spiel dann ausgeführt wird,
wenn gerade kein anderer Befehl aktiv ist.
 Definiere auf der Seite Einstellungen
E
des Interfaces den
Befehl Gehe zu als Standardbefehl.
 Aktiviere die Option Aktionstext anzeigen und setze die
Schriftart Interface.
 Platziere das Interface mit der Ausrichtung Absolut und
einem Offset von X = 0 und Y = 144.
Aktionstext und Inventar
Zurück auf der Seite Schalter definierst du den Bereich des Interfaces, in dem der Aktionstext angezeigt werden soll. Nach Drücken der Schaltfläche
kannst du ein Rechteck aufziehen (Maustaste
gedrückt halten und ziehen).
 Setze das Textrechteck wie in Abb. 4.5.
Abb. 4.5: Rechteck für Aktionstext setzen
Bleiben noch die Platzhalter für die Inventar-Gegenstände. Auch diese werden als Schalterobjekte
angelegt. Der Typ des Schalters ist aber eben Platzhalter für Gegenstände und nicht Befehlsschalter. Und auch
hier wird für jedes Objekt ein rechteckiger Bereich
in der Interface-Grafik angelegt, an dem dann später die Grafik des jeweiligen Gegenstandes eingeblendet wird.
 Lege acht Schalterobjekte mit den Namen Inventar1 …
Inventar8 als Platzhalter an. Setze die zugehörigen Bereiche
wie in Abb. 4.6.
Abb. 4.6: Bereiche im Interface definieren (links neun Befehlsschalter, rechts acht Platzhalter für das Inventar, dazwischen zwei Scroll-Pfeile für das Inventar)
In Abb. 4.6 ist zu erkennen, dass zwischen den Befehlsschaltern auf der linken Seite und den Inventar-Platzhaltern auf der rechten Seite des Interfaces
Tutorial: Erste Schritte
noch zwei weitere Bereiche definiert wurden. Hier
werden zwei Pfeile Platz finden – einer nach oben
und einer nach unten gerichtet –, mit denen man
durch das Inventar scrollen kann. Diese Pfeile sind
nicht Teil der Hintergrundgrafik, sondern werden als
separate Grafiken platziert, da sie die Eigenschaft
haben, automatisch ein- bzw. ausgeblendet zu werden, wenn sie benötigt bzw. nicht mehr benötigt
werden. Für diese Pfeile gibt es eigene Schaltertypen, nämlich Gegenstände nach oben (bzw. rückwärts)
scrollen und Gegenstände nach unten (bzw. vorwärts) scrollen.
 Lege zwei entsprechende Schalterobjekte mit den Namen
Pfeil nach oben und Pfeil nach unten an und setze die zugehörigen Bereiche wie in Abb. 4.6.
 Setze auf den Seiten Inaktives Bild der Pfeil-Schalter jeweils
die Pfeilgrafik Interface\Pfeil_oben_off.png bzw. Interface\
Pfeil_unten_off.png.
Nach Aktivierung des Platzierungs-Werkzeugs
werden die soeben referenzierten Pfeil-Grafiken jeweils in der linken oberen Ecke der Interface-Grafik
angezeigt. Verschiebe sie mit der Maus an die Stelle, an der sich der zugehörige umrandete Bereich
befindet. Die Bereichs-Umrandungen sind nicht
sichtbar, wenn die aktiven oder inaktiven Grafiken
eingeblendet sind; andersherum aber schon – also
am besten ein wenig zwischen den verschiedenen
Ansichten hin- und herschalten, bis beide Elemente
deckungsgleich sind (Abb. 4.7).
9
 Wechsle zur Kategorie Personen und öffne die Seite Interfaces von Bernard. Wähle dort das Interface Standard durch
Aktivieren der Checkbox aus.
 Gib der Person bei dieser Gelegenheit auf der Seite Einstellungen den Namen Bernard.
Erster Spieltest
Gewöhne dir am
besten an, das Die Grundeinstellung für die Vorschau
aus dem Editor heraus ist das Abspielen
Spiel über den des Adventures in einem Fenster. Das
Menübefehl Datei solltest Du vorerst auch nicht ändern,
wenn Du jetzt im Vollbildmodus
» Speichern und aus- denn
startest, wirst Du Schwierigkeiten haben,
führen bzw. über den Player wieder zu beenden.
die Tastenkombination Strg+F9 zu starten. So stellst Du sicher, dass
Deine letzten Änderungen übernommen werden.
 Starte das Spiel mit Strg+F9.
Der Player startet das Spiel. Wir sehen Bernards
Zimmer, und wir sehen unser Interface sowie den
pulsierenden Fadenkreuz-Mauszeiger. Es lassen sich
sogar schon die Befehle anklicken, deren Text als
Aktionstext angezeigt wird. Aber wo ist Bernard?
5. Die Kulisse ausstatten
Schließe das Player-Fenster über die [×]-Schaltfläche und rufe noch einmal Bernards Personeneinstellungen auf. Auf der linken Seite findest du die
Einstellung Person steht bei. Zwar haben wir in den
Grundeinstellungen definiert, dass Bernard die Aktive Person ist, aber wir müssen hier noch den Ort
seines ersten Auftretens festlegen. Es ist die Angabe
eines spezifischen Kulissenobjekts erforderlich.
Ein Kulissenobjekt anlegen
Abb. 4.7: Platzierung der Pfeil-Grafiken an den selben Stellen wie
die zugehörigen Bereiche
Lass dich nicht davon irritieren, dass wir nur die inaktive Grafik zugewiesen haben. Aktive Grafiken werden genutzt, um bestimmte Befehlsschalter optisch
hervorzuheben, z. B. beim Überfahren mit der Maus
oder wenn ein Befehl gerade aktiv ist. Da unser Ziel
in diesem Tutorial aber erst einmal ein funktionierendes Spiel ist, übergehen wir diese Möglichkeit an
dieser Stelle – nicht ohne zu betonen, dass es sich
hierbei um eine sehr sinnvolle Funktion handelt.
Schließlich müssen wir noch festlegen, um wie viele
Elemente die Inventarliste bei einem Klick auf einen
Pfeil gescrollt werden soll.
 Setze in den Einstellungen
E
des Interfaces die Eigenschaft
Gegenstände scrollen um _ Position(en) auf 4.
Somit ist das Interface mit allen notwendigen Funktionen für ein Spiel ausgestattet. Wir müssen es nur
noch unserer Spielfigur zuweisen.
Dass auf unserer Kulisse noch Objekte fehlen, mit
denen unsere Spielfigur interagieren kann, ist ja
kein Geheimnis. Das erste Objekt, das wir nun anlegen, wird aber die alleinige Aufgabe haben, als
Startpunkt für Bernard zu dienen.
 Füge ein neues Kulissenobjekt hinzu: wähle dazu die
Kategorie Kulissen und Menüs, klicke auf Bernards Zimmer und
drücke die Schaltfläche auf der Seite Kulissenobjekte.
 Benenne das neue Kulissenobjekt in Start Bernard um.
Es öffnet sich unten der Arbeitsbereich des Objektes. Bei diesem ersten Kulissenobjekt nimmst du nur
eine einzige Einstellung vor, nämlich die Position. Ein
Druck auf die Schaltfläche öffnet das Dialogfenster Position auswählen, in dem du den Referenzpunkt
für das Objekt setzen kannst. Dabei solltest du innerhalb der Weggrenzen bleiben, die mit eingeblendet werden.
 Setze den Positionspunkt des Objekts in die Mitte des
Fußbodens (Abb. 5.1).
Tutorial: Erste Schritte
Abb. 5.1: Den Referenzpunkt des Kulissenobjektes setzen
Dadurch, dass wir für das soeben angelegte Objekt
außer der Position keine weitere Einstellung vorgenommen haben, ist es im Grunde nichts weiter
als eine Koordinatendefinition, auf die von anderer
Stelle verwiesen werden kann. Eine Interaktion mit
dem Objekt während des Spiels ist nicht möglich.
In Bernards Personeneinstellungen kannst du nun
die Einstellung Person steht bei setzen. Im Fenster Objekt auswählen, das sich nach Drücken der Schaltfläche
öffnet, hast Du Zugriff auf alle Objekte des
Projektes. Wähle oben Bernards Zimmer, und es erscheint unten eine Liste aller Objekte auf dieser Kulisse. Bislang ist es nur eins, nämlich Start Bernard.
 Setze das Kulissenobjekt Start Bernard als Startobjekt für
die Person Bernard.
Starte das Spiel erneut mit Strg+F9. Und tatsächlich
steht Bernard nun auf unseren Startkoordinaten in
der Mitte des Raumes. Laufe zum Test mit der Person durch den Raum. Werden die Gehanimationen
richtig abgespielt? Sind alle Ecken des Zimmers
erreichbar? Falls nicht alles so läuft wie es soll, suche den Fehler oder beginne mit dem Tutorial von
vorn… 
Perspektive erzeugen
Wenn du mit Bernard bis vor das Bücherregal an der
rückwärtigen Wand gelaufen bist, wirst du bemerkt
haben, dass die Figur dort etwas überdimensioniert
wirkt. Sie stößt mit dem Kopf fast an die Decke des
Zimmers. Das liegt daran, dass die Kulisse perspektivisch gezeichnet ist, während Bernard überall die
gleiche Größe besitzt.
Auch für dieses Problem gibt es in Visionaire natürlich eine Lösung. In Bernards Personeneinstellungen sollte die Option Person skalieren aktiviert sein
(normalerweise ist sie das bereits). Rufe nun die
Kulisse Bernards Zimmer auf und blende auf der Seite
Wegsysteme die Wegpunkte ein. Markiere den obersten
Wegpunkt vor dem Bücherregal. Im unteren Arbeitsbereich öffnet sich daraufhin die Seite Personen-
10
größe, die sich jeweils auf einen einzelnen, nämlich
den markierten Punkt bezieht.
 Setze die Eigenschaft Personengröße des obersten Wegpunktes mit dem Schieberegler auf 75.
 Setze die gleiche Eigenschaft für den Wegpunkt unten
rechts (vor dem rechten Fenster) auf 113.
Die Werte für die Personengröße sind prozentuale
Angaben, die sich auf die Originalgröße der Personengrafik beziehen. Ein Wert von -1 steht für eine
automatische Berechnung, d. h. die beiden gesetzten Werte reichen aus, um die Person nun während
des Laufens in ihrer Größe zu skalieren. In den Zwischenbereichen wird interpoliert. Teste das Ergebnis im Spiel.
Weitere Kulissenobjekte anlegen
Bernard läuft durch sein Zimmer – damit ist die
grundlegende Funktionalität unseres Spieles schon
einmal realisiert. Jetzt können wir uns so langsam
an die Inhalte machen, die ein Grafikadventure zu
dem machen, was es ist: Objekte, die man anschauen, nehmen, benutzen kann etc.
 Lege ein neues Kulissenobjekt an und nenne es Chuck. Setze als Objektnamen in den Einstellungen Chuck die Pflanze.
 Drücke die Schaltfläche
und erstelle für das Objekt
Chuck einen Bereich um die Pflanze wie in Abb. 5.2.
Abb. 5.2: Objektbereich für Chuck die Pflanze definieren
Dieser Objektbereich ist der Bereich, bei dessen
Überfahren mit der Maus während des Spiels das Objekt Chuck erkannt wird. Nur mit Objekten, denen ein
solcher Bereich zugewiesen wird, kann also im Spiel
interagiert werden. Zusätzlich benötigt wird eine Position, also ein Referenzpunkt, wie du ihn auch schon
für das Objekt Start Bernard angelegt hast. Während
Chuck die Pflanze
sich außerhalb der Wenn du dich fragst, wieso die Pflanze
einen Namen hat, besuche
Weggrenzen be- en.wikipedia.org/wiki/Chuck_the_Plant
findet, muss sich
ihr Positionspunkt innerhalb der Grenzen befinden,
denn es handelt sich dabei um den Punkt, zu dem
die Spielfigur läuft, wenn sie einen Befehl auf das
Objekt, in unserem Falle die Pflanze, anwendet.
 Setze die Position für das Objekt Chuck auf dem Fußboden
vor der Pflanze wie in Abb. 5.3.
Tutorial: Erste Schritte
11
Diese Einstellung bewirkt, dass eine Spielfigur nun
immer richtig zu dem Objekt ausgerichtet ist.
Eine Aktion anlegen
Abb. 5.3: Referenzpunkt (Position) für Chuck die Pflanze setzen
Starte das Spiel erneut und fahre mit dem Mauszeiger über die Pflanze. Als Aktionstext erscheint der
Befehl „Gehe zu Chuck die Pflanze“. Klicke auf die
Pflanze, und Bernard läuft zu den Koordinaten, die
als Objektposition angegeben wurden. Die Figur
wird aber auch dann dort hinlaufen, wenn du einen
anderen Befehl verwendest, z. B. „Nimm Chuck die
Pflanze“.
Tatsächlich
schaut
Bernard die Pflanze
auch an, wenn er bei ihr
angekommen ist. Das
liegt aber nur daran,
dass die Figur sowieso
von rechts kam und also
nach links ausgerichtet ist. Du kannst ja mal Abb. 5.4: Setzen der Ausrichtung für ein
versuchen, Chuck „von
Kulissenobjekt
unten kommend“ zu erreichen, indem du Bernard unterhalb der Zielposition postierst und dann „Gehe zu Chuck die Pflanze“
wählst. Die Person wird dann unter Umständen mit
Blick auf die Tür oder die Wand neben der Pflanze
stehen bleiben. Um dies zu verhindern, solltest du
für jedes Kulissenobjekt zusätzlich eine Blickrichtung definieren.
 Setze für das Objekt Chuck per Mausklick in den Kompass
die Ausrichtung:
Ausr
180° fest (Abb. 5.4).
Abb. 5.5: Eine Aktion anlegen
Welchen Befehl du auch immer auf die Pflanze anwendest – Bernard bleibt stumm und tatenlos. Was
noch fehlt, sind Aktionen.
Visionaire Studio verzichtet bewusst auf eine Skriptsprache zur Steuerung der Spielabläufe (das Einbauen von Skripten lohnt sich nur bei sehr speziellen
Aufgabenstellungen). Stattdessen dienen Aktionen als Quasi-Programmierelemente. Die Erfahrung
zeigt, dass kaum eine Spielidee mit diesem System
nicht zu realisieren ist. Im Grunde funktioniert das
Ganze selbst wie ein Adventure, denn man klickt
sich die Befehle einfach zusammen.
 Wähle das Kulissenobjekt Chuck aus und lege auf der Seite
Aktionen im unteren(!) Arbeitsbereich über die Schaltfläche eine neue Aktion an (Abb. 5.5).
 Behalte die Ausführungsart: Befehl auf Objekt angewandt bei
und wähle als Befehl:
Befehl Schau.
Wir legen also eine Aktion an, die ausgeführt wird,
sobald der Befehl Schau auf das aktuelle Objekt (unsere Pflanze) angewendet wird.
Jede Aktion kann aus beliebig vielen Aktionsteilen
bestehen, die nacheinander ausgeführt werden. Auf
diese Weise lassen sich komplexe Abläufe erstellen.
 Lege in der Liste unterhalb von Befehl: Schau über die
Schaltfläche einen neuen Aktionsteil an (Abb. 5.5).
Der Aktionsteil Text ausgeben ist voreingestellt, weil
es der am häufigsten genutzte ist. Und auch wir nutzen ihn, denn wenn Bernard die Pflanze anschaut,
soll er dazu einen Kommentar abgeben.
 Gib den folgenden Text in das Feld Text rechts ein:
Ein gartenbaulicher Albtraum.<p3>
Die Zeichenfolge <p3> am Ende des Satzes steht für
eine Pause von drei Sekunden. Der Text wird also
drei Sekunden lang angezeigt. Eine solche Pause
empfiehlt sich immer am Ende eines Textes, da dieser sonst so lange eingeblendet bleibt bis er vom
Spieler „weggeklickt“ wird – was in bestimmten Si-
Tutorial: Erste Schritte
tuationen gar nicht möglich ist. Ein Text kann auch
aus mehreren Sätzen bestehen, die nacheinander
eingeblendet werden. Dazu einfach nach jedem
Satz eine entsprechende Pause einrichten.
Du könntest die gerade angelegte Aktion jetzt im
Spiel testen, jedoch würde kein Text erscheinen, da
wir bislang noch keine Schriftart für unsere Textausgabe definiert haben. Nur dem Aktionstext im
Interface hatten wir einen Schriftsatz zugewiesen,
nicht aber unserer Person.
 Lege eine neue Schriftart an und nenne sie Bernard. Lade
dazu die Grafikdatei Schriften\Personenschrift.png und setze
den Hintergrund transparent.
 Gib die folgende Zeichenfolge in das Feld Alphabet ein:
!"§$%&‘()*+,-./0123456789:;<=#>?@ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopqrstuvwxyzöüäÖÜÄß
 Setze den Zeichenabstand auf -1, den Zeilenabstand auf -5
und die Leerzeichenbreite auf 4.
 Wähle in Bernards Personeneinstellungen die gerade
erstellte Schriftart: Bernard.
Jetzt kannst du das Spiel starten und den Befehl
„Schau an Chuck die Pflanze“ testen. Bernard wird
seinen wenig begeisterten Kommentar abgeben.
Der Text wird automatisch über der betreffenden
Person angezeigt.
Auf diese Weise kannst du für weitere Befehle eine
Textausgabe erstellen, z. B.:
 „Nimm Chuck“: Die fass ich nicht an, die hat
Stachel.<p3>
 „Drücke Chuck“: Sie ist zwar nicht schön,<br/>
aber ich werfe sie nicht herunter.<p3>
Eine Kommentargruppe definieren
Will man für jedes Objekt jeweils alle neun Befehle mit einer Textausgabe versehen (abgesehen von
den Befehlen, die tatsächlich eine spielentscheidende Aktion auslösen), dann ist das eine Menge Arbeit.
Tatsächlich sind für die meisten Objekte nur einige
wenige Befehle wirklich sinnvoll. Bei den übrigen
kann ein Text ausgegeben werden, der die Sinnlosigkeit des Befehls auf den Punkt bringt, wie z. B.
„Das mache ich nicht.“ oder „Ich glaube nicht, dass
mich das weiterbringt.“.
Um diese Texte nicht alle einzeln anlegen zu müssen, können für jede Person Kommentargruppen
angelegt werden. Sobald auf ein Objekt ein Befehl
angewendet wird, für den keine Aktion definiert
ist, wird ein beliebiger Kommentar aus der gerade
aktuellen Gruppe ausgegeben. Eine solche Gruppe
ist also quasi eine Sammlung verneinender Antworten. Das ist zwar auf Dauer nicht sehr originell, aber
immer noch besser, als wenn ein Befehl überhaupt
keine Wirkung hat.
12
 Wähle die Person Bernard und lege auf der Seite Kommentargruppen eine neue Gruppe an. Nenne sie Normal.
In dieser Gruppe kannst Du nun beliebig viele Kommentare anlegen. Je mehr es sind, um so weniger
fällt im Spiel auf, dass es sich nur um „Lückenfüller“
handelt. Nicht jeder Kommentar macht auch unbedingt bei jedem Befehl Sinn; deshalb sind Kommentare sowohl universell (Befehl > [leer]) als auch spezifisch für einen bestimmten Befehl definierbar.
Für jede Person können mehrere Kommentargruppen angelegt werden, die während des Spiels auswechselbar sind. So lässt sich beispielsweise die
unterschiedliche Laune einer Person unterstreichen
(„normale Kommentare“, „übellaunige Kommentare“, „sarkastische Kommentare“ etc.).
 Fülle die Kommentargruppe mit Kommentaren, ähnlich
Abb. 5.6.
 Setze auf der Seite Einstellungen die Kommentargruppe:
Normal.
Abb. 5.6: Beispielhafte Einträge für eine Kommentargruppe
Gegenstand <> Kulissenobjekt
So nett Chuck auch ist – eine wirkliche Funktion hat
er nicht. Wenden wir uns nun also der eigentlichen
Handlung unseres Spiels zu, die wir am Anfang
festgelegt haben. Zur Erinnerung:
Die Spielfigur befindet sich in einem Zimmer mit verschlossener Tür und muss dieses verlassen.
Die Tür ist schon da (daraus machen wir gleich ein
Objekt), also benötigen wir noch einen Schlüssel,
mit dem das Verlassen des Zimmers letztlich doch
gelingen wird.
 Füge einen neuen Gegenstand hinzu: wähle dazu die
Kategorie Gegenstände und drücke die Schaltfläche der
Hauptliste.
 Benenne den neuen Gegenstand in Schlüssel um. Vergib
auch den Objektnamen: Schlüssel.
 Wähle auf der Seite Bild die Grafikdatei Gegenstaende\
Schluessel.png. Definiere den schwarzen Hintergrund als
transparent.
Ein Gegenstand ist ein Objekt, das im Inventar
einer Person auftaucht – dort wird dann sein Bild
angezeigt. In Grafikadventures ist es häufig so, dass
ein solcher Gegenstand zunächst in einer der Ku-
Tutorial: Erste Schritte
lissen liegt und dann von der Spielfigur aufgenommen wird. Beachte, dass es sich innerhalb eines Visionaire-Projektes dabei um zwei unterschiedliche
Objekte handelt!
Alles, was sich auf einer Kulisse befindet (die Personen jetzt einmal ausgenommen), sind Kulissenobjekte und müssen also als solche angelegt werden.
Das, was dann in das Inventar aufgenommen wird,
muss zuvor als Gegenstand definiert worden sein.
Der Ablauf wäre schematisch wie folgt:
 Auf der Kulisse befindet sich ein Kulissenobjekt Schlüssel, repräsentiert durch eine Grafik,
die sich idealerweise in das Kulissendesign
einfügt.
 Die Spielfigur wendet den Befehl „Nimm
Schlüssel“ an.
 Es wird eine Aktion gestartet, die das Kulissenobjekt Schlüssel ausblendet und den Gegenstand Schlüssel, repräsentiert durch eine symbolische Grafik, in das Inventar aufnimmt.
Der Schlüssel muss aber nicht notwendigerweise
als Kulissenobjekt existieren, um ihn in das Inventar aufnehmen zu können. Es wäre auch ein Ablauf
denkbar, bei dem die Person z. B. nur den Befehl
„Schau an Schublade“ ausführt und daraufhin eine
Aktion startet, die zunächst einen Text ausgibt („Ich
sehe einen Schlüssel in der Schublade liegen. Den
nehme ich mit.“) und dann den Gegenstand Schlüssel
in das Inventar aufnimmt.
 Lege im Zimmer ein neues Kulissenobjekt Schlüssel mit
dem Objektnamen: Schlüssel an.
 Weise dem Objekt auf der Seite Bild die Grafikdatei Kulisse\
Schluessel.png zu.
Die Grafikdatei verfügt über einen Alpha-Kanal, der
die transparenten Bereiche definiert. Beim Einfügen
sollte unter Transparenz also Alpha-Kanal ausgewählt
sein.
 Platziere die Schlüssel-Grafik nach Aktivierung des Werkzeugs
auf dem Bett und definiere den Objektbereich
um den Schlüssel (Abb. 5.7).
Abb. 5.7: Ein Kulissenobjekt auf der Kulisse platzieren
13
 Setze die Position des Kulissenobjekts auf den Boden am
Fußende des Bettes.
 Lege die Blickrichtung 0° fest.
Die Objektmitte sollte automatisch auf den passenden Wert gesetzt worden sein. Sie muss nur bei
Objekten definiert werden, die durch eigene Bilder
repräsentiert sind. Es handelt sich dabei um eine
vertikale Positionsangabe, anhand derer festgelegt
wird, ab wann sich eine Person auf der Kulisse vor
dem Objekt befindet und ab wann dahinter.
Den Ablauf über eine Bedingung steuern
Wie bereits angedeutet, soll der Schlüssel vom Bett
aufgenommen, also die Grafik dann ausgeblendet
werden. Wir knüpfen deshalb die Verfügbarkeit
(Sichtbarkeit) des Objektes an eine Bedingung.
 Lege für das Kulissenobjekt Schlüssel auf der Seite Bedingungen im unteren Arbeitsbereich eine neue Bedingung
mit dem Namen Schlüssel auf Bett? an. Setze den Anfangswert
auf Wahr.
Auf der Seite Einstellungen des Objektes kannst du
im Feld Bedingung eine zuvor definierte Bedingung
angeben. Entsprechend deren Zustand (Wahr oder
Falsch) wird das Kulissenobjekt angezeigt oder nicht.
Dabei ist es völlig unerheblich, ob diese Bedingung
– wie in unserem Falle – bei eben diesem Objekt
angelegt wurde oder an anderer Stelle irgendwo
innerhalb des Visionaire-Projektes. Es ist aber zu
empfehlen, immer den inhaltlich sinnvollsten Ort
zu wählen, um die Übersicht zu behalten. Das selbe
gilt für das Anlegen von Werten, über die ebenfalls
Spielabläufe gesteuert werden können.
 Wechsle zur Seite Einstellungen des Objektes und drücke die
Schaltfläche neben dem Feld Bedingung. Wähle im Dialogfenster Bedingung anzeigen von Kulissenobjekte » Bernards
Zimmer » Schlüssel auf Bett?.
Solange die Bedingung Wahr ist (und das ist sie zu
Beginn des Spiels), wird der Schlüssel angezeigt; ist
sie Falsch, ist das Objekt nicht mehr sichtbar.
Nun legen wir eine Aktion an, die diesen Zustand
der Bedingung ändert und somit das Schlüssel-Objekt vom Bett entfernt.
 Lege für das Kulissenobjekt Schlüssel eine neue Aktion für
den Befehl Nimm an und füge einen neuen Aktionsteil hinzu
(zur Vorgehensweise siehe S. 11: Eine Aktion anlegen
anlegen).
 Wähle aus der Liste der Aktionsteile Bedingung umstellen.
Wähle in den Aktionsteil-Einstellungen die Bedingung:
Bedi
Schlüssel auf Bett? aus und setze die Option Umstellen auf
Falsch.
Gleichzeitig müssen wir nun den Gegenstand Schlüssel in Bernards Inventar aufnehmen. Auch dafür gibt
es einen passenden Aktionsteil, den wir der selben
Aktion zuweisen (Abb. 5.8).
Tutorial: Erste Schritte
14
Abb. 5.8: Eine Aktion mit mehreren Aktionsteilen anlegen
 Füge der Aktion unter Nimm einen weiteren Aktionsteil
hinzu. Wähle den Aktionsteil Gegenstand hinzufügen/entfernen und anschließend im Feld Gegenstand den Gegenstand
Schlüssel.
Starte das Spiel, und wende den Befehl „Nimm
Schlüssel“ an. Das Schlüssel-Objekt sollte durch
Umstellen der Sichtbarkeits-Bedingung verschwinden und der Schlüssel-Gegenstand im Inventar erscheinen. Weitere Aktionen (Textausgaben) für Befehle wie „Schau an Schlüssel“ kannst du dir selbst
ausdenken.
 Lege beim selben Objekt eine Aktion
Akt für den Befehl: Benutze
an und wähle als Gegenstand: Schlüssel. Füge einen Aktionsteil: Bedingung umstellen mit der Bedingung: Tür geschlossen?
und der Option Umstellen auf Falsch ein.
Der geöffnete Zustand der Tür muss natürlich seinen grafischen Niederschlag finden. Dem Objekt Tür
offen muss also ein entsprechendes Bild zugewiesen
werden.
 Verlinke bei dem Objekt Tür offen auf der Seite Bild die Datei
Dat
Kulisse\Door_Open.png als Bilddatei und platziere sie an der
passenden Stelle in der Kulissen-Grafik (Abb. 5.9).
Tür zu – Tür auf
Wir biegen nun so langsam auf die Zielgerade ein.
Was noch fehlt, ist eine Tür, die sich nicht öffnen
lässt – es sei denn, man verwendet den passenden
Schlüssel. Um die beiden Zustände der Tür darstellen zu können (geschlossen und offen), benötigen
wir auch zwei Kulissenobjekte.
 Lege ein neues Kulissenobjekt Tür geschlossen an und
erstelle einen ensprechenden Objektbereich um die Tür auf
der Kulissen-Grafik. Setze die Position
Posit auf den Fußboden
vor der Tür. Der Objektname sollte einfach nur Tür lauten,
die Ausrichtung 180° betragen.
 Dupliziere dieses Objekt durch Drücken der Schaltfläche
. Benenne das neue Objekt in Tür offen um.
Praktischerweise wurden sämtliche Einstellungen
des Objektes mitkopiert. Welches der beiden TürObjekte nun jeweils aktiv sein soll, wird ganz einfach wieder über eine Bedingung gesteuert. Ob man
diese nun bei dem „offenen“ Objekt oder dem „geschlossenen“ anlegt oder gar bei der Kulisse selbst,
ist egal. Du musst nur darauf achten, die Wahr- und
Falsch-Aussagen nicht zu verdrehen.
 Lege bei dem Objekt Tür geschlossen eine Bedingung: Tür
geschlossen? an. Setze den Anfangswert auf Wahr. Wähle
diese Bedingung auf der Seite Einstellungen unter Bedingung
aus.
 Lege beim selben Objekt eine Aktion
Akt für den Befehl: Öffne
mit einem Aktionsteil Text ausgeben an. Füge folgenden
Text ein: Die Tür ist verschlossen.<p2>
Abb. 5.9: Platzieren der Grafik für die geöffnete Tür
 Setze die Objektmitte manuell über die Schaltfläche .
Platziere die horizontale Linie auf Höhe der hinteren
unteren Ecke der Tür oder oberhalb dieser (Abb. 5.10).
Abb. 5.10: Manuelles Platzieren der Objektmitte
Tutorial: Erste Schritte
Das automatische Setzen der Objektmitte schlägt
hier fehl, da immer der unterste Punkt des jeweiligen Objektes ausgewählt wird, was in dem vorliegenden Fall aber nicht ausreicht. Du kannst ja mal
ausprobieren, welche Auswirkungen eine solche
Einstellung auf das Spiel hat.
Zur Anzeige des „offenen Objektes“ greifen wir
ebenfalls auf die Bedingung Tür geschlossen? zu. Es
gibt ja nur zwei Zustände, d. h. wenn sie nicht geschlossen ist, muss sie offen sein.
 Setze bei dem Objekt Tür offen auf der Seite Einstellungen die
Bedingung: Tür geschlossen?. Aktiviere außerdem die Option
Bedingung negieren.
 Lege beim selben Objekt eine Aktion für den Befehl: Gehe zu
an und füge ihr den Aktionsteil: Spiel beenden hinzu.
15
Starte nun unser fertiges Spiel. Versuche, die Türe zu
öffnen. Es wird nicht gelingen. Nimm den Schlüssel
und benutze ihn mit der Tür. Die Tür öffnet sich, und
Bernard kann das Zimmer – und damit das Spiel
– verlassen.
Fertig!
Ich hoffe, dieses Tutorial hilft, einige Grundprinzipien von Visionaire Studdio kennenzulernen und zu verstehen. Wie bereits zu Beginn angedeutet,
ist das Visionaire-Demospiel eine gute Referenz, um weitere Möglichkeiten des Programms zu entdecken.
Traut Euch und seid kreativ. Wir freuen uns über jedes neue Adventure.
einzelkaempfer