[Resolved] Dragging a group of images

[fp1]

Hello,

I have a newbie question regarding the dragging of an image group.
I loaded six images and added them to a group

local p1 = display.newImage( "image-1.png" ) p1.x, p1.y = 0, 0 local p2 = display.newImage( "image-2.png" ) p2.x, p2.y = 0, 150 local p3 = display.newImage( "image-3.png" ) p3.x, p3.y = 0, 300
and so on for the other five images.

  
local group1 = display.newGroup()  
  
-- set the group's position  
group1.x, group1.y = centerX, centerY  
  
-- insert the object into the group  
group1:insert( p1 )  
...  

The dragging I achive using this code:

local function draggoup1 (event)  
group1.x = centerX  
group1.y = event.y  
end  
group1:addEventListener ("touch", draggoup1)  

The bar of pictures can now be dragged along the y axis. This works well. The problem I have is that when the bar has been dragged and is then touched again the starting point for the drag action is obvioulsy where the user touches the bar. How can this be avoided?
Will I have to make event listeners for each image instead for the group?

I would like to use several draggable bars side by side, so I think I ccannot use a scrolling widget.

Another question is how can I achieve the effect that the bar will move a little further in the direction of the drag, i.e. using easing and friction? I knew how to do this in flash but I did this a few years ago and I just cant remember how it was done. I think I used the greensock library

thank you
Frank [import]uid: 41769 topic_id: 25615 reply_id: 325615[/import]

[peach_pellen]

You need to check previous y, try running this code on its own;

[lua]local imageGroup = display.newGroup()

local image1 = display.newCircle( 160, 100, 30 )
local image2 = display.newCircle( 160, 200, 30 )
local image3 = display.newCircle( 160, 300, 30 )

imageGroup:insert(image1)
imageGroup:insert(image2)
imageGroup:insert(image3)

–Dragging
local function drag(event)
local t = event.target
local phase = event.phase
if “began” == phase then
display.getCurrentStage():setFocus( t )
t.isFocus = true
t.y0 = event.y - t.y
elseif t.isFocus then
if “moved” == phase then
t.y = event.y - t.y0
elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( nil )
t.isFocus = false
end
end
end
imageGroup:addEventListener(“touch”, drag)[/lua]

Peach [import]uid: 52491 topic_id: 25615 reply_id: 103491[/import]

[fp1]

Great! Thanks a lot Peach! I inserted your code and modified it to fit my scene and it works.

I’ll have a look at setFocus and try to understand how it works

Frank [import]uid: 41769 topic_id: 25615 reply_id: 103515[/import]

[peach_pellen]

The part of my code that lets you drag from the previous position is on lines 18 and 21 and the setFocus part is really just good practice - you can read more about it on the API page.

Glad I could help, marking this as resolved [import]uid: 52491 topic_id: 25615 reply_id: 103671[/import]

[fp1]

I have another maybe trivial problem. How can I access the x and y coordinates of the individual group members on the stage? If I do

for i = 1, imageGroup.numChildren do  
  
 imageGroup[i].y  
end  

I only get the y position within the group.

Thank you [import]uid: 41769 topic_id: 25615 reply_id: 108092[/import]

[richard9]

Well, that shouldn’t work at all unless it’s in a print statement, but anyway…

AFAIK the most popular way to get world coordinates is with contentBounds. It won’t tell you the anchor point unfortunately, so maybe somebody has a better idea there.

myGroup.contentBounds.xMin myGroup.contentBounds.xMax myGroup.contentBounds.yMin myGroup.contentBounds.xMax

contentBounds is particularly useful if you scale an object, as .width and .height do not change, so you need to use contentBounds to figure out the new dimensions. [import]uid: 41884 topic_id: 25615 reply_id: 108101[/import]

[fp1]

thanks for your reply! You’re right it should be in a print statement, looks like I forgot it.

Actually what I’m looking for is to find the coordinates of group members on the stage.

If I have a group like this:

local imageGroup = display.newGroup()  
  
local image1 = display.newImage( "flip-1.png" )  
image1.x, image1.y = 0, 0  
local image2 = display.newImage( "flip-2.png" )  
image2.x, image2.y = 0, 150  
local image3 = display.newImage( "flip-3.png" )  
image3.x, image3.y = 0, 300  
imageGroup:insert(image1)  
imageGroup:insert(image2)  
imageGroup:insert(image3)  

and I drag the group around, how do I know at what position for example image3 is.
When the drag event ended I call a function where I try to print the coordinates of an individual image, like so:

print (image3.y)

but this gives me only the position of the image in the group, in this case 300. What I would like to know is where on the stage is the image aafter dragging the group.

[import]uid: 41769 topic_id: 25615 reply_id: 108141[/import]

[Anderoth]

If the reference point of the group is set to top left, then you can calculate the difference between its point and the point of the image inside it. Something like this should do it.

[code]
– just to be sure the reference point of the group is top left
imageGroup:setReferencePoint(display.TopLeftReferencePoint)

– after moving it around and such, calculate the position on the world stage
image1.worldY = imageGroup.y + image1.y
image1.worldX = imageGroup.x + image1.x

[/code] [import]uid: 56820 topic_id: 25615 reply_id: 108150[/import]

[fp1]

Ok thanks a lot! Then I will try this out.
I was just a bit confused that the members of the group are no longer accessible when they are in a group by something like

stage.imageGroup.image1x

Thanks
Frank

[import]uid: 41769 topic_id: 25615 reply_id: 108222[/import]