Stone images look pixellated about shudan HOT 17 CLOSED

Sabaki allows you to customize the stone images as a user, you don't need to hack anything. Just download the Shudan SVG stone images from GitHub and specify them under 'Preferences' > 'Theme' in Sabaki.

from shudan.

When you take a screenshot, the screenshot itself is a pixel image, thus not scalable. When zooming in, the screenshot naturally becomes pixellated.

Since our stone PNG images are of dimensions 264px x 264px, you would need to resize the board so that the stone size is way beyond 264px to notice any pixellation. For example, here's a screenshot taken with stone size ~282px and you can barely notice any pixellation (In your first screenshot you zoomed in at 400%, i.e. a stone size of 1056px):

My suspicion is that sabaki is somehow converting the svg back into a non-scalable image.

No, we're not doing this unnecessary effort. If anything, Chrome converts the SVG into a pixel image.

from shudan.

By using .svg or .eps, I think you could even let the user directly and dynamically control the color and size of the stones through editing the image files.

from shudan.

The Shudan stone images are already available in SVG format (black, white). In the past (~3 years ago) I also tried to push for SVG images, however @fohristiwhirl complained about how the SVG images are rendered by Chrome. They were less anti-aliased and the overall quality seemed to be worse when compared to resized PNG images.

But maybe the SVG rendering has improved since then. Maybe you'd care to try this out and do a side-by-side comparison?

from shudan.

Maybe you'd care to try this out and do a side-by-side comparison?

You mean try/create/customize it as a developer or a user? I would really love to try it as a dev, but I don't know much about JS and ElectronJS — at the beginning of this year I tried to learn JS just because I was really enthusiastic about ElectronJS, Sabaki and some other software, but, in the end, I work with Python and don't have much time or energy to learn another language at the moment.

I can hack my local Sabaki and put the .svg image inside it and see if it works though, I think (I managed to do it once in Windows, but not in Ubuntu, which is what I use right now). I'll try to do it today or tomorrow.

In any case, you could maybe try putting this as an option for in the preferences. I can say that high resolution or big monitors make the stones look really blurry with the .png images.

from shudan.

Oh, and I know this is a bit off-topic and kind of negative opinion/news, but my mobile dev colleagues have all been very much pissed at React and its derivatives lately. They all think it's not at all scalable anymore and are all trying to move away from it; their choice right now is Flutter.

Again, I don't know much about the topic, I'm only forwarding their knowledge.

from shudan.

Oh yes, I forgot about that.

I did try to change the image to an .svg but it doesn't seem to have changed anything. It's as blurry as it was, I don't know if you're gonna be able to see it from the picture:

I put other images on the file paths to if it was somehow not changing anything in the settings, but with other random images the settings were changed.

from shudan.

It would be useful to have a side-by-side comparison between the SVG images and PNG images. Why do you say that the stone images look blurry in your screenshot?

from shudan.

To me, the edges certainly look pixelated, especially wtih the White stones, don't you think? Is it possible to change the pixel sizes with gradients within the .svg code (I don't know that much about .svgs)?

I didn't put the side by side-by-side comparison because they looked identical.

from shudan.

Honestly, I don't think the white stones look pixelated in your screenshot. If SVG and PNG stone images look literally identical, I'm inclined to leave things as it is now.

from shudan.

Really? It's not possible to see the tiny squares composing the White stones' images (opening the linked image in a bigger web page on a separate tab does help to spot the difference)? They look considerably different from the good resolution of the Goban.

from shudan.

Well let's suppose the white stones do look pixelated, it just doesn't seem switching to SVG images would help anyway? Unless you have another solution, I don't know what to do about that.

from shudan.

What happened is that I might have misinterpreted the cause of the problem, not that it doesn't exist or is solved. At best, in my opinion, this issue should be renamed/relabeled, and not closed.

from shudan.

You're right, I've renamed the issue. But for the record, I still don't think there's any problems with the stone images in your screenshot.

from shudan.

Just so we establish some sort of benchmark: below we can see that no matter the zoom, the svg does scale, while the png doesn't:

In my case, what I see (without zoom) is this:

The borders of the Black and, specially, White stones are pixelated, they have tiny little squares. If it is too difficult to see, now with zoom (the zoom is taken on top of the screenshot, it does not come natively):

I know that zoomed image will probably seem misleading, since it is not taken from the running app itself, but it is as close as I could come up with as a method of convincing others that what I see is indeed the reality. If you have a better idea of how to do this, please do let me know.

My suspicion is that sabaki is somehow converting the svg back into a non-scalable image. Otherwise, I have no clue as to why this is happening. Maybe it also only happens in Linux (I don't recall having a similar problem in Windows, but my monitor was really low res back then)?

from shudan.

Here is what I get with a 2x2 board (approximately 280 px by 280 px stones):

And here is what I get with a 10x10 board (aproximately 80 px by 80 px stones):

10x10 is around where you start to see the pixelation in my opinion. I'm really puzzled now, but I have two possible hypotheses for the causes:

1. My graphics card does not interact very well with Ubuntu and, thus, it cannot render some images very well.
   • I have an NVIDIA GTX GeForce 1060 Ti, which is far from bad, but I experience some issues daily with current Desktop setup. For example, when watching videos, sometimes there will be some kind of frontier in the middle of the images, which reminds me of old VHS tapes.
2. My monitor's resolution might not be good enough to show circular shapes when the stones get smaller.
   • The smaller the circle gets the smaller the pixels should be in order to not appear as squares on its borders.
   • If it is the case, it's probably closely related to (1).

Given what I exposed, I'm more and more of the opinion that this problem is not really related to Sabaki. If you agree with this, I'll be closing this issue.

from shudan.

Then I will close this issue.

from shudan.