How to scale entire game up

[Henryk]

Anyone, experiencing, pixelated graphics?

My aproach was to change the canvas by 'game.scale.setGameSize(windowWith, windowHeight)' to the device window size. Then calculate the scale factor by checking my original Size gainst the window size. After I scale my gropus accordingly and also change position of that group to be centered or single ui elements to adapt to the screensize. While that all works, all graphics look horrible and text ist barely readable. I'm not scaling up it is more scaling down...

[Gods]

Anyone, experiencing, pixelated graphics?

My aproach was to change the canvas by 'game.scale.setGameSize(windowWith, windowHeight)' to the device window size. Then calculate the scale factor by checking my original Size gainst the window size. After I scale my gropus accordingly and also change position of that group to be centered or single ui elements to adapt to the screensize. While that all works, all graphics look horrible and text ist barely readable. I'm not scaling up it is more scaling down...

can you show all the scale code? 

[Henryk]

Puh, the code is a mess, but I'll try to show the basic:

//origW  (1200px)// within Boot.js        this.game.scale.setGameSize(getWindowWidth(), getWindowHeight());        // calculate the scale factor        scaleFactor = canvasW / origW; // canvasW is now equal to the device width        newWidth = origW * scaleFactor;        newX = Math.round( (canvasW - newWidth) / 2 );// within menu.js        this.gMenu = mt.create("Menu");        this.gMenu.scale.set(scaleFactor, scaleFactor);        this.gMenu.x = newX;

This is reduced to the basic principle. I was checking the device size to calculate the scaleFactor accordingly depending if device is smaller or wider then my original game size and so on...

Oh, and I'm using MightyEditor by the way.

 

Anyways, I gave up this approach and now use "this.scale.setUserScale(scaleFactor, scaleFactor)". This way, I cannot layout elements individually as intended, but the graphics and text look just much better...

[David Kaplan]

These posts helped me when I started making a game with phaser. I took the suggestions here and added to them.
I see three main scaling problems.

1) Scaling the whole "world" on init.
2) Creating a safe zone to place content so that you know your content will not be clipped on any devices.
3) Placing and scaling sprites that are different sizes.

The examples below come from my blog entry How to Create a Mobile Game on the Cheap, which details how to create a mobile game using Phaser, Cordova and Intel XDK.

Here are code samples that show how I overcame these three problems:

Scaling the "world" size:
 

var w = window.innerWidth * window.devicePixelRatio,    h = window.innerHeight * window.devicePixelRatio;if(h > 800) {    var div = h / 800; //800 is target    w = w / div;    h = 800;}var game = new Phaser.Game(w, h, Phaser.AUTO, ‘game’);

Creating the safe zone:

this.scaleFactor = window.devicePixelRatio / 3;//determine the safe zonethis.safeZone = {    width: this.game.width,    height: this.game.height,    x: 0,    y: 0,};//this is my safe zome height/width ratio. You can adjust this.var heightWidthRatio = 1.9;var currentHeightWidthRatio = this.game.height / this.game.width;if (currentHeightWidthRatio > heightWidthRatio) {    this.safeZone.height = this.game.width * heightWidthRatio;    this.safeZone.y = (this.game.height — this.safeZone.height) / 2;}else {    this.safeZone.width = this.game.height / heightWidthRatio;    this.safeZone.x = (this.game.width — this.safeZone.width) / 2;}

Example adding a sprite:

//Step 1 - placevar sprite = this.game.add.sprite(0, 0, "ZombieSprite");//Step 2 - scalesprite.height = this.safeZone.height * .10; //10% of safeZonesprite.scale.x = sprite.scale.y; //scale width same as height//Step 3 - relocate//In this example I will place the sprite in the center of the safeZonesprite.x = (this.safeZone.width - sprite.width) / 2;sprite.y = (this.safeZone.height- sprite.height) / 2;

[svash]

I have gone through the same problem and ended up chosing this option for scaling (by the way, my intention was to fulfill the screen maintaining the ratio, which was a square):

var gameSize;

if(window.innerWidth > window.innerHeight){
	gameSize = window.innerHeight;
} else {
	gameSize = window.innerWidth;
}

MyGame.game = new Phaser.Game(gameSize, gameSize, Phaser.AUTO);

I'm taking the smallest size (width or height of the window) and give it to both the width and the height of the game, giving it the maximum size that I can without breaking the ratio.

Hope this helps someone,  it worked just fine for me, and I stopped having that pixelating problem ^^ 

[jdnichollsc]

Hi guys!

Exist any tutorial about this topic? 

[jdnichollsc]

Hi guys!

What do you think to create a GitHub repository with examples about scaling? or Codepen examples?

Regards

[johncl]

This is a pretty complicated topic due to the fact that there are so many different resolutions and even aspect ratios to consider. Also depending on art style one would have to be careful so your graphics doesnt get too fuzzy/blurred if you opt for old school pixel style and scale it up for e.g. tablet use. Pixel style graphics needs a certain amount of sharpness to make them look decent. It also depends heavily on what kind of game it is since some can have varying play area as you would scroll around it anyway so on some devices you could see more than others (or more up/down compared to left/right depending on aspect ratio which differs between an iPad vs the average Android tablet/phone).

The problems start to surface the moment your game needs to show the whole play area on the screen - and you want pronounced pixel art. As mentioned above, one would have to make the game in a form factor that fits all systems, so for Android tablets and most phones one would consider those "tall screens" (assuming portrait mode), and try to fit it all in the height for the lowest phone resolution (e.g. 568 pixels for an iPhone5) and then add padding graphics for even taller mobile screens and then for bigger tablet screens do actual 2x 3x scaling of everything for crisp pixel graphics. It would likely mean that some devices would have more side border than others (for example on iPads with 4:3 format, a portrait format game would have areas on the side not used). Another way is to actually use the padded area for user interface buttons/score/etc if you for each device type adapt to either having this on top/bottom - or left/right depending on screen aspect. The nice thing is that its rather easy to test all these variables when running in a web-browser (I use the Chrome mobile option in devtools).

It's a tricky problem in general, and the best way to learn is probably to check out youtube videos of people playing the same game on different devices and see how they vary.

[samme]

On 9/20/2016 at 7:05 PM, Nicholls said:

What do you think to create a GitHub repository with examples about scaling? or Codepen examples?

https://codepen.io/collection/DdNPaE/