How to add multitouch support for the Button class?

andreeib · June 2012

Hi guys, I'm new here and I barely started using Gideros but already have a project 70% finished, the thing is I have a small problem.

I created some buttons using a slightly modified version of the Button class from the Gideros github account. I have three buttons, two used for controlling the direction and one used for an action. If you look down at the code of my Button class you can see I added a new event that is dispatched continuously if the button is hold pressed.

The problem is that if the user holds pressed a direction button and tries to press the action button at the same time it doesn't work, it seems the Button class was not made to support multitouch.

My question is how can I allow the user to press more than one button at a time?

Thanks for the help,
Andrei

This is my Button class:

--[[
A generic button class
 
This code is MIT licensed, see <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow">http://www.opensource.org/licenses/mit-license.php</a>
(C) 2010 - 2011 Gideros Mobile 
]]
 
Button = gideros.class(Sprite)
 
function Button:init(upState, downState)
	self.upState = upState
	self.downState = downState
 
	self.focus = false
 
	-- set the visual state as "up"
	self:updateVisualState(false)
 
	-- register to all mouse and touch events
	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)
 
	-- enter frame event
	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
end
 
function Button:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self:updateVisualState(true)
		self:dispatchEvent(Event.new('clickDown'))
		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()
	else
		if self:hitTestPoint(event.x, event.y) then	
			self.focus = true
			self:updateVisualState(true)
		end
	end
end
 
function Button:onMouseUp(event)
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		self:dispatchEvent(Event.new('clickUp'))
		event:stopPropagation()
	end
end
 
-- if button is on focus, stop propagation of touch events
function Button:onTouchesBegin(event)
	if self.focus then
		event:stopPropagation()
	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()
	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 the button is focused then dispatch the clickHold event
function Button:onEnterFrame(event)
	if self.focus then
		self:dispatchEvent(Event.new('clickHold'))
	end
end
 
-- if state is true show downState else show upState
function Button:updateVisualState(state)
	if state then
		if self:contains(self.upState) then
			self:removeChild(self.upState)
		end
 
		if not self:contains(self.downState) then
			self:addChild(self.downState)
		end
	else
		if self:contains(self.downState) then
			self:removeChild(self.downState)
		end
 
		if not self:contains(self.upState) then
			self:addChild(self.upState)
		end
	end
end

ar2rsawseen · June 2012

Haven't tried that, but from the first look, you can try swap contents of
function Button:onMouseDown(event) with function Button:onTouchesBegin(event) then
function Button:onMouseMove(event) with function Button:onTouchesMove(event) and
function Button:onMouseUp(event) with function Button:onTouchesEnd(event)

Only difference, that inside touch events you should use event.touch.x and event.touch.y instead of event.x and event.y.

As I said, I haven't tried, but It should/might work

atilim · June 2012

Addition to @ar2rsawseen,

the code,

-- if the button is focused then dispatch the clickHold event
function Button:onEnterFrame(event)
	if self.focus then
		self:dispatchEvent(Event.new('clickHold'))
	end
end

creates an Event object at each frame for each focused button and therefore consumes memory continuously. Instead, I would create a function like isHold or isFocus and return the value of self.focus:

function Button:isFocus()
    return self.focus
end

Also if you want to dispatch an event many times, you can create the Event object once and dispatch many. This optimization is heavily used in Gideros internally (for ENTER_FRAME, mouse and touch events, etc)

Also you'll love http://www.tntparticlesengine.com/?cat=13

techdojo · June 2012

You need to look at the multi touch example code - I don't think you can use the "mouse" events if your intending to support multi-touch.

andreeib · June 2012

Thanks @ar2rsawseen it worked great, the only problem is that in the GiderosPlayer the clicks don't work now, just on my phone.

I made the optimization you sugested @atilim, thanks.

Scouser · June 2012

Unfortunately, multi-touches only work on a real device. There is no way to emulate multi-touch on a desktop machine.

Dikkesnoek · July 2012

My question is, can you only use "onMouse" events? They both work in
the simulator and on the iPhone, so why should you use "onTouches"?

Regards,

Marc

zvardin · July 2012

You have to use them for simultaneous touches, allowing gestures etc.

twisttap · July 2012

I also tried the same code as provided here but somehow when I click one of the buttons on screen, others dont receive the touch. I even disabled stop:propogation's but no effect. Any idea why ?

Rickyngk · July 2012

I've also got some troubles with multi-touch button, so I try to approach a diferrent way. http://www.giderosmobile.com/forum/discussion/1333/multitouch-ui

hope that it's useful

bowerandy · July 2012

Folks, I had made some modifications to the standard Gideros button class but, until recently this didn't support multi-touch either. However, just this morning I needed mutli-touch functionality so here's what I did.

Basically, the idea is to do most of the processing inside touch event handlers after first taking account of the particular touch id we are working with. However, in order that the button still works inside the desktop player I also have mouse handlers that "fake" up a touch event (with id=0) so I can use the same touch code for either case. I hope that makes sense.

The code below is a snippet from my own button class but it should be easily adaptable back to the original Gideros button if required.

best regards,

 
function BhButton:onMouseDown(event)
	-- Fake a touch event with id 0, this allows buttons to work in the simulator
	-- that doesn't normally understand touch events.	
	event.touch={ x=event.x, y=event.y, id=0}
	self:onTouchesBegin(event)	
end
 
function BhButton:onMouseMove(event)
	-- Fake a touch event with id 0, this allows buttons to work in the simulator
	-- that doesn't normally understand touch events.	
	event.touch={ x=event.x, y=event.y, id=0}
	self:onTouchesMove(event)	
end
 
function BhButton:onMouseUp(event)
	-- Fake a touch event with id 0, this allows buttons to work in the simulator
	-- that doesn't normally understand touch events.	
	event.touch={ x=event.x, y=event.y, id=0}
	self:onTouchesEnd(event)	
end
 
function BhButton:onTouchesBegin(event)
	if self.touchId==nil and  self.isEnabled and self:isVisibleDeeply() and self:hitTestPoint(event.touch.x, event.touch.y) then
		self.touchId=event.touch.id
		self.isDown = true
		self:updateVisualState()
		event:stopPropagation()
	end
end
 
function BhButton:onTouchesMove(event)
	if self.touchId==event.touch.id then
		if not self:hitTestPoint(event.touch.x, event.touch.y) then	
			self.touchId=nil
			self.isDown = false
			self:updateVisualState()
		end
		event:stopPropagation()
	end
end
 
function BhButton:onTouchesEnd(event)
	if self.touchId==event.touch.id then
		self.touchId=nil
		self.isDown = false
		self:updateVisualState()
 
		-- Button is clicked, dispatch "click" event
		local event=Event.new("click")
		event.target=self
		self:dispatchEvent(event)	
		event:stopPropagation()
	end
end
 
-- if touches are cancelled, reset the state of the button
function BhButton:onTouchesCancel(event)
	if self.touchId==event.touch.id  then
		self.touchId=nil
		self.isDown = false
		self:updateVisualState()
		event:stopPropagation()
	end
end

Howdy, Stranger!

Categories

In this Discussion

Top Posters

How to add multitouch support for the Button class?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

How to add multitouch support for the Button class?

Comments