User avatar
Scherub
Topic Author
Posts: 141
Joined: 06 May 2014, 20:53
Contact:

[Unity] Using PathGeometry for a circular cooldown effect

21 Jan 2015, 21:46

Hi,

I'm currently working on an RPG Interaction test scene. Each usable item has a cooldown and I want to display a kind of circular progressbar that fills the whole rectangle where the item is placed inside. I created this in WPF with PathGeometry first and tried it then in Noesis but nothing appeared. Is this not supported or is there a different way to achieve this? :)
 
User avatar
sfernandez
Site Admin
Posts: 3008
Joined: 22 Dec 2011, 19:20

Re: [Unity] Using PathGeometry for a circular cooldown effec

22 Jan 2015, 18:01

Hi,

Unfortunately PathGeometry is not implemented in NoesisGUI so path animations can't be done directly in the xaml. But there are alternatives, one I can think now is to have an attached property that you can animate, and in the property changed callback you can regenerate the StreamGeometry associated with the Path that renders the cool down effect:
// Using 1.2 API
static class CoolDownPathAnimation
{
  public static DependencyProperty RotationProperty = DependencyProperty.RegisterAttached(
    "Rotation", typeof(float), typeof(CoolDownPathAnimation),
    new PropertyMetadata(0.0f, new PropertyChangedCallback(OnRotationChanged));

  public static float GetRotation(DependencyObject element)
  {
    return (float)element.GetValue(RotationProperty);
  }
  public static void SetRotation(DependencyObject element, float rotation)
  {
    element.SetValue(RotationProperty, rotation);
  }

  private static void OnRotationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  {
    Path path = d as Path;
    if (path != null)
    {
      var geometry = path.Data as StreamGeometry;
      if (geometry == null)
      {
        geometry = new StreamGeometry();
        path.Data = geometry;
      }

      using (var context = geometry.Open())
      {
        float rotation = GetRotation(path);
        // generate cool down geometry with current rotation value...
      }
    }
  }      
}
And in the xaml, you will have something like this:
...
<Storyboard x:Key="CoolDownAnimation">
  <DoubleAnimation
    Storyboard.TargetName="CoolDownPath"
    Storyboard.TargetProperty="(local:CoolDownPathAnimation.Rotation)"
    From="0" To="360" Duration="0:0:5"/>
</Storyboard>
...
<Path x:Name="CoolDownPath" local:CoolDownPathAnimation.Rotation="0" Fill="#80000000"/>
...
 
movra
Posts: 70
Joined: 02 Apr 2014, 20:35

Re: [Unity] Using PathGeometry for a circular cooldown effec

22 Jan 2015, 18:12

On a sidenote, Noesis.DependencyPropertyChangedEventArgs doesn't contain NewValue and OldValue, does it?

https://msdn.microsoft.com/en-us/librar ... deventargs

https://msdn.microsoft.com/en-us/librar ... .110).aspx
 
User avatar
sfernandez
Site Admin
Posts: 3008
Joined: 22 Dec 2011, 19:20

Re: [Unity] Using PathGeometry for a circular cooldown effec

22 Jan 2015, 18:22

On a sidenote, Noesis.DependencyPropertyChangedEventArgs doesn't contain NewValue and OldValue, does it?

https://msdn.microsoft.com/en-us/librar ... deventargs

https://msdn.microsoft.com/en-us/librar ... .110).aspx
Not yet, we are going to expose them for the 1.2 API.
 
User avatar
Scherub
Topic Author
Posts: 141
Joined: 06 May 2014, 20:53
Contact:

Re: [Unity] Using PathGeometry for a circular cooldown effec

22 Jan 2015, 18:28

@sfernandez: Thanks, I'll give it a try! :)
 
User avatar
ai_enabled
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: [Unity] Using PathGeometry for a circular cooldown effec

23 Jan 2015, 06:04

That's how this effect done in our game:
Image
Image

It's done by utilizing rectangle with semi-transparent fill and updating clip (StreamGeometry) for it every time the angle changed.

The update code maybe not very elegant, but works flawlessly and fast:
         float angleRad = // provide your angle in radians
			float angleDeg = angleRad * (float)(180f / Math.PI);

			var w = this.width;
			var h = this.height;

			Vector2 point = new Vector2(w / 2 + (w * 2 * Mathf.Cos(angleRad)), h / 2 + (h * 2) * Mathf.Sin(angleRad));

			using (StreamGeometryContext ctx = this.clipGeometry.Open())
			{
				ctx.BeginFigure(new Point(w / 2, 0), true);
				ctx.LineTo(new Point(w / 2, h / 2));
				ctx.LineTo(new Point(point.X, point.Y));

				if (angleDeg < 45)
				{
					ctx.LineTo(new Point(w, 0));
				}

				if (angleDeg < 180)
				{
					ctx.LineTo(new Point(w, h));
				}

				if (angleDeg < 270)
				{
					ctx.LineTo(new Point(0, h));
				}

				if (angleDeg < 315)
				{
					ctx.LineTo(new Point(0, 0));
				}
			}
			// all done
You need to add Rectange with name "Rectangle" to this control XAML, set some fill for it.
Then in OnPostInit you need to set clip for it:
                var rectangle = this.FindName("Rectangle").As<Rectangle>();
                this.clipGeometry = new StreamGeometry();
                rectangle.Clip = this.clipGeometry;
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
Scherub
Topic Author
Posts: 141
Joined: 06 May 2014, 20:53
Contact:

Re: [Unity] Using PathGeometry for a circular cooldown effec

26 Jan 2015, 18:39

Hi,

I've finally found the time to try your solution and it works very well. Thank you very much! :)
 
elecman
Posts: 90
Joined: 20 Jul 2014, 04:28

Re: [Unity] Using PathGeometry for a circular cooldown effec

24 Feb 2015, 02:34

Any update on supporting PathGeometry? I need it to get clipping paths to work which are exported from Inkscape.
 
User avatar
jsantos
Site Admin
Posts: 3939
Joined: 20 Jan 2012, 17:18
Contact:

Re: [Unity] Using PathGeometry for a circular cooldown effec

24 Feb 2015, 17:14

Not for v1.2.0. This is low priority for now, mainly because PathGeometry is very inefficient. It is a lot better using StreamGeometry. Cannot you convert your geometry to a set of StreamGeometries that can be animated separately? Or do you need each segment to be animated independently?
 
User avatar
jsantos
Site Admin
Posts: 3939
Joined: 20 Jan 2012, 17:18
Contact:

Re: [Unity] Using PathGeometry for a circular cooldown effec

24 Feb 2015, 17:50

Please, open a new thread for this. This one is closed and accepted.

Who is online

Users browsing this forum: Ahrefs [Bot] and 12 guests