viewport size fixed with portrait dimensions in HTML5

Beta Testing HTML5
#1

Hello. I maintain a game that’s presented in landscape orientation on phones and tablets. No matter what settings I change in the window options set in build.settings, I can’t get the landscape display ratio. I’d like to set defaultMode = "maximized" and maintain a landscape scale. But for whatever reason, changing the defaultViewWidth and Height, changing everything else, it all seems to do nothing to the portrait-ratio mask applied to the “viewport” of the HTML5 app. 

Is there some trick to this I’m missing? “Fullscreen” seems to work fine, but it scales not to the size of the browser window, which would be a fine compromise, but to the maximum resolution of the desktop, which isn’t useful.

Does this make sense?

I’m doing the build with 2018.3349.

#2

Also try to play with width & height properties from config.lua

#3

This doesn’t effect the viewport, only scaling within the viewport.

#4

Any other recommendation? Like I said, config.lua doesn’t change the viewport, only the scaling of what’s displayed within the viewport.

#5

for example, canvas in an app with this build.settings will be 100x1000 px


settings =

{

orientation =

{

default = "portrait",

supported = { "portrait"

},

window =

{

titleText =

{

default = "Bullet",

},

defaultViewWidth = 100,

defaultViewHeight = 1000,

},

}

defaultViewWidth and defaultViewHeight from build.settings are used to set canvas size.

if defaultMode = “maximized” then the following formula will be applied

scaleX = window.width / defaultViewWidth ;

scaleY = window.height / defaultViewHeight;

scale = min(scaleX, scaleY); // keep ratio

canvas.width = defaultViewWidth * scale;

canvas.height = defaultViewHeight * scale;

#6

My canvas is fine. See attached. This is with the latest daily build.

https://imgur.com/a/A3ZkTQz

Landscape on hardware, landscape on phone, but portrait in the HTML5 build. 

build.settings:

window = { defaultMode = "maximized", resizable = false, -- minViewWidth = 480, -- minViewHeight = 320, defaultViewWidth = 960, defaultViewHeight = 640, titleText = { default = "iSpellBetter" } }

config.lua:

application = { content = { fps = 60, width = 320, height = 480,

And before anyone points out that the width and height in config.lua are portrait I’d advise you to try changing just those and see what happens. (It just increases your canvas size and does not change either the orientation, viewport, or anything else, and should stay portrait orientation according to the documentation.)

So is this a bug? Or am I missing something? It seems to be rendering the entire canvas but the HTML5 output is just slapping black bars on top of either side.

#7

Can you post your entire build.settings, please?

#8 
settings = { splashScreen = { enable = true, image = "Default@2x.png" }, -- for HTML5/Desktop stuff window = { defaultMode = "maximized", resizable = false, -- minViewWidth = 480, -- minViewHeight = 320, defaultViewWidth = 960, defaultViewHeight = 640, titleText = { default = "iSpellBetter" } }, plugins = { }, orientation = { default = "landscape", supported = { "landscapeLeft", "landscapeRight" } }, android = { googlePlayGamesAppId = "XXXXXXXX", --insert your app id number for google game services usesPermissions = { -- "com.android.vending.BILLING", --remove this line if you don't use iAP -- "android.permission.INTERNET", -- "android.permission.ACCESS\_NETWORK\_STATE", --[[remove this line if you use admob and not chartboost "android.permission.READ\_PHONE\_STATE"]]--remove this line if you use admob and not chartboost }, }, iphone = { xcassets = "Images.xcassets", plist = { NSAppTransportSecurity = { NSAllowsArbitraryLoads = true, }, UIBackgroundModes = {"remote-notification"}, ITSAppUsesNonExemptEncryption = "NO", UIApplicationExitsOnSuspend = false, -- must be false for single sign-on to work FacebookAppID = "xxxxxxxxx", -- replace XXXXXXXXX with your facebook appId CFBundleURLTypes = { { CFBundleURLSchemes = { "fbxxxxxxx", -- replace XXXXXXXXX with your facebook appId, make sure that you leave fb in front of it } } } } } }
#9

I think this might be the cause:

 orientation = { default = "landscape", supported = { "landscapeLeft", "landscapeRight" } },

Try changing the default value to a valid value, either “landscapeLeft” or “landscapeRight”. I don’t believe we support a generic “landscape” option.

Rob

#10

That worked perfectly. I guess we inherited that! Thank you!

#11

Also try to play with width & height properties from config.lua

#12

This doesn’t effect the viewport, only scaling within the viewport.

#13

Any other recommendation? Like I said, config.lua doesn’t change the viewport, only the scaling of what’s displayed within the viewport.

#14

for example, canvas in an app with this build.settings will be 100x1000 px


settings =

{

orientation =

{

default = "portrait",

supported = { "portrait"

},

window =

{

titleText =

{

default = "Bullet",

},

defaultViewWidth = 100,

defaultViewHeight = 1000,

},

}

defaultViewWidth and defaultViewHeight from build.settings are used to set canvas size.

if defaultMode = “maximized” then the following formula will be applied

scaleX = window.width / defaultViewWidth ;

scaleY = window.height / defaultViewHeight;

scale = min(scaleX, scaleY); // keep ratio

canvas.width = defaultViewWidth * scale;

canvas.height = defaultViewHeight * scale;

#15

My canvas is fine. See attached. This is with the latest daily build.

https://imgur.com/a/A3ZkTQz

Landscape on hardware, landscape on phone, but portrait in the HTML5 build. 

build.settings:

window = { defaultMode = "maximized", resizable = false, -- minViewWidth = 480, -- minViewHeight = 320, defaultViewWidth = 960, defaultViewHeight = 640, titleText = { default = "iSpellBetter" } }

config.lua:

application = { content = { fps = 60, width = 320, height = 480,

And before anyone points out that the width and height in config.lua are portrait I’d advise you to try changing just those and see what happens. (It just increases your canvas size and does not change either the orientation, viewport, or anything else, and should stay portrait orientation according to the documentation.)

So is this a bug? Or am I missing something? It seems to be rendering the entire canvas but the HTML5 output is just slapping black bars on top of either side.

#16

Can you post your entire build.settings, please?

#17 
settings = { splashScreen = { enable = true, image = "Default@2x.png" }, -- for HTML5/Desktop stuff window = { defaultMode = "maximized", resizable = false, -- minViewWidth = 480, -- minViewHeight = 320, defaultViewWidth = 960, defaultViewHeight = 640, titleText = { default = "iSpellBetter" } }, plugins = { }, orientation = { default = "landscape", supported = { "landscapeLeft", "landscapeRight" } }, android = { googlePlayGamesAppId = "XXXXXXXX", --insert your app id number for google game services usesPermissions = { -- "com.android.vending.BILLING", --remove this line if you don't use iAP -- "android.permission.INTERNET", -- "android.permission.ACCESS\_NETWORK\_STATE", --[[remove this line if you use admob and not chartboost "android.permission.READ\_PHONE\_STATE"]]--remove this line if you use admob and not chartboost }, }, iphone = { xcassets = "Images.xcassets", plist = { NSAppTransportSecurity = { NSAllowsArbitraryLoads = true, }, UIBackgroundModes = {"remote-notification"}, ITSAppUsesNonExemptEncryption = "NO", UIApplicationExitsOnSuspend = false, -- must be false for single sign-on to work FacebookAppID = "xxxxxxxxx", -- replace XXXXXXXXX with your facebook appId CFBundleURLTypes = { { CFBundleURLSchemes = { "fbxxxxxxx", -- replace XXXXXXXXX with your facebook appId, make sure that you leave fb in front of it } } } } } }
#18

I think this might be the cause:

 orientation = { default = "landscape", supported = { "landscapeLeft", "landscapeRight" } },

Try changing the default value to a valid value, either “landscapeLeft” or “landscapeRight”. I don’t believe we support a generic “landscape” option.

Rob

#19

That worked perfectly. I guess we inherited that! Thank you!