@BunBunBun Thank you for the information. Of course I made a simple change for myself, but I would like to have a proven solution under all browsers.
When it comes to gamedistribution, for example, I have not found such an option in their system so far.
Guys, sorry but I still have this question.
Changing orientation works cool, I modified myself JS script in index.html. But, if the proportions and sizes of the different layouts differ, about changing the orientation the GUI displays correctly, but all other elements stay in the proportions of the previous layout. I understand that the whole collection should be re-rendered, but I donât know how to do it.
You can detect orientation changes using window.set_listener(). When you get a window size change and detect orientation change you need to manually update your game objects to work with a different orientation. The render script itself will obviously render using the new dimensions/orientation but you are in charge of moving the game objects. It is only the gui which will automatically adapt to a new layout.
1 Like
I am just now trying to do this. All elements display correctly according to the new dimensions.
But I still donât understand why, for example, the background doesnât automatically take the default size from the layout ?
I understand that I need to have somewhere saved what size the background should be for each layout and after detecting the change manually set the appropriate sizes. Am I right ?
Is the background a game object with a sprite? Or a gui box node? If it is a gui box node you need to set the adjust mode of the node to always stretch across the screen.
If it is a game object with a sprite you need to make sure you are using graphics that work in both portrait and landscape mode or that you change it depending on orientation.
Also keep in mind that the render script can be configured to zoom in/out your content to always cover the window.
1 Like
You know what, either I donât understand something or Iâm doing something wrong, because:
- I have two layouts:
a) 960 x 540 Portrait
b) 800 x 600 Landscape
Each layout has a different background (object sprite)
I have saved X and Y half-coordinates for each element for both Portrait and Landscape
-
If I set in game.project - display 960 x 540
I execute the compilation, everything is OK. The same when I set the display
for 800 x 600. -
However, if I set 960 x 540 and do the compilation and then resize the window to
get Landscape orientation, the layout changes, the GUI looks correct, while the background and other elements appear in the correct orientation, but are smaller than the game window, so roughly by about 2 times. It looks more or less as shown in the screen. If I resize the window even when I reach the 800 x 600 size, the background and other elements on it are always smaller than the window size (GUI behaves correctly).
-
I have the rendering set msg.post(â@render:â, âuse_fixed_fit_projectionâ, { near = -1, far = 1 })
-
I donât understand why this is the case. Since the appropriate sprites are prepared for each orientation and in point 2 everything is always OK
No no, the layouts only apply to gui nodes. There is no such thing as having two different sprites. Itâs always the same sprite.
Sorry. I expressed myself imprecisely.
I have two different objects for the background:
(a) bg_Portrait
(b) bg_Landscape
For each orientation this background looks a little different, it does not differ only in size
Depending on which layout is active, such an object is displayed.
And as I wrote for point number 2 it works fine.
The problem will appear from the moment I described in point 3.
Could you please share a project where I can test this?
Example of how apply orientation in browser.
Copy /builtins/manifests/web/engine_template.html to /main/engine_template.html.
Update game.project file with:
[html5]
scale_mode = fit
htmlfile = /main/engine_template.html
Update /main/engine_template.html by adding script below at the end of <body>:
<body>
// Others scripts
<script id='engine-setup' type='text/javascript'>
var extra_params = {
archive_location_filter: function( path ) {
return ("{{DEFOLD_ARCHIVE_LOCATION_PREFIX}}" + path + "{{DEFOLD_ARCHIVE_LOCATION_SUFFIX}}");
},
engine_arguments: [{{#DEFOLD_ENGINE_ARGUMENTS}}"{{.}}",{{/DEFOLD_ENGINE_ARGUMENTS}}],
custom_heap_size: {{DEFOLD_HEAP_SIZE}},
full_screen_container: "#canvas-container",
disable_context_menu: true
}
Module['INITIAL_MEMORY'] = extra_params.custom_heap_size;
Module['onRuntimeInitialized'] = function() {
Module.runApp("canvas", extra_params);
};
Module["locateFile"] = function(path, scriptDirectory)
{
// dmengine*.wasm is hardcoded in the built JS loader for WASM,
// we need to replace it here with the correct project name.
if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
path = "{{exe-name}}.wasm";
}
return scriptDirectory + path;
};
{{^DEFOLD_HAS_WASM_ENGINE}}
Module["isWASMSupported"] = false;
{{/DEFOLD_HAS_WASM_ENGINE}}
var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var buttonHeight = 0;
var prevInnerWidth = -1;
var prevInnerHeight = -1;
{{#html5.show_made_with_defold}}
buttonHeight = 0;
{{/html5.show_made_with_defold}}
{{#html5.show_fullscreen_button}}
buttonHeight = 0;
{{/html5.show_fullscreen_button}}
function resize_game_canvas() {
// Hack for iOS when exit from Fullscreen mode
if (is_iOS) {
window.scrollTo(0, 0);
}
var app_container = document.getElementById('app-container');
var game_canvas = document.getElementById('canvas');
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight - buttonHeight;
if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight)
{
return;
}
prevInnerWidth = innerWidth;
prevInnerHeight = innerHeight;
var width = {{display.width}};
var height = {{display.height}};
var isLandscape = innerWidth > innerHeight;
var targetRatio = isLandscape ? width / height : height / width; // the trick is here!
var actualRatio = innerWidth / innerHeight;
{{#DEFOLD_SCALE_MODE_IS_DOWNSCALE_FIT}}
//Downscale fit
if (innerWidth < width || innerHeight < height) {
if (actualRatio > targetRatio) {
width = innerHeight * targetRatio;
height = innerHeight;
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
app_container.style.marginTop = "0px";
}
else {
width = innerWidth;
height = innerWidth / targetRatio;
app_container.style.marginLeft = "0px";
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
}
}
else {
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
}
{{/DEFOLD_SCALE_MODE_IS_DOWNSCALE_FIT}}
{{#DEFOLD_SCALE_MODE_IS_STRETCH}}
//Stretch
width = innerWidth;
height = innerHeight;
{{/DEFOLD_SCALE_MODE_IS_STRETCH}}
{{#DEFOLD_SCALE_MODE_IS_FIT}}
//Fit
if (actualRatio > targetRatio) {
width = innerHeight * targetRatio;
height = innerHeight;
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
app_container.style.marginTop = "0px";
}
else {
width = innerWidth;
height = innerWidth / targetRatio;
app_container.style.marginLeft = "0px";
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
}
{{/DEFOLD_SCALE_MODE_IS_FIT}}
{{#DEFOLD_SCALE_MODE_IS_NO_SCALE}}
//No scale
var margin_left = ((innerWidth - width) / 2);
margin_left = margin_left > 0 ? margin_left : 0;
var margin_top = ((innerHeight - height) / 2);
margin_top = margin_top > 0 ? margin_top : 0;
app_container.style.marginLeft = margin_left + "px";
app_container.style.marginTop = margin_top + "px";
{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}}
app_container.style.width = width + "px";
app_container.style.height = height + buttonHeight + "px";
game_canvas.width = width;
game_canvas.height = height;
}
resize_game_canvas();
window.addEventListener('resize', resize_game_canvas, false);
window.addEventListener('orientationchange', resize_game_canvas, false);
window.addEventListener('focus', resize_game_canvas, false);
</script>
</body>
2 Likes