Forums » Impact Engine » html5 mobile development + native textbox input

Hi guys,

I'm writing a html5/js/canvas game and am considering to use technologies that provide harware acceleration and support audio (ie cocoonjs, ejecta and appmobi) for mobile devices.

My concern however is that my game needs textbox support (login, registration, chat etc). It seems these technologies don't support the stardard dom elements (ie input tag) and require you to do everything in the canvas (including gui forms and controls).

I'd be happy to do all the form and layout work in the canvas, however I believe having native textbox support is important - even for PCs (it'd be silly having a canvas rendered keypad for PC browsers).

Does anyone have any suggestions on how I can go forward? How does everyone else handle their GUI using these technologies?

Is it possible to layout everying on canvas but use native texboxes using these technologies? btw, cocoonjs has a non native/canvas based textbox in the demos but it feels very messy.

Or should I got with DOM forms (divs, input css etc) that sit ontop of the canvas? cocoonjs supports a webview on top of the canvas. What about the other technologies?

Should I use DOM for PC and canvas forms/gui/keypad for devices? I'd prefer to however avoid writing 2 implementations for my forms and layouts

btw I understand the difference between designing guis in the DOM or the canvas. My confusions lies with how i can create an app which works for native technologies (eg cocoonjs, ejecta, appmobi) which don't support DOM but also deliver a native textbox...

Thanks heaps.

What did you do in the end?

Hello, I make my GUI elements using html with css with absolute positioning and a higher z-index to put the element where I want it to be. If you give each element and id="xxx" you can update it real time.

For example you want a health box.

<div id="healthControl"></div>

In your function that updates health, simply add:

$("#healthControl").text(player.health);

Where health is your remaining health variable. Hope this helps.