Post-processing is needed or Why the circles are not circular?!

Screenshot_1

Device - Android
Screen - 1920x1080

application =
{
	content =
	{
		width = 1080,
		height = 1920, 
		scale = "letterbox",
		fps = 60,
	 }
}

local circle1 = display.newCircle (0, 0, 200)

Ok, dear kettles, this circles must be more circular.
Wait. Oh, shi…
Why?

I see three circles… How are they not circular?

Are you saying you don’t like the edges? (The jaggies.)

display.newCircle() is a primitive that does a good (but imperfect) job drawing a circle. It does not smooth the edges. If you want one with nice smoothed edges, use an image.

Also, is that a screenshot from the simulator or a device. The jaggies are often worse in the simulator because of scaling to fit your screen. Try it on a real device and see what you think.

@roaminggamer, thanks, to be onest, it is a part of a screenshot from real device. Ok, I will remember about primitives. Let’s see to the image 512x512:

Ta-da! Looks better, right you are…

And two questions, if you’ll indulge me:

  1. How to calculate all appropriate sprite sizes for vary range of devices to ensure high quality of my perfect app?
  2. Is there any way to use vector images in Corona/Solar2D?
  1. You can take a look at those guides.
    https://docs.coronalabs.com/guide/basics/configSettings/index.html#content-scaling
    https://docs.coronalabs.com/guide/system/adaptiveScale/index.html

  2. This plugin will let you use svg files.
    https://docs.coronalabs.com/plugin/nanosvg/index.html

2 Likes

r

Cool, but… ok, just cool. Thanks.

I was really hoping to avoid this thread, but here we go anyway.


Dear Pot,

The circles created by display.newCircle are technically perfect but they are aliased, i.e. they are circular. As Solar2D doesn’t use anti-aliasing, you’ll have to fake it.

Your problem is multiplied by the fact that you have a content area of 1920x1080, i.e. the display objects that you are creating are likely not getting upscaled at all and they are “pixel perfect” aliased circles.

What @roaminggamer was likely referring to concerning the display objects generally looking better on actual devices is because in these cases they often get upscaled a bit, which results in them being blurred slightly and this blur acts as a form of anti-aliasing.

There are generally two methods that you can reliably apply to fake anti-aliasing in Solar2D:

  1. Create a circular mask that you apply on top of your circle. Just scale the mask to the desired size and it will apply a sort-of anti-aliasing to the circle below.
  2. Create a bitmap paint (see docs) where the image is simply a white circle (which has anti-aliasing). Then apply this to the circle as a bitmap stroke. Since the stroke fill is white, you can give it any colour you wish.

Finally, I don’t know what you mean by your comments about Solar2D documentation. I’ve used plenty of tools and I’ve personally felt Solar2D’s documentation has always been top notch with its clarity, ease of navigation, clear examples, gotchas, etc. What is it specifically that you find poorly structured and non user-friendly about them?

2 Likes

@XeduR, all right, all right, man, chill out!!

Well, to make a very simple form like a circle (center + radius) I should use two methods. Ok.
Yes, I said “Ok”. I understood. Primitives are primitives, that’s all.

Screenshot_2

Maybe I should start smoking pot again, looking at out-date primitives in 2020, my brain.

And, the last moment to clarify my comment, yo.
About gotchas, etc.

  1. It was just a joke. Not a kind of trolling.
  2. It was about any un-experienced novice, like me.
  3. Really, lot of clear examples was not clear for me who knows nothing about Lua before.

Peace.

I’d suggest going with display.newCircle and not apply anything more than that. It really doesn’t matter that much if your game relies on simple shapes. I use those in some of my games and haven’t heard anyone complain about it. I wouldn’t mind it that much if I were you.

About Solar2D picking the right image, long story short: (config.lua)

application =
{
    content =
    {
        width = 720,
        height = 1280,
        fps = 60,

        imageSuffix =
        {
            ["@2x"] = 1.5,
            ["@4x"] = 3,
        },
    },
}

Let’s say you have 3 files named and resized as player.png, player@2x.png, player@4x.png.

In this example, Solar2D will pick this file until device resolution is 1920x1080(scale = 1.5). For 1920x1080 and above, it will pick player@2x.png until 3840x2160(scale = 3). Above that, the engine will pick player@4x.png.

1 Like

“Dear Pot” was a reference to you referring to others as “dear kettles”, not to you being a pot smoker. This was also the first time where I’ve been told to chill after taking the time to help a person out. :stuck_out_tongue:

1 Like