QLNEO Posted July 21, 2017 Share Posted July 21, 2017 I'm currently learning Phaser (that's my second thread here in less than three days ), 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 More sharing options...
samme Posted July 22, 2017 Share Posted July 22, 2017 Use game.width/game.height or world.width/world.height. Game pixels don't change when the game is scaled. Link to comment Share on other sites More sharing options...
QLNEO Posted July 22, 2017 Author Share Posted July 22, 2017 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 More sharing options...
samme Posted July 22, 2017 Share Posted July 22, 2017 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 More sharing options...
samme Posted July 22, 2017 Share Posted July 22, 2017 sampleText.setTextBounds(0, 0, this.game.width, this.game.height); Link to comment Share on other sites More sharing options...
QLNEO Posted July 22, 2017 Author Share Posted July 22, 2017 Ah, you meant the text bounds. I tried to change game.width/height in init() instead. 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 More sharing options...
QLNEO Posted July 24, 2017 Author Share Posted July 24, 2017 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 More sharing options...
Recommended Posts