Text input mit einer TextBox (und nicht sichtbarer TextBox)

0
  • 0 favourites

Index

Tagged

Attached Files

The following files have been attached to this tutorial:

.capx

textbox-input.capx

Download now 83.99 KB

Stats

4,984 visits, 6,421 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Noch nicht ganz da

Gut, mit der Tastatur Keyboard kann man was eintipppen. Wir nutzen einen toll aussehenden Sprite font in unserem Spiel, um Text darzustellen. Und wir haben oben die störende TextBox, also sehen wir den Text doppelt. Warum diese TextBox nicht verschwinden lassen - der Spieler soll dieses Objekt nicht sehen können!

Das Problem ist, die TextBox kann nicht unsichtbar gemacht werden und kann auch nicht außerhalb des Fensters im Layout positioniert werden, da wir sonst den Fokus verlieren und somit kein Text eingegeben werden kann. Auch darf die TextBox nicht unter einem anderen Objekt versteckt werden.

Es gibt eine Möglichkeit, dies zu umgehen, und zwar mit Cascading Style Sheets (CSS) der TextBox. Was bedeutet das für uns?

Nun, es bedeutet, dass wir verschiedene Elemente der TextBox durch CSS-Parameter ansprechen können.

Nehmen wir mal die TextBox auseinander und schauen uns diese Elemente an.

Wir werden folgende vier Elementen näher betrachten.

Background (Hintergrundfarbe Weiß in unserem Beispiel):

Border (Rahmen):

Outline:

Text:

Aktion Teil 2

Wir haben die erforderlichen Elemente erkannt und es wird nun zeit, diese entsprechend anzupassen.

Wir fangen mit der Hintergrundfarbe an. Um ein CSS-Stil zu ändern, gibt es eine Aktion Set CSS style für die TextBox.

Standardmäßig wird immer dieses Fenster mit zwei Einstellparameter angezeigt.

Property name - Hier werden Parameter wie border-color, outline-width, etc eingegeben

Value - Wert für den o.g. Parameter

Für den Hintergrund geben wir Folgendes ein:

background-color (Hintergrundfarbe) - dieser Parameter erlaubt uns die Änderung der Hintegrundfarbe

rgba(0,0,0,0) - rgba steht für Red (0-255), Green (0-255), Blue (0-255), Alpha (0-1) und (0,0,0,0) entspricht den Werten in der Reihenfolge der genannten Werte.

Das bedeutet, dass Red = 0, Green = 0, Blue = 0, Alpha = 0 - einen schwarzen, aber transparenten Text darstellt. Die Farbe ist letztendlich egal, da Alpha = 0.

Wir haben die Aktion zu dem Ereignis hinzugefügt. Jetzt machen wir das Gleiche für border (Rahmen)

outline (Umriß)

und text.

Unser Event-Sheet sollte nun so aussehen:

Ausführung Teil 2

Das war's!

Wir haben eine durchsichtige oder unsichtbare TextBox erstellt, damit der Spieler was eingeben kann, aber mit einem farbigen Sprite-Font dargestellt wird.

Und das nur mit ein paar wenigen, nicht so schwierigen Aktionen.

Danke für's Lesen!

.CAPX

textbox-input.capx

Download now 83.99 KB
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!