Best publish settings for a Game/Presentation.

[dc257]

Hi, I'm struggling with choosing which publish settings are best to use for an HTML5 game made in  Animate. My games and presentations are 1920x1080px dimensions and will mainly be played on either an interactive whiteboard in a classroom (via laptop) or on a tablet device.

At present, I've selected the following:

Center Stage > Both

Make Responsive > Both

Scale to fill visible area > Fit in view

These settings look great on a laptop, but on a tablet it often involves turning the device several times to get it to show the whole page as the top is often cut off by the address bar. I've included a fullscreen button to get around this but was wondering if there is a more elegant/better way.

What settings/sizes do you use to get your HTML5 projects to display nicely across all devices? I have seen some sites use a 'please rotate your device' message if you try and view the page in portrait mode - is this worth doing? Or is there something else inside the publish settings? Any advice appreciated as there seems to be a lot of conflicting information on this area! Thanks.

[Nicktendo28]

 there's a great question. The most common I have come a crossed is  1080 x 2340 resolution. but quote me on this.

[ClayUUID]

If by "nicely" you mean "perfectly fill the screen", that's literally impossible with any fixed-resolution solution, due to the wide variety of aspect ratios across all desktop and portable devices.

It is possible to perfectly fill the screen on all devices, but only by going with a responsive approach that dynamically positions all UI to the available resolution. However, Animate has no native support for this (What it calls "Responsive" in the publish settings is a straight up lie. It's just scaling.), so you'd have to code it all manually.

[dc257]

Thanks Clay, I think that's where I'm confusing myself (just relying on Animate's 'responsive' settings alone). I think will need to look into a solution that checks what device/resolution the user has and serving up a game that is scaled accordingly. I fear this may involve publishing several versions of the game though at different sizes, which is a road I don't really want to go down if I can help it.

[dc257]

Thinking about this further, and perhaps 1920x1080 is just too wide? Whilst it looks really great on laptops/tvs, it's not so neat on a tablet. I wondered whether publishing a narrower canvas and then adding a scaleable CSS background behind it that compliments the game would be a workaround? Obviously, this reduces the 'useable area' of the game as the CSS background would be merely decorative but that wouldn't be a huge issue. Any thoughts or ideas on this would be great. Are there any industry standard sizes used for browser-based games for example? Thanks! (sorry... I understand, this might be going a bit beyond the scope of Animate and into markup and Javascript etc!).

I think Adobe Animate has absolutely huge potential for making browser-based games, e-learning activities and interactive infographics etc, so I really want to persevere with it and get it looking right!