Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Professional Discussion / Pixel Art Scaling Algorithms?

Author
Message
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 8th Aug 2011 22:11 Edited at: 8th Aug 2011 22:12
http://en.wikipedia.org/wiki/Super_Eagle#Super_2xSaI_and_Super_Eagle
A couple of people have been begging me to add one of these algorithms (primarily super eagle), and so I'm wondering how you would implement these in DBPro?
Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 8th Aug 2011 23:26 Edited at: 8th Aug 2011 23:30
I made a 3x and a 2x scaling algorithm like these for upscaling levels in my game. Speed wasn't a big issue for me (only runs when loading) so I didn't bother with using pointers. You might want to though.

Here's the 2x version. I can dig out the 3x if you want, but bascially it's the same type of thing.

Beware of misleading comments here!
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 9th Aug 2011 01:08
Okay thanks!, I'm not worried about speed so I would like to see 3x.
Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 9th Aug 2011 01:25
I just remembered/realised - all my upscaling code is only upscaling/smoothing between pixlels that are black, and pixels that are non-black.

I have a whole load of versions and can't be bothered to work out which one is best. Here's one though. Take it with a pinch of salt.

Note that, counterintuitively, while the 3x algorithm is intuitive, the 2x one is not. I needed to look up how to do it. Will try tro find the webpage in a bit.

Here's my code that's mostly a load of balls. Maybe ignore the bit towards the end about blocks and stars. Think they were specific fixes for how I wanted the upscaler to work for my special case.

Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 9th Aug 2011 01:31
check out this page:
http://scale2x.sourceforge.net/algorithm.html

The wiki article you posted is good too.
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 9th Aug 2011 02:15
Thanks for the help!
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 10th Aug 2011 02:02
Been trying to write my own with no success. The part I don't understand is when the pixels are being transferred over to the new memblock.

That part is confusing me.

Btw, here is what yours looks like:

Original -


Resized Normally -


Using Your Resizing Method -
Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 10th Aug 2011 05:12
Dude that looks really good! It does get confused by thin diagonal lines though.

All the snippet of code you posted above is doing is generating an image array that contains the "Resized Normally" image you posted above- for each pixel in the original, it has a 3x3 square of 9 pixels with the same colour. I think my thinking was to start with this image, and overwrite bits to get to the "smoothed" version. Not sure if this is the most efficient way to do it.

Here's the same code with some comments:
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 10th Aug 2011 07:37
Okay thanks, I understand it now!
But, I think it is better to smooth the image while your resizing it instead of after, that's what I was trying to come off from.
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 10th Aug 2011 19:00
Now I'm dealing with another problem, trying to use the Scale3X on the wiki.



Everytime I compile, the image always looks like the attached image. I don't understand what I have done wrong, and no matter what I change It always seems to come out like that.
Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 10th Aug 2011 21:37
Probably because you're looping over y within the x loop, instead of the other way around.

where you've got

for x=0 to width-1
for y=0 to height-1

you should have

for y=0 to height-1
for x=0 to width-1

It's because of the way memblocks are ordered
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 10th Aug 2011 22:19
Okay, now its working. Thanks a lot!
Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 13th Aug 2011 02:05
Well done dude. I look forward to seeing where you go with this.
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 13th Aug 2011 14:01
Well, I've added some sort of contrast adjustment to the image scaler. Really makes Dr. Doom look more metallic, but for some reason it creates this black box around the image:

Original -


Resized Using FC -


Resized Using FC with Contrast Adjustment -


Here is the code :
Dr Tank
17
Years of Service
User Offline
Joined: 1st Apr 2009
Location: Southampton, UK
Posted: 13th Aug 2011 16:06 Edited at: 13th Aug 2011 16:09
Looks nice. I imagine if you cut the "contrast" part out of the above snippet you will still see the black border.

You are looping over the 1st image with a 1 pixel border. Each of the pixels you are looping over in the 1st image maps to 3x3 pixels in the 2nd image. The reason you see a 2 pixel border on one side and a 4 pixel border on the other (instead of two 3 pixel borders) is that you are setting X2-1, X2, X2+1, where X2=3*X.

Really the "central" pixel of the equivalent 3x3 block on the second image is at 3*X +1

Basically you've got to handle the edge pixels. Perhaps the easiest/cleanest way to do this is to add a 1 pixel border to the input image (not the actual image - just the array)- otherwise you'd want separate loops for the edges, which makes the code longer. Maybe set the outside pixels to whatever colour you are using for the transparent parts.
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 13th Aug 2011 23:49
Okay I fixed it by giving the contrast code its own loop then changing up the for loop values.
David Gervais
Retired Moderator
20
Years of Service
User Offline
Joined: 28th Sep 2005
Location: Montreal, Canada
Posted: 14th Aug 2011 13:43 Edited at: 14th Aug 2011 13:44
hmmm, this looks interesting. I was wondering how your algorithm would do on a 32x32 sprite..



I'll follow this post with the original sprite.. brb

Cheers!

David Gervais
Retired Moderator
20
Years of Service
User Offline
Joined: 28th Sep 2005
Location: Montreal, Canada
Posted: 14th Aug 2011 13:45 Edited at: 14th Aug 2011 13:46
In the above post the scaled sprites are just done with my paint program, without and with AA turned on.

here is the original sprite..



can you test it please?

Cheers!

CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 14th Aug 2011 19:13
Here it is, looks a lot better :

Scaled 3x -


I also did a 6x -
David Gervais
Retired Moderator
20
Years of Service
User Offline
Joined: 28th Sep 2005
Location: Montreal, Canada
Posted: 14th Aug 2011 22:17
Thanks, I like the style that gives. Kind of a modern comic book feel. Makes me think my old RPG tiles could be brought back to life.

If only I had the time to persue these types of things, oh well, it was nice to see that the algorithm works well on small tiles too.

Cheers!

CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 16th Aug 2011 02:38
@Dr Tank,

Okay, I understand what you were talking about, I didn't fix it yet.
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 17th Aug 2011 18:37 Edited at: 17th Aug 2011 20:49
Finally fixed the problem I was having by taking the transparency color from the first image then coloring the second image with it.

Edit : Fixed another problem. Code updated.



Also added a new effect I call light blending .
( Don't worry about the edges, transparency in the sprite I used was bad )

Light Blending Off :


Light Blending On :
CSGames94
18
Years of Service
User Offline
Joined: 27th Dec 2007
Location:
Posted: 25th Aug 2011 18:12
Okay, here is the final code for it:



Resized Normally
Resized Using Function
Resized with Contrast Adjustment
Resized with Contrast Adjustment and Color Adjustment

Login to post a reply

Server time is: 2026-07-10 12:49:11
Your offset time is: 2026-07-10 12:49:11