Szenen im Raster und Nahansichten per Interface (h2)

Dieses Tutorial zeigt dir zwei Methoden, mit denen du die Szenenbegrenzung der kostenlosen Version von Visionaire Studio umgehen kannst (früher 10 Szenen, seit dem Update vom November 2025 25 Szenen). Du kannst sie aber genauso in der Vollversion nutzen, denn für Myst-artige Spiele, Wimmelbildspiele und Visual Novels sind sie ein völlig legitimer Weg.

Anleitung

Szenen im Raster

Eine Szene im Raster ist ein einziges Bild, das aus mehreren aneinandergesetzten Szenenhintergründen besteht.

Ich gehe davon aus, dass du schon einige Szenenhintergründe hast. Öffne Photoshop oder dein bevorzugtes Bildbearbeitungsprogramm, lade einen der Hintergründe und verdopple Breite und Höhe der Leinwand. Kopiere dann die anderen Szenen hinein und ordne sie so an, dass alle ins Bild passen, wie im Screenshot unten.

Ist dein Rasterbild fertig, lege in Visionaire Studio eine Szene an und importiere das Bild in den Szeneneigenschaften als Hintergrund.

Lege dann im Reiter Szenenwerte einen neuen Wert mit dem Namen grid_index an. Setze den Standardwert auf die Nummer des Rasterabschnitts, der zuerst zu sehen sein soll. Du kannst auch das String-Feld des Werts nutzen, wenn du die Abschnitte lieber mit Namen statt Nummern ansprichst; in meiner Demo habe ich Namen verwendet.

Öffne dann den Reiter Szenenaktionen, lege eine neue Aktion von anderer Aktion aufgerufen an und nenne sie update_grid. Füge darin einen Aktionsteil Skript ausführen ein, etwa mit folgendem Inhalt (wähle das passende Skript) ...

Rasterwerte als String

local grid = game.CurrentScene.SceneValues["grid_index"].String

if grid == "east" then -- grid 1 (top left)
 game.ScrollPosition = { x = 0, y = 0 }
elseif grid == "north" then -- grid 2 (top right)
 game.ScrollPosition = { x = 1281, y = 0 }
elseif grid == "west" then -- grid 3 (bottom left)
 game.ScrollPosition = { x = 0, y = 721 }
elseif grid == "south" then -- grid 4 (bottom right)
 game.ScrollPosition = { x = 1281, y = 721 }
end

Rasterwerte als Zahl

local grid = game.CurrentScene.SceneValues["grid_index"].Int

if grid == 1 then -- grid 1 (top left)
 game.ScrollPosition = { x = 0, y = 0 }
elseif grid == 2 then -- grid 2 (top right)
 game.ScrollPosition = { x = 1281, y = 0 }
elseif grid == 3 then -- grid 3 (bottom left)
 game.ScrollPosition = { x = 0, y = 721 }
elseif grid == 4 then -- grid 4 (bottom right)
 game.ScrollPosition = { x = 1281, y = 721 }
end

Die x- und y-Werte in den Skripten oben gehen von einer Standardauflösung von 1280x720 aus: 4 Bilder mit 1280x720 in einem Raster von 2x2 ergeben 2560x1440. Wie du an den Werten siehst, verschiebe ich die Kamera (scrollposition) jeweils auf das Pixel oben links des jeweiligen Bildes.

Lege im Reiter Szenenaktionen außerdem eine Aktion zu Szenenbeginn an, füge darin den Aktionsteil Aktion aufrufen ein und verknüpfe ihn mit der Aktion update_grid. So läuft update_grid beim Laden der Szene und verschiebt den Ausschnitt passend zum Zahlen- oder String-Inhalt von grid_index.

Wie ich den Szenenwechsel in der Demo im Abschnitt Ressourcen gelöst habe, erkläre ich hier nicht, weil das schwer zu beschreiben ist. Kurz gesagt: Zum Wechseln änderst du den Wert grid_index und rufst dann die Aktion update_grid auf. Ja, so einfach ist das.

Nahansichten per Interface

Bei einer Nahansicht per Interface legst du eine detailliertere Ansicht einer interessanten Stelle über die Szene, etwa die Bücher in einem Regal oder die Gegenstände auf einem Tisch.

Lege in Photoshop oder deinem Bildbearbeitungsprogramm eine neue Leinwand mit transparentem Hintergrund in der Standardauflösung deines Spiels an. Füge eine neue Ebene hinzu, fülle sie komplett schwarz und stelle die Deckkraft auf etwa 50 %. Sie dunkelt alles unter dem Interface ab, solange es sichtbar ist, und lenkt so den Blick von der Szene weg. Füge dann das Bild der Nahansicht ein und gestalte es nach Geschmack, etwa mit Rand oder schmuckvollem Rahmen. Denk auch an einen X-Button, mit dem der Spieler das Interface schließt. Am Ende sieht das etwa so aus ...

Mit dem fertigen Bild brauchen wir jetzt ein Interface. Öffne im Editor den Bereich „Interfaces“ und klicke auf denButton über der Interface-Liste, um ein neues Interface anzulegen, und gib ihm einen passenden Namen. Klicke auf Eigenschaften, setze das eben erstellte Bild als Hintergrund, wähle die Klasse (mehr dazu im Hinweis unten), stelle die Verschiebung auf absolut und schließe die Eigenschaften.

Der nächste Schritt ist wichtig, denn er sperrt die Interaktion mit der Szene, solange das Interface sichtbar ist. Klicke auf den Button für den Interface-Bereich und zeichne einmal rundum außen an den Rändern des Hintergrundbilds entlang. Der Interface-Bereich bestimmt, welche Teile des Interface gezeichnet werden, und verhindert, dass der Mauszeiger darunterliegende Dinge erkennt.

Da der Bereich „Interfaces“ noch offen ist, legen wir gleich einen Button zum Schließen an. Lege einen neuen Button mit dem Namen close an und setze den Button-Typ auf Aktionsbereich. Öffne den Reiter Aktionen, lege eine Aktion Linksklick an und darin einen Aktionsteil Skript ausführen mit dieser Codezeile. Ersetze interface_name durch den Namen deines Interface (in Lua zählt die Groß-/Kleinschreibung).

Interfaces["interface_name"].Visible = false

Jetzt verknüpfen wir das Interface mit dem spielbaren Charakter. Öffne im Editor den Bereich Charaktere, wähle den spielbaren Charakter, öffne den Reiter Interfaces und hake das passende Interface an ✅.

Nur noch zwei Schritte, dann sind wir fertig ...

Zuerst muss das Interface beim Laden der Szene ausgeblendet werden, denn es soll erst erscheinen, wenn der Spieler mit der passenden Stelle oder dem Objekt interagiert. Öffne wieder den Bereich Szenen, wähle die Szene, öffne den Reiter Szenenaktionen und lege eine Aktion zu Szenenbeginn an, falls es noch keine gibt. Füge darin einen Aktionsteil Skript ausführen mit demselben Code wie beim Button close ein. Denk wieder daran, interface_name durch den tatsächlichen Namen des Interface zu ersetzen.

Interfaces["interface_name"].Visible = false

Im zweiten Schritt richten wir ein, dass das Interface erscheint, wenn der Spieler auf die Stelle oder das Objekt klickt. Lege dafür ein neues Szenenobjekt mit einem passenden Namen an, klicke in der Werkzeugleiste der Szene auf Objektbereich und zeichne ein Polygon um die Stelle. Über Objektbereiche erkennt die Engine, wann der Mauszeiger über dem Objekt steht und dass mit ihm interagiert werden kann.

Lege dann eine neue Aktion Linksklick (sofort) an, oder bei Third-Person-Perspektive eine Aktion am Ziel ausgeführter Befehl mit dem passenden Befehl (Ansehen, Benutzen usw.). Füge darin einen Aktionsteil Skript ausführen mit derselben Codezeile ein, setze diesmal Visible aber auf true statt false. Und auch hier: interface_name durch den tatsächlichen Namen ersetzen.

Interfaces["interface_name"].Visible = true

Und fertig, das war es im Großen und Ganzen.

Ressourcen