Tutorial: Interfaces Teil A - Mouse-Over-Interface

  • #1, by DerGreifTuesday, 30. November 2010, 00:12 10 years ago
    Hallo zusammen,

    nachdem ich mich jetzt selbst die letzte Woche damit geplagt habe, ein Interface zu erstellen, dass meinen Wünschen entspricht, dachte ich, ich lasse andere Anfänger an meinen Erfahrungen teilhaben. Das Tutorial wurde für Visionaire 3.4 erstellt.

    Ich wollte zwei Interfaces basteln, mit denen der Spieler interagieren kann. Einmal ein Inventar-Interface, auf dem man aber auch noch einmal die Befehlspalette präsentiert bekommt, und zum zweiten ein Befehlsauswahl-Menü, das per Rechtsklick unmittelbar auf der aktuellen Mausposition erscheint, so dass man dann bequem den gerade benötigten Befehl auswählen kann. Zum dritten kam dann aber noch ein "unsichtbares" Interface dazu, über das die eigentlichen Befehle abgewickelt werden.

    A. Das Inventar-Befelhlsmenü. Meine Anforderungen daran: Es sollte nur zu sehen sein, wenn man es braucht und möglichst ohne einen Klick auftauchen können. Ich fand es schön, wenn es am unteren Rand des Bildschirmrands erscheint, wenn die Maus sich in diesen Bereich bewegt und wieder verschwindet, wenn die Maus sich dort wieder weg bewegt. Danach sollte man mit Linksklick das Inventar oder die Befehle ansteuern können.

    1. Zunächst einmal muss ein neues Interface angelegt werden unter dem Menüpunkt Interfaces. Ich habe es Inventar genannt, da ist natürlich jeder beliebige Name möglich (die beiden roten Kreise auf der linken Seite in Bild 1). Unter Einstellungen könnt Ihr nun dem Interface ein Bild zuweisen unter dem Punkt Hintergrundbild. Es sollte die Breite Eurer Bildschirmauflösung haben, bspw. bei einem Spiel in der Auflösung 1024 x 768 eine Breite von 1024 Pixel.

    Bei den Einstellungen für das Interface habe ich folgende gewählt: Kategorie: Inventar. Das Dropdown-Menü bietet noch andere Alternativen, aber letztlich wirkt sich die Kategorie nicht auf die Funktion des Interfaces aus, soweit ich das übersehe. Ihr könnt also auch eine beliebige andere Kategorie wählen. Wichtig ist nur, dass Ihr die gewählte Kategorie nicht schon für ein anderes Interface verwendet habt! (blauer Kreis Bild 1)

    Für die Ausrichtung habe ich absolut gewählt, da das Interface immer unten am Bildschirmrand auftauchen soll. Die Ausrichtung "unten" hat bei mir leider nicht funktioniert. Daher rate ich davon ab, diese zu verwenden. Als Offset sollte man einen Y-Wert wählen, der geringer ist als die Gesamthöhe der bildschrimauflösung, abzüglich der Höhe des Inventarbildes. Mein Inventarbild ist 60 Pixel groß. Bei meiner Spielauflösung von 1024 x 768 müsste ich als Y-Wert also mindestens 708 wählen. Der Spieltest hat jedoch gezeigt, dass das nicht reicht. Das Interface wird dann - warum auch immer nicht angezeigt. Ich habe daher den Y-Wert noch etwas niedriger angesetzt auf 704 Pixel. Das ist nicht optimal, weil ich es schön gefunden hätte, wenn der Bildschrim unten mit dem Inventar abschließt, wenn es offen ist, aber das hat aus mir nicht erklärlichen Gründen nicht funktionier und ist nur ein kleiner Schönheitsfehler. Also denkt daran: Wenn das Interface nicht angezeigt wird, müsst Ihr eventuell den Y-Wert noch ein paar Pixel niedriger einstellen. Den X-Wert kann man auf 0 belassen. (s. die beiden roten Kreise rechts unten auf Bild 1)

    2. So kommen wir nun zum nächsten, äußerst wichtigen Punkt: Unter dem Reiter Bedingungen (grüner Kreis oben, Bild 1) legen wir eine neue Bedingung an (Bild 2). Ich habe sie Inventar sichtbar? genannt. Rechts können wir die Bedingung konfigurieren. Hier wird bei Bedingungsart Variable markiert und der Anfangswert wird auf falsch eingestellt. Dann geht es zurück zu den Einstellungen (Bild 1).

    3. Dort legen wir eine neue Aktion für das Verlassen des Interface an (Bild 1, grüner Kreis unten). Durch Klick auf den Blitz öffnet sich das Aktionsmenü, mit dem wir nun diese Aktion definieren können (Bild 3):

    Wir brauchen zwei Aktionsteile für diese Aktion, die wir beide mit einem Klick auf das grüne Plus hinzufügen können. zunächst soll die Sichtbarkeit des Interface auf 0 gesetzt werden, wenn wir es mit der Maus verlassen. Dazu wählen wir auf der rechten Seite unter Aktionsteil die Aktion Sichtbarkeit eines Interface setzen aus dem Dropdown-Menü aus. Dann bekommen wir die Möglichkeit eine Interface Kategorie zu wählen: Hier wählt Ihr die Kategorie aus, die Ihr für Euer Interface ausgesucht habt, in meinem Fall Inventar. Jetzt wird auch klar, warum diese Kategorie für kein anderes Interface benutz werden sollte, da sonst die anderen Interfaces auch unsichtbar werden würden. Die Sichtbarkeit stellt Ihr dann mit dem Schieberegler auf 0 ein.

    Dann fügen wir den zweiten Aktionsteil wieder mit dem grünen Plus hinzu. Jetzt wählen wir rechts Bedingung umstellen. Dann erhalten wir die Möglichkeit eine Bedingung auszuwählen, in dem wir auf die kleine Kette klicken. Bedingungen werden bei den Bereichen gespeichert, wo sie erstmals festgelegt wurden. Bei unserer Bedingung Inventar sichtbar? war das bei dem Interface Inventar, an dem wir gerade basteln. Dort finden wir unsere Bedingung zur Auswahl. Anschließend müssen wir diese Bedingung nur noch auf falsch umstellen.

    Weiter geht es im nächsten Beitrag.

    Newbie

    0 Posts


  • #2, by DerGreifTuesday, 30. November 2010, 01:01 10 years ago
    Fortsetzung zu A.

    4. Jetzt kommen wir zum Clou des Ganzen. Unter dem Reiter Schalter legt Ihr erstmal - wie es auch schon in anderen Tutorials beschrieben ist - die Schalter Eures Interfaces an. Dazu gehören die Schalter für das Scrollen des Inventars, für die Inventarslots und die Schalter für die Befehle, falls Ihr sowas auch noch einbauen wollt. Darauf gehe ich jetzt nicht weiter ein.

    Entscheidend ist, dass Ihr noch einen zusätzlichen Schalter einbaut, den man als Spieler gar nicht sieht. Ich habe ihn Inventar verstecken genannt (Bild 5, ganz oben links, blauer Kreis). Es ist elementar, dass dieser Schalter ganz oben in der Liste steht! Mit dem grünen Pfeil (blauer kreis oben Mitte) könnt Ihr den Schalter dorthin bewegen.

    Nun müsst Ihr dem Schalter auch eine Objektumrandung (blauer Kreis oben recht, blaue Pfeile) zuweisen. Diese sollte sich über die ganze untere Bildschirmbreite erstrecken und von der Höhe her genau so hoch sein wie die Interfacegrafik, die Ihr verwendet.

    Anschließend wenden wir uns den Reitern im unteren Bilschirmteil zu. Dort öffnen wir den Reiter Schaltereigenschaften. Hier werden die grundlegenden Eigenschaften des Schalters festgelegt. Dieser Schalter soll nur eine Aktionsfläche werden, entsprechend markieren wir das. Dann kommen wir zum wichtigsten Punkt: Wir stellen für den Schalter eine Bedingung ein, so dass der Schalter nur unter dieser Bedingung aktiv wird. Hier hatten wir die Bedingung Inventar sichtbar? bereits kreiert und ihr den Anfangswert falsch zugewiesen. Der Schalter soll jetzt nur aktiv sein, wenn das Inventar nicht sichtbar ist. Folglich stellen wir diese Bedingung ein, müssen aber noch ein Häkchen bei Bedingung negieren setzen! Jetzt ist dieser Schalter nur aktiv, wenn das Interface unsichtbar ist. Da er vor allen anderen Schaltern liegt, kann erstmal nur dieser Schalter (den wir als Aktionsfläche definiert haben) bedient werden.

    5. Daher müssen wir jetzt dieser Aktionsfläche noch eine Aktion zuweisen, die wieder aus zwei Aktionsteilen besteht (Bild 6). Dazu gehen wir auf den Reiter Aktionen. Der schalter soll schon auf Mausbewegungen in seinen bereich reagieren, also fügen wir als Ausführungsart Mausbewegung in Schalterbereich hinzu. Jetzt kommen zwei Aktionsteile, die wir schon kennen, nur diesmal mit umgekehrten Werten (s. o. 3.). Die Sichtbarkeit des Inventars wird auf 100 % gesetzt, die Bedingung Inventar sichtbar? wird auf wahr gesetzt. Damit wird dann auch zugleich dieser Schalter inaktiv und wir können auf die anderen Schalter des Interface zurückgreifen.

    Fertig. Es lohnt sich noch in der Spiel-Starten-Aktion die Sichtbarkeit des Interface auf 0 zu setzen, so dass es auch schon zu Spielbeginn nicht zu sehen ist.

    Konstruktive Kritik, Verbesserungsvorschläge zu dieser Lösung und weitere Anregungen sind erwünscht.

    Beste Grüße, G.

    PS: Teil B folgt dann in einem separaten Thema.

    Newbie

    0 Posts

Write post