Forums » Help » Scaling the entire game screen and entities. Images disappear.

I'm pretty new to all this so I'm probably doing something stupid but I can't seem to find an answer to this problem.

I would like to be able to create a game screen that can be scaled to different screens without using a new set of assets. Just for arguments sake I would say the graphic quality does not matter at all and all I wish to accomplish is a full game screen re-size.

I tried this:
var originalWidth = 768;
var originalHeight = 480;
var newWidth = 400;
var scale = newWidth/ originalWidth;

ig.main( '#canvas', MyGame, 30, originalWidth, originalHeight, scale);

The background scales fine but the entities almost completely vanish although I can see some of their pixels moving about the screen.

I can only guess at why the entities textures don't render properly.

Any hints on how I might overcome this or am I just completely going about it the wrong way?

Unfortunately, in my experience the scale property for the game has to be a whole number.

Thanks for your reply monkeyArms. Looks like you're right. It's strange. Scaling to 0.5, 1, 1.5 or 2 works but 0.6, 1.6 or any number between doesn't. Wish I knew how that worked. I know if I just use the canvas I can do

context.drawImage(this.graphic, this.position.x, this.position.y, this.width, this.height);

and the image will be scaled to the width and height. I guess if I want to accomplish scaling the entire game screen to a certain size I'll have to go messing with the impact code myself.

All I was hoping to do was get a full screen game to fit in an Android WebView. The main issue there is that many devices have different screen sizes. Surely I shouldn't need to have different assets for every device I want to support.

Use this in your main.js

// Start the Game with 60fps, a resolution of XXXxXXX, scaled
// up by a factor of X
ig.main( '#canvas', MyGame, 60, 480, 320, 1 );

Thanks for you reply paulh. In my post above I set the fps to 30 just to save battery on a phone. I have tried setting the resolution of the game to suit a phone (480x320)

The problem is the game map remains the same original size i.e.
var originalWidth = 768;
var originalHeight = 480;

The screen renders at 480x320 and I only see the top left area of the game with the rest chopped off. Apparently setting the game size only effects the viewport and not the map and entity size which makes sense.

My game fits on the screen like the pong demo.
This is why I tried my basic scaling calculation which essentially worked for the game map but for whatever reason the game entities are not rendered properly after the scaling.

Using firebug I see this error.
image.js (line 165)
Index or size is negative or greater than the allowed amount
_[Break On This Error] _
tileHeightScaled

There seems to be some restriction on scaling. I'm not sure what amount are or are not allowed though.

I was hoping there may be some method to this I did not know about. If I find a solution I will make sure to post it. I appreciate you're feedback.

Just to try give some conclusion to this post. After trying out a load of stuff (without changing any of the impact code) I've come to the conclusion that the game screen can only be scaled by certain values.

For example if I want to reduce the size of the screen these are valid:
scale = 0.25, 0.5, 0.75
Anything else such as 0.7, 0.2, 0.52 are not valid.

The best I could do as a solution to my problem is to work out the scale and then set it to whichever of the valid scale values was closest. I have to use CSS to make sure the screen looks alright after scaling by keeping the canvas centered.

var originalWidth = 768;
var originalHeight = 480;
var screenWidth = 480; //Just a test screen width
var scale = screenWidth/ originalWidth;
if(scale < 1){
		if( scale < 0.35){
			scale = 0.25
		}
		if(scale < 0.65){
			scale = 0.5;
		}
		 if( scale < 0.85){
		  scale = 0.75;
		 }
		 else{
			scale = 1;
		 }  
	}
ig.main( '#canvas', MyGame, 60, originalWidth, originalHeight, scale);

Not the best solution but beats having to resize all my images for each screen I want to support. I'm still open to any suggestions or advice on a better way to do this.

Well you should be able to simplify the rounding with:

var scale = Math.max(1,Math.round((screenWidth/originalWidth)*4)/4);

Thanks Graphikos. That's pretty cool.

Only thing is in my case I need to reduce the screen size to a scale below 1 so I should use Math.min instead of max. It could also work if I ever want to increase the scale. All I have to do is put an
if( (screenWidth/originalWidth)>1)

Thanks. That simplified my code a lot.

Yea, Math.min(), sorry... ;)