Disable Anti-aliasing Of Images & Text On HTML5 & Android?

UnknownUser

Hi,

How do we disable Anti-aliasing of images & text on HTML5 & Android? (making a pixel art game)

TwistedTwigleg

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:

UnknownUser

Ok, what about TTF text?

UnknownUser

Please see image below - text looks bad:

https://fallenangelsoftware.com/stuff/files/RaidOnTheRiver/Development/ROTR-Start-01.png

cybereality

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.

UnknownUser

Sorry I don't see that in "Project Settings"

Below is what I have:

cybereality

I'm sorry, it's called shrink.

UnknownUser

I want to scale up not down. Is that not possible in "Project Settings"?

cybereality

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.

TwistedTwigleg

@JeZxLee said: Ok, what about TTF text?

In the dynamic font settings, one of the tabs should have a checkbox called filter (property documentation).

UnknownUser

Create a new dynamicfont and your ttf file loaded in click the .ttf file then uncheck anti-aliasing hope that helps

UnknownUser

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.