Help How to have moving images in the back of images?

Games
#1

Hello

I just need a small help. Does anyone know how to put images in the back when this happen:

local square = display.newRect(0,0,50,50)  
square.x = 160  
square.y = 240  
localGroup:insert(square)  
  
local function moveit()  
local square2 = display.newRect(0,0,50,50)  
square2.x = 160  
square2.y = 240  
localGroup:insert(square2)  
to.transition(square2, {time = 2000, x = -500})  
end  
timer.performWithDelay(1000, moveit, 0)

How would the square2 move under square. Placing the moveit function above the square image does not help what else is there to do?

What I’m trying to do is have the square2 move under square and not have square2 move on top of square. [import]uid: 17058 topic_id: 33932 reply_id: 333932[/import]

#2

The problem is your localGroup is showing on top of your non-grouped items. Quick way to fix it is just add localGroup:insert(square2) inside of your moveit function.

[import]uid: 147305 topic_id: 33932 reply_id: 134898[/import]

#3

I did that and it did not work. [import]uid: 17058 topic_id: 33932 reply_id: 134899[/import]

#4

You have a few errors in the code. is this what you are looking for?

[code]
local localGroup = display.newGroup()

local square = display.newRect(0,0,50,50)
square.x = 160
square.y = 240
localGroup:insert(square)

local square2 = display.newRect(0,0,50,50)
square2.x = 160
square2.y = 240
square2:setFillColor(123)

localGroup:insert(square2)
local function moveit()
transition.to(square2, {time = 1000, x = 60, onComplete = function() square2:toBack() transition.to(square2, {time = 1000, x = 160, y = 240})end })
end

timer.performWithDelay(1000, moveit, 1)

[/code] [import]uid: 13560 topic_id: 33932 reply_id: 134900[/import]

#5

@Iano78 No actually because square2 is suppose to represent spawning images that move across the screen.

When I use the function instead of them moving under the square it move on top. [import]uid: 17058 topic_id: 33932 reply_id: 134901[/import]

#6

The problem is your localGroup is showing on top of your non-grouped items. Quick way to fix it is just add localGroup:insert(square2) inside of your moveit function.
EDIT:

Well, you changed your post so my answer has to change as well. There are two options really. One you could stick the square2 into the local group like i said above but then immediately afterwards reinsert the square which would put it back on top. This is a bit more ‘brittle’ and not very reusable but it could be the right solution if you know you will always have your square object available.

What I usually end up doing is set up a hierarchy group structure which end up acting as layers. Generally I use it just for my background objects, my real game objects and then for my HUD and popups Here would be a an example:

[lua]–create main group
local localGroup = display.newGroup()
–create groups which will be used for layers
local layer1Group = display.newGroup()
local layer2Group = display.newGroup()
–insert my layer groups into localGroup(which i assume is being used for director or storyboard)
–bottom layers go in first
localGroup:insert(layer1Group)
localGroup:insert(layer2Group)[/lua]

With that setup your code could be something like :
[lua]local square = display.newRect(0,0,50,50)
square.x = 160
square.y = 240
layer2Group:insert(square)

local function moveit()
local square2 = display.newRect(0,0,50,50)
square2.x = 160
square2.y = 240
layer1Group:insert(square2)
to.transition(square2, (time = 2000, x = -500})
end
timer.performWithDelay(1000, moveit, 1)[/lua] [import]uid: 147305 topic_id: 33932 reply_id: 134902[/import]

#7

Just having a little more fun…

[code]

local localGroup = display.newGroup()

local square = display.newRect(0,0,50,50)
square.x = 160
square.y = 240
localGroup:insert(square)

local square2 = display.newRect(0,0,50,50)
square2.x = 160
square2.y = 240
square2:setFillColor(123)

localGroup:insert(square2)
local function moveit()

transition.to(square2, {time = 500, x = 90, transition = easing.inOutQuad , onComplete = function() square2:toBack() square2.xScale = 0.97 square2.yScale = 0.97 transition.to(square2, {time = 500, x = 160, y = 240, transition = easing.inOutExpo , onComplete = function() square2:toFront() square2.xScale = 1 square2.yScale = 1 square:setFillColor(math.random(0, 255), math.random(0, 255), math.random(0, 255), 255) end })end })
end

timer.performWithDelay(1000, moveit, -1)

[/code] [import]uid: 13560 topic_id: 33932 reply_id: 134904[/import]

#8

Well I tried it somehow did not work strange. But what I did is put the square out of main group making it work. [import]uid: 17058 topic_id: 33932 reply_id: 134905[/import]

#9

Carefully read your article, found many fresh things,I like this post, because it‘s useful to me.I hope many people will like it.Have a good time! A chance.i am looking forward to your next one works. jy G2 [import]uid: 204004 topic_id: 33932 reply_id: 134906[/import]

#10

You definitely know how to bring an issue to light and make it important. I cant believe youre not more popular because you definitely have the gift.
jy G2 [import]uid: 204004 topic_id: 33932 reply_id: 134907[/import]

#11

How about doing:

square1:toFront() [import]uid: 199310 topic_id: 33932 reply_id: 134910[/import]

#12

You have errors in your code, to.transition() wont work it’s transition.to() [import]uid: 13560 topic_id: 33932 reply_id: 134911[/import]

#13

The problem is your localGroup is showing on top of your non-grouped items. Quick way to fix it is just add localGroup:insert(square2) inside of your moveit function.

[import]uid: 147305 topic_id: 33932 reply_id: 134898[/import]

#14

I did that and it did not work. [import]uid: 17058 topic_id: 33932 reply_id: 134899[/import]

#15

You have a few errors in the code. is this what you are looking for?

[code]
local localGroup = display.newGroup()

local square = display.newRect(0,0,50,50)
square.x = 160
square.y = 240
localGroup:insert(square)

local square2 = display.newRect(0,0,50,50)
square2.x = 160
square2.y = 240
square2:setFillColor(123)

localGroup:insert(square2)
local function moveit()
transition.to(square2, {time = 1000, x = 60, onComplete = function() square2:toBack() transition.to(square2, {time = 1000, x = 160, y = 240})end })
end

timer.performWithDelay(1000, moveit, 1)

[/code] [import]uid: 13560 topic_id: 33932 reply_id: 134900[/import]

#16

@Iano78 No actually because square2 is suppose to represent spawning images that move across the screen.

When I use the function instead of them moving under the square it move on top. [import]uid: 17058 topic_id: 33932 reply_id: 134901[/import]

#17

The problem is your localGroup is showing on top of your non-grouped items. Quick way to fix it is just add localGroup:insert(square2) inside of your moveit function.
EDIT:

Well, you changed your post so my answer has to change as well. There are two options really. One you could stick the square2 into the local group like i said above but then immediately afterwards reinsert the square which would put it back on top. This is a bit more ‘brittle’ and not very reusable but it could be the right solution if you know you will always have your square object available.

What I usually end up doing is set up a hierarchy group structure which end up acting as layers. Generally I use it just for my background objects, my real game objects and then for my HUD and popups Here would be a an example:

[lua]–create main group
local localGroup = display.newGroup()
–create groups which will be used for layers
local layer1Group = display.newGroup()
local layer2Group = display.newGroup()
–insert my layer groups into localGroup(which i assume is being used for director or storyboard)
–bottom layers go in first
localGroup:insert(layer1Group)
localGroup:insert(layer2Group)[/lua]

With that setup your code could be something like :
[lua]local square = display.newRect(0,0,50,50)
square.x = 160
square.y = 240
layer2Group:insert(square)

local function moveit()
local square2 = display.newRect(0,0,50,50)
square2.x = 160
square2.y = 240
layer1Group:insert(square2)
to.transition(square2, (time = 2000, x = -500})
end
timer.performWithDelay(1000, moveit, 1)[/lua] [import]uid: 147305 topic_id: 33932 reply_id: 134902[/import]

#18

Just having a little more fun…

[code]

local localGroup = display.newGroup()

local square = display.newRect(0,0,50,50)
square.x = 160
square.y = 240
localGroup:insert(square)

local square2 = display.newRect(0,0,50,50)
square2.x = 160
square2.y = 240
square2:setFillColor(123)

localGroup:insert(square2)
local function moveit()

transition.to(square2, {time = 500, x = 90, transition = easing.inOutQuad , onComplete = function() square2:toBack() square2.xScale = 0.97 square2.yScale = 0.97 transition.to(square2, {time = 500, x = 160, y = 240, transition = easing.inOutExpo , onComplete = function() square2:toFront() square2.xScale = 1 square2.yScale = 1 square:setFillColor(math.random(0, 255), math.random(0, 255), math.random(0, 255), 255) end })end })
end

timer.performWithDelay(1000, moveit, -1)

[/code] [import]uid: 13560 topic_id: 33932 reply_id: 134904[/import]

#19

Well I tried it somehow did not work strange. But what I did is put the square out of main group making it work. [import]uid: 17058 topic_id: 33932 reply_id: 134905[/import]

#20

Carefully read your article, found many fresh things,I like this post, because it‘s useful to me.I hope many people will like it.Have a good time! A chance.i am looking forward to your next one works. jy G2 [import]uid: 204004 topic_id: 33932 reply_id: 134906[/import]