Это видео недоступно.
Сожалеем об этом.

UI ANIMATION: Everything You Need to Know | UE4 Tutorial

Поделиться
HTML-код
  • Опубликовано: 1 авг 2024
  • In this UE4 tutorial I will show you everything you need to know to create UI animations in Unreal Engine! Widget animations are very versatile and animated widgets can go beyond just basic widgets, so today we will go over how they work and how to create them, how to play animations and how to use materials as animations!
    ♥ Patreon: / nitrogendev
    I have collaborated with EF EVE to bring you the best volumetric video products out there. If you're interested in that, make sure to check them out using the code "NITROGEN10": www.ef-eve.com/
    Some of you requested me to make a video on more animated UI, so I made sure to cover both basic animations and more complex ones and how you can achieve them yourself. While I didn't dive into overly complicated animations, the general idea is that all complex (this really is an overstatement, what I really mean by complex is combined) animations are a combination of smaller widgets that are animated themselves. Unless you want to use materials for animations, which I covered as well!
    Sources:
    SLOW IN & SLOW OUT - The 12 Principles of Animation in Games by New Frame Plus: • SLOW IN & SLOW OUT - T...
    Skill Tree System Tutorial: • How To Create a Skill ...
    Music used in this video:
    Like Saturn - Midnight Sailing
    All content on Nitrogen is available for free. We, as a community, support completely free education available to everyone. Any support is appreciated for me to keep making content for free and improving it.

Комментарии • 69

  • @NitrogenDev
    @NitrogenDev  3 года назад +7

    If you're here to know my answer from the question in the video, it's easing out :)
    Make sure to check out this video to learn more about the technical side of widgets in UE4: ruclips.net/video/NZHWbl8IB1Y/видео.html
    As well, be sure to go over to Daniel's channel New Frame Plus: ruclips.net/user/newframeplus . His videos are amazing and you should definitely give them a go!

  • @colleenzhang648
    @colleenzhang648 3 года назад +28

    Now a UI designer can run her own UI animation in the engine! Thanks a lot, man! We really need more UI material even motion graphic animation tutorials.But I can't find more information about this area, hope to see yours more! Really really thank you a lot!

    • @NitrogenDev
      @NitrogenDev  3 года назад

      Sure thing! I'm happy to see that this video helped you!

  • @coffee-beast-99z
    @coffee-beast-99z 2 года назад

    This tutorial was honestly, so great. Thank you for being an amazing human and creating fantastic content!

  • @QuantzzArt
    @QuantzzArt Год назад +4

    Specifically the materials part of this tutorial is something everyone making their first UI definitely needs to see because there's so little documentation on the art side of UMG, would be great if there was a followup video going into more detail on making cool dynamic materials for your menus

  • @MadpolygonDEV
    @MadpolygonDEV 3 года назад

    Im halfway in and its awesome so far 🙏

  • @madiac4583
    @madiac4583 3 года назад +2

    Love all these tuts man!!

    • @NitrogenDev
      @NitrogenDev  3 года назад +1

      I'm really happy to hear that!

  • @primitivepatterns
    @primitivepatterns Год назад

    awesome tutorial, thank you so much!

  • @onevoltten6845
    @onevoltten6845 3 года назад

    Thanks for the tutorial!

  • @couture1054
    @couture1054 Год назад

    Great tut!

  • @syno3608
    @syno3608 2 года назад

    Super Helpful For UI . Thanks

  • @zuchmiyoff4734
    @zuchmiyoff4734 Год назад

    indescribably useful, thank you

  • @Admin-oe8zj
    @Admin-oe8zj Год назад

    that was relly great..thanks

  • @soupinin7128
    @soupinin7128 3 года назад

    Amazing! keep 'em coming

  • @conliviu
    @conliviu 3 года назад +1

    Another one well done! 👍🏻 Long live the squares😉

    • @NitrogenDev
      @NitrogenDev  3 года назад

      Nothing better than good ol' squares.

  • @adrienhartman6811
    @adrienhartman6811 3 года назад

    You make tutorials that are so easy to understand!

    • @NitrogenDev
      @NitrogenDev  3 года назад

      Good to hear, thanks for the feedback!

  • @home-dream-records1399
    @home-dream-records1399 2 года назад +1

    Amazing ! I hope to see more from you.
    Please do more tutorials like this.

    • @NitrogenDev
      @NitrogenDev  2 года назад +1

      Happy to see you liked this tutorial! Unfortunately, I no longer make Unreal content. Instead, I now create video essays about game design.
      If that's also something you're interested in, I hope you'll stick around!

  • @anjoomfaisal
    @anjoomfaisal 7 месяцев назад

    you can do so much with this! :D

  • @amuro9649
    @amuro9649 Год назад

    great job

  • @elbozomemeoriginals7296
    @elbozomemeoriginals7296 3 года назад +1

    this really helps and my computer is not screaming in pain thank you

    • @NitrogenDev
      @NitrogenDev  3 года назад

      Might want to get it checked if it screams. Jokes aside, I'm happy to see that this helped you!

  • @Lv7-L30N
    @Lv7-L30N Месяц назад

    Thank you

  • @JDPhoenix
    @JDPhoenix 2 года назад +1

    Hey Nitrogen, I got a question. When you're in another blueprint and you want to cast to the user interface, what would you put in the object input node? I'm attempting to grab one of the animations in the interface and have it play on command.

  • @rifat.ahammed
    @rifat.ahammed Год назад

    Thank You

  • @2danimm
    @2danimm 10 месяцев назад

    thanks a lot :)!

  • @uegamedev
    @uegamedev Год назад

    Cool! :)

  • @MadpolygonDEV
    @MadpolygonDEV 3 года назад

    My man, you accepted my request! Manz thanks

    • @NitrogenDev
      @NitrogenDev  3 года назад +1

      I hope that it clarified any questions about animations! :)

  • @laureanogtt2171
    @laureanogtt2171 2 года назад

    wow, how did you change the execution path in the loop to get it nicer?? algo, I'm getting nothing with the "call play animation (5:35) unreal 4.27

  • @mokshithpb7991
    @mokshithpb7991 3 года назад +1

    Really helpfull 🙂

  • @desarrollou71x72
    @desarrollou71x72 Год назад

    hi, im having problems with the Aspect Ratio and Resolution for my mobile game, i know that i can use Anchors... but my UI has animations, if one of my animation moves from 0, 0 to 1024, 768 down-right corner it will works fine on a device supporting that resolution, but if i try with another device with different resolution the animation ends outscreen.... do you know a way to solve this?
    thanks.

  • @zimai
    @zimai Год назад

    How can the front line beam be made into a dynamic material?

  • @Your_Average_Black
    @Your_Average_Black Год назад

    What if I wanted to perform an animation going in, the interface stays there until the button is clicked again and it animates going out?

  • @Animamundi24
    @Animamundi24 3 года назад

    Excuse me, can material be set on non-animated HUD elements, such as Progress Bars or Text Blocks? Want to try to add an emissive color-shift glowing texture sample, slightly moved by panner, as fill color of progress bars

    • @NitrogenDev
      @NitrogenDev  3 года назад

      Yes, you can. Wherever there is an image input, you can supply that with a material.

  • @user-mg2ik6qx3p
    @user-mg2ik6qx3p 20 дней назад

    how to create the shining material?

  • @db3da591
    @db3da591 2 года назад +2

    Hello Nitrogen! I've followed step by step the animation blueprint part but when i start the game (simulate) the animation does not start/work. Why?

    • @db3da591
      @db3da591 2 года назад +1

      Ok, i've already found a solution: All you have to do is to go in your Graph section, and link you Event Construct to a Play Animation node.

    • @davideotape661
      @davideotape661 2 года назад

      This helped me, thank you

  • @3Danful
    @3Danful 2 года назад

    Hi there.
    Ive made a simple animation with my UI, but im stuck with the coding at 5:09. I finished this video, but nothing happens. Do i add "inputs" within the "Custom Event"?
    My animation doesnt play. (its a simple blinking animation in my Mainmenu),

    • @3Danful
      @3Danful 2 года назад

      Fixed it. It isnt the "Custom Event" you want, its the "Event Construct". Just replace it. now it works :)

  • @JimmeeAnimAll
    @JimmeeAnimAll 3 года назад +1

    Thank You for the tutorial , it's pretty cool, but I might missed it , but I think You didn't show how to call this custom event function to play animation in hud. I know how to call hud on viewport with hud content , but when I load this example , its empty and there is no animation whatsoever.

    • @NitrogenDev
      @NitrogenDev  3 года назад

      I can't quite understand what you mean by calling a custom event to play animation in HUD. Can you say exactly to which custom event you're referring to?

    • @JimmeeAnimAll
      @JimmeeAnimAll 3 года назад

      @@NitrogenDev thank You for caring. In 5:05 You create custom event and hook up nodes , but compiling just first part wouldn't play animation inside the hud. I haven't done this queue part, but still, I assume, and as far as I "understand" blueprints, I have to call out this custom event "Play anim" prior to start animation.

    • @NitrogenDev
      @NitrogenDev  3 года назад +1

      @@JimmeeAnimAll If calling "Play anim" isn't playing an animation, make sure that the event is actually called, that you hooked up the correct animation and that your animation does an easy to spot change, so you can see if it's truly working or not.

    • @JimmeeAnimAll
      @JimmeeAnimAll 3 года назад +1

      @@NitrogenDev "make sure that the event is actually called" that's the thing :) . I kind of didn't know how to do it, but I've found similar example with calling event with [a key pressed Event] hooked in player's blueprint. Thank You anyway for tutorials and reply

    • @NitrogenDev
      @NitrogenDev  3 года назад

      @@JimmeeAnimAll Good to see you figured it out. :)

  • @lordofthelair6716
    @lordofthelair6716 2 года назад

    Not bad at all

  • @futurelight5536
    @futurelight5536 3 года назад

    I am searching for about 4 months ago for ui animation & popup animation and ui materials but there are very small number of tourtal
    Can you make more?
    And i missed to say "you are legend"

    • @NitrogenDev
      @NitrogenDev  3 года назад +1

      If I see that others are interested in this, then for sure I will make other videos on this topic.

    • @timsonss
      @timsonss 3 года назад

      @@NitrogenDev I am interested in this. Hopefully I count :D

    • @NitrogenDev
      @NitrogenDev  3 года назад

      @@timsonss definitely haha.

    • @timsonss
      @timsonss 3 года назад

      @@NitrogenDev nice :D

  • @josephvanwyk2088
    @josephvanwyk2088 3 года назад

    Cool, I have a very advance question - whats the pipeline process for having talking heads on the UI ? You know, like the ones you see in Anno, Settlers, Commandos - they all had UIs with a 3D character head with dialogue & reaction animations. Commandos 2 had characters that bleed (show injuries). How complex is this sort of thing? (3d modeling excluded).

    • @NitrogenDev
      @NitrogenDev  3 года назад

      That is certainly not an easy system to create. The way I would probably do it is using an initial speaker with unique properties that are used to drive the reaction and other properties of the second speaker, which then go back to the first one. For the bleeding characters I would simply store a boolean or integer (depending on how many levels of injuries you want) and switch between 3D models.

  • @mehmetkaraer.
    @mehmetkaraer. 3 года назад

    Accidentally I closed my timeline how can i open that thing again.

    • @NitrogenDev
      @NitrogenDev  3 года назад +1

      I might not be 100% accurate on this one because I don't have my Unreal open up right now, but I believe you can do that by going to the "Window" panel at the top, then search for "timeline" and a new timeline will open, which you can dock to its initial position.

    • @mehmetkaraer.
      @mehmetkaraer. 3 года назад

      @@NitrogenDev Thanks mate i found it

  • @buddelexperte5956
    @buddelexperte5956 3 года назад +1

    Pretty nice tutorial but for me you were a bit too much not explaining when in the material part

  • @futurelight5536
    @futurelight5536 3 года назад

    Any one reading this do you know the comments doesn't cost anything so comment why us don't support the development teachers so now just type anything even if it is only❤(sorry for my English)

  • @robowe
    @robowe 3 месяца назад

    understood everything up until he pulled up the materials 😂