Jump to content

Search the Community

Showing results for tags 'bars'.

  • 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. Hey. I need help, I've been banging my head against this for hours. I've been scaling my game to fit screens on all devices, while maintaining the asset ratios. The game size increases so the controls work where ever you touch. I've run into an issue with Android/Chrome and itch.io. I'm not sure if it's specific to the browser, or the site, or mobile. It might be a full screen mobile issue all together, but I'm testing it on itch and an android with chrome. The first time the game loads it scales and works perfectly. Then, if I refresh the page or visit it later this happens: The game gets put into the view port ratio set in Itch, and doesn't adjust like it should in fullscreen. This being 640x960. 2:3 ratio, the screen has a higher Y axis. This causes the white bar at the bottom which is unresponsive to the touch controls. I've removed the padding in CSS: <style> html { margin:0; padding:0; } body { margin: 0; padding: 0; } #canvasholder { width: 99vw; height: 99vh; margin: 0 auto; } </style> and my canvas code looks something like this: // ~A Canvas and Game Setup aspect_ratio = window.innerWidth / window.innerHeight; testWidth = 960 * aspect_ratio; //if the aspect ratio stretches the Y axis if (testWidth <= 640) { var canvasWidth = 640; var canvasHeight = 640/aspect_ratio; } // else if it stretches the X axis else { var canvasWidth = 960 * aspect_ratio; var canvasHeight = 960; } //test versions //var canvasWidth = 640; //var canvasHeight = 960; var game = new Phaser.Game(canvasWidth, canvasHeight, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function create() { // ~2.1 Game Scaling game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.refresh(); Maybe I've over complicated the original solution? This worked the way I intended on Desktop tests. You can test it yourself here: https://flopshotqq.itch.io/screen-scale-test Thanks so much, any help is appreciated.
×
×
  • Create New...