[LoV] Das neue UI-Grafikthema

[Soldberg]

Für die LoV Ultimate ist unter anderem ein funktionell zwar gleiches, jedoch grafisch überarbeitetes Benutzer- bzw. "User Interface" vorgesehen, dass unserer Meinung nach, die Spielatmosphäre deutlich anhebt... Diese Veränderungen ziehen sich später durch das gesamte Spiel und sind bereits im Startscreen von LoV erkennbar...

Startscreen.jpg (44.86 KiB) 5745-mal betrachtet

Der gezeigte Startscreen, ist bereits in der Standard/ Vanilla-Version von LoV enthalten... Er lässt sich am besten über GME ins Spiel einbinden. Dazu muss der "UI"-Ordner aus dem LoV-Verzeichnis in den MODS-Ordner verschoben werden.

Zum Motiv: Im Startscreen ist der Original Speisewagen - hier bereits im Museum verbracht - zu sehen, in dem im November 1918 der Waffenstillstand bei Compiègne - mit dem defacto der Erste Weltkrieg endete - unterzeichnet wurde... Dolchstoßlegende und Versailler Vertrag folgten, bis Hitler 1940 den Waggon eigens für die Kapitulation der Franzosen wieder aus dem Museum holen ließ...

Weitere Details zum neuen User Interface folgen...

[Soldberg]

November 2012

Erste Schritte... Eine Farbstudie, die ursprünglich von der Farbgebung des früheren DMP-Forums inspiriert wurde... Später erinnerten mich die "neuen" Farben irgendwie an die schwarzen Uniformen der Panzertruppe... Die Goldränder dürften allerdings unschwer als typisch DMP-Oldstyle zu erkennen sein... Wäre diese Farbgebung weiter verfolgt worden, wären Symbole in einem satten weiß daherkommen...

Insgesamt konnten die dunkleren und satteren Farben überzeugen... Auch wenn die Farben selbst nicht weiter verwendet wurden, war uns klar... die UI braucht kräftige und kontrastreiche Farben...

file_002.jpg (295.31 KiB) 5716-mal betrachtet

Vergleich Original-UI und "DMP-Farbstudie"

PS: Die UI links ist zwar original, aber das Spielfeld ist ungewöhnlich dunkel... weil ich da grafisch die - mittlerweile nicht mehr weiter verfolgte - Idee von Nachtmissionen getestet habe...


Weitere Details zum neuen User Interface folgen...

[Soldberg]

November 2012

Nur einige Tage nach der Farbstudie, habe ich begonnen, die Buttons umzudesignen... Die Button-Symbole sollten anders sein - schon allein aus dem Grund, da es recht schwierig geworden wäre, die Original-Button-Symbole aus ihrem ursprünglichen Design sauber heraus zu lösen... Die Button-Symbole sollten von der Gestaltung her intuitiv genug sein, um schnell zu erkennen, was sie beim Betätigen bewirken sollen/ bewirkt wird... Soweit es sinnvoll war, beließ ich die Buttonsymbolik bzw. nutzte eine ähnliche Symbolik... Daher sehen die Symbole hier und da auch nicht soooo anders aus, wie vielleicht befürchtet... An den einzelnen Button-Positionen wollten wir nicht herumwerkeln, da hier schon eine relativ optimale Verteilung gefunden wurde...

Bedingt durch einen Grafik-Mod - an dem ich zuvor in der Zeit gearbeitet habe - übernahm ich ein bestimmten Grafik-Stil... So habe ich versucht, Leuchtraster-Buttons nachzustellen...

file_006.png (44.13 KiB) 5700-mal betrachtet

So sahen die ersten Buttons aus... Der bräunliche Ton der Schalter ist der "normale" Zustand... Angeklickt "leuchten" sie orange... Sind sie deaktiviert, sind sie sehr dunkel... Während die untersten Schalter sich noch relativ stark an der Originalsymbolik halten, habe ich teilweise komplett neue Symbole für die mittleren vier Buttons entworfen...

Zur Zeichenerklärung... Ganz rechts der Nachrichten-Button... hat als Symbol einen Fernmeldeblitz... Zugegeben, dass ist der Bundeswehr-Fernmeldeblitz... Aber nur dieser sieht auch in minimalistischer Pixelgrafik vernünftig aus... Fernmeldesymbole der Wehrmacht konnten nicht überzeugen... Der zweite Button von rechts ist der "Reserve-Liste"-Button... Das "Eiserne Kreuz" ist Verbandszeichen sämtlicher Reservistenverbände... und es hat Tradition... schon in Wappen von Reservistenvereinen aus den Zwanziger Jahren führen ein Eisernes Kreuz in ihren Verbandswappen... Darum traf ich die gleiche Wahl und setzte das Eiserne Kreuz als Button-Symbol für die Reserveliste.

Der Vergleichsfeld-Button ist mit dem "i" schon optimal... Die Überlegung stattdessen eine "Waage" als Symbol zu nutzen - da eine Waage in gewisser Weise auch ein Vergleich macht - habe ich letzten Endes verworfen... Beim Betätigen des "Unit List"-Button werden alle kämpfenden Einheiten gezeigt... Inspiriert durch das Sturmabzeichen der Wehrmacht, dass (in einer Version) eine gekreuzte Stielhandgranate und ein Schwert/ Dolch zeigt... habe ich versucht diese Kombi nachzuempfinden... aber schon hier konnte es nicht so recht überzeugen, so dass es wenig später nochmals überarbeitet wurde...

Dass das Drumherum um die Buttons zu diesem Zeitpunkt nicht passte bzw die Buttons nicht zur gezeigten Umgebung passten, war nur ein entwicklungsbedingter und relativ kurzfristiger Zustand... Ich arbeitete mich von Punkt zu Punkt... Der Fokus lag für's Erste beim Button- und Symboldesign. Das "Knöbbe-Drumherum" sollte erst später kommen... Solange musste man also mit den Originalgrafiken leben...


Weitere Details zum neuen User Interface folgen...

[Ghoule]

Gefällt mir gut das Design.

[U von Schreckenstein]

Hat Potential. Sehr schön Arne.

[Soldberg]

Kommentare...

"... hat Potenzial"? - wie nett... Natürlich hat das Ganze viel Potenzial! Aber um an dieser Stelle Missverständnisse aus dem Weg zu räumen... Dieser Thread ist so eine Art "Entwickler-Tagebuch"... Alles was ich hier zeige, sind "nur" einzelne nicht endgültige Zwischenschritte, die ich vor etwa einem Jahr gemacht habe und die in das jetzige Design/ Aussehen unserer UI münden werden. Unabhängig davon, freue ich mich aber über eure Kommentare...


November/ Dezember 2012

Unmittelbar nach dem die unteren Buttons umdesignt wurden, kamen die oberen dran... Einige Symbole waren von der Vorstellung in meinem Kopf her sofort klar und wurden entsprechend umgesetzt... bei anderen war ich weniger entschlossen... So wurde zum Beispiel das endgültige Aussehen des "Suplly"-Buttons (mit dem eine Einheit Nachschub: Treibstoff und Munition bekommt) im Team entschieden...

Eine erste Idee war eine stilisierte Tonne mit einem Plus und drei Streifen - letzteres angelehnt an das Munitionssymbol... Aber dieses erinnerte zusehr an ein Batterie/Energieladesymbol (zum Beispiel vom Handy)... alternativ gab ich noch eine "echter" wirkende Tonne mit einem symbolischen Treibstofftropfen zur Auswahl... Letzten Endes wurde es eine Tonne mit einem Pluszeichen...

file_015.png (34.49 KiB) 5674-mal betrachtet

file_005.png (1.34 KiB) 5674-mal betrachtet

file_013.png (39.53 KiB) 5674-mal betrachtet

Auch die Aufstockungs- und Upgradebuttons wurden noch einmal - bei genauem Betrachten - etwas abgeändert... es sollten nicht die letzten Veränderungen gewesen sein... Nach ein paar Tagen - ein Familienwochenende lag dazwischen - waren weitestgehend alle Buttons fertig... auch der letztens nicht zufriedenstellende "Unit-List"-Button (die ursprünglich gekreuzte Handgranate und Schwert) fand nun seine endgültige Form...

file_012.png (352.16 KiB) 5674-mal betrachtet

Unschwer ist am Neuner-Button-Block eine weitere Veränderung auszumachen... Ich beschäftigte mich parallel zu den Buttons auch mit den UI-Hintergrundgrafiken und experimentierte mit diversen "Materialen" herum... Die metallische Oberfläche, die ich intern präsentierte, traf bei uns allen genau ins Schwarze und ist nun ein wesentlicher Bestandteil unserer UI... Bestand hat bis heute auch die - bereits hier zu sehen - abgeänderte Minimap... Die Minimap ist in ihrer Farbgebung den Original-Heereskarten der Wehrmacht nachempfunden...


Weitere Details zum neuen User Interface folgen...

[asuser]

Respekt Soldberg,

so viele neue Ideen! Ist immer schwierig, wenn man da Neuland betritt und es nicht allen gefällt. Wenn dann noch Varianten auszusieben sind, puh...

Mir gefällt der neue Style.

[Metalman]

Endlich mal ein vernünftige Minimap! Auf der alten hab ich selten was erkannt. Super arbeit Arne!

[Soldberg]

Abwarten asuser... die Geschichte ist noch lange nicht zuende und es kommen noch einige weitere Post, in denen ich "step-by-step" unsere UI vorstelle, teilweise begründe, warum ich etwas so und nicht anders gemacht habe... Die UI ist zugegebenermaßen in einigen Bereichen immer noch nicht endgültig fertig (vielleicht 80-90%), aber sie ist schon recht fortgeschritten...

Um das Thema etwas spannend zu halten... gebe ich nicht alle Informationen auf einmal preis... würde dann auch nen riesiger Post werden... und wer will dann schon sowas lesen... in kleinen Häppchen liest es sich viel einfacher...

[Der Wolff]

Moin Arne,

die Einheitenbezeichnungen über der Strategischen Karte werden bei langen Namen nicht ganz angezeigt.
ich schicke Dir morgen mal ein Beispielbild.
Ansonsten super Arbeit.

[Soldberg]

Kommentare...

Danke für den Hinweis Holger... allerdings gehört der mehr in den internen Bereich... Der derzeitig verwendete Schrifttyp ist ja noch nicht endgültig und wir müssen da noch etwas herumexperimentieren...


Dezember 2012

Damit ihr mal ne Vorstellung habt, was die Buttons eigentlich darstellen sollen, habe ich mal meine Semi-Masters konsumfertig gemacht... Die Symbolanordnung entspricht der Position im UserInterface... oben, der Neuner Button-Block:

icons01.png (14.4 KiB) 5632-mal betrachtet

undo - supply - sleep
repl - erepl - upgrade
embark - mount - switch

... die vier Buttons aus der Mitte:

icons02.png (13.5 KiB) 5632-mal betrachtet

goto - info - place - messages

und last, but not least - wie es so schön heißt, die Final Six:

icons03.png (4.01 KiB) 5632-mal betrachtet

prev - next - plane - stratmap - purchase - sysmenu

Die Sechser-Buttonleiste hat gegenüber dem Original noch recht ähnlich aussehende Symbole... Richtungsdreiecke mit einem symbolischen Panzer sind klar verständlich... Im Original zeigt der Switch-Button, mit dem man zwischen Boden- und Luftebene hin und herwechseln kann sowohl ein Panzer, als auch ein Flugzeug... ich halte das, zumal der normale und der aktivierte Zustand des Buttons kaum auszumachen ist, für verwirrend. Daher haben wir nur ein Flugzeug... (Trivia: Für Interessierte, es ist eine Dornier Do-217), dass - sobald man auf die Luftebene schaltet - leuchtet... Ein stilisierter Kompass mit stilisierter Rasterkarte schaltet zur strategischen Map... Das Dollarzeichen ist zwar in der aktuellen Version noch enthalten wird aber wahrscheinlich in der Endversion durch ein Credit-Zeichen ersetzt... schlicht, weil die Wehrmacht den Dollar nicht braucht! Das obligatorische Zahnrad, dass die Optionen öffnet, ist allgemein gebräuchlich... warum hier also das (Zahn-)rad neu erfinden?!

Zu den vier mittleren Buttons habe ich bereits in einem der vorherigen Posts etwas geschrieben... daher wiederhole ich mich an dieser Stelle nicht noch einmal...

Kommen wir nun zum Neuner-Buttonblock... Das Undo/Zurücksetzen-Symbol ist so gut wie immer ein "zurückführender Pfeil"... so auch hier. Der Nachschub (Treibstoff und Munition) werden durch eine Tonne... optimalerweise (und nur gedacht) mit Treibstoff einem (Additions-)PLUS darauf symbolisiert... Vom Musik- und Videoplayer sicher bekannt... das "SKIP"-Symbol steht für den Befehl, Einheiten "schlafen/ruhen" zu lassen... Ein "P" für parken hätte es vielleicht auch getan, dachte aber, dass passt zum Gesamtbild nicht...
Die zweite Buttonreihe im Neuner-Block stehen funktionell recht nah beieinander... Das unterstreiche ich mit ähnlich aussehenden Symbolen - hier, einem Schraubenschlüssel... Lediglich ein PLUS für normalen Ersatz, ein STERN für Elite-Ersatz und ein Upgrade-WINKEL unterscheidet die Buttons voneinander...
Um Einheiten in ein Schiff, Flugzeug oder ner Eisenbahn zu bekommen, wird der "Verschiifen"-Button gedrückt... Ursprünglich war hier durch die Entwickler wohl mal angedacht, eine Automatik anzusetzen, die den Button automatisch verändert... mit Schiffsymbol, mit Flugzeug und mit Lok- oder Schienensymbol... Aber irgendwie funktioniert diese Automatik nicht oder nicht korrekt... Aus diesem Grund, habe ich nur einfache sich entgegengesetzt stehende "Transportpfeile"... Das für motorisierte Infanterie/Artillerie/Flak/Panzerabwehreinheiten relevante Knöpfchen, damit diese auf ein fahrendes Gefährt "auf- und absitzen" können, zeigt gleiche Transportpfeile, wie der Verschiffen-Button, allerdings durch ein stilisiertes Zahnrad/-kranz überdeckt... Das/ der Zahnrad/-kranz ist ein typisches Symbol für motorisierte Einheiten... Der Switch-Button zeigt zwei in sich zeigende Pfeile, ohne dabei zu sehr dem "Grünen Punkt"-Symbol zu ähneln... Aber im Grunde genommen das ausdrücken soll... Ein Funktionszyklus, wenn man so will...

Der Runden-Ende-Button war zu diesem Zeitpunkt noch nicht umgesetzt... dieser kam erst später... Aber um es an dieser (passenden) Stelle die Erklärung vorwegzunehmen... warum man die Runde mit einem "Stand-By"-Button beendet, zeige ich mal die Stoppuhr-Grafikevolution... Vielleicht wirds damit klar:

icon04.png (8.61 KiB) 5632-mal betrachtet

endturn

Ich wollte einfach keine Sanduhr... sondern einen zeitgemäßeren Zeitmesser... und am naheliegendsten war hier eben eine Stoppuhr... Vereinfacht man diese aber auf nur wenige Elemene, ähnelt die Grafik dem I/O-Symbol frappierend... Vielleicht ändere ich das bei Gelegenheit noch einmal ab... bis dahin macht man da nun die Runde nur AUS... und nicht wieder an...



Weitere Details zum neuen User Interface folgen...

[Der Wolff]

Moin Arne,

da ich den Test-Ultimate-GME-Mod noch aktiv habe, spiele ich Lov gerade mit Deinen Änderungen.
Bis auf die Rundenende-Button sieht alles so aus, auch die Strategische Karte sieht gut aus.

Viele Grüße

Holger

[Soldberg]

Dezember 2012

Nach und nach, verschwanden die Leuchtraster-Buttons und wurden durch den bis jetzt vorherrschenden Metalllook ersetzt...

file_002.jpg (119.91 KiB) 5594-mal betrachtet

Der nächste Arbeitsschritt war nun, einen geeigneten Adler zu finden, um den hässlichen Slitherine-Vogel in Rente zu schicken... Unser Hauptaugenmerk fiel dabei auf das Hoheitszeichen/ Reichsadlerdesign der Wehrmachtsuniformen...

file_004.jpg (132.19 KiB) 5594-mal betrachtet

Im Generalsrang ist dieser gold/gelb-farben gehalten... weshalb unser Headbase-Adler ebenfalls goldgelb daherkommt...

file_003.png (53.89 KiB) 5594-mal betrachtet

Es gab allerdings auch Alternativen...

file_005.png (46.66 KiB) 5594-mal betrachtet

file_006.png (355.15 KiB) 5594-mal betrachtet

Naja, entschieden haben wir uns letztlich für das vorletzte Muster... ganz unten in der Mitte... Das Muster zeigt (Überraschung, weil wenig metallisch) altes, vergilbtes Leder - ähnlich einer Trommelbespannung...





Weitere Details zum neuen User Interface folgen...

[karatefighter82]

die farbliche Umdesignung sowie die Anfangsbilder find ich gut, jedoch denke ich, di Symbole sollten sich, der Einfachheit halber, eher nicht im Design verändern....