Multiple clickable areas in an image

rpallen

I've made an image for a volume control button (see attached image). What I want is, itouching the top half of the button increases the volume and touching the bottom half decreases the volume.

Is there a way in Gideros to implement multiple "hitTestPoint"s within an image?

If not, will the method below work?

My idea is to create a group with the base image (the volume control button image) as the bottom layer. Then create a shape (volumeUp = Shape.new()) that is half the size of that image and position it over the top half of the button and create another shape (volumeDown = Shape.new()) that is half the size and position it over the bottom half of the button. I will set the alpha of these shapes to 0 so they aren't seen. Then I can use volumeUp:hitTestPoint and volumeDown:hitTestPoint in the function for changing volume.

Again, will this work? Will the fact that the alpha is 0 cause a problem?

keszegh

what you say should work, but probably it's easier to check after hittestpoint where the hit occured. something like this:

if button:hitTestPoint(event.x,event.y) then local lX,lY= button:localToGlobal(event.x,event.y) if lY<=button:getHeight(true)/2 then --upper half else --lower half end end

oleg

divide the button image in half

TextureRegion
http://docs.giderosmobile.com/reference/gideros/TextureRegion

oleg

local texture = Texture.new("musicVolumeButton.png")     local region1 = TextureRegion.new(texture, 0, 0, 50, 50) local region2 = TextureRegion.new(texture, 0, 50, 50, 50)     local bitmap1 = Bitmap.new(region1) local bitmap2 = Bitmap.new(region2)   local up= Button.new(bitmap1 ) up:setPosition(100,100) stage:addChild(up)     up:addEventListener("click", function(e) e:stopPropagation() -- bla bla bla   end)     local down= Button.new(bitmap2 ) down:setPosition(100,150) stage:addChild(down)     down:addEventListener("click", function(e) e:stopPropagation() -- bla bla bla   end)

Button = gideros.class(Sprite)   function Button:init(upState,flag) self.flag=flag self.upState = upState self:addChild(self.upState)     self.focus = false   self:updateVisualState(false)   self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self) self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self) self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)   self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self) self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self) self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self) self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self) end   function Button:onMouseDown(event) if self:hitTestPoint(event.x, event.y) then self.focus = true self:updateVisualState(true) event:stopPropagation() end end   function Button:onMouseMove(event) if self.focus then if not self:hitTestPoint(event.x, event.y) then self.focus = false; self:updateVisualState(false) end event:stopPropagation() end end   function Button:onMouseUp(event) if self.focus then self.focus = false; self:updateVisualState(false) self:dispatchEvent(Event.new("click")) event:stopPropagation() end end   -- if button is on focus, stop propagation of touch events function Button:onTouchesBegin(event) if self.focus then event:stopPropagation() move=1 end end   -- if button is on focus, stop propagation of touch events function Button:onTouchesMove(event) if self.focus then event:stopPropagation() end end   -- if button is on focus, stop propagation of touch events function Button:onTouchesEnd(event) if self.focus then event:stopPropagation() move=0 end end   -- if touches are cancelled, reset the state of the button function Button:onTouchesCancel(event) if self.focus then self.focus = false; self:updateVisualState(false) event:stopPropagation() end end   -- if state is true show downState else show upState function Button:updateVisualState(state) if state then   --self:setAlpha(0.5) if self.flag~=false then self:setColorTransform(2, 2, 2, 1) end   else   --self:setAlpha(1) if self.flag~=false then self:setColorTransform(1, 1, 1, 1) end   end end

rpallen

Thanks all for the suggestions. I'm pretty busy this week and I doubt I'll get around to trying these suggestions before the week, but I will look more closely and try one or ore of these suggestions.
Thanks again.