61 coaches online • Server time: 23:03
* * * Did you know? Up until now, 1247962 players have died on the pitch.
Log in
Recent Forum Topics goto Post Linux (Ubuntu) - can...goto Post GIFgoto Post Flings in the new ed...
Christer
Last seen 11 minutes ago
Khemri Tomb Kings
Star
Khemri Tomb Kings
Record
59/24/37
Win Percentage
59%
Shambling Undead
Super Star
Shambling Undead
Record
51/5/10
Win Percentage
81%
Overall
[R]
Star
Overall
Record
228/56/79
Win Percentage
71%
Archive

2019

2019-04-14 23:33:08
rating 6
2019-04-07 16:59:39
rating 6
2019-04-07 00:55:26
rating 6
2019-01-08 15:27:38
rating 5.9
2019-01-05 02:58:18
rating 5.8

2018

2018-08-17 17:28:31
rating 6
2018-08-15 00:05:40
rating 6
2018-07-17 20:17:40
rating 6
2018-06-28 14:28:08
rating 5.9
2018-05-23 17:55:10
rating 6
2018-05-10 22:42:46
rating 6
2018-05-09 19:42:28
rating 6
2018-04-30 10:44:23
rating 5.8
2018-04-23 12:33:02
rating 5.8

2017

2017-04-23 18:06:35
rating 6
2017-04-06 23:00:56
rating 6
2017-04-03 19:06:00
rating 6
2017-03-29 22:35:46
rating 6
2017-03-25 16:18:39
rating 6
2017-03-11 21:24:26
rating 6
2017-02-14 14:23:58
rating 6
2017-02-10 14:54:03
rating 6

2016

2016-11-30 00:04:21
rating 6
2016-11-27 23:40:04
rating 6
2016-11-17 18:18:07
rating 6

2015

2015-09-06 23:59:26
rating 6
2015-01-24 15:56:29
rating 6
2015-01-22 13:10:32
rating 6
2015-01-19 21:20:53
rating 6
2015-01-10 19:03:45
rating 6

2014

2014-09-09 15:35:53
rating 6

2013

2013-04-26 11:48:40
rating 5.7

2012

2012-12-18 17:37:29
rating 5.9
2012-11-18 18:19:19
rating 6
2012-09-25 13:47:16
rating 5.6
2012-08-15 12:31:53
rating 5.9
2012-08-10 23:12:22
rating 5.9
2012-06-27 22:53:48
rating 5.9
2012-04-10 11:56:38
rating 5.9
2012-03-07 13:52:00
rating 5.9
2012-02-16 16:59:56
rating 5.9
2012-02-04 19:00:41
rating 5.3

2011

2011-07-25 23:32:43
rating 5.6
2011-05-23 13:12:52
rating 5.6
2011-02-04 14:26:18
rating 5.4

2010

2010-03-26 11:38:41
rating 5.1
2010-03-01 12:16:53
rating 5.6

2009

2009-12-08 16:40:30
rating 5.8

2008

2008-09-11 14:47:19
rating 4.1
2008-02-26 21:16:54
rating 5.3
2008-01-21 01:01:58
rating 5.6

2007

2007-11-06 21:23:14
rating 5.1
2007-10-16 00:26:11
rating 5.4
2007-09-30 17:10:03
rating 5.4
2007-09-30 12:01:42
rating 5.3
2007-08-09 12:14:57
rating 4.5
2007-08-06 12:02:52
rating 4.9
2007-08-03 17:56:21
rating 5.4
2019-04-07 16:59:39
18 votes, rating 6
Scaling Icons
This blog is the 2nd part in a series covering the scalable client project. The first part covered the background and why we need it.

In this part, I want to push forward and talk about the problems of scaling icons and the benefits and drawbacks of various methods. I will also bring up the direction we are going right now and get into some possibilities I want to explore with this.

So let's begin at the current state and look at a typical icon, let's say a typical human lineman, scaled to 800%:



This blue-eyed youngling, eager to prove his worth on the pitch is a great icon, much like all the other ones we have on the site. However, there is a problem..

The current icon is the perfect size for a square of 30x30 pixels. When we introduce a scalable client (or more specifically a scalable field), the square size will go up, let's say to 35x35, which is roughly a 17% increase in size.

Look closer at the icon above, and you'll see that the head is 11 pixels wide. With a 17% increase, we need to somehow scale this to 13, adding 2 pixels in width for the head. And this is where we run into trouble. Where would you add those two pixels? Between the eyes? On the edges? What if we wanted to increase the scale a bit more and and had to make the helmet 16 pixels wide?

The core of the problem we're facing here is that the icons are inherently imperfect representations of a "reality", an artist has taken the concept of a human Blood Bowl player and the pixels in the icon represent the concept in a very limited amount of space. The eye of the player is two pixels wide, and conveys that they are blue. The overall context of where they are placed means we, as humans, interpret those two pixels as blue eyes. In order to scale the image up to an arbitrary size, we'd need to convert the pixel art into what it is originally supposed to represent, and then reduce that back to the size we want. This is a difficult process, especially considering that doing this miniature size icon means you have to super emphasize things like the eyes (which are way too big to be anatomically correct), much in the same way theatre makeup tends to super emphasize certain traits of the actors.

That being said, there are ways to rescale things using software. The simplest form is what's called "nearest neighbour" where you simply stretch the smaller icon into a larger canvas and pick the colour of the pixel that is closest. To visualize this a bit better, let's say we do the 17% increase of the human (and scale this up to 800% again for display purposes):



As you can see, the results are not great. The nose has become Neanderthal-wide, and the shoulder pads look very odd to say the least. Clearly, this isn't great and we could probably do better. Enter what's called "interpolation modes" or "resampling algorithms". Without going too much into this, let's look at what's called "Bicubic interpolation", where the software takes each part of a pixel and blends the colours to produce something that is closer to the original. Same process as before, a 17% rescale and we're looking at the icon at 800% scale:



Ok, that certainly looks better. However, we have lost a LOT of contrast. Any sharp lines are gone. The eyes have started to almost melt down his face and it looks like the whole thing is simply blurred, which is exactly what we have done. All pixels include information from neighbouring pixels which is exactly what a blur is. So can we do better? Sort of, maybe. This is, however, where things go a bit off a cliff in terms of complexity.

Let's look at one option, called "waifu2x" (yes, I know..). This is a state of the art algorithm that produces pretty good results. Again, the same process, 17% scale, 800% zoom to see what's going on:



Obviously, the tool didn't like transparency, but the image is certainly better than the previous variants. There is still blur though, and a pixel-art artist (pixel artist?) would probably make some different choices on the icon if it was made by hand. The mouth cover is much bulkier than it probably should be for instance. That being said, though, the result is remarkably good and much better than the previous variants. Unfortunately, though, this tool is a LUA application and runs the scaling process with GPU-acceleration, which is really not something that I can integrate into the client in any way. This method is really interesting from a technical perspective, and is assisted by AI technologies in order to figure out how to scale things. But still, we're looking at technology that is simply out of reach for our user base. It's simply not a viable option from a technology perspective, and even if it was, it would be a compromised situation for the most commonly used resolutions which is really what this whole project comes down to.

The thing is, if I am going to spend hundreds of hours of time on a client refresh at this scale, I want the end result to be as good as I can reasonably make it for the largest part of the user base. I want my time to be spent towards something I can be proud of and not something where I feel "it's good enough".

I tried another algorithm (which Wikipedia calls "Kopf–Lischinski") many years ago, and the results are simply not good enough. It goes wrong too often, and creates a mess in most situations. That algorithm looked very promising to begin with, which is why I went ahead and implemented it in Java during a summer vacation (in Iceland, so it must have been cool, right?).

So at this point in the process, I've concluded that rescaling the current set of icons using algorithms simply isn't something I'm prepared to spend my time on. My next blog will cover what the final approach is, and what that brings to the table in terms of possibilities.

See you then!
Rate this entry
Comments
Posted by philipprocter on 2019-04-07 19:53:51
Thanks for the update
Posted by Balle2000 on 2019-04-07 20:31:33
Thanks for this blog series. My personal favorite is "nearest neighbor" re-sampling. You might find this surprising, but the nose size and shoulder pads doesn't bother me at all. Would actually love to see this implemented for the old icons, if possible. Its not perfect, but seems a reasonable solution for keeping alive all those pixels out there.
Posted by SzieberthAdam on 2019-04-07 21:49:08
Thanks for the post. One remark: I very like nearest neighbor, but only with integer rates (2x, 3x, ...). You get the same icon, nice and retro looking. Obviously in a scalable client those icons would probably not fill their field squares but they would be surely bigger than half of the squares. The vector icons are a great way but I would recommend to keep legacy icons too. I am sure many would miss them a lot.
Posted by neubau on 2019-04-07 22:10:16
very much agreed with balle and adam, especially for custom leagues a system like that would be very important.
Posted by awambawamb on 2019-04-07 22:30:21
how about a fixed magnification for every pixel, like twice? to keep the "retro" looks.
Posted by Christer on 2019-04-07 22:40:06
60 pixel squares will not fit your screen unless you're one of the 2.5% of people accessing the site with a display capable of higher than 1920x1080p resolution.
Posted by spelledaren on 2019-04-07 23:11:35
Thank you.
Posted by reroll_LGC on 2019-04-07 23:54:18
Just want to thank you Christer for taking the time to explain this - not something I ever even thought of, but makes perfect sense now you've laid it out.
(I like the current size!)
Posted by SzieberthAdam on 2019-04-08 00:51:57
The current field is 780x450 in size so it would be 1560x900 when doubled which fits in 1080p (1920x1080). I know there are other relevant GUI components to be shown around the field and I am also aware that a new layout/GUI is huge work.
Posted by koadah on 2019-04-08 02:57:22
I had a little play using tmoila's method
https://fumbbl.com/index.php?name=PNphpBB2&file=viewtopic&p=733744#733744

The result is here:
http://fumbbldata.azurewebsites.net/scale/elf.html

I don't have a big enough monitor to really appreciate how horrible it might look, but I'm guessing that it might take quite a while to get all of Secret League done. So I could probably live with "fairly horrible". ;)
Posted by Badoek on 2019-04-11 20:51:32
Vectorizing isn't an option I assume?
Not sure what it would entail but probably redrawing all icons, right?