User interface pixi vs dom

[krzysztof-o]

Hello,

I started working on a game using pixi.js and I'm currently thinking about possible solutions for the user interface.

My first approach was to do complete user interface (such as HUD) in pixi.js, but I stumble upon some problems with text: differences of appearance in different browsers (in firefox it looks more sharp then in chrome, also text size measurements seem to be a lit different ) which makes it hard to do pixel-perfect interface. I guess switching to bitmap fonts would solve this but we're going to support Chinese which from my experience requires huge font atlas bitmap (I don't say no but it's a con).

Another approach would be to use DOM for that, but I'm concerned about performance on mobile devices when we use some images with transparency on top of canvas. Or maybe I shouldn't worry about that? Also combining both DOM and canvas doesn't "feel" good for me.

 

Maybe you can share your experience on how to handle this kind of problems.

Thanks in advance!

[thebigpumpkin]

I use regular Dom elements overlayed upon canvas elements with absolute positioning frequently with no side effects. I still get an average of 58fps in Chrome.

[hubert]

I use Pixi drawn elements for hud and get 60fps.

 

The thing is that at some point of your development you'll want to wrap the application into some kind of binding software for mobile apps.

 

Like EJECTA!

 

And Ejecta does not support DOM elements or CSS.

 

This might be quite hard in the beginning but it is worth the effort.

Additionally scaling is not really a problem since you can use pixi sprite.scale property.

 

This is an example that I use as a mockup for a game that I,m working on:

 

 

Your problem will be how to simulate an input with canvas. I know that there have been some plugins to create input for canvas but none of them have been ported to pixi as far as i know! Still 

 

in order to use Ejecta or other wrapper you can't have DOM and CSS in your game!

 

http://www.sevenative.com

[d13]

Your problem will be how to simulate an input with canvas. I know that there have been some plugins to create input for canvas but none of them have been ported to pixi as far as i know! 

That's an interesting problem!

Can anyone suggestion how to starting thinking about building a text input field for canvas?

[hubert]

This is the link to the library that I was talking about.

 

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

 

But it is not directly ported to PIXI.js so there would be some work involved on the way!

 

http://www.sevenative.com

[d13]

 

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

 

 

From that link:

"So, over the weekend, I decided to attempt the recreation of the DOM input tag in full. It turned out to be dramatically more complicated than I ever imagined..."