search

kittykatattack / ga

The world's tiniest, cutest and funnest game engine
451 stars 85 forks source link

Using scaleToWindow #51

Open fzzylogic opened 7 years ago

fzzylogic commented 7 years ago

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:

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.

kittykatattack commented 7 years ago

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

MariuszOnik commented 5 years ago

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

fzzylogic commented 5 years ago

@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.