Is it possible to create smooth movement of objects across screen?

element_skate · March 7, 2014, 10:45am

Hi guys,

I am making a scrolling game but I am facing some difficulties using transitions.

I need to make a parallax background but it looks jerky when I run it. I searched a lot

if someone had an answer for this but in vain.

The problem is that I can’t get the object transition smoothly. I am not sure if this is

caused from the build of Corona I am using or something else. I created a demo

project which you can try.

I doubt that Corona can’t transition objects smoothly?

Any help will be appreciated.

[lua]

– hide the status bar
display.setStatusBar( display.HiddenStatusBar )

local circle = display.newCircle(0,0, 50)
circle.x = display.contentWidth*1.2
circle.y = 200

– create the first transition
transition.to(circle, {time = 8000, x = -240, onComplete = function()
circle.x = display.contentWidth*1.2
end
})

– start looping the transitions
timer.performWithDelay(8100, function()

transition.to(circle, {time = 8000, x = -240, onComplete = function()
circle.x = display.contentWidth*1.2
end
})

end, -1 )
[/lua]

aciddrop · March 7, 2014, 10:57am

Hi,

I’m working with element_skate on this project. We’re tearing our hair out trying to get an object to just simply move across the screen without juddering. We’ve boiled it down to that simple code above which you can run as a main.lua.

This is what it looks like for me:

https://www.dropbox.com/s/bn17r80047mh2sv/corona_scroll_test.mp4

We’re using Version: 2.0.0, Build: 2013.1202 due to some legacy requirements of our code.

We’ve tested it on devices too (Galaxy S4, Galaxy Note 10.1) and have the same issue.

Any help much appreciated!

primoz.cerar · March 7, 2014, 1:57pm

It’s a common issue even in newer builds. I have struggled with this myself recently and though sometimes your own code makes it even worse, when enterFrame or timer events take a bit longer, you can not make it completely smooth by default. I’ve tried using custom transitions and updating the time values used for calculations and other things but it does not eliminate the problem. If someone has a solution I’d love to know.

Alex10 · March 7, 2014, 3:04pm

I just created this, and it seems smooth to me:

local circle = display.newCircle(0,0, 50) circle.x = display.contentWidth\*1.2 circle.y = 200 local function moveCircle() circle.x = display.contentWidth\*1.2 transition.to(circle, {time = 8000, x = -240, onComplete = moveCircle}) end moveCircle()

Are you folks saying that code created jagged transitions? Maybe my eyes aren’t as good as they once were…

element_skate · March 7, 2014, 3:21pm

Panc software,

I appreciate your code but if you look closely there is still a little glitch, jitter ( I am not sure how to call it ) but it is

evidently there.

Burhan_J · March 7, 2014, 3:33pm

Hi guys,

Have you tried adding fps = 60 in your config.lua. It may help.

Default is 30fps.

burhan

primoz.cerar · March 7, 2014, 4:27pm

You should not have to do that to get a smooth transition. 30 fps is more than your eyes can detect so it should be smooth.

element_skate · March 7, 2014, 4:30pm

Correct. No matter if 30 or 60 fps the transition still has this jitter.

Alex10 · March 7, 2014, 5:06pm

Look smooth to me, folks. Where are you seeing the jitter? On device, or simulator?

element_skate · March 7, 2014, 5:17pm

It can be seen both on device and on simulator - you just have to look closely around the edges of the circle and

you can see that the pixels are shaking slightly.

primoz.cerar · March 7, 2014, 5:17pm

Both. Did you look at the video linked above? Do you consider that smooth or are you saying on your end it’s different than the video and it’s smooth?

Alex10 · March 7, 2014, 5:27pm

The DB preview isn’t working for me, so I have to go off of my devices and simulator.

If you say there is jitter, I’m not going to contradict you. I guess my eyeballs are just no good.

primoz.cerar · March 7, 2014, 5:35pm

@element_skate You are talking about the pixels on the edges? That’s because it’s not anti aliased. You can see when it’s not moving that the circle has jagged edges. That’s another well know thing with shapes. If you rotate a rect you will get the same. Why you get the changing pixels on the edges is because your positions in transition are not rounded and you ge positioning between pixels. This causes the engine to average the pixels differently and thus you get different edges. You should be using images with smooth edges for this.

I thought you were talking about the fact that the whole movement is not smooth as evidenced in your video and my test, the transition actually freezes for a split second on random frames and then jumps to the correct position. This is more obvious if you transition something that covers most of the screen like a background scene or image.

element_skate · March 7, 2014, 5:39pm

primoz.cerar:

@element_skate You are talking about the pixels on the edges? That’s because it’s not anti aliased. You can see when it’s not moving that the circle has jagged edges. That’s another well know thing with shapes. If you rotate a rect you will get the same. Why you get the changing pixels on the edges is because your positions in transition are not rounded and you ge positioning between pixels. This causes the engine to average the pixels differently and thus you get different edges. You should be using images with smooth edges for this.

I thought you were talking about the fact that the whole movement is not smooth as evidenced in your video and my test, the transition actually freezes for a split second on random frames and then jumps to the correct position. This is more obvious if you transition something that covers most of the screen like a background scene or image.

No to the first one and yes - I am talking about the second thing - the overall movement in the video, the freezing and stutter. I just told Panc software to look closely for the circle because it’s evident there as well

primoz.cerar · March 7, 2014, 5:54pm

I just made a quick test about this and this is why it happens. This is a print out of frame times. I know someone is going to tell me that print statement skews the result but I think in this case it doesn’t it’s just the way it is:

time, diff

116
125 9
155 30
186 31
218 32
247 29
267 20
295 28
325 30
357 32
389 32
423 34
455 32
481 26
521 40
549 28
559 10
595 36
625 30
657 32
690 33
721 31
749 28
779 30
809 30
859 50
887 28
923 36
955 32
989 34
1016 27
1047 31
1075 28
1110 35
1122 12
1152 30
1186 34
1216 30
1248 32
1281 33
1309 28
1341 32
1371 30
1403 32
1423 20
1449 26
1489 40
1516 27
1542 26
1573 31
1609 36
1637 28
1667 30
1723 56
1746 23
1777 31
1807 30
1841 34
1871 30
1903 32
1934 31
1963 29
1983 20
2011 28
2041 30
2073 32
2104 31
2144 40
2166 22
2197 31
2237 40
2261 24
2276 15
2312 36
2338 26
2370 32
2405 35
2431 26
2471 40
2497 26
2525 28
2573 48
2603 30
2639 36
2665 26
2697 32
2733 36

element_skate · March 7, 2014, 6:02pm

Okay, this seems like a fundamental problem of game development.

You can see it in this game also:

( the buildings at the back )

https://www.youtube.com/watch?v=DrHLuLbDDKs

Seems like in Unity they have the same problem.

http://s3.amazonaws.com/picobots/assets/unity/jerky-motion/JerkyMotion.html

http://answers.unity3d.com/questions/275016/updatefixedupdate-motion-stutter-not-another-novic.html

I don’t know if it’s even fixable. But it’s so strange that such a simple animation cannot be smooth enough.

aciddrop · March 7, 2014, 10:57am

Hi,