CanvasInput - Canvas Text Input library

[rich]

• Closest recreation of a DOM input in canvas to date
• Full CSS-type styling
• Text selection
• Tab between inputs
• Paste in text
• Text place holder support
• Readonly property support
• Auto text scrolling
• Uses an off-DOM canvas for efficiency

 

http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

[austin]

Looks a bit better than the library I wrote a few months ago (https://github.com/claydotio/Canvas-Input) - main improvements in his are a bit more customization with css-like styling. Need support for buttons and password inputs though. Both were fairly easy to implement.

[Chris]

Why don't you just use a real text input on top of your canvas?

[austin]

The reason I did the initial library was for tools like CocoonJS and directcanvas and Ejecta where they improve game performance on mobile by basically getting rid of the DOM. His reasons are different I think - I'm guessing it's just for perceived performance and extra control (eg you could make your input element could grow legs and walk off  )

[Chris]

There are so many problems with this approach that immediately come to my mind...

 

• You would have to test & tweak the implementation for EVERY browser+platform out there. The textbox in the OP-post doesn't work at all on an iOS device (and apperantly when I look at the blog comments, neither on an Android).
• Most CSS features are not usable (or you have to write styling information inside your JavaScript code!).
• You will quickly run into severe focus/blur problems.

I see the benefits for using Canvas mostly for the basic game stuff thats oriented around pixel manipulation or vector drawing, but for everything UI related I would never go away from the DOM and native input elements. We don't even do that for "real" web applications because of all the drawbacks it brings (ask a FE-developer about styling checkboxes).

 

Even AAA game developers are switching over to HTML and DOM interfaces - EA created their own fork of Webkit which comes to use in their desktop games, for example in the latest SimCity where the complete UI is in fact made of HTML and JavaScript.

 

If you want to have accessable input elements - especially on mobile devices - then you should REALLY stick to the native elements available.

[Ezelia]

I also started looking at canvas DOM implementations for the same reasons Austin said ... but I abandonned since I didn't find any mature implementation.

 

CocoonJS and Ejecta aproaches are definitely not the ideal solutions but unfortunately they are the best in performance/simplicity ratio

 

I think the best solution right now would be a library like CocoonJS/Ejecta/DirectCanvas that have it's own native UI easily usable by games.

[austin]

@Chris - I agree. Like I said, for us it was just a matter of getting some sort of input to work with CocoonJS.

 

The reason his doesn't work on mobile is it doesn't pull up the keyboad - their is no API to manually pull up the keyboard. The way I got around that was by using a JavaScript prompt(), which obviously isn't ideal.

[Chris]

The only way to get to the users keyboard is by focusing a text input. And when you need to have a invisible input element anyways, you can even use the real thing.

[austin]

Actually I forgot about that - the solution for iOS was to focus on a hidden input. The fallback if that didn't work was the prompt. But yes, that's a hacky solution, so the DOM is clearly ideal.

[4ucai]

Hi Rich,

 

Can you point me as to how I could get it to work with phaser 1.1.5?

 

The closest I could come to is with this code

 

var bmd = this.game.add.bitmapData(350, 50); var sp = this.game.add.sprite(this.game.world.centerX, 150, bmd);sp.anchor.setTo(0.5, 0);sp.inputEnabled = true;var input = new CanvasInput({ canvas: bmd.canvas,   fontSize: 18, fontFamily: 'Arial', fontColor: '#212121', fontWeight: 'bold', width: 300, padding: 8, borderWidth: 1, borderColor: '#000', borderRadius: 3, boxShadow: '1px 1px 0px #fff', innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)', placeHolder: 'Username', }); 

However, it doesn't fire off the events.

 

[rich]

Sorry I've never used CanvasInput. Does it work if you let it target a canvas that isn't part of phaser? (like one on the dom somewhere else). Perhaps it's expecting to be able to add event listeners to the canvas you give it, in which case a bitmap data will fail because it's not on the DOM, so won't have any events. Just a guess though, not sure how it works internally.

[4ucai]

I've tried adding a <canvas> tag directly on my html and it works as expected. However it gets behind the Phaser canvas when I try to move it, maybe because they're on different canvas. I also did experiment 

Phaser.Canvas.addToDom

and it would work, but didn't get the result I wanted.I was hoping it to be part of Phaser so it would scale itself when needed specially on mobile.

 

I ended up using html input and css to do this though(gets the job done right). 

[ptdnet]

Just as an FYI, this library doesn't appear to work with Phaser any more. I'm using the most basic example they give (just spawn an input) and... nothing.

 

Edit: OK it turns out the input is there, I can type letters in and verify that the value is changing. Just nothing is being rendered.

[j0hnskot]

Just as an FYI, this library doesn't appear to work with Phaser any more. I'm using the most basic example they give (just spawn an input) and... nothing.

 

Edit: OK it turns out the input is there, I can type letters in and verify that the value is changing. Just nothing is being rendered.

 

Works perfectly if you assign the canvas of a bitmapData , and then assign the bitmapData as the texture of a sprite.

Use onInputDown event to focus the CanvasInput object.

 

Example : 

var bmd = game.add.bitmapData(200, 200);var input = new CanvasInput({  canvas: bmd.canvas});game.add.button(10, 10, bmd, function(){input.focus()}, this);

[freedev]

I managed to render an input box using the method j0hnskot suggested, but I can't focus (and therefore write) to the rendered box. The .focus() method doesn't seem to work, or at least the update is not rendered properly.

 

Any ideas?

[freedev]

My previous post won't appear because I'm new and it needs to be approved by a moderator, therefore I cannot edit it.

 

I just discovered that the solution doesn't work if phaser works in WebGL mode (mine was working like that since it was set to AUTO); if you specifically set it to work in canvas mode, it will work.

 

Anyone knows if there is there a way to make it work in both modes?

[jdnichollsc]

My previous post won't appear because I'm new and it needs to be approved by a moderator, therefore I cannot edit it.

 

I just discovered that the solution doesn't work if phaser works in WebGL mode (mine was working like that since it was set to AUTO); if you specifically set it to work in canvas mode, it will work.

 

Anyone knows if there is there a way to make it work in both modes?

 

but does not allow edit the field.. see: http://codepen.io/jdnichollsc/pen/waVMdB?editors=001  

 

Regards

[j0hnskot]

but does not allow edit the field.. see: http://codepen.io/jdnichollsc/pen/waVMdB?editors=001  

 

Regards

I can edit the fields. Take a look at the screenshot: 

 

Do you mean something else?

[jdnichollsc]

Obtaining the focus doesn't work with "onInputDown", with "onInputUp" it works! 

 

Regards