Bitmap image has blurry pixels

Help
#1

Hi,

I’m new to OpenFL and I’m just trying it out to find out if I should use it for my projects. I tried drawing a simple line pixel by pixel to a BitmapData, but somehow it seems blurry.

line

line2

Up close you can see the line is somehow anti-aliased and also the end of the bitmap image is also a bit anti-aliased.

I don’t know if I’m doing something stupid here or if there is some setting I can set on or off or something. :sweat_smile: I’m using OpenFL 8.7.0 and Lime 7.2.0. I tried it on windows/hxcpp, neko and air targets and they all have this issue.

Here’s the code: https://pastebin.com/2Xv5iqXn

#2

Looks fine on my end on Windows. How did you zoom into the picture (the zooming might have caused the antialiasing).

Also, using Sprite, you have access to sprite.graphics.drawLine(), which is a vector line. Sprite is vector while Bitmap(Data) is raster.

#3

I took a screenshot and used nearest neighbour scaling on it. :slight_smile:

Ok, now I tried it on my Mac and the pixels are crisp and clear.
line4

line3
line3.png748×598 11 KB

Also the edges of the bitmap are not anti-aliased now. :thinking:

Yeah, I looked in to the sprite.graphics -functions also. I actually want to control how the line is drawn and also it seems to use anti-aliasing on the line and I’m aiming at crisp pixels (maybe there is a way to turn that off?). :smiley:

#4

Ok but that was on the neko target, I built a mac/hxcpp build and it has the same blurry pixels issue as the windows builds. :face_with_raised_eyebrow:

#5

Does stage.quality = LOW make a difference?

#6

Nope, unfortunately it doesn’t. :confused:

#7

Oh, also. Do you use a window width/height in your XML, or if not, do you handle Event.RESIZE on the stage?

Our default HTML template will apply CSS scaling to blow up the size of content to fill the screen, but if you use <window resizable="false" /> or handle resize events, it should be possible to have things crisper. You could also poke around at the CSS on the page, and see if something seems to make your content blurrier

EDIT: Also, we don’t enable <window allow-high-dpi="true" /> by default on HTML5 projects, if you’re using a “retina” screen

#8

That code from the pastebin is the only haxe file I have in the project and the project was just created with the openfl create project -command. No modifications has been made to the project.xml or anything else, just that Haxe code I pasted earlier. :slight_smile:

So to recap, what I have tried on what platforms:

Windows (Lenovo T440p):

  • AIR (Blurry pixels)
  • Neko (Blurry pixels)
  • HXCPP (Blurry pixels)

Mac OS X (Macbook Pro):

  • AIR (Crisp pixels)
  • Neko (Crisp pixels)
  • HXCPP (Blurry pixels)

I’m using Haxe Preview 5 version and Visual Studio Code to build the projects (if that makes any difference). :slight_smile:

I’m probably going to try that code on my other Windows machine soon to see if it’s only an issue with my Windows laptop, but as the Mac hxcpp has the same problem, I doubt it. :thinking:

#9

Please try adding <window allow-high-dpi="true" /> to your project.xml, and see if it makes a difference. You could also try -Dcanvas on HTML5, or -Dcairo on native (openfl test html5 -Dcanvas, etc) and see if it looks different at all