Chat mit Unity UI

[MarcoMeter]

Hallo zusammen,

 

ich bin dabei einen Prototypen für einen Chat zu bauen. Die Netzwerkseite ist absolut nebensächlich, weil das für mich kein Problem darstellt.

Mein Problem liegt dabei, dass ich nach dem intuitivsten Weg suche, um das Chat mit dem Unity UI zu bauen. Mein Aufbau sieht bisher wie folgt auf:

 

 

Das GameObject ScrollView verfügt über die Scroll Rect Component, sowie einer Image Component und einer Mask Component. Beim Scroll Rect übergibt man das Rect Transform, welches scrollbar sein soll. Dabei ist zu beachten, dass das Rect Transform in diesem Fall von ChatText, größer als das Rect Transform von ScrollView ist. Zusätzlich ist noch eine Scrollbar beim Scroll Rect des ScrollView GameObjects referenziert.

 

Nun habe ich folgendes Problem:

 

Den Text der Text Component von ChatText wird zentriert. Genauso breitet sich das RectTransform vom Zentrum aus aus. Ich möchte wie bei einem typischen GameChat (z.B. Dota, Warcraft3, CouterStrike) ganz unten anfangen und dann die Nachrichten nach oben schieben lassen.

 

Ich könnte das Ganze umgehen, wenn ich die Position von ChatText immer wieder per Script anpasse, aber das möchte ich nicht. Ich suche einen Weg, wie ich das Rect Transform nur in die positive Richtung wachsen lassen kann.

 

 

Nebenbei bemerkt hat ChatText noch eine Content Size Fitter Component, die dafür sorgt, dass das Rect Transform immer passend groß ist für den Text.

 

Hat jemand eine Lösung oder einen Tipp parat?

 

 

Am Ende kann ich mir auch vorstellen daraus ein Tutorial mit Netzwerkfunktionalität zu machen.

[MarcoMeter]

nix

[TS42]

Nicht so schnell das Handtuch werfen. Ich denke mal die wenigsten schauen hier mehrmals am Tag rein. Und ich hatte gestern einen guten Lauf, daher war ich quasi gar nicht hier

 

Ich weiß leider nicht was nGUI drauf hat, aber ich habe ein paar Ideen:

 

*Text-Anzeige = Objekt mit Text welches zur Laufzeit größer wird, weil Nachrichten

 

Die schöne Option:

- deine Text-Anzeige per Anchor an die Unterseite des ScrollViews hängen (sofern nGUI sowas kann)

 

Die schnelle Option:

- deinen Text mit leeren Zeilen füllen, damit die Text-Anzeige sich beim Start schon über das ScrollView ausgebreitet hat

- alternativ ein leeres Element über das Text-Anzeige Element im ScrollView einfügen

 

Die mathematische Option:

- Ausrechnen/abfragen der aktuellen Größe der Text-Anzeige und im ScrollView nach unten positionieren, so lange das Text-Anzeige.height < ScrollView.height ist

- oder einfach kein ScrollView anzeigen so lange Text-Anzeige.height < ScrollView.height

 

Die "c" Option:

- Dein Text ist ein Array aus den empfangenen Nachrichten (bitte nehme eine dynamische Liste, Array als Gag wegen "c"). Du zeigst in deiner Text-Anzeige als Beispiel 10 Zeilen (z10) an, dann merkst du dir ein Index auf dein Text-Array und schreibst von Text-Array.Index bis Index + z10 die Einträge in die Text-Anzeige (Achtung: StackOverflow). Die Größe des Laufbalkens des ScrollView wird per Array.size - z10 gesetzt und der ScrollView.Scrollbar.Index bewegt dein Text-Array-Index. Wird der Index bewegt, zeichnest du deine Text-Anzeige mit dem Aktuellen Index+z10 Textdaten neu

 

Hilft dir davon etwas? Man kann das natürlich auch kombinieren

 

Denk dran bei dem Array-Beispiel das Array nicht zu überschreiben Benutze am besten niemals Arrays

[MarcoMeter]

Nicht so schnell das Handtuch werfen. Ich denke mal die wenigsten schauen hier mehrmals am Tag rein. Und ich hatte gestern einen guten Lauf, daher war ich quasi gar nicht hier

 

Das war ein versehentlicher Doppelpost Komischerweise wurde auf das Thema geantwortet, obwohl ich auf ein anderes antworten wollte. Zum anderen Teil editiere ich gleich diesen Beitrag noch.

[TS42]

Ach das Problem hatte ich auch schon mal. Da habe ich einen Thread im Smalltalk Forum öffnen wollen, war parallel noch im allgemeinen Forum am surfen und dann wurde der Beitrag dort reingehängt. Denke mal die Forensoftware hat nur ein SessionData und erkennnt unterschiedliche Tabs nicht.

[MarcoMeter]

uGUI bezeichnet glaube ich doch die alte UI von Unity. Von nGUI ist gar nicht die Rede.

 

Jedenfalls geht's um das UI von 4.6, wie man auf dem Screnshot sieht.

 

 

Den Anchor unten anzuhefenten bringt leider nichts. Das größte Problem ist, dass das RectTransform zu gleichen Teilen sich in beide Y-Richtungen vergrößert. Man kann natürlich per Script durch eine äquivalente Positionsanpassung das ab ändern, aber genau das versuche ich noch zu vermeiden.

 

 

edit: Einen kleinen Fortschritt bringt es, wenn ich ChatText nochmal an ein GameObject nur mit einem Rectransform als Child verwende. Das RectTransform skaliere ich so groß, bis es das ScrollRect füllt. Sobald das RectTransform von ChatText zu groß ist, soll die Content Fitter Component das RectTransform von dem Parent anpassen.

 

 

Allerdings habe ich immer noch die Problematik, dass die automatische Vergrößerung des RectTransforms des Textes in beide Richtungen auf der Y-Achse sich ausbreitet. Ich möchte, dass es sich nur nach oben hin vergrößert.

[TS42]

Ach uGUI, hab mich verlesen, sry. Ich habe mich in Unity noch nicht viel mit GUIs beschäftigt, außer das alte(?) Editor uGUI(?). Kein Plan. In den nächsten 2-3 Wochen muss ich da ran.

 

Hast du schon versucht den ChatText am Start mit leeren Zeilen zu füllen?

Wenn sich der ChatText verändert (neue Nachricht), dann musst du vielleicht noch die ScrollBar nach unten schieben.

[MarcoMeter]

Leere Zeilen am Anfang bringt nur für den Anfang eine gewisse Lösung. Je mehr Zeilen hinzu kommen, werden ab beispielsweise 7 Zeilen schon die aktuellsten Zeilen nicht mehr sichtbar, weil diese zu weit nach unten gerutscht sind und man runter scrollen müsste. Das würde nicht passieren, wenn das ScrollRect sich nur nach oben ausbreiten würde. Man könnte den Scrollbalken beim Erhalten einer Nachricht wieder nach unten setzen, was aber stören würde, wenn der Benutzer im früheren Verlauf liest.

 

Ich stelle später die Szene zur Verfügung.

[TS42]

Wenn der Benutzer die ScrollBar bewegt hat, machst du die AutoScroll Funktion aus, schiebt er die Bar wieder nach unten, machst die Funktion wieder an. Oder eine Checkbox in den Titel zum AutoScroll aktivieren... ist auch nichts ungewöhnliches.

 

Ist alles unschön, ich weiß. Das muss mit ordentlichen Befestigungen gehen (Anchor). Oder gibt es noch Einstellungen für die ScrollView...?

[MarcoMeter]

Ich habe mal einen Screenshot der ScrollView angehangen. Es gibt für diesen Fall keine passenden Attribute/Funktionen vom ScrollRect.

 

https://www.dropbox....llRect.png?dl=0

 

Ziel für mich ist es, dass es so schön wie möglich wird. Wenn es so im Editor nicht zu erreichen ist, dann werde ich das coden.

 

edit: ANhänge funktionieren gerade bei mir hier nicht.

 

 

edit:

 

Ich habe jetzt auch noch das Package mit der ChatPrototyping Szene in meiner Dropbox freigegeben:

https://www.dropbox.com/s/e21u8adf8s4cpri/ChatScene.unitypackage?dl=0

 

Kleine Anmerkung, ich habe die Anchros noch nicht vernünftig platziert. Daher sieht alles nur ok bei 16:9 aus.

[MarcoMeter]

Das ist die Lösung:

 

void Start ()
{
	RectTransform rectTransform = GetComponent<RectTransform>();
	rectTransform.pivot = new Vector2(transform.pivot.x, 0);
}

 

Der Pivot vom ChatText GameObject wird einfach auf 0 gesetzt.

 

edit: Den Pivot kann man auch im Inspector setzen. Ich frag mich, warum ich denvorher nie gesehen habe..

[MarcoMeter]

Hier mal ein Video von meiner Lobby:

https://drive.google...TdXM&authuser=0

 

Das einzigste, was noch störrt ist, dass das InputField für die Eingabe nicht aktiv bleibt, nachdem eine Nachricht geschickt wurde.

 

Mit dem EventSystem, wo man das zu selektierende Objekt setzen kann, funktioniert nicht. Scheinbar gibt's bei dem neuen UI noch keine geeignete Lösung für das Problem.

[MentisMora]

Mal eine Frage falls ich es richtig verstehe. Also du hast im InputField womit der User seine Nachricht eingibt irgendwas gemacht was dazu führt das es nach der Eingabe nicht aktiv bleibt. Aber wenn ich das richtig sehe musst du doch nur folgendes machen (habe es mal gezeichnet mit Paint:

 

 

Wenn du das so machst habe ich auf jedenfall kein InputField was sich danach deaktiviert. Dabei muss ich sagen ich weiß ja auch nicht in welchem Weg du es programmierst und wie du die UI behandelst. Kommen wir also nach langen reden zu meiner Frage ^^ Wo ist das Problem genau ?

[MarcoMeter]

Das Reselektieren funktioniert nicht.

 

Nach der EndEdit Funktionalität vom InputField das EventSystem das InputField wieder selektieren. Das kann man alles auch schon über's Script machen, es geht noch nicht. Dabei hanelt es sich um SetSelectedGameobject vom EventSystem.

 

Ich weiß jetzt nicht mehr welche Exception in manch einem Fall auftrat, aber es ist eben bekannt das Problem. Siehe dieses Thema im UnityForum

[MentisMora]

Aso ok entschuldigung dann habe ich es falsch verstanden. Aber kann man nicht einfach eine Sicherung in Form eine If schreiben ? Ich meine so genau habe ich mich noch nicht eingearbeitet aber....

 

wenn du mit der If schaust ob der Select aktiv ist dann solltest du doch wenn er es nicht ist (else) diese provisorisch einfach wieder aufrufen können oder wieder aktivieren können ? Oder sehe ich das falsch ?

 

Wie gesagt ich habe mich zwar schon on UGUI eingearbeitet aber noch nicht sehr viel. Ist nur eine grundlegende Idee wie ich zum Beispiel auch in meinem RTS absicher das dass Gebäude nun auch wirklich auf der Maus liegt wenn der Spieler den Button drückt.

 

Liebe Grüße

[MarcoMeter]

Ich bin mir nichtmals sicher, ob beim InputField selected auch bedeutet, dass die Eingabe aktiv ist. Ich muss damit noch ein paar Tests machen.

 

Im Moment muss ich mich um die netzwerkliche Restrukturierung meines Spiels kümmern. Der erste Schritt ist mit der Lobby getan, auch wenn das InputField den Fokus verliert.