We help IT Professionals succeed at work.

What is the correct strategy for coding the GUI of phone/tablet/browser games?

Hi
Probably an obvious question, but considering the differences between phones and tablets for javascript games..

... Is the proper way to do browser + device games' object locations in fractions of device height and width? And size game objects as ratios also? What must I do concerning strategies for phone/tablet+browser? AND device rotation accommodations?
How does Javascript detect phone / tablet/ browser?

I don't have a tablet. Which is the best to get for game dev? many ... iPad, Surface . . . not necessary, any?
Let's consider a word game like Wordscapes. The main interface is the circular  object to select letters for a word-answer. Is that just 1/4 of width distance from border and x% width for the circle diameter?
How different is it, really, on phone/tablet? What is the proper solution for all this?

Thanks
Comment
Watch Question

Distinguished Expert 2019

Commented:
you query the viewport size https://ryanve.com/lab/dimensions/
James HancockSelf Employed

Author

Commented:
Can this be used to determine the environment type? browser / phone / tablet? Specific device? Could I compare the width and height values to known device measurements, or is there a better way? What if it is a new device, with new dimensions I don't have waiting to compare to?

DO you think I should ground my object placement in pixels or fractions of the width/height?

Thanks
Distinguished Expert 2019

Commented:
just scale your output for the viewport.  google responsive web app
you could use the useragent supplied by the browser (can be spoofed)
James HancockSelf Employed

Author

Commented:
Do you mean window. width,. . height, etc? and locate game objects based on fractions of width and height?

What help would a Goog responsive web app provide?

Thanks
IT Manager
Distinguished Expert 2019
Commented:
Do you mean window. width,. . height, etc? and locate game objects based on fractions of width and height?

Not only about windows..width..height...

Responsive game design can be summed up in the following key requirements:

  1. Game graphics and UI support multiple resolutions
  2. Game mechanics work across multiple types of input
  3. Publish to multiple platforms with the same codebase
  4. Saved data is synced across all platforms

https://developer.amazon.com/blogs/appstore/post/Tx21NJD7LRR0UEB/responsive-game-design-making-games-that-scale-across-desktop-mobile-and-tv

What help would a Goog responsive web app provide?
Have a look at the link above.

In short, what you want to execute is a broad topic which can be covered in a full-time study for a year.
James HancockSelf Employed

Author

Commented:
Thanks all
James HancockSelf Employed

Author

Commented:
Thanks