Sign in to follow this  
Kartou

Problem with sharp textures using RESIZE ScaleMode

Recommended Posts

Hi!

 

First of all, i'd like to thank you guys for this awesome tool  :)

I am in the process of adopting to Phaser from Kinetic. I've previously used Kinetic for creating responsive micro games targeted mobile devices and so far I'm blown away by Phaser.

 

Anyways, I'm having some trouble figuring out how to use the ScaleManager RESIZE property. I want the canvas to fill the entire screen and resize the different elements manually. I've therefore setup a resize callback where I based on the target dimension calculate a scale factor i apply to the sprites. Eg, I have a sprite that should be anchored to the top center, so I resize it using the scale property and translates it to the center. This works very well and gives me the responsive design I want. However, the sprite loses its crispyness/sharpness when rendered on a retina display. If i instead use the SHOW_ALL scalemode with no manual scaling it will look as sharp as it should. I did not have this behavior with Kinetic, so i guess i'm doing something wrong? 

 

So I guess my question is; how should I use RESIZE scale mode, together with manual scaling and still maintain sharpness of sprites?

 

Below is an example of how I scale a header that should always be centered at the top of the screen using the resize callback:

GameController.prototype.resize = function (width, height) {    var scaleX = width / this.targetWidth;    var scaleY = height / this.targetHeight;    this.uniformScale = Math.min(scaleX, scaleY);    this.headerImage.position.x = this.game.world.centerX;    this.headerImage.scale.set(this.uniformScale, this.uniformScale);}

Cheers,

Klaus 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.