Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text Graphics seem pixelated regardless of quality #2291

Closed
eonarheim opened this issue Apr 9, 2022 · 0 comments · Fixed by #2294
Closed

Text Graphics seem pixelated regardless of quality #2291

eonarheim opened this issue Apr 9, 2022 · 0 comments · Fixed by #2294
Labels
bug This issue describes undesirable, incorrect, or unexpected behavior

Comments

@eonarheim
Copy link
Member

eonarheim commented Apr 9, 2022

Steps to Reproduce

Even though Text's default image filtering is blended by default, the text still renders in a pixelated.

// Game set to pixel art
const game = new ex.Engine({
  ...
  antialiasing: false
});

// Text smoothing is on
const text = new Text({
    text: 'Wave 1',
    font: new Font({
        size: 32,
        family: 'Kanit, sans-serif',
        quality: 8,
        smoothing: true
    }),
})

image

Expected Result

Text graphics should render smoothed/crisp if possible by default

Actual Result

Text is pixelated

Environment

  • browsers and versions: Chrome 100
  • operating system: Windows 11
  • Excalibur versions: v0.25.2
  • (anything else that may be relevant)

Current Workaround

None

@eonarheim eonarheim added the bug This issue describes undesirable, incorrect, or unexpected behavior label Apr 9, 2022
eonarheim added a commit that referenced this issue Apr 9, 2022
eonarheim added a commit that referenced this issue Apr 9, 2022
Closes #2291

This PR assists in pixelated Text rendering by increasing the number of internal pixels available on the canvas, to do this I added a `pixelRatio` that can be set at `Engine` constructor time.

Before antialiasing is off (pixel art mode), default `pixelRatio`

<img width="230" alt="image" src="https://user-images.githubusercontent.com/612071/162589397-59466303-1cd7-4b5e-926b-6033bd4af9c7.png">


After antialiasing is off (pixel art mode) but `pixelRatio` is set to 4

<img width="227" alt="image" src="https://user-images.githubusercontent.com/612071/162589388-fe9c9a81-5863-4630-80e8-92aa6d22308d.png">


## Changes:

- Added `pixelRatio` option to `Engine` constructor
- Added/updated tests
- Commented Font renderer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue describes undesirable, incorrect, or unexpected behavior
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant