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.

2D All the way! / How to remove jagged edges on .bmp's?

Author
Message
inverse
10
Years of Service
User Offline
Joined: 22nd Apr 2013
Location:
Posted: 22nd Apr 2013 23:30
I have this program where I draw a sprite on the screen using a bitmap of a colored circle. I made the bitmap in GIMP, and whenever I make a colored circle .bmp in GIMP, it always has jagged edges. As a result, the sprite that I create in my program based on that .bmp also appears with jagged edges around the circle, as though you can see each square pixel around the outer edge of the circle.

Is there a way to draw colored circles with GIMP (or any other program) so that the edges are smooth? I'd really like to have smooth edges on these circles.

Did anyone else ever have a problem like this?

I've attached a picture to illustrate the jagged edges.

Thank you.

Attachments

Login to view attachments
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 23rd Apr 2013 04:05 Edited at: 23rd Apr 2013 04:23
you need to turn anti-aliasing on:


i'm not familiar with using gimp but you should be able to find it pretty easily under the flood fill option settings or similar. otherwise, search for anti-alias.

add OP image:


Virtual Nomad @ California, USA . DBPro V7.7 . Matrix1Utils 05.27.12
AMD Phenomâ„¢ X4 9750 Quad-Core @ 2.4 GHz . 8 GB PC2-6400 RAM
ATI Radeon HD 3650 @ 512 MB . Vista Home Premium 64 Bit

Attachments

Login to view attachments
inverse
10
Years of Service
User Offline
Joined: 22nd Apr 2013
Location:
Posted: 23rd Apr 2013 06:11
Thanks very much for the Anti Aliasing tip.

I've just tried anti-aliasing the circle image in GIMP (Filters -> Enhance -> Antialias), but it's still showing up with jagged edges, where some of the outer-edge pixels are now a different shade of the inner circle color, which I guess is how anti-aliasing is supposed to work.

I should also mention that I'm also setting the background of the circle image to pure green RGB(0, 255, 0) for transparency.

I just wonder how some games have simple circles on the screen, and the outer edge of the circle looks so smooth. I've been reading that with DirectX, you have more control over setting anti-aliasing on in your actual code, but I've also read that this is not fully implemented in DarkGDK. Oh well, maybe I have to use a different graphics package to make this work
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 24th Apr 2013 03:19 Edited at: 24th Apr 2013 03:20
use the .png file type, if available from within gimp.
it handles alpha-transparency well by simply adding the final ,1 transparency flag when loading and utilizing the image. and, there's no need to define the transparency color/color key as you have elluded to.

ie, do you experience the same when using the png file attached to my last post?

how are you utilizing the image(s)? as a true image or as a texture, sprite or ? also, are you re-sizing its display in any fashion within your code? ie, offer a small code example of how you're currently loading/displaying/manipulating the image(s), please.

i've no experience with darkgdk (nor do i know of the issue you mentioned) so this may be something you need to ask about on the darkgdk section of the forum...

Virtual Nomad @ California, USA . DBPro V7.7 . Matrix1Utils 05.27.12
AMD Phenomâ„¢ X4 9750 Quad-Core @ 2.4 GHz . 8 GB PC2-6400 RAM
ATI Radeon HD 3650 @ 512 MB . Vista Home Premium 64 Bit
inverse
10
Years of Service
User Offline
Joined: 22nd Apr 2013
Location:
Posted: 24th Apr 2013 03:58
Hi, thanks for your response.

I just tried making the circle in GIMP as a .png and set the background to transparent in the file itself in GIMP, as opposed to making the background green and setting a color key in code.

As long as I blur the edges of the circle (I've found that a Gaussian blur of the image at 2 or 3 pixels works better than antialias), the circle's edges show up as much smoother than the .bmp circles, but there's still some visible pixelation.

Here's basically what my code does:



As you can see from the code, when I load the image, I'm not adding a third argument of '1' (which is I think what you were recommending), and it seems to handle the transparency fine. I did just try adding a third argument of '1', but it didn't visibly change anything.

I also used your image and it has a lot less edge pixelation than the .bmp's, but it still has somewhat rough edges, especially when I animate the circle to make it grow larger.

The .png recommendation is a giant step in the right direction. I think I just have to learn some tricks in GIMP for making .png's with the smoothest edges.

If anyone else has had trouble with jagged edges with the shapes, I'd love to hear how you solved the problem, or any tips you might have.
Dum_Bass
10
Years of Service
User Offline
Joined: 20th Mar 2013
Location: Hiding in your closet.
Posted: 24th Apr 2013 16:43
I too am a noob but I have used GIMP succesfully. Yes, .png all the way (smaller than many alternate file structures and it supports alpha channels which is very useful when painting 3d UV maps). I think that you may benefit from asking yourself these questions.

1) Do I have to resize the image I use for a sprite inside of the program (as in, 'will I use the same image multiple times but at different sizes') or should I resize the image within GIMP after I am satisfied that it looks "just right"?

The second option will save compile time when your program runs and can be achived by going to the tool bar in GIMP and selecting: Image / Scale Image. Then you just choose the pixel count you wish to reduce the image size to.

2) What resolution do I have my program/game at?

If you have the screen drawing at a low resolution setting than your sprite or image will always look dramatically more pixalated than the one you sweated over for hours in an image editor.



The parameters in these commands are arbitrary and can be set to whatever your heart desires. If you are not already familiar with them just a quick Google search will give far more than you need.

3) And last, do I want to have clean edges or blurry edges on my sprite.

Many image used for sprites are improved by first finishing the general look of them then selecting the area outside of the image using the wand tool. Invert the selection, (in GIMP, Select / Invert) than expanding the selection by a pixil or two (in GIMP, Select / Grow). Next, create a new layer and fill the selected area it with just black. Finally place that layer beneath your original image.

Now this is important! You do NOT have to merge the layers. If you choose to export your image in a .png than you only have to have line your layers up so that the image looks pretty and make sure only the layers you want exported are highlighted (the clickable little eye symbol to the left of each layer). Then go through the motions of exporting (into .png). This way you can keep the layers seperate if you want to go back an make changes to the original file.

I know that this was somewhat specific but I hope it helps you in in a way. Happy programming.
inverse
10
Years of Service
User Offline
Joined: 22nd Apr 2013
Location:
Posted: 26th Apr 2013 09:45
Hey, thanks for your suggestions.

I liked your idea of changing the resolution, but my program already correctly sets it, so unfortunately it didn't have any effect.

The problem is that my program makes the circle grow from small to large, and I make the circle grow larger by continually calling dbSizeSprite(), and it grows to a preset maximum radius.

I've found that if I create a sprite that is several times larger than the maximum radius that it grows to, at the maximum radius the circle has nice smooth edges. But when the circle is small, it has rough pixelated edges. But this looks better now that I'm using a .png file.

I'm tempted to try and use two separate .png's for the circle - one small one for the initial small circle, and then once the circle is supposed to start growing, I load a second larger .png that gives the nice edges when larger.

Sidenote for Dum_Bass: I noticed that you haven't got any replies to your question in your other thread. I think it's because this subforum isn't really for programming questions, but rather for graphics questions. I'm sure you will get lots more attention if you post in a programming subforum. I think there's a subforum simply called "Dark GDK" that might work better.
Phaelax
DBPro Master
20
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 27th Apr 2013 12:28 Edited at: 27th Apr 2013 12:29
Quote: "I've found that a Gaussian blur of the image at 2 or 3 pixels works better than antialias"

Then you're doing something wrong.

Quote: "I've found that if I create a sprite that is several times larger than the maximum radius that it grows to, at the maximum radius the circle has nice smooth edges. But when the circle is small, it has rough pixelated edges. But this looks better now that I'm using a .png file."

well yea, what'd you expect? You enlarge an image it's going to get fuzzy or pixelated, depending on the scaling method used.


Here's a simple, smooth edged circle with an alpha background and saved as a PNG. Load this into DB and it'll look exactly the same.


"You're all wrong. You're all idiots." ~Fluffy Rabbit

Attachments

Login to view attachments
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 30th Apr 2013 10:59
I would tend to just draw the circle at double the resolution I need, then scale it by half. This has a similar effect to anti-aliasing, but I'm not sure if it's better or worse - I use PSP9 which has no anti-aliasing, just smoothing which is just horrible. It does have vector support though, so I'd just draw a vector circle which could have AA if I need it. Anyway, I find that drawing at double or quadruple (for smoother AA) gives nice soft edges, it's certainly worth a try.

Remember though, that anti-aliasing is only really intended for unscaled images - the second you scale the image, that's all the benefit pretty much gone. If you need to show smooth edges with scaled sprites, well really you have to rely on the built in smoothing, min and mag filters etc in AGK. Perhaps it's worth drawing at a higher resolution in this case anyway, because it can help a lot with things like sprite rotation to have a little extra resolution than what your actually using... like rotation is less jagged when the image has more pixels than it needs. The thing with the mobile market, is that there's such a diverse range of devices and resolutions - it would be very difficult to support every native resolution, perhaps it would be best to just draw at high resolution and hope that build in pixelating doesn't affect things too much.

I got a fever, and the only prescription, is more memes.
Pincho Paxton
21
Years of Service
User Offline
Joined: 8th Dec 2002
Location:
Posted: 26th May 2013 19:15
If you scale things it is probably better to make in-between images... like dds. Have a few images and scale until you get to the same scale as another image, then scale that.

MrValentine
AGK Backer
13
Years of Service
User Offline
Joined: 5th Dec 2010
Playing: FFVII
Posted: 27th May 2013 03:15 Edited at: 27th May 2013 03:16
{Look's to the left... Look's to the right... Walks forward and whispers...}

Sprite sheet anybody?



Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 27th May 2013 12:52
Looks to his fingernails, looks up then looks at Mr V, and asks in his best Canadian-Amish accent...

What the heck has a sprite sheet got to do with it?

I got a fever, and the only prescription, is more memes.
MrValentine
AGK Backer
13
Years of Service
User Offline
Joined: 5th Dec 2010
Playing: FFVII
Posted: 27th May 2013 19:21
[rings Dominos Pizza, asks for express delivery and puts phone down...]

You can pause each frame for each increment... As well as create per % versions...

Login to post a reply

Server time is: 2024-03-02 07:54:14
Your offset time is: 2024-03-02 07:54:14