How do I make my tilemap fill the window at runtime?

0 favourites
  • 4 posts
From the Asset Store
An educational game for Fill in the Blanks. An easy to use template for developers to build larger games
  • My game uses a top-down view, using a tilemap to make up the floor, with the characters as objects on top.

    I want the game to resize the amount of floor you can see to fill the window.

    I don't want it to resize the tiles, just the number of tiles you can see.

    My guess is that I need to put something in Browser.OnResized to set the ViewportWidth and ViewportHeight?

    1. How do I set ViewportWidth and ViewportHeight in code, and
    2. How do I get the window width? Browser.ExecJS("window.innerWidth") was mentioned in some posts, but does not work on Windows 11 Edge


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • The easiest option is to manually stretch the tilemap in layout editor and fill it with tiles. Tilemap uses very little resources, so you can make it really big if you want.

    In most cases in C3 you don't need to know window size or handle Browser.OnResized if you use the right scaling mode. Check out this tutorial:

  • Thanks for the reply, but that's still not what I want.

    My layout is square-ish and my tilemap fills the layout.

    The viewport only covers a small part of the layout and is roughly 4:3.

    If I display it on a portrait device, I get blank areas at the top and bottom. On a landscape device, I get blank areas to the left and right.

    I guess I need to change the viewport size to match the screen size?

    If the screen size is not an exact number of tiles, then I'd expect blank areas, but they would always be less than one tile's size.

  • So, if I understand correctly, you want to resize the viewport to show as much of the tilemap as possible, but without cropping the tiles at the edges?

    I think you can use System action "Set canvas size" to resize the viewport. To calculate its size add PlatformInfo object to the project, it has WindowInnerWidth and WindowInnerHeight expressions.

    Another option is to use Scale Inner or Scale Outer mode and let Construct to resize the viewport automatically. You can use a couple of black sprites to cover partial tiles at the edges if you wish.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)