EZGUI icon indicating copy to clipboard operation
EZGUI copied to clipboard

Scalable UI

Open budda opened this issue 9 years ago • 4 comments

How do I define a GUi that can scale to fill different screen sizes. Probably using percentages and maybe minimum / maximum sizes for some components in the UI ?

Example would be the App demo screen 2 with the item blocks in the List components could become a bigger area on a larger canvas size and leave other buttons the same sizes etc.

What I was looking for is something like the Amiga MagicUser Interface system did - where components weren't fixed to pixel positions.

"Elements are not placed directly to some fixed locations but are instead grouped in special containers which then dynamically control display and positioning" ...taken from http://www.sasg.com/mui/concepts.html

budda avatar Aug 20 '15 00:08 budda

I suppose this may be possible by allowing child components in the JSON to use percentages for their width & height sizes maybe ?

budda avatar Aug 20 '15 00:08 budda

Looks like the current "workaround" is to create the GUI definitions at run time as seen in the app demo phaser.html :-/

budda avatar Aug 20 '15 00:08 budda

unfortunately, relative sizes are still not implemented, they are in my todo list but I'm still looking for the best approach to handle them. since mobile games are the ones which need EZGUI the most, I need a good way to handle both percentages AND devices DPI, without adding complexity layers to the GUI definitions (which are already quite complex)

alaa-eddine avatar Aug 20 '15 10:08 alaa-eddine

well, this is rlly not my area but what if each element (or top lvl element at the least) were constantly listening for an on screen change. That way, the element itself would become responsive instead of having a different layer (presumably, with it's own set of elements). EventEmitter that pixi uses may be useful?

Shadowstep33 avatar Apr 11 '16 00:04 Shadowstep33