[UnityUI] some interesting UI examples, unityuiui examples

[UnityUI] some interesting UI examples, unityuiui examples

1. Ring progress bar

2. Graphic matching

Using UnityEngine; using System. collections. generic; using UnityEngine. UI; /// <summary> /// large drag block /// </summary> public class DragBrick: monoBehaviour {private List <Transform> childrenTra = new List <Transform> (); // small square private List <GameObject> targetGo = new List <GameObject> () under the large square (); // The small square matches the empty square private GameObject [] tempGo; private Vector3 posOffset; void Start () {Transform [] tra = transform. getCompon EntsInChildren <Transform> (); for (int I = 1; I <tra. length; I ++) // tra [0] is itself, so it is not considered childrenTra. add (tra [I]);} public void DragStart () {posOffset = transform. position-Input. mousePosition; transform. setAsLastSibling ();} public void DragUpdate () {transform. position = Input. mousePosition + posOffset;} // <summary> // Note: // 1. the X-ray-detected object must carry Collider // 2. Z axis of the object to be detected by rays> Z axis of the object to be detected by rays // 3. when not given to Rayc When the ast function is used to pass the layerMask parameter, only the Colliders at the IgnoreRaycast layer are ignored. /// </Summary> public void DragEnd () {tempGo = new GameObject [childrenTra. count]; int suitableBrickAmount = 0; // Number of correctly matched bricks for (int I = 0; I <childrenTra. count; I ++) {RaycastHit hit; if (Physics. raycast (childrenTra [I]. position, Vector3.forward, out hit) {tempGo [I] = hit. transform. gameObject; suitableBrickAmount ++;} else break;} if (suitableBrickAmount = childrenTra. count) // exact match {if (targetGo. count = 0) // exact Match for the first time {Match () ;}else // already exclusive Match {Clear (); Match ();}} else // cannot fully Match {Clear () ;}} void Match () {for (int I = 0; I <tempGo. length; I ++) {targetGo. add (tempGo [I]); targetGo [I]. layer = 2; // ignore the ray collision Vector3 pos = targetGo [I]. transform. position; pos. z --; childrenTra [I]. position = pos; childrenTra [I]. getComponent <Outline> (). enabled = true ;}} void Clear () {for (int I = 0; I <targetGo. count; I ++) targetGo [I]. layer = 0; targetGo. clear (); for (int I = 0; I <childrenTra. count; I ++) childrenTra [I]. getComponent <Outline> (). enabled = false ;}}

3. Multiple blood vessels

Description:

1. When the injury is small, there will be a "residual blood" Effect

2. When the damage is large, the "water" effect will appear.

3. Multiple blood records are mainly composed of four types of blood records:

A. Bottom blood vessels

B. The current blood and next blood are like purple and red.

C. Transition blood strip, generally a dark red

Using UnityEngine; using System. collections; using UnityEngine. UI; public class BossBloodBar: MonoBehaviour {public Image nowBar; public Image middleBar; public Image nextBar; public Text countText; private int count; // number of blood records private float nowBlood; // The current blood volume in a row of blood, for example, 100/1000 is 100 private float oneBarBlood = 1500f; // the size of a row of blood, for example, 100/1000 is 1000 private int colorIndex; public Color [] colors; // Color of normal blood strips. Pay attention to the Alpha value pu. Blic Color middleBarColor; // the Color of the Transition blood strip. Note that the Alpha value is public float slowSpeed = 0.1f; // when the patient is seriously injured (> oneBarBlood) or is in the bleeding status, public float quickSpeed = 1f; // when the normal blood is slightly injured (<oneBarBlood), the normal blood flow speed is private float speed; // public float middleBarSpeed = 0.1f for the current normal blood strip; // private float targetBloodValue = 1f for the transitional blood strip; // private bool isBloodMove = false; // control the moving void Update () {MoveBloodMiddle (); // The moving MoveBlo of the transitional blood bar OdNormal (); // normal blood flow} // <summary> // total incoming blood volume, initialize blood records // </summary> /// <param name = "number"> </param> public void InitBlood (float number) {count = (int) (number/oneBarBlood); nowBlood = number % oneBarBlood; colorIndex = count % colors. length; nowBar. color = colors [colorIndex]; nowBar. fillAmount = nowBlood/oneBarBlood; if (count! = 0) {int nextColorIndex = (colorIndex-1 + colors. length) % colors. length; nextBar. color = colors [nextColorIndex];} middleBar. color = middleBarColor; middleBar. gameObject. setActive (false); countText. text = count + "" ;}/// <summary> // Changes in blood volume, determine whether to use the transitional blood bar according to the damage /// </summary> /// <param name = "number"> </param> public void ChangeBlood (float number) {nowBlood + = number; targetBloodValue = nowBlood/ OneBarBlood; isBloodMove = true; if (number <0) & (Mathf. abs (nowBar. fillAmount-targetBloodValue) <= 1) // {speed = quickSpeed; middleBar when the injury volume is low. gameObject. setActive (true); middleBar. fillAmount = nowBar. fillAmount; targetValue = targetBloodValue;} else {speed = slowSpeed; middleBar. gameObject. setActive (false) ;}} private float targetValue; void MoveBloodMiddle () {if (speed = quic KSpeed) {middleBar. fillAmount = Mathf. lerp (middleBar. fillAmount, targetValue, middleBarSpeed); if (Mathf. abs (middleBar. fillAmount-0) <0.01f) {middleBar. transform. setSiblingIndex (nextBar. transform. getSiblingIndex () + 1); middleBar. fillAmount = 1; targetValue ++ ;}} void MoveBloodNormal () {if (! IsBloodMove) return; nowBar. fillAmount = Mathf. lerp (nowBar. fillAmount, targetBloodValue, speed); if (Mathf. abs (nowBar. fillAmount-targetBloodValue) <0.01f) // reach the destination isBloodMove = false; if (count = 0) nextBar. gameObject. setActive (false); else nextBar. gameObject. setActive (true); if (nowBar. fillAmount> = targetBloodValue) SubBlood (); else AddBlood ();} void AddBlood () {float subValue = Mathf. abs (nowBar. fillAmount-1); if (subValue <0.01f) // reaches 1 {count ++; countText. text = count. toString (); nowBar. fillAmount = 0; targetBloodValue-= 1; nowBlood-= oneBarBlood; nextBar. color = colors [colorIndex]; colorIndex ++; colorIndex % = colors. length; nowBar. color = colors [colorIndex] ;}} void SubBlood () {float subValue = Mathf. abs (nowBar. fillAmount-0); if (subValue <0.01f) // reaches 0 {middleBar. transform. setSiblingIndex (nextBar. transform. getSiblingIndex () + 2); if (count <= 0) {middleBar. gameObject. setActive (false); Destroy (this); return ;}; count --; countText. text = count. toString (); nowBar. fillAmount = 1; targetBloodValue + = 1; nowBlood + = oneBarBlood; colorIndex --; colorIndex + = colors. length; colorIndex % = colors. length; nowBar. color = colors [colorIndex]; int nextColorIndex = colorIndex-1 + colors. length; nextColorIndex % = colors. length; nextBar. color = colors [nextColorIndex] ;}}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.