Button multi-touch

Monkey Forums/Monkey Programming/Button multi-touch

erebel55

(Posted 2014) [#1]

I'm working on perfecting my button code.

I only want to support two fingers. My button code is working fine with single-touch, but I want to expand it.

Here is what I have so far (imageless)

Strict

Import mojo

Function Main:Int()
    New Game()
    Return True
End Function

Class Game Extends App
    Field button:Button
    Field button2:Button
    Field buttonImage:Image
    
    Method OnCreate:Int()
        button = New Button(100, 100)
        button2 = New Button(300, 100)
        SetUpdateRate(60)
        Return True
    End Method
    
    Method OnUpdate:Int()
        button.Update()
        button2.Update()
        
        If button.clicked = True
            Print "Button Is Clicked " + Millisecs()
        Endif
        
        If button.down = True
            Print "Button Is Down " + Millisecs()
        Endif
        
        If button2.clicked = True
            Print "Button2 Is Clicked " + Millisecs()
        Endif
        
        If button2.down = True
            Print "Button2 Is Down " + Millisecs()
        Endif
        Return True
    End Method

    Method OnRender:Int()
        Cls
        
        button.Draw()
        button2.Draw()
        Return True
    End Method
        
End Class

Class Button
    Field clicked:Bool
    Field down:Bool
    Field visible:Bool
    Field x:Int, y:Int
    Field width:Int, height:Int
    Field image:Image
    
    Field clickHold:Bool
    
   Method New(x:Int, y:Int)
        clicked = False
        down = False
        visible = True
        
        Self.x = x
        Self.y = y
        width = 100
        height = 100
    End Method
    
    Method Draw:Void()
        If visible = True
            If clicked = True Or down = True
                SetColor 200, 50, 50
               DrawRect x, y, width, height
            Else
                SetColor 255, 255, 255
                DrawRect x, y, width, height
            Endif
        Endif
    End Method
    
    Method Update:Void()
        If visible = True
            ' loop 2 touch events
            For Local i:Int = 0 To 1
                Local td:Int = TouchDown(i)
                Local tx:Int = TouchX(i)
                Local ty:Int = TouchY(i)
                
                If td = False
                    clickHold = False
                Elseif clicked
                    clickHold = True
                Endif
                
                clicked = False
                down = False
                
                If td = True
                    If RectsOverlap(tx, ty, 2, 2, Self.x, Self.y, Self.width, Self.height)
                        down = True
                        If clickHold = False
                            clicked = True
                        Endif
                    Endif
                Endif
           Next
        Endif
    End Method
    
End Class

Function RectsOverlap:Bool(x1:Float, y1:Float, w1:Float, h1:Float, x2:Float, y2:Float, w2:Float, h2:Float)
    If x1 > (x2 + w2) Or (x1 + w1) < x2 Then Return False
    If y1 > (y2 + h2) Or (y1 + h1) < y2 Then Return False
    Return True
End Function

The Update function is what I am working on right now. So, I have added a for loop to look at two touch events.

Would I need to make clickHold, clicked, and down into arrays? I am trying to think of a better way and am interested in how others would do it.

Hopefully this thread will help someone else in the future as well.
Thank you

Xaron

(Posted 2014) [#2]

That's how I do it in my control class, using up to 5 touch events:

_numberOfTouchEvents = 0
For Local i:Int = 0 To 4
  _currentTouchX[i] = Float( TouchX(i) ) / gScaleRatio
  _currentTouchY[i] = Float( TouchY(i) ) / gScaleRatio

  If( TouchDown(i) And _isTouchPressed[i] = False )
    _isTouchPressed[i] = True
    _isTouchReleased[i] = False
    _TouchPressedX[i] = _currentTouchX[i]
    _TouchPressedY[i] = _currentTouchY[i]
  Else If( Not TouchDown(i) And _isTouchPressed[i] = True )
    _isTouchPressed[i] = False
    _isTouchReleased[i] = True
    _TouchReleasedX[i] = _currentTouchX[i]
    _TouchReleasedY[i] = _currentTouchY[i]
  Else If( TouchDown(i) And _isTouchPressed[i] = True )
    _numberOfTouchEvents += 1
  End If
Next

I use the number of touch events for zooming for instance:

'Check for multi touch events
If( _numberOfTouchEvents = 2 )
  If( _lastDistanceBetweenTwoTouchPoints < 0.0 )
    _lastDistanceBetweenTwoTouchPoints = GetDistSq( _currentTouchX[0], _currentTouchY[0], _currentTouchX[1], _currentTouchY[1] )
  End If
  'Zooming
  Local sqDist:Float = GetDistSq( _currentTouchX[0], _currentTouchY[0], _currentTouchX[1], _currentTouchY[1] )
  _zoomSpeed = sqDist - _lastDistanceBetweenTwoTouchPoints
  _lastDistanceBetweenTwoTouchPoints = sqDist
  gCurrentZoom += _zoomSpeed / 200000.0
  If( gCurrentZoom < MIN_ZOOM ) Then gCurrentZoom = MIN_ZOOM
  If( gCurrentZoom > MAX_ZOOM ) Then gCurrentZoom = MAX_ZOOM
Else
  _lastDistanceBetweenTwoTouchPoints = -1.0
End If

erebel55

(Posted 2014) [#3]

Ah yeah, I don't really care about the count so much but that makes sense. I'm just trying to support two buttons being pressed. So the user can press left/right and also jump at the same time.

erebel55

(Posted 2014) [#4]

So, I changed my clicked, down, and clickHold variables to arrays. It is working for the most part, but still isn't perfect yet. Sometimes when I hold both buttons down they will both release without me lifting my fingers. Not sure what is causing that.

Strict

Import mojo

Function Main:Int()
    New Game()
    Return True
End Function

Class Game Extends App
    Field button:Button
    Field button2:Button
    Field buttonImage:Image
    
    Method OnCreate:Int()
        button = New Button(100, 100)
        button2 = New Button(300, 100)
        SetUpdateRate(60)
        Return True
    End Method
    
    Method OnUpdate:Int()
        button.Update()
        button2.Update()
        
        If button.clicked[0] = True Or button.clicked[1] = True
            Print "Button Is Clicked " + Millisecs()
        Endif
        
        If button.down[0] = True Or button.down[1] = True
            Print "Button Is Down " + Millisecs()
        Endif
        
        If button2.clicked[0] = True Or button2.clicked[1] = True
            Print "Button2 Is Clicked " + Millisecs()
        Endif
        
        If button2.down[0] = True Or button2.down[1] = True
            Print "Button2 Is Down " + Millisecs()
        Endif
        Return True
    End Method

    Method OnRender:Int()
        Cls
        
        button.Draw()
        button2.Draw()
        Return True
    End Method
        
End Class

Class Button
    Field clicked:Bool[2]
    Field down:Bool[2]
    Field visible:Bool
    Field x:Int, y:Int
    Field width:Int, height:Int
    Field image:Image
    
    Field clickHold:Bool[2]
    
   Method New(x:Int, y:Int)
        visible = True
        
        Self.x = x
        Self.y = y
        width = 100
        height = 100
    End Method
    
    Method Draw:Void()
        If visible = True
            If clicked[0] = True Or down[0] = True Or clicked[1] = True Or down[1] = True
                SetColor 200, 50, 50
                DrawRect x, y, width, height
            Else
                SetColor 255, 255, 255
                DrawRect x, y, width, height
            Endif
        Endif
    End Method
    
    Method Update:Void()
        If visible = True
            ' loop 2 touch events
            For Local i:Int = 0 To 1
                Local td:Int = TouchDown(i)
                Local tx:Int = TouchX(i)
                Local ty:Int = TouchY(i)
                
                If td = False
                    clickHold[i] = False
                Elseif clicked[i]
                    clickHold[i] = True
                Endif
                
                clicked[i] = False
                down[i] = False
                
                If td = True
                    If RectsOverlap(tx, ty, 2, 2, Self.x, Self.y, Self.width, Self.height)
                        down[i] = True
                        If clickHold[i] = False
                            clicked[i] = True
                        Endif
                    Endif
                Endif
           Next
        Endif
    End Method
    
End Class

Function RectsOverlap:Bool(x1:Float, y1:Float, w1:Float, h1:Float, x2:Float, y2:Float, w2:Float, h2:Float)
    If x1 > (x2 + w2) Or (x1 + w1) < x2 Then Return False
    If y1 > (y2 + h2) Or (y1 + h1) < y2 Then Return False
    Return True
End Function

erebel55

(Posted 2014) [#5]

One issue looks to be if you press and hold with the 1st finger, press and hold with the 2nd finger, and then lift the 1st finger it doesn't think the 2nd finger is down still.

Still looking to define any other issues. Things are definitely not perfect :(

erebel55

(Posted 2014) [#6]

Hmm the odd behavior only seems to be occurring on older versions of Android (2.3.4) and not newer versions of Android (4.4.2). No idea why :S

Could anyone else please test this? Also interested on how it looks on ios.

Also, if would be great if anyone could let me know if they see any flaws in the logic.

Thank you

Nobuyuki

(Posted 2014) [#7]

It may be related to the device. Older devices have broken multitouch with "crossing axis" problems

erebel55

(Posted 2014) [#8]

Thanks Nobuyuki :)