Better than Text Input?

Post reply
2 favourites
From the Asset Store
Customised Input Template - Gamepad, Keyboard and Mouse Support
$14.95 USD
Total customisation of the input! You can combine inputs from all peripherals. Make your game accessible for everyone!
Biim Games's avatar
Biim Games

  • I skimmed that blog article. It certainly in an in depth list, but most of what we are doing here is just enough to do what we want. We aren't intending to make a comprehensive editbox.

    dop2000

    I like that example. Very console like. I noticed you have the same issue as I got where you can't type a "?". Anyways, the solution I came up with was to add an event listener in js that calls a construct function with "e.key" which is what key was typed taking into account shift and capslock. At least in C2 the keyboard object wasn't enough to get that. 

    document.addEventListener('keydown', (e)=>{c2_callFunction('keyDown',[e.key]);});

    Here are some tests. The first hides the textbox by setting the css opacity to 0, and draws the text with the text object.

    dropbox.com/s/5xygyt0uo5zyz96/hidden_input_form.capx

    Here's another test that uses spritefonts with variable widths. It supports single line text and lets you type with any character in the spritefont. Clicking sets the cursor position and you can remove charters with delete and backspace.

    dropbox.com/s/4vww2hr0an2cdws/spritefont_input.capx

    Taking the idea further to support highlighting, ctrl moving between words, copy/paste, double click selecting words, and multi lines just require a bit more work but seems possible.

    Issues i encountered were the needing to get the keyboard input with js as mentioned above, and find() was case-insensitive, so I had to make a case sensitive one with a function.

    Here's how the spritefont was generated:

    construct.net/en/forum/game-development/tools-and-resources-27/spritefont-generator-168408

  • Thank you all for great inputs. I think the make it transparent technique will be what I go for. But again, thanks to everyone and their thoughts on the matter :)

  • R0J0hound Great examples as always, thanks! I was planning to make one where you can click any position in the spritefont to set the cursor there, but now I don't have to :)

    There is Keyboard.TypedKey expression in C3, which I think works the same way as e.key, just need to filter out some keys like "Shift" or "Tab".

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Nice to know C3 added that expression to the keyboard.

    Looking at my example again it can be simplified a bit by replacing:

    int(tokenat(widths, Function.Call("find",c),","))

    with:

    SpriteFont.CharacterWidth(c)

    I completely missed that. Will update the example shortly.

    Edit:

    example updated.

  • Hi Newtonplays, no idea if this is a good method, but really does the trick for me. I just use CSS stile over the TextImput object on start of layout eliminating border, color, focus, set font size, color, font family, etc. and then just add my custom sprite over all.

    So far works great, I am sure there are better methods, but this one works great for me.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)