Author Topic: LineRenderer equivalent (or integration methods) for nGUI?  (Read 3225 times)

sintua

  • Jr. Member
  • **
  • Thank You
  • -Given: 7
  • -Receive: 0
  • Posts: 63
    • View Profile
LineRenderer equivalent (or integration methods) for nGUI?
« on: July 05, 2017, 02:41:43 PM »
Heya! I recently discovered Unity's wonderful LineRenderer, but obviously this doesn't always play nice with nGUI.
I was wondering what everyone else/ArenMook use for drawing lines in nGUI?

I was previously using a very hacky collection of "I" and "L" sliced sprites and flipping them around, using some complex handlers to join their ends together... it mostly worked but it was painful and prone to breaking.

As the LineRenderers aren't part of nGUI, the main problems I'm finding are depth related and not being clipped by panels. I might be able to finagle/fake the depth management but no clue where to start with the clipping if it's even possible.

thank you for your time!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: LineRenderer equivalent (or integration methods) for nGUI?
« Reply #1 on: July 06, 2017, 05:58:26 AM »
Clipping in NGUI is done by shaders. A replacement shader is used to make it possible to clip something. You would need to create a custom shader for your line renderer to add support for clipping. Look at any of NGUI's clipped shaders for an example, such as Unlit - Transparent Colored 1.

sintua

  • Jr. Member
  • **
  • Thank You
  • -Given: 7
  • -Receive: 0
  • Posts: 63
    • View Profile
Re: LineRenderer equivalent (or integration methods) for nGUI?
« Reply #2 on: July 07, 2017, 01:39:32 PM »
I don't think I'm quite getting the implementation.
I see my atlas is using unlit/transparent colored. My Line is using a material I made called LineMat which has a sprite and is using the same shader, but is not clipped. I tried swapping the shader for Unlit- transparent colored 1, but then the line just disappears entirely. I even tried using the Atlas itself as a material to no effect.
I can get clipping to work for things like the Unity 2DSprite by changing the shader, but not the LineRenderer.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: LineRenderer equivalent (or integration methods) for nGUI?
« Reply #3 on: July 15, 2017, 05:58:53 AM »
NGUI passes some important data to the shader before drawing the material. Since you are not using an NGUI call here to draw your line, you need to pass the required values yourself. The passed values are "_ClipRange0" and "_ClipArgs0". They are set inside the UIDrawCall.SetClipping function.

DirtyHippy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 25
    • View Profile
Re: LineRenderer equivalent (or integration methods) for nGUI?
« Reply #4 on: November 06, 2017, 12:01:34 PM »
I wrote code to this a while back using ngui sprites.  Its not a line renderer, but it works and it operates under the confines of the ngui sprite drawing system (so depth, etc work) with the limitations of course of it being a line drawn as a sprite.

I don't use this code much but I never see any problems with it so I assume it still works ok.  Basically you create a sprite (for me just a solid white color sprite) with UILine attached, and then you can draw a line between two points.  I believe SetWidthAndHeight is an extension method I use so you will need to replace that with the width and height fields of the sprite.

In the code I use, I have a static method that draws lines and uses a predefined line template so I basically just give it a parent, start and end position and it draws the line to make things easy.

  1.     [RequireComponent (typeof (UISprite))]
  2.     public class UILine : MonoBehaviour
  3.     {
  4.         private UISprite    Sprite;
  5.         public Color        Color { get { return Sprite.color; } set { Sprite.color = value; } }
  6.         public int          Depth { get { return Sprite.depth; } set { Sprite.depth = value; } }
  7.  
  8.         private void Awake ()
  9.         {          
  10.             Sprite = GetComponent <UISprite> ();  
  11.         }
  12.  
  13.         public void Draw (Vector2 startPoint, Vector2 endPoint, int lineWidth)
  14.         {
  15.             if (endPoint.x < startPoint.x)
  16.             {
  17.                 var pointSwap         = startPoint;
  18.                 startPoint            = endPoint;
  19.                 endPoint              = pointSwap;
  20.             }
  21.  
  22.             var distance    = Vector2.Distance (startPoint, endPoint);
  23.             var difference  = startPoint - endPoint;
  24.             var angle       = Vector2.Angle (Vector2.up, difference);
  25.             var center      = new Vector3 (startPoint.x - difference.x / 2f, startPoint.y - difference.y / 2f);
  26.  
  27.             transform.localPosition = center;
  28.             transform.localRotation = Quaternion.Euler (0, 0, angle);
  29.             Sprite.SetWidthAndHeight (lineWidth, distance);
  30.         }
  31.     }
  32.