Author Topic: UISprite, UITexture rounded corner support!  (Read 2549 times)

mj.shin

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 1
    • View Profile
UISprite, UITexture rounded corner support!
« on: July 09, 2015, 11:33:53 PM »
Rounded corners are not officially support on UISprite, UITexture.
Only way to do that is using mask. but it's not easy and not available for UISprite and need additional mask image.

So, I made below.
Rounded corner support with mesh.








  1.   // UIBasicSprite.cs
  2.   //-------------------------------------------------------------------------
  3.   // add
  4.   [HideInInspector][SerializeField] protected float mRound = 0;
  5.  
  6.   // add
  7.   public float round {
  8.       get {
  9.           return mRound;
  10.       }
  11.       set {
  12.           mRound = value;
  13.           MarkAsChanged();
  14.       }
  15.   }
  16.  
  17.   // modify
  18.   void SimpleFill (BetterList <Vector3> verts, BetterList <Vector2> uvs, BetterList <Color32> cols)
  19.   {
  20.       // add
  21.       if (this.round  > 0) {
  22.           SimpleFillRound (verts, uvs, cols);
  23.           return;
  24.       }
  25.  
  26.       :
  27.  
  28.   }
  29.  
  30.   // add
  31.   void SimpleFillRound (BetterList <Vector3> verts, BetterList <Vector2> uvs, BetterList <Color32> cols)
  32.   {
  33.       Vector4 v = drawingDimensions;
  34.       Vector4 u = drawingUVs;
  35.       Color32 c = drawingColor;
  36.  
  37.       float width = v.z - v.x;
  38.       float height = v.w - v.y;
  39.       float uvWidth = u.z - u.x;
  40.       float uvHeight = u.w - u.y;
  41.       float uvRound = round * (uvWidth / width);
  42.  
  43.       int slice = 1;
  44.       slice = Mathf.CeilToInt(round / 2);
  45.       slice = Mathf.Min(20, slice);
  46.       float[] xList = new float[slice+1];
  47.       float[] yList = new float[slice+1];
  48.  
  49.       for (int i=0; i < slice; i++) {
  50.           float deg = -180f + (90f/slice) * i;
  51.           float x = Mathf.Cos(deg * Mathf.Deg2Rad);
  52.           float y = Mathf.Sqrt(1-(x*x));
  53.           xList[i] = 1+x;
  54.           yList[i] = y;
  55.       }
  56.       xList[slice] = 1;
  57.       yList[slice] = 1;
  58.  
  59.       // left
  60.       for (int i=0; i < slice; i++) {
  61.           float x1 = xList[i] * round;
  62.           float x2 = xList[i+1] * round;
  63.           float uvX1 = xList[i] * uvRound;
  64.           float uvX2 = xList[i+1] * uvRound;
  65.  
  66.           float y1 = round - round * (yList[i]);
  67.           float y2 = round - round * (yList[i+1]);
  68.           float uvY1 = uvRound - uvRound * (yList[i]);
  69.           float uvY2 = uvRound - uvRound * (yList[i+1]);
  70.  
  71.           verts.Add(new Vector3(v.x+x1, v.y+y1));
  72.           verts.Add(new Vector3(v.x+x1, v.w-y1));
  73.           verts.Add(new Vector3(v.x+x2, v.w-y2));
  74.           verts.Add(new Vector3(v.x+x2, v.y+y2));
  75.           uvs.Add(new Vector2(u.x+uvX1, u.y+uvY1));
  76.           uvs.Add(new Vector2(u.x+uvX1, u.w-uvY1));
  77.           uvs.Add(new Vector2(u.x+uvX2, u.w-uvY2));
  78.           uvs.Add(new Vector2(u.x+uvX2, u.y+uvY2));
  79.           cols.Add(c);
  80.           cols.Add(c);
  81.           cols.Add(c);
  82.           cols.Add(c);
  83.       }
  84.  
  85.       // center
  86.       verts.Add(new Vector3(v.x+round, v.y));
  87.       verts.Add(new Vector3(v.x+round, v.w));
  88.       verts.Add(new Vector3(v.z-round, v.w));
  89.       verts.Add(new Vector3(v.z-round, v.y));
  90.       uvs.Add(new Vector2(u.x+uvRound, u.y));
  91.       uvs.Add(new Vector2(u.x+uvRound, u.w));
  92.       uvs.Add(new Vector2(u.z-uvRound, u.w));
  93.       uvs.Add(new Vector2(u.z-uvRound, u.y));        
  94.       cols.Add(c);
  95.       cols.Add(c);
  96.       cols.Add(c);
  97.       cols.Add(c);
  98.  
  99.       // right
  100.       for (int i=0; i < slice; i++) {
  101.           float x1 = xList[i] * round;
  102.           float x2 = xList[i+1] * round;
  103.           float uvX1 = xList[i] * uvRound;
  104.           float uvX2 = xList[i+1] * uvRound;
  105.  
  106.           float y1 = round - round * (yList[i]);
  107.           float y2 = round - round * (yList[i+1]);
  108.           float uvY1 = uvRound - uvRound * (yList[i]);
  109.           float uvY2 = uvRound - uvRound * (yList[i+1]);
  110.  
  111.           verts.Add(new Vector3(v.z-x1, v.y+y1));
  112.           verts.Add(new Vector3(v.z-x1, v.w-y1));
  113.           verts.Add(new Vector3(v.z-x2, v.w-y2));
  114.           verts.Add(new Vector3(v.z-x2, v.y+y2));
  115.           uvs.Add(new Vector2(u.z-uvX1, u.y+uvY1));
  116.           uvs.Add(new Vector2(u.z-uvX1, u.w-uvY1));
  117.           uvs.Add(new Vector2(u.z-uvX2, u.w-uvY2));
  118.           uvs.Add(new Vector2(u.z-uvX2, u.y+uvY2));
  119.           cols.Add(c);
  120.           cols.Add(c);
  121.           cols.Add(c);
  122.           cols.Add(c);
  123.       }        
  124.   }
  125.  
  126.  
  127.  
  128.   // UIBasicSpriteEditor.cs
  129.   //-------------------------------------------------------------------------
  130.   // modify
  131.   protected override void DrawCustomProperties ()
  132.   {
  133.  
  134.       // :
  135.       if (type == UISprite.Type.Simple)
  136.       {
  137.           NGUIEditorTools.DrawProperty("Flip", serializedObject, "mFlip");
  138.  
  139.           // add
  140.           NGUIEditorTools.DrawProperty("Round", serializedObject, "mRound");
  141.       }
  142.       // :
  143.   }
  144.  
  145.  



ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UISprite, UITexture rounded corner support!
« Reply #1 on: July 12, 2015, 07:46:01 PM »
That's cool, but I would strongly advise you to create a separate class derived from UISprite that adds this functionality, not modify the existing one.