Jump to content

Phaser on Retina


PRSoluções
 Share

Recommended Posts

Hi,

I have a small problem on understand how i can work with retina in Phaser.

56f9eae3035fc_Screenshot2016-03-2823.36.

 

On my mac with retina, the images are so blured. A 48x48 image represent my multiplayer game latency.

If i put an image with 96x96, the image is bigger and the game size is the same, only this image is bigger.

What is the correct way to do it?

thanks.

Link to comment
Share on other sites

Create a large enough image and use the following code:

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

 

Link to comment
Share on other sites

Hi,

Thanks for the tips. The game now is correct scaled, but i dont need do:

this.ball.scale.set(scale_ratio);

The sprite is scale automatic.

The only problem that still is when i resize the browser or show/hide the chrome inspector, the game is streched or not resized.

Look on image when i open the game with inspector:

Screenshot 2016-03-29 13.49.41.png

 

Look on image when i resize the browser or chrome inspector (show black parts and streched):

Screenshot 2016-03-29 13.50.04.png

 

Could you help me?

Link to comment
Share on other sites

Reload on window resize? That is totally crazy.

`window.devicePixelRatio` will give you the dpi, you just need to upscale the raw size of the canvas, then use css to resize it back down to the size you want, then add scale to each sprite equal to the dpi.

There is an extremely messy example here. The example uses only pixi but I'm pretty sure Phaser exposes the scale mode so it should be fairly trivial to do the same thing in Phaser.

Add a resize handler that recalculates the size of the canvas element and let your next render tick handle the re-render with the new canvas size. Quick and easy to hack into any project using canvas.

If you're feeling super lazy (which is often a good thing in a programmer) then canvas-fit does all the heavy lifting for you, just pass that canvas instance to Phaser to render into and I think you will be good to go.

Link to comment
Share on other sites

5 hours ago, mattstyles said:

Reload on window resize? That is totally crazy.

`window.devicePixelRatio` will give you the dpi, you just need to upscale the raw size of the canvas, then use css to resize it back down to the size you want, then add scale to each sprite equal to the dpi.

There is an extremely messy example here. The example uses only pixi but I'm pretty sure Phaser exposes the scale mode so it should be fairly trivial to do the same thing in Phaser.

Add a resize handler that recalculates the size of the canvas element and let your next render tick handle the re-render with the new canvas size. Quick and easy to hack into any project using canvas.

If you're feeling super lazy (which is often a good thing in a programmer) then canvas-fit does all the heavy lifting for you, just pass that canvas instance to Phaser to render into and I think you will be good to go.

 
 
 
You proposes to change the scale of all images. This is easily done only if all images have the same scale. Otherwise, it is a problem.
Link to comment
Share on other sites

2 hours ago, VitaZheltyakov said:
 
You proposes to change the scale of all images. This is easily done only if all images have the same scale. Otherwise, it is a problem.

Not at all, dpi is a constant. You set the scale of each sprite/image/whatever only once, when they instantiate. If they have their own scaling then you simply multiply that by the dpi (rather than 1 * dpi).

When the window resizes it is only the canvas that resizes itself. This resizes either reveals or hides more or less of the game world, or just scales the exterior (or master) container, often called a stage, if you want to show a consistent amount of the game world—of these two options the first is often by far the more attractive (although that is dependent upon the type of game).

Things get even better if you throttle the resize handler so it fires consistently and less frequently cross-browser. Usually you only want to re-render when resizing has finished, but there is no event for that so you have to ignore most of the events, throttling the resize event to every 100-200ms is more than quick enough for a screen refresh after a resize.

Link to comment
Share on other sites

Quote

If they have their own scaling then you simply multiply that by the dpi (rather than 1 * dpi).

 

This is the problem. For example, in the game, which I'm doing now, nearly a hundred images. Many of them have own scale. From this scale depends on many variables (distance and speed). You propose to write a great function and it is constantly updated.
Link to comment
Share on other sites

10 hours ago, VitaZheltyakov said:

 

This is the problem. For example, in the game, which I'm doing now, nearly a hundred images. Many of them have own scale. From this scale depends on many variables (distance and speed). You propose to write a great function and it is constantly updated.

It certainly is not.

I'll repeat, DPI does not change.

DPI does not change. When you create your images, you set their own individual scale, at that point simply multiply by the dpi. That's it. That's all you have to do. If you have a factory function to create those sprites/images, which you almost certainly will have, you do this once and it is executed by the code once for each object. This adds one multiplication to whatever you are doing currently. It is not repeated on resize as dpi does not change, it is a constant.

Upscaling does create artifacts, for pixel art the nearest neighbour scaling solves this, but for everything else upscaling is an issue. But this is where serving separate images based on dpi comes in. This is separate to your concern of individual scale. Usually no scaling for an image is the best solution, the next best is a constant scale, only if you really have requirement to scale individually should you.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...