What do you use to handle input texts in a canvas?

[totallybueno]

Hi there guys,

usually I make my games using Phaser and on top of that I have an html layer with a form to save the leaderboards. That´s pretty easy to use and as I use always the same, super fast

 

Anyway, now that I´m targeting mobile games, I´m using cocoon.io and everything is fine when I don´t need too much CPU power, then I have to use cocoon´s Canvas+ and then I´m not allowed to use my loved html form, so my question is this one, how do you handle input text in a canvas? I would like to do it properly to be able to use Canvas+ in some cases but I tried a couple of things and I´m not really happy with them... do you guys have some experience/tip/advice about this?

 

Thanks.

[chrisError]

do everything you can to avoid doing it, really. I have lost weeks of my life to trying to get a good solution working on mobile, and there was always something that caused every idea I tried to fail. If I had to have text input, I would leave the canvas entirely and go to a properly constructed HTML page and then afterwards return to the canvas page.

[mattstyles]

yeah, re-writing an input element is a proper ballache.

 

how about old school text entry? like the 'alphabet on a wheel' that you flick left and right to find the characters you need? that'd be perfect for a high score entry (its only super annoying for long texts) and, depending on your games, could be more in-keeping with your look and feel than a DOM form.

 

Implementing your own keyboard is always an idea, its fairly straight forward, if annoying, but, done once and turned into a module for reuse then you can probably justify the annoyance.

[KyleNau]

I agree with mattstyles - create your own name input screen. The funny thing is that if you come up with a cool way to present it (flaming letters in a circle or something), users will think it's a feature and not a hack you did as a workaround.

[BobF]

Would Cordova be a better choice than Cocoon? Cordova would give you both the DOM and WebGL canvas, although WebGL enabled WebViews are only available on the latest mobile OS versions.

[Rudrabhoj Bhati]

Theoritically it isn't very difficult. Create a text input object with 3 fields- inputbox, keyboard and string. inputbox would be a sprite, for inputbox gadget. keyboard would be group of button sprites making keyboard. You should make buttons objects beforehand. Now when there is an input on inputbox gadget, display keyboard. And using keyboard manipulate data in string variable. Print latest data on string varibale over the inputbox. Remove keyboard sprite when user touch/click outside keyboard.

If you still find it confusing then today evening after getting back from work I'll try to implement it in phaser to help....

[totallybueno]

Thanks guys for the answers, actually I was thinking about the oldschool option, that´s the option I like the most for my games.

 

About creating a custom keyboard... mmmmm, nope, at least not now, I´m pretty sure is gonna be more complicated that it seems (diferent characters depending on the languaje, diferent keyboard layouts blah blah blah...), so by now, old school time

 

BobF, with cocoon you have Cordova (cocoon is Cordova based) so you have access to DOM and WebGL, the problem is when you have a CPU intensive game, then, you have to avoid DOM elements (and use canvas+ here) to make the game faster, so no DOM elements (I´m using this approach when I can, but it´s not always).