qwertysam

Members
  • Content Count

    1
  • Joined

  • Last visited

About qwertysam

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I've used libraries in other languages before that provide different types of scaling via viewport types. The best example of what I want is from a library called libgdx for Java, their ScreenViewport. Essentially what I want is to: Fill the screen meaning that there's no black bars or the sides of the game Maintain the pixel ratio meaning that every in-game pixel is equal to one pixel on screen, so no stretching Not maintain aspect ratio meaning that it doesn't matter to my game what the aspect ratio of the game is. Its job is to forget about aspect ratio and follow the above two criteria The way how I'm achieving this is by using Phaser's EXACT_FIT scaling type so that the canvas automatically resizes to fit the window. Then upon resizing, I update the size of the camera and the game's renderer so that they match the new canvas size. Here's the code I have in my create function. this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; // Phaser.ScaleManager.SHOW_ALL USER_SCALE this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setResizeCallback(function () { var width = window.innerWidth; var height = window.innerHeight; console.log('size: ' + width + ', ' + height); this.camera.setSize(width, height); this.game.renderer.resize(width, height); }, this); It works fantastic in the horizontal axis, but when the window shrinks vertically, there is some vertical stretching of the pixels. Here's a working example of my issue And here's the code on GitHub, in case it's of any help. Here are some related topics that I've done my research on, in case they are also of help Thank you for reading, any help is appreciated! EDIT: I've isolated the issue, it appears to be that when the game is initially created, the height that I specify is the initial height of the canvas. e.g. var game = new Phaser.Game(16 * 80, 9 * 80, Phaser.AUTO, ''); Phaser's scaling method allows the canvas to grow in height, but not to shrink in height. The renderer is rendering to a much taller canvas (which goes off-screen) than expected, therefore causing the vertical stretching. Any thoughts on how I can shrink the canvas myself? Thanks!