Text becomes blurry on scaling

Phaser 3
1

Hi, new to Phaser.

I’m building a NES Mario clone as a first exercise to get to know Phaser 3.

I’m using a 16x16 tile map. I want the game to scale with the screen size, since a 16x16-based world is tiny, So I added a scale property to the config object:

scale: {
      parent: 'game_container',
      mode: Phaser.Scale.CENTER_BOTH,
      width: 350,
      height: 208
}

I gave the parent container (‘game_container’) a max width of 800px.
I added a score text in the corner of the screen - at the original size (350px width), text looks good.
The problem: at 800px width, it looks blurry:

image
image.png851×545 3.29 KB

Is there anything I can do to make the text stay crisp even on scaling?
or would I have to rebuild everything with bigger tiles and give up on scaling?

Thanks!

2

You have a couple of different options here. I would probably reccomend 1 as its the easiest (IMO):

  1. Create the text into another scene, and have its own class handle all of it’s state. This will not scale if you apply scaling to the parent (or main game) scene. But given you’re code, you’re trying to scale the entire game with parent game_container. I do most of my scaling in a “main scene” and the other scenes all remain unscaled.

  2. Apply .setResolution(10) to the text. You want to avoid doing this as it is Rich posted in the docs that it’ll eat up memory quick, but its there:
    https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html#setResolution__anchor

  3. Use a bitmap text and apply scaling to that. This is better for performance than option 2, but I’ve never personally done it and imagine it probably is a PITA.

3

I tried setResolution, made the text even worse
I’ll try to do bitmap text.

Thanks!

4

I see you don’t actually define scaling in the init config just centering? Are you using something like:
scale: { mode: Phaser.Scale.ScaleModes.FIT } ?

Another option for retro type game that looks great is using retrofonts which are monospace tileset type picture fonts. They seem to scale pretty well. Anyway with FIT scaling normal fonts work pretty well aswell.

5

I ended up creating and using a bitmap font which turns out to work pretty well.
I used BM Font to create it, if anyone’s wondering.

1 Like
6

Hello @udidol, i know you figure this out but if you have time, can you please share your index.html, i had something similar like this and i figure that on index.html’s css i have some rendering code which makes all game blurry. After deleting those, it was done :slight_smile:

7

Hey, I don’t really have anything special in my HTML file.

This is it:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Super Mario</title>
<script src="./node_modules/phaser/dist/phaser.min.js"></script>
<link rel="stylesheet" type="text/css" href="game.css" />
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="page_wrapper">
    <div id="game_container"></div>
</div>
<script src="game.js"></script>
</body>
</html>

This is my CSS file:

html, body, #game_container {
    margin: 0;
    padding: 0;
    image-rendering: optimizeSpeed;              /* Older versions of FF */
    image-rendering: -moz-crisp-edges;           /* FF 6.0+ */
    image-rendering: -webkit-optimize-contrast;  /* Webkit (non standard naming) */
    image-rendering: -o-crisp-edges;             /* OS X & Windows Opera (12.02+) */
    image-rendering: crisp-edges;                /* Possible future browsers. */
    -ms-interpolation-mode: nearest-neighbor;    /* IE (non standard naming) */
    image-rendering: pixelated;                  /* Chrome 41 */
}

#page_wrapper {
    margin: 0 auto;
    min-height: 100vh;
    max-width: 800px;
    position: relative;
}

#game_container {
    max-width: 800px;
    max-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
  
#game-container>canvas {
    border-radius: 5px;
}
1 Like
8

Hey @udidol, i have this pixel problem because of the

this actually made my game pixelated. My canvas area is 1920x1080 and it was getting pixel’s when i small the canvas size e.g when i gave mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT to my scale object inside config :slight_smile:

Maybe you could also try to get ride of those

Update:

Hey again, I told that I gave mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT but i have changed my config like this:

scale = {
    width: 1920,
    height: 1080,
    parent: 'core',
    fullscreenTarget: 'core',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    mode: Phaser.Scale.FIT,
}

After changing this FIT it’s produced this issue tho

1 Like
9

Interesting, I’ll try that, thanks!