PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Entwicklerfrage: Charakter-Menü-Design



Memorazer
21.12.2014, 14:54
Hallo Zusammen,

für mein neuestes Projekt habe ich ein Charakter-Menü erstellt und wollte gerne mal Feedback
zu dem aktuellen Design einholen. Also ob euch das gezeigte gefällt, was ihr ändern würdet etc.

Insgesamt gibt es acht Charaktere. Der Wechsel erfolgt durch einfaches schließen des Menüs.
Heißt man lässt das Bild des gewünschten Charakters anzeigen und schließ dann das Menü.

Hier mal ein leeres Bild wo der Charakter noch freigeschaltet werden muss:

http://www.bilder-hochladen.net/files/big/l7lt-5f-cfec.png

Hier zwei Beispiele von Charakteren:


http://www.bilder-hochladen.net/files/big/l7lt-5c-31fe.png

http://www.bilder-hochladen.net/files/big/l7lt-5d-9dcb.png



Die Bilder sind bestimmt noch ausbaufähig. Suche eigentlich auch grafische Unterstützung, da ich hier nicht
die besten Fähigkeiten habe, aber eine hohe Qualität haben möchte.

Über jegliches Feedback wäre ich dankbar.

WeTa
21.12.2014, 16:31
Ganz schlimmes Menü aus Usability-Sicht imo.
Wenn man etwas auswählen soll, sollte es möglich sein, alle Wahlmöglichkeiten zu sehen und nicht blind zu durchsuchen.
"Leave to choose this character!" hört sich auch nicht so prall an.
Hier mal ein (schreckliches 2 Minuten Mockup als) Vorschlag wie ich das lösen würde:
http://puu.sh/dDHlT/098ea50107.jpg

Dieser weiße Rahmen da wäre dann der Cursor zum Auswählen, mit der Eingabetaste wählt man den Charakter aus.
Das Bild rechts und etwaige Zusatzinformationen die relevant für den Charakter sind werden beim bewegend es Cursors geupdatet.

Corti
22.12.2014, 10:53
Was bedeuten denn diese 4 Icons unter dem Kerlchen?

Sabaku
22.12.2014, 13:30
Was bedeuten denn diese 4 Icons unter dem Kerlchen?

Das dürfte die Ingamegrafik der Charaktere sein. Jeweils für eine Blickrichtung

WeTa
22.12.2014, 19:33
Oh, dann würde ich die auch noch weglassen.

Memorazer
23.12.2014, 06:41
@Tako:
Danke das du dir die Arbeit gemacht hast ein Mockup zu machen.
Gefällt mir wirklich schon ganz gut.

Muss zugeben, dazu viel zu wenig nachgedacht zu haben. Konzepte für Menüs habe ich bisher nie gemacht...

Bei der Umsetzung sehe ich aber jetzt schon, das dauert...

Die vier Icons sind der Charakter, wie man ihn spielt.
Besondere Fähigkeiten oder sowas wie Namen sollen die Charas übrigens nicht bekommen. Von daher gibt es ansonsten wenig Inhalte.

WeTa
23.12.2014, 15:13
So schwer ist das gar nicht und es gibt hunderte Möglichkeiten das umzusetzen.
Versuchs mal so:
Da du 2*4 Felder hast, reichen die X-Werte der Felder von 0 bis 1 und die Y-Werte der Felder von 0 bis 3.
Das Feld des roten Charakters ist also (0,0), das Feld des blauen Charakters ist (0,1), die bisher noch nicht freigeschalteten Charaktere sind auf (0-1,1-3).

Jetzt setzt du noch zwei Variablen für den Cursor, eine für den X-Wert und eine für den Y-Wert

Drückt der Spieler...


→ bzw. D
...wird der aktuelle X-Wert um eins erhöht


← bzw. A
...wird der aktuelle X-Wert um eins verringert


↓ bzw. S
...wird der aktuelle Y-Wert um eins erhöht


↑ bzw. W
...wird der aktuelle Y-Wert um eins verringert


Space bzw. Enter
...wird der aktuell angewählte Charakter ausgewählt + entsprechendes visuelles/akustisches Feedback



Problem ist jetzt, dass der X- und Y-Wert aus unserem Korsett von X:0-1 und Y:0-3 ausbrechen kann (drückt der Spieler viermal → bzw. D erreicht der X-Wert des Cursors 4, aber wir haben ja nur zwei Spalten an Charakteren).
Ist aber einfach zu lösen, indem wir den X-Wert modulo 2 rechnen, da -1%2=1; 0%2=0; 1%2=1; 2%2=0...
Entsprechend rechnen wir den Y-Wert modulo 4, da: -1%4=3; 0%4=0; 1%4=1; 2%4=2; 3%4=3; 4%4=0...
Die Werte können also nicht mehr ausbrechen. Geht bestimmt schicker und ist super ghetto, ist aber gut genug™

Damit ist das ganze im Hintegrund umgesetzt, fehlt also nur noch die Anzeige!

Die X- und Y-Werte die wir da bisher haben eignen sich natürlich nochnichtsogut zum Bilder einblenden, weil sie noch keine praktisch verwertbaren Koordinaten darstellen.
Halb so schlimm, Bilder renderst du einfach an folgenden Koordinaten:

X=Außenabstand des Menüs zum linken Bildschirmrand in Pixeln + X-Wert*(Iconbreite in Pixeln + gewünschter Abstand zwischen den Icons in Pixeln)
Y=Außenabstand des Menüs zum oberen Bildschrimrand in Pixeln + Y-Wert*(Iconhöhe in Pixeln + gewünschter Abstand zwischen den Icons in Pixeln)

Mein Beispiel geht davon aus, dass die Engine die du verwendest den Nullpunkt der Koordinaten in der oberen, linken Ecke setzt und die Position der Bilder ebenfalls anhand ihrer oberen, linken Ecke bestimmt wird. Bei anderen Standards musst du wahrscheinlich ein wenig umschreiben. Außerdem habe ich das Ganze nicht getestet, sollte aber etwa so funktionieren.