How to create solid textinput system (line breaks, cursor, etc.) ?

Not favoritedFavorited Favorited 0 favourites
  • 5 posts
From the Asset Store
solution for games like "fruit ninja" and drawing applications
  • Hello everyone, I'm having a problem for some time now, and havent find the solution yet.

    In my game, the player can write notes on his hand (it's a sprite of a hand). I setup something with textinput, making the textinput box invisible with CSS, and the letters appearing on the hand correctly. I'm not using a spriteFont for now (as I'm not sure it would suffice to solve all my issues). However, this method poses a few problems that I'd like to solve :

    1 - No cursor visible : It would be great to have a cursor visible, for the player to know where/when to type. I understand that's doable with sprite font (there's a great tutorial for a blinking cursor)

    2 - New line : Pressing enter should make a new line ; "append" doesnt suffice, as it only creates line break at the end of the whole text block, and not wherever the cursor is.

    3 - No Highlighting Using selecting functions like "select all" (ctrl+a) makes the invisible text (in the invisible input box) be visible through selection. The letters typed on the hand appear selected (highlighted) in the inputbox. Keep in mind I can't set it out of the layout, as the textinput function can't work like that.

    Do you think it'd be possible to create something with those 3 criterias ?

    Thanks a lot for any pointers/advice !

    Here's an example of problem number 3 (check the highlighted text in the top left corner) :

  • The easiest solution would be to just use textInput to display the text and use css to hide the background of the textbox. You can even rotate in 3d with some css to not have it perfectly horizontal.

    Anyways, that would give you all the text editing, highlighting and cursor for free. If at all possible I’d recommend trying to do it this way and forgo the text being curved to the hand.

    If you want to display the text another way, or have it distorted, you’ll be opening up a big can of worms which basically amounts making your own textInput and text renderer from scratch.

  • I don't think it will be too difficult to add some text editing features to the blinking cursor demo, such as:

    • Handling Delete/Backspace/Enter keys
    • Moving the cursor with arrow keys (at least left and right)
    • Changing the cursor position with a mouse click (if it isn't too distorted)

    Text highlighting however is a lot more complex, I wouldn't bother with that.

  • You can use SVG in HTML Elements to made this curved text input.

    Here is an example: Curved_Text_Input.c3p

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Thank you all for your inputs !

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