Draw Circle

[lukas-baumann]

Hi all,
 
I want to create a circle, which bounces in the screen. My Problem is that the Circle is very pixelated.

This is my current config.lua :

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { graphicsCompatibility = 1, width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterbox", }, }

And this is my main.lua :

-- Hide status bar display.setStatusBar(display.HiddenStatusBar); display.setDefault("background", 255, 10, 255, 1); local physics = require("physics"); \_H = display.contentHeight; \_W = display.contentWidth; topSpace = display.contentHeight / 12; physics.start(); physics.setGravity(0, 0) local topWall = display.newRect (0, topSpace, display.contentWidth, 1); local bottomWall = display.newRect (0, display.contentHeight, display.contentWidth,1); local leftWall = display.newRect (0, topSpace, 1, display.contentHeight); local rightWall = display.newRect (display.contentWidth, topSpace, 1, display.contentHeight); physics.addBody (topWall, "static", {bounce = 0.1 } ); physics.addBody (bottomWall, "static", {bounce = 0.1 } ); physics.addBody (leftWall, "static", {bounce = 0.1 } ); physics.addBody (rightWall, "static", {bounce = 0.1 } ); local r = 50 local player = display.newCircle(\_W/2, \_H/2, r); player.x = \_W/2; player.y = \_H/2; physics.addBody (player, "dynamic", { radius=r, friction=1, bounce=1 } );

I attach two screenshots.

It would be great if someone can help me

---

Lukas

[Alex10]

You might want to think about creating a graphic asset of a circle, and using that image, instead of using the display.newCircle() API. It’ll give you greater control over what the circle looks like.

[lukas-baumann]

Thank you for your fast reply.

I already tested it with a graphic but the graphic was also pixelated.

In my game the Circle could have different colors and sizes. So I have to create different graphics for all sizes and color?

[lukas-baumann]

Can someone help me to draw antialiased circles in different sizes?

[rob]

Corona vector graphics are not anti-aliased. We did this for performance reasons. Using graphics allows you to create the image you want. If your image is too small and we  have to scale it up, its going to be blurry and soft.

You’re missing the dynamic scaling part of your config.lua. Add this back to your config.lua:

local aspectRatio = display.pixelHeight / display.pixelWidth

application = { &nbsp;&nbsp; content = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = aspectRatio \> 1.5 and 375 or math.ceil( 563 / aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = aspectRatio \< 1.5 and 563 or math.ceil( 375 \* aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = "letterbox", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imageSuffix = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ["@2x"] = 1.5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ["@4x"] = 3.0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp; }, }

Then if you need a 50x50 circle, also create a 100x100 circle and put @2x after the filename, i.e. ball@2x.png. Name the 50x50 ball.png and then also create a 200x200 circle and put an @4x after the file name, i.e. ball@4x.png.  Now if you load the circle using display.newImage_ Rect _() (i.e. local myCircle = display.newImageRect( “ball.png”, 50, 50 )

Corona will then use the @4x image on high res screens, @2x on medium res screens and the base image on small screens.

[lukas-baumann]

Hi,

thank you for your help!

My problem is that the circle should not have a fixed size.

The size of the circle should depend on the screens size.

Also I want that the user can choose the color of the circle.

So I have to create images for all circle sizes and colors? Is there no other way to handle this?

All the best,

Lukas

[rob]

If you provide the various sized images:  base.png, base@2x.png and base@4x.png (where base is the name of your file), then the large image will be use on large screens, the medium image on medium screens, and the small one on small screens. Your config.lua will define the screen in a number of “Points”, which sets the virtual width and height of the screen.  Corona SDK will determine how to best fit the screen. In other words, your config.lua sets a width of 320 points (config.lua is always read as if your app was in portrait/vertical mode!).  If you are on a 640px device, we calculate a scale factor, in this case 2.0 (640 / 320). Then we look in the config.lua to  see which version of the file to load. The config.lua code I suggested you add:

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

Since 2.0 is bigger than 1.5 and less than 3.0, Corona will grab the @2x version of the image.  Next we are going to take the size of the image you specified with display.newImageRect() and scale the image up or down so that it’s the right proportion on the screen. Since we are dealing with Circles, let’s say you said 50, 50. If the image isn’t really 50x50 we’re going to scale it until it is 50x50 on the point scale of the screen.  Since Ive been using 50 x 50 as my example, to make it work on a 640px screen we need to scale it up to 100x100 so we grab the @2x version which is already 100x100 and you get pixel perfect. But the same setup on an iPhone 6’s 750px wide screen is 17% bigger than the iPhone 5’s 640px screen. We will need to scale that image up 17% on the iPhone 6 to make it fit right.

But in the end, the goal is for you to define your content area (320x480 recommended) and size your base graphics to fit that size screen, then provide images that are twice as big and four times as big, name them correctly, use display.newImageRect() instead of display.newImage() where possible and let Corona SDK do the rest.

[hasty]

To get different colours, you could use white images for your circle, and then just use :setFillColor() to get the colours.

[Alex10]

You might want to think about creating a graphic asset of a circle, and using that image, instead of using the display.newCircle() API. It’ll give you greater control over what the circle looks like.

[lukas-baumann]

Thank you for your fast reply.

I already tested it with a graphic but the graphic was also pixelated.

In my game the Circle could have different colors and sizes. So I have to create different graphics for all sizes and color?

[lukas-baumann]

Can someone help me to draw antialiased circles in different sizes?

[rob]

Corona vector graphics are not anti-aliased. We did this for performance reasons. Using graphics allows you to create the image you want. If your image is too small and we  have to scale it up, its going to be blurry and soft.

You’re missing the dynamic scaling part of your config.lua. Add this back to your config.lua:

local aspectRatio = display.pixelHeight / display.pixelWidth

application = { &nbsp;&nbsp; content = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = aspectRatio \> 1.5 and 375 or math.ceil( 563 / aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = aspectRatio \< 1.5 and 563 or math.ceil( 375 \* aspectRatio ), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = "letterbox", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imageSuffix = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ["@2x"] = 1.5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ["@4x"] = 3.0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp; }, }

Then if you need a 50x50 circle, also create a 100x100 circle and put @2x after the filename, i.e. ball@2x.png. Name the 50x50 ball.png and then also create a 200x200 circle and put an @4x after the file name, i.e. ball@4x.png.  Now if you load the circle using display.newImage_ Rect _() (i.e. local myCircle = display.newImageRect( “ball.png”, 50, 50 )

Corona will then use the @4x image on high res screens, @2x on medium res screens and the base image on small screens.

[lukas-baumann]

Hi,

thank you for your help!

My problem is that the circle should not have a fixed size.

The size of the circle should depend on the screens size.

Also I want that the user can choose the color of the circle.

So I have to create images for all circle sizes and colors? Is there no other way to handle this?

All the best,

Lukas

[rob]

If you provide the various sized images:  base.png, base@2x.png and base@4x.png (where base is the name of your file), then the large image will be use on large screens, the medium image on medium screens, and the small one on small screens. Your config.lua will define the screen in a number of “Points”, which sets the virtual width and height of the screen.  Corona SDK will determine how to best fit the screen. In other words, your config.lua sets a width of 320 points (config.lua is always read as if your app was in portrait/vertical mode!).  If you are on a 640px device, we calculate a scale factor, in this case 2.0 (640 / 320). Then we look in the config.lua to  see which version of the file to load. The config.lua code I suggested you add:

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

Since 2.0 is bigger than 1.5 and less than 3.0, Corona will grab the @2x version of the image.  Next we are going to take the size of the image you specified with display.newImageRect() and scale the image up or down so that it’s the right proportion on the screen. Since we are dealing with Circles, let’s say you said 50, 50. If the image isn’t really 50x50 we’re going to scale it until it is 50x50 on the point scale of the screen.  Since Ive been using 50 x 50 as my example, to make it work on a 640px screen we need to scale it up to 100x100 so we grab the @2x version which is already 100x100 and you get pixel perfect. But the same setup on an iPhone 6’s 750px wide screen is 17% bigger than the iPhone 5’s 640px screen. We will need to scale that image up 17% on the iPhone 6 to make it fit right.

But in the end, the goal is for you to define your content area (320x480 recommended) and size your base graphics to fit that size screen, then provide images that are twice as big and four times as big, name them correctly, use display.newImageRect() instead of display.newImage() where possible and let Corona SDK do the rest.

[hasty]

To get different colours, you could use white images for your circle, and then just use :setFillColor() to get the colours.