OK - here’s a total beginner question and some example code I’m muddling through. This is simplified “proof of concept” code, so once I get all the pieces understood and working and can move on to building an app with it.
What I’m trying to do is create draggable square icons (like in the Drag Me) example. Each icon will have a name and a counter displayed. When tapped, I want the counter to increase. My code defines each part of the icon (rectangle, name, counter) and put them into a group with a listener. This works. After much reading around in the forums and blog and a week of experimenting I’m beginning to understand tables and I have the icon creation and dragging working right.
Where I’m stuck on is how to increment the “tap counter” when a user taps an icon.
iTable holds the data used to create the icons. When an icon gets tapped the ‘began’ phase of the onTouch event seems like the place to increment the counter (stored in iTable), and also to redraw the icon so that updated counter is displayed right.
So, when an icon is tapped, how can I figure out which entry it corresponds to in iTable?
I think I should create and call some sort of ‘incrementcounter’ function, but I can’t quite see how it should work. It seems like the function should remove the tapped object from the stage, increment the counter in iTable, and then regenerate the icon with the new counter displayed properly. Is this even the right approach to the problem? Can someone offer a sketch of how to do this?
Here’s the code I’m using - I’d really appreciate any suggestions! Thanks in advance, experts!
[code]
– Hide the status bar
display.setStatusBar(display.HiddenStatusBar)
– code that borrows liberally from “Drag Me” example…
– The idea is to create draggable square icons that, when tapped, increment a counter
– Want to store info about the icons (name, times tapped) in a table that eventually could be
– saved/loaded as a “data set”
– define a table to hold essential info for the composite icons
– for now include two example records in the table
local iTable = {
{name=“panda”, x=50, y=50, width=100, height=100, r=12, tapcount=7},
{name=“monkey”, x=300, y=300, width=100, height=100, r=12, tapcount=1}
}
– simplified onTouch function based on Drag Me example…
local function onTouch( event )
local t = event.target
local phase = event.phase
if “began” == phase then
– Make target the top-most object
local parent = t.parent
parent:insert( t )
display.getCurrentStage():setFocus( t )
t.isFocus = true
– IS THIS THE PLACE TO INCREMENT THE COUNTER THAT
– TRACKS HOW MANY TIMES AN ICON GETS TAPPED?
– How to do this?
print(‘yes, this is the place…’)
– Store initial position
t.x0 = event.x - t.x
t.y0 = event.y - t.y
elseif t.isFocus then
if “moved” == phase then
– Make object move (we subtract t.x0,t.y0 so that moves are
– relative to initial grab point, rather than object “snapping”).
t.x = event.x - t.x0
t.y = event.y - t.y0
elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( nil )
t.isFocus = false
end
end
– Important to return true. This tells the system that the event
– should not be propagated to listeners of any objects underneath.
return true
end
for i = 1, #iTable do
– print name to terminal to be sure things are working
print (iTable[i].name) – remove this later
– make icons have three parts:
– 1. a rounded rectangle
local iconbutton = display.newRoundedRect(iTable[i].x, iTable[i].y, iTable[i].width, iTable[i].height, iTable[i].r)
iconbutton:setFillColor(0,0,255) --blue for now
iconbutton.strokeWidth = 4
iconbutton:setStrokeColor( 255,255,255,255 )
– 2. a name label in the bottom left of the rectangle
local icontext = display.newText(iTable[i].name, iTable[i].x+5, iTable[i].y+60, helvetica, 24)
icontext:setTextColor(255, 255, 255)
– 3. a number label that shows how many times the icon has been tapped
local iconcount = display.newText(iTable[i].tapcount, iTable[i].x + 75, iTable[i].y+10, helvetica, 24)
iconcount:setTextColor(255,0,0)
local icongroup = display.newGroup()
icongroup:insert(iconbutton)
icongroup:insert(icontext)
icongroup:insert(iconcount)
– Make the button instance respond to touch events
icongroup:addEventListener( “touch”, onTouch )
end
[import]uid: 56041 topic_id: 16444 reply_id: 316444[/import]