Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Multiple clickable areas in an image — Gideros Forum

Multiple clickable areas in an image

rpallenrpallen Member
edited December 2017 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?
musicVolumeButton.png
50 x 100 - 6K

Comments

  • keszeghkeszegh Member
    edited December 2017
    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

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • divide the button image in half

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

    Likes: talis

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • 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

    Likes: antix

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • 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.

    Likes: antix

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