Hi,
How do we disable Anti-aliasing of images & text on HTML5 & Android? (making a pixel art game)
Hi,
How do we disable Anti-aliasing of images & text on HTML5 & Android? (making a pixel art game)
In the import settings for the images, there should be a checkbox called Filter
, and if you disable it and reimport, linear interpolation should be disabled :smile:
Ok, what about TTF text?
Please see image below - text looks bad:
https://fallenangelsoftware.com/stuff/files/RaidOnTheRiver/Development/ROTR-Start-01.png
You can try using Viewport stretch shrink instead of scaling the resolution is code. This will be better for pixel art games as it won't blur the image. Try setting a value of 2 or 4 for shrink in the project settings.
Sorry I don't see that in "Project Settings"
Below is what I have:
I'm sorry, it's called shrink.
I want to scale up not down. Is that not possible in "Project Settings"?
Yes, it scales up. Not sure why they called it shrink, it does the opposite. For example, if you set your project resolution to "640x360" and set shrink to "2", the game will render at "640x360" but the window size will be "1280x720" and each 1 pixel in your game will fill a 2x2 pixel square on the screen.
@JeZxLee said: Ok, what about TTF text?
In the dynamic font settings, one of the tabs should have a checkbox called filter
(property documentation).
Create a new dynamicfont and your ttf file loaded in click the .ttf file then uncheck anti-aliasing hope that helps
What looks like anti-aliasing could possibly be caused by x and y coordinates not being integers. this can be fixed either with code, or paying close attention to the numbers you use for placement of visual elements.