0

Swing Pixel Stretch / Distortion

I have been trying to render a very small font (5 pixel per 5 pixel) on a JPanel for a personal project where the graphics are composed mainly of text. But as soon as I rendered a ton of dots and #'s  for debugging purpose, I ran into a bug. That bug was at the time ignored, but now that I am trying to polish the system, its really becoming a nuisance and can't find anything that helps online.

The Bug

The 5x5 images are scaled up and down almost randomly, making the graphics horrible. [(see here)][1] The lines of the #'s aren't regular, nor the dots sizes.

Expected Behaviour

The lines should be regular , and the dots should be evenly sized.

What I tried.

I toggled on and off antialiasing ( RenderingHints ), to no avail. My font (that was made using a great website, [this][2]), has been set to a letter spacing of 5px, and has been exported to ttf. Im drawing it on a BufferedImage  at 5x5 pixel size, then upscaling the  BufferedImage to twice its size for visibility. I had this problem before on another project I did with a friend, yet they didn't have it on their computer while mine was still bugging.

The Code

I'm registering the font as so:

InputStream stream = ClassLoader.getSystemClassLoader().getResourceAsStream("FontName.ttf");
font1= Font.createFont(Font.TRUETYPE_FONT, stream).deriveFont(5f);
GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment(); 
ge.registerFont(font1);

I then draw pieces using the following method: g.drawString(s.substring(i,i+1),x*FONT_WIDTH+i*FONT_WIDTH,y*FONT_HEIGHT+FONT_HEIGHT); (All the variables are at their good values). I change the RenderingHints the following way:

 g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_OFF);
 g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_NEAREST_NEIGHBOR);

I turned off antialiasing because I felt like it could do that kind of thing.

Conclusion

I hope someone would provide me with either a way to fix my bug or a path I could follow to fix it.

Edit

Added System.setProperty("sun.java2d.uiScale", "1");from sorifiend's link, fixed the scaling issues. Edit 2: There still are some bugs, but they are drastically reduced. [1]: https://i.stack.imgur.com/QApbU.png [2]: http://www.pentacom.jp/pentacom/bitfontmaker2/#

Leon Lavoie
  • 17
  • 5
  • 1
    If you don't get a great answer soon, then consider creating a decent and valid [mre] and post the code with your question as code-formatted text. Side note: shouldn't the font be a `Font.MONOSPACED`? – Hovercraft Full Of Eels Jun 21 '22 at 02:30
  • Also check your systems DPI settings – MadProgrammer Jun 21 '22 at 02:34
  • @MadProgrammer what are they? How do I change them? Googling DPI settings only shows stuff about mouse sensivity. – Leon Lavoie Jun 21 '22 at 02:41
  • @HovercraftFullOfEels I tried with `Font.MONOSPACED`, but the plan is to use my own font in the end. Also, Monospaced doesn't support 5x5 properly. The problem also reappears. – Leon Lavoie Jun 21 '22 at 02:43
  • 1
    @LeonLavoie You system DPI settings - these can screw with Swing – MadProgrammer Jun 21 '22 at 02:58
  • 1
    Or you can fix the scaling via code like shown here: https://stackoverflow.com/a/65419805 This is typically only an issue when you have a high DPI/resolution screen, and the operating system attempts to scale any applications to a larger size for visibility, but one side effect is that it breaks images (By default, windows will try to scale applications and their contents on a 4k screen to 150% or 1.5x the original size, and would explain your issue). – sorifiend Jun 21 '22 at 02:59
  • 1
    Scaling images larger always leads to image distortion. One solution is to create the images as large as you expect them to be, and only shrink them. You also have to turn off any operating system scaling. – Gilbert Le Blanc Jun 21 '22 at 06:36

0 Answers0