Jump to content

CanvasInput - Canvas Text Input library


rich
 Share

Recommended Posts

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 ;) )

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 10 months later...

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 11 months later...

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.

Link to comment
Share on other sites

  • 4 months later...

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);
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...