Drag an image which connect with hand tracking

Hi, Vincent!

The difference is in Transforms :

- Head attached frog is in World Space

- Hand attached frog has ScreenTransform Component on it and is in Screen Transform Space. that works differently.

On your TouchController on TouchMove event please use next code to calculate position: 

var event = script.createEvent("TouchMoveEvent");

event.bind(function(eventData)

{

    var touchPos = eventData.getTouchPosition();

    var localPosition = screenTransform.screenPointToParentPoint(touchPos)

    screenTransform.anchors.setCenter(localPosition)

});

This will make it follow touch position. Then you can use your logic for rotation

I will definitely make a post about World Space, Screen Space and Screen Transform Space (Anchored Space) soon! 

Let me know if that helps!

Best

Olha

Hi, Vincent!

This can be achieved by adding a Touch Component to the object with this script. Then events will only fire when touch position is within the image.

But this script would do better (because sometimes while touch is moved (onTouchMove) can accidentally move out of the image and dragging will stop) 

This script only checks if touch started within an image, and then drags it until released. (No Touch Component needed in this case)

I removed variables I'm not using so this script could be reused by anyone:

// @input Component.Image handImage

var image = script.handImage;
var screenTransform = image.getSceneObject().getFirstComponent("Component.ScreenTransform");

// Enable full screen touches
global.touchSystem.touchBlocking = true;

var canDrag = false;

var touchStarEvent = script.createEvent("TouchStartEvent");
touchStarEvent.bind(function (eventData) {

var touchPos = eventData.getTouchPosition();
if (screenTransform.containsScreenPoint(touchPos)) {
canDrag = true;// allow dragging if the touch started in the frog area
}
});

var event = script.createEvent("TouchMoveEvent");
event.bind(function (eventData) {
if (canDrag) {
var touchPos = eventData.getTouchPosition();
var localPosition = screenTransform.screenPointToParentPoint(touchPos)
screenTransform.anchors.setCenter(localPosition)
}
});

var touchEndEvent = script.createEvent("TouchEndEvent");
touchEndEvent.bind(function (eventData) {
canDrag = false;
//reset
});

More useful documentation about screen transform can be found here 

Best 

Olha

Hi, Vincent!

Sorry for the late answer

Please take a look at the project attached

As I understood you want both frogs to behave almost the same but be attached to different objects.

So I created a copy of neck attached frog and set it up to follow screen position of a hand instead of using screen transforms. So it's using manipulate component in just the same way

Sorry for misunderstanding!

Best

Olha