Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account
This post has been closed. You can still view previous posts, but you can't post any new replies.

Roll20 Crops Down and Blurs Tokens?

Hi, From the first day I noticed the token blurriness in Roll20, but only yesterday I came to gather the required data to finally post my thoughts about it. Short version: 1) Roll20 crops down and blurs tokens, resulting in a lack of image quality. Is there a way of avoiding this? If not, I'd suggest making some changes in the Roll20 render engine. 2) Roll20 places the grid lines over tokens, resulting in image overlap. Is there a way of placing grid lines under them? If not, I'd suggest to implement it as well. Both of these things can be seen by contrast in the screenshot below, which is the reason for placing two suggestions in a single thread. Extended clarification: I created a character token yesterday, and I noticed something while testing it in conjunction with some tokens by Devinnight inside the Roll20 app. After spending effort in making a detailed piece, I saw that Roll20 displayed it a bit too blurred, diminishing the contrast, sharpness and quality of the overall picture. Intrigued by this, I tested the same token in another VTT —iTabletop— for seeing if there were noticeable differences in their respective rendering of tokens: the first one displayed a very sharp, pixel-to-pixel faithful image, while the Roll20 screen had it more or less blurred (see the above screenshot: the left sample is iTabletop and the right one is Roll20). I wonder if there is a way of bringing that image sharpness to Roll20 as well. After all, If I want to blur images or to have gaussian effects on them, I can use a filter before uploading my game assets to Roll20. What I suspect is that this is related with the fact that Roll20 makes us to define the grid by means of "units", and each unit is 70 pixels. Now, here I'm using hexes of 2 "units" each —for trying to keep token image quality—, because seemingly, in some way —even resizing while pushing the ALT key— Roll20 "auto-fits" tokens inside the allowed pixels per "unit"; but for instance, the upcoming Devinnight's tokens are going to be 200x200 pixels (low-res) and 400x400 (hi-res) (<a href="http://www.kickstarter.com/projects/1009057201/monster-tokens-by-devin-night" rel="nofollow">http://www.kickstarter.com/projects/1009057201/monster-tokens-by-devin-night</a>); but if you put them inside these Roll20 "units", they are going to be cropped down regardless even if they are low-res . . . Now, I find this as a drawback regarding image quality & sharpness. For getting a result more or less close to the image sharpness of iTabletop, I had to define my hexagons as having 4 "units", allowing higher-resolution tokens inside them, but on the other hand, I find Roll20 maps extremely cumbersome and impractical to handle under such grid setup. If you make your own hand-drawn artwork and tokens for your Roll20 games, likely you understand what I mean. — Thus, my suggestion is bringing higher resolution tokens to Roll20. Also, I'd like to find a way of placing the Roll20 map grid under the tokens, and not automatically above them. Besides the lower image quality, this additional aspect is also noticeable, by contrast, in the above screenshot. — So, my second suggestion is to be able to place the Roll20 grid under our tokens for avoiding image overlap.
Have you verified that the size of the token in Roll20 is the same as the native size of your token? If, for any reason, Roll20 resized it, you would have to change its size back to match the native one. I think that when you upload a graphic asset in Roll20, it makes some different scales versions, but I am not sure where I did read that.
Hi Patric C., The cropped down/blurred token in the Roll20 example screenshot above is 156x156 pixels after scaling it for the grid (1 hex = 2 units of 70 pixels each). The native size of the token is 600x600. Of course, for practical reasons it could be 400x400 instead, for instance, but that makes no difference regarding the point that I'm making. When I resize or scale tokens in Roll20 for matching the grid, there is the aforementioned loss of image sharpness and quality. But that isn't happening in iTabletop, even if you reduce the token's size to fit the grid. I clearly see that Roll20 crops down and blurs tokens; I don't know any other VTT doing this. Even Fantasy Grounds 2 keeps token image quality, no matter if you resize them down for fitting them into the grid. Here is another sample with the same token under Fantasy Grounds, with perfect image quality regardless the size: OTOH, as you can see Fantasy Grounds 2 doesn't places the grid over tokens, which is good.
If, for any reason, Roll20 resized it, you would have to change its size back to match the native one. I forgot to answer to this: if I do that, I would be completely unable to place the token inside a Roll20 hex grid cell. (If anyone wants to test it for himself, this particular token can be found here: <a href="http://tinyurl.com/9ejynv8" rel="nofollow">http://tinyurl.com/9ejynv8</a>)
Confirmed; I can detect a slight blurring when I test it with the full-size token in Roll20 vs. simply looking at the image. At that size, it's very slight, but it's there.
I don't understand. The tokens don't have to fit inside the hexgrid (and yours don't, the sword extend outside of the hex). Roll20 has indeed the very irritating behavior, when importing a graphic ressource, of force-resizing the tokens to make them fit into the grid. But you can now resize them to their original size by changing their dimensions. I suppose you make your tokens at the size they are supposed to be displayed? What is still missing is a way to choose the point of rotation of the token (the point that is going to be at the center of the square or hex). The best handling I have seen of that particular feature is in Maptool, that let's you import tokens at native size by default and then fudge their position to have them perfectly placed in their grid. I hope Roll20 shall have this kind of tool one day. edit: nice token, btw, but if it is the size you are using, it is not surprising that the result is different from your original. You should try changing its size to 70px/square or hex before importing it (it would also cut on file weight).
I would also like to add that bluriness or other artefacts due to scaling depend on the type of scaling. If the program scales at 50%, each group of 4 pixels becomes one pixel. If it scales at, for exemple 47,35%, the groups of pixels that are averaged are less regular. I don't know if, in your exemple, the token is resized by the same factor in Roll20 and in the others VTTs.
From what I can see in the comparison between iTabletop and Roll20, it seems that iTabletop uses your large image and scales it down at the different sizes, whilst Roll20 seems to be using an image that has been scaled to 70px/square and renders it when zoomed (that's what I was refering to when I was speaking about Roll20 making different scaled copies of the token). There must be quite a difference in speed if it is the case. As you seem to have zoomed in the VTT and up-scaled the screenshot, it is a little difficult to compare. Maybe you could take screenshots at 100% zoom and without changing the size of the screenshot. It would be more telling.
The blurring I could see was so slight it took me a while to notice it. So, for me, it's not a problem (and I expect pixelation or image quality degradation when using variable-zoom tools like VTTs; it's more or less inevitable). I generally go for lower-resolution images when I use VTTs so that I can save on file size; image quality is a secondary consideration. I just wanted to confirm that even at native size (600x600 px), Roll20 did have what appeared to be a faint blur when compared to just viewing the image, or using MapTool, for instance.
Okay, first off, the most helpful thing is to explain clearly exactly how the screenshot in the first post was taken, since I'm not sure on the details. You uploaded it, then resized it to match a grid size of 2 units? And then you took the screenshot at 100% zoom? Or some other zoom? And just to be clear, the browser (Chrome) zoom (under the view menu) was at 100% as well? Finally, you keep talking about "cropping", but as far as I can tell you are only talking about the possibility of a lower resolution image being used leading to blurring -- is there actually any cropping (e.g. part of the image is missing)? To clarify (again), when you upload an image we create several sizes of it. For example, I uploaded the token you attached and it created this thumb size in addition to the original: <a href="http://files.d20.io/images/175404/jlrBIaRaUVCwdRESicaWPw/thumb.png?1346075771" rel="nofollow">http://files.d20.io/images/175404/jlrBIaRaUVCwdRESicaWPw/thumb.png?1346075771</a> <a href="http://files.d20.io/images/175404/jlrBIaRaUVCwdRESicaWPw/original.png?1346075771" rel="nofollow">http://files.d20.io/images/175404/jlrBIaRaUVCwdRESicaWPw/original.png?1346075771</a> So if you are using the token at a size that's less than 200x200, it's going to use the thumb image instead of the original, so that it can load faster (the thumb is 53 KB vs the original size of 306 KB), since there's no point in loading up 600x600 pixels of information only to display it at 70x70 or whatever. Now, I'm not detecting any blurring at this point (the thumb image looks sharp at 200x200), so I don't think this part is the problem. There *may* be a bug where it's using the thumb image still even though the token is being displayed slightly larger than 200x200, which would cause blurring, because it's not taking into account zoom or something. So again, if you could tell me exactly how the original screenshot was taken I can look into that further. Also, in regards to Chris' last comment, I'm not seeing any blurring myself when using the token at its original size (600x600). Can you clarify further? - RD
Maybe what Chris sees is a reduced token seen at 600px? Anyway, all those sizes look like excessive overkill. As Roll20 can zoom up to 150% (which is quite enough, I think) a scale of 105 px per square seems to be the maximum useful resolution (or 210 if Axel is using a double square scale). Isn't it? (btw, differentiating between size and scale would make things quite clearer).
What I did was drop the 600x600 image into Roll20, at 100% zoom. At the same time, I viewed it using the built-in Windows Image Viewer. Comparing them side-by-side on two of the same model monitors, the Roll20 image appeared to be ever-so-slightly fuzzier than the Windows Image Viewer rendering. After a little more checking (doing an overlay of a screencap from the Roll20 window on top of the original image in GIMP), it looks like the Roll20 version, at the size it appeared when I just dragged and dropped it onto the window, is slightly larger than the native size. That is, when I dropped the 600x600 picture onto the Roll20 window, and then compared it's size to the image as displayed in GIMP, at full size, the elf girl is a bit bigger - by a few pixels - in roll20 than in GIMP - as if it had been slightly stretched.
Here's an image to show what I mean. The left side is the token when dropped into Roll20 and not resized in any way. I dropped it into Roll20 and then screencapped it. The right side is the token as displayed in GIMP, and not resized or adjusted in any way, except to desaturate the image. The yellow lines indicate the top and bottom of the token's head, and as far as I can tell, it appears that the token has been stretched vertically a bit in Roll20 (the left token's head is longer, top to bottom). Could it have anything to do with scaling for monitor aspect ratios? My monitors, for instance, are not widescreen.
Yeah, I'm not sure on that one, Chris. My guess would be it has something to do with the Canvas rendering in your OS/Browser combo. I honestly have no idea :-) You're using the set resolution advanced option to set it to 600x600, right? Maybe try messing around with a few other values (e.g. 598x600) or something and see if any of them look better -- that might give me a clue what's going on. I don't think that's what's causing the issue that was brought up in the OP, though, since that is barely a difference, whereas the OP is showing a major blurriness/mis-scaling problem.
Riley D., allow me a time for answering a couple of things before answering to you. But in advance, what I'm saying is that there is no "non-destructive scaling" in Roll20 but cropping down : even if you can later enlarge the token again to its native size and the quality is there again, while playing the image is reduced in size and quality.
Yeah, I'm not sure on that one, Chris. My guess would be it has something to do with the Canvas rendering in your OS/Browser combo. I honestly have no idea :-) You're using the set resolution advanced option to set it to 600x600, right? Maybe try messing around with a few other values (e.g. 598x600) or something and see if any of them look better -- that might give me a clue what's going on. I don't think that's what's causing the issue that was brought up in the OP, though, since that is barely a difference, whereas the OP is showing a major blurriness/mis-scaling problem. Aha. I had not manually set the dimensions; it turns out that the image when dropped into Roll20 was scaled to 630x630, rather than just left at 600x600. When I adjusted it, the blur I detected went away.
I don't understand. The tokens don't have to fit inside the hexgrid (and yours don't, the sword extend outside of the hex). Tokens must fit inside the hexgrid. Mine has a sword that goes beyond, which is an effect that I like, but it's the body what must be inside the grid cell. Just imagine a soldier with a polearm and you will not think of placing it in a single cell. But you can now resize them to their original size by changing their dimensions. I suppose you make your tokens at the size they are supposed to be displayed? Patrick, if I resize to original size, tokens are too large to fit in the grid cells. And no, I don't make my tokens at the size they are supposed to be displayed. I never would paint a 156x156 pixels token, because I paint them as full-fledged images (actually this piece originally was about 2000x2000 pixels, and it was cropped down on purpose in Photoshop for Virtual Tabletop use). Since these tokens will have more than a purpose, I let to the application the responsibility of allowing me to scale it according to my needs. What I don't expect is a "scaling down" that hurts the image quality. I never saw that behavior before. nice token, btw, but if it is the size you are using, it is not surprising that the result is different from your original. You should try changing its size to 70px/square or hex before importing it (it would also cut on file weight). Thanks for your compliment, but it's not the size that I'm using. Look again to the screenshots of iTabletop and Fantasy Grounds: both of them are displaying the 600x600 pixel token without any quality loss. Summarizing: it's not my token, it's Roll20 way of handling images, that needs to be fixed. If not, Roll20 is diminishing the quality even of the tokens that it sells in its Marketplace . . . Now I need to answer to the following post.
I don't know if, in your exemple, the token is resized by the same factor in Roll20 and in the others VTTs. It is. And that is part of the problem: when scaling-resizing ("cropping down") a token, Roll20 shows lesser image quality and blurriness, while the other VTTs keep the image quality with all its sharpness, regardless any scaling and zooming.
From what I can see in the comparison between iTabletop and Roll20, it seems that iTabletop uses your large image and scales it down at the different sizes, whilst Roll20 seems to be using an image that has been scaled to 70px/square and renders it when zoomed (that's what I was refering to when I was speaking about Roll20 making different scaled copies of the token). There must be quite a difference in speed if it is the case. iTabletop uses images regardless their size, yes, while Roll20 crops down them in order to be able to put them inside grid cells, or in any case it renders them cropped down. And yes, there is a difference in speed . . . iTabletop and Fantasy Grounds are much more faster and smoother. But I'm not critical with current speed, because Roll20 is still in beta stage. It performs OK, but in comparison with the other apps, it's slower zooming and panning. Just that. As you seem to have zoomed in the VTT and up-scaled the screenshot, it is a little difficult to compare. I don't remember doing that. I believe that the current Roll20 screenshot is at 100% Chrome/140 or 150% Roll20's zoom. In any case, the difference was very clear to me when, after testing the elf token in Roll20, I uploaded it to iTabletop for placing it on a map. It seems that you are asking for a new screenshot comparison, OK I will try.
Okay, first off, the most helpful thing is to explain clearly exactly how the screenshot in the first post was taken, since I'm not sure on the details. You uploaded it, then resized it to match a grid size of 2 units? Yes. If I don't resize the image to match 2 units, it's cropped down to a 70 pixels image, resulting in a much greater loss of image quality. That is why I always set the grid to 2 units in Roll20. No other reason. And then you took the screenshot at 100% zoom? Or some other zoom? And just to be clear, the browser (Chrome) zoom (under the view menu) was at 100% as well? Finally, you keep talking about "cropping", but as far as I can tell you are only talking about the possibility of a lower resolution image being used leading to blurring -- is there actually any cropping (e.g. part of the image is missing)? The conversion to a lower resolution image is what I'm calling here "cropping down", in the sense used by Photoshop (the Crop Tool crops down image to X pixel size; in other words, not because it is excluding any part of the token, but because it decreases the image quality. According to the screenshots of the other VTTs, it's possible to see that they aren't "creating different sizes of it", because effectively lower image sizes = lower quality and blurriness. When you zoom in with Roll20, the image quality is locked to the pixel size necessary to fit it inside the grid cell, and enlarging the visualization (for instance, at Roll20 150% zoom) doesn't give back the original detail because you are just zooming the 53 KB "cropped down" version of the token. Besides, the loss of image quality is noticeable as "blurriness" at zoom 100%. There *may* be a bug where it's using the thumb image still even though the token is being displayed slightly larger than 200x200, which would cause blurring, because it's not taking into account zoom or something. So again, if you could tell me exactly how the original screenshot was taken I can look into that further. It could be a bug. But I think that it's due to Roll20 is "forcing" us to reduce our tokens, scaling them down (cropping them down) in order to fit the "Roll20 grid units." As I said to Patrick a couple of posts above, I'll try to make a new screenshot comparison with the same zoom values, even if I already did that in my first post. You'll notice the blurriness on the Roll20 side.
I expect pixelation or image quality degradation when using variable-zoom tools like VTTs; it's more or less inevitable I don't expect pixelation in the way I see it in Roll20. The other VTTs that you can see in the screenshots avoid getting that pixelation, so it's not inevitable. I generally go for lower-resolution images when I use VTTs so that I can save on file size; image quality is a secondary consideration. Some people puts a lot of love and detail in their tabletop miniatures. There are people that even paints them and all that. Regarding virtual figurines, it's the same for me. I don't make hand-drawn pictures just for seeing them cropped down-blurred-pixelated, and as I've showed in the earlier screenshots, there are ways of avoiding it. For me, image quality is not secondary, specially when other virtual tabletops are handling it better.
For me, image quality is not secondary, specially when other virtual tabletops are handling it better. Same here, because that elf-image in the screenshots is my custom character token.
I believe the intention with the various scaled versions is that the image being displayed will always have a PPI that is greater than or equal to the PPI of the user's screen. If your 600x600 image is being displayed in an area on the user's screen that is only 100x100 there is NO benefit to having the browser download that 600x600 image and down-sample it to 100x100 versus doing the down-sampling server side and simply serving up a 100x100 image. The concern that Riley has is that if you are using the Roll20 zoom function that when the image takes up a larger area of the screen it isn't correctly getting switched over to the higher resolution image. [edit] Noticed the links earlier in the thread.
We've verified there is a bug where if you use the Roll20 zoom feature the higher resolution image is not swapped in correctly. I'm assuming this is causing the problem you're seeing. To verify please take a look at this image: That is a screenshot of roll20 using a size 2 hex grid with your original 600x600 image uploaded. I then took your original 600x600 image and resized it to 200x200 in gimp (what roll20 does to make your original into a more browser friendly download) then resized that 200x200 image to match the size of the token image being displayed at 100% zoom in Roll20. Whoever guesses which one is from Roll20 in my browser and which one is from Gimp gets a cookie :) The bug where the correct image resolution is not being reloaded should be fixed already so now if you use Roll20's zoom feature the correct resolution image should be used. Note that the BROWSER SIDE zoom features will cause blurriness. Please do not use these tools and use the Roll20 zoom tool. FYI: Cropping is REMOVING part of an image: <a href="http://en.wikipedia.org/wiki/Cropping_(image)" rel="nofollow">http://en.wikipedia.org/wiki/Cropping_(image)</a> Roll20 NEVER crops images, it just resizes them.
Eric D., Doesn't matter if it's a 600x600 image. I plan to do tokens at a hi-res of 400x400 for keeping them coupled with the upcoming Devinnight's tokens. If you want, I can give you a 400x400 version of the token, and you'll see that the results are more or less the same. Think that we are cropping down tokens for making them fit the small Roll20 units. And there is benefit in using hi-res tokens: sometimes I want to make some zooming. The point is that Roll20 handles tokens and zooming differently than other virtual tabletops around, and that results in worse image quality in the user's screen. Next: more screenshots.
Axel, please read my latest post. This was a bug in the zoom logic for Roll20. If you do a shift+reload of your campaign and zoom in again you shouldn't see any scaling artifacts. The correct thumbnail size should now be used for each zoom level.
Note that the BROWSER SIDE zoom features will cause blurriness. Please do not use these tools and use the Roll20 zoom tool. I didn't use browser zoom for the screenshots. After taking the new screenshots a moment ago, I remember that I used Windows Photo Viewer (both for iTabletop and Roll20 screenshots), but now I'm keeping the zoom levels entirely consistent in the following screenshots, as they appear in the respective applications in the user's screen. FYI: Cropping is REMOVING part of an image: <a href="http://en.wikipedia.org/wiki/Cropping_(image)" rel="nofollow">http://en.wikipedia.org/wiki/Cropping_(image)</a> Roll20 NEVER crops images, it just resizes them. You are used to GiMP, I'm used to Photoshop. Wikipedia isn't omniscient. On the other hand I didn't say just "crop" but "crop down": reducing image quality by resizing it down is hurting sharpness and detail, and the other virtual tabletops that I know aren't doing that. In any case, I'll need to read your post about the bug more carefully, but I was uploading the screenshots that, I suspect, are showing a different issue.
1346083973
Gid
Roll20 Team
You are used to GiMP, I'm used to Photoshop. Wikipedia isn't omniscient. The crop tool from Photoshop's toolbox does two functions. It crops, and if dimensions are supplied, it will then resize the cropped image to those dimensions. If you select an area of an image and then go to drop down menu: Image -> Crop it will just crop the image to the selected area of the image and no resizing is done. To crop merely means cutting down an original image to only display a specified portion. Roll20 does not crop images. It only resizes them.
Axel, please read my latest post. This was a bug in the zoom logic for Roll20. If you do a shift+reload of your campaign and zoom in again you shouldn't see any scaling artifacts. The correct thumbnail size should now be used for each zoom level. Um. It's interesting to see that before I was getting a very blurred image, and by doing what you are saying the results are very different and in line with other VTTs, which is what I was pointing at. Here is a screenshot of Roll20 using extreme zooming (Roll20 at 150% plus ALT+mouse wheel) before Eric D. bug report: Roll20 using the same extreme zooming after the bug report and shift+reload solution: Guys, if with this conversation we have detected a bug, that is excellent! I just tested it, and now I can set my hex grid cells at 1 Roll20 unit without resulting in token blurriness, which is great. As I explained in other thread here, being forced to use 2 units per hex was causing additional problems with the Ruler Tool. — Taking advantage of the screenshots that I already took, here is an iTabletop and Fantasy Grounds 2 equivalent screenshot with equivalent zooming (these apps don't show percentages), for demonstrating that, removing this bug, things are working OK and Roll20 renders tokens with the expected quality: iTabletop v3 Fantasy Grounds 2
Thanks for the confirmation. Lets all take something away from this thread. In the future if you see a problem please do the following: - Read <a href="http://community.roll20.net/discussion/5/submitting-bug-reports-read-first" rel="nofollow">http://community.roll20.net/discussion/5/submitting-bug-reports-read-first</a> and post a detailed report - Provide direct answers to the questions mods/devs ask, that helps us narrow down the issue - Don't hypothesize on how/what/why Roll20 is doing. There are bugs and we will get them fixed but guessing at how things are working or assuming we're doing something you don't agree with simply clouds the issue. Once we've identified the root cause you are more than welcome to opine about it but until then it just makes troubleshooting very difficult.