Seite 1 von 1

[LoV] Das neue UI-Grafikthema

BeitragVerfasst: Di 17. Dez 2013, 01:54
von 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
Startscreen.jpg (44.86 KiB) 4862-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...

Re: Das neue UI-Grafikthema

BeitragVerfasst: Mi 18. Dez 2013, 16:11
von 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
file_002.jpg (295.31 KiB) 4833-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... :D


Weitere Details zum neuen User Interface folgen...

Re: Das neue UI-Grafikthema

BeitragVerfasst: Do 19. Dez 2013, 09:28
von 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
file_006.png (44.13 KiB) 4817-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...

Re: Das neue UI-Grafikthema

BeitragVerfasst: Do 19. Dez 2013, 09:33
von Ghoule
Gefällt mir gut das Design. daumen nach oben!....

Re: Das neue UI-Grafikthema

BeitragVerfasst: Fr 20. Dez 2013, 00:45
von U von Schreckenstein
Hat Potential. daumen nach oben!.... Sehr schön Arne.

Re: Das neue UI-Grafikthema

BeitragVerfasst: Fr 20. Dez 2013, 09:54
von 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
file_015.png (34.49 KiB) 4791-mal betrachtet
file_005.png
file_005.png (1.34 KiB) 4791-mal betrachtet
file_013.png
file_013.png (39.53 KiB) 4791-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
file_012.png (352.16 KiB) 4791-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...

Re: Das neue UI-Grafikthema

BeitragVerfasst: Fr 20. Dez 2013, 21:10
von 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. daumen nach oben!....

Re: Das neue UI-Grafikthema

BeitragVerfasst: Fr 20. Dez 2013, 21:14
von Metalman
Endlich mal ein vernünftige Minimap! Auf der alten hab ich selten was erkannt. Super arbeit Arne! daumen nach oben!....

Re: Das neue UI-Grafikthema

BeitragVerfasst: Fr 20. Dez 2013, 21:45
von 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... ;)

Re: Das neue UI-Grafikthema

BeitragVerfasst: Fr 20. Dez 2013, 23:33
von 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. daumen nach oben!....

Re: Das neue UI-Grafikthema

BeitragVerfasst: So 22. Dez 2013, 19:33
von 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
icons01.png (14.4 KiB) 4749-mal betrachtet

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


... die vier Buttons aus der Mitte:

icons02.png
icons02.png (13.5 KiB) 4749-mal betrachtet

goto - info - place - messages


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

icons03.png
icons03.png (4.01 KiB) 4749-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! :D 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
icon04.png (8.61 KiB) 4749-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...

Re: [LoV] Das neue UI-Grafikthema

BeitragVerfasst: So 22. Dez 2013, 21:12
von Der Wolff
Moin Arne, Habe die Ehre!..

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 schlag ein.....

Holger

Re: [LoV] Das neue UI-Grafikthema

BeitragVerfasst: Sa 28. Dez 2013, 01:56
von Soldberg
Dezember 2012

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

file_002.jpg
file_002.jpg (119.91 KiB) 4711-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
file_004.jpg (132.19 KiB) 4711-mal betrachtet


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

file_003.png
file_003.png (53.89 KiB) 4711-mal betrachtet


Es gab allerdings auch Alternativen...

file_005.png
file_005.png (46.66 KiB) 4711-mal betrachtet
file_006.png
file_006.png (355.15 KiB) 4711-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...

Re: [LoV] Das neue UI-Grafikthema

BeitragVerfasst: Sa 28. Dez 2013, 09:50
von 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....