Scrolling the background... phase 2

Hi,
here I’m again :slight_smile:

Today, what i’m try to do is a scrolling linke this video:
http://www.youtube.com/watch?v=AedyPSWrKyI

As you can see when the use touch the image on a direction,
the image scroll with “phisics” into the direction.

I made a simple script, where the image scroll but:

  • there is no phisics
  • as soon as i touch the image to scroll, the position of this is centered by the position when I click/touch the iphone screen.
    Any suggestion?
    Thanks again
    Ale

[import]uid: 940 topic_id: 138 reply_id: 300138[/import]

i will get you some code soon…

one thing you want to look at really quick is object:setReferencePoint( referencePoint ) in the APRefernceGuide page 44

Carlos [import]uid: 24 topic_id: 138 reply_id: 127[/import]

Hi Carlos,

I checked page 44 of the APIReferenceGuide you mention above and it seems we can’t set the reference point to an exact x,y coordinate that we “touched”. We only get to choose from the list quoted below. So the question I have then is how do we scroll something by touching and dragging without getting the glitchy “jump” effect that happens when setting the reference point to something other than the exact place where we touched the screen? Thanks in advance.

The argument referencePoint should be one of:
• display.CenterReferencePoint
• display.TopLeftReferencePoint
• display.TopCenterReferencePoint
• display.TopRightReferencePoint
• display.CenterRightReferencePoint
• display.BottomRightReferencePoint
• display.BottomCenterReferencePoint
• display.BottomLeftReferencePoint
• display.CenterLeftReferencePoint [import]uid: 2314 topic_id: 138 reply_id: 197[/import]

Was this ever answered? I have a very long background graphic that I need to be able to drag back and forth without the “re-centered jerk” effect. [import]uid: 2862 topic_id: 138 reply_id: 337[/import]

at this moment no :frowning: [import]uid: 940 topic_id: 138 reply_id: 338[/import]

Hi guys, we’ve been really swamped and haven’t been able to get to this, but we will, I promise. It will most likely be included in the sample code with the next release as well. [import]uid: 5 topic_id: 138 reply_id: 341[/import]

Give this a try:

[html]

main-1.lua
local arguments =
{
{ x=50, y=10, w=100, h=100, r=10, red=255, green=0, blue=128 },
{ x=10, y=50, w=100, h=100, r=10, red=0, green=128, blue=255 },
{ x=90, y=90, w=100, h=100, r=10, red=255, green=255, blue=0 }
}
local function printTouch( event )
if ( event.target ~= nil ) then
local bounds = event.target.stageBounds
print( "event(" .. event.phase .. ") ("..event.x..","..event.y..") bounds: "..bounds.xMin..","..bounds.yMin..","..bounds.xMax..","..bounds.yMax )
end
end
local function onTouch( event )
local t = event.target

local phase = event.phase
if "began" == phase then
-- Make target the top-most object
local parent = t.parent
 parent:insert( t )
 display.getCurrentStage():setFocus( t )

-- Spurious events can be sent to the target, e.g. the user presses
-- elsewhere on the screen and then moves the finger over the target.
-- To prevent this, we add this flag. Only when it's true will "move"
-- events be sent to the target.
 t.isFocus = true

-- Store initial position
 t.x0 = event.x - t.x
 t.y0 = event.y - t.y
elseif t.isFocus then
if "moved" == phase then
-- Make object move (subtract t.x0,t.y0 so that moves are
-- relative to initial grab point).
 t.x = event.x - t.x0
 t.y = event.y - t.y0
printTouch(event)
elseif "ended" == phase or "cancelled" == phase then
 display.getCurrentStage():setFocus( nil )
 t.isFocus = false
end
end
-- Important to return true. This tells the system that the event
-- should not be propagated to listeners of any objects underneath.
return true
end

-- Iterate through arguments array and create rounded rects for each item
for \_,item in ipairs( arguments ) do
local button = display.newRoundedRect( item.x, item.y, item.w, item.h, item.r )
 button:setFillColor( item.red, item.green, item.blue )
 button.strokeWidth = 6
 button:setStrokeColor( 200,200,200,255 )

-- Make the button instance respond to touch events
 button:addEventListener( "touch", onTouch )
end

Runtime:addEventListener( "touch", printTouch )

[/html] [import]uid: 5 topic_id: 138 reply_id: 343[/import]

It works perfect! Very smooth movement ! Thanks! [import]uid: 2862 topic_id: 138 reply_id: 344[/import]

How would one put maximum bounds on an objects movement with this code if one wanted to restrict how much it could move. Thanks. [import]uid: 1908 topic_id: 138 reply_id: 1214[/import]

I don’t know if this last question was ever answered but I am looking to do a similar thing. I want to be able to a max and min x and y bounding box to restrict the movement. Any code out there for this? [import]uid: 5687 topic_id: 138 reply_id: 3277[/import]

Just restrict what you allow to be in t.x and t.y at the move pahse to your allowed area would be suffice.

And about the reference point… you can’t set a different one with the mentioned function… but you can simply set object.xReference and object.yReference with the coordinates I guess.

The original routine in the video also has “acceleration” in it… which is also pretty easy to implement.

Don’t move the object in the touch handler but set the position as target for a transform or your own “enterFrame” handler. Use the distance of the image position to your finger for setting the speed of the transform or for the movement distance per frame (count skipped frames using system.getTimer).

Maybe I write an example. Should be fun :slight_smile: [import]uid: 6928 topic_id: 138 reply_id: 3320[/import]

Thank you. But how do you get from this code, to using a background and having IT scroll. Where do you call the background.
Thanks! [import]uid: 6319 topic_id: 138 reply_id: 4226[/import]