Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Unity UI UI Deformation of images, shapes and contours.

Discussion in 'UGUI & TextMesh Pro' started by skdev3, Aug 9, 2018.

  1. skdev3

    skdev3

    Joined:
    Jul 15, 2015
    Posts:
    64
    Hello Community!

    I wrote a very cool script.

    Flexes and deforms UI Sprites


    Code (CSharp):
    1. /*
    2. * BSD 2-Clause License
    3.   * Copyright (c) 2018, Andrey Sidorov
    4. * All rights reserved.
    5. * https://github.com/AndreySkyFoxSidorov/UI_Deformation_of_images_shapes_and_contours
    6. * https://forum.unity.com/threads/ui-deformation-of-images-shapes-and-contours.544542/
    7. */
    8.  
    9. using UnityEngine;
    10. using UnityEngine.UI;
    11. using System.Collections.Generic;
    12.  
    13. [RequireComponent(typeof(CanvasRenderer))]
    14. [ExecuteInEditMode]
    15. public class UIImageCurve : MaskableGraphic
    16. {
    17.     public Texture texture;
    18.  
    19.     public override Texture mainTexture
    20.     {
    21.         get { return texture; }
    22.     }
    23.  
    24.     public int xSize, ySize;
    25.     public bool isEnableTime = false;
    26.     public float TimeScale = 10.0f;
    27.     public bool isEnablePerlinNoise = false;
    28.     public float ForcePerlinNoise = 1.0f;
    29.  
    30.     public AnimationCurve CurveY = new AnimationCurve();
    31.     public AnimationCurve CurveX = new AnimationCurve();
    32.     public float ForceCurve = 1.0f;
    33.  
    34.  
    35.     protected Vector2[] vertices;
    36.     protected Vector3[] verticesRun;
    37.     protected bool isInitVertices = false;
    38.     float AddedTime = 0.0f;
    39.  
    40.  
    41.     protected override void OnPopulateMesh(VertexHelper vh)
    42.     {
    43.         float minX = (0f - rectTransform.pivot.x) * rectTransform.rect.width;
    44.         float minY = (0f - rectTransform.pivot.y) * rectTransform.rect.height;
    45.         float maxX = (1f - rectTransform.pivot.x) * rectTransform.rect.width;
    46.         float maxY = (1f - rectTransform.pivot.y) * rectTransform.rect.height;
    47.  
    48.         var color32 = (Color32)color;
    49.  
    50.         if (xSize < 1) xSize = 1;
    51.         if (ySize < 1) ySize = 1;
    52.  
    53.         vh.Clear();
    54.  
    55.         if (isInitVertices && vertices.Length != (xSize + 1) * (ySize + 1))
    56.         {
    57.             isInitVertices = false;
    58.         }
    59.  
    60.         if (!isInitVertices)
    61.         {
    62.             verticesRun = new Vector3[(xSize + 1) * (ySize + 1)];
    63.             vertices = new Vector2[(xSize + 1) * (ySize + 1)];
    64.         }
    65.  
    66.         Vector2[] uv = new Vector2[vertices.Length];
    67.         Vector4[] tangents = new Vector4[vertices.Length];
    68.         Vector4 tangent = new Vector4(1f, 0f, 0f, -1f);
    69.         for (int i = 0, y = 0; y <= ySize; y++)
    70.         {
    71.             for (int x = 0; x <= xSize; x++, i++)
    72.             {
    73.  
    74.  
    75.                 float xTime = CurveX.Evaluate(AddedTime + (1.0f / (float)xSize) * (float)x) - 1.0f;
    76.                 float yTime = CurveY.Evaluate(AddedTime + (1.0f / (float)ySize) * (float)y) - 1.0f;
    77.  
    78.                 float yTimeNoise = 0.0f;
    79.                 float xTimeNoise = 0.0f;
    80.                 if (isEnablePerlinNoise)
    81.                 {
    82.                     yTimeNoise = Mathf.PerlinNoise(Time.time * (float)x, 0) * ForcePerlinNoise;
    83.                     xTimeNoise = Mathf.PerlinNoise(0, Time.time * (float)y) * ForcePerlinNoise;
    84.                 }
    85.  
    86.                 xTime = xTime * ForceCurve;
    87.                 yTime = yTime * ForceCurve;
    88.  
    89.                 if (!isInitVertices)
    90.                 {
    91.  
    92.                     vertices[i] = new Vector2((float)x, (float)y);
    93.                 }
    94.                 uv[i] = new Vector2((float)x / xSize, (float)y / ySize);
    95.                 tangents[i] = tangent;
    96.  
    97.  
    98.                 verticesRun[i] = new Vector2((minX + ((vertices[i].x + yTime + yTimeNoise) * ((maxX - minX) / xSize))), (minY + ((vertices[i].y + xTime + xTimeNoise) * ((maxY - minY) / ySize))));
    99.                 vh.AddVert(new Vector3((minX + ((vertices[i].x + yTime + yTimeNoise) * ((maxX - minX) / xSize))), (minY + ((vertices[i].y + xTime + xTimeNoise) * ((maxY - minY) / ySize)))), color32, new Vector2(uv[i].x, uv[i].y));
    100.             }
    101.         }
    102.  
    103.         int[] triangles = new int[xSize * ySize * 6];
    104.         for (int ti = 0, vi = 0, y = 0; y < ySize; y++, vi++)
    105.         {
    106.             for (int x = 0; x < xSize; x++, ti += 6, vi++)
    107.             {
    108.                 triangles[ti] = vi;
    109.                 triangles[ti + 3] = triangles[ti + 2] = vi + 1;
    110.                 triangles[ti + 4] = triangles[ti + 1] = vi + xSize + 1;
    111.                 triangles[ti + 5] = vi + xSize + 2;
    112.                 vh.AddTriangle(triangles[ti], triangles[ti + 1], triangles[ti + 2]);
    113.                 vh.AddTriangle(triangles[ti + 3], triangles[ti + 4], triangles[ti + 5]);
    114.             }
    115.         }
    116.         isInitVertices = true;
    117.  
    118.  
    119.     }
    120.  
    121.  
    122.     private void OnDrawGizmosSelected()
    123.     {
    124.         float minX = (0f - rectTransform.pivot.x) * rectTransform.rect.width;
    125.         float minY = (0f - rectTransform.pivot.y) * rectTransform.rect.height;
    126.         float maxX = (1f - rectTransform.pivot.x) * rectTransform.rect.width;
    127.         float maxY = (1f - rectTransform.pivot.y) * rectTransform.rect.height;
    128.         float disX = ((maxX - minX) / xSize) * 0.1f;
    129.         float disY = ((maxY - minY) / ySize) * 0.1f;
    130.         float dis = disX > disY ? disY : disX;
    131.  
    132.  
    133.         int[] triangles = new int[xSize * ySize * 6];
    134.         for (int ti = 0, vi = 0, y = 0; y < ySize; y++, vi++)
    135.         {
    136.             for (int x = 0; x < xSize; x++, ti += 6, vi++)
    137.             {
    138.                 triangles[ti] = vi;
    139.                 triangles[ti + 3] = triangles[ti + 2] = vi + 1;
    140.                 triangles[ti + 4] = triangles[ti + 1] = vi + xSize + 1;
    141.                 triangles[ti + 5] = vi + xSize + 2;
    142.                 Gizmos.color = new Color(0.0f, 0.0f, 0.0f, 0.6f);
    143.                 Vector3 p1 = verticesRun[triangles[ti]] + transform.position;
    144.                 Vector3 p2 = verticesRun[triangles[ti + 1]] + transform.position;
    145.                 Vector3 p3 = verticesRun[triangles[ti + 2]] + transform.position;
    146.                 Gizmos.DrawLine(p1, p2);
    147.                 Gizmos.DrawLine(p1, p3);
    148.                 Gizmos.DrawLine(p3, p2);
    149.                 Gizmos.DrawSphere(p1, dis);
    150.                 Gizmos.DrawSphere(p2, dis);
    151.                 Gizmos.DrawSphere(p3, dis);
    152.                 p1 = verticesRun[triangles[ti + 3]] + transform.position;
    153.                 p2 = verticesRun[triangles[ti + 4]] + transform.position;
    154.                 p3 = verticesRun[triangles[ti + 5]] + transform.position;
    155.                 Gizmos.DrawLine(p1, p2);
    156.                 Gizmos.DrawLine(p1, p3);
    157.                 Gizmos.DrawLine(p3, p2);
    158.                 Gizmos.DrawSphere(p1, dis);
    159.                 Gizmos.DrawSphere(p2, dis);
    160.                 Gizmos.DrawSphere(p3, dis);
    161.             }
    162.         }
    163.     }
    164.  
    165.     private void Update()
    166.     {
    167.         if (isEnableTime)
    168.         {
    169.             AddedTime += Time.deltaTime * TimeScale;
    170.             CurveX.postWrapMode = WrapMode.Loop;
    171.             CurveX.preWrapMode = WrapMode.Loop;
    172.             CurveY.postWrapMode = WrapMode.Loop;
    173.             CurveY.preWrapMode = WrapMode.Loop;
    174.  
    175.         }
    176.         else
    177.         {
    178.             AddedTime = 0.0f;
    179.         }
    180.  
    181.         if (isEnableTime || isEnablePerlinNoise)
    182.         {
    183.             SetAllDirty();
    184.         }
    185.     }
    186.  
    187. }
    188.  
    All source https://github.com/AndreySkyFoxSidorov/UI_Deformation_of_images_shapes_and_contours
    or
    https://github.com/AndreySkyFoxSido...images_shapes_and_contours/archive/master.zip
     
    Last edited: Aug 9, 2018
    AdemIssadWytopia and Hosnkobf like this.