Dragging a sprite between display groups...

Solar2D General Questions/Discussion
#1

Need a general advice on this:

I have a scrollable list of items (in a ScrollView widget) in one section of the screen that the player should be able to drag to another location , beyond the boundaries of the ScrollView. Just like in a classical adventure game.

The problem is ScrollView acts like a separate display group and at some point the sprite should be moved to the “global” display group. And I can’t think of an “easy” way to achieve that in a manner that doesn’t make the sprite to suddenly appear at a different place on the screen :huh:  at the moment its (X, Y) coordinates become relative to the new display group.

Looks like a common scenario but I’m kinda lost.

#2

thoughts off the top of my head and without testing, you probably tried it already but anyway…

touch removes parent displaygroup and adds displayobject to a top layer screensize displaygroup, or use displayobject:toFront() if that works.

drag it to new location and ev. add to destination displaygroup on release

if released insided original scrollView or cancelled, move back to original location (stored on touch) and insert back into scrollView

#3

@gsimeonov The functions you’re looking for are:

:localToContent() https://docs.coronalabs.com/api/type/DisplayObject/localToContent.html

:contentToLocal() https://docs.coronalabs.com/api/type/DisplayObject/contentToLocal.html

If you want to drag an item directly from the ScrollView’s view you will need to find where it is in relation to the content (top-level display group), then find where it is in relation to the group you want to move it to, then perform the :insert() and update it’s .x and .y values at the same time.

That process is actually really easy and you could make a function to do it pretty simply, for example:

local function moveObjectTo( targetGroup, dispObject ) local x, y = dispObject:localToContent( 0, 0 ) -- get location in world coords x, y = targetGroup:contentToLocal( x, y ) -- get world coords as local to target group targetGroup:insert( dispObject ) -- move display object to the target display group dispObject.x, dispObject.y = x, y -- reposition the display object to the position relative to it's original position end
#4

Have you look at the dmc-dragdrop library? Works pretty well for this sort of thing.

http://docs.davidmccuskey.com/dmc-dragdrop

#5

I should also point out that when dragging an item the user is likely to have a disconnecting experience if the item does not become the top-most object on screen. For this reason, I recommend popping the item out to the top-level display group for the duration of the drag and inserting it into the target group when the drag operation (touch ended phase) finishes.

#6

Thanks to each one of you for the tips! 

I moved the sprite to a screen-size group on top of the ScrollView as @anaqim suggested, then converted the coords with @horacebury’s localToContent() so it doesn’t jitter and moved it while in that new group. Worked brilliantly.

Not sure which answer to “Mark Solved”.

#7

thoughts off the top of my head and without testing, you probably tried it already but anyway…

touch removes parent displaygroup and adds displayobject to a top layer screensize displaygroup, or use displayobject:toFront() if that works.

drag it to new location and ev. add to destination displaygroup on release

if released insided original scrollView or cancelled, move back to original location (stored on touch) and insert back into scrollView

#8

@gsimeonov The functions you’re looking for are:

:localToContent() https://docs.coronalabs.com/api/type/DisplayObject/localToContent.html

:contentToLocal() https://docs.coronalabs.com/api/type/DisplayObject/contentToLocal.html

If you want to drag an item directly from the ScrollView’s view you will need to find where it is in relation to the content (top-level display group), then find where it is in relation to the group you want to move it to, then perform the :insert() and update it’s .x and .y values at the same time.

That process is actually really easy and you could make a function to do it pretty simply, for example:

local function moveObjectTo( targetGroup, dispObject ) local x, y = dispObject:localToContent( 0, 0 ) -- get location in world coords x, y = targetGroup:contentToLocal( x, y ) -- get world coords as local to target group targetGroup:insert( dispObject ) -- move display object to the target display group dispObject.x, dispObject.y = x, y -- reposition the display object to the position relative to it's original position end
#9

Have you look at the dmc-dragdrop library? Works pretty well for this sort of thing.

http://docs.davidmccuskey.com/dmc-dragdrop

#10

I should also point out that when dragging an item the user is likely to have a disconnecting experience if the item does not become the top-most object on screen. For this reason, I recommend popping the item out to the top-level display group for the duration of the drag and inserting it into the target group when the drag operation (touch ended phase) finishes.

#11

Thanks to each one of you for the tips! 

I moved the sprite to a screen-size group on top of the ScrollView as @anaqim suggested, then converted the coords with @horacebury’s localToContent() so it doesn’t jitter and moved it while in that new group. Worked brilliantly.

Not sure which answer to “Mark Solved”.