- Видео 32
- Просмотров 38 643
Scott H
Добавлен 29 янв 2008
#NotGDC2022 - UMG Layout Techniques for Unreal Engine
This was an impromptu talk given during GDC (for those of us who couldn't attend) called #NotGDC
----
Slides/Prototype: www.figma.com/proto/OLUow9pZhhU4YaykXUEgyq/NotGDC2022?page-id=0%3A1&node-id=1%3A92&viewport=323%2C48%2C0.39&scaling=min-zoom&starting-point-node-id=1%3A92
----
00:00 Introduction
2:40 Preview
3:30 Web Thought Process
6:50 UMG Thought Process
11:22 Web vs UMG Overlapping Patterns
12:45 Takeaways
14:30 Live Demo in UE5
40:58 Q&A
----
Follow me on Twitter: superscott597
Join the BenUI Discord: discord.benui.ca/
----
Slides/Prototype: www.figma.com/proto/OLUow9pZhhU4YaykXUEgyq/NotGDC2022?page-id=0%3A1&node-id=1%3A92&viewport=323%2C48%2C0.39&scaling=min-zoom&starting-point-node-id=1%3A92
----
00:00 Introduction
2:40 Preview
3:30 Web Thought Process
6:50 UMG Thought Process
11:22 Web vs UMG Overlapping Patterns
12:45 Takeaways
14:30 Live Demo in UE5
40:58 Q&A
----
Follow me on Twitter: superscott597
Join the BenUI Discord: discord.benui.ca/
Просмотров: 24 673
Видео
Create and Render Level Sequences in Unreal Engine 4
Просмотров 8 тыс.3 года назад
This is a quick tutorial for my classmates showing how to set up some cameras in a level sequence within UE4 and then how to render the sequence to a video file when presenting work. Enjoy!
Diablo IV Inventory Prototype - Figma + Principle for Mac
Просмотров 4,2 тыс.4 года назад
This prototype demo is the companion to part 2 of a Medium series by Scott Hernandez, which examines the inventory interface for the upcoming game Diablo 4 and seeks to both recreate and improve upon certain elements of Blizzard's proposed UI. It was created using designs made in Figma and prototyped in Principle for Mac. Eventually, this will be implemented in Unreal Engine 4 as a fully functi...
Sekiro Boss - Guardian Ape
Просмотров 535 лет назад
It was such a good feeling to finally put this ape down. It was definitely a battle of attrition in his second form and I used up pretty much all of my equipped items, but I barely managed to put him down.
Sekiro Failed Attempts - Guardian Ape
Просмотров 1005 лет назад
The Guardian Ape was giving me a lot of trouble, especially in his second form. The Terror yell happens way too fast and almost always gets me if I don’t hear the tell immediately so I can react and run away.
Sekiro - Phantom Samurai
Просмотров 625 лет назад
While searching for Tengu in the Sunken Valley, I came across this area with three phantoms. These guys were super cheap ganging up on me, but at least I got them on the first try. The samurai enemies in this game are brutal.
Sekiro Sub Boss - Snake Eyes Shirahagi
Просмотров 145 лет назад
Shirahagi was just as bad as Shirafuji, but maybe a bit more frustrating because of the stupid canon dudes aggroing in the distance. After getting rid of them, I finally put her down.
Sekiro Sub Boss - Shinobi Hunter Enshin
Просмотров 105 лет назад
I’m glad I finally figured out how to properly use the Mikiri counter, because unblockable thrust attacks suck.
Sekiro Sub Boss - Shichimonji Warrior
Просмотров 175 лет назад
That stupid spirit beam attack has an overly large hit box. Also, Terror sucks. I wish it didn’t exist. I think I dislike Terror more than Frenzy in Bloodborne.
Sekiro Sub Boss - Seven Ashina Spears
Просмотров 115 лет назад
Seven Ashina Spears was the hardest enemy I fought for quite some time. He just whooped me every time over and over and over. I died over 20 times to him, and he had me in a rage every time. This guy almost broke me. I’m glad I finally beat him or I don’t think I would have kept playing Sekiro. Eventually I left to do other things, came back once in a while, and then finally got him by using fi...
Sekiro Sub Boss - Snake Eyes Shirafuji
Просмотров 135 лет назад
This sub boss was giving me a ton of trouble. She must have killed me over 10 times before I finally got her.
Sekiro Boss - Genichiro
Просмотров 205 лет назад
This was my first *intentional* attempt to beat Genichiro. I accidentally triggered the arena previously and got slaughtered. I came back after exploring more and tried again, beating him on the first return attempt.
Death's Holiday Motion Showcase (Dreams Beta)
Просмотров 3735 лет назад
For my fourth creation in the Dreams Creator Beta, I wanted to mess with the camera and some basic timeline keyframing, essentially making a little cutscene using only one camera. I used the original sculpt's single light source to be the focal point, added fog, background elements, particle effects, a portal from the afterlife, and other small details to try and showcase this great sculpt by m...
A New Home (Dreams Beta)
Просмотров 4935 лет назад
This was my fourth creation in Dreams for PS4. I made it in a little less than two days for the Global Game Jam. indreams.me/dream/bXvcpDpacmI Music by X_DISARMED_PRO_X
Music Player (Dreams Beta)
Просмотров 6925 лет назад
This was my second creation in Dreams. I wanted to test the UI tools and interface capabilities of the engine, as well as test some basic animation and connect a visualizer with music. The visualizer proves to be very tedious and very dependent on the music, but it was a very useful exercise. indreams.me/dream/bTVw7UjVrFE Special thanks to Dreams user phort, who helped me with 90% of the logic ...
Boss #12 - Ebrietas, Daughter of the Cosmos
Просмотров 39 лет назад
Boss #12 - Ebrietas, Daughter of the Cosmos
Boss #14 - Micolash, Host of the Nightmare
Просмотров 19 лет назад
Boss #14 - Micolash, Host of the Nightmare
How do you accually have a background of a Horizontal box?
Can you provide a time stamp where you’re seeing this? It’s most likely that the horizontal box is inside of an Overlay box, with an image behind the horizontal box.
Thank you so much for this! I had such a hard time adjusting to UMG since I come from a web dev background
Please more content like this!
So I have read that Canvas Panels are not good for performance because they increment the layer ID and increase draw calls BUT apparently you can potentially manually set the layerid to stop this depending on how it interacts with your UI design. Additionally in regards to Performance you want to put the top level items in Invalidation Boxes (and/or enable Global Invalidation) but marking certain Widgets as Volatile, you want to try to keep the tree structure as flat as possible and try to do animations with Materials because Animations done using Sequencer are the worse for performance. Don't use Binds / Function Binds for properties because they are called each frame and instead use Delegates/Events and maybe look at creating your own WidgetController class or use the new Viewmodel plugin from EPIC.
I think you mean nested canvas panels. Overlays are the better options instead of canvas panels.
I wish to build everything together but so far all the info is already very helpful thank you
perfect video. I feel very happy that I found this video
Learned a ton from this, thank you! It's hard to find in-depth detailed videos on UMG
@superscott597 I hope you can help me. I am trying to build Lower Third in UE and have created Widget for One line, It works as intended. But when I use this One Line Widget to create Two Line Widget i do not know how to pass input variables to my One Line Widgets from Two Line Widgets to be used in Event Preconstruct. I am doing this project in blueprints.
most underrated professional youtuber. after me of course.
Nice, thanks I found very inspiring methodologies to use in my project :) have a nice day :)
Is there a way to distinguish paragraph spacing from line spacing? For example, text that is wrapped has a 1.0 spacing between lines, but a new paragraph gets 1.5 spacing?
Unfortunately I believe you have to extend the Rich Text Block Slate widget if you want to add paragraph spacing. But I do wonder if it’d be easy to essentially duplicate how line height is being set and have a unique property that only affects hard new lines.
Scott, so glad I came across your video. It's incredibly helpful and has clarified UMG sizing/scaling issues that have plagued me for years. I'm wondering how you'd solve this issue: you want to add textures to a widget that spawns via soft object refs (say an inventory screen showing item icons). You'd like to destroy and recreate the widget when inventory is accessed to keep memory footprint minimum, but in UE there's a bug where the textures sometimes don't show up if you do this due to garbage collection and memory allocation (if you reload soft refs to the same location, it returns null pointer). Don't worry if you don't know, just figured I'd ask in case you do :)
I love you
Super helpful, thanks! Here are some handy sequencer shortcuts: Ctrl + [ ] > Select all keys forward/backward V > expand/collapse nodes Shift + V > expand/collapse nodes and descendents M > set marker Enter > set key 4 > set linear key Alt + , / . > move frame by frame Shift + C > snap to camera view Ctrl + Shift + G > remove items from folder Ctrl + Shift + N > move selected to new folder Ctrl + Shift + T > cycle time display format Ctrl + Up/Down > jump to end/start Shift + Left/Right > jump back/forward
Thank you so much for the tutorial. Got a question: Is it possible for you to share the unreal project files with us? It would be great.
Hi! Go ahead and download here: www.dropbox.com/s/ybmtry2n1pbrg0g/NotGDC2022.zip?dl=0 So my bandwidth doesn't get slammed, I'll remove the link next week and re-link if anyone else desires. Hope it helps!
Ah, one area of game dev where having front end development and design experience actually helps me 🤣 My favored approach is to design individual components (a button, for example) that can be pixel-perfect where I want them to be (say, the corners of the button), but design into them areas where they can dynamically stretch as needed (maybe the middle can grow/shrink as necessary). Then put them all together in such a way that the whole window or panel is responsive, just like it'd be on a responsive web page. That way you can have your skeuomorphic cake and eat your responsive one, too. No need to make everything a flat, hyper-minimalist box!
1000%. Utilize some smart material work and 9-slice images and you can achieve some pretty amazing responsive skeumorphic and VFX-heavy UIs very easily.
"have your skeuomorphic cake and eat your responsive one, too" might be the best line ive ever read in a youtube comment
i'm a programmer trying to get some basic textures set up for every single widget so i can send the templates off to an artist. one thing i have been doing habitually is making sure everything is responsive... when it was mentioned we should limit texture usage i kinda cried xD it's becoming a pick your battles thing just like any system in game dev
am i too dumb to understand what you're showing here? is this a mod for D4 ?
Diablo IV isn’t out yet. I recreated the inventory screen from scratch in a design program a few years ago when they showed a preview of the game and then prototyped it so I could see what it might be like to interact with. I also made some educated guesses about how they were doing things and tried to improve on some small aspects. So it’s essentially speculative fan art. This design piece ended up being a good portfolio piece for me and led to me now working on Diablo IV at Blizzard.
wow!@@superscott597
Really cool video, very helpful
Good stuff brother! One of the best UMG videos I've seen I hope we see more of this on your channel
Thanks again for this Scott! A year later and I'm referencing it again. Cheers!!
Excellent presentation, thank you!
Fantastic talk, would've loved for it go into more detail really! Do you mind sharing the Unreal Project files as well so people can dig into that, see how you did things in detail?
Appreciate any Unreal UI tutorials - didn't know about the 96dpi UMG resolution which explains why my mockups at 72dpi weren't being correctly represented in UMG! Cheers!
Whats the advantage to make the DPI curve like stairs 16:12 ? Never used the curve before and the linear graph always worked fine. I am just curious :)
Hey Thomas, sorry for the delayed response. It helps avoid issues with text rendering and visual artifacts from thin borders specifically. You ever notice how you can put a 1px line at a 1:1 dpi layout, but as soon as that scales down a little due to the dpi curve, the line disappears? With this, you can always count on content being multiplied by a consistent factor. It follows more the thinking of responsive displays in the web than a wildly inconsistent scaling factor. There are benefits and drawbacks to both approaches, but I personally prefer the consistency of the curves I showed here.
It also helps ensure text legibility on smaller displays, but you do have to plan your layouts with this content driven, fluid approach otherwise you’ll get a lot of clashing elements if you’re not intentional about it.
Thank you for this talk!! Would love another!
Hell yeah!
To preview in cinematics you lock the cameras using the icon next to the + add camera in the Camera Actor line in the sequencer to have it preview the entire footage. You can also go to where your viewport shows perspective and select cinematic view from there instead of viewing in your small windows through the individual camera views. Unsure if this is what you were referring to in not getting your cinematics to work.
Great Tutorial. Thank you for sharing. Would love more videos ;)
That was a great NotGDC talk, thank you. I'm a UI Tech Artist and will look into UMG more to learn how it works, cause we use our own custom engine and it definetly needs more UI tools. As of the "arrow" in the scroller problem, like anything that needs to hang near the list, we've got 2 solutions: 1. Arrow should be a separated object, witch checks the position of the specific point in the list (like left-center of player's panel) at every frame and just repositions it self. Usefull when panel is getting hide while scrolling, so you can check for this event and hide an arrow with some fade animation 2. As every child of such scrolling list is being cut via Scissor Test, you can ask you enginier to make checkbox for exclude an element from the test In both cases you'll need some coding or help from programmers, but in the end you'll get more control on what's going on in the list
I found this video while searching for resources to help me learn UMG (and UI design in general). Your explanations are incredible. I realize your audience was filled with people with much more experience than me, but I still was able to learn a lot. (I watched the video about 10 times though, and I'll probably watch it a few more times to pick up details I missed. Haha.) As my first attempt at using UMG, I've been trying to replicate exactly what you made. I've been having some trouble, since the presentation had limited time, but I'm thoroughly enjoying what I'm learning.
thankyou for sharing!
Would love if you could expand a bit on the SDFBox in the border material! Seems like a much better solution than my having multiple border images for every desired thickness workaround!
I would love to! I'll have to draft some more tutorials. Good to know this is something you'd like to see! I definitely want to talk more about SDF materials.
@@superscott597 Another +1 to seeing that.
I came to the comments just to look for this
"...all this.... fluff" at 10:22, LOL!!! I love that term. I'm gonna use it now on my dailies, devs are going to love me. Great talk btw! as a fluff designer, I'm loving it.
Hahaha, thank you! I love the fluff. :D
was somewhat helpful but you glossed over the important bits like binding and seqeuncer options
You don't need to highlight where items in inventory go at the slots on a character. If you hover your mouse over a pair of gloves in the inventory, I am pretty sure most people understand it is not a weapon to slap the enemies silly.
are you going to sit there and tell me that chest piece doesn't look like some alien vomited out an egg sack? looks like a damn quest item and what's that windcatcher supposed to be, an equipable or another quest item xD
@@ethanwasme4307 😂
Hey man! This is regarding Last Epoch - please add different armors and visual differences between armour types <3 It’s literally the only thing I’m missing atm as I’m a sucker for cosmetics/visual progression. Cheers!
Hi there! Amazing work! Is there any chance that you would be willing to share the resources for this? I am currently looking forward to create a diablo iv inspired ui gui mod for d2 and this would be extremely useful! Thankd in advance
👌
very great ! which program did you use to create the UI/animations/interactions ?
Thanks! I used Principle for Mac ( principleformac.com/ ) for these interactions.
@@superscott597 Thanks for the info. Too bad it is only for mac ! I found ProtoPie for PC, but not sure if it is good or not....
Great work bro. Can't believe that was your first run!!! Flawless!!!
Amazing job! Feels like floating in another dimension!
Can I get a mp3 of the music? It's soo good!
Beautiful work! Looks like a windy field in Utah somewhere. :)
How did you carve those rocks? Any tips?
Hey Connor, thanks for the question. I didn’t actually sculpt the rock itself. The whole cliffside is made using 1 rock and 1 grass sculpt. John from Media Molecule made the rock during a stream a few weeks ago. I just desaturates the color, then scaled and rotated them and stuck them together, then put varying patches of grass around to make it all look like one sculpt. I’ll send a link to the video where John sculpts the rock in a sec.
John sculpts the rock in this video at 1:23:10 ruclips.net/video/0g0NVwVZGxE/видео.html
Thank you Scott for not only remixing my scene/sculpt but for making it better and adding the awesome camera movement, new atmosphere and music. I love this and I'm glad you made a capture!
Did you have any experience in game design / coding before you started the beta. Guess I'm asking how noob friendly it is / will be. Oh and great video 👍
PENPAL Thanks! Im a user interface designer in my day job, and a hobbyist game designer in my spare time. When I make games, I usually am not the one touching code, but I’m familiar enough to read and understand the logic behind programming stuff. So the short answer is yes and no. I don’t code, but the logic is really intuitive in Dreams, and the lighting engine and painting/sculpting tools make it really easy to just futz around until you land on something you like. I’d say it’s pretty noob friendly, but you have to dedicate some time to learn and be patient!
@@superscott597 Thanks for the reply, I've been watching tutorials n such along with MM videos just to see what it's all about but most of it will make more sense (especially the logic) when I get my hands on it.
Nice!
Amazing atmosphere, design, and cinematography! Dreams creations like these make me very excited to start building! I really want to make Hideo Kojima-esque cutscenes.
Jaffytaffy thank you! Me, too. The lighting engine in this game is insane, and the fleck particle system adds so much texture to everything. I love it.