Joyrok
Joyrok
  • 58
  • 37 943
UMG - Layouts
Some UMG Layout basics
มุมมอง: 2 589

วีดีโอ

Materials: Untapped Nodes - Step
มุมมอง 1.3K4 หลายเดือนก่อน
What is the Step Node in Materials and what does it do? Here's a little bit of an application of step and how I have used it in the past materials. Useful Material Links: - dev.epicgames.com/community/learning/tutorials/PnvG/unreal-engine-materials-and-textures-for-ui - dev.epicgames.com/community/learning/tutorials/Y4Kb/unreal-engine-using-uvs-for-tech-art-and-ui - www.unrealengine.com/marketp...
Layout Building in UMG
มุมมอง 1.3K6 หลายเดือนก่อน
Little demo of how I might build out a wireframe of Persona 3 Reload's menu. Hopefully useful if you want to get some ideas of what little tips and tricks to use when making layouts
Curve Atlas as Mater Time
มุมมอง 3016 หลายเดือนก่อน
Little fun exploration of using a curve at last as master time
Curve Atlas + Time
มุมมอง 2576 หลายเดือนก่อน
A little Curve Atlas Demo and how I use them in materials to control time.
5.4 Slate Post Buffer UMG
มุมมอง 2.6K9 หลายเดือนก่อน
Little into tutorial going of the new Slate Post Buffer in 5.4 to get post processing effects in UMG and your UI Link to the documentation: dev.epicgames.com/documentation/en-us/unreal-engine/using-slate-postbuffers-in-unreal-engine?application_version=5.4 Link to the content examples project: www.unrealengine.com/marketplace/en-US/product/content-examples Link to the UI Material Lab: www.unrea...
Line Trace aka Trim Paths in Materials
มุมมอง 96311 หลายเดือนก่อน
Doing a deeper dive into what makes a Line Trace effect similar to say something like the Trim Paths of After Effects though if folks want to see more of a true comparison I can try to break it down further. This covers the basics of the math than the functionality 1:1. A few Tutorials how to author the texture in various programs: Blender: th-cam.com/video/O7BMOvANiBU/w-d-xo.html Inkscape: th-...
Scale UVs with a Pivot Point
มุมมอง 679ปีที่แล้ว
A little material I keep needing and adding onto UV Scaling for UMG, and this time it's adding the scale to a pivot point. You can find the material to copy or reference here: dev.epicgames.com/community/learning/tutorials/6GjP/unreal-engine-ui-useful-materials#uvs-scaleduvs And let me know other things you'd love to see.
Blur Textures Using Mipmaps
มุมมอง 1.1Kปีที่แล้ว
A semi lengthy explanation for using mipmaps to create a blur effect on a UMG material and animating that material.
Perfect Pixel Outlines in UMG
มุมมอง 1.1Kปีที่แล้ว
Get a perfect pixel outlines for UMG materials with SDFs using fwidth
Inktober 2023 - Day 9 Bounce
มุมมอง 213ปีที่แล้ว
I believe I've done bounce before in a previous inktober and it's been fun to revisit it in a new medium with different ideas.
Inktober 2023 - Day 8 Toad
มุมมอง 126ปีที่แล้ว
Inktober 2023 - Day 8 Toad
Inktober 2023 - Day 7 Drip
มุมมอง 163ปีที่แล้ว
Inktober 2023 - Day 7 Drip
Inktober 2023 - Day 6 Golden
มุมมอง 129ปีที่แล้ว
Inktober 2023 - Day 6 Golden
Inktober 2023 - Day 5 Map
มุมมอง 147ปีที่แล้ว
Inktober 2023 - Day 5 Map
Inktober 2023 - Day 4 Dodge
มุมมอง 103ปีที่แล้ว
Inktober 2023 - Day 4 Dodge
Inktober 2023 - Day 3 Path
มุมมอง 129ปีที่แล้ว
Inktober 2023 - Day 3 Path
Quick Demo - Making UI Progress Material with the Material UI Lab
มุมมอง 1.1Kปีที่แล้ว
Quick Demo - Making UI Progress Material with the Material UI Lab
Inktober 2023 - Day 1 Dream
มุมมอง 236ปีที่แล้ว
Inktober 2023 - Day 1 Dream
Inktober 2023 - Day 2 Spider
มุมมอง 205ปีที่แล้ว
Inktober 2023 - Day 2 Spider
VHS Menu: Part 2 - Material Functions
มุมมอง 433ปีที่แล้ว
VHS Menu: Part 2 - Material Functions
VHS Menu: Part 1 - The Art Style
มุมมอง 975ปีที่แล้ว
VHS Menu: Part 1 - The Art Style
Fill from Tap/Click Button
มุมมอง 1.2K2 ปีที่แล้ว
Fill from Tap/Click Button
Fake ASCII Effects 2D and 3D space
มุมมอง 4932 ปีที่แล้ว
Fake ASCII Effects 2D and 3D space
Material Breakdown
มุมมอง 4992 ปีที่แล้ว
Material Breakdown
Math for artists
มุมมอง 6102 ปีที่แล้ว
Math for artists
UV Scaling Material
มุมมอง 1K2 ปีที่แล้ว
UV Scaling Material
UV Skewing
มุมมอง 1K2 ปีที่แล้ว
UV Skewing
Progress Bars - Radial Progress
มุมมอง 1.6K2 ปีที่แล้ว
Progress Bars - Radial Progress
Fonts Character Isolation
มุมมอง 6062 ปีที่แล้ว
Fonts Character Isolation

ความคิดเห็น

  • @owenw9042
    @owenw9042 6 วันที่ผ่านมา

    This video was incredible. I struggled for days to understand UMG enough to make a scalable card layout. I redid it from scratch and had it working in an hour!

  • @kartoplia
    @kartoplia 9 วันที่ผ่านมา

    cool

  • @ZaneLyon
    @ZaneLyon 10 วันที่ผ่านมา

    A continued beacon of light down a very remote path of game dev. Thanks as always for going the extra mile to help level up this community.

  • @ryguydavis
    @ryguydavis 24 วันที่ผ่านมา

    Thank you for putting this together! I had heard about using mips for blurring but it's so theoretical until someone just clicks on all the boxes and says what they're doing. I will 100% be adding this to the toolbox.

    • @joyrok5582
      @joyrok5582 24 วันที่ผ่านมา

      you might want to have a mip min size in your texture group so you don't accidently load it with smaller mips of like mip9 when you want to have between mip 0-4 but yeah give it a try and see if it works for you :D

  • @tinglin9096
    @tinglin9096 หลายเดือนก่อน

    thank you for your tutorial video, it's sooooooo great !

  • @djhyperkid86
    @djhyperkid86 หลายเดือนก่อน

    Could you possibly do a full in depth tutorial with this? I love this menu so much

    • @joyrok5582
      @joyrok5582 หลายเดือนก่อน

      Hah, I probably can't since I'm not sure I still have the actual UE files anymore but I'll maybe keep posting more of the materials I am uncovering by digging through my older stuff dev.epicgames.com/community/learning/tutorials/WWGX/unreal-engine-smorgasbord-of-ui-materials in this (hopefully) growing list of old materials I made.

    • @djhyperkid86
      @djhyperkid86 หลายเดือนก่อน

      @@joyrok5582 You are a true gem. I have been obsessing over these videos, because it was exactly what I was looking for. Thank you for creating some cool stuff.

    • @djhyperkid86
      @djhyperkid86 หลายเดือนก่อน

      @@joyrok5582 Also did you use vector for the vhs slip covers? I am working with them in PS and PS curious.

  • @djhyperkid86
    @djhyperkid86 หลายเดือนก่อน

    Could you do a full tutorial on this? This is exactly the aesthetic I am searching for with my game.

  • @gatOlegat450
    @gatOlegat450 หลายเดือนก่อน

    Awesome! Would you happen to know if Unreal optimizes Texture Sample nodes at compile time if both of them use the same texture? For instance, does it sample the texture only once and then share the result with other Texture Sample nodes that use the same texture, or does it sample the texture as many times as there are Texture Sample nodes?

    • @joyrok5582
      @joyrok5582 หลายเดือนก่อน

      I don't believe it does, but you'd have to see what the GPU is doing on device specifically, it could be dependent on what GPU does what.

  • @Anthony0Mcloughlin
    @Anthony0Mcloughlin 2 หลายเดือนก่อน

    Hi Adrienne, thanks for going through these, very interesting, If I wanted to apply a post process material just to the UI layer that doesn't effect the in game rendering, is that possible with this approach, or would I have to just go down the retainer box route?

    • @joyrok5582
      @joyrok5582 2 หลายเดือนก่อน

      Yeah for now it's just the retainer box method

  • @Xperto_
    @Xperto_ 2 หลายเดือนก่อน

    This is really useful, thanks fo uploading. It was surprisingly difficult to find

  • @manashieldworld
    @manashieldworld 2 หลายเดือนก่อน

    This rules. Thank you.

  • @manashieldworld
    @manashieldworld 2 หลายเดือนก่อน

    What could this be used for?

    • @joyrok5582
      @joyrok5582 2 หลายเดือนก่อน

      Often scaling UI materials to fit any screen size or resolution

  • @MurattiOmer
    @MurattiOmer 2 หลายเดือนก่อน

    Just wondering whats the texture that u used for widget? like is that a brush ? whats the name ? thanks...

    • @joyrok5582
      @joyrok5582 2 หลายเดือนก่อน

      You can find the texture here: dev.epicgames.com/community/learning/tutorials/6GjP/unreal-engine-ui-useful-materials#uvs-3slice It's not a brush this is a custom material set on the image widget.

  • @Sherlocklocku
    @Sherlocklocku 3 หลายเดือนก่อน

    Life Saver

  • @TriChaser
    @TriChaser 3 หลายเดือนก่อน

    Hey joyrok! Really loving your content. I have been using your blog post and video as reference point the past few days! I was wondering whether could you make some videos on best practice for making UI in UE. I have seen so many different videos in youtube but many of them seems to use canvas panel on canvas panel. Would be great if you can show how would you tackle 9-slice or 3 slice in UE since it seems different from unity. Thank you!

    • @joyrok5582
      @joyrok5582 3 หลายเดือนก่อน

      A good tutorial on 9slice for UE can be found here: dev.epicgames.com/community/learning/tutorials/Y4Kb/unreal-engine-using-uvs-for-tech-art-and-ui#nineslice As for best practices: th-cam.com/video/dSTdAToJ7Gg/w-d-xo.htmlsi=ZHVrKzQ-WK2EjgcR th-cam.com/video/-qo3ix-qqAE/w-d-xo.htmlsi=x18xzno0WiSOk33x th-cam.com/video/u06GAVxyIag/w-d-xo.htmlsi=Z5hhmT83Za__wvbz It's not to say Canvases are bad but they don't consolidate z order without a setting in projects enabled, they are a real pain when it comes to canvases nested in canvases for layouts. But the problem with anything that is UI related... it's so dependent on what your game needs and requires. Best practices really entail, keep it as simple as possible so you can modify it later as needed -- the more complex widgets and layouts you use... the harder it is to keep that rule.

    • @joyrok5582
      @joyrok5582 3 หลายเดือนก่อน

      You can also check out this video I did of the persona 3 reload layout: th-cam.com/video/nTDm_-qctIw/w-d-xo.html It's how I would approach that kind of layout and why, again understanding what you need to make and how to simplify it often the best practice you can perform

  • @AJapaneseDream
    @AJapaneseDream 4 หลายเดือนก่อน

    Can't thank you enough for showing material work specific to UI. Really hoping you keep posting videos like these

  • @JayShippey
    @JayShippey 4 หลายเดือนก่อน

    For the life of me I couldn't find anyone making a video on this. Thank god for this video

  • @MansourVFX
    @MansourVFX 4 หลายเดือนก่อน

    just brilliant 👌

  • @cgDeco
    @cgDeco 4 หลายเดือนก่อน

    Great tutorial, thank you!

  • @AlexTLOU
    @AlexTLOU 5 หลายเดือนก่อน

    Cool af!

  • @thomasscott4839
    @thomasscott4839 5 หลายเดือนก่อน

    This is so cool! Though I couldn't help but wonder how it was you accomplished the scrolling geometric shape effect! I was really hoping you were going to speak on how that was made. Maybe a future video??

    • @joyrok5582
      @joyrok5582 5 หลายเดือนก่อน

      Epic just released a Tech Art UI course about UVs, this is using polar coordinates and UVs to get there: dev.epicgames.com/community/learning/tutorials/Y4Kb/unreal-engine-using-uvs-for-tech-art-and-ui

  • @visualmemoryunit__
    @visualmemoryunit__ 6 หลายเดือนก่อน

    this is such a gem! thank you so much

  • @matthewlkomar4026
    @matthewlkomar4026 6 หลายเดือนก่อน

    I didn't know you could use spacers to maintain ratios or about the Common Visual Attachment! So exciting, definitely gonna try this at work!

  • @gatOlegat
    @gatOlegat 6 หลายเดือนก่อน

    i wish there was more info about creating ui materials, litterally nothing out there except for your hard work and epic's awesome material lab, which litterally blows my mind. Also common ui, we really need to more streams from epic about common ui, one short 2 hour introduction is too little. It's desert out there in terms of useful content

    • @joyrok5582
      @joyrok5582 6 หลายเดือนก่อน

      I find the Common UI docs are a good start, the content examples actually have a lot of Common UI -- start at 5.4 www.unrealengine.com/marketplace/en-US/product/content-examples?sessionInvalidated=true Of course Ben UI's discord and website are very useful if you have questions benui.ca/ There's also Cody's input Unrealfest talk that is a good resource if you want to know what input is doing under the hood with Unreal and where Common UI comes into place: dev.epicgames.com/community/learning/talks-and-demos/oDox/demystifying-input-in-unreal-engine-unreal-fest-2023 And then there are examples like Cropout and Lyra to study www.unrealengine.com/en-US/blog/cropout-casual-rts-game-sample-project www.unrealengine.com/marketplace/en-US/product/lyra

    • @gatOlegat
      @gatOlegat 6 หลายเดือนก่อน

      @@joyrok5582 Thanks a lot! There is a lot of useful info indeed. Sorry if my question will seem a bit brazen, but do you happen to have a discrod channel yourself? I could use some help with my materials)

    • @joyrok5582
      @joyrok5582 6 หลายเดือนก่อน

      @@gatOlegat I'm usually chilling in the WeCanFixItInUI discord, Ben UI's discord benui.ca/unreal/ui-discord/, and the UI Peeps discord. None of my own but even if I'm not around lots of folks there are happy to help answer questions on materials :D and collaborate solutions

    • @gatOlegat
      @gatOlegat 6 หลายเดือนก่อน

      @@joyrok5582 Perfect, I really appreciate all of your contribution, help and support, thanks a lot. You are a real pro!

  • @Kiloku2
    @Kiloku2 6 หลายเดือนก่อน

    Awesome guide! What's the Common Visual Attachment for? I've never used it and I don't get what it does. Edit: I hadn't finished watching and when you mentioned it the second time I got it 😅 I think I could put it to use a lot more!

  • @ПавелГунаев
    @ПавелГунаев 6 หลายเดือนก่อน

    Is there an option that would also work with non-square textures? This one duplicates along the axes

    • @joyrok5582
      @joyrok5582 6 หลายเดือนก่อน

      The sword texture in the video is not a square texture, it's a 2:1 ratio, that's why it grabs the texture size and scales to the x/y of the texture coordinate. Does that help answer the question?

  • @GiantCobayo
    @GiantCobayo 6 หลายเดือนก่อน

    🙇‍♂ Thanks a lot for the content & your blog post with tips and tricks 😉 Now I have an easy way to filter UI related content based on the amount of Canvas Containers that they use 😅

  • @pandajumper
    @pandajumper 6 หลายเดือนก่อน

    😎

  • @Ce-si2bu
    @Ce-si2bu 6 หลายเดือนก่อน

    I use the things that you show on a regular basis, so I thank you for this wealth of knowledge sharing :D

  • @gatOlegat
    @gatOlegat 6 หลายเดือนก่อน

    you could also use absolute(abs) after substructing 2 ceil values, but other than that, your methoud is outstanding!

    • @joyrok5582
      @joyrok5582 6 หลายเดือนก่อน

      yes totally! I love looking at my old stuff here and seeing where the math could be cleaner, I absolutely (har har) like to see the growth I've learned with my comfort on math

  • @Anthony0Mcloughlin
    @Anthony0Mcloughlin 7 หลายเดือนก่อน

    Great tutorial and explanation, really helpful! Did you figure out how to stop the start and end points of the gradient map from glowing when the line trace is further along the gradient map? I've just followed your video and my material is looking great apart from the start and end points look a bit glitchy.

    • @joyrok5582
      @joyrok5582 7 หลายเดือนก่อน

      I would triple check the the texture and make sure there's no black or white near those areas, the bleeding I found was reduced by making a thicker glow line and a thinner crop, and also making sure it's exactly 0 and 1 at the edges of the glow layer

  • @Timtowtdi-oop
    @Timtowtdi-oop 7 หลายเดือนก่อน

    Thank you! This is exactly what I needed. Keep up the videos.

  • @吴大伟-r5x
    @吴大伟-r5x 8 หลายเดือนก่อน

    Amazing One Like Medicine Cure My Wound.(Caused By Naughty UMG)

  • @pus5yking235
    @pus5yking235 8 หลายเดือนก่อน

    Insane channel!!!

  • @navidtbt398
    @navidtbt398 8 หลายเดือนก่อน

    Thank you it was amazing.

  • @TaylorDaleWright
    @TaylorDaleWright 8 หลายเดือนก่อน

    I'm so excited to dig into this. Thank you for putting this presentation together. Were there any resources that helped you get up to speed with these systems while you were working on this?

    • @joyrok5582
      @joyrok5582 8 หลายเดือนก่อน

      Just the main documentation :D

  • @secoif
    @secoif 9 หลายเดือนก่อน

    Great video, thank you.

  • @Xperto_
    @Xperto_ 9 หลายเดือนก่อน

    How important is it where you place the PostBufferUpdate in your widget hierarchy?

    • @joyrok5582
      @joyrok5582 9 หลายเดือนก่อน

      It's pretty critical to the feature but there is a checkbox to just sample the game scene if that's all you are doing

    • @Xperto_
      @Xperto_ 9 หลายเดือนก่อน

      @@joyrok5582 thank you!

  • @CrouchingTigger
    @CrouchingTigger 9 หลายเดือนก่อน

    Thanks for this! Great overview :)

  • @Mireneye
    @Mireneye 9 หลายเดือนก่อน

    Ohh I imagine a lot of people have been wanting to have good ways to do this for a long time!

  • @bishwajit1996
    @bishwajit1996 9 หลายเดือนก่อน

    !! Amazing !!

  • @AmbiguousAnalogy
    @AmbiguousAnalogy 10 หลายเดือนก่อน

    More like this please! :) Really informative content, thanks a bunch!

  • @AmbiguousAnalogy
    @AmbiguousAnalogy 10 หลายเดือนก่อน

    Hope you get this message, but what an amazing channel you have! Thanks for all of this effort!

  • @mrxcs
    @mrxcs 10 หลายเดือนก่อน

    This video and the blog are pure gold.

  • @riccardo_torrisi
    @riccardo_torrisi 11 หลายเดือนก่อน

    Your materials are my main source of learning! Thank youu!

  • @thamass8772
    @thamass8772 11 หลายเดือนก่อน

    Great tutorial thanks :)

  • @fake22444
    @fake22444 11 หลายเดือนก่อน

    lifesaver man

  • @pandajumper
    @pandajumper 11 หลายเดือนก่อน

    姐姐好酷啊!

  • @plagues90
    @plagues90 11 หลายเดือนก่อน

    Hi, awesome content! doing it in After Effects is so simple that I couldn't imagine you need to do/think all of this

    • @joyrok5582
      @joyrok5582 11 หลายเดือนก่อน

      Haha imagine game engines are more a direct access to the graphic card ;) so it's not necessarily the most user friendly but what you can do is quite incredible and more than just after effects. But sadly that means math xD which I'm slowly getting better at but always learning.

  • @RisingSunTheGame
    @RisingSunTheGame ปีที่แล้ว

    Hi. U can make tutorial? Or maybe i can buy it?

    • @joyrok5582
      @joyrok5582 ปีที่แล้ว

      Should be found here you can grab it: dev.epicgames.com/community/learning/tutorials/6GjP/unreal-engine-ui-useful-materials Or you can check out the UI material lab that has an example: www.unrealengine.com/marketplace/en-US/product/ui-material-lab

    • @RisingSunTheGame
      @RisingSunTheGame ปีที่แล้ว

      @@joyrok5582 Oh, Thanks)