I’m relatively new to Defold, so I apologize if this question is too easy. It wasn’t easy to find documentation about it, so it’s probably worth asking anyway.
I’m exporting my HTML5 game with the “Fit” scale mode. That way my 1024x768 game always looks as big as possible. So far so good.
But I don’t want all that whitespace at the sides (or at the top depending on the window size). Is there any way to put excess graphics outside the “official” 1024x768? Whatever I put there, Defold seems to be truncating them during compilation.
Setting the Scale Mode to “Scale” almost does what I want.
The game objects in the background get deformed out of proportion to fit the entire screen but the GUI elements seem to work just as I want. Their proportions remain correct.
I did play with all those but they made no difference. EDIT: I just realized I’m using that setting already.
Something worth mentioning is that the game already does what I want out of the box when I hit the “Build” command. If I resize the window, it already shows excess graphics around my game outside the “official” area.
It’s only when I hit the “Build HTML5” command that the background gets truncated.
It’s something related to the HTML5 export.
There are additional settings in the html5 section of the game project file to control the behaviour of the canvas. Also check the html5 manual for more info about the settings.
Changing the HTML5 template worked.
I recommend grabbing the latest template from the latest version of Defold and modifying the resize_game_canvas manually to use window.innerWidth and window.innerHeight as the game dimensions.
Using today’s version, the resulting function was the following:
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;
if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight)
{
return;
}
prevInnerWidth = innerWidth;
prevInnerHeight = innerHeight;
app_container.style.width = innerWidth + "px";
app_container.style.height = innerHeight + "px";
game_canvas.width = innerWidth;
game_canvas.height = innerHeight;
}