Forums | NoesisGUI

Hi! I'm an artist how is trying to recreate mirror's edge 1 main menu for learning purposes. I'm trying to figure out how to create the red streaks ransom wave animation. It looks like a soft wave motion, maybe animated with a noise texture? Is this effect something I can achieve in Noesis or something I need to animate in unreal? or even code? Thank you !

Hi ambly! Dorian here!

This is a super fun exercise to take on. There are so many ways you could approach achieving this wave effect -- exactly as you said, you could do it in Code, you could do this in Unreal, as a Material for example, or even as a Shader if desired.

However, as a Designer myself, to be able to do everything within Noesis Studio without any external support from other departments, I would turn to our Path Animation Toolset to achieve this type of effect really easily. Here's the result of what I was able to achieve in about 10 min:



Now to explain a bit more about the Path Animation features I leveraged: any vector Path in Noesis Studio can not only be animated as a whole, but we also offer the ability to key movements of both Path Points (Anchor Points) and Path Handles (Bézier Curves) themselves.

So, as long as you have a rectangle as a Path ready on the Stage, this can all really easily be achieved by creating a Storyboard from the Animation Panel, ensuring that 'Record' is on (red frame around the Stage), and then all you have to do is just click and drag the Path Point or Path Handle(s) to where you want them to go, at the time-frame you want along the Timeline.

It will then not only key their new positions onto the Timeline at the Playead's position, but will also automatically interpolate them from the previously-keyed position(s), making the smooth wavy motion you referenced, super easy to manually achieve. I also set the entire Storyboard animation to AutoReverse, and to Repeat, so to play the smooth movement back and forth forever.

Here's a little demo of the Path Animation process in-action, as if I were to add a fourth movement to the animation:



And then, to finish it off, all you have to do is to create a Trigger from the Interactions Panel to fire off this animation when it's Loaded in, and that's it!

I've attached the Studio Project file I made here if you want to take a closer look: Let me know if you have any questions about this and I'd love to continue!

- Dorian

Thank you Dorian! I'm working in you file trying to recreate the animation. I can make a new Storyboard and make the the vectors move. However, I'm struggling with this part: create a Trigger from the Interactions Panel to fire off this animation when it's Loaded in. I have never worked with Triggers and can't get it to work. I also can't find any previous triggers you might have made to make them move. Are there any recourses out there that might explain this or a tutorial? Thank you :)

Hi again ambly!

Absolutely no worries at all, happy to guide you through this!

So one thing that's important to note from the get-go is that by default, Triggers are only able to target things within the same scope as they are in (in this case, the 'scope' is the XAML file where the wave animation takes place). So, for a Trigger to launch a Storyboard, it must exist in the same file as where the Storyboard is created.

So what this means, is that in the file I sent over, our very first step is going to be to open the file where the Wave Storyboard Animation exists; so we'll start by opening the WaveLine.xaml Component from the Assets Panel (Ctrl+1).

Once that file is open, we can then just verify that our animation is indeed in this file. To do so, we'll head to the Animation Panel (Ctrl+4), and under the Storyboards Tab, we'll see that we indeed have an Animation_Wave_Idle Storyboard. So far, so good!

Next, still with Waveline.xaml open, we'll then head to the Interactivity Panel (Ctrl+3), and the first tab open by default, the 'Triggers' tab is exactly where we want to be.

Within this, we can see that we have an EventTrigger that I named "OnComponentLoad_PlayWaveIdleAnimation".

If we click on this EventTrigger, in the Properties Panel on the right of the application window, we can see the details of its mechanics and what exactly it does.

I'll explain what's displayed in this panel line by-line. However, I'll also note that although we'll only be talking about the EventTrigger for now (since this is what this file uses) there are many other Trigger types available. To see the other types, you can select an Element in the Hierarchy (Layer Navigator), and then press the '+' (Add Trigger) icon on the right of the Triggers Panel.

So let's jump into the options displayed:


Source: This simply dictates what Element you are listening for to launch your Trigger. In this case, since we created the Trigger as part of the 'ComponentRoot', the <Self> option simply means to 'listen to itself'.

When you create your own Triggers, the very first action you will do is to select an Element in the Hierarchy (Layers Navigator), and then create a Trigger from the Triggers Panel. The Element you have selected before you press the '+' icon in the Triggers Panel is what will dictate within which Element the Trigger is created. This is why in our example here, just above the "OnComponentLoad_PlayWaveIdleAnimation" there is a header that reads 'ComponentRoot'. It is stating within which Element this specific Trigger was created.

Event: This dictates what causes the Event to fire. You have many options available here to pick from, but in our case "Loaded" just means that when the targeted Element (which in our case is the Component Root) is Loaded into the interface, the Trigger will fire.

Conditions: This is a bit more advanced, and not used in this example, but this is where you can set conditions for the Trigger to fire. For example, you could say 'Trigger when it Loads, but only IF the Height of the Page exceeds 1080px'.

Actions: This is where we set what happens when the Trigger is fired. We have many options here. However in our case, what we are interested in, is to start playing a Storyboard when the Trigger is fired.

So, to do this, the 'ControlStoryboardAction' Action is used. Within this Action, you'll also have a set of sub-options to set:

Actions: ControlStoryboardAction: Option: Sets what action you want to do on the Storyboard. In our case, we want the Storyboard to start playing when the Trigger is fired, so 'Play' is the Option to pick here.

Actions: ControlStoryboardAction: Storyboard: Sets which Storyboard to have the Action above apply to. This is where we select the Storyboard we created in this Page.

Actions: ControlStoryboardAction: Enabled: Somewhat self-explanatory, but just provides an option to Enable or Disable this.

And that's about it!

Let me know if you need any more help getting things set up on your end, or if you have any other additional questions!

- Dorian

Yes! I got it to work, thank you. A small feedback is that it's hard and clumsy to work with the paths and points, from someone who is coming from photoshop and Illustrator. Is that going to be work on? And are there any future plans on adding noise generation, with tiling and animation. Maybe animation controlling with noise would be cool.

But again, I got it to work and can now add animations in. You been a big help and I really appreciate it. Thank you :)

Hi ambly,

Thank you for following-up on this -- I'm glad it all worked out!

If possible, I'd love to hear a little bit more about your friction points with Path manipulations in Studio compared to PS and AI --- was there anything in particular you found to be of notable difficulty in the handling of vector shapes? Any details you can provide will be super useful to us to work on improvements.

In terms of your other comment on procedural distortion tools; although this comes with some complexity, this is something we've definitely talked about and have appetite in exploring further.

Currently, we do have a small collection of Shaders and Effects included out-of-the-box that give some taste of some of what we have that gives somewhat an idea of what can be done in this direction:
- Our Shaders are found under the Colour Picker's 'Image Brush' tab, under the 'Shader' Property,
- Our Effects are found in the 'Appearance' section of an Element's Properties.

However, what I will also add as the beauty of what we offer too, is that Noesis is completely extensible too --- so what this means in practice, is that if there is something you want for your projects that is not included by default, you have the ability to extend it with your very own custom Shaders and Effects, and have them be just as easily selected, used, and basically indistinguishable from any of the native default tools, This does require some code support, but it absolutely exists as an option at this moment!

Thank you very much for all of these excellent comments and feedback! We appreciate it a lot!

- Dorian

So an easy thing is just that I find the snap a bit too aggressive. It just snaps to easily in my opinion.

Another nice feature I would enjoy is the view guidelines you can find in adobe when you press ctrl + R and pull in guidelines. That would be nice.

You can move the handles independently, that is good, but I would like to be able to move them was 1 straight line as well if possible (Maybe I can but don't know how?)
So for a reference I created a heart in noesis and Illustrator the same way. In noesis it took me around 5 minutes (04.51min) and illustrator took me 02:30min. OFC it can be just that I'm used to Illustrator more, but also being able to move both handles at once will defiantly speed up the time.

Now for my real struggle. I started creating points, animating them to move from top to bottom ever 1 sec. Looks good. Then I add handles to soften the animation and here I don't know what is going on. I think the handles move independent from the point if they are created after animating the point. I have to re animate the handles individually, as well as re animating the point. And the more points I add handles to, the move errors in the animation pop up. I don't know what is going on but the more I try to fix the worse it gets. I'll try to upload my video so you can see what I do.https://vimeo.com/manage/videos/1124147316

Hi ambly!

First of all, I just wanted to thank you so, so much for what you sent over. We got together as a team this morning specifically to go over everything you reported, and we are beyond appreciative of the time and care you spent to assemble all of this.

So without further ado, I'm here to backbrief, and go through point-by-point!

PART I

1) Snapping Too Aggressive
By default we snap Paths Points and Path Handles to pixels and Elements, however if this behaviour is undesired on a case-by-case basis, Snapping can be disabled on-the-fly by holding the [Ctrl] key on the keyboard whilst already clicking-and-dragging a Path Point or Path Handle. 🙂

We have a couple other similar handy shortcuts related to Path manipulation that you can check out in our 📘Path Manipulation Application Shortcuts Documentation.

2) Request for Guidelines
We agree with you!
This is now added to our Tracker and will be something we will look to add.
You can follow the proposal, and progress of it here: #4400

3) Ability to move Path Handles as a Single Unit
Good news! This is something we support!
You can find a bit more information on this in our 📘Curve Handle Mirroring Documentation Section.
In Studio itself, this is something you can access from the Properties Panel when any Path Point is selected. It looks like this:


A cool little shortcut too, is that if you are in a 'Mirrored' mode, if you hold [Alt], you can easily, and rapidly switch to a mode where each Handle can be moved independently.

----------

PART II

Now, I'll move onto everything in the super helpful video you made for us:

1A) What is Happening

The majority of the friction points encountered are related to operations in which a Path geometry is fundamentally changed from its original 'rig', after it was animated.
These 'fundamental changes' include the operations of Adding/Removing Path Point, and/or Converting Path Points from 'Straight Connections' to 'Béziers with Handles'.

This can be problematic for animations, because if for example, a shape is already animated, and a new Path Point is added to its geometry, there really isn't a way for an application to 'know what to do' with this new Path Point across all keyframes where it wasn't present before, but now suddenly features.

The best the machine can do in these cases, is an approximation/interpolation, relying on the order of each Path Point along its total shape.

As a result of this, since the animation is based upon an initial collection of Point positions in a certain order, adding Path Points can disturb this, and unfortunately produce some of the unpredictable results you encountered.

(For reference, the position of each Path Point in the wider 'order' of all path Points can be seen in the Properties Panel, with a Path Point selected:)
1B) How to Resolve This
Ideally, all of the Path Points that make up an overall Path shape are cemented before animating them.
Then, the animation work should exclusively encompass changing the positions of Path Points and/or Path Handles without changing the fundamental 'rig' of the shape itself.

As for the other things you pointed out, that are not a result or side-effect of the above factors:

2) [0:44] Path Point Not Aligned to What's Being Rendered On-Stage
This is a bug that we will fix.
You can follow the progress of its resolution here: #4402

3) [5:58] Difficulty Grabbing Path Points and Instead Grabbing Handles
We will make some changes here to resolve this as well.
You can follow the progress of its resolution here: #4403

Thank you once again so much for everything you put into this; we'll start working our way through the action items for us.
In the meantime, let us know if there's any more you feel strongly about, or if there are any other new things to flag to us, or if you have any other questions.

Until then, wishing you a fantastic weekend from all of us over here!

- Dorian