Custom scale mode in html5

Questions
1

I would like to have a custom scale mode in html5. I am encapsulating the Defold index.html in an iframe and I want the width / height / margins to be such that the Defold app takes all the available space of the iframe. (Note that the option “No Scale” for Scale Mode in game.project→html5 is not what I want since the engine does NOT get the resize message when the iframe changes wise if I choose “No Scale”).

(1) I am able to modify the dmloader.js in order to have the behavior I need. But the problem is that dmloader.js is recreated at each bundle of the html5 project in Defold. Is there a way to add a custom scale mode?

(2) A different solution would be to use a modded dmloader.js but then I have to move it in a different directory and I am not able to let dmloader knows where wasm-web/project_name/archive is. Any hint about how to set a custom directory for archive in dmloader.js?

I hope all this makes sense…

Thanks! And Happy New Year!!!

2

Scale Mode = Stretch?

You don’t have to modify dmloader.js for that, only set custom engine_template.html with your own resize function (resize_window_callback)

2 Likes
3

Yes, thanks! "Stretch” seems to do what I want! I am sorry but I don’t understand why I skipped this option, my fault!

Just out of curiosity (and possible future needs), could you please explain me a bit better this: “You don’t have to modify dmloader.js for that, only set custom engine_template.html with your own resize function (resize_window_callback)”

Many many thanks!

4

The process is simple: copy the engine_template.html file into your project, set it in game.project, and open it for editing in a text editor. In the engine-setup block, you can add your own code and parameters that will be executed before the game starts loading. I took the body of the resize callback from dmloader.js, scale mode is “stretch”:

<script id='engine-setup' type='text/javascript'>
	// From here you can configure game startup parameters via the CUSTOM_PARAMETERS object.
	CUSTOM_PARAMETERS['resize_window_callback'] = function() {
        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 = 42;
        {{/html5.show_made_with_defold}}
        {{#html5.show_fullscreen_button}}
        buttonHeight = 42;
        {{/html5.show_fullscreen_button}}
        // 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 targetRatio = width / height;
        var actualRatio = innerWidth / innerHeight;
 
        //Stretch
        width = innerWidth;
        height = innerHeight;
  
        var dpi = 1;
    {{#display.high_dpi}}
        dpi = window.devicePixelRatio || 1;
    {{/display.high_dpi}}
        app_container.style.width = width + "px";
        app_container.style.height = height + buttonHeight + "px";
        game_canvas.width = Math.floor(width * dpi);
        game_canvas.height = Math.floor(height * dpi);
    }
};
</script>

Accordingly, the engine will use this logic to set the canvas size, and here you can modify it however you like. For example, you can define different canvas dimensions - say, to add a decorative frame - so you don’t have to create it within the game itself.

4 Likes
5

@aglitchman thank you soooo much! Now everything is crystal clear to me!

Thank you for your time!

1 Like