Scroll view

Hi, Marco Vanossi!

I've make a simple example of scroll view in the screen space. Please take a look at the project here

Here is a simple script that allows to drag ScreenTransform vertically or horizontally: 

// @input Component.ScreenTransform screenTransform
// @input bool dragX
// @input bool dragY


var startPos = script.screenTransform.anchors.getCenter();

global.touchSystem.touchBlocking = true;

var canDrag = false;
var offset = vec2.zero();

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

var touchPos = eventData.getTouchPosition();
if (script.screenTransform.containsScreenPoint(touchPos)) {
var localPosition = script.screenTransform.screenPointToParentPoint(touchPos);
offset = localPosition.sub(script.screenTransform.anchors.getCenter()) 
canDrag = true;// allow dragging if the touch started in the screen transform area
}
});

var event = script.createEvent("TouchMoveEvent");
event.bind(function (eventData) {
if (canDrag) {
var touchPos = eventData.getTouchPosition();
var localPosition = script.screenTransform.screenPointToParentPoint(touchPos).sub(offset);
if(!script.dragX){
localPosition.x = startPos.x;
}
if(!script.dragY){
localPosition.y = startPos.y;
}
script.screenTransform.anchors.setCenter(localPosition);
}
});

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

Let me know if there are any questions!

Best

Olha

Hi, Justin!

Yes, definitely.

So in my script i am controlling relative position of the center of the screenTransform rectangle. 

Let's take a look what would be maximum and minimum relative positions of my panel : 

in my case maximum y position would be 1 and minimum -1 

i added two new input variables :

// @input vec2 limitsHorizontal = {-1, 1}
// @input vec2 limitsVertical = {-1, 1}

defined clamp function 

function clamp(min, max, v) {
return Math.min(Math.max(v, min), max);
}

and added couple lines of code to the update function :

if (canDrag) {
var touchPos = eventData.getTouchPosition();
var localPosition = script.screenTransform.screenPointToParentPoint(touchPos).sub(offset);
if (!script.dragX) {
localPosition.x = startPos.x;
} else {
localPosition.x = clamp(script.limitsHorizontal.x, script.limitsHorizontal.y, localPosition.x);
}
if (!script.dragY) {
localPosition.y = startPos.y;
} else {
localPosition.y = clamp(script.limitsVertical.x, script.limitsVertical.y, localPosition.y);
}
script.screenTransform.anchors.setCenter(localPosition);
}

Here is a complete script, you can replace it in the previous project 

You can even try to develop it further, adding smooth movement and snapping. 

Let me know if there are any questions!

Best 

Olha

Hi, Marco Vanossi!

Thanks for pointing on my mistake!

I am working on some kind of layouts right now, I'll be glad to share them later

Best 

Olha