Custom canvas attributes? Avoiding squished text in Html5?

#1

I am duplicating an archived post, here: https://muut.com/i/openfl/general:custom-canvas-attributes-a

#2

I’m not aware of a way that you can customize the attributes of the canvas that Lime creates, though in regards to whether smoothing is enabled or not, this should be done per-object when OpenFL is performing canvas rendering, based upon settings such as “smooth” for bitmaps, and I think, some of the settings on TextFields that are designed to make them look better with bitmap/pixellated text

#3

Thanks for the response!

All of my graphics are created by simply making new bitmap objects and placing them on the screen. When creating the bitmaps for this game I always specify smoothing = false;

Is there another place I need to adjust a smoothing property?

Right now, in html5, my game runs in one of two manners. Without the dom tag I get blurry and squished text, everything else fine
img1

With the dom tag the text is fine but smoothing turns on for everything else when I don’t want it.
img2
There is also some visual artifacting, you can see a broken line of pixels behind the bartender.

(My game is native 480x270, being blown up to high res)

#4

Hmm, interesting. I’m guessing that in DOM mode, it may be using standard HTML images, which always smooth by default, I believe. Scaling is done using CSS. Perhaps that’s where the one pixel bleed comes in, and maybe we could do something extra to disable smoothing on images? I forget if they added a CSS property for that.

As for the font, is it totally custom, or does it come from a font? I wonder if allowing OpenFL to generate a web font would look any different / better? Also, do you use the grid fit type and text field type in order to try and disable smoothing on it? (oh, sorry, remembering you use images only)

#5

The font I am using is snoot.org pix 10

http://www.1001fonts.com/snoot-org-pixel10-font.html

This behavior persists with two other fonts I have tried, liberation sans and press start. They are all ttf fonts.

I display all my fonts as text inside of text fields. I was unaware there was a way to set smoothing for textfields? I don’t see any property like that in the class. I’m also not familiar with ‘grid fit’ type?

EDIT: also I should mention that I haven’t upgraded to 2.1, I have some large pre-2.1 projects and the major backend changes have me nervous :confused: