Smooth Side-Scroller

Solar2D General Questions/Discussion
#1

Hi there,
sorry if this has been asked before, but I’ve searched a lot and found nothing…

I’m trying to create a side-scrolling for the iPad, and when moving the background along the x-axis the background looks messy and choppy, the result isn’t a smooth and sharp background image moving…

Is there any technique to solve this problem?

I used the algorithm from the Jungle Scene example…

I checked also another example, the Horse Animation, and if you see the front threes movement, it’s quite the same result… there’s no smooth movement.

Thanks in advance [import]uid: 13694 topic_id: 15767 reply_id: 315767[/import]

#2

Hi,
I found the solution and just in case that anyone else have the same problem here’s the answer:

Instead of moving the image every frame like this:
image.x = image.x - 5

is better to do it by 1px five times during the same frame:
image.x = image.x - 1
image.x = image.x - 1
image.x = image.x - 1
image.x = image.x - 1
image.x = image.x - 1

this way the background movement looks smoother than the previous method.

Hope it helps someone… [import]uid: 13694 topic_id: 15767 reply_id: 60449[/import]

#3

Another possible solution would be to use transitions.

[lua]transition.to(image,{x=image.x+5,time=100})[/lua]

play with time to get the right speed. [import]uid: 9048 topic_id: 15767 reply_id: 60495[/import]

#4

I’d like someone from Ansca to explain why this would work the way you describe. The ONLY way it could possible work is if the instant you updated the variable the image moved. Even if that is the case then there would be micro (not milli) seconds between each line so I don’t see how that would smooth it out at all.

You are saying that this function yields smoother scrolling than the second version:

[lua]local bUseVersionOne = true

– Version one. Claimed to be smoother
function onMyEnterFrame1()
image.x = image.x - 1
image.x = image.x - 1
image.x = image.x - 1
image.x = image.x - 1
image.x = image.x - 1
end

– Version two. Supposedly choppy
function onMyEnterFrame2()
image.x = image.x - 5
end

if ( bUseVersionOne == true ) then
Runtime:addEventListener( “enterFrame”, onMyEnterFrame1 )
else
Runtime:addEventListener( “enterFrame”, onMyEnterFrame2 )
end[/lua]

Can anyone at Ansca explain why this would be true? [import]uid: 16734 topic_id: 15767 reply_id: 60496[/import]

#5

I’m having problems with animations too (as I have posted here: http://developer.anscamobile.com/forum/2011/01/08/fps-and-memoryusage), all of my animations are choppy unless I move then less than one pixel at enterFrame, I will try this one and see if something changes.

No changes, but according to the docs (http://developer.anscamobile.com/content/application-programming-guide-graphics-and-drawing), this would not be possible. Maybe more than one eventListener at the same time? [import]uid: 50425 topic_id: 15767 reply_id: 60501[/import]

#6

Another thing that helps with smoothness, if you game can support it without too many slowdowns, is to set your FPS to 60 in your config.lua.

Example config.lua:

application = { content = { fps = 60}[/code] [import]uid: 52430 topic_id: 15767 reply_id: 60523[/import]

#7

I call baloney.

In Corona the screen doesn’t update in the middle of a block of code. Those two functions will work identically.

As someone mentioned before, transition.to is the easiest way to handle this. You put the object where it starts, you specify where it should end, how quickly it should get there, and Corona does all the work. Even numbers help, because you want to eliminate any possibility that the object will try to go to a coordinate like (10,-5.50) In this case I have seen images get a little grainy during transition. [import]uid: 70391 topic_id: 15767 reply_id: 60531[/import]

#8

@green.castle, thanks for agreeing with me. This seemed so wrong I had to say something.

In general a side scroller will move ‘n’ pixels a second, or be tied to player input. Moving 5 pixels every frame would be 150 pixels a second. Pretty fast, at least for most games.

I like the idea of using transition to move it, which works great if you want to move at a constant rate. Another approach would be to have an accumulator to handle the fractional frame movement. When the accumulator exceeds 1 (if you are using a float accumulator) then you would increment your position and subtract 1 from the accumulator. This is very old school, but it works pretty well and allows you to vary the rate at which the accumulator is bumped so you can use this technique to easily have a variable rate scrolling game.

[import]uid: 16734 topic_id: 15767 reply_id: 60553[/import]