I’m using Storyboard to create a mobile activity for children and I’m having a lot of trouble figuring out how to add a rectangle behind each word on tap/touch to simulate highlighting words. The yellow rectangle I created keeps appearing in front of the word, not behind it. I know that objects in gropus are hierarchical, but because I’ve created the yellow rectangle in a function that’s added after the text object is declared, it’s being added on top of the word. I thought about making the rectangle an object, but I’m not clear on how to run a function on two objects and, in addition, I only want the highlight to appear when the text is tapped. Can someone point me in the right direction?
The easiest way is to use object:toFront(), so in your function called by the listener when a word is clicked, add event.target:toFront() after the rectangle is added to the group. That would bring the word to the front.
local function moveToFront(event) event.target:toFront() end local g1 = display.newGroup() local rect1 = display.newRect(300, 300, 150, 150) rect1:addEventListener("touch", moveToFront) g1:insert(rect1) local rect2 = display.newRect(350, 350, 150, 150) rect2:addEventListener("touch", moveToFront) rect2:setFillColor(145, 42,43) g1:insert(rect2)
Another solution is to add all rectangles beforehand, but setting them to isVisible = false, and then in the function set them to isVisible = true when the word is being clicked.
Hope that helps.
Awesome! I used the isVisible method and got it to work. I’ve added my code below to save someone else the headache.
local pickOne = display.newGroup()
local highlightPick = display.newRect( 30, 140, 220, 75 )
highlightPick:setFillColor( 175, 238, 238 )
highlightPick.isVisible = false
highlightPick.alpha = .8
pickOne:insert(highlightPick)
local pick = display.newText( “pick one”, 0, 0, “font”, 80 )
pick:setTextColor( 255,0,0 )
pick:setReferencePoint( display.TopLeftReferencePoint )
pick.x, pick.y = display.contentWidth * 0.05, 130
pickOne:insert(pick)
function pick:touch( event )
if event.phase == “began” then
highlightPick.isVisible = true
elseif event.phase == “ended” then
highlightPick.isVisible = false
end
end
function pick:tap( event )
media.playEventSound( “media/pickone.wav” )
end
pick:addEventListener( “tap”, pick )
pick:addEventListener( “touch”, pick )
The easiest way is to use object:toFront(), so in your function called by the listener when a word is clicked, add event.target:toFront() after the rectangle is added to the group. That would bring the word to the front.
local function moveToFront(event) event.target:toFront() end local g1 = display.newGroup() local rect1 = display.newRect(300, 300, 150, 150) rect1:addEventListener("touch", moveToFront) g1:insert(rect1) local rect2 = display.newRect(350, 350, 150, 150) rect2:addEventListener("touch", moveToFront) rect2:setFillColor(145, 42,43) g1:insert(rect2)
Another solution is to add all rectangles beforehand, but setting them to isVisible = false, and then in the function set them to isVisible = true when the word is being clicked.
Hope that helps.
Awesome! I used the isVisible method and got it to work. I’ve added my code below to save someone else the headache.
local pickOne = display.newGroup()
local highlightPick = display.newRect( 30, 140, 220, 75 )
highlightPick:setFillColor( 175, 238, 238 )
highlightPick.isVisible = false
highlightPick.alpha = .8
pickOne:insert(highlightPick)
local pick = display.newText( “pick one”, 0, 0, “font”, 80 )
pick:setTextColor( 255,0,0 )
pick:setReferencePoint( display.TopLeftReferencePoint )
pick.x, pick.y = display.contentWidth * 0.05, 130
pickOne:insert(pick)
function pick:touch( event )
if event.phase == “began” then
highlightPick.isVisible = true
elseif event.phase == “ended” then
highlightPick.isVisible = false
end
end
function pick:tap( event )
media.playEventSound( “media/pickone.wav” )
end
pick:addEventListener( “tap”, pick )
pick:addEventListener( “touch”, pick )