Pixelation
General => General Discussion => Topic started by: Helm on February 09, 2016, 01:52:41 pm
-
Hi.
Due to recent disappointments, let's start of with:
You don't have to do this.
This is not necessary to learn pixel art.
It's not the only way to get where you want to go.
These are just the insane kinks of a strange man.
So, now that's out of the way, if you're still reading you probably know what's up. For work recently I drew an irregular tile, which then I found was too dense, too realistic for the art direction of the game.
(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)
As you would expect, this also tiles.
(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)
(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)
(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)(http://s11.postimg.org/xg5x5219r/realistic_gribbly_1.png)
In any case, a solution to our problem with the game I'm working on was to double size this and clean it up further.
(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)
and here it is also tiled:
(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)
(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)
(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)(http://s24.postimg.org/xbm2g68yd/realistic_gribbly_2.png)
Try to zoom in and really take a look at the way the pixels touch. You probably won't find too many single pixels either, but that's neither here nor there.
What I want you to try to do in this thread is to take pixel art you've done in the past or just now for our purposes and when you're reasonably happy with it, blow it up 200% and try to clean it up, keeping in mind a couple of directions:
1. try to be creative with how you space shapes closer than two pixels away. Effectively, right after you've blown something up, you are creating a *subpixel distance* there. This is very, very powerful, but if you use it too much then you have achieved nothing by blowing things up 200% to begin with. Likewise, for any line or dot that is less that 2 pixels x pixels fat, you're effectively subpixelling. But on a stable, static image. Ponder the implications of that second power of detail as you do this.
2. make your cleanup with attention and creativity, you don't want it to look like some superSAI filter (or at least not too much, perhaps you like that look). Think a lot about how to solve shapes and curves as you're uprezzing. Are you going to make things more angular, or try to solve them with antialias? If you antialias, are you going to use single pixels? Will it weaken the effect if you do?
Let's talk about this as people try it instead of me just infodumping leading ideas in this thread.
-
You probably won't find too many single pixels either
0 single pixels actually, just checked.
It works really well, in how it loosens the shape of the original up a lot, and you did a good job not to make it look sai2x-ish.
I find that generally scaling pixelart up is a lot harder than down (in most cases), because you have to add extra information which was not there before to make it work.
I might give this a go if I find some time between Bombernauts and freelance stuff and other projects. Looking forward to what gets posted in here.
-
Also of note, the pixel practice samples here can behave more stable in a 3d flexible environment. It's sort of baking in some filtering, as you would with lighting. One thing of my particular interest is what a resolution jump means for Anti-Aliasing. AA as a pixel art technique been a little headache to me. Often it would stick out like a sore thump the closer you get, or contribute to nervous noise when far away, either way turning from a smooth joy into an unsightly distraction, since as a predetermined piece of pixel art, it doesn't dynamically adapt to changing perspectives; and the riskier you do the AA in your choice of buffer colours, because you try hard to stick to a fixed palette, the worse it would get. Other times it's just plain impossible to have. So a possible surrogate technique is literally cutting some corners in a resolution jump, to smoothen things out a bit, here and there. You'd use this angularity from the multi-res as subtle, succinct and selective as you'd try with AA before. In that use, it's not about 45 degrees being a dominating aesthetic on its own, ideally you'd hardly notice it; things just look nice. Not saying normal AA can't work, but this is a viable alternative for when it doesn't. And to go along with that, another thing about what makes those samples flexible is that their detail colours don't stress super harsh contrast either.
-
I think your upscaled graphic is suffering from the effects of anti-aliasing/smoothing your details in the smaller image, Helm.
Here's an example of the problem:
(http://alexhw.com/art/upscaleWay.png)
What you're doing is more in line with the bottom sequence, which results in a more blurred interpretation of the details.
You're essentially keeping the effects that you'd get when reducing an image, instead of removing those effects. What you want to do when upscaling is unblur the details- or ungeneralize them.
edit:
here's a quick example using your tile:
(http://alexhw.com/art/helmTileEdit.png)
As you can see, the top is less prone to the effects of all the generalized shapes you have in the smaller image. The key details are kept and you can rebuild the more subtle details without the interpretation being muddy/blurred.
-
The intent is to not arrive at a more detailed image, but to accentuate the abstract quality of the shapes on the resize. This is one of the reasons I don't break things down in sharper, single pixel details on the upres, but try to respect the two by two pixel meta-grid as much as possible.
-
If you don't want to add detail then just run it through Waifu2X (http://waifu2x.udp.jp/).
(http://i.imgur.com/TuEs1q2.png)
(not pixel art though, color reduce it to the original palette if you want that and clean up a bit)
-
Or, instead of working backwards from a filter, why not try what I suggest in this thread and see if you arrive at any insight?
-
Well, usually the point of upscaling art is to arrive at a more detailed image that is clearer and more readable so that it represents a higher pixel-resolution that has less abstraction you'd get with a lower-res.
What you're doing here is no different than painting with broad brush strokes and then reducing the brush size and going back over it with consecutive passes. The only difference with that is you are confining the larger brush to a square grid. But then you try to remove that in your consecutive passes.
So if you want that sort of abstraction to be square natured, then that's one way to do it. I feel like it's a process that everyone already does when adjusting the brush size though.
-
Well, usually the point of upscaling art is to arrive at a more detailed image that is clearer and more readable so that it represents a higher pixel-resolution that has less abstraction you'd get with a lower-res.
What you're doing here is no different than painting with broad brush strokes and then reducing the brush size and going back over it with consecutive passes. The only difference with that is you are confining the larger brush to a square grid. But then you try to remove that in your consecutive passes.
My understanding is pixel art shines because of the ways a limited pixel grid compels the artist to find all kinds of creative solutions in terms of emphasizing clarity, priority of detail, inferred detail etc. That gets diminished when artists go for finer detail grids so I feel it's a different thing to what's being proposed here. Visible jaggies on their part are a natural consequence that comes with limited pixel grids, but are they a goal in and of itself? Maybe they distract from the true qualities (whatever those might be) of pixel art even?
An upscale filter is an automated process, so while it preserves the original grid it undermines the whole point of being in control. But a manual second pass... that's a different story.
Interesting stuff, I'll try it out.
-
AlexHW: I think you may be missing the aspect of this exercise that is about the design/typographical concept of "Color"* and feature distribution : that's the effect of Helm's proposed restrictions. It's true that this is an aspect that -should- be naturally pulled in, but looking at all sorts of art, it is not; and especially for upsizing pixel art, a naive attempt at upscaling (such as the one Mr.Beast posts) produces poor "color" and feature distribution that has poor rhythm.
* the overall impression of an area's "general value" when you squint at something.
I also agree with Erekt's point, which is similar to mine but with a different slant.
Anyway, I thought I'd see how dither goes with this exercise. It turned out to take 30min. Could definitely spend more time on it but don't have more time right now.
Side-by-side, upsized on left:
(http://i.imgur.com/VfluPaY.png)
Original:
(http://i.imgur.com/BmJwJnB.png)
Upsized:
(http://i.imgur.com/jNIhTN2.png)
Comments:
Initial upscale done via scale2x. Previously I would have felt unduly constrained by this, but the cleanup process felt pretty natural this time. Focusing on working with blobs probably prevented a bunch of trivial fiddling.
Using blobs of dithering rather than thinking of it in more realist terms forced me to .. hmm. 'meta-dither' (a technique that should be familiar to people who like stylized / 'custom / layered ' dither shapes. Result: painting-like vagueness that is mostly pleasing
I fixed some of the flaws of the original in the process, flipping the lighting on the left around since that works decently at double res.
The blockiness underneath the platform was intentionally preserved.
The 2,1,2,1.. rhythm on the archway probably could stand a little tuning.
I felt there should be a few more thin elements, but can't really see any opportunity for them. Similarly, the black along left edge of right side of arch feels a bit too heavy, but couldn't find a satisfactory solution.
Angularity aided rhythm but I didn't really find a algorithm that could be applied consistently to produce consistently good results. It fights some of the planes I'd prefer.
Overall, seems somewhat Yoshi's Island -ish
-
Yeah, my first post, I had thought Helm was disappointed with upscaling since he mentioned he was disappointed, so I was focusing on typical problems you face when upscaling art and need to make it more readable. The results he showed in his upscaled image displayed typical qualities you get when you don't spend the extra effort to cleanup and clarify the underlying forms that you are intending to visualize in the low-res image. Or when you have multiple values/spaces competing for your attention, it gets confusing how to build off of it, so I was showing that you can remove that layer of abstraction and rebuild it.
After I realized my mistake, my second post basically was to point out that this activity is similar to using different sized brushes. I'll try to go into more detail as to why, but realize that I am not trying to discredit the activity- I'm just trying to observe/interpret the process in a unified artistic way (one that is not reliant on a style/medium). I appreciate the pixel-art nature of it though.
This activity here is to maintain the sense that there is a 2x2 pixel grid in the upscaled image. This means the grid should still be traceable after further modification of the pixels within the spaces that make up the 2x2 pixel grid.
So an effect of such activity will be a softening/blurring of the grid/space without removing sense of it completely.
This is not much different from when an artist uses a larger brush size and then goes back in and uses a smaller brush size. This is the main point I'm adding to the discussion. You are essentially giving attention to the space the color constructs and modifying the properties within it. Whenever you go from a broader brush to a finer brush, typically you are exploring the details within the broader spaces that were created.
So if framed in that way I think it is easy to see that this kind of process is used in all sorts of art, perhaps every art. The thing here is that it is being influenced by a grid, so the process naturally promotes the characteristics of an underlying grid rather than a more fluid space where the spaces within it have no unified shape.
-
This is not much different from when an artist uses a larger brush size and then goes back in and uses a smaller brush size. This is the main point I'm adding to the discussion. You are essentially giving attention to the space the color constructs and modifying the properties within it. Whenever you go from a broader brush to a finer brush, typically you are exploring the details within the broader spaces that were created.
Yeah, this is a good point, whereas in digital media we tend to zoom in and zoom out a lot and finetune willy nilly, in natural media a trained artist would go from gestural broad to specific by going with a smaller brush. This idea in this thread is using a tool which is more austere (straight up resizing upwards x2 at a specific point where you have to call you piece done) and that makes you think about the meta-grid more, and if it's of any use. Then even capturing pockets of implied single pixels (like a corner for example) can be seen as sub-grid in themselves, and I think this would make the artist be more considerate of their shapes.
-
I think Helm's 2x texture would work great in a raycasting or scale down+rotation engine, as the lack of single pixel detail would reduce noise (unlucky samples). I experimented (http://androidarts.com/gamedev/5xscaletest.jpg) some with down sampling (here from 5x) and rotation (and certain edge cases) back in 2004, as I was annoyed by how noisy (or blurry) rotated 1x graphics would look in most engines.
-
We were talking on Slack about rotation, but I hadn't connected it to this thread yet Arne, that's a great point.
Pixel art rotation usually relies on first upscaling something with a filter, like super eagle, then rotating it and downscaling again. So how is this connected to what Helm is doing? Does his technique of preserving the grid more or less lend itself well to downscaling again after rotation?
Here is a quote how the "perfect" algorithm for this kind of stuff would work, can we compare to what Helm is doing?
The general idea behind the super resolution method that Alexey Lukin et al. explained in their paper is to treat upscaling as inverse downscaling. So the aim is to find a high resolution image which, after downscaling, is equal to the low resolution image.
I think Helm's example would fare rather well when subjected to this test, while Alex's edit wouldn't. Is this somehow what Helm is going for (though he reached it by thinking about it differently)?
the lack of single pixel detail would reduce noise (unlucky samples)
This is probably essential to this line of thinking?
-
http://audio.rightmark.org/lukin/graphics/resampling.htm
http://audio.rightmark.org/lukin/graphics/lhouse_more.htm
Usually when I upscale (or want to remove noise/artifacts) I apply some median noise to blobbify the image.