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

[garry-ut99]

There has been discovered some bitmap rendering issue compared to Piskvork: https://github.com/MaciejKozarzewski/AlphaGomoku/issues/2#issuecomment-1804826531 https://github.com/MaciejKozarzewski/AlphaGomoku/issues/2#issuecomment-1805399684 (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 :

Screenshoot with grid size 32 :

Screenshoot with grid size 26 :

[Joker2770]

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

[garry-ut99]

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 :

[Joker2770]

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

[garry-ut99]

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.

[nguyencongminh090]

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]

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]

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