[Tutorial] Portrait Dialog

[SaVi]

1. Vorwort

Dieses Tutorial dient dazu euch einen netten Auswahldialog zu zeigen, indem nur Portraits benutzt werden. Praktisch wenn man, wie in meinem Beispiel zwischen 3 Rassen wählen soll, aber auch nützlich wenn eine Heldenauswahl erstellt werden soll.
Es gibt viele Arten diesen Dialog zu verbessern/ändern.
Die Schwierigkeit dieses Tutorials ist zwischen Anfänger und Fortgeschritten. Ich hoffe aber, es so erklären zu können, dass jeder der sein Gehirn einschaltet es meistert!
ACHTUNG: Da ich den englischen Editor benutze, werden alle Auslöser Englisch sein!

2. Was wollen wir machen?

Wir wollen eigentlich nur 3 Portraits anzeigen, wobei jedes Portrait eine Rasse (zerg,toss,terra) darstellen soll. Wie erreichen wir das?
Wir lassen einfach eine Einheit dieser Rasse in dem Portrait anzeigen.
Okay, und wie wählt man dann aus?
Wir ändern die Selektion ganz einfach mit der "Rechten" und der "Linken" Pfeiltaste und bestätigen mit der "Leertaste" dann die Selektion.
Hier ein Video von dem, was wir erstellen möchten:

http://www.youtube.com/watch?v=cuYb846-5G0

Bei dem Video wurde die Map benutzt, an der ich momentan arbeite. In diesem Tutorial wird nur das erste wählen beschrieben. Falls ihr vorhabt mehrere Etappen zu erstellen, so fragt es an und ich werde das Tutorial vielleicht updaten.


3. Ran an den Speck

So, bevor wir uns mit den Auslösern einen Kampf liefern benötigen wir erst einmal eine Planung. Wir müssen wissen, was wir alles brauchen werden und wie wir das dann erreichen. Während wir uns alles überlegen, können wir zeitgleich die Variablen dafür erstellen.

3.1 Variablen

Bei Variablen empfehle ich immer "Records" zu benutzen. Records sind sozusagen Ordner für Variablen. Ihr erhaltetet sie, indem ihr oben rechts auf die grüne CD klickt oder Ctrl + U drückt.

Ich erstelle einen Record mit dem Namen: Dialogs
Danach eine Variable:
Dialogs <Dialogs> (Dialogs der Name und bei Typ scrollt ihr ganz hoch zu Records und wählt dann Dialogs aus)
Nun klickt ihr auf den Record und könnt in ihm neue Variablen erstellen.

Nun erstellen wir 3 Variablen:
ProtraitZerg = No Portrait <Portrait[8]>
ProtraitTerra = No Portrait <Portrait[8]>
ProtraitToss = No Portrait <Portrait[8]>
Somit hätten wir schon einmal für alle 8 Spieler jeweils ein Zerg, Terra und Toss Portrait.
Natürlich könnten wir auch einfach nur eine Variable erstellen und ihr [8][3] geben.
Ist in einem großen Code aber unübersichtlicher, wer damit aber kein problem hat, kann das auch so machen.

Als nächstes benötigen wir eine Variablen, die angibt welches Portrait der Spieler momentan ausgewählt hat. Der Wert ist direkt auf 1, da beim starten der Map, das erste Portrait automatisch ausgewählt sein soll.
PortraitSelected = 1 <Integer[8]>

Um den Bewegenden Effekt zu erstellen brauchen wir zudem noch diese Variable.
PortraitPositionCount = 0 <Integer[8]>
Sie wird später eine wichtige Rolle spielen.

Als letztes brauchen wir noch eine Variable, die abspeichert, was der Spieler gewählt hat.
Result = 0 <Integer[8]>

Wenn ihr alls befolgt habt, sieht das bei euch so aus:



3.2 Auslöser

Wir erstellen uns einen neuen Auslöser CreatePortraits
Hier werden wir jetzt den Text erstellen, der allen Spielern zeigt, wie man den Dialog bedient und danach die Portraits.

Für den Text habe ich einen Text Tag benutzt.

Code: Alles auswählen

Create Text Tag
    Text: "Choose your Main race! Use Left and..."
    Players: All Players
    Font Size: 38
    Point: Center Of Region
        Region: Playable Map Area
    Height Offset: 5.0
    Visible: Visible
    Use Fog of War: False

Der Text mit Farben: <c val="FFFFFF">Choose your <c val="FF0000">Main</c> race!<n/>Use <c val="FF0000">Left</c> and <c val="FF0000">Right</c> to switch and <c val="FF0000">Space</c> to select.</c>
Für alle Spieler Sichtbar, mit der Größe 38, 5 höhen-Offset und in der Mitte der Karte. (Wir werden später die Kamera auf die mitte der Karte zentrieren)

Danach warten wir 6 Sekunden damit jeder es lesen kann
General - Wait 6.0 Game Time seconds
und zerstören ihn wieder
Text Tag - Destroy (Last created text tag)

Als nächstes erstellen wir die Portraits hier nehm ich den Befehl:
Es gibt 2 Arten von diesem Befehl, einmal nur mit [zahl] bis [zahl] und einmal mit einer Variable mit [zahl] bis [zahl], nehmt die 1. Variante.
General - Pick each integer from 1 to (Number of players in (Active Players)), and do (Actions)

Nun erstellen wir ein Portrait. Größe lassen wir auf standart, Position ändern wir auf -320,0 und bei model stellen wir den "Portrait - Marine 1" ein. Ihr müsst Portrait nehmen, da ihr sonst nur die Füße der Einheit seht. Zudem ändern wir initially visible to initially Hidden um, da es nicht direkt sichtbar werden soll. Den Grund erklär ich gleich.

Code: Alles auswählen

Create Portrait
    Width: 237
    Height: 360
    OffsetX: -320
    OffsetY: 0
    Anchor: Center
    Model: Portrait - Marine 1
    Camera: Default Portrait Camera
    Animation: Default
    Visible: Hidden
    Wait For Load: Wait

Danach dem Portrait, damit man später noch drauf zugreifen kann, eine Variable zuordnen:
Variable - Set Dialogs.ProtraitTerra[(Picked integer)] = (Last created portrait)

Das wiederholen wir mit Zerg und Protoss:
ACHTUNG: Achtet auf die Versetzungen! bei Zerg (0,0) und bei Toss (320,0)

Code: Alles auswählen

Create Portrait
    Width: 237
    Height: 360
    OffsetX: 0
    OffsetY: 0
    Anchor: Center
    Model: Portrait - Hydralisk
    Camera: Default Portrait Camera
    Animation: Default
    Visible: Hidden
    Wait For Load: Wait

Variable - Set Dialogs.ProtraitZerg[(Picked integer)] = (Last created portrait)

Code: Alles auswählen

Create Portrait
    Width: 237
    Height: 360
    OffsetX: 320
    OffsetY: 0
    Anchor: Center
    Model: Portrait - Zealot
    Camera: Default Portrait Camera
    Animation: Default
    Visible: Hidden
    Wait For Load: Wait

Variable - Set Dialogs.ProtraitToss[(Picked integer)] = (Last created portrait)

So, da wir alle Portraits auf "initially Hidden" haben, sieht man natürlich noch nichts. Der Grund liegt darin, dass wenn wir "initially visible" hätten, es für jeden Spieler 3 mal 8 sichtbare Portraits auf einem Fleck gäbe.
Wir lösen das Problem ganz einfach indem wir es in Nachhinein für die richtigen Spieler einblenden. Das machen wir mal!

Der Befehl heißt "Show/Hide Portrait":
Portrait - Show Dialogs.ProtraitTerra[(Picked integer)] for (Player group((Picked integer))) (Do force visible)
Wir nehmen die Variable für das erste Portrait für den Spieler (picked integer) und stellen es für diesen sichtbar. Für den Rest bleibt es unsichtbar. Da das aber alles 8 mal durchspielt wird, kriegt jeder Spieler sein Portrait zu sehen. Achtet darauf, dass bei mir Force visible steht!

Das selbe noch einmal für Zerg:
Portrait - Show Dialogs.ProtraitZerg[(Picked integer)] for (Player group((Picked integer))) (Do force visible)

Jetzt fügen wir noch den Rauscheffekt bei den beiden ein, die momentan nicht selektiert sind. Da unsere PortraitSelected Variable auf 1 steht, ist das Terra Portrait ausgewählt und somit Zerg und Toss nicht.
Den Rauscheffekt fügen wir hiermit ein:
Portrait - Force Dialogs.ProtraitZerg[(Picked integer)] transition On with instant set to True
Der Befehl lautet: Force Portrait Transition On/Off

Diese beiden Befehle fügen wir noch einmal für Protoss ein:
Portrait - Show Dialogs.ProtraitToss[(Picked integer)] for (Player group((Picked integer))) (Do force visible)
Portrait - Force Dialogs.ProtraitToss[(Picked integer)] transition On with instant set to True

So sieht der Auslöser dann momentan aus:



Gleich weiter zum nächsten Auslöser. Da wird jetzt die Portraits haben brauchen wir einen Auslöser der auch auf die 3 Tasten reagiert.
Diesen nennen wir DialogKeys

Als Ereignis nehmen wir "Key Pressed"
Und zwar mit der Rechten und Linken Pfeiltaste und der Leertaste

UI - Player Any Player presses Space key Down with shift Allow, control Allow, alt Allow
UI - Player Any Player presses Left key Down with shift Allow, control Allow, alt Allow
UI - Player Any Player presses Right key Down with shift Allow, control Allow, alt Allow

Zudem erstellen wir eine locale Variable mit dem Namen randomINT
randomINT = 0 <Integer>


Unter Aktionen kommt jetzt als erster Befehl Set - Variable
Variable - Set randomINT = (Random integer between 1 and 2)

Als nächstes bauen wir das UI-Geräusch ein. Dazu benutzen wir die "Switch" Funktion (auf Deutsch "Vertauschen")
Nimmt die locale Variable als Wert.

General - Switch (Actions) depending on randomINT

Um die Sounds, die ich benutze zu haben, müsst ihr unter File --> Dependencies --> die beiden Kampagnen-Dateien hinzufügen. (auf deutsch: Datei --> Abhängigkeiten --> Kampagnen-Dateien)

Nimmt bei dem Fall: randomINT = 1

Code: Alles auswählen

Play Sound
    Sound Link: TUI_ArmoryConsolePurchase (1)
    Players: Convert Player To Player Group
        Player: Triggering Player
    Volume: 60.0
    Offset: 0.0

und bei dem Fall: randomINT = 2

Code: Alles auswählen

Play Sound
    Sound Link: TUI_ArmoryConsoleSelect (1)
    Players: Convert Player To Player Group
        Player: Triggering Player
    Volume: 60.0
    Offset: 0.0

Nun eine neue "Switch" Funktion
General - Switch (Actions) depending on (Key Pressed)

Falls die gedrückte Taste "Left" ist
General - If (Left)

Eine neue Switch Funktion
General - Switch (Actions) depending on Dialogs.PortraitSelected[(Triggering player)]

mit dem Fall: General - If (1)

Code: Alles auswählen

Force Portrait Transition On/Off
    Portrait: Dialogs
        Member: ProtraitTerra
            Index 1: Triggering Player
    On/Off: On
    Instant: False

Code: Alles auswählen

Force Portrait Transition On/Off
    Portrait: Dialogs
        Member: ProtraitToss
            Index 1: Triggering Player
    On/Off: Off
    Instant: False

Variable - Set Dialogs.PortraitSelected[(Triggering player)] = 3

So zur Erklärung: Falls der Spieler eine der 3 Events auslöst, wird je nachdem welcher Integer gewählt ein Sound abgespielt. Falls die gedrückte Taste "Links" und aktuell die 1 für Terra ausgewählt ist, wird das Rauschen dementsprechend umgestellt. Terra fängt das Rauschen an und Protoss wird klar angezeigt. Als letztes sagen wir, dass die aktuelle Auswahl auf der 3 (Protoss) steht. Da Terra das ganz linke ist, wird zum ganz Rechten gesprungen. Das müssen wir jetzt für alle anderen Optionen fortführen!
Augen zu und durch

Kopiert den 1. Fall und ändert die 1 zu einer 2. Dann ändert beim ersten Portrait das Transition zu Off. Beim 2. Portrait ändert ihr das Portrait zu PortraitZerg und macht dort die Transition On. Bei der Variable den Wert 3 zu 1 ändern.

Wieder kopieren und die 2 zu einer 3 ändern. 1. Portrait zu Toss ändern und Transition On. 2. Portrait Zerg lassen und Transition Off. Bei der Variable den Wert 1 zu 2 ändern.



So die Linke Pfeiltaste haben wir somit komplett abgedeckt. Jetzt kommt die Rechte dran. Am besten kopieren wir General - If (Left) und fügen es gleich ein. Ändert das Left zu Right.

Bei General - 1 das 1. Portrait können wir komplett lassen. Ändert beim 2. Portrait Toss zu Zerg und die Variable von 3 zu 2.

Bei General - 2 beim 1. Portrait das Terra zu Toss ändern. Diesmal könnt ihr das 2. Portrait komplett lassen. Die Variable von 1 zu 3 ändern.

Bei General - 3 das 1. Portrait komplett lassen. Beim 2. Portrait Zerg zu Terra ändern. Die Variable von 2 zu 1 ändern.



Jetzt kommt die Leertaste dran. Einen neuen Fall hinzufügen:
General - If (Space)

Einen neuen Switch hinzufügen:
General - Switch (Actions) depending on Dialogs.PortraitSelected[(Triggering player)]

Set - Variable Variable - Set Dialogs.Result[(Triggering player)] = 1
Dafür da, das Ergebnis abzuspeichern.

Bei dem Fall 1:
Portrait - Destroy Dialogs.ProtraitZerg[(Triggering player)]
Portrait - Destroy Dialogs.ProtraitToss[(Triggering player)]
Die nicht ausgewählten Portraits zerstören.

(Optional) - Dann noch ein passender Sound von dem Marine

Code: Alles auswählen

Play Sound
    Sound Link: Marine_Ready (1)
    Players: Convert Player To Player Group
        Player: Triggering Player
    Volume: 60.0
    Offset: 0.0

Jetzt kommt die Variable, die wir vorhin erstellt haben, aber noch nicht wussten, was sie bringen soll ins Spiel.
Set - Variable Variable - Set Dialogs.PortraitPositionCount[(Triggering player)] = -320

Mein Ziel war es, der Portrait zu Mitte zu bewegen und dann, wie im Video zu sehen ist den Text anzuzeigen. Das Problem lag darin, dass Portraits nicht wirklich hilfreich eine Option bieten verschoben zu werden. Ich habe dann mehre Sachen ausprobiert und das hier ist die erste die funktioniert hat.
Ich ändere den Wert der Variable um 3 und verschiebe das Portrait dann vom Center ausgehen in Richtung Center. Das wiederhole ich dann 107 mal. Warum denn 107 mal?
Naja 107 * 3 = 321. Sozusagen steht es dann "fast" perfekt in der Mitte!

Also vielleicht wird es euch gleich klar.
Repeat hinzufügen und den Wert auf 107 stellen.
Da unter Aktionen dann Set Portrait Position einfügen.

Code: Alles auswählen

Set Portrait Position
    Portrait: Dialogs
        Member: ProtraitTerra
            Index 1: Triggering Player
    OffsetX: Dialogs
        Member: PortraitPositionCount
            Index 1: Triggering Player
    OffsetY: 0
    Anchor: Center

Als nächstes die Variable verändern:
Variable - Modify Dialogs.PortraitPositionCount[(Triggering player)]: + 3

und damit das ganze nicht in 0.0001 Sekunden passiert ein Wait Befehl

Code: Alles auswählen

Wait
    Value: 0
    Time Type: Game Time

Nachdem das abgelaufen ist soll ein Text Tag erstellt werden

Code: Alles auswählen

Create Text Tag
    Text: "You selected Terran as your Main ra..."
    Players: Convert Player To Player Group
        Player: Triggering Player
    Font Size: 36
    Point: Center Of Region
        Region: Playable Map Area
    Height Offset: -8.0
    Visible: Visible
    Use Fog of War: False

Hier der Text mit Farben: <c val="FFFFFF">You selected<c val="FF0000"> Terran </c>as your <c val="FF0000">Main</c> race!</c>

Dann warten wir kurz damit man es lesen kann:
General - Wait 4.0 Game Time seconds
Als nächstes zerstören wir das letzte Portrait:
Portrait - Destroy Dialogs.ProtraitTerra[(Triggering player)]
Und ebenso den Text Tag zerstören:
Text Tag - Destroy (Last created text tag)



Auf die anderen beiden werde ich nicht so ausführlich eingehen, da das auch nur noch kopieren und abändern ist. Besonderheit ist, dass bei General - If (2) das Repeat weggelassen werden kann, da es ja bereits in der Mitte steht.

Code: Alles auswählen

General - If (2)
            Actions
                 Variable - Set Dialogs.Result[(Triggering player)] = 2
                 Sound - Play Hydralisk_Ready (4) for (Player group((Triggering player))) (at 60.0% volume, skip the first 0.0 seconds)
                 Portrait - Destroy Dialogs.ProtraitTerra[(Triggering player)]
                 Portrait - Destroy Dialogs.ProtraitToss[(Triggering player)]
                 Text Tag - Create a text tag with the text "You selected Zerg as your Main race..." for (Player group((Triggering player))), using a font size of 36, at (Center of (Playable map area)) and height offset -8.0, initially Visible, and fog of war enforcement set to False
                 General - Wait 4.0 Game Time seconds
                                        Portrait - Destroy Dialogs.ProtraitZerg[(Triggering player)]
                                        Text Tag - Destroy (Last created text tag)

Code: Alles auswählen

General - If (3)
             Actions
                 Variable - Set Dialogs.Result[(Triggering player)] = 3
                 Sound - Play Zealot_What (6) for (Player group((Triggering player))) (at 60.0% volume, skip the first 0.0 seconds)
                 Portrait - Destroy Dialogs.ProtraitZerg[(Triggering player)]
                 Portrait - Destroy Dialogs.ProtraitTerra[(Triggering player)]
                 Variable - Set Dialogs.PortraitPositionCount[(Triggering player)] = 320
                         General - Repeat (Actions) 107 times
                                Actions
                                    Portrait - Set Dialogs.ProtraitToss[(Triggering player)] position to (Dialogs.PortraitPositionCount[(Triggering player)], 0 related to Center
                                    Variable - Modify Dialogs.PortraitPositionCount[(Triggering player)]: - 3
                                    General - Wait 0 Game Time seconds
                Text Tag - Create a text tag with the text "You selected Protoss as your Main r..." for (Player group((Triggering player))), using a font size of 36, at (Center of (Playable map area)) and height offset -8.0, initially Visible, and fog of war enforcement set to False
                General - Wait 4.0 Game Time seconds
                Portrait - Destroy Dialogs.ProtraitToss[(Triggering player)]
                Text Tag - Destroy (Last created text tag)

Damit sind wir mit diesem Auslöser fertig. Es ist nun möglich mit Linker und Rechter Pfeiltaste zwischen den Portraits zu wechseln und können es mit Leertaste bestätigen.
Zudem haben wir eine schicke Animation und sind begleitet von Sounds.
Bei If (Leertaste), bei 1,2 und 3 könnt ihr dann auf andere Auslöser verlinken, die dann darauf aufbauen. Zum Beispiel anhand der ausgewählten Sachen eine Basis erstellen.

ABER noch funktioniert das ganze nicht. Keine Panik es ist nicht mehr viel.

Ihr klickt jetzt mit Rechtsklick auf den DialogKeys Auslöser und macht den Hacken bei "Initially On" raus. Dann geht ihr zu CreatePortraits und fügt am Schluss
Trigger - Turn DialogKeys On ein

Ein neuer Auslöser Map Initialization mit dem Ereignis:
Game - Map initialization

Bei Aktionen den Befehl:
General - Pick each integer from 1 to 8, and do (Actions)
Dort unter Aktionen:

Code: Alles auswählen

Pan Camera
    Player: Picked Integer
    Point: Center Of Region
        Region: Playable Map Area
    Duration: 0.0
    Initial Velocity: Existing Velocity
    Decelerate: 10
    Smart: Do Not

Raus aus dem Pick each integer und die Aktion erstellen:
Cinematic Mode Cinematics - Turn cinematic mode On for (All players) over Immediate seconds

Und als letztes:
Run Trigger Trigger - Run CreatePortraits (Check Conditions, Don't Wait until it finishes)

Jetzt würde alles funktionieren. Damit der Hintergrund komplett schwarz ist, müsst ihr unter Map --> Map Options bei Unexplored Areas (1. Feld) Grey Mask zu Black Mask ändern. Momentan passiert auch nichts wenn ihr mit Leertaste bestätigt. Da müsst ihr wie bereits gesagt bei DialogKeys bei Leertaste, 1, 2 und 3, Run Trigger erstellen, der zu einem Auslöser verlinkt, der mit dem Ergebnis etwas anfangen kann.

Was mir erst jetzt am Schluss einfällt ist, geht zu DialogKeys, scrollt runter zur Leertaste und fügt am Ende von 1, 2 und 3 noch diesen Befehl ein:

Cinematics - Turn cinematic mode Off for (Player group((Triggering player))) over Default seconds

Hoffe ihr habt es bis zum Schluss durchgehalten und seid zufrieden mit dem Tutorial. Falls ihr noch Fragen habt oder einfach nur etwas unklar ist, dann fühlt euch frei zu fragen!

Hier noch die Map zum herunterladen: http://www.file-upload.net/download-385 ... C2Map.html