- Home /
Unity3d GUI Scroll view
hi,
How to create a Unity3d gui scroll view fit for any resolution(iphone and android).please help me with this.
this is my script:
using UnityEngine; using System.Collections;
[ExecuteInEditMode]
public class GUITouchScroll : MonoBehaviour {
public GUISkin optionsSkin;
public GUIStyle rowSelectedStyle;
private int selected = -1;
private float scrollVelocity = 0f;
private float timeTouchPhaseEnded = 0f;
public Vector2 scrollPosition;
public float inertiaDuration = 0.75f;
public int numRows;
public Vector2 rowSize;
public Vector2 windowMargin;
public Vector2 listMargin;
private Rect windowRect;
private Vector2 listSize;
public Texture2D classic_Slots_20;
public Texture2D horse_Time_20;
public Texture2D mega_bullion_20;
public Texture2D classic_Slots_30;
public Texture2D horse_Time_30;
public Texture2D gems_30;
public Texture2D mega_bullion_30;
public Texture2D bingo_30;
public Texture2D crazy_zoo_30;
public Texture2D kingandpirates_30;
public Texture2D cool_Sports_30;
public Texture2D snacks_30;
void Update()
{
if (Input.touchCount != 1)
{
selected = -1;
if ( scrollVelocity != 0.0f )
{
float t = (Time.time - timeTouchPhaseEnded) / inertiaDuration;
if (scrollPosition.x >= 0 || scrollPosition.x <= (numRows*rowSize.x - listSize.x))
{
scrollVelocity = -scrollVelocity;
Debug.Log("scrollVelocity"+scrollVelocity);
}
float frameVelocity = Mathf.Lerp(scrollVelocity,0,t);
scrollPosition.x -= frameVelocity * Time.deltaTime;
Debug.Log("frameVelocity"+frameVelocity);
if (t <= 1.0f) scrollVelocity = 0.0f;
}
return;
}
Touch touch = Input.touches[0];
bool fInsideList = IsTouchInsideList(touch.position);
if (touch.phase == TouchPhase.Began && fInsideList)
{
selected = TouchToRowIndex(touch.position);
scrollVelocity = 0.0f;
}
else if (touch.phase == TouchPhase.Canceled || !fInsideList)
{
selected = -1;
}
else if (touch.phase == TouchPhase.Moved && fInsideList)
{
// dragging
selected = -1;
scrollPosition.x -= touch.deltaPosition.x;
Debug.Log("scrollPosition down"+scrollPosition);
}
else if (touch.phase == TouchPhase.Ended)
{
if ( selected > -1 && fInsideList )
{
//Debug.Log("Player selected row " + selected);
}
else
{
if (Mathf.Abs(touch.deltaPosition.x) <= .0)
scrollVelocity = (int)(touch.deltaPosition.x / touch.deltaTime);
timeTouchPhaseEnded = Time.time;
}
}
}
void OnGUI ()
{
GUI.skin = optionsSkin;
// if( (Screen.orientation == ScreenOrientation.LandscapeLeft || Screen.orientation == ScreenOrientation.LandscapeRight ) // && (Screen.height == 1536 && Screen.width == 2048)) // {
windowRect = new Rect(windowMargin.x, windowMargin.y,
Screen.width - (2*windowMargin.x), Screen.height - (2*windowMargin.y));
listSize = new Vector2(windowRect.width - 2*listMargin.x, windowRect.height - 2*listMargin.y);
// }
GUI.Window(0, windowRect, (GUI.WindowFunction)DoWindow, "");
}
void DoWindow (int windowID)
{
Rect rScrollFrame = new Rect(listMargin.x, listMargin.y, listSize.x, listSize.y);
Rect rList = new Rect(0, 0, rowSize.x, numRows*rowSize.y);
scrollPosition = GUI.BeginScrollView (rScrollFrame, scrollPosition, rList, false, false);
GUILayout.BeginHorizontal();
if(GUILayout.Button(classic_Slots_20, rowSelectedStyle))
{
Debug.Log("select classic_Slots_20 pressed");
}
if(GUILayout.Button(horse_Time_20, rowSelectedStyle))
{
Debug.Log("select horse_Time_20 pressed");
}
if(GUILayout.Button(mega_bullion_20, rowSelectedStyle))
{
Debug.Log("select mega_bullion_20 pressed");
}
if(GUILayout.Button(classic_Slots_30, rowSelectedStyle))
{
Debug.Log("select classic_Slots_30 pressed");
}
if(GUILayout.Button(horse_Time_30, rowSelectedStyle))
{
Debug.Log("select horse_Time_30 pressed");
}
if(GUILayout.Button(gems_30, rowSelectedStyle))
{
Debug.Log("select gems_30 pressed");
}
if(GUILayout.Button(mega_bullion_30, rowSelectedStyle))
{
Debug.Log("select mega_bullion_30 pressed");
}
if(GUILayout.Button(bingo_30, rowSelectedStyle))
{
Debug.Log("select bingo_30 pressed");
}
if(GUILayout.Button(crazy_zoo_30, rowSelectedStyle))
{
Debug.Log("select crazy_zoo_30 pressed");
}
if(GUILayout.Button(kingandpirates_30, rowSelectedStyle))
{
Debug.Log("select kingandpirates_30 pressed");
}
if(GUILayout.Button(cool_Sports_30, rowSelectedStyle))
{
Debug.Log("select cool_Sports_30 pressed");
}
if(GUILayout.Button(snacks_30, rowSelectedStyle))
{
Debug.Log("select snacks_30 pressed");
}
GUILayout.EndHorizontal();
GUI.EndScrollView();
}
private int TouchToRowIndex(Vector2 touchPos)
{
float x = Screen.height - touchPos.x; // invert y coordinate
x += scrollPosition.x; // adjust for scroll position
x -= windowMargin.x; // adjust for window y offset
x -= listMargin.x; // adjust for scrolling list offset within the window
int irow = (int)(x / rowSize.x);
irow = Mathf.Min(irow, numRows); // they might have touched beyond last row
return irow;
}
bool IsTouchInsideList(Vector2 touchPos)
{
Vector2 screenPos = new Vector2(touchPos.x, Screen.height - touchPos.y); // invert y coordinate
Rect rAdjustedBounds = new Rect(listMargin.x + windowRect.x, listMargin.y + windowRect.y, listSize.x, listSize.y);
return rAdjustedBounds.Contains(screenPos);
}
}
Answer by OrbitSoft · Mar 04, 2014 at 11:46 AM
The best way is using percent values instead of pixel values, if you just use GUI.Button the Rect is in pixels, i recommend you to make a custom class with the same functions as GUI but calculating the Rect size in percent of Screen size. For example
public static bool Button(Rect pos,string text)
{
int w = Screen.width;
int h = Screen.height;
Rect percentRect = new Rect((w * pos.x / 100), (h * pos.y / 100), (w * pos.width / 100), (h * pos.height / 100));
return GUI.Button(percentRect,text);
}
Now if you want a button to be 1/4 of the screen it would be like: MyGUI.Button(0,0,50,50);
To see if it works change the Game view in the editor and you'll see that the buttons resize too.