Jump to content

Search the Community

Showing results for tags 'scaling aspect ratio'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 1 result

  1. I've created some code which adjusts the aspect ratio of the game in regards to the browsers inner width and height and then fills out the space of the inner width and height exactly, but the way I'm doing that last part means I have to do it on every update, if I only do it once the game reverts to it's original, but correct aspect ratio, size. So I have the following: var that = this;$(window).resize(function() { that.resize(); } );And in this.resize: var w = rootWidth;var h = rootHeight;//this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;if (window.innerWidth > window.innerHeight) { var width = w+0.4*window.innerWidth; var height = (width / window.innerWidth) * window.innerHeight;} else { var height = h+0.4*window.innerHeight; var width = (height / window.innerHeight) * window.innerWidth;}this.game.width = width;this.game.height = height;this.scale.width = width;this.scale.height = height;this.game.canvas.width = width;this.game.canvas.height = height;//this.game.world.setBounds(0, 0, width, height);this.game.scale.width = width;this.game.scale.height = height;this.game.camera.setSize(width, height);this.game.camera.setBoundsToWorld();this.game.renderer.resize(width, height);// Tell ScaleManager that we have changed sizesthis.game.scale.setSize();Which gives me a game which always keeps the same aspect ratio as the window, but now I want to scale the game to fill the window exactly (which should be easy given that the game has the same ratio as the window), so far I have the following but it needs to be called on every update loop to maintain itself: var size = this.calculateAspectRatioFit(this.game.width, this.game.height, window.innerWidth, window.innerHeight);$("canvas").css("width", size.width);$("canvas").css("height", size.height);$("canvas").width(size.width);$("canvas").height(size.height);And calculateAspectRatioFit contains: var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);return { width: srcWidth*ratio, height: srcHeight*ratio };So how do I tell the game to scale like I do already but such that the game doesn't just revert back on every update? --Edit-- I've created a small working jsfiddle which implements the above code, and again everything works except for the scaling, I have to call my css width and height on every update to maintain the correct size/scaling: http://jsfiddle.net/yeuyvx6b/ --Edit-- Oh and the reason I want to only call the scaling once is because it drains resources to scale it again and again on every update call.
×
×
  • Create New...