Difference between revisions of "Article Tutorials/Touch Input and Mouse Input"

From GiderosMobile
 
Line 3: Line 3:
  
 
=== Touch Input ===
 
=== Touch Input ===
You will no doubt want people to tap a Start Button to get the game going from your title screen. Here’s how to set up a button. This example will print the co-ordinates where the player taps the button.<br><br>
+
You will no doubt want people to tap a Start Button to get the game going from your title screen. Here’s how to set up a button. This example will print the co-ordinates where the player taps the button.
 
 
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 
local yinyang = Sprite.new()
 
local yinyang = Sprite.new()
Line 22: Line 21:
  
 
stage:addChild(yinyang)
 
stage:addChild(yinyang)
</syntaxhighlight><br>
+
</syntaxhighlight>
  
When you run this code, you will see the usual image on the screen. Click on it with your mouse in the Player. You will see the co-ordinates of where you clicked on the image displayed in the console Output area of Gideros Studio.<br>
+
When you run this code, you will see the usual image on the screen. Click on it with your mouse in the Player. You will see the co-ordinates of where you clicked on the image displayed in the console Output area of Gideros Studio.
The other events are: TOUCHES_BEGIN, TOUCHES_MOVE and TOUCHES_CANCEL.<br><br>
+
 
 +
The other events are: TOUCHES_BEGIN, TOUCHES_MOVE and TOUCHES_CANCEL.
  
 
=== Mouse Input ===
 
=== Mouse Input ===
 
+
Handling Mouse Input is pretty much the same as Touch Input, however you don’t use the ‘touch’ handler nor event information. The code for Mouse Input is below.
Handling Mouse Input is pretty much the same as Touch Input, however you don’t use the ‘touch’ handler nor event information. The code for Mouse Input is below.<br>
 
 
 
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 
local yinyang = Sprite.new()
 
local yinyang = Sprite.new()
Line 47: Line 45:
  
 
stage:addChild(yinyang)
 
stage:addChild(yinyang)
</syntaxhighlight><br>
+
</syntaxhighlight>
  
 
You should check for when the mouse button is UP on your object as the player may change their mind and move the mouse away so as to not activate the button. This is more common on iOS and you will want to use Event.TOUCHES_END if programming with touches for mobile devices.
 
You should check for when the mouse button is UP on your object as the player may change their mind and move the mouse away so as to not activate the button. This is more common on iOS and you will want to use Event.TOUCHES_END if programming with touches for mobile devices.
  
The other Mouse options are: MOUSE_DOWN and MOUSE_MOVE.<br><br>
+
The other Mouse options are: MOUSE_DOWN and MOUSE_MOVE.
 +
 
 +
You can download the yinyang image from here: [[:File:Yinyang.png]]
  
You can download the yinyang image from here: [[:File:Yinyang.png]]<br>
 
  
 
  '''Note: This tutorial was written by [http://bluebilby.com/author/waulokadmin/ Jason Oakley] and was originally available Here: http://bluebilby.com/2013/04/26/gideros-mobile-tutorial-touch-input-and-mouse-input/'''
 
  '''Note: This tutorial was written by [http://bluebilby.com/author/waulokadmin/ Jason Oakley] and was originally available Here: http://bluebilby.com/2013/04/26/gideros-mobile-tutorial-touch-input-and-mouse-input/'''

Latest revision as of 11:20, 26 August 2024

Touch Input and Mouse Input

Touch Input

You will no doubt want people to tap a Start Button to get the game going from your title screen. Here’s how to set up a button. This example will print the co-ordinates where the player taps the button.

local yinyang = Sprite.new()
local yinyangimg = Bitmap.new(Texture.new("images/yinyang.png"))
yinyang:addChild(yinyangimg)

local function imagetouch(button, event)
    if button:hitTestPoint(event.touch.x, event.touch.y) then
        local x = event.touch.x
        local y = event.touch.y
        print("touched: X=" .. x .. " Y=" .. y)
    end
end

yinyang:setPosition(100,200)
yinyang:addEventListener(Event.TOUCHES_END, imagetouch, yinyang)

stage:addChild(yinyang)

When you run this code, you will see the usual image on the screen. Click on it with your mouse in the Player. You will see the co-ordinates of where you clicked on the image displayed in the console Output area of Gideros Studio.

The other events are: TOUCHES_BEGIN, TOUCHES_MOVE and TOUCHES_CANCEL.

Mouse Input

Handling Mouse Input is pretty much the same as Touch Input, however you don’t use the ‘touch’ handler nor event information. The code for Mouse Input is below.

local yinyang = Sprite.new()
local yinyangimg = Bitmap.new(Texture.new("images/yinyang.png"))
yinyang:addChild(yinyangimg)
local function imagetouch(button, event)
    if button:hitTestPoint(event.x, event.y) then
        local x = event.x
        local y = event.y
        print("clicked: X=" .. x .. " Y=" .. y)
    end
end

yinyang:setPosition(100,200)
yinyang:addEventListener(Event.MOUSE_UP, imagetouch, yinyang)

stage:addChild(yinyang)

You should check for when the mouse button is UP on your object as the player may change their mind and move the mouse away so as to not activate the button. This is more common on iOS and you will want to use Event.TOUCHES_END if programming with touches for mobile devices.

The other Mouse options are: MOUSE_DOWN and MOUSE_MOVE.

You can download the yinyang image from here: File:Yinyang.png


Note: This tutorial was written by Jason Oakley and was originally available Here: http://bluebilby.com/2013/04/26/gideros-mobile-tutorial-touch-input-and-mouse-input/


Written Tutorials