Jump to content

Upscaling my game makes it look terrible and breaks text


QLNEO
 Share

Recommended Posts

I'm currently learning Phaser (that's my second thread here in less than three days :P), and I'm trying to upscale my game, but it's not working out as intended.

The following is in my preloader (which is the very first state to be executed), so it should apply before anything else in the game. The following code doubles the size.

function init() {
    this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
    this.game.scale.setResizeCallback(function() {
        this.game.scale.setUserScale(2,2);
    }.bind(this))
}

And indeed, my game upscales... But it not only looks blurry but it breaks text positioning as well. This is a sample code of how I'm currently positioning text:

let sampleText = this.game.add.text(0, 0, "Texttextext", {
    boundsAlignH: "center",
    boundsAlignV: "top"
});
let display = this.game.stage.getBounds();
sampleText.setTextBounds(0, 0, display.width, display.height);

It looks fine in native dimensions, but it's misplaced when I upscale the game by inserting init() in the preload state. Scaling seems more of a hassle than I thought, anybody has any idea of what to do?

Link to comment
Share on other sites

Manipulating game.width/height had the same result as before (actually even worse, with some weird quirks like the camera reaching outside the world bounds and having to click away once to make the screen larger). Changing world.width/height did nothing.

Link to comment
Share on other sites

No, read width and height from game or world instead of the stage. Or just a use number constants.

Also, if you're not interested in the container size you can just skip the resize callback:

function init() {
    this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
    this.scale.setUserScale(2, 2);
}

 

Link to comment
Share on other sites

Ah, you meant the text bounds. I tried to change game.width/height in init() instead. :P 

Well, now it works. You're the real MVP!

 

Now the rescaling blurriness problem still remains. I read this article but it's more of a hack than anything, and the article was written in 2014 so hopefully now there's a better, native, way to make it look good?

Link to comment
Share on other sites

If anyone's reading... I found out how. First, in the new Phaser.Game() call, there's an optional parameter antialias, that you can turn off. When I did, the resize wasn't blurry anymore. However, programming happened, and before I changed a single line of code, it stopped working again (it did slightly improve the look of a few objects comparing to before the antialias though). Yeah, I can't explain that either. Fortunately, there's another safeguard in the form of Phaser.Canvas.setImageRenderingCrisp(), that finally did the trick for me, for good this time.

Link to comment
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...
 Share

  • Recently Browsing   0 members

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