Jump to content

User interface pixi vs dom


Recommended Posts

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! :)

Link to post
Share on other sites

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:

 

eeSrkSQ.png

 

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

Link to post
Share on other sites

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?

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...