Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GUI board/stones looks bad: pixelisated/blurred compared to Piskvork #6

Open
garry-ut99 opened this issue Nov 10, 2023 · 7 comments
Open

Comments

@garry-ut99
Copy link

garry-ut99 commented Nov 10, 2023

There has been discovered some bitmap rendering issue compared to Piskvork:
MaciejKozarzewski/AlphaGomoku#2 (comment)
MaciejKozarzewski/AlphaGomoku#2 (comment)
(alread tried reducing grid size from 36 to 32 (which matches HGarden2 bitmap from Piskvork)
or even to 26, but didn't help, despite the size was reduced, the pixelisation is still here)
(also pinged nguyencongminh090)

Screenshoot with default grid size 36 :

alt text

Screenshoot with grid size 32 :

pixels_32

Screenshoot with grid size 26 :

pixels_26

@Joker2770
Copy link
Owner

I think it is OK for the render. Please share by pulling requests if you have better bitmap.

@garry-ut99
Copy link
Author

garry-ut99 commented Nov 10, 2023

I don't think it's matter of "better bitmap".
What I mean is that QPiskvork uses some bitmaps from Piskvork,
in Piskvork there is not pixelisation/blur with same bitmaps and looks much better,
while the same bitmaps looks worse/pixelisated/blurred in QPiskvork, even after reducing grid size significantly.
There seem to be some quality loss / artifacts happened while using same bitmaps from Piskvork in QPiskvork.

See the same skin HGarden2 looks very good in Piskvork :

pisvkork

@Joker2770
Copy link
Owner

@garry-ut99 Well, where do you think the problem is? Could you please fix it?

@garry-ut99
Copy link
Author

garry-ut99 commented Nov 10, 2023

I don't know because I just test programs, write opinions, report bugs & feature requests, for many programs on the whole github, which already takes much time for me, thus I don't have time to investigate source codes, nor I'm involved so much, but I think maybe @nguyencongminh090 can help you, as he does some gomoku coding stuff actively, he even developed his own gomoku GUI.

@garry-ut99 garry-ut99 changed the title GUI board/stones looks bad: pixelisated GUI board/stones looks bad: pixelisated/blurred Nov 10, 2023
@garry-ut99 garry-ut99 changed the title GUI board/stones looks bad: pixelisated/blurred GUI board/stones looks bad: pixelisated/blurred compared to Piskvork Nov 10, 2023
@nguyencongminh090
Copy link

I think use solution from Piskvork is okay. I think Piskvork slice/crop image and arrange it only (directly in loading). I didn't take a look at QPiskvork code. But from folder, I can't find bitmap file so I think you embed it already. Perhaps, I think you had processed the bitmap image and classify it. Not sure how you did but it seems a bug appeared during process.

Have you ever taken a look at Pisvork's bitmap size? The key is WIDTH of it. The structure of it is SQUARE and 1 column consist information about background color. You can use some program such as PAINT from Window, zoom at maximum and turn on grid, then look at the last column you will see a magic.

If you knew it already then the problem is at somewhere else. Also the idea of zoom image is bad. Bitmap image is very small just about 32px. You may know if zoom a small image with low resolution, it will be blur. If you want to make it larger, the only solution is change bitmap. You can try to prepare/ or draw few image and set a size for it then let user choose them.

Unfortunately, I don't have time for coding. My message is just for reference only.

@garry-ut99
Copy link
Author

garry-ut99 commented Nov 10, 2023

Yes, I was thinking the same - that he just upscaled the bitmaps somehow (accidentaly or not).
Upscaling bitmaps is not a good idea, because it reduces their quality, creates blur and pixels.

Better soultion is :

  • to use a bigger bitmap, and then downscale it when changing grid size,
    because downscaling doesn't reduce quality so much as upscaling
    (the bigger bitmap should be created from scratch!)
  • or to use 2 or 3 bitmaps for each skin, for example: HGarden2_small.bmp, HGarden2_medium.bmp, HGarden2_big.bmp, and apply one of them depending on grid size
  • or use vector graphics (svg) instead of bitmaps (bmp), they are designed to be upscaled without quality loss,
    for example there is a good tool to convert bitmaps to vectors: https://vanceai.com/posts/vector-magic/,
    there are also other tools which are free

@Joker2770
Copy link
Owner

Joker2770 commented Nov 11, 2023

So sorry for that I have not got better solution, and it is necessary to upscale bitmaps for the global layout currently.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants