0

I've made my game work on a single resolution. Now I want it to scale up&down automatically to fit the display size. When I draw upscaled images to the canvas on a big screen, they'll get slightly blurry but that's ok. I've locked the orientation to landscape. When the aspect ratio of the screen doesn't match that of my game, I want the app to get padding on the left&right or on the top&bottom, so the aspect ratio is preserved. I don't want to design separate layouts for different resolutions.

I could relatively easily do the scaling&padding stuff myself on the canvas (including transforming mouse events), but this seems like a basic issue so I was wondering if there's a better method built-in to XDK.

Stefan Monov
  • 10,601
  • 8
  • 50
  • 98

1 Answers1

0

The XDK does not dictate how you scale DOM objects to fit your device screen. You are working inside what is, effectively, an embedded browser window (aka a webview). That means that you can use the same techniques as you would with a browser window. Imagine that the browser windows is always forced to full-screen (always maximized) but you don't know what size screen you will be running inside, this is your situation with a typical webview.

Some canvas game systems provide pseudo-canvas objects that utilize scaling at the native level when the object view window is opened and populated with your pseudo canvas object. This is not the case with the XDK, we do not "scale" the webview.

See this question for a few useful answers: HTML5 Canvas 100% Width Height of Viewport?

Note: I'm assuming you're using a standard canvas object inside an html file, not the special appMobi "direct canvas" object (aka AGI or Accelerated Graphics Interface).

Community
  • 1
  • 1
xmnboy
  • 2,276
  • 2
  • 11
  • 29