Is it still not possible to disable antialiasing for fonts in C3?

Post reply
0 favourites
  • 13 posts
From the Asset Store
Antidote Horror Pixel Font Sprite Font
$2.49 USD
Horror Halloween Pixel Art Sprite Font Space Data included
Antidote Studios's avatar
Antidote Studios

  • Blurry fonts look ugly with pixel art. I know about spritefonts, but this is not an option.

    Tagged:

  • also curious about this. i don't know if this would be otherwise helpful, but i used this tool: yal.cc/r/20/pixelfont to make my own pixel font into a woff but it's still a bit ugly, especially at small resolutions

    the 2560x1440 version looks okay, you gotta squint to really notice it at least. but that's only really helpful if you can make your own font anyway, which isn't the case if you're using chinese or other character sets.

  • You could try this css.

    developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

    Says it’s supported by most browsers currently?

  • You could try this css.

    How do I use css for Text object?

  • Unsure. I’d have to fiddle with it. CSS lets you apply rules such as for all canvas elements on the page.

    The text object uses a canvas element that isn’t added to the page to render the text. That canvas is then copied to a texture which is then drawn. I think that canvas is hard to access directly, and will be harder once they obfuscate everything.

    Actually I’d want to take a step back and just try that on a canvas element directly outside of construct to see if it even works.

    If it ends up not working for text on canvas you could try it on the htmlelement plugin, or whatever it’s called.

    Beyond that maybe we’d need to bypass the browsers text rendering entirely and render text directly using a library like free type or something where we have full control. But realistically that would be to make a texture atlas that construct then uses to render text, probably via a custom plugin since existing solutions by using distort meshes or tiledbg to do it is too slow or may end up being too tedious.

  • Looks like it works on iOS. Basic test. There’s some other css variations of font-smooth needed to support most browsers.

    Probably nothing we can do as users to get the text object to do this. CSS can only be added to elements added to the webpage or elements we can access. So best as a feature request or get a dev to make a custom text object plugin or something. Probably could get by using some js to draw to an html canvas, then get the dataurl from that and load it into a tiledbg object whenever you want to change text. 

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#canvas{
font-smooth: never;
-webkit-font-smoothing: none;
image-rendering: crisp-edges;
}
</style>
<canvas id="canvas" width=100 height=100></canvas>
</body>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font="10px arial";
ctx.fillText("testing", 0,50);
</script>
</html>

  • Nevermind about using font-smooth css. Mac and iOS stuff only seem to support it. I tested on Chrome for windows and it does nothing. Oh well, so close.

    iOS uses the freetype library to rasterize it's fonts to an atlas, and while there is a js port it seems to be a very low level beast.

    Still looking though. Turning off text aliasing doesn't seem to be something you can reliably do without rasterizing the font directly which is pretty low level.

  • Mac and iOS stuff only seem to support it. I tested on Chrome for windows and it does nothing. Oh well, so close.

    Ah, it's a shame.. Thanks for trying!

  • The only trick I can think of would be to fake the Text input object as text, but I don’t know how it would affect performance, layer management, etc. Probably this is stupid. 🤔

    Edit: And probably other drawbacks that I’m not aware of, off the top of my head. 

    	#your-textinput-object {
 background: transparent;
 border: none;
 outline: none;
 color: white;
 -webkit-font-smoothing: none;
 -moz-osx-font-smoothing: grayscale;
 font-smooth: never;
}

  • The deeper I look the more it looks like removing anti-aliasing will never become a standard thing. Which makes sense since anti-aliased and clear type text is better looking in most cases. Most fonts don’t look good aliased.

    Crisp aliased text is niche feature of low res pixel games. The easiest solution is basically using the alpha clamp effect on the text for a general case. But a spritefont will likely look better, but we probably need better tools to generate them from fonts.

    cesisco

    That’s what I tried too. But it’s only a Mac/iOS thing. It doesn’t work for other platforms. Our only solution is a spritefont or maybe use the alpha clamp effect on the text.

  • Oh, I forgot about the alpha clamp! We can try it for some texts.

  • I did some further tests. Fullscreen scaling is set to "low quality" and I tested text done three ways for three fonts.

    First its the normal blurry look we get with the Text object.

    Second is the same Text with the "alpha clamp" effect with a threshold of 50.

    Third is rasterized with the FreeType library without smoothing.

    Using alpha clamp looks like it could be usable for some fonts, and you could probably fiddle with the threshold per font. The downside of it is the fonts look more rounded, and thin characters cause gaps.

    FreeType has nice results, even with thin parts. The con is it's probably slower, and the js ports aren't in a super usable state.

    I ended up using this library and heavily modifying the example to get the results above inside C2, but I wouldn't call it user friendly so I'm not posting it.

    github.com/metafloor/freetype-js

    Anyways as is it could be handy to make a tool to generate crisper spritefonts from a font.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • The deeper I look the more it looks like removing anti-aliasing will never become a standard thing. Which makes sense since anti-aliased and clear type text is better looking in most cases. Most fonts don’t look good aliased.

    Crisp aliased text is niche feature of low res pixel games. The easiest solution is basically using the alpha clamp effect on the text for a general case. But a spritefont will likely look better, but we probably need better tools to generate them from fonts.

    cesisco

    That’s what I tried too. But it’s only a Mac/iOS thing. It doesn’t work for other platforms. Our only solution is a spritefont or maybe use the alpha clamp effect on the text.

    I don’t know if you realized that I was applying that CSS to the “ "Text Input object" to fake it as Text, and that works on Chrome😉. But that would be a nasty workaround to deal with🤮

Post reply
  • 13 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)