Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Alex on August 01, 2012, 11:14:58 AM

Title: Drag Panel Page
Post by: Alex on August 01, 2012, 11:14:58 AM
Hi,
In my project i build a level selection so the players
can choose a specific level.
the levels is arranged in horizontal as follow:
1 2 3 10 11 12 19 20 21 ...
4 5 6 13 14 15 22 23 24 ...
7 8 9 16 17 18 25 26 27 ...

The hirarchy of my project is as follow:
*UI Root
**Camera
***Anchor
***Panel
****DragPanel  (UIPanel) and (UIDraggable Panel)
*****Items  (UIDrag Panel Contents)
******Item1
******Item2
******.....   

How can i create paging to the levels so when the user is
drag left/right he can only see the correct groups of levels
for example:
10 11 12
13 14 15
16 17 18

Thanks.
Title: Re: Drag Panel Page
Post by: ArenMook on August 01, 2012, 11:17:10 AM
This may help:
http://www.tasharen.com/forum/index.php?topic=1052.msg5614#msg5614

The idea for what you're trying to do is the same, except that instead of OnClick you would be reacting to OnPress(false).
Title: Re: Drag Panel Page
Post by: Alex on August 01, 2012, 01:12:28 PM
Hi,

Should i attach the "CenterOnObject" script to every items?
if so then i have a little problem since my items is generated on the fly.
any suggestions please?
Title: Re: Drag Panel Page
Post by: ArenMook on August 01, 2012, 04:05:00 PM
What is that a problem? It's just one extra line of code to add that script. Ideally you'd be doing this on a prefab, once.

The script needs to be on everything that has a collider that you want to react this way.
Title: Re: Drag Panel Page
Post by: Alex on August 02, 2012, 05:54:26 AM
Hi,
I've attached the script to my Item prefab but it's not working.
i also set a reference to the dragpanel.
help please.
Title: Re: Drag Panel Page
Post by: ArenMook on August 02, 2012, 08:53:47 AM
The script example I posted there responds to OnClick(), so when you click on an item, assuming that item has a collider, it will move the draggable panel to center it on that object.
Title: Re: Drag Panel Page
Post by: Alex on August 02, 2012, 11:10:48 AM
Hi,
This is the script that i attach to the items:
public class CenterOnObject : MonoBehaviour
{
   public UIDraggablePanel dragPanel;

    void OnPress( bool state )
    {
      if( state==false ){
           Vector3 newPos = dragPanel.transform.worldToLocalMatrix.MultiplyPoint3x4(transform.position);
           SpringPanel.Begin(dragPanel.gameObject, -newPos, 8f);
      }
    }
}

but it's not work.
all i need is to constraint the draggable panel to some positions so it will show
the groups of levels in reasonable way.
help please.
Title: Re: Drag Panel Page
Post by: ArenMook on August 02, 2012, 11:27:16 AM
Does it work with the original OnClick? If not, then you're missing something -- such as a collider on the object you're clicking. Add Debug.Log() statements to print something when you get OnPress / OnClick events to make sure you actually get them.
Title: Re: Drag Panel Page
Post by: Alex on August 02, 2012, 02:58:48 PM
Hi,
Yes i recieve OnClick and OnPress events but i don't know why it's not working.
The regular drag is working and i can select individual item to launch level but i can't force the drag panel to stop at some positions when the user release the swipe.
Any idea?
Title: Re: Drag Panel Page
Post by: ArenMook on August 02, 2012, 03:24:08 PM
Well, all I can suggest is watch that video I created that explains that script and see if you've missed something obvious.
Title: Re: Drag Panel Page
Post by: Alex on August 03, 2012, 04:34:00 AM
I saw the video and i do exactly the same but still not working.
i think that this feature should be in the drag panel itself, for example you can
add a public Vector3D in the drag panel so the user can set all the needed positions to be clamp to
while dragging.this feature will make it much easy and safe time for people messing with the component.
after all why we buy components? not to make things faster?
i find myself mess with this issue to long and it's not worth it!
Title: Re: Drag Panel Page
Post by: ArenMook on August 03, 2012, 05:10:55 PM
If you find yourself spending too much time trying to get something to work, then the obvious thing to do is to skip it until you are more familiar with the system. I'll see if I can find the time to sneak in an example with the next update.
Title: Re: Drag Panel Page
Post by: Alex on August 03, 2012, 11:39:19 PM
1. I purchased this component more then a half year ago.
2. I'm really sure that noone want to spend their time trying to figure out how to do something in the component that they buy that should and expected from this component to do.
3. BE NICE RESPECT YOUR CUSTOMER AND SMILE!

Waiting for solution....
Title: Re: Drag Panel Page
Post by: Alex on August 05, 2012, 01:57:56 PM
Hi,
How long should i wait until a paging feature will be added to the component?
can you estimate the time?

Title: Re: Drag Panel Page
Post by: ArenMook on August 05, 2012, 04:01:31 PM
It's already out.

http://www.tasharen.com/ngui/ex7.html
Title: Re: Drag Panel Page
Post by: Alex on August 06, 2012, 02:49:39 AM
Hi again,
I update my ngui to the last version.
can you tell me please the steps that i need to take in order to make it work?
Thanks
Title: Re: Drag Panel Page
Post by: ArenMook on August 06, 2012, 01:38:25 PM
All you need to do is attach the script you see on the UIGrid object in that example. I tried to keep it simple. :)
Title: Re: Drag Panel Page
Post by: Alex on August 07, 2012, 05:12:24 AM
Hi again,
I think you don't understand what i'm trying to achieve.
let me explain again.
take a look at this picture:
https://dl.dropbox.com/u/65967478/Level%20Selection.png

this is a level selection system.
the numbers represent the level numbers.
the user press anyware inside the pink frame and start dragging.
the pink frame is what the user can see so the interaction is made in this frame.
the numbers is scroll left/right when the user is dragging so if the user
want to play some level he need to drag untill he see its level come inside the frame.
all this work fine for me at this point.
the problem is this:
When the user release his finger, i want the numbers to be in reasonable present in the pink frame(what the user see).
so for example PHASE 1 is the correct way but PHASE 2 is really bad.
When the user release his finger i want the group numbers to be in the correct view.
can you see the problem?

Thanks.
Title: Re: Drag Panel Page
Post by: ArenMook on August 07, 2012, 12:24:08 PM
I understand what you're trying to achieve.

What you need to do is group widgets a certain way. Instead of having ALL your widgets be children of UIGrid, you need to group with into "pages". For example, first "page"  is a game object underneath your UIGrid, called "Page 1". Its children are 1, 2, 3, 4, 5, 6, 7, 8, 9. Second page, game object called "Page 2", and its children are 10, 11, 12, 13, 14, 15, 16, 17, 18.

Each "Page" needs to have its position be directly in the middle of the group of widgets.
Title: Re: Drag Panel Page
Post by: Alex on August 07, 2012, 01:42:17 PM
Hi,
This is very very bad for me really.
why there is no simple way to do this for example to add some functionality to the dragable panel
with constraint vectors so te user set in which vectors positions the whole window should be clamp
upon finger release?
this is a much better way to do it.
i can't think of changing my project now it's ready to publish i just need to solve this issue.
please do something about it.
this feature will safe time and will make ngui much better.

Thanks
Title: Re: Drag Panel Page
Post by: ArenMook on August 08, 2012, 01:28:47 PM
How shall I put this lightly...

I'm not here to do your work for you. The changes I add to NGUI affect thousands of developers, and if I was to do specific examples for every single developer that needed them, I'd still be doing that a hundred years from now.

I answered your questions, I created an example for you, but what you seem to want is for me to do the work for you, and I'm sorry -- I have no time for that. Use your own development skills and modify what you need to get the result you want.
Title: Re: Drag Panel Page
Post by: ArenMook on August 08, 2012, 05:42:00 PM
The only thing people will see from reading this post is how you seem to assume that you buying NGUI means that you own my development time and get to demand things of me and tell me what to do. Throughout this entire thread, I've been nothing if not polite with you, but you insist on being a dick.

Buying a package on the asset store is not automatic I.W.I.N. button, as you seem to assume. Each package makes your workload less -- but it does not -- and cannot -- eliminate it entirely.

As for EZGUI... if you found NGUI to be too difficult for you, I've got news for you...

But enjoy it. :)

I'm sure Brady will be happy to do all your work for you.
Title: Re: Drag Panel Page
Post by: Nicki on August 09, 2012, 07:13:13 AM
Hey Aren, I'm making this new gui for a game I'm working on. Could you do it for free please, that would be great.
 ::)

Alex, instead of demanding answers, try doing some programming.

Make container GameObjects that represent a Column in your grid, add the individual level buttons to the containers, that way you can easily populate a UIGrid with your levels.

Then you can make the draggablepanel center on a container object with the tool s you've been presented with.
Title: Re: Drag Panel Page
Post by: Alex on August 10, 2012, 05:21:37 PM
Hi,
I did some changes to my gui project.
here is the code that build the prefab items:
  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. public class CLevelSelectionBuilder : MonoBehaviour
  5. {
  6.        
  7.         public int totalLevels;
  8.         public GameObject itemsParent;  //the parent of all itemLevel(s)       
  9.         public GameObject itemLevelPrefab;      //itemLevel
  10.        
  11.         public GameObject page1;
  12.         public GameObject page2;
  13.         public GameObject page3;
  14.         public GameObject page4;
  15.        
  16.         void Start ()
  17.         {
  18.                 CUtility.ValidateNextLevel(); //make sure the relevant level is opened.
  19.                 totalLevels = CUtility.totalLevels;
  20.                 CreateItems( new Vector3(-345f,188f,0f),totalLevels);
  21.         }
  22.        
  23.         void CreateItems( Vector3 startPivot, int totalLevels )
  24.         {
  25.                 int maxPerSet = 12;
  26.                 int col = 4;
  27.                
  28.                 Vector3 pivot = startPivot;
  29.                 Vector3 currentPivot = startPivot;
  30.                 //int curRowIndex = 1;
  31.                
  32.                 for( int i=1;i<=totalLevels;i++){
  33.                         if( i % maxPerSet == 0 ){
  34.                                 //set pivot    
  35.                                 CreateItem( i, currentPivot);
  36.                                 pivot = new Vector3( currentPivot.x+235f, pivot.y,pivot.z );
  37.                                 currentPivot = pivot;
  38.                         }else if( i % col == 0 ){
  39.                                 CreateItem( i, currentPivot );
  40.                                 currentPivot = new Vector3( pivot.x,currentPivot.y-213f,currentPivot.z);
  41.                         }else{
  42.                                 //set item
  43.                                 CreateItem( i, currentPivot );
  44.                                 currentPivot = new Vector3( currentPivot.x + 235,currentPivot.y,currentPivot.z);
  45.                         }
  46.                        
  47.                 }
  48.         }
  49.        
  50.         private void CreateItem( int pLevelNum,Vector3 itemPosition )
  51.         {
  52.                 GameObject page = null;
  53.                
  54.                 if( pLevelNum>0 && pLevelNum <=12 )
  55.                         page = page1;
  56.  
  57.                 if( pLevelNum>12 && pLevelNum <=24 )
  58.                         page = page2;
  59.  
  60.                 if( pLevelNum>24 && pLevelNum <=36 )
  61.                         page = page3;
  62.  
  63.                 if( pLevelNum>36 && pLevelNum <=48 )
  64.                         page = page4;
  65.  
  66.                 GameObject go = NGUITools.AddChild( page,itemLevelPrefab );
  67.                 go.transform.localPosition = itemPosition;
  68.                 ILevelItem iitem = (ILevelItem)go.GetComponent(typeof(ILevelItem));
  69.                 if( iitem!=null )
  70.                         iitem.SetItem( pLevelNum );
  71.                
  72.                 go.AddComponent(typeof(UIDragPanelContents));
  73.                
  74.         }
  75. }
  76.  

and here is how it look in unity:
https://dl.dropbox.com/u/65967478/levelSelect.png

The problem:
I start drag the panel to the left to scroll for group 2 ( level 13-24 ),when i release
the mouse,it return to page 1.
maybe it can help: page1...4 is in the same position at the build time( position 0,0,0 )
but all items are arranged in their places along the horizontal and vertical.
each item is added to its correct parent page.

Any idea what i'm missing here?

Thanks
Title: Re: Drag Panel Page
Post by: ArenMook on August 10, 2012, 06:22:05 PM
The last part is your problem -- all your pages are in the same position (0, 0, 0). You need them to be offset from each other instead. For example, panel 1 to be at 0, 0, 0, panel 2 -- 500, 0, 0, etc. Wherever the "center" for that panel should be.
Title: Re: Drag Panel Page
Post by: Alex on August 11, 2012, 08:50:14 AM
Problam solved.

Thanks.