How do I simulate a textbox with spritefonts?

0 favourites
  • 15 posts
From the Asset Store
Forget about default textbox restrictions, you can create sprites atop of the textbox
  • 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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

  • 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

  • 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!

  • 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.

  • 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.

  • 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

    SpriteFont.X+SpriteFont.TextWidth[/code:1n0mqb54]
    
    [img="https://media.giphy.com/media/3oJpybxcv0zq7lgmIg/giphy.gif"]
  • 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.

  • 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!

  • 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.

  • I do not understand what you are trying to explain. Can you try wording it out differently or make an example later? An example capx would probably be more useful.

  • Bump

  • Heh, I lost quite a lot of time at work today trying to wrap my head around a way to do it. It's hacky, it's wonky, but I think I figured it out! (For single line textbox, at least)

    https://dl.dropboxusercontent.com/u/700 ... it_v2.capx

    edit: duh, it seems it selection bit doesn't work correctly on Chrome... oh well!

    edit2: scratch that, event reordering corrected the problem

  • It's great thank you so much I'm gonna use this as a permanent replacement and show a few people it if you don't mind!

  • Go ahead, glad I could help you. It was a fun challenge too.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)