objects look jittery with simple physics

nischal.srinivas · April 16, 2015, 5:06am

Hi there,

im new here, playing around with corona features, i made a sample where i spaw characters on the top and transition them from top to bottom on reaching the floor i kill them. Everything works as expected but i see jitter in between and the characters look blurred, is it something that im doing wrong? or is there some problem with the aspect ratio?

config.lua

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3, }, }, }

main.lua

display.setStatusBar( display.HiddenStatusBar ) local physics = require( "physics" ) physics.start() -------------------------------------------------------------------------------- local image\_star = nil local center\_piece = display.newImageRect( "layer-5.png",display.contentWidth,40 ) center\_piece.myName = "floor" center\_piece.x = display.contentCenterX center\_piece.y = ( display.contentHeight -20) physics.addBody( center\_piece, "static", { friction=0.5, bounce=0.3 } ) ---------------------------------------------------------------------------------- local image\_name = "star.png" local image\_group = display.newGroup() ----------------------------------------------------------------------------------- local function onLocalCollision( self, event ) if ( event.phase == "began" and (event.other.myName == "floor")) then self:removeSelf() end end ----------------------------------------------------------------------------------------------------- local function create\_body( event ) if image\_group.numChildren \>= 100 then -- Limit the number of bodies simultaneously on screen. image\_group[1]:removeSelf() end image\_star = display.newImageRect( "coin.png", 50, 50 ) image\_star:setFillColor( 0.5 ) image\_star.myName = "star" image\_group:insert( image\_star ) image\_star.x = math.random(15, display.contentWidth-15 ) image\_star.y = 0 image\_star.rotation = math.random( 360 ) physics.addBody( image\_star, "dynamic", { isSensor = true } ) image\_star.gravityScale = 0 image\_star:setLinearVelocity(0,600) -- transition.moveTo(image\_star,{y = display.contentHeight, time = 2500}) image\_star.collision = onLocalCollision image\_star:addEventListener( "collision", image\_star ) end timer.performWithDelay( 1000, create\_body, -1 ) ----------------------------------------------------------------------------

I tried it on nexus 4 as well, i see jittery objects there as well, can someone tell me what am i doing wrong.

TIA,

Nischal Y

bjsorrentino · April 16, 2015, 9:38pm

Hi @Nischal,

Welcome to Corona! I see two potential issues related to your code:

If the images seem “blurry” on some devices, it’s probably because you haven’t included various resolutions of the image. Meaning, if you want to use dynamic image selection, you need to include both the standard and “@2x” versions of the image so that the device can dynamically choose the higher resolution version on devices with bigger/sharper screens.
You may want to increase the “fps” in config.lua from 30 to 60. This can smooth out frame rates. However, every device will have some limit to the number of physical objects which you can be using at once. 100 physical objects in a simulation at the same time may cause performance issues on older or less powerful devices.

Hope this helps,

Brent

nischal.srinivas · April 17, 2015, 12:37am

Hi Brent,

Thanks for the reply i will try out suggestion 1.

However right now im displaying only 4 objects at any point of time and im already running my game in 30 fps.

i will try with the suggestion 1 and get back.

Thanks,

Nischal

nischal.srinivas · April 17, 2015, 1:52am

Hi Brent,

I tried suggestion 1, all the images i was using were hi quality ones, for eg the coin.png in the above example was 494x496 (i assume that this resolution should be enough for most of the screens). Still the images are blurred.

So i tried removing the images and used the normal shapes using newRect and newCircle, guess what even then the moving objects were blurred, below are config.lua and main.lua with the test case i tried. i still feel im doing something fundamentally wrong here :wacko:

Config.lua

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, }, }

main.lua

display.setStatusBar( display.HiddenStatusBar ) local physics = require( "physics" ) physics.start() -------------------------------------------------------------------------------- --this is my floor object local center\_piece = display.newRect( 0,0,display.contentWidth,40 ) center\_piece.myName = "floor" center\_piece.x = display.contentCenterX center\_piece.y = ( display.contentHeight -20) physics.addBody( center\_piece, "static", { friction=0.5, bounce=0.3 } ) ---------------------------------------------------------------------------------- local image\_star = nil local image\_name = "star.png" local image\_group = display.newGroup() ----------------------------------------------------------------------------------- local function onLocalCollision( self, event ) if ( event.phase == "began" and (event.other.myName == "floor")) then self:removeSelf() end end ----------------------------------------------------------------------------------------------------- local function create\_body( event ) image\_star = display.newCircle( 0, 0, 30 ) image\_star:setFillColor( 0.5 ) image\_star.myName = "star" image\_group:insert( image\_star ) image\_star.x = math.random(15, display.contentWidth-15 ) image\_star.y = 0 image\_star.rotation = math.random( 360 ) physics.addBody( image\_star, "dynamic", { isSensor = true } ) image\_star.gravityScale = 0 image\_star:setLinearVelocity(0,600) -- transition.moveTo(image\_star,{y = display.contentHeight, time = 2500}) image\_star.collision = onLocalCollision image\_star:addEventListener( "collision", image\_star ) end timer.performWithDelay( 1000, create\_body, -1 ) ----------------------------------------------------------------------------

Thanks,

Nischal Y

bjsorrentino · April 17, 2015, 9:19pm

Hi @Nischal,

Can you post a screenshot of this “blurred” issue? Nothing in your code seems to indicate why this would occur, especially if you’re only using vector objects.

To attach a screenshot, click the “More Reply Options” button below the comment submission, and on the next page you’ll be able to select and upload an image to this post.

Thanks,

Brent

nischal.srinivas · April 18, 2015, 6:45am

Hi Brent,

My Bad the objects were not blurred indeed, when i captured a screenshot i noticed that the objects were not blurred, but the problem seems to be with the transitions.

when i move an object from top to bottom the transitions are not smooth, i tried by moving objects by setting the velocity and using transitions (moveTo) as well, in both the cases the transitions are not smooth and it is noticeable.

you can see the recording in the below link

https://drive.google.com/file/d/0BwK1OlY_kgLRN3JEMDl4ZG1SaWc/view?usp=sharing

(transitions are bit more rough in the recorded video, could be coz of frame rate, albeit it is noticeably rough)

What could possibly be the reason for these rough transitions.

my usecase:

im trying to make a game where objects (coins) will randomly be falling from the sky, the objects will be falling with a uniform velocity.

Thanks,

Nischal Y

bjsorrentino · April 20, 2015, 9:35pm

Hi @Nischal,

Did you try increasing the “fps” setting in your config.lua to 60?

Brent

nischal.srinivas · April 21, 2015, 7:02am

Hi Brent,

I totally overlooked the fps setting, how did i miss that part, that was naive :rolleyes: .

Now there are no jitters.

Anyways thanks for bearing with me.

and how should i mark this thread as Resolved?

Cheers,

Nischal Y

bjsorrentino · April 21, 2015, 8:34pm

Hi @Nischal,

Happy to help. I’ll just leave this thread as-is, in case others may benefit from it.

Brent

bjsorrentino · April 16, 2015, 9:38pm

Hi @Nischal,

Welcome to Corona! I see two potential issues related to your code:

If the images seem “blurry” on some devices, it’s probably because you haven’t included various resolutions of the image. Meaning, if you want to use dynamic image selection, you need to include both the standard and “@2x” versions of the image so that the device can dynamically choose the higher resolution version on devices with bigger/sharper screens.
You may want to increase the “fps” in config.lua from 30 to 60. This can smooth out frame rates. However, every device will have some limit to the number of physical objects which you can be using at once. 100 physical objects in a simulation at the same time may cause performance issues on older or less powerful devices.

Hope this helps,

Brent

nischal.srinivas · April 17, 2015, 12:37am

Hi Brent,

Thanks for the reply i will try out suggestion 1.

However right now im displaying only 4 objects at any point of time and im already running my game in 30 fps.

i will try with the suggestion 1 and get back.

Thanks,

Nischal

nischal.srinivas · April 17, 2015, 1:52am

Hi Brent,

I tried suggestion 1, all the images i was using were hi quality ones, for eg the coin.png in the above example was 494x496 (i assume that this resolution should be enough for most of the screens). Still the images are blurred.

So i tried removing the images and used the normal shapes using newRect and newCircle, guess what even then the moving objects were blurred, below are config.lua and main.lua with the test case i tried. i still feel im doing something fundamentally wrong here :wacko:

Config.lua

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, }, }

main.lua

display.setStatusBar( display.HiddenStatusBar ) local physics = require( "physics" ) physics.start() -------------------------------------------------------------------------------- --this is my floor object local center\_piece = display.newRect( 0,0,display.contentWidth,40 ) center\_piece.myName = "floor" center\_piece.x = display.contentCenterX center\_piece.y = ( display.contentHeight -20) physics.addBody( center\_piece, "static", { friction=0.5, bounce=0.3 } ) ---------------------------------------------------------------------------------- local image\_star = nil local image\_name = "star.png" local image\_group = display.newGroup() ----------------------------------------------------------------------------------- local function onLocalCollision( self, event ) if ( event.phase == "began" and (event.other.myName == "floor")) then self:removeSelf() end end ----------------------------------------------------------------------------------------------------- local function create\_body( event ) image\_star = display.newCircle( 0, 0, 30 ) image\_star:setFillColor( 0.5 ) image\_star.myName = "star" image\_group:insert( image\_star ) image\_star.x = math.random(15, display.contentWidth-15 ) image\_star.y = 0 image\_star.rotation = math.random( 360 ) physics.addBody( image\_star, "dynamic", { isSensor = true } ) image\_star.gravityScale = 0 image\_star:setLinearVelocity(0,600) -- transition.moveTo(image\_star,{y = display.contentHeight, time = 2500}) image\_star.collision = onLocalCollision image\_star:addEventListener( "collision", image\_star ) end timer.performWithDelay( 1000, create\_body, -1 ) ----------------------------------------------------------------------------

Thanks,

Nischal Y

bjsorrentino · April 17, 2015, 9:19pm

Hi @Nischal,

Can you post a screenshot of this “blurred” issue? Nothing in your code seems to indicate why this would occur, especially if you’re only using vector objects.

To attach a screenshot, click the “More Reply Options” button below the comment submission, and on the next page you’ll be able to select and upload an image to this post.

Thanks,

Brent

nischal.srinivas · April 18, 2015, 6:45am

Hi Brent,

My Bad the objects were not blurred indeed, when i captured a screenshot i noticed that the objects were not blurred, but the problem seems to be with the transitions.

when i move an object from top to bottom the transitions are not smooth, i tried by moving objects by setting the velocity and using transitions (moveTo) as well, in both the cases the transitions are not smooth and it is noticeable.

you can see the recording in the below link

https://drive.google.com/file/d/0BwK1OlY_kgLRN3JEMDl4ZG1SaWc/view?usp=sharing

(transitions are bit more rough in the recorded video, could be coz of frame rate, albeit it is noticeably rough)

What could possibly be the reason for these rough transitions.

my usecase:

im trying to make a game where objects (coins) will randomly be falling from the sky, the objects will be falling with a uniform velocity.

Thanks,

Nischal Y

bjsorrentino · April 20, 2015, 9:35pm

Hi @Nischal,

Did you try increasing the “fps” setting in your config.lua to 60?

Brent

nischal.srinivas · April 21, 2015, 7:02am

Hi Brent,

I totally overlooked the fps setting, how did i miss that part, that was naive :rolleyes: .

Now there are no jitters.

Anyways thanks for bearing with me.

and how should i mark this thread as Resolved?

Cheers,

Nischal Y

bjsorrentino · April 21, 2015, 8:34pm

Hi @Nischal,

Happy to help. I’ll just leave this thread as-is, in case others may benefit from it.

Brent