[Released] PagedRect: Paging Solution for Unity UI

PagedRect: Paging Solution for Unity UI
​

PagedRect is a complete pagination solution for the Unity UI.

PagedRect can easily be used to:
- Create multi-page tutorials
- Create multi-page menus
- Create image sliders
- Create wizards

Web GL Demo

Features:
- Full source code included
- Automatic button generation
- Supports Horizontal and Vertical pagination
- Navigate using on-screen buttons, keyboard input and/or swipe gestures
- 3 optional animation types (Slide Horizontal, Slide Vertical, Fade) or none
- Optional First/Last buttons
- Optional Previous/Next buttons
- Easily enable or disable buttons as required (useful for wizards or tutorials)
- Easily switch between pages in the editor
- Add pages easily in the editor, or dynamically using code at runtime
- Use page numbers (automatically generated) or page titles on buttons (both optional)
- Optional: automatically move to the next page after a specified amount of time (useful for image sliders)

API Documentation
Asset Store

Current Version: 1.01 [v1.1 Submitted to Asset Store]

Features for v1.1:
- Support for optional ScrollRect Integration (See Slider - ScrollRect Example)

Requirements:
- Unity 5.3.1 or higher

Please feel free to get in touch with me if you have any issues, comments, or suggestions.

​

 

Version 1.01 has been submitted to the asset store!
It should be live within the next few days - I will update this post when that happens.

New in v1.01:
- Added support for Scroll Wheel Input
- 'Loop Endlessly' now works regardless of how you reach the next/previous page (instead of only when using automation)
- Added a new Fantasy-Style "Character Creation" example
- Bug fixes:
- Fixed an issue with nested PagedRects
- Fixed a bug with the Fade Animation when rapidly changing pages

New Example


Player portraits courtesy of http://opengameart.org/
The 'Stats' page only becomes available once the user has entered a name and selected a class.
The Portrait selector is a nested PagedRect.


The 'Create' page only becomes available once the user has allocated all of the stat points
As an experiment, the stat input fields are nested PagedRect objects. While not initially designed as an input field, it wasn't too hard to create a functional spinner input field using a PagedRect.

Feel free to use the art from the Character Creation example (buttons, panels, etc.) in your project. The player portraits are subject to a Creative Commons License. They can be found at http://opengameart.org/content/flare-portrait-pack-number-four.

 

V1.01 is now live and available on the asset store!

Please feel free to leave any feedback, comments, or suggestions

 

V1.1 is now live and available on the asset store!

As always, please feel free to leave any feedback

 

V1.12 is now live and available on the asset store!

This version brings a few bug fixes, mostly related to the scaling and positioning of pages within the ScrollRect when it is re-sized or when new pages are added at run-time.

 

Good update! Great Asset

 

Thank you

 

V1.13 has been submitted to the asset store, and should be available within the next few days.

This version brings a few additional bug fixes to the scrollrect positioning code, as well as a fix for an issue introduced in v1.1 where the PagedRect would play the incorrect page enter/exit animations.

The updated demo is available now.

Update: V1.13 is now live on the asset store!

 

V1.13 is now live on the asset store!

 

Hi DaceZA

I really like PagedRect, but I have a problem when I try to add content to the pages. I use PagedRect to create a menu with three pages. But the content is only visible on the last page. What am I doing wrong?



Marko

 

Hi Bartolomeus,

Which version of PagedRect are you using? (The latest, v1.15 has a bug fix for an issue with vertical scrolling, although I'm not sure if is the same issue you're having).

If you're already using the latest version, or if updating doesn't solve the issue, could you please send me an example of the problem so I can debug it?

Thanks,
Dace

 

Hi DaceZA, thanks for your help. It works fine now!

Marko

 

You're welcome I'm glad it's working now.

 

Is it possible to control the distance between pages? Like making them overlap or create gap in between?

 

Hi Carnivash,

Assuming we're talking about the scrollrect implementation, the positioning of the pages is controlled by a Unity Layout Group (Horizontal or Vertical depending on the template used). You can increase the space between pages by modifying that Layout Group's Spacing property. (The LayoutGroup is on the PagedRect -> Viewport -> Content object in the PagedRect structure). If you do adjust this property at runtime, you may need to force PagedRect to re-center on the current page (via PagedRect.CenterScrollRectOnCurrentPage()).

As for allowing pages to overlap, I'd say that with the current implementation, it probably wouldn't work (I wasn't able to provide negative values for the Layout Group's Spacing property), but it may be possible to create a custom Layout Group which accepts negative values for spacing, which should do the trick. Is that something you'd like me to look into for future versions of PagedRect?

 

I understand, thank you for your explanation.
I have a specific layout that needs to overlap scroll list itens, i never needed this feature before, but i think it would be nice to have this kind of control.

 

Okay, I'll look into it and see what I come up with

 

Hi Carnivash,

I've had some luck implementing this - surprisingly it turned out to be a lot easier than I expected. Unity doesn't allow you to specify negative values for the Spacing property of a layout group in the editor - but it turns out that you can actually do it just fine in code (I'm glad I thought to check this out before building an entirely new layout group).

As such, I've put together a new version of PagedRect (v1.17) which has a 'SpaceBetweenPages' property - this property accepts both positive and negative values, and the value provided will be applied directly to the layout group. I've tested it and it seems to work fine. I'll be submitting it to the Asset Store today - if you'd like to get it now without having to wait for the Asset Store to approve the update, please send an email to support@digital-legacy.co.za with your invoice number and I'll get it to you asap.

Hope this helps!

 

PagedRect v1.17 is now available from the Unity Asset Store!

Change notes for v1.16 & v1.17:

v1.17
-----------------------------------------------------------------------------
- Fixed a bug where sometimes pages in a ScrollRect implementation wouldn't
be sized correctly initially
- Added the 'SpaceBetweenPages' property

v1.16
-----------------------------------------------------------------------------
- Minor bug fix
- A few minor internal adjustments to improve compatibility with XmlLayout (sold separately)

 

Hey,

great asset, fantastic addition to XmlLayout. I have a problem tho: I want to use Page Previous - Horizontal but with swipe on mobile, I enabled it in the inspector but the swipe does not work. Help needed

 

Hi slimshader,

Sorry about that - by default, PagedRect ignores the "Use Swipe Input" setting when using a ScrollRect, as the ScrollRect code handles this behaviour - however, the Page Previews functionality works a little bit differently to the rest (despite using a ScrollRect), so in that case using the swipe input setting makes sense - I'll make sure the next version of PagedRect has this fixed.

In the meantime, you can implement the change easily by opening UI/Pagination/PagedRect/PagedRect.Unity.cs:

Line 97, in the Start() method:

Code (CSharp):

1. if (UseSwipeInput && !UsingScrollRect)
2. {

Change this to:

Code (CSharp):

1. if (UseSwipeInput && (!UsingScrollRect || ShowPagePreviews))
2. {

Hope this helps!

 

Works like a charm, thanks!

 

You're welcome, glad it's working now

 

Sorry but I have another problem to report: I imported XmlLayout and PagedRect to a fresh project. I then added new XmlLayout to the scene and copied <PagedRect> example makrup straight from the docs. This correctly created the layout in the scene but as soon as I hit Play button unity crashes each time. I tried with unity 5.4.3, and 5.5 same effect every time

Edit: most common reason for Unity crashes from my exp is stack overflows due to recursion. Just an idea tho.

 

Hi,

Sorry about that - I've just tested this and I've been able to replicate the problem. I'll find a solution asap and get back to you.

 

I think I've managed to fix it - I've PM'd you updated versions of PagedRect and XmlLayout.

Hopefully they should sort it out for you!

 

I just purchased your asset. That's perfect. It save me so much time.

I was just wondering if there is a way to add our own animation for enter/exit pages?

Thanks

 

Hi Simon,

Thanks for the purchase!

You can use your own animations, although you will probably need to modify PagedRect slightly to do so. The easiest approach would probably be to edit/overwrite one of the existing animations and use that (if that works for you). If you do so, just be careful not to overwrite your changed version in future when updating PagedRect from the Asset Store. The animations and their controller are stored in UI/Pagination/Resources/Animation)

You could also substitute the 'Animation Controller Template' property on the PagedRect with your own version - if you use the same animation names as the default animations provided by PagedRect then it should work for you straight away. If you use your own animation names, then you will need to modify the eAnimationType enum used to specify which animation types are available (located in UI/Pagination/PagedRect/PagedRect.Enums.cs).

Also please note that if you are using a ScrollRect based PagedRect (such as those used by the ScrollRect and Page Preview prefabs, then animations are not used [the ScrollRect is manipulated instead]).

 

@DaceZA Hello,

i bought the asset today, i need a solution for an app with multiple pages, with a possibility to swipe between them on mobile. in the demo i noticed that the swipe didnt worked quit as expected: for example, in the "pagination examples", in the "nested scrollRect" section, if i swipe up / down, it goes to the next page instead (swipe up or down and then goes to the next page). this bug can be seen in the web version also.
How can I fix this?

Thanks,
Haim

 

Hi Haim,

I've sent you a PM with a fixed version of PagedRect that should hopefully sort this out.

 

Hello @DaceZA

1. I have some UI that has 3D objects embedded in it. Does the scaling for Page Previews scale 3D objects as well?
2. Is there a way to set the snap sensitivity? So if the player wants to scroll through multiple pages at the same time by swiping hard, is that possible?

Thanks.

 

Hi!

Thanks for your interest!

1. I haven't tested embedded 3D objects, so I can't be 100% sure, but I think that it should work. The Page Previews scaling code manipulates the pages' RectTransform.localScale property, which should be carried over to any child objects, embedded or otherwise. At the moment, the code uses a Vector2 value for the scaling (so technically it only scales in 2 dimensions), but if necessary, I could modify it to use a Vector3 instead which should allow it to scale in 3 dimensions instead.

2. That depends on the functionality you are using - the standard ScrollRect-based PagedRect templates do allow you to do this, but the Page Previews ones unfortunately do not, as their scrolling functionality is necessarily rather complex. However, if you need such functionality, it could be added (e.g. I could implement a drag threshold which, if exceeded moves two pages instead of one, or possibly more depending on how far the threshold has been exceeded. This should be fairly easy to add, my only concern is that it might be confusing to users, e.g. they'd need to know how far to swipe to get to the page they want).

 

Hi!
Your product really awesome! In my app, i have tab mode but many tabs (10 tab), how can i scroll tabs like scroll list (Horizontal direction) ?
And can i nested another tab layout in one page of tab layout?

 

Hi!

Thanks for purchasing PagedRect!

There are two ways you can handle this sort of behaviour - the first is to use PagedRects' 'Maximum Number of Buttons To Show' property, which restricts the number of Pagination Buttons that are visible at once (in this case, the buttons are the tabs). PagedRect will then move through the available tabs as the user moves through the pages.

The alternative is a little bit more complicated, but you can also add a ScrollView to the Pagination section which controls the buttons (I've sent you an example showing this in action). To create the example, I:
1) Added a new 'Tabs - Horizontal - ScrollRect' PagedRect to the scene
2) Duplicated the pages and modified them for a total of ten tabs
3) Added a new 'ScrollView' to the Pagination object of the PagedRect, then deleted its Vertical Scrollbar and disabled the Horizontal one (you can re-enable if if you wish).
4) Set the elasticity of the ScrollRect to 0 (this is up to you, I thought it seemed better this way)
5) Increased the 'Scroll Sensitivity' of the ScrollRect to 50 (seemed better this way)
6) Disabled 'Inertia'
7) I then moved all of the button objects that were children of the 'Pagination' object to the ScrollRect's 'Content' object
8) I then went to the PagedRect inspector, and under the 'References' section, I set the 'Pagination' reference to the ScrollRect's 'Content' object instead
9) I then selected all of the existing buttons (and the templates), and set their 'LayoutElement -> Preferred Width' to '200' (you can use whatever value you wish)
10) Then back to the ScrollRect's 'Content' object:
a) Added a 'HorizontalLayoutGroup' component, and disabled 'Child Force Expand Width' (so as to respect the button's PreferredWidth values)
b) Added a 'ContentSizeFitter' component and set it to use 'Preferred Fit' for the 'Horizontal Fit' value
c) I also changed the RectTransform's 'Anchor Preset' to Top, Center, and not stretched
11) Lastly, I went to the ScrollRect's 'Viewport' object and set it's 'Right' and 'Bottom' RectTransform values to '0' so as not to leave space for the Scrollbars we aren't using (if you do use a horizontal scrollbar, then you should probably leave some space for it)

I know that's quite a few steps, but it's easier than it sounds

I hope this helps!

PS: Oh, and yes, you can nest PagedRects within a Page if you wish, I've done so in a few of my projects and had no issues doing so.

 

Thanks so much for quickly and very detail answer! Your support is the best!

 

I just purchased this plugin. I'm very new to Unity (and I'm sorry for the newbie question)...but how do I use this with a List of ScriptableObjects?

 

Hi DaceZA,
Can I place GIF images, tutorial video on a page?
Does it adjust pages automatically for different aspect ratios?

Pls. provide thorough tutorial with a good example. NurfaceGames' tutorial is cursory.

Thanks.

 

Hi, just brought the plugin...looks great for what I need but isn't working how I thought it would.
I'm wanting to use the Nested ScrollRect but both with the example scene and when I make my own...I can't get the page to scroll vertical, only horizontal...am I doing something wrong or has it broken in Unity 5.6.1f1?

Also, I'm wanting to overlay my own icon menu bar across the top to control the navigation and other things....is this possible? When I tried to put the menu above the Paged Rect element the horizontal scrolling wouldn't work.

Your help would be appreciated.
Thanks

 

Hi does it work on android and ios? And can I add my own images? Thanks

 

Hi,

Sorry for the massively delayed responses here - it seems that I haven't been receiving notifications of new posts to this thread for a while. Sorry everyone!

@jdxinteractive
While I'm not entirely certain I understand the question, you can dynamically add pages at runtime using the AddPage(Page newPage) and/or AddPageUsingTemplate() methods, which you can use to create a list of pages from a list of data.

@xchintanjoshi
a) Anything that you can add to the Unity UI can be added to pages within a PagedRect. That said, Unity doesn't natively provide any GUI elements that can be used to play GIF or video, but perhaps you can find a solution for that on the asset store.
b) PagedRect is positioning and sizing is handled the same way as other Unity UI elements (using a RectTransform) and will automatically be resized/etc. by the Unity UI as necessary based on its RectTransform configuration. You can also use additional Unity UI components such as AspectRatioFitter to control this behaviour.

@Hayzie
a) Sorry about that, that was a bug - it was fixed a few weeks back and it should be working fine for you now provided you are using the latest version of PagedRect.
b) You can overlay elements above PagedRect, just be certain that they do not block raycasts ('Image -> Raycast Target' should be false). Even fully transparent images/etc. can block raycasts, preventing mouse/pointer events from passing through them. Your buttons/icons should block raycasts, but anything else (such as the menu bar) should not, unless it is not directly over the PagedRect.

@todo
Yes, it does work on Android and iOS. You can add your own images, yes - anything which you could add in the Unity UI can be added to PagedRect pages.

Sorry again for the massively delayed responses everyone

Please be advised that support is always available from support@digital-legacy.co.za

 

Wow the asset is amazing but seriously something going on the Garbage collector really slowing down the FPS. Would be a AAA asset if this could be improved.

Edit: I also own XMLlayout and experiencing the same garbage collection and FPS slow down.

 

Hi Rocki,

I haven't been able to replicate any garbage collection issues with either product - which version of Unity, PagedRect, and XmlLayout are you using? Do you experience these issues with the example scenes? And are there any warning messages?

 

Seems to be that the problem is on mobile. IOS for now, will be testing on android soon. Unity 2017.1.p4

 

Hi, I'm enjoying this asset very much. Really great and usefull for my project right now. Would be lost without it.

I have one urgent question though. I would like to make a button on page 3 to jump to a different scene. That is no problem, but how can I make a button on that second scene and jump back to page 3 in the Pagedrect scene. Is that possible in Unity?

 

Hi Olav3d,

You should be able to achieve this, but seeing as the method call will have to cross scenes, you will most likely need a manager class of some kind, basically, a Unity component which is either static, persists between scenes, or is present in a scene which is always loaded (when using multiple scenes).

Perhaps something like this:

(This should be attached to a root-level GameObject with no other components)

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. public class PagedRectCrossSceneCall: MonoBehaviour {
5.  
6.     void Start()
7.     {      
8.         // don't destroy this object between scenes
9.         DontDestroyOnLoad(this.gameObject);
10.     }
11.  
12.     // call this method with your button click
13.     public void OnButtonClick()
14.     {
15.         // Replace this with the name of your scene / desired page number
16.         // (I just tested with PagedRect's example scene)
17.         StartCoroutine(GoToSceneAndPage("Pagination Examples", 3));
18.     }
19.  
20.     AsyncOperation sceneLoadOperation;
21.     IEnumerator GoToSceneAndPage(string sceneName, int pageNumber)
22.     {
23.         sceneLoadOperation = UnityEngine.SceneManagement.SceneManager.LoadSceneAsync(sceneName);
24.         // wait until the scene has finished loading
25.         while (!sceneLoadOperation.isDone) yield return null;
26.  
27.         // find the PagedRect object in the new scene; you can also search by tags or names
28.         // if you have multiple PagedRect objects present
29.         var pagedRect = GameObject.FindObjectOfType<UI.Pagination.PagedRect>();
30.         pagedRect.SetCurrentPage(pageNumber);
31.     }
32. }

I hope this helps!

 

Many Thanks for your help!!
I'll give it a try and let you know.
Thanks again!

 

You're welcome

 

Hi, I've recently started using the plugin and it's been really easy to use and great so far.

I have one question;
Is there a way to set images for the buttons, specified by the page?

I know I can probably do this myself, but I wanted to know if there's a recommended way to do it as it seems like a fairly common thing.

 

Hi there,

Sorry, no there isn't a built-in way to do that at the moment, the images can be set specifically for the current page, other pages, and disabled pages, but there is no way to set images for a specific page. Perhaps this is something I could look into adding in the future.

 

Thanks for the reply.

I'm currently thinking more along the lines of an icon instead of text within the button. Not necessarily the button image itself.