[Resolved] Grouping an array of Images?

[aw.rogers121]

Hi everyone,

I’m new to this and not sure if I’m posting in the right section so please bare with me if I’m wrong.

Onto my problem…

I’m trying to create a menu with a load of clouds in the background moving around with some text in front. I’ve used some of the example code from the ‘sprites - JungleScene’ folder to create the cloud movement however I’m having a problem putting them into a group as it simply doesn’t work. So, I’m wondering how I go about putting the array of cloud images into a group so when I hit the play button the clouds clear when the scene changes.

Below is the code used:

module(…, package.seeall)

function new()
local localGroup = display.newGroup()

_W = display.contentWidth
_H = display.contentHeight

– The sky image as background
local sky = display.newImage( “Images/skyBG.png” )
localGroup:insert (sky)

local logo = display.newImage (“Images/logoImage.png”)
localGroup:insert(logo)
logo.x = _W/2
logo.y = 50
logo.xScale = 0.6
logo.yScale = 0.7

local playButton = display.newImage (“Images/playButton.png”)
localGroup:insert(playButton)
playButton.x = _W/2
playButton.y = 130
playButton.xScale = 0.6
playButton.yScale = 0.6

local instButton = display.newImage (“Images/instructionsButton.png”)
localGroup:insert(instButton)
instButton.x = _W/2
instButton.y = 180
instButton.xScale = 0.6
instButton.yScale = 0.6

local quitButton = display.newImage (“Images/exitButton.png”)
localGroup:insert(quitButton)
quitButton.x = _W/2
quitButton.y = 230
quitButton.xScale = 0.6
quitButton.yScale = 0.6

– Code required for a moving background
require “sprite”
display.setStatusBar( display.HiddenStatusBar )

local baseline = 280

– Series of cloud images

local tree = {}
tree[1] = display.newImage( “Images/cloud1.png” )
tree[1].xScale = 1; tree[1].yScale = 1
tree[1]:setReferencePoint( display.BottomCenterReferencePoint )
tree[1].x = 20; tree[1].y = 180
tree[1].dx = 0.2

tree[2] = display.newImage( “Images/cloud2.png” )
tree[2].xScale = 0.6; tree[2].yScale = 0.6
tree[2]:setReferencePoint( display.BottomCenterReferencePoint )
tree[2].x = 450; tree[2].y = 125
tree[2].dx = 0.2

tree[3] = display.newImage( “Images/cloud3.png” )
tree[3].xScale = 0.6; tree[3].yScale = 0.8
tree[3]:setReferencePoint( display.BottomCenterReferencePoint )
tree[3].x = 600; tree[3].y = baseline
tree[3].dx = 0.3

tree[4] = display.newImage( “Images/cloud4.png” )
tree[4].xScale = 0.7; tree[4].yScale = 0.7
tree[4]:setReferencePoint( display.BottomCenterReferencePoint )
tree[4].x = 230; tree[4].y = 220
tree[4].dx = 0.4

tree[5] = display.newImage( “Images/cloud5.png” )
tree[5].xScale = 0.8; tree[5].yScale = 0.8
tree[5]:setReferencePoint( display.BottomCenterReferencePoint )
tree[5].x = 300; tree[5].y = 120
tree[5].dx = 0.3
tree[6] = display.newImage( “Images/cloud6.png” )
tree[6].xScale = 0.8; tree[5].yScale = 0.8
tree[6]:setReferencePoint( display.BottomCenterReferencePoint )
tree[6].x = 320; tree[6].y = 300
tree[6].dx = 0.3
tree[7] = display.newImage( “Images/cloud7.png” )
tree[7].xScale = 0.8; tree[7].yScale = 0.8
tree[7]:setReferencePoint( display.BottomCenterReferencePoint )
tree[7].x = 580; tree[7].y = baseline
tree[7].dx = 0.5

local bar1 = display.newImage( “Images/baseLine.png” )
–localGroup:insert(bar1)
bar1:setReferencePoint( display.CenterLeftReferencePoint )
bar1.x = 0
bar1.alpha = 0
bar1.y = baseline - 0.1

local bar2 = display.newImage( “Images/baseLine.png” )
–localGroup:insert(bar2)
bar2:setReferencePoint( display.CenterLeftReferencePoint )
bar2.x = 480
bar2.alpha = 0
bar2.y = baseline - 0.1

–localGroup:insert(tree)

local function playButtonEvent (event)
if event.phase == “ended” then
director:changeScene (“game”)
end
end

playButton:addEventListener (“touch”, playButtonEvent)

local function instButtonEvent (event)
if event.phase == “ended” then
director:changeScene (“instructions”)
end
end

instButton:addEventListener (“touch”, instButtonEvent)

local function quitButtonEvent (event)
if event.phase == “ended” then
director:changeScene (“exit”)
end
end

quitButton:addEventListener (“touch”, quitButtonEvent)

local tPrevious = system.getTimer()
local function move(event)
local tDelta = event.time - tPrevious
tPrevious = event.time

local xOffset = ( 0.1 * tDelta )

bar1.x = bar1.x - xOffset
bar2.x = bar2.x - xOffset

if (bar1.x + bar1.contentWidth) < 0 then
bar1:translate( 480 * 2, 0)
end
if (bar2.x + bar2.contentWidth) < 0 then
bar2:translate( 480 * 2, 0)
end

local i
for i = 1, #tree, 1 do
tree[i].x = tree[i].x - tree[i].dx * tDelta * 0.05
if (tree[i].x + tree[i].contentWidth) < 0 then
tree[i]:translate( 480 + tree[i].contentWidth * 2, 0 )
end
end
end
Runtime:addEventListener( “enterFrame”, move )
return localGroup
end
Thanks a lot for any help or advise!

Alex [import]uid: 120751 topic_id: 24344 reply_id: 324344[/import]

[toby2]

I’m guessing the line

--localGroup:insert(tree)

is what’s giving you fits.

Your ‘tree’ is a table with an array of display objects. What you need to do is walk through the table and add each element to a group:

for i=1,#tree do  
 localGroup:insert(tree[i])  
end  

Is one way to do it. Another way is to use an ipairs iterator:

for \_,v in ipairs(tree) do  
 localGroup:insert(v)  
end  

Always keep http://www.lua.org/manual/5.1/ handy. [import]uid: 44647 topic_id: 24344 reply_id: 98361[/import]

[aw.rogers121]

Hi,

Thanks for that it worked a treat! However, fixing that problem created another (as usual :p)

At the moment just for testing I have a back button in the Game scene and when switching from the menu to that scene and hitting the back button I’ve created the menu images don’t load up again and produces an error.

I get the error : menu.181: attempt to perform arithmetic on field ‘x’

Thanks again for any assistance it’s much appreciated. [import]uid: 120751 topic_id: 24344 reply_id: 98371[/import]

[peach_pellen]

Hi and welcome

Your error is because you are changing scenes but not cancelling your Runtime listener.

Before you change scenes, do;
[lua]Runtime:removeEventListener( “enterFrame”, move )[/lua]

That should do it!

Peach [import]uid: 52491 topic_id: 24344 reply_id: 98451[/import]

[aw.rogers121]

Hi Peach,

Thanks for the reply.

Yeah I found this online as well however I’m not sure where to place it. Am I right in placing it here?

local function playButtonEvent (event)
if event.phase == “ended” then
Runtime:removeEventListener( “enterFrame”, move )
director:changeScene (“game”)
end
end

Thanks a lot! [import]uid: 120751 topic_id: 24344 reply_id: 98638[/import]

[peach_pellen]

Is that above or below where you add the Runtime listener in the first place?

Make sure it’s BELOW.

Peach [import]uid: 52491 topic_id: 24344 reply_id: 98701[/import]

[aw.rogers121]

Thanks Peach I had it in the wrong place, that sorted it!

Kind regards.

Alex [import]uid: 120751 topic_id: 24344 reply_id: 98739[/import]

[peach_pellen]

No worries Alex, really happy to hear that

Marking as resolved. [import]uid: 52491 topic_id: 24344 reply_id: 98941[/import]