kittykatattack / ga

The world's tiniest, cutest and funnest game engine

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using scaleToWindow

fzzylogic opened this issue · comments

Hi

Not sure this is useful for the use cases you're aiming for, so just putting it here for what it's worth. scaleToWindow was not resizing to the full window size after multiple resizes (chrome / firefox). It develops unwanted spacing after multiple resizes, for example when changing from portrait to landscape and back again. Found a solution which works well for me. I am using a simple page containing only a canvas, so in my case this makes the canvas hug the sides of the browser window whenever it is resized:

  1. Modify the canvas centering code in plugins.js / ga.scaleToWindow:
    // first, reset all margins to zero.
    ga.canvas.style.margin = '0px 0px 0px 0px';

    // Center horizontally (for square or tall canvases)
    // margin shorthand order: top, right, bottom, left
    var margin;
    if (center === "horizontally") {
    margin = ((window.innerWidth - ga.canvas.width * scale) / 2) + 'px ';
    ga.canvas.style.margin = '0px ' + margin + '0px ' + margin;
    }

    //Center vertically (for wide canvases)
    if (center === "vertically") {
    margin = ((window.innerHeight - ga.canvas.height * scale) / 2) + 'px ';
    ga.canvas.style.margin = '0px ' + margin + '0px ' + margin;
    }

  2. Finally, set overflow: hidden on body tag in html to prevent scrollbars, for example with an inline style:

<style> body {overflow: hidden; } * {margin: 0; padding: 0;} </style>

I like this as method as i don't need to use fullScreen. But if the browser is manually set to fullscreen, it fills available space as expected.

Thanks so much for GA, i'm having great fun with it.

Thanks so much for sharing this!
I'll merge this into Ga's codebase on the next major update 😄

hello, the scaleToWindo function in the current ga version still does not work correctly when we rotate the screen many times, could you. provide full source code in which you solved this problem, sorry for my English, greetings Mariusz

@MariuszOnik, the included code is all there is. However, i remember that i later found there were some situations where the canvas would be zoomed for some reason, so the above is not perfect.