To restrict the swipe on left and right, add an "int currentChild" and change the if (percentage > 0) statements to if (percentage > 0 && currentChild < transform.childCount - 1) { newLocation += new Vector3(-Screen.width, 0, 0); currentChild++; } else if(percentage 0) { newLocation += new Vector3(Screen.width, 0, 0); currentChild--; }
Perfect Tuto. Many thanks. The cherry on the cake would be to implement this in a List View filled with items, and swipe a selected item either to delete it or archive it, as this is done in email apps.
You are such a life saver, this is really good info. lIke really really good info. I spent some much time implementing my own drag handling without realizing that this is built in.
Straigt forward. That video is a gem. Pls don´t forget that video and show us how to limit the swipe if there´s no additional pages to go. It´d also be great to see how you do the same in y direction. I tried it, but for some reason other than weird behaviour nothing worked. Keep it up man. Your channel is very promising!
If you're having weird issues with snapping back to the first panel, simply move some code (that sets the panel location variable to the new transform.position) into the while loop of the Coroutine worked for me!
Great video, great script! Works like a charm. Added a BackToPage1 method to reset public void BackToPage1() { currentPage = 1; transform.position += new Vector3(-transform.position.x, 0, 0); panelLocation = transform.position; } which I call when the content of the panels is swapped for new content
A mí no me detecta el "OnDrag", he usado el Debug.Log para ver si me calcula las coordenadas pero no funciona... No estoy usando Panels, puede ser por eso?
@@maestradebobobo767 intenta hacerlo tal cual como el tutoríal , mismos nombres de los prefabs todo tal cual igual, ya cuando te funcione puedes modificar lo que gustes y así veras cual es el error
@@maestradebobobo767 haz una prueba, construyelo y pásalo a tu teléfono e intenta hacer swipe después de rotar el teléfono en modo horizontal y me comenta si te funciono perfecto
Thanks for your tutorial, I added below lines to stop at the last panel. int EndPos = (NoOfPanels - 2) * Screen.width + Screen.width / 2; if (newLocation.x < -EndPos) newLocation.x = -EndPos;
For those who want to make it force stop at the far left/right panels: public void OnDrag(PointerEventData data) { float difference = data.pressPosition.x - data.position.x; if (Math.Abs(farLeftPanel.position.x - Screen.width / 2f) < .001f && difference < 0) { print("Far Left"); return; }
For anyone still wondering how to apply this to code when using "Screen Space - Camera"; just convert the data.pressPosition and data.position to world points. For example: float difference = Camera.main.ScreenToWorldPoint(data.pressPosition).x - Camera.main.ScreenToWorldPoint(data.position).x;
Hi, first of all thanks for the wonderful tutorial, however I'm having trouble dragging sideways, my panel is moving too fast a single tap makes it move by -9858 at position X. Has anyone had this problem and managed to solve? My code is identical to the video.
maybe a little late , but i was able to solve the problem. you probably dont use Screen Space - Overlay in the Canvas but Screen Space- Camera. You can either switch, or use transform.localposition insted
I tried Changing the OnDrag to Vector3 pos = transform.position pos.y = Input.mousePosition.y; transform.position = pos; But when i swipe up or down it returns to the main panel always Any help plz😥
Hello , i just followed your tutorial in this video but i faced problems when i swipe right then it goes to back to 1st panel. i got 3 panel in the scene but you have 7 panel. Does the amount of panel related to the script?
Hi, i got the same problem as you, but after comparing my and his code i realised that in the first line of the OnEndDrag function i wrote: float percentage = (data.position.x - data.position.x) / Screen.width; instead of float percentage = (data.pressPosition.x - data.position.x) / Screen.width; So maybe u got the same careless mistake as me.
Hey, Great video, i have one question tho, it works on almost all resolutions but if i change it to a really low resolution it has way more distance between each swipe, somebody knows whats up? Great video tho!
I only have 3 panels, and for some reason the swipe is insanely fast. It also does not stay on the next panel when swiping Edit: it is because I am using screen space camera instead of overlay, Is there any way of fixing this apart from setting my canvas to overlay?
I might be coming too late into this, but any ideas on how would I go about implementing BUT if at the start I swipe to the left, the last page appears through the left and so on? Like an infinite cycle, not a scroll back to the position of the desired, but that you can scroll infinitely? ie: you get to the last page, you scroll again and you get the first page, then the second and so on
Hi, I solved this problem. I can give some hint for you. Good Luck :) if(this.GetComponent().offsetMin.x > 0) { StartCoroutine(SmoothMove(transform.position, panelLocation, easing)); }
very impressive... but how do you set this up for different screen-sizes? Because the panels you set up in unity editor are not always the same size of the Screen.width :'(
You can recalculate the panels size in Awake function, then layout child components inside these panels using Group component or something like that private void Awake() { for (int i = 0; i < transform.childCount; i++) { Transform child = transform.GetChild(i); RectTransform childRect = child.GetComponent(); childRect.sizeDelta = new Vector2(Screen.width, Screen.height); } }
Do you know how to make this Level Manager resolution responsive? So that it works e.g. for smartphones and tablets? And thanks for your tutorials! Keep going on like this ✌🏻👍🏻
Should work fine with smartphones and tablets (touch devices). Since it uses a canvas element, you can modify the settings on the canvas to make it responsive for different resolutions. Cheers
@@pressstart6864 It doesnt work for diffrent resolutions, because the "PanelHolder" is a gameObject, not a canvas. You cant make it a canvas because you wont be able swipe then. I dont se any way to fix this issue, i think a diffrent Method is required.
Kind of. I remember that I made a workaround, to scale according to the Screen Aspect Ration from inside the script. But its like stretching a Photo, it doesnt look good on Tablets...
Awsome tutorial. During playtesting i ran into a problem with the script. After reloading the scene I cant swipe between the panels anymore. Do you guys have any idea what might cause this problem? Edit: I found out that Time.deltaTime does not increse anymore after the scene is reloaded but i cant think of any reason why it would not count up anylonger.
here is the code for not letting the user swipe past the bounds // I'm doing a vertical style swipe from up to down. private int _page = 0; private int _upperPageBound= 1; private int _lowerPageBound = 0; // other code . . . // inside OnEndDrag if (percentage > 0 && page == _upperPageBound) { // swipe down, go to page above
newLocation += new Vector3(0,-Screen.height,0); page--; } else if(percentage < 0 && page == _lowerPageBound ) { // swipe up, go to page below newLocation += new Vector3(0, Screen.height, 0); page ++; }
I had screen size struggles so I made this.. parent every gameObject to each other and set the parents to 0. swipe menu is now responsive for me. public GameObject[] items; void Start() { items[0].transform.position += new Vector3(Screen.width ,0,0); items[1].transform.position += new Vector3(Screen.width, 0, 0); items[2].transform.position += new Vector3(Screen.width, 0, 0);
@@gamingtotdemaxi mine might be a little different to his, but generally the same. ANSWER TO DIFFERENT SCREENS/ DYNAMIC SCREEN SIZES: 3 Main steps:> 1. Create a reference panel on unity, ie this is the panel that will always adapt to the size of the canvas automatically. Normally the very next panel canvas sees naturally does this 2. Create a script (attach it to your canvas), with the number of panels you are using as game objects ie : public GameObject referencePanel, panelOne, panelTwo, panelThree; etc 3. In Void start; Write the code: PanelOne.transform.position = referencePanel.position //this makes your panel go to the same position as the reference panel which is the precise size of the canvas and location 4. then write: PanelTwo.transform.position = new Vector3 (screen.width, screen.height/2); //This makes panel two move its X axis to the right by the exact size of the reference panel. 5. lastly, do the same things for each panel that you have. However, on the second code for your third panel, do - screen.width*2 and for your fourth panel, do screen.width*3 etc etc. Here are a few things to keep an eye on: 1. Make sure that your pivot is set to the middle left side on each panel 2. Your first panel does not need to be moved, so it only needs to be set to the same position as the reference panel, so the second code is only applied to the panels outside the field of view 3. I know this could be simplified, i am still yet to simplify it, but this is what worked for me and i felt i had o share it asap
Can someone teach me how to remove this Error "NullReferenceException: Object reference not set to an instance of an object" when I open a new Unity Progect every time?
To restrict the swipe on left and right, add an "int currentChild" and change the if (percentage > 0) statements to
if (percentage > 0 && currentChild < transform.childCount - 1)
{
newLocation += new Vector3(-Screen.width, 0, 0);
currentChild++;
}
else if(percentage 0)
{
newLocation += new Vector3(Screen.width, 0, 0);
currentChild--;
}
hye im a newbie in coding can you help me how to add this code?
thank you verry much
Thank you so much!!
thanks for help, profesional unity team from Czech Republic
"int currentChild" is private!
Nice solution for a common problem :)
Perfect Tuto. Many thanks. The cherry on the cake would be to implement this in a List View filled with items, and swipe a selected item either to delete it or archive it, as this is done in email apps.
Heading to class, but I'm so super excited for this one, thank you!
Glad to hear it!
You are such a life saver, this is really good info. lIke really really good info. I spent some much time implementing my own drag handling without realizing that this is built in.
Straigt forward. That video is a gem. Pls don´t forget that video and show us how to limit the swipe if there´s no additional pages to go. It´d also be great to see how you do the same in y direction. I tried it, but for some reason other than weird behaviour nothing worked. Keep it up man. Your channel is very promising!
Hey Dom, I cover it in this video: th-cam.com/video/tCr_i5CVv_w/w-d-xo.html
Great vid! How would you amend the code so this workds on Scale With Screen Size?
Nice Video bro i do Mistakes but i saw this , fix it and learn lot, thanks Amigo
If you're having weird issues with snapping back to the first panel, simply move some code (that sets the panel location variable to the new transform.position) into the while loop of the Coroutine worked for me!
Great video, great script!
Works like a charm.
Added a BackToPage1 method to reset
public void BackToPage1()
{
currentPage = 1;
transform.position += new Vector3(-transform.position.x, 0, 0);
panelLocation = transform.position;
}
which I call when the content of the panels is swapped for new content
Great video dude !
GRACIAS !! me has ayudado mucho, sin duda alguna este es uno de los mejores turoriales que he visto :) . many cold beers for you good man
A mí no me detecta el "OnDrag", he usado el Debug.Log para ver si me calcula las coordenadas pero no funciona... No estoy usando Panels, puede ser por eso?
@@maestradebobobo767 intenta hacerlo tal cual como el tutoríal , mismos nombres de los prefabs todo tal cual igual, ya cuando te funcione puedes modificar lo que gustes y así veras cual es el error
Oscar Sanchez Vale, por alguna razón me faltaba el EventSystem y sin EventSystem no funciona.
@@maestradebobobo767 haz una prueba, construyelo y pásalo a tu teléfono e intenta hacer swipe después de rotar el teléfono en modo horizontal y me comenta si te funciono perfecto
Oscar Sanchez Me funcionó perfectamente! Gracias
You are a genius, thank you for this video!
Thanks for your tutorial, I added below lines to stop at the last panel.
int EndPos = (NoOfPanels - 2) * Screen.width + Screen.width / 2;
if (newLocation.x < -EndPos) newLocation.x = -EndPos;
Did anyone figure how to make the resolutions all the same? I keep getting them different screen sizes when I build for mobile
so helpful, thank you!
awesome bro!
Still valid today
For those who want to make it force stop at the far left/right panels:
public void OnDrag(PointerEventData data)
{
float difference = data.pressPosition.x - data.position.x;
if (Math.Abs(farLeftPanel.position.x - Screen.width / 2f) < .001f && difference < 0)
{
print("Far Left");
return;
}
if (Math.Abs(farRightPanel.position.x - Screen.width / 2f) < .001f && difference > 0)
{
print("Far Right");
return;
}
_tf.position = _panelLocation - new Vector3(difference, 0, 0);
}
You're welcome.
If any of you are having a problem with the scrolling being way too fast:
Change your camera to overlay
thanks
thank you. Your code is clear & smart
A perfect tutorial
helpful as always :D
Awesome, thanks for the tutorial :)
Overall.. Thank you dear for sharing those images as well as codes with me...🥰...
Thanks for the knowledge!
For anyone still wondering how to apply this to code when using "Screen Space - Camera"; just convert the data.pressPosition and data.position to world points. For example:
float difference = Camera.main.ScreenToWorldPoint(data.pressPosition).x - Camera.main.ScreenToWorldPoint(data.position).x;
You are a crack broh!! Keep going and congratulations
Hey, thanks bud!
Hi, first of all thanks for the wonderful tutorial, however I'm having trouble dragging sideways, my panel is moving too fast a single tap makes it move by -9858 at position X.
Has anyone had this problem and managed to solve?
My code is identical to the video.
I have the same problema, you found solution?
maybe a little late , but i was able to solve the problem.
you probably dont use Screen Space - Overlay in the Canvas but Screen Space- Camera. You can either switch, or use transform.localposition insted
Is this gonna be responsive? For example with different screen sizes like 1600x2000 & 1080x1920
Love it man
it's very usefull video
thx! just wut i needed
Very thanks for this lesson :)
Hey, nice and clean and neat. Thank you!
Wow Amazing
Thanks bro, this is great.
Thank you so much.
so helpful
Thanks man :D
This does not work if you are using Scroll Rect in the Panel. How do I fix this?
hey guys, I wanna add teleport function on each button. Every buttons have specific position. Can you guys give me some advice. thanks
Gracias me ayudo mucho:D
Very useful tutorial
but can i make the slide vertically instead of horizontal?
I tried Changing the OnDrag to
Vector3 pos = transform.position
pos.y = Input.mousePosition.y;
transform.position = pos;
But when i swipe up or down it returns to the main panel always Any help plz😥
@@ibrahimmohamedmahmoudali3668 I have the same problem did you find out how to fix it?
I found error.
I used transform.position. but it was not working
and i finaly changed "position -> localPosition"
so it's very good working
tks
Hello guys ! Thanks for tutorial. How can you force stop the swipe when you come at the last panel ?
In my case it's not jumping to the next panel, it skipps all panels when i'm halfway through my 10 panels
Hello , i just followed your tutorial in this video but i faced problems when i swipe right then it goes to back to 1st panel. i got 3 panel in the scene but you have 7 panel. Does the amount of panel related to the script?
Hi, i got the same problem as you, but after comparing my and his code i realised that in the first line of the OnEndDrag function i wrote: float percentage = (data.position.x - data.position.x) / Screen.width;
instead of
float percentage = (data.pressPosition.x - data.position.x) / Screen.width;
So maybe u got the same careless mistake as me.
@@PumaGnom Maybe i face problems on vector 3 script. thanks for the help
same problem, any solution?
@@PumaGnom i wrote the same thing " (data.pressPosition.x) " but it still doesn't work
hello brother,
is it work with buttons also??
if yes then how we can use it.........
Where is the continuation mate. I want to know how not moving off the panels is done
Go to the video next to this one, in the end there is the solution. Pretty simple, btw
The fixed is here: th-cam.com/video/tCr_i5CVv_w/w-d-xo.html
@@lcd11001 God Bless my dude
Hey, Great video, i have one question tho, it works on almost all resolutions but if i change it to a really low resolution it has way more distance between each swipe, somebody knows whats up? Great video tho!
Same Problem here
@@lappenjr.2506 Anyone found a solution to this?
can we get the panels you used for commercial use if yes can you make a google drive or something like that for them?
I only have 3 panels, and for some reason the swipe is insanely fast. It also does not stay on the next panel when swiping
Edit: it is because I am using screen space camera instead of overlay, Is there any way of fixing this apart from setting my canvas to overlay?
I have the same Problem, maybe you can use some ScreenTo-whatever function?
He explains how to not overstep panels at the 14:15 of the following video : th-cam.com/video/tCr_i5CVv_w/w-d-xo.html
I might be coming too late into this, but any ideas on how would I go about implementing BUT if at the start I swipe to the left, the last page appears through the left and so on? Like an infinite cycle, not a scroll back to the position of the desired, but that you can scroll infinitely? ie: you get to the last page, you scroll again and you get the first page, then the second and so on
How do you swipe on a y position? Nice tutorial btw!!
Hi. Thanks for the tutorial. How to stop scrolling to an empty page?
Found what i was looking for in your next video :) Thank you
th-cam.com/video/tCr_i5CVv_w/w-d-xo.html
Just paste this
public void OnDrag(PointerEventData data)
{
float difference = data.pressPosition.x - data.position.x;
if(currentPage == 1 && difference > 0 || currentPage != 1 && currentPage != totalPages|| currentPage == totalPages && difference < 0)
transform.position = panelLocation - new Vector3(difference, 0, 0);
}
Should I limit the scrolls with code or with collisions?
do you mean this fix? th-cam.com/video/tCr_i5CVv_w/w-d-xo.html
awsome thnx for this Tuto
but when at the first panel we swipe to right it doesent work
i saw this problem in your video too
what should we do?
Hi, I solved this problem. I can give some hint for you.
Good Luck :)
if(this.GetComponent().offsetMin.x > 0)
{
StartCoroutine(SmoothMove(transform.position, panelLocation, easing));
}
is there any way to implement it with "Screen-Space Camera"?
In the "CANVAS" object, change the "CANVAS" component "Render Mode" to "Screen Space - Overlay".
Soon I will start recording tutorials too! :)
very impressive...
but how do you set this up for different screen-sizes? Because the panels you set up in unity editor are not always the same size of the Screen.width :'(
You can recalculate the panels size in Awake function, then layout child components inside these panels using Group component or something like that
private void Awake()
{
for (int i = 0; i < transform.childCount; i++)
{
Transform child = transform.GetChild(i);
RectTransform childRect = child.GetComponent();
childRect.sizeDelta = new Vector2(Screen.width, Screen.height);
}
}
@@lcd11001 yep thanks, I actually already did what I need with just a bit of thinking. Some tutorials make us spoiled programmers sometimes 😅
@@ComputerOyyy Can you please share how you did this?
how did you set up this with code ? 00:37
How do I get a spectrum and c64 loading type screen on unity?
1:12 how to make this can anyone help me out pleaseeee
In the "CANVAS" object, change the "CANVAS" component "Render Mode" to "Screen Space - Overlay".
Soon I will start recording tutorials too! :)
@Tavint please start the tutorials I will watch them😃😄
Is it possible to make it deactive some objects when you swipe as in my menu there are pop ups on the side that show for certain things?
Do you know how to make this Level Manager resolution responsive? So that it works e.g. for smartphones and tablets?
And thanks for your tutorials! Keep going on like this ✌🏻👍🏻
Should work fine with smartphones and tablets (touch devices). Since it uses a canvas element, you can modify the settings on the canvas to make it responsive for different resolutions. Cheers
@@pressstart6864 It doesnt work for diffrent resolutions, because the "PanelHolder" is a gameObject, not a canvas. You cant make it a canvas because you wont be able swipe then.
I dont se any way to fix this issue, i think a diffrent Method is required.
@@lappenjr.2506 Did you find a fix for this?
Kind of. I remember that I made a workaround, to scale according to the Screen Aspect Ration from inside the script.
But its like stretching a Photo, it doesnt look good on Tablets...
I swipe left and its fine but when I swipe right, the panel falls down. I've tried a bunch of solutions but just can't seem to get it right. Help!!
Great Video, but i have a problem with swiping it doesnt swipe to the next pannel, could anyone help me with that problem?
I have the same problem with only 3 pannel
Edit: YOU HAVE TO CHANGE ON MIDDLE RIGHT ON UNITY THE NUMER OF PAGES YOU HAVE!!
Why not just use a Scroll View?
float percentage=(data.pressPosition.x - data.position.x)/Screen.width; //I did not get the point of dividing the equation by Screen.width???
I copy paste the code from your website and when i swipe it swipes hyper fast and allways jumps pack to first pannel ?
dont use Screen-Space Camera
@Can SOLEN public void OnEndDrag(PointerEventData data)
{
float percentage = (data.pressPosition.x - data.position.x) / Screen.width;
if (Mathf.Abs(percentage) >= percentThreshold)
{
Vector3 newLocation = panelLocation;
if (percentage > 0)
{
if (pageNum < maxPage)
{
pageNum++;
var test = Camera.main.ScreenToWorldPoint(new Vector3(-Screen.width / 2, 0, 0));
test = new Vector3(test.x, 0, 0);
newLocation += test;
}
}
else if (percentage < 0)
{
if (pageNum > 1)
{
pageNum--;
var test = Camera.main.ScreenToWorldPoint(new Vector3(Screen.width, 0, 0));
test = new Vector3(test.x * 2, 0, 0);
newLocation += test;
}
}
StartCoroutine(SmoothMove(transform.position, newLocation, easing));
panelLocation = newLocation;
}
else
{
transform.position = panelLocation;
}
}
Awsome tutorial. During playtesting i ran into a problem with the script. After reloading the scene I cant swipe between the panels anymore. Do you guys have any idea what might cause this problem?
Edit: I found out that Time.deltaTime does not increse anymore after the scene is reloaded but i cant think of any reason why it would not count up anylonger.
for me it stopped working because my timescale (Time.timescale) was set to 0 when i loaded the scene.
have a scroll view .... it is not working?
Why can't you just use the slider component?
You are a great teacher but please do not say Classes for Interfaces 1:55
Thank you
here is the code for not letting the user swipe past the bounds
// I'm doing a vertical style swipe from up to down.
private int _page = 0;
private int _upperPageBound= 1;
private int _lowerPageBound = 0;
// other code . . .
// inside OnEndDrag
if (percentage > 0 && page == _upperPageBound) { // swipe down, go to page above
newLocation += new Vector3(0,-Screen.height,0);
page--;
}
else if(percentage < 0 && page == _lowerPageBound ) { // swipe up, go to page below
newLocation += new Vector3(0, Screen.height, 0);
page ++;
}
I had screen size struggles so I made this.. parent every gameObject to each other and set the parents to 0. swipe menu is now responsive for me.
public GameObject[] items;
void Start()
{
items[0].transform.position += new Vector3(Screen.width ,0,0);
items[1].transform.position += new Vector3(Screen.width, 0, 0);
items[2].transform.position += new Vector3(Screen.width, 0, 0);
}
Can you please explain how you did this, it would be a big help!
I dont understand
@@gamingtotdemaxi mine might be a little different to his, but generally the same. ANSWER TO DIFFERENT SCREENS/ DYNAMIC SCREEN SIZES:
3 Main steps:>
1. Create a reference panel on unity, ie this is the panel that will always adapt to the size of the canvas automatically. Normally the very next panel canvas sees naturally does this
2. Create a script (attach it to your canvas), with the number of panels you are using as game objects ie : public GameObject referencePanel, panelOne, panelTwo, panelThree; etc
3. In Void start; Write the code: PanelOne.transform.position = referencePanel.position //this makes your panel go to the same position as the reference panel which is the precise size of the canvas and location
4. then write: PanelTwo.transform.position = new Vector3 (screen.width, screen.height/2); //This makes panel two move its X axis to the right by the exact size of the reference panel.
5. lastly, do the same things for each panel that you have. However, on the second code for your third panel, do - screen.width*2 and for your fourth panel, do screen.width*3 etc etc.
Here are a few things to keep an eye on:
1. Make sure that your pivot is set to the middle left side on each panel
2. Your first panel does not need to be moved, so it only needs to be set to the same position as the reference panel, so the second code is only applied to the panels outside the field of view
3. I know this could be simplified, i am still yet to simplify it, but this is what worked for me and i felt i had o share it asap
@@henrig8708 even if this is a simplified version, it worked for me, thanks!
damn, its fucking impossible to read code
No explanation how to start setting camera, create level buttons etc, impossible to follow up. Waste of my time.
Good at coding ,horrible at explaining
Great video though
Can someone teach me how to remove this Error "NullReferenceException: Object reference not set to an instance of an object" when I open a new Unity Progect every time?