SwipeControl GUIComponent now available!

• Build Level selection screens, image galleries, scrolling credits and more (Fully working examples included)
• Works with touch and mouse input
• Works at every angle
• Includes versions for Unity iPhone 1.7, Unity 2.6 and Unity 3

Watch the video-tutorial and try the webplayer-demo here <<< (GameAssets.net)

Watch out for more good stuff from GameAssets.net!


Update: The main scripts in the Unity 3 version are now included in JS and C#

 

Looks awesome. Seems like I don't have to finish/debug my custom gui for my upcoming game
Quick question: Is the upcoming GUIKit001 a bundle of GUISkin001, GUIComponent:Swipecontrol and some additional stuff? I want it all - just not sure if it is better to wait for the complete GUIKit001 in order to make sure I really get it all?

 

SwipeControl and GUISkin001 are both used by the GUIKit and will thus be included in full. GUIKit001 should be available at the end of next week! (Still working on a bit of video documentation...)

Please don't hesitate to send feedback: support@gameassets.net - is it easy enough to use? did the video explain it well enough? or just let us know what you're doing with it!

PS: If anyone who bought SwipeControl wants to upgrade, hit me once GUIKit001 is out and I'll give you a code so you only have to pay the difference...

 

Follow our Twitter-feed for the latest news: http://twitter.com/gameassets

 

Just sent out an update. We added a new script that gives a bit more flexibility for creating image galleries (and stuff like that). If you bought SwipeControl or GUIKit001, check your inbox.

 

Hi, I just downloaded SwipeControl and added it to my project. I want to get the same effect as the Image Display demo you included, but I want to do it with gameObjects in the scene instead of images in the GUI. Is it possible to do it with gameObjects instead of images. If so, how hard would it be. I'm finding it a little hard to understand how it all works. Is there any documentation for it?

Thanks

John

 

Wrote up a bit of documentation for building your own scripts to work with SwipeControl (I'll include this in the next update)

A) Setting up SwipeControl

You might choose to set up some variables of SwipeControl in your script instead of entering the values in the inspector. (The reason might be that you want to position it in a certain way, for example.)

skipAutoSetup = true; //Usually Setup() will be called in Start, this skips it, so you can apply your changes and call Setup() manually once you're done
currentValue = 2; //the current rounded value - this is also the value that it's at before it starts
startValue = 5; //this value gets applied when Setup() is done, so setting currentValue to 2 and startValue to 5, will make it scroll from position 2 to 5 in the beginning.
maxValue = 10; //max value, currentValue can't get higher than this
SetMouseRect(new Rect(0, 0, Screen.width, Screen.height)); //Your clicks/touches have to start inside this Rect to register with SwipeControl. In this example we use the entire screen. (enable the debug checkbox at the bottom of the inspector to have a box drawn around your Rect)
clickEdgeToSwitch = false; //We don't want the user to be able to click the edges of the screen to move back/forward - only swiping will be possible
partWidth = Screen.width / maxValue; //partWidth is the amount of pixels you have to move the mouse/finger so that the currentValue increases/decreases by one. In this example we make it dependent on the Screen.width and the given maxValue, so that a swipe from one edge of the screen to another will scroll through all possible values. - Set this to the width of your GUI-image if you want it to move with your cursor/finger exactly. (You can set this to a negative value to invert the direction of the swipes)
Setup(); //now we call Setup() and this starts SwipeControl.


B) Working with values

Now comes the fun part! Once SwipeControl is running, you can use its values to do interesting stuff. (Move around GUI-elements, 3D objects, zoom cameras, etc. - you name it.)

You'll mostly work with these 2 values:

smoothValue is a float that is easing towards the selected value. - use this to move/manipulate your GUI/3D objects/etc.
currentValue is an integer that holds the currently "selected" value. - use this if you want to know the current selection

For example:

Code (csharp):

1. function Update() {
2.     //this example assumes you have a reference to SwipeControl in swipeCtrl
3.     transform.position.x = 22.5 + 10.0 * swipeCtrl.smoothValue; // if smoothValue is at 6.85 your transform's x-position will be set to 22.5 + 10.0*6.85 = 91.
4. }

Check out the included examples for more complex usages!

Let me know if you have any more questions!

 

Hi there,

I have SwipeControl OrientationControl.
I can get OrientationControl to rotate my 3D scenes, but is it possible to use it to rotate the example scenes (eg. the scene named 'Swipecontrol') that come with SwipeControl itself?

If not, how would I go about correcting orientation of the example scenes (which Apple requires)?

Sorry if this is a dumb question!

 

I'm still having quite a hard time with it. Has anybody else gotten it to work like the ImageDisplay demo, but with gameObjects?

 

@jingato: Sorry if this was a bit too generic. Here's an example! Just download the attached unitypackage and open the scene called 3DObjects. - You have to have the SwipeControl script in your project for this to work as it's not included in the unitypackage.

The Example3DObjects script works with any number of objects, just add them to the array. they will be spaced out according to the distance between minXPos and maxXPos. The selected one is being moved up a bit. Here's what the (admittedly rough) example looks like:



Hope this helps! (I'll include this in the next update as well)

 

@keeprighton1974: It's actually quite simple. To make the ImageDisplay script compatible with OrientationControl, go to its OnGUI() function and delete (or comment out) the entire // GUI MATRIX section and then replace it with this:

Code (csharp):

1.  
2.     // GUI MATRIX
3.     matrix = OrientationControl.instance.guiMatrix;
4.     swipeCtrl.matrix = matrix;
5.     GUI.matrix = matrix;   

The ImageDisplay script will now no longer do its own matrix stuff, but will use the matrix provided by OrientationControl and assign that same matrix to SwipeControl as well!

 

Ah, I knew it must be possible - thank you for such a quick response. Really enjoying playing with it all.

Thanks for getting me on my way!

 

@col000r : Thank you very much. I didn't expect you to write a script for me, but that was very helpful! It works awesome and I think I have a better understanding now too. I think the most I was doing wrong was the stuff in the update.

Thanks again

 

Hello again, col000r!

With the SwipeControl menu (I'm using the SwipeControl example scene), what is the intended method of selecting the desired item?
The example shows 5 items 001 to 005, but after reading thru the scripts I cant find a point where I would insert my code to load the next scene.

The most natural gesture would be to double-tap on the icon - is this what was intended? I can't see any existing point in the swipecontrol javascript where this check takes place.

Any help is again very much appreciated.

Sorry to keep running to you with any little problem!!

 

@keeprighton1974 : What I did was to create a button down below that says "select". Then you can can call whatever function you want and pass it the swipe controls current value.

 

Thanks jingato.

Yes, i reckoned on that but didnt want to ruin the clean look of the interface. I think i will do as you've done - i can always try something different as my skills improve!

Thanks for taking the time to help.

 

@col000r: Hey, I've been playing with and customizing that script that you so generously wrote up for me and I'm running into a problem that is stumping me. The problem is with the space between each of the items. It seems that the more items that I add to the array, the closer together the items get, and they begin overlapping. If I increase the variable xDist it them spaces them out correctly, but then everything slides much faster than before. I can't figure out how to fix this. I need to be able to increase the distance but have them still slide at the same speed.

I was wondering if you could take a quick look at what I have and see if you can tell me what I'm doing wrong. I'd really appreciate it

Thanks

-John

Code (csharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. public class SlideMenuItems : MonoBehaviour
5. {
6.     private Transform thisTransform;
7.  
8.     private SwipeControl swipeCtrl;
9.     public Transform[] obj = new Transform[0];
10.  
11.     public float maxXPos = 12; //max x position of the camera
12.     private float xDist; //distance between camMinXPos and camMaxXPos
13.  
14.     private float swipeSmoothFactor = 1.0f; // 1/swipeCtrl.maxValue
15.  
16.     private float rememberYPos;
17.     private Vector3 newPos;
18.     public int currentValue;
19.     public int startValue;
20.     public bool clickEdgeToSwitch;
21.     public bool debug = false;
22.     private float objPosOffset;
23.  
24.     public float top;
25.     public float bottom;
26.     private float height;
27.  
28.  
29.     // Use this for initialization
30.     void Start()
31.     {
32.         thisTransform = gameObject.transform;
33.     }
34.  
35.     public void addWorlds()
36.     {      
37.         newPos = obj[0].position;
38.  
39.         xDist = maxXPos;
40.  
41.         if (!swipeCtrl) swipeCtrl = gameObject.GetComponent<SwipeControl>();
42.  
43.         height = obj[0].localScale.x;
44.        
45.         Vector3 objPosition = obj[0].position;
46.         Vector3 objTop = Camera.main.WorldToScreenPoint(new Vector3(objPosition.x, objPosition.y + height / 2, objPosition.z));
47.         Vector3 objBottom = Camera.main.WorldToScreenPoint(new Vector3(objPosition.x, objPosition.y - height / 2, objPosition.z));
48.         float objHeight = objTop.y - objBottom.y;
49.  
50.  
51.         swipeCtrl.skipAutoSetup = true; //skip auto-setup, we'll call Setup() manually once we're done changing stuff
52.         swipeCtrl.clickEdgeToSwitch = clickEdgeToSwitch; //only swiping will be possible
53.         swipeCtrl.SetMouseRect(new Rect(0, Screen.height - objTop.y, Screen.width, objHeight)); //entire screen
54.         swipeCtrl.maxValue = obj.Length - 1; //max value
55.         swipeCtrl.currentValue = startValue; //current value set to max, so it starts from the end
56.         swipeCtrl.startValue = startValue; //when Setup() is called it will animate from the end to the middle
57.         swipeCtrl.partWidth = Screen.width / swipeCtrl.maxValue; //how many pixels do you have to swipe to change the value by one? in this case we make it dependent on the screen-width and the maxValue, so swiping from one edge of the screen to the other will scroll through all values.
58.         swipeCtrl.Setup();
59.        
60.         swipeSmoothFactor = 1.0f / swipeCtrl.maxValue; //divisions are expensive, so we'll only do this once in start
61.  
62.         rememberYPos = obj[0].position.y;
63.  
64.         top = objTop.y;
65.         bottom = objBottom.y;
66.          
67.     }
68.  
69.    
70.  
71.     // Update is called once per frame
72.     void Update()
73.     {
74.        
75.         for (int i = 0; i < obj.Length; i++)
76.         {
77.             newPos.x = i * (xDist * swipeSmoothFactor) - swipeCtrl.smoothValue * swipeSmoothFactor * xDist + thisTransform.parent.position.x;
78.  
79.             objPosOffset = 1.0f * (1 - Mathf.Clamp(Mathf.Abs(i - swipeCtrl.smoothValue), 0.0f, 1.0f));
80.         }
81.  
82.         currentValue = swipeCtrl.currentValue;
83.  
84.     }
85.  
86. }

 

@keeprighton1974: have a look at the code in SwipeControl - for the mouse there's one part that checks if it's a swipe or a click (basically it checks if you moved more than x pixels between mousedown and mouseup) - you could probably refacture that to work for touches as well. If you need more pointers, I can give it a look when I'm back in the office.

@jingato: without having tried your code yet: it sounds like you need to change the way you set swipeCtrl.partWidth - this is the amount of pixels you have to move to switch to the next full value. In your code it's set to Screen.width / swipeCtrl.maxValue, so the higher the maxValue the less pixels you'll need to move to go from one value to the next. You could simply set it to a fixed value to fix this. (Though you might want to make it somewhat dependent on the Screen.width if you plan to release on multiple platforms with very different screen sizes (100 pixels might be a lot on some screens and very little on others) - oh well, I'd test with a fixed value first, could be good enough.)

 

Thanks. just setting swipeCtrl.partWidth = Screen.width worked like a charm!

 

i was thinking of buying the swipe control package,but i am a bit confused wether this would help me or not.

i want to build something like this
http://www.youtube.com/watch?v=RqYltOJDymU

can anyone please help me out.or any suggestions about the swipe control package

 

@crazyKnight: yeah, shouldn't be too hard. have a look at the Swipe3DObjects package from above - just place out all your objects on one parent gameobject then you can rotate that according to swipecontrol's smoothValue. - Let me know if you need help!

 

Update to v1.2 just went out to everyone who bought it on GameAssets.net (Asset Store update will follow eventually - getting a server error when I'm trying to submit...)

Changes:
• Added some new documentation
• New Example Scene: 3DObjects

 

Hi,
Just bought your script this afternoon. Looked through the sample scenes. Exported to phone and it works. So far so good. But what do I do next?

1. how do I click to go to a certain level or how do I do level locking etc? Is it covered by this script or something else?

2. How to add the texts on top of the images? I saw the demo with credits - are those texts? How do we add the texts on the image?

By the way, do you have an educational price by any chance?

Thanks a lot

 

By the way, I tried to put a GUI.Label inside. It shows up, but not when you swipe. I guess I need to look at your script more.

Edit: Got it now. Had to add the GUI.Label after DrawTexture. Also created a new array to add the high scores that I am getting from PlayerPref. Hope I am doing it right

 

@cdtavijit SwipeControl is all about the swiping, so the level-loading functionality isn't there. But it's not too hard to add. Just make a button and read out currentValue to see what level you're on. (currentValue holds an int with the id of the currently selected step, while smoothValue holds a float that tells you where exactly in between values you are - this one is used for positioning all the graphics)

You can use the LevelStatus script form the GUIKit001-thread here to do the locking and unlocking of levels. Basically it just writes and reads to the PlayerPrefs.

 

Hello col000r, how do i use the matrix from SwipeCotrol to rotate gameObjects? I'm wanting to make a vertical scrool with some boxes

I want to the current box to distance from the others(like your example) and gain scale, this math stuff is breaking me up =(

 

If you're working with 3D Objekts you won't really need the matrix for those. Basically you just need to set up the screenspace that you want to use for swiping and then link the 3d objects to the smoothValue variable. If you have the newest update, check out the two new 3D examples! I know the math can be tricky on those kind of things. PM me if you need more help, I've collected a bit of experience with that kind of stuff lately...

 

Hi col000r,

I recently purchased SwipeControl and am very pleased with how it works. With very little time and with your great examples I was able to modify it to my project's need. However after a long night of working... successfully adapting swipecontrol to my project.. this morning I am getting the following NullReferenceException error.

NullReferenceException: Object reference not set to an instance of an object
System.String.memcpy4 (System.Byte* dest, System.Byte* src, Int32 size)
System.String.memcpy (System.Byte* dest, System.Byte* src, Int32 size)
ExamplePrevNext.OnGUI () (at Assets/Scripts/ExamplePrevNext.js:13)

Now an important note this is of the Unmodified script. I copied and created a new script to do all my modifications incase i ever have to quickly reference the original incase of errors. At first I thought it had something to do with my modifications and additions. but opening up your example scene unmodified gives me the Error on the following line as well.

GUI.matrix = swipeCtrl.matrix;

I thought perhaps it was my unity acting up again which it does from time to time without being closed for an extended period of time so even after restarting Unity the project still shows the error sadly. Any suggestions or insight as to what I may have on my hands here? Again I really think your products rock and am already considering others for future projects. thanks again for your time and help.

 

@Darkangel: thanks a lot for the praise! Glad you find it useful!

This sounds like the example somehow lost it's link to the SwipeControl component. The example-script should have a swipeCtrl variable - please check if it's empty and if so, drag the SwipeControl component (not the script from the project window, but the component that's in the scene already) into the variable again. (I had this happen once or twice as well for no obvious reason... My guess so far is that sometimes Unity can get confused because the JS and C# version both have the same name. If you only use one of the two, you could remove the unused one from your current project just to make sure...)

 

*Looks Sheepish* Thanks col000r! that was it. sorry I missed it. That was exactly what happened. I didn't even notice it had blanked out. I'll keep an eye out from now on. btw. GREAT product Thanks again. Expect more purchases from this happy customer.

 

Hi col000r! I have recently purchased your SwipeControl component and I have to say, I really like it. I've been experimenting with it lately and have setup a little test scene with it inside of my game. I'm having some scaling issues. The component works great on the original iPhone resolution (480x320) and on the iPad, but I'm having trouble at 2x screen sizes such as the iPhone 4 (and most likely the impending iPad 2). Attached is a quick screen recording of the issues I'm having. At 2x resolution, the math appears off, making the tiles go by twice as quickly. Any idea on how to fix this?

 

@conair360: check out the variable partWidth! it's how many pixels you have to move the curser/finger to increase/decrease currentValue / smoothValue by 1. So if you set it to the width of your images, they will move exactly with the cursor/finger.

So, just multiply partWidth by 2 for all retina-devices and they should behave the same non-retina ones!

 

I've changed the partWidth from 160 (non-reitna) to 320 (reitna) in the inspector but it seems to default back to 160 during setup(), and I can't figure out why.

 

@conair360: If you're using the ImageDisplay script as a base for your script, then this happens because the ImageDisplay script sets partWidth automatically to the width of the first image in the img array (Happens in Awake) - so if you're using the low-res images and blow them up for retina, it will still take the real width of the image.

So... Either change the part in Awake or load a separate set of larger images for retina displays!

 

col000r i'm wanting to rotate my gameobject with swipes,

objs.transform.Rotate(new Vector3(0,swipeCtrl.smoothValue * -25,0));

But with this if i keep my finger down it continues to spin...

 

transform.Rotate() doesn't apply a specific rotation, it rotates an object by the given amount. so it rotates it more and more every frame...

Try transform.eulerAngles = new Vector(x,y,z); instead!

 

Thanks col000r!

I'm now using the ExampleObjects3d that you made(converted to C#), simple abandoned onGUI and GUI, but now i'm having some issues with speed, the swipe speed is too high and i dont know where i can set it, here is my code:

Code (csharp):

1.  
2. using UnityEngine;
3. using System.Collections;
4.  
5. public class SwipeVertical: MonoBehaviour {
6.    
7.     #region SwipeManager Declaration
8.     public SwipeControl swipeCtrl;
9.     public Transform[] objs = new Transform[0];
10.    
11.     public float minXPos= 0; //min x position of the camera
12.     public float maxXPos = 0; //max x position of the camera
13.     public float xDist; //distance between camMinXPos and camMaxXPos
14.     public float xDistFactor; // = 1/camXDist
15.  
16.     private float swipeSmoothFactor = 1.0f; //swipeCtrl.maxValue
17.  
18.     private float rememberYPos;
19.    
20.     public float ajusteX;
21.     public float ajusteY;
22.     public float ajusteZ;
23.    
24.    
25.    
26.     #endregion
27.  
28.     void OnGUI()
29.     {
30.         //GUI.Box(areaEscalonador,GUIContent.none);
31.     }
32.    
33.     void Start ()
34.     {      
35.         #region SwipeManager Setup
36.        
37.         maxXPos = objs.Length + 2;
38.         xDist = 10.5f;
39.         //xDistFactor = 1.0f / xDist;
40.        
41.         if(!swipeCtrl) swipeCtrl = gameObject.AddComponent("SwipeControl") as SwipeControl;
42.         swipeCtrl.skipAutoSetup = false;
43.         swipeCtrl.clickEdgeToSwitch = false;
44.         swipeCtrl.SetMouseRect(new Rect(0,0, Screen.width, Screen.height));
45.         swipeCtrl.maxValue = objs.Length -1 ;
46.         swipeCtrl.currentValue = 0;
47.         swipeCtrl.startValue = 0;
48.         swipeCtrl.partWidth = 50f;//Screen.width  / swipeCtrl.maxValue;
49.         swipeCtrl.Setup();
50.        
51.         swipeSmoothFactor = 0.5f/swipeCtrl.maxValue;
52.         rememberYPos = objs[0].position.y;
53.         #endregion
54.        
55.     }
56.        
57.     void Update ()
58.     {
59.          for(int i = 0; i < objs.Length; i++)
60.         {
61.         objs[i].position = new Vector3(ajusteX + minXPos + i * (xDist * swipeSmoothFactor) - swipeCtrl.smoothValue*swipeSmoothFactor*xDist,0 + ajusteY,0 + ajusteZ );
62.                
63.         }  
64.     }
65.  
66. }
67.  

 

Swipe-speed is determined by partWidth! partWidth is the number of pixels you have to move the mouse/finger to change currentValue and smoothValue by 1. Set it to something higher and you have to move further to swipe to the next/previous item.

 

I want the number of pixels you have to move to be low, this way you can do a simple and small swipe and go to the next item, my problem is that the drag speed is too high,

 

isn't that the same thing?

If you set partWidth to something higher and you swipe fast over a short distance it will still go to the next item because SwipeControl isn't simply taking the end-position, it is calculating the momentum of your swipe, looking ahead and then choosing the value where the swipe will end.

If that's what you mean and you want to be able to change that part, check out the private variable smoothDragOffset and have a look at how it is used in the parts marked //END (meaning the end of a touch and end of a click) in Update

 

I figured that they are the same thing 1 minute after my post, hehe

Thank you! and sorry for those silly posts

 

In the 3d scene I have a cube as a child of a game object rotated 45 degrees. It rotates properly on start, but I have no control after that.
What part of the script controls the swipe input so i can swipe at a 45 degree angle?

 

depends on the script you're using.

In SwipeControlFor3D the script performs a raycast and tries to hit targetObject.
In normal SwipeControl you can use SetMouseRect(Rect) to define the area where you can click/touch to swipe. - please have a look at the examples to see how to set this up properly.

In both cases partWidth is the number of pixels you have to move the mouse/touch to switch value by 1

hope this helps!

 

I figured out how to rotate the rectangles in the inspector and that you can see them by checking the debug box. Can anyone tell me how to set the matrix up in the script instead of the inspector so I can set it up for different resolutions. I'm new and just can't figure it out.


I got it......

 

I just purchased GUI Kit Deluxe and I can't figure out how to import Standard GUI into Unity. All the other components, such as Swipe Control, have packages to import. I can't seem to find one for Standard GUI. When I drill down to the the Unity folder under Standard GUI all I see is an assets folder and a library folder. If I try to just copy the assets into my project I get compile errors when I try to open the GUI.unity scene.

I'm a Unity noob and any help would be appreciated.

 

Off-topic for this thread, but StandardGUI is included as a whole project. Just do Open Project in Unity and select the folder that includes the Assets and Library folder.

PS: GUIKit001 thread is here

 

I wrote a small script based on swipe control to use 3d text for touch input on my main menu. Would it be alright to post it? 56 lines of code.
I see a lot of people are looking for this.

 

sorry for the late reply: depends on what you mean by "based on"

 

Hi I purchased your SwipeControl to manipulate some characters (spin around the y axis). Your 3D example is helpful but I am confused about the purpose of the SwipeControl script on the SwipeControl object in the sample 3D scene. This object also holds the Example 3D.js script. I tried disabling the SwipeControl on this object and it made no appreciable difference?

Was it left over or is it supposed to interact somehow.

I also had a question about the direction of the swipe? I need to trap side to side sd well as up/down

Trying to integrate touch control with SeekSteer from the Unity Wiki which I had previously modified to Input.GetAxis for keyboard control.

Thanks

iByte

 

Hi, I also found Prime31's GuiSwipeDetector which takes a Rect, checks for onTouchBegan, onTouchMoved and onTouchEnded. It then calls a delegate with a direction the swipe is going. Can SwipeControl do something like this?

Thanks

iByte