Showing excess graphics outside of "official" game dimensions

Questions
#1

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.

#2

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 could restrict myself to only use GUI elements, others have done it.

But if there’s a better way to do this for the general case, please let me know.

#3

Have you tried using fixed-fit projection?

msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

Documentation about projections - The render pipeline in Defold

#4

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.

#5

In that case you’ll need to delve into HTML make a custom template.

This thread, although quite old now, may be of help.

1 Like
#6

That thread looks very promising indeed! Thanks.

#7

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.

1 Like
#8

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;
}
#9

Isn’t this the same as setting canvas Scale Mode to Stretch?

1 Like
#10

Yeah, that’s correct! even simpler.

Trying “Stretch” was one of the first things I did but I quickly discarded it because it was deforming my objects out of their proportions.

But restricting myself to GUI elements or using Game Objects with “use_fixed_fit_projection” takes care of that.

Thanks again.