[Browser, HTML5] Resize viewport when browser get resized

#1

HI guys.
is it posible to resize viewport when browser window get resized?
I already do basic viewport here https://community.heaps.io/t/viewport-letterbox-scale-render/1118 but the viewport not updated when browser window get resized.

#2

Maybe you can use something like

engine.onResized = ()->{
            trace("window has been resized");
        };

or


Window.getInstance().addResizeEvent(
            ()->{
                trace("some action on resize event");
            }
        );

in your init method? Haven’t tried it yet with js target…
Anyway doesn’t seem to work. :sweat_smile: I’m really no viewport expert and I also get very weird results here. (you can also ask on discord if you like to)

… or maybe now it works:

import hxd.Window;

class WindowResize extends hxd.App {
    static function main() { new WindowResize(); }
    override function init() {
        var t = new h2d.Text( hxd.res.DefaultFont.get(), s2d );
        t.text = "Hello Heaps!";

        apply_game_resolution();

        engine.onResized = ()->{
            trace("window has been resized");
            apply_game_resolution();
        };
    }

    function apply_game_resolution() {
        var inworld_camera_width  = 64;
        var inworld_camera_height = 32;
        s2d.scaleMode = LetterBox(inworld_camera_width, inworld_camera_height, true, Left, Top);
    }
}
#3

Hi, thanks for replying.
actually I forgot to set canvas size on my index.html

<canvas id="webgl" style="width:100%; height=100%"></canvas>

thats why the viewport not get resize even after I set scale mode on resize event.
silly me :sweat_smile:

2 Likes