The challenge to upscale pixel art
Printed From: Pixel Joint
Category: The Lounge
Forum Name: Resources and Support
Forum Discription: Help your fellow pixel artists out with links to good tutorials, other forums, software, fonts, etc. Bugs and support issues should go here as well.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=13667
Printed Date: 10 September 2025 at 10:53am
Topic: The challenge to upscale pixel art
Posted By: Hyllian
Subject: The challenge to upscale pixel art
Date Posted: 07 January 2012 at 8:22pm
|
Yes, this is hard as hell. I'm trying for almost a year. Here my upscaler which turn any png image file into a 4x upscaled version: http://www.multiupload.com/TXUTZFDW2F just use like this: 4xBR <original_image.png> <upscaled_image.png> I know this may be an heresy for you, but sometimes it can help someway. I'm continuing researching about how to perfect this transformation. Hope you enjoy! I don't know if I can post pixel arts from pixeljoint upscaled here, so I won't until a confirmation. Please, do not kill me!  |
Replies:
Posted By: tanuki
Date Posted: 07 January 2012 at 10:51pm
|
It's better to post images to something like http://photobucket.com/ - photobucket and link to them here with the button above the comment box that has a little tree on it. Just so we can see what you mean without having to download something, which I'm not going to do. :)
Anyways, to upscale something using a program like photoshop all you have to do is click the image menu, select image size... and then enter a height/width that is an exact multiple of whatever it currently is. Make sure that you select nearest neighbor (preserve hard edges) from the menu within that window so it won't apply any automatic blending. So for example if you have a 50x100 image then you could make it be things like 100x200, 150x300, 500x1000, etc., as long as it's an exact multiple of your original size. I don't know how to do it in other programs, but it's probably something similar to this. |
Posted By: surt
Date Posted: 08 January 2012 at 2:35am
Why on earth would you go to the trouble of writing a program to perform a task that is trivial to do in just about every graphic editor ever made?  Even if you are batch processing I'm sure you can do that with existing commandline tools such as ImageMagick. ------------- 
|
Posted By: Hyllian
Date Posted: 08 January 2012 at 3:22am
|
Ok, let's begin this so that you understand what I mean. I don't like nearest neighbor, because it gives a checkerboard feel. And I don't like bilinear filtering, because it blur too much. So I made this program to preserv sharpness and get rid of jaggies. Here's an example from here (I've got a random pixel art from pj) where I used my program:  Nearest Neighbor:  Smooth upscaling using Gale:  4x with my program:  |
Posted By: jeremy
Date Posted: 08 January 2012 at 3:43am
|
I understood what you meant :p I recall something(s) similar over at Pixelation, it's an interesting exercise. The effect of this one is really quite painterly, especially at 2x rather than 4x (i.e. reducing your resampled one). I wonder how it would take work less perfectly smooth than Panda's, like this ../files/icons/full/ss2011.gif">  or this ../files/icons/full/mutant.gif">  a couple of http://www.wayofthepixel.net/pixelation/index.php?topic=12502.0 - similar http://www.wayofthepixel.net/pixelation/index.php?topic=10510.0 - things from Pixelation edit edit: http://www.pixeljoint.com/pixelart/12082.htm - what about dither ? |
Posted By: Hyllian
Date Posted: 08 January 2012 at 3:54am
|
That mutant picture has transparencies. Sorry, my program doesn't support it, so it's out of question. That ss2011, though, can be processed. I get this (just link to not break the thread size): http://i.imgur.com/H83j5.png |
Posted By: jeremy
Date Posted: 08 January 2012 at 4:01am
Thanks, that's awesome :O especially for the wispy bits. ^ not transparent |
Posted By: Hyllian
Date Posted: 08 January 2012 at 4:08am
 There are at least two purposes for me to make an algorithm for this task: 1- Print 2- Play classic videogames in high definition TVs. |
Posted By: moogleymog
Date Posted: 08 January 2012 at 5:56am
|
That's really impressive! :D
I wonder what animated objects would look like. Can you only save as PNG? I did download the program but it won't open for me. |
Posted By: Hyllian
Date Posted: 08 January 2012 at 6:00am
|
Originally posted by moogleymog That's really impressive! :D I wonder what animated objects would look like. Can you only save as PNG? I did download the program but it won't open for me. This is a command line program. To use: Open a DOS-Prompt (command line window). You have to go through the command line to the folder where the program is located. Then use this command: 4xBR <input png> <output png> If you don't know how to use DOS commands, I'm sorry. |
Posted By: Hyllian
Date Posted: 08 January 2012 at 6:19am
|
One more example: Original:  Nearest Neighbor:  Smooth resample from Graphics Gale software:  My algorithm (4xBR):  |
Posted By: DawnBringer
Date Posted: 08 January 2012 at 6:39am
| Hmm, this is really interesting. Your results looks like a succesful hybrid between the Scale2x/Scale4x and the Kopf/Lischinski spline algorithms (not that I think those could be combined for real). I'd love to hear more about your algorithm if you care to share. Is it locked to x4 or can it handle any sizes? |
Posted By: Hyllian
Date Posted: 08 January 2012 at 6:49am
|
Originally posted by DawnBringer Hmm, this is really interesting. Your results looks like a succesful hybrid between the Scale2x/Scale4x and the Kopf/Lischinski spline algorithms (not that I think those could be combined for real). I'd love to hear more about your algorithm if you care to share. Is it locked to x4 or can it handle any sizes? That standalone app only scale by 4 and use it on my research. But I've made some filters for some emulators that work scaling by 2x, 3x, 4x and even 5x. I don't know if I can post a link to another forum where I present some explanations about the algorithm. |
Posted By: jeremy
Date Posted: 08 January 2012 at 6:57am
|
Originally posted by Hyllian I don't know if I can post a link to another forum Feel free |
Posted By: Hyllian
Date Posted: 08 January 2012 at 7:04am
|
Originally posted by Jeremy Feel free Ok. Here the link: http://board.byuu.org/viewtopic.php?f=10&t=2248 That forum isn't about pixel art, though. |
Posted By: Trick17
Date Posted: 09 January 2012 at 6:58pm
| Nice algorithm, looks like a better version of Hqx to me, but some problems are still the same. However, I will memorize your algorithm for me ;) |
Posted By: Hyllian
Date Posted: 12 January 2012 at 9:25am
|
Originally posted by Super17 Nice algorithm, looks like a better version of Hqx to me, but some problems are still the same. However, I will memorize your algorithm for me ;) Hi. I'd like to know about these problems you mentioned, so that I could think about how to fix them in some way. Could you elaborate them? |
Posted By: Hyllian
Date Posted: 13 January 2012 at 3:24am
|
Here the xBR app, now scales to 3x and 4x: http://www.multiupload.com/2JY2QM1AC3 Usage: xBR <input png> <output png> [<scale_factor>] scale_factor: 3x or 4x. (default: 4x) The 3x implementation is a bit different than the 4x. In 3x I didn't blend pixels, so the original palette is preserved, though the result is bit more jagged. Because of this, 3x scales very well to 9x, 27x and so on. Here an example: Original 3x  9x  If you zoom these 3x multiples you'll see that the colors remain original. |
Posted By: Hyllian
Date Posted: 13 January 2012 at 8:36am
|
Click to see the real size: 1x.......3x.............................9x..................................27x................................81x http://bildr.no/view/1077155">  http://bildr.no/view/1077158"> http://bildr.no/view/1077159"> http://bildr.no/view/1077160"> http://bildr.no/view/1077161"> 3x (no blending, original palette) http://bildr.no/view/1077184">  |
Posted By: Trick17
Date Posted: 13 January 2012 at 10:10am
 I ment this areas, Hqx has the same problem. Would be outstanding if you could fix that. And I tried to run your little program, but it doesn't work, always shutting down automatically after I start it... Had the same problem with a Hqx programm, do I need something for this? (Had read about framework or something like that...) Have Windows Vista OS. |
Posted By: Hyllian
Date Posted: 13 January 2012 at 10:27am
|
Originally posted by Super17 I ment this areas, Hqx has the same problem. Would be outstanding if you could fix that. This "stair effect" is impossible to solve in realtime. This occurs because when processing a single pixel, the algorithm only can see some of its neighbors, so it can't predict if a line will continue its trajectory or turn to the other way ahead. The only way to solve this is if you can look at the whole picture before processing each pixel, and this is impossible in realtime today. On top of that, the amount of processing would be insane. Originally posted by Super17 And I tried to run your little program, but it doesn't work, always shutting down automatically after I start it... Had the same problem with a Hqx programm, do I need something for this? (Had read about framework or something like that...) Have Windows Vista OS. You need to use DOS-Prompt. This is a command line app. |
Posted By: Trick17
Date Posted: 13 January 2012 at 11:42am
|
Originally posted by Hyllian Hm, I was expecting something like that, but would it possible to write a program that could do this? I wouldn't care if it's not in realtime.This "stair effect" is impossible to solve in realtime. This occurs because when processing a single pixel, the algorithm only can see some of its neighbors, so it can't predict if a line will continue its trajectory or turn to the other way ahead. The only way to solve this is if you can look at the whole picture before processing each pixel, and this is impossible in realtime today. On top of that, the amount of processing would be insane. Originally posted by Hyllian Thanks, I tried it, seems to work and it says: "done." But nothing happens. Where do I find my new image? Also, I recive an error message after that: "programm isn't working anymore" But nothing happens too.You need to use DOS-Prompt. This is a command line app. |
Posted By: Hyllian
Date Posted: 13 January 2012 at 12:13pm
|
Originally posted by Super17 Hm, I was expecting something like that, but would it possible to write a program that could do this? I wouldn't care if it's not in realtime. Too complex to make. I have other priorities for now (for example, implement some kind of cache to speed up processing). Originally posted by Super17 Thanks, I tried it, seems to work and it says: "done." But nothing happens. Where do I find my new image? Also, I recive an error message after that: "programm isn't working anymore" But nothing happens too. It seems you never used DOS. Put the program and the image.png in the same folder. From the command line go to that folder (you need to navigate through DOS commands). Then, use the command to use xBR. You have to know where you're creating the new image.png 3x scaled. |
Posted By: Trick17
Date Posted: 13 January 2012 at 12:48pm
|
Well, that's exactly what I did, I just didn't change the folder, because DOS could find the program and I thought it will work. I'm not new to DOS, but still a raw bignner. It's working now, thanks for patience  Question: Is it possible to have the option for 2x scaling as well? |
Posted By: Hyllian
Date Posted: 13 January 2012 at 12:55pm
|
Originally posted by Super17
Is it possible to have the option for 2x scaling as well? Yes. I'll insert it later. |
Posted By: Trick17
Date Posted: 13 January 2012 at 1:02pm
|
Originally posted by Hyllian Nice to hear, definitely will use your program for something in the future!Yes. I'll insert it later. |
Posted By: Hyllian
Date Posted: 13 January 2012 at 2:01pm
|
2x done! http://www.multiupload.com/GQFZDT9MAV Usage: xBR <input png> <output png> [<scale_factor>] scale_factor: 2x or 3x or 4x. (default: 4x) 2x (your avatar)  |
Posted By: Trick17
Date Posted: 13 January 2012 at 4:07pm
| Wow, that was fast, thanks! |
Posted By: Hyllian
Date Posted: 05 December 2012 at 4:41am
|
I´ve improved a bit the algorithm for pixel arts that use many colors. It preserves dithering. It only scales by2, though. Download here: https://anonfiles.com/file/92e2ed25e7efaae5fe28f76608658be8 - https://anonfiles.com/file/92e2ed25e7efaae5fe28f76608658be8 Example of this thread (click to see in full size):] http://bildr.no/view/1335316 - http://bildr.no/view/1335316 Usage: Usage: 2xBRh <input png> <output png> Original  2x Scaled  More screenshots here: http://imgur.com/a/XAwx5 |
Posted By: Mr.Fahrenheit
Date Posted: 13 December 2012 at 3:24pm
| I was thinking when I saw how nice the pictures looked with anti-aliasing. Maybe, if possible, you could have the image render with anti-aliasing but not introduce new colors so it uses colors form before to make aa. |
Posted By: cybrasty
Date Posted: 18 December 2012 at 7:51am
|
Hey Hyllian - can you reupload the 3x scaler program? The links gives me internet vs holywood pettition and no download option.
Thanks for a great job! |
Posted By: neota
Date Posted: 18 December 2012 at 3:19pm
|
Originally posted by Super17 Hm, I was expecting something like that, but would it possible to write a program that could do this? I wouldn't care if it's not in realtime. Where that'll ultimately end up is something like Inkscape's Trace Bitmap command. If you are looking for a base to build a 2x or 3x version on, consider trying Trace Bitmap on the output of Hyllian's program. You'll need to select 'Multiple scans->Color' and set max number of colors about right; turn off Smooth and make sure Stack Scans is on. Also in the Options tab disable 'Suppress Speckles' and reduce the 'Smooth corners' setting to something like 0.6. Here's an example output, generated from Hyllian's 3x image because pixel art has typically too-small details for the design assumptions of PoTrace (the backend system of Trace Bitmap): Note it has antialiasing. You can turn antialiasing off in your SVG renderer if you want no new colors added. Rendering at 1x (this is like the original with extra antialiasing):  2x:  3x:  6x: Link only, cause inlining such a huge image would be obnoxious. http://i.imgur.com/uduWP.png (the linking setup on this board is freaking out, so I couldn't make that into a clickable link.) ------------- absolutely. |
Posted By: Hyllian
Date Posted: 19 December 2012 at 3:30am
|
Originally posted by cybrasty Hey Hyllian - can you reupload the 3x scaler program? The links gives me internet vs holywood pettition and no download option. Thanks for a great job! Sure! It's here: https://anonfiles.com/file/f25320e84e03808903c48a30b77c2f6a |
Posted By: Hyllian
Date Posted: 19 December 2012 at 3:33am
|
Originally posted by neota Where that'll ultimately end up is something like Inkscape's Trace Bitmap command. If you are looking for a base to build a 2x or 3x version on, consider trying Trace Bitmap on the output of Hyllian's program. You'll need to select 'Multiple scans->Color' and set max number of colors about right; turn off Smooth and make sure Stack Scans is on. Also in the Options tab disable 'Suppress Speckles' and reduce the 'Smooth corners' setting to something like 0.6. Here's an example output, generated from Hyllian's 3x image because pixel art has typically too-small details for the design assumptions of PoTrace (the backend system of Trace Bitmap): Note it has antialiasing. You can turn antialiasing off in your SVG renderer if you want no new colors added. Amazing results! Thank you! |
Posted By: Hyllian
Date Posted: 14 September 2013 at 3:22pm
|
Hi, long time no see! The development continue and I have some news. I've already got xBR LV4. Here's a new executable only for 4x: http://https://anonfiles.com/file/95553996f5223220944d8d258202c13e - http://https://anonfiles.com/file/95553996f5223220944d8d258202c13e A result for comparison:  |
Posted By: neota
Date Posted: 14 September 2013 at 5:39pm
|
Your url is incorrect -- https://anonfiles.com/file/95553996f5223220944d8d258202c13e - This is the correct url : https://anonfiles.com/file/95553996f5223220944d8d258202c13e Your existing one ended up redirecting to homeimprovement.com Aside from that, the example image looks good and I am glad to see there is some way for me to test LV4 :) Seems to work well even on sprites with high numbers of colors: Source image:  Scaled (in 2 parts because of size)   Tomato and capsicum are notably the hardest cases here (30+ colors each), and it copes well with them, particularly getting a clean edge around the object despite variation in color along the edge. Also translates the carefully layered dithered areas on the cumquat into halftoning very accurately, producing a harmonious result. Is a non-AA version coming? (Non-AAed scaling -> better quality vectorization when brought into Inkscape) EDIT: On the subject of animation, I grabbed http://www.pixeljoint.com/pixelart/13250.htm# - orkimides' Mario animation and tried scaling that. It's fairly consistent and doesn't jump around. There seem to be issues with the alpha channel though (see dancing black pixels and added 'selout' around edges.). The obvious fix for that is to store the original mask as B/W, dilate the 'solid pixels' into transparent areas a few times (it can be increased a few more times if you ever get to LV5/LV6), scale *that*, scale the mask, and finally, apply the mask to the main result. Original:  Scaled:  ------------- absolutely. |
Posted By: Hyllian
Date Posted: 14 September 2013 at 7:32pm
|
Tks for the examples. It doesn't support alpha channel, indeed. I won't bother with it yet, because I prefer to use the time to evolute the main algorithm. |
Posted By: neota
Date Posted: 14 September 2013 at 8:00pm
|
BTW after trying it on some larger images I found it refuses large images (>500000 input pixels). Why is this? Even a 1000000pixels image would only occupy 64mb memory after scaling it up 4x.
------------- absolutely. |
Posted By: Hyllian
Date Posted: 15 September 2013 at 2:50am
| The internal free lib I used to deal with png files has a bug that it won't work well with big images, so I decided to put that limit to save some wasting processing time. |
Posted By: neota
Date Posted: 16 September 2013 at 4:24am
|
@Hyllian: Why wouldn't you be using http://en.wikipedia.org/wiki/Libpng - libpng ?
------------- absolutely. |
Posted By: Hyllian
Date Posted: 17 September 2013 at 3:56pm
|
Too bloated for my test needs... |
Posted By: neota
Date Posted: 17 September 2013 at 4:14pm
|
ls -l /usr/lib/libz.a /usr/lib/libpng.a -rw-r--r-- 1 root root 326K Jul 20 11:30 /usr/lib/libpng.a -rw-r--r-- 1 root root 116K Apr 29 23:52 /usr/lib/libz.a 300-400k before linking? I suppose that is big, yeah. ------------- absolutely. |
Posted By: Hyllian
Date Posted: 18 September 2013 at 10:33am
|
When I said too bloat, I mean it does too much things and I just need to open and save a png file. libpng is too complicated and requires time to understand how to setup it correctly. I won't waste my time with it considering I already have an easy-to-use free png lib implemented in my code. BTW, I just noticed the free lib (lodepng) I use was updated recently. So I updated my app to use the last lodepng. See if that bug you reported is fixed by trying the updated standalone app below: https://anonfiles.com/file/3da0a7cf63a8fbd6599be2ddb693ffec - https://anonfiles.com/file/3da0a7cf63a8fbd6599be2ddb693ffec |
Posted By: neota
Date Posted: 18 September 2013 at 11:43pm
|
THANK YOU! It certainly is fixed :)  EDIT: BTW, I also found a weird surprise where the output can become indexed rather than 32bit truecolor. Here is the input image, hopefully imgur will not modify it:  ------------- absolutely. |
Posted By: Hyllian
Date Posted: 19 September 2013 at 3:32pm
|
And here's the 3x NoBlend version: https://anonfiles.com/file/ca64833f5adb4bd6bb1a9aa6e8ddb62c - https://anonfiles.com/file/ca64833f5adb4bd6bb1a9aa6e8ddb62c Example: Original  3xBRLV4 NoBlend:  |
Posted By: 2blackbar
Date Posted: 19 September 2013 at 4:39pm
|
now this looks impressive, its interesting , looks kinda like oil painting filter but without blur Can you modify your program so i could just drag and drop png file onto it and it would save scaled in the same folder ? Heres bat command for others : 4xBRLV4.exe pic.png upscpic.png make new text file save it as bat file and run |
Posted By: neota
Date Posted: 19 September 2013 at 7:12pm
|
And here's an http://bpaste.net/show/133920/ - equivalent shell script for running it under WINE on Linux. Also supports selecting between scale levels (specify 3 or 4 as the first argument) and will automatically convert non-PNG input files to PNG. ------------- absolutely. |
Posted By: 2blackbar
Date Posted: 20 September 2013 at 5:57am
I like how it uspcales lineart, i only have suggestion for creating less rectangle like shape and less circle like shapes from signgle pixel , instead how about trying it to fade into more spikey shape not so round like o and not like this [ ] but like <> so it doesnt end suddenly with 2 pixels on top and botton but with one pixel, something like this(on left current method) :  but would be best if it could detect if it should be spikey horizontally or vertically and detect if line was horizontal or vertical so line would end more spikey and not so round.  I like the result of 4x upscale and 50% bicubic downscale:  So decent downsize algorithm could fix a lot of stuff too |
Posted By: bzz
Date Posted: 11 December 2013 at 8:02am
| Wow I'm impressed. I want to implement it in my iPad app someday |
Posted By: bluedxca93
Date Posted: 26 December 2013 at 3:21am
|
Hi, 3xbr lv 3   redrawn by hand  nearest neighbour. Your algorith does'nt like chess patterns i think. These are often used as " dithering" in pixel art and theres also the edge "bug". Your algorithm is good for upscaling 640x480 px fotos and images over 128x128 px. It is better than the libdepiselixe kopf algorithm. it is the best i could find so far, but perhaps you could try to fix the problems with the chess patterns. Regards bluedxca93 |
Posted By: DragonDePlatino
Date Posted: 27 December 2013 at 12:30pm
|
Whoaaaa! This is so amazing! It's like the Kopf-Lischinski except possibly better! Been waiting for an implementation like this for ages. You've done a great deed for the world of pixel art. ^.^
Ha! And it works on tiny little sprites with ugly palettes, too! My only complaint would be 2x's support for transparency. I kept getting these odd image artifacts so I had to convert the background to white. 
|
Posted By: JosephSeraph
Date Posted: 27 December 2013 at 1:15pm
| Whoa, this is certainly sweet indeed! ♥ |
Posted By: bzz
Date Posted: 02 January 2014 at 10:24pm
|
I finally did implement scale2x algorithm in my app for for iPad/iPhone
https://itunes.apple.com/us/app/repin-pixel-art-studio/id766364268?mt=8 - https://itunes.apple.com/us/app/repin-pixel-art-studio/id766364268?mt=8 |
Posted By: DragonDePlatino
Date Posted: 03 January 2014 at 11:17pm
| Hey, lucky you! I ended up using this for the 2x version of http://dragondeplatino.deviantart.com/art/DawnHack-NetHack-3-4-3-UnNetHack-5-1-0-416312313 - DawnHack , a NetHack/UnNetHack tileset. It's gotten quite a few downloads so far and I'm gonna be working to make it the official tileset of UnNetHack since there really aren't any non-text ones yet. And don't worry, I made sure to accredit you in the README. :D |
Posted By: KWVance
Date Posted: 09 January 2014 at 12:23pm
It seems hard but its actually not, it was one of the first things I learned in pixel art. What makes it look hard is your mind set, your thinking of how to do it all at once. You need to think small, like pixels. This is how it was shown to me. ---> http://i132.photobucket.com/albums/q19/Hetake07/Image4_zps0f9c9d53.png - Click Too See <--- Notice the pattern? The line made of groups of two pixels as 4x as many now same goes for the rest of the lines. So, this is what you do.
Yes it may be tedious, and take a while, but all great artwork is like that. Don't forget to save often |
Posted By: bluedxca93
Date Posted: 09 January 2014 at 11:00pm
|
Another working way, espacially for complex small 32x32 or 48x48 pixmaps: 1)Scale the image with 3xbrlv4 noblend 3 times. 2)Open this image in inkscape 3)Trace it with the normal trace algorithm ( You have to disable all smoothing or simplying filters) 4) Edit the paths. 5) Open this image in Gimp, decrease colors and create a new image with 30 percent layer. 6) Upscale the original image with Lnczos or an better algorithm. 7) Edit the upscaled vectorized layer with gimp pencil, after inserted the upscaled image as new layer. 8) Enjoy the new image. Takes about 20 minutes per picture, but you will have it scaled at 9x. So you could quickly downscale it to many sizes with rotsprite. |
Posted By: torguen
Date Posted: 20 January 2014 at 12:06pm
I love that filter, It is by far the one I like best of all existing filters.
|