background image ontop of all other items.

Hey guys

I’ve added a button to my corona game to toggle a star background to appear, the button works but it appears infront of all my game items. I’m probably doing it wrong but is there a way for it to appear in the background?

local onGemTouch local myButton = display.newImage( "buttonBlue.png" ) myButton.x = display.contentWidth /4 myButton.y = display.contentHeight -25 --local w = textobj.width --local h = textobj.height function myButton:tap( event ) local background = display.newImage ("bg1.png", true) background.x = display.contentWidth /2 background.y = display.contentHeight /2 end local function newGem (i,j) local newGem newGem = display.newCircle(i\*40-20, -60, 20) newGem.i = i newGem.j = j newGem.isMarkedToDestroy = false newGem.destination\_y = j\*40+60 local R = mRandom(1,4) if (R == 1 ) then newGem:setFillColor( 200, 0, 0 ) newGem.gemType = "red" elseif (R == 2 ) then newGem:setFillColor( 0, 200, 0 ) newGem.gemType = "green" elseif (R == 3 ) then newGem:setFillColor( 0, 0, 200 ) newGem.gemType = "blue" elseif (R == 4 ) then newGem:setFillColor( 200, 200, 0 ) newGem.gemType = "yellow" end --new gem falling animation transition.to( newGem, { time=100, y= newGem.destination\_y} ) groupGameLayer:insert( newGem ) newGem.touch = onGemTouch newGem:addEventListener( "touch", newGem ) return newGem end local function shiftGems () print ("Shifting Gems") -- first roww for i = 1, 8, 1 do if gemsTable[i][1].isMarkedToDestroy then -- current gem must go to a 'gemToBeDestroyed' variable holder to prevent memory leaks -- cannot destroy it now as gemsTable will be sorted and elements moved down gemToBeDestroyed = gemsTable[i][1] -- create a new one gemsTable[i][1] = newGem(i,1) -- destroy old gem gemToBeDestroyed:removeSelf() gemToBeDestroyed = nil end end -- rest of the rows for j = 2, 8, 1 do -- j = row number - need to do like this it needs to be checked row by row for i = 1, 8, 1 do if gemsTable[i][j].isMarkedToDestroy then --if you find and empty hole then shift down all gems in column gemToBeDestroyed = gemsTable[i][j] -- shiftin whole column down, element by element in one column for k = j, 2, -1 do -- starting from bottom - finishing at the second row -- curent markedToDestroy Gem is replaced by the one above in the gemsTable gemsTable[i][k] = gemsTable[i][k-1] gemsTable[i][k].destination\_y = gemsTable[i][k].destination\_y +40 transition.to( gemsTable[i][k], { time=100, y= gemsTable[i][k].destination\_y} ) -- we change its j value as it has been 'moved down' in the gemsTable gemsTable[i][k].j = gemsTable[i][k].j + 1 end -- create a new gem at the first row as there is en ampty space due to gems -- that have been moved in the column gemsTable[i][1] = newGem(i,1) -- destroy the old gem (the one that was invisible and placed in gemToBeDestroyed holder) gemToBeDestroyed:removeSelf() gemToBeDestroyed = nil end end end end --shiftGems()

Ok, this is way too much code to go through.

But the order in which you add the images matters.

First add the background then the other images. I also saw you didn’t add them to a group when you created them.

The order in which you add them to your group matters.

first item to be added to your group is the first one dispalyed, the others are on top of it.

The image is up near the top of my code,

local myButton = display.newImage( "buttonBlue.png" ) myButton.x = display.contentWidth /4 myButton.y = display.contentHeight -25 --local w = textobj.width --local h = textobj.height function myButton:tap( event ) local background = display.newImage ("bg1.png", true) background.x = display.contentWidth /2 background.y = display.contentHeight /2 end

the rest of the program is drawn manually. for example

local function newGem (i,j) local newGem newGem = display.newCircle(i\*40-20, -60, 20) newGem.i = i newGem.j = j newGem.isMarkedToDestroy = false newGem.destination\_y = j\*40+60 local R = mRandom(1,4) if (R == 1 ) then newGem:setFillColor( 200, 0, 0 ) newGem.gemType = "red"

would this be the cause of the image appearing ontop of everything? if so is there a way to fix it?

Hi @rhyschambo14,

Please see this guide on display groups and the ordered hierarchy. It should answer your questions.

http://docs.coronalabs.com/guide/start/displayGroups/index.html

Take care,

Brent Sorrentino

Ok, this is way too much code to go through.

But the order in which you add the images matters.

First add the background then the other images. I also saw you didn’t add them to a group when you created them.

The order in which you add them to your group matters.

first item to be added to your group is the first one dispalyed, the others are on top of it.

The image is up near the top of my code,

local myButton = display.newImage( "buttonBlue.png" ) myButton.x = display.contentWidth /4 myButton.y = display.contentHeight -25 --local w = textobj.width --local h = textobj.height function myButton:tap( event ) local background = display.newImage ("bg1.png", true) background.x = display.contentWidth /2 background.y = display.contentHeight /2 end

the rest of the program is drawn manually. for example

local function newGem (i,j) local newGem newGem = display.newCircle(i\*40-20, -60, 20) newGem.i = i newGem.j = j newGem.isMarkedToDestroy = false newGem.destination\_y = j\*40+60 local R = mRandom(1,4) if (R == 1 ) then newGem:setFillColor( 200, 0, 0 ) newGem.gemType = "red"

would this be the cause of the image appearing ontop of everything? if so is there a way to fix it?

Hi @rhyschambo14,

Please see this guide on display groups and the ordered hierarchy. It should answer your questions.

http://docs.coronalabs.com/guide/start/displayGroups/index.html

Take care,

Brent Sorrentino