How do I use multi-touch to move more than one object?

In this lesson we will show you how to use the 'touch' messages in LiveCode to move two objects around the screen.

You will require a touch screen device that support multi-touch, i.e. the iPhone and most modern android devices.

You can download the sample stack from this url: https://tinyurl.com/y73qlhgt

MultiTouchLesson.rev.zip

Setup our stack

Setup our stack

1) Create a new stack, name it and save it

2) Stop the stack from being resized

3) Set the width and height of the stack to 320 x 480

Add the 2 graphics

Add the 2 graphics

1) Create a square graphic

2) Set its name to 'square' / 'square2'

3) Make the graphic 'opaque'

4) Go to the colors & patterns inspector and set the 'backgroundColor' to one you like

repeat so that you have 2

Basic Multi-touch Messages

We're going to leave the interface for a moment and look at the basic messages we receive from Rev when touches start, end and move. 

on touchStart pTouchId
	# Sent each time a new touch is started
end touchStart
on touchEnd pTouchId
	# Sent each time a touch ends
end touchEnd
on touchMove pTouchId, pX, pY
	# Sent when any touch moves
end touchMove

If a user places two fingers on the device, two touch starts messages will be sent to you stack. You will also be sent a touch ID so you can tell they are different.

Add code to move the object touched 

on touchStart pTouchId
	# Sent each time a new touch is started
end touchStart
on touchEnd pTouchId
	# Sent each time a touch ends
end touchEnd
on touchMove pTouchId, pX, pY
	# Sent when any touch moves
	set the loc of the target to pX,pY
end touchMove

Load in the simulator to see the result

Load in the simulator to see the result

1a) With the iOS simulator loaded, hold the 'alt' key to reveal 'touch handles' (The grey circles you see)

2) Put the first touch over one of the squares, click and move it until the second touch is over the other square

3) Now you have the two simulated 'touches' over the objects and can try our your multi-touch

5 Comments

Mike Brown

How do you limit touch commands so that you do not move certain objects in your app? For example, if you add in several gif images and do not want a background gif to be movable. For standard graphics, disabling the graphic locks it so it is immovable but I do not see this ability for a gif from the object properties stack.

- Mike

George Brackett

It would be helpful to say where the handlers are located. I presume they're in the card script (since they use "target"), but they could be in the stack script. Could this work if the handlers were in each object's script, using "me?"

Ben Beaumont

Hi George. The scripts are located in the card script for this example although the stack script would work fine too. You are right to say that it is also possible to implement this directly from the objects. Touch messages are sent to the object first and if you choose no to handle them move to the card and then the stack script.

Ben Beaumont

Hi Mike. There are a couple ways you can do this.

OPTION 1
If you set an object to 'disabled' it will not receive any touch messages. This is great if you want to isolate a background image but perhaps isn't so good if you have quite a few items you don't want to be affected.

OPTION 2
You could set a custom property on all the items you do want to be 'touchable'.

set the cTouchAccept of object x to true

Then you edit your touchStart / touchEnd / touchMove handlers to include an if statement that checks the object has been set as 'touchable'. If it has, you perform actions, otherwise just ignore the message.

on touchMove
if the cTouchAccept of the target is true then
# Do this
end if
end touchMove

Tim

Here is what I think is an easier way to make only certain items draggable. Instead of moving objects directly in a stack or card script, send the a message to the target with coordinates. Then put a one line script in the objects that you want to drag to receive this message and put themselves in the the right location. Then in the stack script put a handle to catch the message for all those objects which don't handle it

Add your comment

E-Mail me when someone replies to this comment