search

SabakiHQ / Shudan

A highly customizable, low-level Preact Goban component.
MIT License
84 stars 22 forks source link

Stone images look pixellated #17

Closed psygo closed 5 years ago

psygo commented 5 years ago

As far as I know, Sabaki is using .png images as the stones. However, they do not scale well with the size of the screen.

What I would suggest then is to use .svg or .eps formats, which use vectorial standards. This way, the image is drawn from a set of rules and not from pixels themselves. The image quality is independent of the size of the image then.

You can easily use convertio.co to convert the images you have into whatever format you have — but do it under incognito mode so you have an infinite amount of conversion credit.

psygo commented 5 years ago

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.

yishn commented 5 years ago

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?

psygo commented 5 years ago

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.

psygo commented 5 years ago

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.

yishn commented 5 years ago

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.

psygo commented 5 years ago

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.

yishn commented 5 years ago

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?

psygo commented 5 years ago

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.

yishn commented 5 years ago

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.

psygo commented 5 years ago

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.

yishn commented 5 years ago

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.

psygo commented 5 years ago

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.

yishn commented 5 years ago

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.

psygo commented 5 years ago

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:

png_vs_svg_benchmark

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

sabaki_svg_sample

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):

svg_pixelation

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)?

yishn commented 5 years ago

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):

Pixellation?

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.

psygo commented 5 years ago

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

svg_2x2_benchmark

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

svg_10x10_benchmark

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.

yishn commented 5 years ago

Then I will close this issue.