Jittery animation with transition.to

[rrossen]

Hi there,

Steadily making progress with my first game /yay

There’s a thing with the animation though, that I have ignored so far but really needs to be fixed before releasing.

I’m moving sprites (.png’s) from the top of the screen to the bottom, but from what I can tell, it happens simple when moving an object wherever. (from not *too* extensive testing, admittedly).

The animation is “jittery”. It like it “sticks” every so many pixels for a fraction of a second. Or like the screen refresh isn’t keeping up or something.

It happens in both the sim and on my phone (LG Optimus 2X). As per someone’s advice in the IRC channel I already switched from an

onEnterFrame ( object.y = object.y + delta) setup to using
transition.to, object(y=y+delta) but the problem remains.

I really hope someone can help me figure this out, since it’s a core part of the gameplay and I can not imagine it’s supposed to act like that.

If you need any more info, I’ll happily do what I can.

Kind regards,
Reinier [import]uid: 53290 topic_id: 14655 reply_id: 314655[/import]

[jstrahan]

try using enterFrame for animation transition.to is the problem it’s great for a few small things but for all the animation in a game it will slow everything down [import]uid: 7911 topic_id: 14655 reply_id: 54195[/import]

[rrossen]

Hi JStrahan,

Thanks for the suggestion, but I had it with onEnterFrame before and the result was the same. Also, I have at most 15 moving elements or so at a time, that are like 50x50 pixels.

Added benefit of transition.to is the cleaner code

Kind regards,
Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54197[/import]

[Danny]

Have you tried playing with the time/delay in the transition ? That can smooth things out. Depends how fast you are moving them too I guess. [import]uid: 84637 topic_id: 14655 reply_id: 54212[/import]

[rrossen]

Hey Danny,

Thanks for replying

Well, the speed is a key component in the gameplay difficulty.

Basically a plain main.lua file containing the following code, has the problem:

local star = display.newImageRect("skull.png", 32,32)  
star.x = 190  
star.y = 200  
star.xScale, star.yScale = 2,2  
transition.to(star, {time=5000, y=800})  

where skull.png is a simple skull PNG image that I stole from Google image search that is 50x50 pixels or something. There is no config or build file that changes any of the default settings either.

Thanks again,
Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54213[/import]

[Danny]

I’ll have a peek and see what it looks like.

I will try to come up with some kind of solution for you

Edit : Using different transition types as opposed to the default (easing.linear) makes all the difference. Try this :

transition.to(star, {time=5000, y=800, transition = easing.outExpo})  

You can see all supported transition types in the api listing : http://developer.anscamobile.com/resources/apis [import]uid: 84637 topic_id: 14655 reply_id: 54217[/import]

[rrossen]

I love timezones sometimes, haha. (Netherlands here)

Well, actually, I owe you a big “thank you” now for forcing me to try the other easings (as I was too thick-headed to try them since I had my mind set on the gameplay). This actually makes the gameplay a bit more awesome, so thank you!

However, the animation problem persists. Also, it is not so much a case of which function or tech to use but more that at 30 fps the movement isn’t smooth.

I did try earlier (before using transition.to) to use the system.getTimer() as described in the cogwheel animation example, but that left the same problem. Kind of makes me think its some weird image tearing issue now that I think of it.

Since they keep moving properly but seem “sticky” sometimes… hmmz, I think I have a screen recorder installed… I’ll go give that a shot now.

• Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54219[/import]

[rrossen]

Bah, still can’t see it. It’s annoying as hell, since you *see* it’s there. Just can not put my finger on it as to what exactly is happening.

It feels like it’s comparable to (bear with me!) if you place your fingertip on the table and rub forward… it “stutters”, kind of like that. It keeps going forward smoothly but in that smooth path it “stutters” a bit.

Home that makes some sense, haha.

• Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54222[/import]

[jstrahan]

now that i think about this the game i was working on using transition.to was working fine then i changed something ( dont remember what but it wasnt a transition.to ) and i got the shutter effect always happened at the same point but i didnt worry about it much cause i was working on other parts then it quit shuttering so maybe it not your transitions but something else in your code [import]uid: 7911 topic_id: 14655 reply_id: 54223[/import]

[rrossen]

Hi JStrahan,

As much as I would love that to be the case, it happens in the code snippet a few posts above which is the absolute bare minimum to animate something. I’ll upload my test app, so you can take a look yourself if you want

• Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54225[/import]

[rrossen]

As promised

http://dl.dropbox.com/u/24686401/animation-bug.zip [import]uid: 53290 topic_id: 14655 reply_id: 54227[/import]

[Danny]

Out of interest… What FPS do you have your app set to via config.lua ?

I always set mine to 60fps.

I’m not saying you have to set it to 60fps, i’m just curious if the issue appears at either 60 or 30fps or both.

If its one or the other then there could possibly be a bug. [import]uid: 84637 topic_id: 14655 reply_id: 54228[/import]

[rrossen]

It is currently at 30, I shall give 60 a shot.

[testing!]

…

Ok, at 60 fps it is *less* noticable. So maybe it is a bug then as you said. It seems to be pretty much perfect at scaling “none” @ 60 fps. Also, the effect is really extreme at scaling “zoomStretch” @ 30 fps and, again, less at 60 fps.

Perhaps worthy of noting; I am using letterbox scaling with a screensize based on 320x480 for a 800x480 phone.

Does that help you?

Thanks for the help,
Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54230[/import]

[Danny]

Thanks for the info, I will pass it onto the development team. [import]uid: 84637 topic_id: 14655 reply_id: 54232[/import]

[rrossen]

Another thing, just to be explicit; with using quadOut (and others probably too); The faster the object moves, the more noticable the stutter.

In my case its moving about 500 pixels in 3 seconds, which isn’t *that* speedy, I think.

• Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54233[/import]

[yagizgurgul]

Hi,

Can you test this with 30FPS:
[lua]local star = display.newImageRect(“skull.png”, 32,32)
star.x = 190
star.y = 200
star.xScale, star.yScale = 2,2

local prevTime = -1
local starSpeed = 3
local fps = 0
local targetSpeed = 0

local render = function(ev)
if prevTime ~= -1 then
star.y = star.y + 30/(system.getTimer() - prevTime)*starSpeed
end
prevTime = system.getTimer()
end

Runtime:addEventListener(“enterFrame”,render)[/lua]
And this one with 60FPS:
[lua]local star = display.newImageRect(“skull.png”, 32,32)
star.x = 190
star.y = 200
star.xScale, star.yScale = 2,2

local prevTime = -1
local starSpeed = 3
local fps = 0
local targetSpeed = 0

local render = function(ev)
if prevTime ~= -1 then
star.y = star.y + 60/(system.getTimer() - prevTime)*starSpeed
end
prevTime = system.getTimer()
end

Runtime:addEventListener(“enterFrame”,render)[/lua]

I couldn’t test the code but I think i can fix the problem?

Cheers!
[import]uid: 5629 topic_id: 14655 reply_id: 54269[/import]

[rrossen]

Hi Yagizgurgul,

Thanks for the snippet. I’m headed out of the house now but I’ll give it a shot when I get home and post back the result.

From a quick glance at your code; It’s using time based animation as opposed to the framerate/interval “triggers”?

Thanks again
Reinier [import]uid: 53290 topic_id: 14655 reply_id: 54273[/import]

[davidchiu]

Was this issue ever resolved? I’m experience the exact same issue with stuttering when moving objects across the screen. As a test I built the sample HorseAnimation code (http://developer.anscamobile.com/content/horse-animation) and noticed the exact issue in both the Corona Simulator and XCode simulator. There is slight tearing and slight jumpiness in the graphics. [import]uid: 23583 topic_id: 14655 reply_id: 61152[/import]

[rasheed]

me to, any fix is coming ? [import]uid: 79884 topic_id: 14655 reply_id: 62985[/import]