When I started Scuba Chibi, I made the mistake of making sprites small, and then scaling them up to fit larger screen resolutions.
game.stage.smoothed = true; // render crisp art
game.stage.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
One problem is that they never scaled up at all. They remained small instead of resizing to larger resolutions. I had to do something more than those 2 lines of code.
But if they did scale up, I realized a potential second problem — the sprites would be artifacted and not crisp and clear. So, it’s best to create sprites that are really large and then scale them down for lower resolutions. Luckily, I use vector art, so resizing them (I used Flash to draw the images in the first place, and then used Flash to resize them 4x larger and then exported them as PNG’s) was not a problem at all.
So, I thought about the larger resolutions to support. I was at first thinking of my own device which was really small, 960×640, but it appeared to show things even smaller, at 480×320. So I resized everything to 4x larger. That means the base dimensions are now 1920×1280. And that is my baseline for all the sizes of my sprites. 1920×1280 is what is considered 100% width and 100% height.
Here are some examples of that in my code:
var GAME_WIDTH = screen.height,
GAME_HEIGHT = screen.width,
BASE_WIDTH = 1920,
BASE_HEIGHT = 1280;
// add a chibi to the screen - 360x360
this.chibi = game.add.sprite(0, 0, 'chibi');
this.chibi.x = GAME_WIDTH/2;
this.chibi.y = (GAME_HEIGHT/9)*4.5;
this.chibi.smoothed = true;
The actual chibi.png is 360×360. scale.setTo() considers “1” as being being “100%.”
The formula is this:
GAME_WIDTH and GAME_HEIGHT is synonymous to the width and height of a device’s resolution (notice they are set to screen.width and screen.height above).
So if my device is 480×320, let’s try inputting the numbers:
which is what we want. 1/4 of 360 is 90, and that was my chibi’s size in the first place in a 480×320 screen.
The iPhone 6 is 1334×750. Let’s input the numbers for that:
You’ll notice that the chibi will no longer be proportional in an iPhone 6, but that is one of the things to accept when developing for multiple devices.