Quick Links: Download Gideros Studio | Gideros Documentation | Ultimate Guide | Gideros Development Center
Multiple clickable areas in an image - Gideros Forum

Multiple clickable areas in an image

rpallen Member
edited December 4 in General questions
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?

Comments

  • keszegh Member
    edited December 4
    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

    Aye: antix

    +1 -1 (+1 / -0 )
  • olegoleg Member
    divide the button image in half

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

    Aye: talis

    +1 -1 (+1 / -0 )
  • olegoleg Member
    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

    Aye: antix

    +1 -1 (+1 / -0 )
  • 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.

    Aye: antix

    +1 -1 (+1 / -0 )
Sign In or Register to comment.