[Progress - 13th Feb] Power Wheel UI Node Animations

  • 3 Replies
  • 2725 Views
*

Mark

  • Wired Games
  • Administrator
  • Commander
  • *****
  • 284
    • View Profile
[Progress - 13th Feb] Power Wheel UI Node Animations
« on: February 13, 2016, 07:56:50 PM »
Hi all,

Every few days, as I have something new to share/show, I'll be posting my development progress here. This will allow those who are interested to follow the dev process more closely, to give feedback and discuss game design.

Right now I am working on animations for the Power Wheel, in order to give feedback to the player.

These will include animations for things like equipment being operated (used/fired) and taking damage, but I have started with something simpler, and that is a small animation on nodes when you change their power levels.


Before when you added or removed power from a connection, only the numbers in the nodes would change, and that is easy to miss. The short white flash on the nodes gives the player that little extra feedback, letting them know that the change was made.

As we spoke about before, mod-ability in UNION is of huge importance to us. That animation above was done using XAML, an XML format not unlike HTML, and here is the code for it:
Code: [Select]
<Storyboard x:Key="NodeRingChangeAnimation">
    <ColorAnimation
        Storyboard.TargetProperty="Stroke.(SolidColorBrush.Color)"
        From="#00000000" To="#FF999999" IsAdditive="True" Duration="0:0:0.15" AutoReverse="True"/>
</Storyboard>


In brief, this animation changes the Stroke (line) colour of the node's ring (the outer circle). It changes the colour of the ring (from invisble to a visible grey), but it is set to "IsAdditive" true, so instead of replacing the node ring's colour it adds to that colour. The AutoReverse setting means that the animation goes into reverse after it plays once, this gives the appearance of the node ring flashing.

It is all enclosed in a Storyboard. Storyboards allow you to mix lots of different animations together into a timeline.

We will have robust documentation available on our UI closer to launch, but it is all based on Microsoft's WPF. You can read more about it here.

Next up on my list of dev items are:
  • Changing the power being added/removed while dragging a connection, using the mousewheel or by pressing a number key on the keyboard (thanks to Blaze over on the Terran Stellar Navy forum for the suggestion).
  • Highlight valid nodes to connect to when dragging a connection.
  • Animations when equipment is used (the icon pulses blue) and when damage is taken (the background pulses red).


Thanks for reading!
« Last Edit: February 13, 2016, 09:11:01 PM by Mark »

*

Mark

  • Wired Games
  • Administrator
  • Commander
  • *****
  • 284
    • View Profile
Re: [Progress - 13th Feb] Power Wheel UI Node Animations
« Reply #1 on: February 13, 2016, 11:34:16 PM »
Here are the finished node power change animations. I also added in the ability to right-click, or double-left-click, on a reactor or equipment node to kill all power from/to it.

*

Blaze

  • Moderator
  • Lt. Commander
  • *****
  • 137
    • View Profile
Re: [Progress - 13th Feb] Power Wheel UI Node Animations
« Reply #2 on: February 21, 2016, 10:11:27 AM »
Looks nice. Maybe too subtle, but that may not be the case since it is an animated reaction of the system on the player's reaction, so it's expected.

*

Mark

  • Wired Games
  • Administrator
  • Commander
  • *****
  • 284
    • View Profile
Re: [Progress - 13th Feb] Power Wheel UI Node Animations
« Reply #3 on: February 21, 2016, 11:55:17 AM »
Yeah, I think it is quite subtle but in context it seems to work.