Zeige Ergebnis 1 bis 9 von 9
  1. #1
    Benutzerbild von Sanktoras
    Registriert seit
    Jan 2011
    Ort
    Berlin
    Beiträge
    178
    Likes
    1

    Ein eigenes Interface - Layouts und Styles

    Ein eigenes Interface -
    Layouts und Styles


    Seit Patch 1.2 geht es endlich - das Erstellen eines eigenen Interfaces mittels externen Layout- und Style-Dateien. Nur leider wird das ganze vom Editor so gut wie gar nicht unterstützt, das Schreiben der XML-basierten Dateien muss über externe Textprogramme geschehen.
    Dieses Tutorial zeigt, wie diese Dateien aufgebaut sind und wie sie in die Map eingebunden werden können.
    Der komplette Inhalt des Tutorials basiert auf meinem selbsterarbeiteten Wissen, also weist mich bitte auf Fehler oder Verbesserungen hin.


    Allgemeines

    Hier werden grundlegende Fragen wie "Was sind überhaupt Layout- und Style-Dateien?" und "Warum nicht alles über Auslöser regeln?" beantwortet. Außerdem findest du hier die Voraussetzungen, die du erfüllen solltest, um mit dem Tutorial zu beginnen.

    Layout- und Style-Dateien - Was ist das?

    Layout- und Style-Dateien sind im Prinzip erstmal nichts weiter als XML-Dateien. Layout-Dateien dienen dem Erstellen eines eigenen Interfaces; Style-Dateien definieren die dafür benötigten Schriftarten. Beide Formate basieren auf simplem XML.
    Seit Patch 1.2 ist es möglich, eigene Layout- und Style-Dateien in die Map oder den Mod einzubauen. Dies ermöglicht es, das Interface in externe Dateien auszulagern, sodass die Auslöser sich nur noch um die Funktion des UIs (z. B. Klick auf einen Button) kümmern müssen.

    Auslöser vs. Layouts

    Im Gegensatz zu den Styles, die nur über XML-Dateien erstellt werden können, sind die meisten Möglichkeiten der Layout-Dateien auch über Auslöseraktionen erreichbar.
    Vorteile der Erstellung über Auslöser sind:
    • direkt im Editor implementiert
    • dank umfangreichem GUI für jedermann leicht zu verstehen

    Vorteile der Layout-Dateien sind:
    • gesamtes Interface in Dateien, damit übersichtlichere Auslöser
    • mehr Konfigurationsmöglichkeiten, z. B. bessere Positionierung
    • Änderungen am Standard-Interface möglich (wird jedoch in diesem Tutorial nicht behandelt)


    Voraussetzungen

    Folgende Voraussetzungen solltest du erfüllen, um mit diesem Tutorial beginnen zu können:
    • grundlegende Kenntnisse im Umgang mit Auslösern (Du solltest wissen, was ein Auslöser ist, wie man ihn erstellt und wie man mit Ereignissen, Bedingungen, Aktionen und Variablen umgeht.)
    • ein gutes Textverarbeitungsprogramm, was auch XML unterstützt (Ich würde Notepad++ empfehlen. Dort kannst du über Sprache->XML das XML-Syntaxhighlight aktivieren.)
    • optional: Grundwissen zur Sprache XML (Sie ist sehr ähnlich zu HTML aufgebaut, Kenntnisse zu HTML reichen also auch.)



    Zu Beginn

    Diese Kapitel macht dich Startbereit für das Turtorial. Hier legst du alle wichtigen Dateien an und "initialisierst" sie.

    Anlegen neuer Dateien

    Wie ich ja weiter oben bereits gesagt habe, handelt es sich um Layout- und Style-Dateien. Beginnen wir also mit dem Anlegen neuer Dateien für unser Interface.
    Erstelle dazu am besten im Map-Ordner deines SC2-Verzeichnisses einen neuen Ordner mit Namen "Archiv" und darin einen Ordner mit dem Namen deiner Map (z. B. "MyMap").
    Nun erstelle in diesem Ordner zwei neue Dateien, eine Layout- und eine Style-Datei. Dabei muss die Endung für die Layout-Datei ".SC2Layout" und die für die Style-Datei ".SC2Style" lauten. Du wirst im Laufe des Tutorials merken, dass du zwar nur eine Style-Datei, aber mehrere Layout-Dateien benötigst. Für die Style-Datei würde ich daher den Namen "Styles.SC2Style" empfehlen. Die Layout-Datei sollte nach dem Element des Interfaces benannt sein, der darin erstellt wird. "Elemente" sind so etwas wie ein Dialog oder eine Menüleiste. Wenn du erstmal einfach nur dem Tutorial folgen willst, ohne etwas bestimmtes für deine Map zu erstellen, sollte der Name "TestPanel.SC2Layout" genügen.

    Beachte, dass die Dateinamen nur Buchstaben des englischen Alphabets (keine Umlaute oder ß) und auch keine Leerzeichen enthalten dürfen!

    Vorbereitung - Style

    Öffne deine Style-Datei (für Notepad++-Nutzer: klicke mit rechts auf die Datei und wähle "Mit Notepad++ bearbeiten"). Füge folgenden XML-Code ein:
    Code:
    <StyleFile>
    	
    </StyleFile>
    Der "StyleFile"-Tag entspricht hier in etwa dem "HTML"-Tag bei HTML. Er umfasst die gesamte Datei.

    Vorbereitung - Layout

    Öffne deine Layout-Datei. Füge den folgenden XML-Code ein:
    Code:
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <Desc>
    	
    </Desc>
    Analog zum "StyleFile"-Tag gibt es hier den "Desc"-Tag.


    Eigene Styles

    Styles zu erstellen ist eigentlich sehr simpel: über das "Style"-Tag.

    Öffne deine Style-Datei. Nun füge zwischen die "StyleFile"-Tags folgende Zeile ein:
    Code:
    <Style name="Style1" template="StandardExtendedTemplate" height="#FontSizeMedium" hjustify="Center" textcolor="#ColorTerranLabel"/>
    Damit hast du schon deine erste Schriftart erstellt! Nehmen wir die Zeile doch mal ein bisschen auseinander:
    Das Grundgerüst ist das "Style"-Tag:
    Code:
    <Style ... />
    Dazwischen finden wir mehrere Attribute: "name", "template", "height", "hjustify" und "textcolor". Die folgende Tabelle fasst alle möglichen Attribute zusammen:


    Ein Style braucht natürlich nicht alle diese Attribute festzulegen. Wirklich benötigt wird nur der Name.

    Vorlagen

    Das "template"-Attribut dient der Angabe einer Vorlage für das Style. Vorlagen sind ein sehr wichtiger Aspekt beim Umgang mit Styles und Layouts. Durch sie kann eine große Menge Code gespart werden. Ein Objekt, welches ein anderes als Vorlage nimmt, besitzt automatisch alle Eigenschaften der Vorlage, kann sie allerdings überscheiben, indem es sie selbst definiert.
    Als Vorlage kann jedes beliebige Style benutzt werden. Jedoch gibt es ein paar vordefinierte Styles, die speziell als Vorlage dienen:


    Wie du siehst, basieren alle Vorlagen bis auf "BaseTemplate" ebenfalls auf einer Vorlage. Das ist durchaus erlaubt.
    Bevor du dich zu sehr damit beschäftigst, welche Vorlage nun die beste für dein Style sei: "StandardExtendedTemplate" macht sich immer gut. Die meisten vordefinierten Styles benutzen diese Vorlage, ich würde sie daher auch dir empfehlen. Ansonsten kannst du ja mal ein bisschen mit den Vorlagen spielen und probieren, welche nun am besten passt.

    Konstanten

    In dem eingangs gezeigten Beispiel steht bei manchen Eigenschaften ein "#"-Zeichen gefolgt von einem Bezeichner (z. B. "#FontSizeMedium"). Mit diesem Zeichen wird auf s. g. Konstanten verwiesen.

    Konstanten dienen der "Speicherung" eines bestimmten Wertes unter einem festgelegten Namen. Sie funktionieren also sehr ähnlich zu dem Konstanten im Auslösereditor.
    Konstanten zu erstellen, ist recht einfach und geht über den "Constant"-Tag. Hier ein Beispiel:
    Code:
    <Constant name="Rot" val="ff0000"/>
    Wie zu sehen, hat das "Constant"-Tag genau zwei Attribute: "name" und "val". Hinter "name" muss ein Name für die Konstante angegeben werden, der unter allen Konstanten eindeutig sein muss. Hinter "val" (steht für "Value" = "Wert") kommt dann der Wert der Konstante. Dabei kann hier jeder beliebige Wert angegeben werden; so etwas wie einen Typ hat die Konstante nicht.
    Die Konstante kann nun leicht in jedes Attribut eines Styles eingesetzt werden. Dazu muss beim Attribut vor den Namen der Konstante ein "#" gesetzt werden, damit SC2 erkennt, dass es sich bei dem Folgenden um eine Konstante handelt. Beim Parsen der Datei wird dann der Wert der Konstante an die Stelle des Attributs geschrieben. Hier ein Beispiel für die Nutzung einer Konstante:
    Code:
    <Style name="Style2" template="StandardExtendedTemplate" textcolor="#Rot"/>
    Hier wurde für das "textcolor"-Attribut unsere Konstante "Rot" und damit der Wert "ff0000" eingesetzt.
    Es gibt viele vordefinierte Konstanten für Styles. Ich habe sie im Folgenden nach Typ geordnet zusammengefasst:

    Fonts



    Schriftgrößen



    Schriftgrößen



    Sonstige



    Wichtig für dich sind die Schriftgrößenkonstanten und die Farbkonstanten bis "ColorZergTooltip".
    Wie du siehst, wurden für manche Konstanten andere Konstanten eingesetzt. Das ist durchaus möglich.

    Schriftarten für jede Spezies

    Wie du sicherlich weißt, sind die Schriftfarben für die drei Spezien im Spiel häufig verschieden; Terraner haben meist grüne, Protoss meist blaue und Zerg meist orange Schrift. Dieses Kapitel zeigt, wie für jede Spezies eigene Schriftarten definiert werden können:

    Du kannst (musst aber nicht!) eine Schriftart für eine Spezies spezialisieren, indem du eine entsprechende Endung ranhängst, für Terraner "_Terr", für Protoss "_Prot" und für Zerg "_Zerg". Dabei sollte immer eine Schriftart ohne Endung existieren, die dann für die speziellen Schriftarten als Vorlage genommen werden kann.
    Hier ein Beispiel:
    Code:
    <Style name="Style3" template="StandardExtendedTemplate" height="#FontSizeMedium" hjustify="Center" textcolor="#ColorTerranLabel"/>
    <Style name="Style3_Terr" template="Style3" textcolor="#ColorTerranLabel"/>
    <Style name="Style3_Prot" template="Style3" textcolor="#ColorProtossLabel"/>
    <Style name="Style3_Zerg" template="Style3" textcolor="#ColorZergLabel"/>
    Hier wurde als erstes ein allgemeines Style erstellt: "Style3". Dann wurden drei spezielle Styles definiert, für jede Spezies eines. Dabei wurde das erste Style stets als Vorlage benutzt und lediglich die Farbe geändert.
    Durch dieses Ranhängen der Endungen alleine passiert allerdings noch nichts. Um die verschiedenen Styles wirksam zu machen, ist eine spezielle Syntax in den Layouts notwendig. Mehr dazu weiter unten.

    Fortsetzung folgt im nächsten Post.
    Geändert von Sanktoras (16. März 2012 um 22:04 Uhr) Grund: Überarbeitung


  2. #2
    Benutzerbild von Sanktoras
    Registriert seit
    Jan 2011
    Ort
    Berlin
    Beiträge
    178
    Likes
    1

    Fortsetzung

    Eigene Layouts

    Layouts zu erstellen ist wesentlich aufwendiger und komplexer als Styles.
    Öffne zunächst deine Layout-Datei und füge folgenden Code ein:
    Code:
    <Frame type="Frame" name="Frame1Template" template="TriggerDialogFrame/TriggerDialogFrameTemplate">
    	
    </Frame>
    Damit kennst du auch schon die Basis aller Layouts: das "Frame"-Tag. Frames sind rechteckige Objekte auf dem Bildschirm und bauen so das gesamte Interface auf. Dabei kann ein Frame viele verschiedene Funktionen haben, z. B. als Hintergrundbild, Button oder Textfeld. Ein Frame kann weitere Frames enthalten. Diese s. g. "Child"-Frames befinden sich dann in dem übergeordneten Frame (auch "Parent" genannt). Mehr dazu weiter unten.

    Der "Frame"-Tag hat drei Attribute: "type", "name" und "template". Davon sind "type" und "name" zwingend.
    Die verschiedenen Frametypen, die sich hinter dem "type"-Attribut verbergen, wollen wir später diskutieren. Zunächst soll uns der Typ "Frame" genügen, der ein Frame ohne jedwede Interaktion darstellt. Ein Beispiel dafür ist der Dialog. Die Childs eines Dialoges können natürlich durchaus mit dem Benutzer interagieren, der Dialog selbst jedoch nicht.

    Das Attribut "name" bedarf eigentlich weiter keiner Erklärung. Ein wenig auffällig ist nur, dass ich den Namen nicht auf "Frame1" sondern auf "Frame1Template" gesetzt habe. Das hat einen ganz wichtigen Grund:

    Alles, was in Layout-Dateien erstellt wird, sind lediglich Vorlagen. Durch das Erstellen eines Frames in den Layout-Dateien erscheint noch lange keins im Spiel! Dazu bedarf es der Auslöser, mit deren Hilfe du dann z. B. einen Dialog aus einer Layout-Vorlage erzeugen kannst.

    Daher die Bezeichnung mit "Template". Diese ist natürlich keineswegs zwingend. Wichtig ist nur, dass der Name eines Frames innerhalb der Datei eindeutig ist.

    Mit dem Attribut "template" kommen wir zum ersten Unterkapitel der Layout-Erstellung:

    Vorlagen

    Genauso wie bei Styles ist auch bei Layouts die Nutzung von Vorlagen möglich. Allerdings gibt es hier noch etwas zu beachten: Da Layouts gewöhnlich in vielen verschiedenen Dateien gespeichert werden (gewöhnlich eine Datei pro Dialog) und die Frame- und damit Vorlagen-Namen nur innerhalb einer Datei, jedoch nicht global eindeutig sein müssen, reicht die Angabe des Namens alleine nicht als Vorlagenidentifizierung. Daher werden Layout-Vorlagen immer nach dem Muster "<Datei>/<Name>" angegeben. In dem Beispiel oben wird als Vorlage das Frame "TriggerDialogFrameTemplate" aus der Datei "TriggerDialogFrame" benutzt.
    Die folgende Tabelle fasst die wichtigsten vordefinierten Vorlagen zusammen:


    Konstanten

    Auch bei den Layouts gibt es Konstanten. Das Schema ist dabei genau das gleiche wie bei den Styles, weshalb ich hier nicht weiter darauf eingehen werde. Schau bitte einfach unter Eigene Styles->Konstanten, wenn du nicht (mehr) weißt, wie diese verwendet werden.

    Frames in Frames

    Wie ich oben bereits erwähnte, ist es möglich (und auch sehr oft angewendet!) ein Frame innerhalb eines anderen zu erstellen. Das ist eine wichtige und grundlegende Eigenschaft von Frames.
    Hier gleich mal ein Beispiel:
    Code:
    <Frame type="Frame" name="Frame2" template="TriggerDialogFrame/TriggerDialogFrameTemplate">
    	<Frame type="Frame" name="Frame2_1">
    	</Frame>
    </Frame>
    In diesem Beispiel wurde "Frame2_1" in "Frame2" erstellt.
    Diese "Verschachtelung" von Frames bewirkt, dass das innere Frame sich [b]in[/in] dem äußeren befindet. Z. B. wird es dadurch automatisch ebenfalls unsichtbar, wenn das übergeordnete Frame ausgeblendet wird. Außerdem gilt: Schiebt man das innere Frame außerhalb des äußeren, so wird es verdeckt.
    Ein weiterer Punkt ist, dass die Verschachtelung immens zur Übersichtlichkeit beiträgt.

    Positionierung

    Für jedes Frame können - abhängig von seinem Typ - verschiedene Eigenschaften festgelegt werden. Dazu gehört auch die Positionierung des Frames (diese Eigenschaft gibt es natürlich bei jedem Frametyp).

    Die exakte Positionierung einzelner Frames ist äußerst wichtig. In SC2 geschieht dies allerdings nicht mit absoluten Bildschirmkoordinaten sondern mit s. g. Anchors (Ankern). Durch Anker lassen sich Frames relativ zu anderen positionieren. Sagen wir z. B. ein Child wird mit seiner linken Seite relativ zu der seines Parents positioniert. Wird nun die linke Seite des Parents bewegt, so bewegt sich auch die linke Seite des Childs.
    Dazu erstmal ein Beispiel:
    Code:
    <Frame type="Frame" name="Frame3" template="TriggerDialogFrame/TriggerDialogFrameTemplate">
    	<Frame type="Frame" name="Frame3_1">
    		<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
    		<Anchor side="Right" relative="$parent" pos="Max" offset="-20"/>
    		<Anchor side="Top" relative="$parent" pos="Min" offset="10"/>
    		<Anchor side="Bottom" relative="$parent" pos="Max" offset="-30"/>
    	</Frame>
    </Frame>
    Jeder Anker besitzt 4 Attribute: "side", "relative", "pos" und "offset". Die folgende Tabelle fasst diese zusammen:


    Zur weiteren Erklärung: Welche Seite mit "pos" angesprochen wird, hängt von "side" ab. Ist "side" auf "Left" oder "Right", so bezeichnet "Min" den linken und "Max" den rechten Rand. Ist "side" auf "Top" oder "Bottom", so bezeichnet "Min" den oberen und "Max" den unteren Rand. "Mid" ist in beiden Fällen das Zentrum. Der Wert von "offset" kann durchaus negativ sein (wie das Beispiel oben zeigt).

    Sehr interessant ist die Eigenschaft "relative". Wie in der Beschreibung steht, wird damit das Objekt, zu dem relativ positioniert werden soll, angegeben. Dabei ist das Schlüsselwort "$parent" von großer Bedeutung. Damit wird auf das Parent des Frames verwiesen. Durch Anhängen eines "/" und dann des Namens eines weiteren Frames im Parent, kannst du auch leicht auf solche Frames verweisen. Das geht sogar noch weiter: Durch wiederholtes Anhängen eines "/" kannst du immer weiter in die Verschachtelung der Frames vordringen.
    Mit "relative="$parent/Frame2_2/Frame2_2_1" wird zum Beispiel relativ zum Frame "Frame2_2_1" positioniert, welches im Frame "Frame2_2" des Parents zu finden ist.

    Neben den Ankern gibt es eine weitere Möglichkeit die Position der Frames vorzunehmen: durch Angabe der Breite und der Höhe.
    Code:
    <Frame type="Frame" name="Frame4" template="TriggerDialogFrame/TriggerDialogFrameTemplate">
    	<Frame type="Frame" name="Frame4_1">
    		<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
    		<Anchor side="Right" relative="$parent" pos="Max" offset="-20"/>
    		<Width val="200"/>
    		<Height val="300"/>
    	</Frame>
    </Frame>
    Achte darauf, dass die Position jedes Frames genau definiert sein muss. Das geht z. B. über vier Anker oder über Left- und Top-Anker zusammen mit Breite und Höhe. Ein nicht genau positioniertes Frame wird nicht angezeigt! Es ist auch häufig sinnvoll, in dem obersten Frame (also dem, das kein Parent hat) Anker und Breite/Höhe zu definieren.

    Damit sind die allgemeinen Eigenschaften aller Frames abgeschlossen.
    Nun fehlen nur noch die verschiedenen Frame-Typen und die damit verbundenen speziellen Eigenschaften.

    Typspezifische Eigenschaften

    Image

    Frames dieses Typs zeigen Bilder an. Dabei sind folgende speziellen Eigenschaften wichtig:


    Der Bildpfad bei der "Texture"-Eigenschaft kann entweder der vollständige Pfad (z. B. "Assets/Textures/... .dds") oder ein in Assets.txt gespeicherter sein. Bei letzterer Variante muss dies durch ein vorgestelltes "@" deutlich gemacht werden (z. B. "@UI/LargePanelInnerLine"). Es besteht bei dieser Variante zusätzlich die Möglichkeit, zwei "@@" vorzustellen. Dann wird nicht nur nach dem direkten Namen bei den Assets sondern, wenn vorhanden, nach dem entsprechenden Namen mit der Speziesendung ("_Terr", "_Prot", "_Zerg") gesucht.
    Mit den Werten von "TextureType" kenne ich mich noch nicht so wirklich aus. "Normal" sorgt für eine normale Anzeige des Bildes, während "Border" und "HorizontalBorder" das Bild als Datenspeicher für eine Randtexture ansehen und entsprechend anzeigen (z. B. bei der Dialograhmentextur).

    Label

    Frames dieses Typs zeigen Text an. Dabei sind folgende speziellen Eigenschaften wichtig:


    Bei der "Style"-Eigenschaft muss der Name eines in einer Style-Datei erstellten Styles angegeben werden. Dabei muss immer ein "@" vorangestellt werden. Stellst du zwei "@" vor, so sucht SC2 zusätzlich nach spezienspezifischen Styles (s. Eigene Styles->Schriftarten für jede Spezies).

    Button

    Frames dieses Typs zeigen eine anklickbare Schaltfläche an. Dabei sind folgende speziellen Eigenschaften wichtig:


    Bei den ersten vier Eigenschaften handelt es sich um Pfade zu Frames innerhalb des Buttonframes. Gewöhnlich werden diese Frames genauso benannt wie die entsprechende Eigenschaft. Bei den ersten beiden Eigenschaften ist ein "Image"-Frame gefragt, bei der dritten ein "Label"-Frame und bei der vierten ein "Frame"-Frame.


    Einbindung in die Map

    Zuletzt musst du deine Styles und Layouts in die Map einbinden und verwenden. In diesem Kapitel zeige ich, wie das geht.

    Import

    Zuallererst müssen die Dateien natürlich in die Map importiert werden.
    Öffne dazu den Importeditor. Nun gehe auf Daten->Dateien importieren. Tippe in den sich öffnenden Dialog ganz oben "UI/" ein und suche deine Style-Datei. Stelle sicher, dass nur sie aktiviert ist (auch nicht übergeordnete Ordner!) und klicke auf OK.
    Nun gehe erneut auf Daten->Dateien importieren. Tippe diesmal oben "UI/Layout/UI/" ein und suche die Layout-Dateien. Aktiviere sie und nur sie und klicke auf OK.
    Speichere die Map.

    Einbindung in die UI-Einstellungen

    Bis jetzt sind zwar die Dateien importiert - mehr aber auch nicht.
    Nun gehe in den Dateneditor und dort zum Datentyp "Spiel-UI-Daten". Gehe dort auf den einzigen blauen Eintrag. Nun trage rechts bei den Eigenschaften unter "Schriftartendateien" die Style-Datei und unter "Benutzerdefinierte Layout-Dateien" die Layout-Dateien ein.

    Einbindung im Auslöser

    SC2 erkennt inzwischen unsere Dateien. Aber anzeigen tut es sie immer noch nicht.
    Gehe in den Auslösereditor und erstelle einen neuen Auslöser, der das UI initialisieren soll. Gib ihm das Ereignis "Karteninitialisierung".
    Nun erstelle über Aktionen der Kategorie "Dialog" zunächst einen neuen Dialog (lass alle Parameter dort auf dem Standard). Dann blende seinen Hintergrund aus und setze ihn auf Fullscreen.
    Jetzt erstelle einen Dialoggegenstand nach Vorlage in dem Dialog (dafür gibt es eine entsprechende Aktion). Jetzt kommt die Frage: "Welche Vorlage?" Nun, ich hatte es weiter oben noch nicht beschrieben, aber was du auf jeden Fall brauchst ist eine Layout-Vorlage, die den gesamten Bildschirm abdeckt. Stell bei ihr die Anker so ein, dass alle 4 Seiten direkt an den Entsprechungen des Parents liegen. Erstelle nun in diesem Frame alle anderen Frames, die du so benötigst, und zwar nach den Vorlagen in all deinen Layout-Dateien. Wenn du das alles hast, kannst du diese "Interface"-Vorlage in der Aktion angeben.
    Zu guter Letzt solltest du noch den Dialog anzeigen lassen und fertig!

    Zugriff auf Frames in Layout-Dateien

    Ein ganz wichtiger Punkt ist noch, wie man jetzt auf die einzelnen Frames, die ja in den Layout-Dateien definiert sind, per Auslöser zugreifen kann.
    Das geht relativ leicht mit der Aktion "Dialog - Hook Up Dialog Item In Panel" (ich weiß leider nicht, wie diese auf deutsch heißt). Gib dort den Pfad des Frames im Interfaceframe und das Interfaceframe selbst an. Direkt nach dieser Aktion kannst du den gewünschten Frame in eine Variable des Typs "Dialoggegenstand" speichern - mittels der Funktion "Zuletzt erstellter Dialoggegenstand".


    Abschluss

    Ich hoffe, dass dir dieses Tutorial hilft, einen Einstieg in das Arbeiten mit Layouts und Styles zu finden. Natürlich konnte ich in diesem Tutorial nur oberflächlich alle Features vorstellen. Aber ich glaube, dass es dir mit dem oben vermittelten Wissen leicht sein wird, dich selbst weiterzubilden.
    Für Fragen zu dem Thema bin ich immer offen. Meine Kontaktmöglichkeiten stehen links.

    MfG
    Sanktoras
    Geändert von Sanktoras (16. März 2012 um 22:10 Uhr) Grund: Überarbeitung

  3. #3
    Benutzerbild von Sanktoras
    Registriert seit
    Jan 2011
    Ort
    Berlin
    Beiträge
    178
    Likes
    1
    - Reserviert -

  4. #4
    Mach die Spoiler weg
    und bau dafür lieber ein Inhaltsverzeinis mit [anker] und [sprung] ein.

    Sehr schön dass es mal ein Tutorial dazu gibt.

  5. #5
    Benutzerbild von ThePro
    Registriert seit
    Mär 2006
    Beiträge
    12
    Likes
    0
    Gibts eigentlich auch Codes für ne ordentliche Gliederung? Hab das nur mit müh und Not hinbekommen. :/

  6. #6
    Benutzerbild von Sanktoras
    Registriert seit
    Jan 2011
    Ort
    Berlin
    Beiträge
    178
    Likes
    1
    @Tomura: Ich finde das eigentlich ganz schön mit Spoilern. "anker" und "sprung" sind natürlich eine gute Alternative, allerdings funktionieren die nur innerhalb eines Posts, so wie ich das verstanden habe. Durch die Zeichenbegrenzung benötige ich leider zwei, wenn nicht bald sogar drei.

  7. #7
    Chefredakteur Benutzerbild von General Mengsk
    Registriert seit
    Jul 2002
    Beiträge
    11.828
    Likes
    25
    Sprünge funktionieren auch zu Ankern in anderen Posts, solange diese auf derselben Seite sind. Alternativ wäre es auch möglich via [url] die Posts zu verlinken und den Anker in der URL anzupassen. Das funktioniert auch seitenübergreifend, öffnet aber stets ein neues Fenster.
    inStarcraft.de - Die deutsche StarCraft-Seite seit 1998

    StarCraft II: [ Neuigkeiten ] - [ Szene-News ] - [ Heart of the Swarm ] - [ StarCraft II Clan Liga ] - [ StarCraft-Wiki ]

    Heart of the Swarm
    Artikel: [ FAQ ] - [ Storymodus ] - [ Missionen ] - [ Storyvorschau ]
    Interviews: [ Chris Sigaty ] - [ Samwise Didier ] - [ Tony Hsu ] - [ Johnny Ebbert ] - [ Brian Kindregan ]

  8. #8
    Zitat Zitat von ThePro Beitrag anzeigen
    Gibts eigentlich auch Codes für ne ordentliche Gliederung? Hab das nur mit müh und Not hinbekommen. :/
    Wenn du noch konkrete Vorschläge für Codes hast, die fehlen, dann schreib mir einfach eine PM. Vielleicht können wir die dann noch einbauen. Hier gibt es übrigens eine Liste mit allen verfügbaren Codes: http://starcraft2.ingame.de/forum/misc.php?do=bbcode
    ლ(ಠ益ಠლ)
    „Gedanken sind Arschgeigen“            

  9. #9
    Benutzerbild von M0rt3
    Registriert seit
    Apr 2010
    Beiträge
    71
    Likes
    0

    Frage wegen Infopanel

    Hi,

    ich weiß nich tob dieser Thread auch dafür genutzt werden kann, nachzufragen wie ich Layouts hinbekomme.

    Und zwar arbeite ich über Import in den Data/GAME UI Einstellungen.
    Ich habe es jetzt hinbekommen dass ich eine eigene Grafik für meine Commandcard habe und diese auch zentriert ist. Alles andere ist Unsichtbar.

    Jetzt möchte ich allerdings noch vom InfoPanel
    -> Life-Label
    -> XP-Label
    -> Shield-Label
    -> Energy-Label
    anders Positionieren und Schrift ändern und Grafik von den Balken.

    Alle anderen Informationen, wie Wireframe und die anderen Daten möchte ich aus dem Infopanel entfernen. Unsichtbar machen.

    Mit meinen ersten Gehversuchen erzeuge ich lediglich ein Absturz von SC2 :-D
    Code:
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <Desc>
    	<!-- INFOPANEL -->	
        <Frame type='Frame' name='GameUI/UIContainer/ConsoleUIContainer' file='GameUI'>
    		<Frame type='Infopanel' name='InfopanelTemplate'>
    			<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
    			<Anchor side="Right"  relative="$parent" pos="Mid" offset="500"/>
    			<Width  val="1000"/>
                <Height val="220"/>
    			
    			<!-- INFOPANEL LABELS -->	
                <Frame type="UnitWireframe" name="UnitWireframe">
                    <Anchor side="Bottom" relative="$parent" pos="Max" offset="160"/>
                    <Width val="0"/>
                    <Height val="0"/>
                </Frame>
    
                <Frame type="Label" name="ShieldLabel">
                    <Style val="UnitWireframeVital"/>
                    <Anchor side="Top" relative="$parent" pos="Mid" offset="15"/>
                </Frame>
    
                <Frame type="Label" name="LifeLabel">
                    <Style val="UnitWireframeVital"/>
                    <Anchor side="Top" relative="$parent" pos="Min" offset="15"/>
                    <Anchor side="Left" relative="$parent" pos="Min" offset="150"/>
                </Frame>
    
                <Frame type="Label" name="EnergyLabel">
                    <Style val="UnitWireframeVital"/>
                    <Anchor side="Top" relative="$parent" pos="Max" offset="15"/>
                    <Anchor side="Right" relative="$parent" pos="Max" offset="-150"/>
                </Frame>
            </Frame>
    </Desc>
    Kann mir einer von Euch sagen was ich genau falsch mache? Und wie ich die Schriftarten ändern kann sowie die Grafik für den Balken?
    Vielen Dank
    Geändert von M0rt3 (03. Juli 2011 um 18:10 Uhr)

Forumregeln

  • Es ist dir nicht erlaubt, neue Themen zu verfassen.
  • Es ist dir nicht erlaubt, auf Beiträge zu antworten.
  • Es ist dir nicht erlaubt, Anhänge hochzuladen.
  • Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
  •