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
Comment actions -
Thank you, Olha! I’ll try it out and let you know! 🤗
Comment actions -
Hi Olha,
Is there a way to limit how far the user can scroll?
For example, I only want the user to scroll to the last square and no further.
Thank you!
Comment actions -
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
Comment actions -
Ah, that makes sense. This is great. Thank you so much for the help Olha!!
Best,
JustinComment actions -
Hi Olha,
Thanks for the tutorial. Im finally making a lens that uses it. My use case is for horizontal scroll.
Your example for limiting the drag is incorrect though. The correct way would to limit dragging as follows for when script.dragX==true
if(localPosition.x>startPos.x && localPosition.x<startPos.x+size.x)
{
localPosition.x=startPos.x;
}
where
var startPos = script.screenTransform.anchors.getCenter();
var size = script.screenTransform.anchors.getSize();
Well even more correct would be to get the actual screen width and do
if(localPosition.x>startPos.x && localPosition.x<startPos.x+size.x-widht/2)
{
localPosition.x=startPos.x;
}
thanks,
Marco
Comment actions -
Olha!
I just spent sometime playing with scrollviews and in the end it didn’t turn out feasible. I need to show 1600 text objects within a scroll view somehow it stops working after a few hundred. There’s probably a limit on how many objects a the scene can render.
So I’ve been thinking a better approach would be to use reusable cells similar to what iOS does with table views and collection views. If you have a tutorial for that that would be great!
Thanks
Comment actions -
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
Comment actions -
Hi Olha!
That's awesome!
Collection views and table views with reusable cell would be great!
Maybe also date picker, drop down, etc!
Marco
Comment actions -
hello my bro how are you how work and everything pls and me in you whatsapp contact see my number 07067706969
Comment actions -
I tried to copy and paste the links from Snapchat to the search bar in Snap Camera but sadly they do not appear to be working here.
Comment actions
Please sign in to leave a comment.
Have a comment?