- Home /
create custom Horizontal slider
Hi guys,
I need help in creating a custom Horizontal slider. I have a GUISkin in which I have custom styles for HorizontalSlider and HorizontalSliderThumb. I use the code below to use it. However, nothing gets drawn on the screen when I run it. This is for iPad only and I am using Unity pro, Unity iOS.
GUI.skin = this.evoGUISkin;
GUIStyle slider = evoGUISkin.GetStyle("Page1Slider");
GUIStyle sliderThumb = evoGUISkin.GetStyle("Page1SliderThumb");
GUI.skin.horizontalSlider = slider;
GUI.skin.horizontalSliderThumb = sliderThumb;
lightScrollBar = GUI.HorizontalSlider (scaleRect (1076, 405, 500, 250), lightScrollBar, 0.0f, 10.0f,slider,sliderThumb);
I wrtoe something similar to what is on this link but it didnt work for me :/
Thanks..
Answer by ....... · Dec 13, 2012 at 12:23 AM
Well.. I got my answer from here http://forum.unity3d.com/threads/7037-Customizing-the-horizontal-slider
However, I still cannot see the SliderThumb! I can see the slider but not my customized Thumb(which is a texture under Normal in GUISkin).
Answer by Bunny83 · Dec 13, 2012 at 01:20 AM
The GUIskin works a bit different. The default styles are just used like any other custom styles you've defined in the skin. The point is when you use the slider function without an explicit style it uses the default style.
Replacing default styles in code usually leads to problems. The GUISkin is one of the things that does remember changes across the playmode / editmode border. So by doing what you've done above you've probably overridden the default style in your GUISkin with your custom style.
Next thing is Unity has implemented an implicit cast between string and GUIStyle. Just set your skin as current skin (like you did) and call the slider that way:
GUI.skin = this.evoGUISkin;
lightScrollBar = GUI.HorizontalSlider (scaleRect (1076, 405, 500, 250), lightScrollBar, 0.0f, 10.0f, "Page1Slider", "Page1SliderThumb");
Make sure your thumb has a fixed size and does not strech. You can just tart your game and play around in the GUISkin. You will see the changes in realtime and they are kept, so watchout what you delete ;). It's usually quite useful when you have a new blank GUISkin with the default settings unchanged to compare the settings. You usually just replace the background textures and might have to adjust the fixedSize.
edit
I've creates a very simple example scene which just displays 3 sliders with 3 different styles (actually 6). Just import it into a Unity project and open the "scene" file inside the "0SliderExamples" folder which should appear at the top of your project window ;).
Just open the scene and press play. During playmode select the GUISkin (MySkin) in the project window and expand the custom styles at the very bottom of the inspector. There you will see 6 custom styles which are used by the 3 sliders. Take a close look at the different settings.
The 8 stylestates (normal, hover, active, focused, on...) should be quite obvious. You actually don't need all them. Just the normal state should be enough as long as the other states have "none" as texture ;)
The important settings are: Border, Padding, Margin (only when you use GUILayout), Overflow, ImagePosition, Alignment, Fixed Width / Height.
Also note what fixed Height really do. Usually the size of elements are specified by it's Rect. The Rect is also the area in which user interactions are recognised. Graphics can "overflow" this area. Keep in mind when you specify a smaller height in the Rect than the fixed Width / Height does not make the slider smaller. The graphics will overlap but user interactions only works in the rect specified.
You can set your fixed Height / width to 0, in this case the graphics always stretch to the given Rect size.
Border will influence how many pixels from each edge are NOT stretched. Setting all to 0 will stretch the whole image.
Overflow adds to or subtracts from the target size. This could be a fixed size or the streched size you get from the rect.
The other settings should be clear. If not, just play with them.
I did exactly as you suggested. But when I increase the size of my sliderThumb it does not slide! Every thing works fine until the Fixed height = 16 and FixedWidth=20. $$anonymous$$y sliderThumb texture is 48x50 in size. I have kept the texture under Normal->Texture.
Thank you for the scene... Will post my results after trying it out...
Thanks a ton! the problem was with my Rect. I increased the size of it and its working great! I had to edit the padding of the slider to position the Thumb at a right place.