How do I simulate a textbox with spritefonts?

Get help using Construct 2

Post » Wed Feb 24, 2016 7:38 am

Is there a way to simulate the functions of a textbox with spritefonts? My game would look much nicer with my font on the login page.

If there is please provide an explanation how to or a capx example, preferably both.
Last edited by zenox98 on Wed Feb 24, 2016 8:21 am, edited 1 time in total.
Reason: No need for another post, just use the pencil icon to edit.
B
27
S
12
G
5
Posts: 79
Reputation: 5,223

Post » Wed Feb 24, 2016 8:46 am

I'm interested in this as well. I explored this briefly a long time without much success, trying to use an invisible textbox and having the spritefont update every tick to whatever was in the textbox, but I don't recall that working.

I had thought of another idea where when you click the spritefont, it would enable a group of controls where every keyboard key trigger would append itself to the spritefont text when pressed, but that seemed so clunky and inefficient I never actually tried it.
Mistakes were made.
B
53
S
27
G
114
Posts: 1,699
Reputation: 64,446

Post » Wed Feb 24, 2016 5:39 pm

@oosyrag Both of these method should work, but the first one is indeed the best. It should also work on mobile whereas the alternative could prove troublesome to get it work on these platforms.

I think you have to be careful as to how you make the "TextBox" invisible as I believe some methods will make it impossible for it to receive focus and inputs. I tried setting its CSS position to absolute and placing it off-screen. Seems to work pretty well.

https://dl.dropboxusercontent.com/u/700 ... tEdit.capx
B
75
S
31
G
27
Posts: 1,000
Reputation: 20,735

Post » Wed Feb 24, 2016 5:57 pm

Cool thanks I'll give it another shot. I recall now focusing on it to type was indeed the problem. I don't think I tried having it off screen instead of invisible. Thanks!
Mistakes were made.
B
53
S
27
G
114
Posts: 1,699
Reputation: 64,446

Post » Wed Feb 24, 2016 7:40 pm

I'l try what you guys said, so far its working out but the one thing missing is the flashing line that I believe is called an "insertion point". Is there a way to simulate said insertion point as well? If possible this would be a very nice looking imitation of the textbox.
B
27
S
12
G
5
Posts: 79
Reputation: 5,223

Post » Wed Feb 24, 2016 7:50 pm

This is a lot more complex to emulate the insertion point and the positioning of it. I really don't think it's possible to do it in fact... given the current functionnalities of the SpriteFont object. We'd need to be able to map a position on the SpriteFont to a character index of the source string.
B
75
S
31
G
27
Posts: 1,000
Reputation: 20,735

Post » Wed Feb 24, 2016 8:29 pm

MorrisFeldman wrote:My game would look much nicer with my font on the login page.
.


if you use just one row text,you can set "insertion point sprite" to
Code: Select all
SpriteFont.X+SpriteFont.TextWidth


Image
B
67
S
24
G
7
Posts: 1,518
Reputation: 11,072

Post » Wed Feb 24, 2016 8:57 pm

It's an incomplete solution but it's pretty good nonetheless. It doesn't allow text selection or movement of the insertion point, but for a login form, it's more than enough indeed.
B
75
S
31
G
27
Posts: 1,000
Reputation: 20,735

Post » Wed Feb 24, 2016 10:22 pm

Yes that is very helpful. Any ideas for selection of text and insertion point movement? I can do that stuff on my own since you guys helped me enough and it doesn't look too hard but help/info would be greatly appreciated.

Just those two thing needed then we will have our very own custom textbox! Much nicer looking than the original!
B
27
S
12
G
5
Posts: 79
Reputation: 5,223

Post » Wed Feb 24, 2016 10:40 pm

If it comes down to that, you can, but it will get quite a bit more complicated.

You'll be using regex to break apart the contents of the existing text. Because sprite fonts should have a fixed width, you should be able to find out how many characters are before and after your insertion point. With that, you'll be able to use regex replace to insert characters in the middle.

Positioning the insertion point should be relatively simple, for example if you were using arrow keys it would just move left and right one character width per button press.

I don't have time to put it together myself right now, but I can imagine how it might work.
Mistakes were made.
B
53
S
27
G
114
Posts: 1,699
Reputation: 64,446

Next

Return to How do I....?

Who is online

Users browsing this forum: Google [Bot] and 19 guests