Git Product home page Git Product logo

unity-sliders's Introduction

Instructions

Interactable Slider

  1. Create a Canvas (change a background color and add other elements you need).
  2. Add a Slider to the Canvas (you can check "Whole Numbers", change slider direction, min and max value, value at start as you need).
  3. Create script SliderController.
  4. Delete Start and Update methods.
  5. Create public method OnSliderChanged that takes one float parameter.
  6. Add field valueText and inside a new method assign it with method parameter.
  7. Inside Slider component add new script to events list and change method name.
  8. You can also make the slider prettier: change it Handle, Background and Fill area.

Progress bar (with buttons)

  1. Create a Canvas (change a background color and add other elements you need).
  2. Add a Button and a Slider to the Canvas (uncheck Interactable in Slider component or just delete Handle Slide Area).
  3. Create new script Progressbar.
  4. Create a variable that will hold a progress.
  5. Add slider reference.
  6. Create UpdateProgress public method.
  7. Increase progress value and set it as slider value;
  8. In Button register a new event from slider (drug slider into new event).
  9. In Progressbar script choose UpdateProgress() method.
  10. You can also create a second Button (Remove) and create a new method (RemoveProgress). After that register a new event from slider.

Timer

  1. Create a Canvas (change a background color and add other elements you need).
  2. Add Slider, change its color as you wish.
  3. Delete Handle Slide Area.
  4. Set slider to it max value.
  5. In Slider add TimerText to show time left.
  6. Create an empty GameObject (rename it to TimerController).
  7. Create a new C#-script (Timer).
  8. Add this script to TimerController.
  9. In the script add reference to Slider.
  10. Create public field for timer text.
  11. Create variable float maxTime (max game time).
  12. Create private bool stopTimer (we need to know when we stop the timer).
  13. In Start set stopTimer to false.
  14. In Start set timerSlider maxValue and value to maxTime;
  15. In Update create a new variable float time and set its value to maxTime - Time.time.
  16. In Update calculate a number of minutes that left.
  17. In Update calculate a number of seconds that left.
  18. Create string variable for correct time format.
  19. Set stopTimer to true if time <= 0.
  20. If !stopTimer - update timer value and timerText.text.

Circular Slider

  1. Create Canvas, change its background, set UI Scale Mode to Scale with screen size.
  2. Create Slider, delete Handle Slide Area, set Transition to None, uncheck Interactable.
  3. Rename slider background to OuterBorder.
  4. Create a new Sprite (Circle).
  5. Add circle to OuterBorder source image.
  6. Set Slider Width and Height to 160.
  7. Stretch OuterBorder, set buttom and top to 0.
  8. Stretch Fill Area, set left, top, right and bottom to 5.
  9. Add circle to Fill source image.
  10. Stretch Fill, set left, top, right and bottom to 0.
  11. Change Fill color, set image type to Filled.
  12. Dublicate OuterBorder, rename it to InnerBorder, set left, top, right, bottom to 20.
  13. Dublicate InnerBorder, rename to CenterArea and put into InnerBorder.
  14. In CenterArea set left, top, right, bottom to 5, change its color to main background color.

Mission Slider

  1. Create a Canvas, change background color.
  2. Add a Panel (rename to ContainerPanel), set Opacity to 0.
  3. Inside ContainerPanel create a new Panel (rename to MissionsPanel), resize it, change color or add sprite.
  4. Inside MissonsPanel create Button (rename it to MissionButton1), add Text (number 1).
  5. Duplicate this button 8 times.
  6. Duplicate MissionPanel, drop it to right.
  7. Add 2 Button for slider (Slide to right and to left).
  8. Create a new script MissionSlider, attach it to Canvas (or othr parent object).
  9. In script create field (reference to ContainerPanel).
  10. Create reference to all MissionsPanel.
  11. Create reference to right and left buttons.
  12. Create field int currentIndex.
  13. Create field float containerPositionX, initialize in Start method.
  14. Set up a iTween asset from assets store.
  15. Call MoveTo method through the code.
  16. In Unity attach events to buttons.

unity-sliders's People

Contributors

normandy72 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.