How do you control the overlapping of your display objects?

Solar2D General Questions/Discussion
#1

I have a function that spawns scooters zipping across the screen left to right, at various heights. Currently, the most recently spawned scooter will always display over-top of previously spawned scooters, but this isn’t what I want.

What I want is for the height of each scooter to determine it’s hierarchy in terms of which object displays on top. I want the scooters lowest on screen to overlap the scooters highest on screen. The purpose of this is to simulate a top-down 3/4 perspective (like looking down at a target-range where the targets slide back and forth at various distances).

Does anybody have any ideas on how I could accomplish this? Here is my code for my spawn function:

local images = {} images[#images + 1] = 'Red Scooter'images[#images + 1] = 'Blue Scooter'images[#images + 1] = 'Green Scooter'images[#images + 1] = 'Yellow Scooter'local function scooterSpawn (event)local index = math.random( 1, #images )timers[#timers + 1] = timer.performWithDelay(math.random(30,45),scooterSpawn) local scooter = scooterFactory:newSpriteGroup( images[index] ) scooter:play( images[index] ) scooter.x = -100 scooter.y = math.random(80,884) transitions[#transitions + 1] = transition.to(scooter, {time = math.random(2000,2500), delay = 0, x = scooter.x + 968, onComplete=function() scooter :removeSelf() end}) spawnedGroup:insert(scooter)end [/code]Any help would be much appreciated.Thank you,Steven [import]uid: 79394 topic_id: 16221 reply_id: 316221[/import]

#2

There is no Z axis with CoronaSDK, so you will have to do depth-sorting to arrange them according to how they are supposed to be.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 16221 reply_id: 60398[/import]

#3

To elaborate on JayantV’s comment, couldn’t you:

Every time a scooter is added:
a. Add each new scooter to an existing dedicated display.newGroup()
b. Use object:tofront() and object:toback() to sort what should be where in the group structure based on height

Does that seem feasible? [import]uid: 41884 topic_id: 16221 reply_id: 60400[/import]

#4

I’m actually doing something very similar in my current game. Enemies are spawned at various positions, but I want them to be sorted based on their Y coordinates.

It’s a little hacked together, so if someone wants to optimize it, please do!

[lua]local sortDepth
sortDepth = function()

– this sorts all items by y value
local function byval(a,b)
return a.y < b.y
end

– add the player to be sorted
local tempTable = { player }

– add all enemies to be sorted
for i=1,enemiesLayer.numChildren do
local child = enemiesLayer[i]
tempTable[#tempTable + 1] = child
end

– sort table using byval function
table.sort(tempTable,byval)

– now that the table has all objects sorted by Y, set the depth
for k=1,#tempTable do
local child = tempTable[k]
child:toFront()
end

end[/lua] [import]uid: 49447 topic_id: 16221 reply_id: 60409[/import]

#5

Waoooooow… My jaw was on the floor when I actually saw your code working. And it works perfectly, especially for something “hacked together”:). I’m no professional, so my perspective might be a little skewed, but to me, right now, you’re a genius!

Thanks so much for sharing this, producerism.

Cheers,
Steven

Btw, what does the k variable represent? Is it just an arbitrary letter depicting the new index variable for tempTable (after the sorting has taken place)?
[import]uid: 79394 topic_id: 16221 reply_id: 60530[/import]

#6

I’d eventually like to add this to a class, so I can call something like:

[lua]enemiesLayer:sortDepth()[/lua]

as for k, it’s arbitrary.

[lua]for k=1,#tempTable do
local child = tempTable[k]
child:toFront()
end[/lua]
is the equivalent of
[as3]
for (var k:Number = 1; i < tempTable.length(); i++) {
var child:* = tempTable[k];
// dosomething
}
[/as3] [import]uid: 49447 topic_id: 16221 reply_id: 60534[/import]

#7

@Producerism,
you are Mark Henry, right?

https://github.com/MarkHenryC/Carousel/blob/master/main.lua

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 16221 reply_id: 60535[/import]

#8

no, although that code is very similar and doing almost the same thing.

This is the actual page I was using as reference:

http://gb.wellho.net/resources/ex.php4?item=u105/asort

After looking over that carousel code, I’m not sure how it’s doing the actual depth sorting. Looks like he’s just removing everything from the display group, then adding it back again, instead of using :toFront(). I’m curious… is there an advantage to that? [import]uid: 49447 topic_id: 16221 reply_id: 60588[/import]

#9

Hi producerism,

I just noticed that my player (a draggable object) is not over/under-lapping my scooters (enemies) properly once it’s moved beyond it’s starting position. All my scooters over/under-lap each other perfectly, just not my player (with the exception of when it’s in it’s starting position). It starts out at the bottom of the screen, and overlaps all the scooters higher than it as it should. But once I start dragging it above some of the scooters, it remains perpetually on top of all of them, even the ones that should overlap it. Here’s my player movement function:
--Player movement functionlocal function onTouch( event ) local player = event.target local phase = event.phase if "began" == phase then -- Make target the top-most object local parent = player.parent parent:insert( player ) display.getCurrentStage():setFocus( player ) player.isFocus = true -- Store initial position player.x0 = event.x - player.x player.y0 = event.y - player.y elseif player.isFocus then if "moved" == phase then player.x = event.x - player.x0 player.y = event.y - player.y0 end end return true end[/code]I've positioned your code snippet just below this, and am calling the sortDepth function with a Runtime eventListener:Runtime:addEventListener("enterFrame", sortDepth)[/code]I've placed this at the end of my code. Any idea what I'm doing wrong? Hope you don't mind helping me out with this.Thanks in advance,Steven [import]uid: 79394 topic_id: 16221 reply_id: 60634[/import]

#10

you need to include your player into the depth sort table too, if you want him to be in the order with overlaps and non-overlaps

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 16221 reply_id: 60636[/import]

#11

yup, if you notice in my original reply, I add my player to the sorting table on 10.

I also think that the objects need to be in the same displayGroup (if you are using display groups). In my project, I’m just adding “player” to the “enemiesGroup” so it can be sorted. That’s one of the things I’d like to change with my current method eventually. [import]uid: 49447 topic_id: 16221 reply_id: 60638[/import]

#12

I was just going to say, I thought the player was already added in there in line 10. I pretty much just inserted your code snippet into my code as is, so I figured (like I said) that the player was taken care of.

You’re absolutely right when you suggested that the objects need to be in the same display group. I just inserted “player” into my “enemiesGroup”, like you said, and now my player is “stacking” perfectly along with my scooters.

Once again, utmost thanks.

Cheers,
Steven [import]uid: 79394 topic_id: 16221 reply_id: 60643[/import]

#13

hi, thought i just share my codes with anyone who needs it here. This is a function that goes through the group and sorts all objects in that group by either the x or y axis.

[code]
function sortDepth( displayGroup, checkPos )
if displayGroup ~= nil then
local totalChildren = displayGroup.numChildren

for i = totalChildren, 1, -1 do
for o = 1, (i-1) do
local p = o + 1
local pos1, pos2

if checkPos == “x” then
pos1, pos2 = displayGroup[o].x, displayGroup[p].x
elseif checkPos == “y” then
pos1, pos2 = displayGroup[o].y, displayGroup[p].y
end

if pos1 > pos2 then
local obj1 = displayGroup[o]
local obj2 = displayGroup[p]

displayGroup:insert(o, obj2)
displayGroup:insert(p, obj1)
end
end
end
end

return displayGroup
end

– This is how you use the above sort function.–
– myObjGroup is the group that already exist.–

myObjGroup = sortDepth( myObjGroup, “y” )
[/code] [import]uid: 39846 topic_id: 16221 reply_id: 102066[/import]

#14

That’s a great share, thanks for posting it! :slight_smile: [import]uid: 52491 topic_id: 16221 reply_id: 102235[/import]

#15

No problem! :smiley: [import]uid: 39846 topic_id: 16221 reply_id: 102248[/import]