Angle ridges

I can’t seen to find a way not to have ridges on .png’s or rect’s that are at an angle.  It’s driving me crazy, I’ve tried the anti aliasing, but that didn’t work.  I see a lot of game with angles without ridges.  What’s their secret?

Thanks

Questions:

  1. What is the resolution of the image file?
  2. What size are you displaying it at?
  3. What device are you running on and/or simulating?
  4. If you are simulating, is the device scaled?
  5. Are you seeing this on actual devices or just in the simulator?

Note: PNGs and Filled Rects are totally different.  You can’t really get away from this will filled rects.  PNGs may behave a bit more nicely, but really it comes down to these factors:

  • original image size versus targeted size versus actual device resolution:
    • If the image is getting scaled up, you will see artifacts.
  • Low resolution devices will have this problem no matter what you do.  They simply do not have the pixels to display a smooth-looking angled line

Now, if you’re just seeing this on the simulator, you need to test on actual devices.  There are too many factors involved that may be causing artifacts for the simulated result.  You simply can’t judge the final result on the simulator.

How did you apply AA? I remember Corona having AA option at some point, but I thought it was long gone.

With Corona, one easy trick is to lean on the dynamic scaling and let Corona somewhat blur out the edges. If you create polygons, rects or circles, then you need to give them an image stroke and Corona will blur those strokes. Note, I am not talking about using blur, just let Corona’s automatic image scaling do its thing, like here:

The image to the left is 4 times higher resolution than its counterpart and appears much more jagged because of it. Typically the best option to get rid of jagged edges is to increase resolution, but with mobile devices it really doesn’t work.

There are also two rects in the image. Their only difference is that the one below uses image stroke, which reduces the jagged edges. There isn’t really a way to completely get rid of the edges, but you can smooth them out to an extent.

I’ve attached the project if you want to take a look.

Thanks Roam, I actually did not consider any of what you inquired I just created the png’s & rects and just added them to my code.  I have a pc with an Acer at 1680 x 1050 on the left and an LG at 1400 x 900 on the right.  Simulator runs off Acer, but I understand more now and how I’m working on correcting the problems.  

I used the smooth zip, but I not quite certain on what or how I’m suppose to use that code, but I time I will.

Thank you both for all the help you have given me.

Questions:

  1. What is the resolution of the image file?
  2. What size are you displaying it at?
  3. What device are you running on and/or simulating?
  4. If you are simulating, is the device scaled?
  5. Are you seeing this on actual devices or just in the simulator?

Note: PNGs and Filled Rects are totally different.  You can’t really get away from this will filled rects.  PNGs may behave a bit more nicely, but really it comes down to these factors:

  • original image size versus targeted size versus actual device resolution:
    • If the image is getting scaled up, you will see artifacts.
  • Low resolution devices will have this problem no matter what you do.  They simply do not have the pixels to display a smooth-looking angled line

Now, if you’re just seeing this on the simulator, you need to test on actual devices.  There are too many factors involved that may be causing artifacts for the simulated result.  You simply can’t judge the final result on the simulator.

How did you apply AA? I remember Corona having AA option at some point, but I thought it was long gone.

With Corona, one easy trick is to lean on the dynamic scaling and let Corona somewhat blur out the edges. If you create polygons, rects or circles, then you need to give them an image stroke and Corona will blur those strokes. Note, I am not talking about using blur, just let Corona’s automatic image scaling do its thing, like here:

The image to the left is 4 times higher resolution than its counterpart and appears much more jagged because of it. Typically the best option to get rid of jagged edges is to increase resolution, but with mobile devices it really doesn’t work.

There are also two rects in the image. Their only difference is that the one below uses image stroke, which reduces the jagged edges. There isn’t really a way to completely get rid of the edges, but you can smooth them out to an extent.

I’ve attached the project if you want to take a look.

Thanks Roam, I actually did not consider any of what you inquired I just created the png’s & rects and just added them to my code.  I have a pc with an Acer at 1680 x 1050 on the left and an LG at 1400 x 900 on the right.  Simulator runs off Acer, but I understand more now and how I’m working on correcting the problems.  

I used the smooth zip, but I not quite certain on what or how I’m suppose to use that code, but I time I will.

Thank you both for all the help you have given me.