[Script] Flippable for UI Graphics

Hey,
I've been needing to flip sprites for some time now and using the scale solution proved to be a bad idea when using Layout grids and such so i decided to try and write a little script to flip the vertices instead. It's currently doing the job for me and i would like to share it so here it is...

PS: Any improvement suggestions are most welcome.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4.  
5. namespace UnityEngine.UI
6. {
7.     [RequireComponent(typeof(RectTransform)), RequireComponent(typeof(Graphic)), DisallowMultipleComponent, AddComponentMenu("UI/Flippable")]
8.     public class UIFlippable : MonoBehaviour, IVertexModifier {
9.      
10.         [SerializeField] private bool m_Horizontal = false;
11.         [SerializeField] private bool m_Veritical = false;
12.      
13.         /// <summary>
14.         /// Gets or sets a value indicating whether this <see cref="UnityEngine.UI.UIFlippable"/> should be flipped horizontally.
15.         /// </summary>
16.         /// <value><c>true</c> if horizontal; otherwise, <c>false</c>.</value>
17.         public bool horizontal
18.         {
19.             get { return this.m_Horizontal; }
20.             set { this.m_Horizontal = value; }
21.         }
22.      
23.         /// <summary>
24.         /// Gets or sets a value indicating whether this <see cref="UnityEngine.UI.UIFlippable"/> should be flipped vertically.
25.         /// </summary>
26.         /// <value><c>true</c> if vertical; otherwise, <c>false</c>.</value>
27.         public bool vertical
28.         {
29.             get { return this.m_Veritical; }
30.             set { this.m_Veritical = value; }
31.         }
32.      
33.         protected void OnValidate()
34.         {
35.             this.GetComponent<Graphic>().SetVerticesDirty();
36.         }
37.      
38.         public void ModifyVertices(List<UIVertex> verts)
39.         {
40.             RectTransform rt = this.transform as RectTransform;
41.          
42.             for (int i = 0; i < verts.Count; ++i)
43.             {
44.                 UIVertex v = verts[i];
45.              
46.                 // Modify positions
47.                 v.position = new Vector3(
48.                     (this.m_Horizontal ? (v.position.x + (rt.rect.center.x - v.position.x) * 2) : v.position.x),
49.                     (this.m_Veritical ?  (v.position.y + (rt.rect.center.y - v.position.y) * 2) : v.position.y),
50.                     v.position.z
51.                 );
52.              
53.                 // Apply
54.                 verts[i] = v;
55.             }
56.         }
57.     }
58. }

Usage: Just add the script as a component to any gameobject that has a graphic on it and it should be working...

 

Thanks for share , img screen shot will help users on what exactly this script does.

 

Thanks a ton for this script! I knew this is what I needed and I'm a bit stunned that this isn't built into the "new" UI system.

I had to make some changes to get it working, because IVertexModifier is now deprecated. Posting my mod script below, but maybe someone can take a look and see if you can get it working with Text? I don't know if the original handled Text graphics ok previously, but my script doesn't seem to. However for Images it works great, and that's what I needed!

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using System;
5.  
6. namespace UnityEngine.UI
7. {
8.     [RequireComponent(typeof(RectTransform)), RequireComponent(typeof(Graphic)), DisallowMultipleComponent, AddComponentMenu("UI/Flippable")]
9.     public class UIFlippable : MonoBehaviour, IMeshModifier
10.     {
11.  
12.         [SerializeField]
13.         private bool m_Horizontal = false;
14.         [SerializeField]
15.         private bool m_Veritical = false;
16.  
17.         /// <summary>
18.         /// Gets or sets a value indicating whether this <see cref="UnityEngine.UI.UIFlippable"/> should be flipped horizontally.
19.         /// </summary>
20.         /// <value><c>true</c> if horizontal; otherwise, <c>false</c>.</value>
21.         public bool horizontal
22.         {
23.             get { return this.m_Horizontal; }
24.             set { this.m_Horizontal = value; this.GetComponent<Graphic>().SetVerticesDirty(); }
25.         }
26.  
27.         /// <summary>
28.         /// Gets or sets a value indicating whether this <see cref="UnityEngine.UI.UIFlippable"/> should be flipped vertically.
29.         /// </summary>
30.         /// <value><c>true</c> if vertical; otherwise, <c>false</c>.</value>
31.         public bool vertical
32.         {
33.             get { return this.m_Veritical; }
34.             set { this.m_Veritical = value; this.GetComponent<Graphic>().SetVerticesDirty(); }
35.         }
36.  
37.         protected void OnValidate()
38.         {
39.             this.GetComponent<Graphic>().SetVerticesDirty();
40.         }
41.  
42.         public void ModifyVertices(List<UIVertex> verts)
43.         {
44.             RectTransform rt = this.transform as RectTransform;
45.  
46.             for (int i = 0; i < verts.Count; ++i)
47.             {
48.                 UIVertex v = verts[i];
49.  
50.                 // Modify positions
51.                 v.position = new Vector3(
52.                     (this.m_Horizontal ? (v.position.x + (rt.rect.center.x - v.position.x) * 2) : v.position.x),
53.                     (this.m_Veritical ? (v.position.y + (rt.rect.center.y - v.position.y) * 2) : v.position.y),
54.                     v.position.z
55.                 );
56.  
57.                 // Apply
58.                 verts[i] = v;
59.             }
60.         }
61.  
62.  
63.         readonly List<UIVertex> buffer = new List<UIVertex>();
64.         readonly List<int> indexList = new List<int>();
65.  
66.         public void ModifyMesh(Mesh mesh)
67.         {
68.             throw new NotImplementedException();
69.         }
70.  
71.         public void ModifyMesh(VertexHelper verts)
72.         {
73.             buffer.Clear();
74.             indexList.Clear();
75.             verts.GetUIVertexStream(buffer);
76.             ModifyVertices(buffer);
77.             for (int i = 0; i < buffer.Count; i++)
78.                 indexList.Add(i);
79.             verts.AddUIVertexStream(buffer, indexList);
80.  
81.         }
82.     }
83. }
84.  

 

Some fix for last script in method ModifyMesh(VertexHelper verts), because I had some issues with alpha and extra lines on my UI.
Text from documentation about VertexHelper.GetUIVertexStream - "Create a stream of UI vertex (in triangles) from the stream."

According to this fixed method looks:

Code (CSharp):

1.  
2. public void ModifyMesh(VertexHelper verts) {
3.     List<UIVertex> buffer = new List<UIVertex>();
4.     verts.GetUIVertexStream(buffer);
5.     ModifyVertices(buffer);
6.     verts.AddUIVertexTriangleStream(buffer);
7. }

All class code:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using System;
5.  
6. namespace UnityEngine.UI {
7.     [RequireComponent(typeof(RectTransform)), RequireComponent(typeof(Graphic)), DisallowMultipleComponent, AddComponentMenu("UI/Flippable")]
8.     public class UIFlippable : MonoBehaviour, IMeshModifier {
9.  
10.         [SerializeField]
11.         private bool m_Horizontal = false;
12.         [SerializeField]
13.         private bool m_Veritical = false;
14.  
15.         /// <summary>
16.         /// Gets or sets a value indicating whether this <see cref="UnityEngine.UI.UIFlippable"/> should be flipped horizontally.
17.         /// </summary>
18.         /// <value><c>true</c> if horizontal; otherwise, <c>false</c>.</value>
19.         public bool horizontal {
20.             get { return this.m_Horizontal; }
21.             set { this.m_Horizontal = value; this.GetComponent<Graphic>().SetVerticesDirty(); }
22.         }
23.  
24.         /// <summary>
25.         /// Gets or sets a value indicating whether this <see cref="UnityEngine.UI.UIFlippable"/> should be flipped vertically.
26.         /// </summary>
27.         /// <value><c>true</c> if vertical; otherwise, <c>false</c>.</value>
28.         public bool vertical {
29.             get { return this.m_Veritical; }
30.             set { this.m_Veritical = value; this.GetComponent<Graphic>().SetVerticesDirty(); }
31.         }
32.  
33.         protected void OnValidate() {
34.             this.GetComponent<Graphic>().SetVerticesDirty();
35.         }
36.  
37.         public void ModifyVertices(List<UIVertex> verts) {
38.             RectTransform rt = this.transform as RectTransform;
39.  
40.             for (int i = 0; i < verts.Count; ++i) {
41.                 UIVertex v = verts[i];
42.  
43.                 // Modify positions
44.                 v.position = new Vector3(
45.                     (this.m_Horizontal ? (v.position.x + (rt.rect.center.x - v.position.x) * 2) : v.position.x),
46.                     (this.m_Veritical ? (v.position.y + (rt.rect.center.y - v.position.y) * 2) : v.position.y),
47.                     v.position.z
48.                 );
49.  
50.                 // Apply
51.                 verts[i] = v;
52.             }
53.         }
54.  
55.         public void ModifyMesh(Mesh mesh) {
56.         }
57.  
58.         public void ModifyMesh(VertexHelper verts) {
59.             List<UIVertex> buffer = new List<UIVertex>();
60.             verts.GetUIVertexStream(buffer);
61.             ModifyVertices(buffer);
62.             verts.AddUIVertexTriangleStream(buffer);
63.         }
64.     }
65. }