Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: eormo on February 09, 2016, 06:42:35 AM

Title: Scroll view page bullets?
Post by: eormo on February 09, 2016, 06:42:35 AM
Hi,

I have been following this tutorial https://www.youtube.com/watch?v=UK3aMHRfgcw to create a scroll view and I was wondering if it could be possible to add page bullets, just like in the picture below?

(http://visionwidget.com/images/2015/0207/SliderFS_Simple_FullScreen_Page_Slider_Plugin_with_jQuery.jpg)

I've managed, thanks to this tutorial https://www.youtube.com/watch?v=OsnyJNbqYXo, to create bullets over the scroll view but there is a lag as they are not directly linked to each other.

Thank you!
Title: Re: Scroll view page bullets?
Post by: ArenMook on February 10, 2016, 05:16:05 PM
Adding page bullets would be a trivial matter. Have a look inside the UICenterOnClick class. It's a script that can be attached to children of a scroll view making it possible to click on them in order to make the scroll view centered on that object. In your case you want to click on what are essentially buttons that would then make the scroll view center on a specific point within it -- which is nearly the same thing. Only instead of choosing the object you clicked on in order to determine the position, your position would be pre-determined.

Just use SpringPanel.Begin to tween the scroll view to that pre-determined position (for example 25%, 50% 75% etc).
Title: Re: Scroll view page bullets?
Post by: eormo on February 13, 2016, 05:46:33 AM
Thank you very much for your reply!

Unfortunately, this is not what I am looking for but that must be my fault as I am french, I'll try to explain better, sorry!

Basically, I have three child in my scroll view which swipe from right to left with the touch screen. I've managed to center them by adding the class UICenterOnChild and it is working perfectly.

Now I want to add three bullets, not necessarily clickable, underneath to show the user where he is in the scroll view. For example, when the scroll view show the first child, the first button is black and the others are white, etc...

Thanks again for reading and replied to me!

EDIT After hours of research, I found this : http://befool.co.jp/blog/ayumegu/unity-study-ngui-ScrollBanner/ and the script seems to do the thing with the bullets. Problem is that, from what I understand, the children are scrolling automatically, like a slideshow...
Title: Re: Scroll view page bullets?
Post by: ArenMook on February 15, 2016, 02:29:08 PM
I understood you, and my advice still stands. Figuring out which object you're centered on is a matter of checking distance between the center of the scroll view's panel and each of the child objects. The closest distance wins. Set the "active" bullet based on that. Can make it a toggle if you like. Then when you click on any button, use SpringPanel.Begin to move the panel to the appropriate position as I suggested.

Make sure your bullets are not children of your scroll view. They should be on a separate panel.
Title: Re: Scroll view page bullets?
Post by: devomage on February 15, 2016, 07:50:43 PM
- scrollview
  - grid
    - sprite (page 1)
    - sprite (page 2)
    - sprite (page 3)
- panel (bullets)

adding UICenterOnChild to "grid" seems to apply the effect you desire...  attached is a demo project and script.

the buttons move the scrollview to the desired page and (for reference) I used "OnStoppedMoving" to calculate what page is being displayed!

  1. using System;
  2. using UnityEngine;
  3.  
  4. public class NGUI_Scrollview_PageBullets : MonoBehaviour
  5. {
  6.     public UIScrollView scrollview;
  7.    
  8.     private SpringPanel springpanel = null;
  9.  
  10.     void Start()
  11.     {
  12.         springpanel = scrollview.GetComponent<SpringPanel>();
  13.  
  14.         if (springpanel == null) scrollview.gameObject.AddComponent<SpringPanel>();
  15.  
  16.         scrollview.onStoppedMoving += OnStoppedMoving;
  17.     }
  18.  
  19.     private void OnStoppedMoving()
  20.     {
  21.         //note:  as suggested above - it is a better idea to use the scrollview's panel data (rather than the springpanel data) to calculate what object is visible.
  22.  
  23.         int pagewidth = 320;
  24.         int pageposition = (int)springpanel.target.x;
  25.         int page = Math.Abs(pageposition / pagewidth) + 1;
  26.        
  27.         print("page " + (page));
  28.     }
  29.  
  30.     public void OnClick_Button1()
  31.     {
  32.         springpanel.target = new Vector3(0, 0, 0);
  33.  
  34.         springpanel.enabled = true;
  35.     }
  36.  
  37.     public void OnClick_Button2()
  38.     {
  39.         springpanel.target = new Vector3(-320, 0, 0);
  40.  
  41.         springpanel.enabled = true;
  42.     }
  43.  
  44.     public void OnClick_Button3()
  45.     {
  46.         springpanel.target = new Vector3(-640, 0, 0);
  47.  
  48.         springpanel.enabled = true;
  49.     }
  50. }
  51.  
Title: Re: Scroll view page bullets?
Post by: eormo on February 16, 2016, 08:34:34 AM
Thank you so so much devomage for the working example and script! My scroll view and buttons are now perfectly linked :)

I just have one slight issue now : I am using 2D sprite as buttons and attached the button script to them so now I am able to change the sprite on hover, pressed, etc... but how can I change it depending on the "page" I am currently on, like an indicator?
Title: Re: Scroll view page bullets?
Post by: eormo on February 18, 2016, 02:11:38 PM
I have managed to change the sprite of the buttons but on click only, so when I swipe it doesn't change, obviously.

I am not a programmer at all, and I've certainly achieved the effect the wrong way, but below is the script I am using (3 different scripts, one for each button) I got it working with one script only, following devomage's script :

  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. public class B1 : MonoBehaviour {
  5.  
  6.         public GameObject bullet1;
  7.         public GameObject bullet2;
  8.         public GameObject bullet3;
  9.  
  10.         // Use this for initialization
  11.         void Start () {
  12.                 NGUITools.SetActive(bullet1, true);
  13.                 NGUITools.SetActive(bullet2, false);
  14.                 NGUITools.SetActive(bullet3, false);
  15.         }
  16.        
  17.         // Update is called once per frame
  18.         public void OnClick_button1 () {
  19.                 NGUITools.SetActive(bullet1, true);
  20.                 NGUITools.SetActive(bullet2, false);
  21.                 NGUITools.SetActive(bullet3, false);
  22.         }
  23.  
  24.         public void OnClick_button2 () {
  25.                 NGUITools.SetActive(bullet1, false);
  26.                 NGUITools.SetActive(bullet2, true);
  27.                 NGUITools.SetActive(bullet3, false);
  28.         }
  29.  
  30.         public void OnClick_button3 () {
  31.                 NGUITools.SetActive(bullet1, false);
  32.                 NGUITools.SetActive(bullet2, false);
  33.                 NGUITools.SetActive(bullet3, true);
  34.         }
  35. }

I get that I need to call the springpanel.target.x distance from a button to the scroll view instead of an onclick but I failed at changing my code to do so...

Thanks!
Title: Re: Scroll view page bullets?
Post by: devomage on February 18, 2016, 05:37:54 PM
I'm not clear on the problem.  You are trying to change the texture of a button when the scrollview is swiped?

You can change the texture of the button's UISprite:
  1. button_1.GetComponent<UISprite>().spriteName = "Checkmark";

Updated demo project attached.
Title: Re: Scroll view page bullets?
Post by: eormo on February 19, 2016, 02:09:47 PM
Sorry for the confusion! That's what I was trying to do but with a 2DUI sprite, a gameobject basically, instead of a button.

I've modified your code and so now it's working perfectly, thank you so much for your help!