Forums » Help » Mobile Fixed Width Vertical Scroller

Hi, I'm building a vertical scroll game (meaning the width is fixed). My game is built at 160px width (before scaling).

So, my question is, for mobile devices how can I make sure my game always scales to the max width of the device it is on, and yet also make sure the canvas occupies the maximum vertical real estate available as well, all without distorting the game's resolution?

Below is basically what I am toying around with at the moment but it unfortuntately, and not surprisngly, seems to cause a lot of rendering issues. Can anyone suggest a different approach or a fix to my approach? Thanks!

var scale = window.innerWidth / 160;

ig.main('#canvas', ToiletQuest, 60, 160, 160 * (window.innerHeight / window.innerWidth), scale);

You seem really close already! Here's what works well for me:

var scale = 4;
var width = Math.floor(window.innerWidth/scale);
var height = Math.floor(window.innerHeight/scale);
ig.main('#canvas', MyGame, 60, width, height, scale);

One important thing to note is that you should probably make sure your width, height, and scale are always integers, otherwise scaling can create artifacts in your sprites (that is why Joncom is flooring the numbers).

Thanks for your replies guys. That didn't really accomplish what I was looking for but I'll look into it further a bit later. The note about width/height/scale always being an integer is definitely a good one to note, so thanks!

make sure the canvas occupies the maximum vertical real estate available

This is what the above code should do. In what way is this not doing what you'd like?

When I use the code you provided the game was too scaled on the phone - the left/right edges of the game are not both visible within the viewport at the same time. I am essentially looking for both the left edge of the game, and the right edge of the game, to both be exactly flush with the left/right edges of the phone device (there will be no horizontal scrolling in the game).

What I am doing as of now, as a temporary workaround for iphone, is the following:

mobileHeight = 160 * (height/width);
canvas.style.height = mobileHeight;
ig.main('#canvas', MyGame, 60, 160, mobileHeight, 2);

This of course does not fill out the entire width of the device if the width of the device viewport doesn't work out to be 320 (as the iphone in portrait does). I'm looking for a solution that will lock the width of the canvas and game (after scale) to be exactly the width of the device, but also consume the max available height of the device, all without distorting the game's resolution.

Quote from Rocket13531
the left/right edges of the game are not both visible within the viewport at the same time.

The point is that the canvas will fill up as much real estate as possible without taking up more space than the device is able display.

That is the first step of achieving what you want.

From there the next step is to adjust scale until your happy with how big/small things are in your game. If you can't see the edges, reduce scale. If everything is too small, increase scale.