Squadron Studio
Squadron Studio
  • Видео 6
  • Просмотров 17 324
How to Make an Interactive Table | Godot 4 UI Tutorial | Part 3: Sorting, Mouse Hover Highlights
Final video of the series! Part 1 here: ruclips.net/video/Kz517iDaUtU/видео.html
In this one, we add a bit of usability and visual polish to our table, giving the ability to sort the table by each column and also highlighting the row and column the mouse is currently hovering!
Chapters:
0:00 - Intro
0:23 - Sort By Column
5:55 - Row/Column Highlights
14:08 - Outro
Просмотров: 857

Видео

How to Make an Interactive Table | Godot 4 UI Tutorial | Part 2: Rendering the Table Control
Просмотров 1,6 тыс.11 месяцев назад
Sorry for the delay on getting this Part 2 out; got a sore throat and lost my voice over the holidays! Chapters: 0:00 - Intro and Finished Product 0:15 - Table Scene 1:41 - TableRow Scene 2:40 - TableCell Scene 4:11 - Table Script, Table.Render() 8:14 - Styleboxes 9:30 - Column Headers Row 13:25 - Outro
How to Make an Interactive Table | Godot 4 UI Tutorial | Part 1: Pandas-like DataFrames
Просмотров 2,8 тыс.Год назад
First episode of a tutorial series on making a dynamic table UI element! In this episode, we set up the project and code a DataFrame data structure to store our tabular data in. Next episode will show how to render that data into a custom Table element. 0:00 - Intro and Finished Product 0:31 - Setup Main Scene 1:36 - DataFrame Resource Script 2:55 - DataFrame Custom Constructor 6:15 - _to_strin...
Pixel-Style Particle Effects: Spaceship Thruster, Explosion, Grass Pop, Rain | Godot 4 Tutorial
Просмотров 647Год назад
Spaceship sprite link: kenny.nl/assets/space-shooter-redux 0:00 - Intro and Examples 0:27 - Spaceship Thruster 5:42 - Explosion 9:49 - Grass Pop 12:50 - Rain
How to Make a Radial Menu Tool Selection Wheel | Godot 4 UI Tutorial
Просмотров 9 тыс.Год назад
Chapters 0:00 Intro and Example 0:32 Set up Main Scene 1:10 Set up Selection Wheel Scene 2:27 Draw Background Circle 4:15 Redrawing Our Changes 5:05 Drawing the Ring of the Inner Cell 7:30 Hold/Release to Show/Hide Radial Menu 9:29 The Unit Circle and Radians 11:38 Drawing the Lines Between Outer Cells 16:22 Wheel Options 19:06 Drawing Icons 24:32 Highlight Cells with Mouse 34:10 Output Selecte...
Using FastNoiseLite to Procedurally Generate Realistic Earthlike Continent Shapes | Godot 4 Tutorial
Просмотров 2,8 тыс.Год назад
How to use Godot 4's FastNoiseLite functionality to generate procedural world maps without any coding necessary!

Комментарии

  • @vextronx
    @vextronx Месяц назад

    Hi! I'm trying to make something similar at the moment. Do you know of any good way to anti-alias the polygon built for the arcs?

  • @official_yung_dollasign
    @official_yung_dollasign Месяц назад

    I followed ur tutorial step by step and for some reason my icons are not drawing. How can I fix this?

  • @Akalabeth
    @Akalabeth Месяц назад

    Took me 2 hours to make it ))) thanks. Next will make it as a touch button selections

  • @sim.williams
    @sim.williams 2 месяца назад

    Great tutorial. Thanks 👍👍👍 I did notice a missing feature in the sorting code: - If you change sorting from one column to the next then it remembers the last direction whereas I believe it should always start sorting a new column in ascending order. For example, if you first sort ascending on team and then sort on total you get the total descending on the first click. - To fix this, I added a new string variable to hold the current sorted column and the following code to the _on_header_clicked function before doing the sort... # If we are sorting on a different column then initialise the direction to ascending if sort_col != col: sort_desc = false # Remember the current sorting column sort_col = col

  • @SebLeCaribou
    @SebLeCaribou 2 месяца назад

    I ended up not using your solution, but building my custom one. But it's still a great tutorial! Well done :)

  • @teodorohenrique201
    @teodorohenrique201 2 месяца назад

    Thanks a lot! The video is great and the things i liked the most about your video is that it is direct to the point. Keep it up

  • @benjaminwarner524
    @benjaminwarner524 2 месяца назад

    Great tutorial! I did lose my sorting when adding the Row/Column highlights - however, after searching, I found that I needed to change the properties of the color rects to Mouse: Filter - Ignore

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

    Man, that's really great tutorial

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

    I'm a Unity user, but this video was still super useful as a walkthrough of noise generation in general, thank you!

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

    Dude this is fucking amazing tutorial. Working on my game for quite some time now. And some things you shown there are just super sweet! Huge thanks.

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

    i use the particles for a rocket boosted car but when the car rotates in the air the particles doesn't follow quickly enough, how do i make them follow better?

  • @МаксимПунько-в8ч
    @МаксимПунько-в8ч 4 месяца назад

    any ideas why using C# apearence of scene doesnt changes when i change values in editor?

  • @markshumarov
    @markshumarov 5 месяцев назад

    Great tutorial! Thank you

  • @markshumarov
    @markshumarov 5 месяцев назад

    Thank you so much for this series!

  • @markshumarov
    @markshumarov 5 месяцев назад

    Dude, you are awesome! Thank you for this tutorial. I have learned so much new stuff.

  • @tomek3633
    @tomek3633 6 месяцев назад

    great video, no questions left open - you have a new subscriber :)

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

    You are a great person

  • @ofozdemir
    @ofozdemir 8 месяцев назад

    subscribed and liked. keep doing great stuff

  • @angelosimba5868
    @angelosimba5868 8 месяцев назад

    Excellent tutorial. Tell me something: how could it be done if there was a submenu for each menu option. For example, if I had an option in the menu to plant and I had 3 different types of seeds, and I had to choose one in particular, how would I do it? Would you subdivide each segment into three or make another arc in each segment? Could you give an example? Anyway, thank you very much.

    • @squadron_studio
      @squadron_studio 8 месяцев назад

      Honestly I don't think radial menus would work very well for that sort of UX no matter how you implement it. They're much better for "quick access" of limited options. For something with layers like that, you'll probably want to do a more traditional UI of some sort, then maybe add PopUp sub-menus on top of that for the sub-types?

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

      @@squadron_studio Yes, it's a good option. Thanks.

  • @denisvladimirov6603
    @denisvladimirov6603 8 месяцев назад

    Where is the Size() function in first video??

    • @squadron_studio
      @squadron_studio 8 месяцев назад

      Hmmm just rewatched, and it looks like I accidentally skipped recording that part? But you can see DataFrame.Size() here at the 0:19 timestamp. Just a simple oneliner: return len(data) Thanks for calling out that I missed that! That's my bad.

  • @Mainman0011
    @Mainman0011 8 месяцев назад

    This is a very epic tutorial thank you!! I ended up using @export_range and set / get functions to reduce un-needed update events, the _input function for getting mouse and selection, signal passing the texture atlas, selection, and name values is also pretty handy when interacting with other UI elements

  • @uchuuhikoutai
    @uchuuhikoutai 8 месяцев назад

    Dude, I liked your video and I will be implementing it this weekend, but it's your 3 circles at 10 minutes in that earnt you the subscribe...

    • @squadron_studio
      @squadron_studio 8 месяцев назад

      Thanks for the feedback! As a creator, it's really great to hear what does and doesn't stick out to the audience about different videos!

  • @BlueOctopusDev
    @BlueOctopusDev 9 месяцев назад

    Thank you so much for this insanely good tutorial, i was able to make a fortune wheel thanks to that :)

  • @DrNabeel20
    @DrNabeel20 9 месяцев назад

    Grate video! The main pain point I have with godot ui is animations, it is super hard to tween vbox list items. Could you please make a tutorial about that, thanks in advance. ❤

    • @squadron_studio
      @squadron_studio 9 месяцев назад

      Thank you! UI animations isn't really something I've worked with much myself, but I can take a look and see what I find!

    • @DrNabeel20
      @DrNabeel20 9 месяцев назад

      @@squadron_studio Thank you very much :D

  • @SuperCamelFunTime
    @SuperCamelFunTime 9 месяцев назад

    Incredible tutorial. Learned a ton about circle math. Improvement I would implement, to the other readers: Re-order the Line and Inner Circle drawing to happen later on in the _draw function so that they draw over top of the selection highlight. This will hide the jaggy edges of the highlight fill.

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

    Great tutorial! It was exactly what I was looking for!

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

    Amazing tutorial, just what I needed. I only have one question, any reason you didn't use custom resources for the wheel options instead of a custom class? Can it work? Is it better or worse?

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

      The wheel_option class extends AtlasTexture which is a Resource! So we are actually using a custom resource here, just not with the name Resource.

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

    Loved this series! I'm definitely going to be rewatching it a few times to understand as much as possible. I'm actually trying to build something very specific in Godot and I was wondering if I could DM you somehow to pick your brain on it (I can't find any other platform that you're on or I would've done so on there). And before you worry, I don't need free help with the project. 😅 It'd just be nice to touch base with someone who is clearly knowledgeable on Godot and Python and bounce some ideas off you to see if what I'm thinking about has any legs at all. Either way, great series and looking forward to watching more! ✨

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

    I think some neat features to add would be a button to add/remove entries which would prompt you for the information. Also a scrolling ability instead of making the table smaller and smaller :) Overall this is a great little project to follow along with! side note: with the highlight rectangles visible it doesn't let you click the headers, any fix for this?

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

      Good catch! That was something I fixed in my original prototype but forgot to include in my recording. You're gonna want to set the Mouse Filter to Ignore on the highlight rectangles, which will let the mouse input go through them and click the buttons. Thanks for pointing this out; will pin your comment so others can see.

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

      @@squadron_studio yep that fixed it thanks! Figured it had something to do with input handling. Glad it was an easy fix!

  • @dueddel
    @dueddel 11 месяцев назад

    I like the idea of highlighting the rows and columns with color rects. It's so simple, yet effective. When you showed the result in the first part of the series I thought of using theme orverrides which would have made it slightly more complex, I guess. Nice series. Liked to watch it. Subscribed nearly instantly. Keep up! 😘👍

  • @dueddel
    @dueddel 11 месяцев назад

    4:50 I personally prefer to export a PackedScene instead of preloading it which preserves file paths when moving the *.tscn file. … Though I have to add that -depending on how well organized you are with your file structure- moving files doesn't happen really often. :)

  • @raymondgreen5058
    @raymondgreen5058 11 месяцев назад

    😞 *Promo SM*

  • @pierobellizzi431
    @pierobellizzi431 11 месяцев назад

    just stumbled over your channel, great videos! is part 3 coming any soon?

    • @squadron_studio
      @squadron_studio 11 месяцев назад

      Yes, that should actually be coming out in the next couple days! Had been traveling a lot the last few weeks, but things are finally stable for me again now. Will be the final part in this series.

  • @Druiduk1973
    @Druiduk1973 11 месяцев назад

    Informative. Thanks.

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

    Hi, pretty interesting so far. :) I’m pretty new to godot and I’m still learning how the resource works. Why did you do a Resource with a constructor inside? Will you keep different sets of data for each instance this way? Wouldn’t that be the same as a regular Node class?

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

      Yes, using a Resource for the DataFrame will let you edit DataFrames in the Inspector of the Table scene, which will come in Part 2! Recording today; should be ready to post this weekend. As for the constructor, that's just a shortcut rather than assigning all the properties directly when constructing a new DataFrame in code. Godot's default constructors get kind of wonky when you start trying to include parameters. tl;dr the Table scene will have a DataFrame as a property and have the ability to render that DataFrame to the UI. This will let you make whatever edits to the DataFrame you want at the code level (e.g. adding columns, sorting, etc) and all you have to do at the UI level is just refresh the rendering.

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

    Really, really, and I mean it, REALLY great tutorial. So many uses. I was looking for something flexible like this for a very long time! Thank you so much. I'm gonna make some changes in my version, tho. Instead of atlas texture I want to implement the viewport so I can use 3D scenes with animations and stuff instead of just simple images. Don't know how to do that just yet (just finished watching your tutorial skipping the coding part with texture adjustment) but I think you gave enough explanation how to actually do this. Viewport, nevertheless, is nothing else but a texture (or can be one). Thank you very much!!!

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

      I think I can call my attempt a success here. I was able to replace atlas texture used in this tutorial with Viewport Textures. I'm sure there is a better way to do this but if anyone's interested then here is how I've done it. Replace: @export var options : Array[WheelOption] with @export var options : Array[SubViewport] Add premade 'SubViewport' scenes with your 3D objects as children for 'selectionWheel.tscn' and add them to the array one by one. That's the biggest downside for this method, sorry. Now, in the code, instead of 'draw_texture_rect_region' use 'draw_texture_rect', like here: draw_texture_rect(options[0].get_texture(), Rect2(offset, SpriteSize), false) draw_texture_rect(options[i].get_texture(), Rect2(drawPos, SpriteSize), false) and move these lines to the bottom of this piece of code, like here: for i in range(1, len(options)): var startRads = (TAU * (i-1)) / (len(options) -1) var endRads = (TAU * i) / (len(options) -1) var midRads = (startRads + endRads) /2.0 * -1 var radiusMid = (innerRadius + outerRadius) /2 var drawPos = radiusMid * Vector2.from_angle(midRads) + offset if selection == i: var pointsPerArc = 32 var pointsInner = PackedVector2Array() var pointsOuter = PackedVector2Array() for j in range(pointsPerArc +1): var angle = startRads + j * (endRads - startRads) / pointsPerArc pointsInner.append(innerRadius * Vector2.from_angle(TAU -angle)) pointsOuter.append(outerRadius * Vector2.from_angle(TAU -angle)) pointsOuter.reverse() draw_polygon( pointsInner + pointsOuter, PackedColorArray([selectedColor]) ) draw_texture_rect(options[0].get_texture(), Rect2(offset, SpriteSize), false) draw_texture_rect(options[i].get_texture(), Rect2(drawPos, SpriteSize), false) I just hope YT will keep these paragraphs with proper formating. Moving 'draw_texture_rect' to the end of this loop will allow ViewportTextures to be rendered at the top of the radial menu. If someone want more clear way to see the code, here is the link to the pastebin: pastebin.com/W5VGBzCC I hope it will help someone. If you have any questions or have a better idea how to improve the way to do this, please reply. Thank you.

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

      @@WoYoSensei hey hi, This way, how is the code, how does the texture work, since it gives an error...

  • @4dragons632
    @4dragons632 Год назад

    This is my favourite type of quick access menu, and this is a really good tutorial for it. Easy to understand, modular for variable numbers of selections, with very lovely code. Very much appreciated!

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

    Beautiful! Would there be a way to implement biomes into this? It seems as though the only color variation you can get is based on the noise value, which you can use to get mountainous looking regions but I can't find a way to have one region be a desert and another grassland for example. Would love to know if you have any ideas.

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

      Depends on how detailed/realistic of a system you are looking to create! The simplest version, which you'll see in a lot of similar tutorials, is just to assign different intermediate thresholds for each biome, but that will create unrealistic ring-like biome layouts. The more detailed way is to generate maps of the same size for temperature and precipitation, then assign each cell to a biome based off of a Whittaker Diagram (which is a thing from real-world ecology; I linked an image in my other reply). If you want a minecraft-esque map, you can just use separate noise layers for those. If you want a true earthlike planet, it gets a bit tougher. Temperature is easy; just make the equator the hottest, poles the coldest, and everything in between. But realistic precipitation maps are very complicated and involve stuff like pressure bands, prevailing winds and Coriolis Effect, and more. I personally haven't managed to make a system for that that I'm satisfied with before.

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

      en.m.wikipedia.org/wiki/File:PrecipitationTempBiomes.jpg

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

      @@squadron_studio Amazing tips! Thank you. I'm aiming for realism but I'll have to limit myself at some level of complexity. I'll have to read up on the Whittaker Diagram.

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

      @@squadron_studio Hey, about assigning cells, do you manually have to make a different colored cell for each biome or is there a way to color each cell independently? Otherwise it seems hard to simulate mountain chains and the likes.

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

      @@oliverroos3874 Usually the easiest way is to make a TileSet and apply it to a TileMap, yes!

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

    New to Godot _(for no reason in particular, cough cough),_ and I'm really enjoying it. I used Game Maker quite a bit as a teenager, and it gives me a similar feeling. I was really stoked when I heard it had its own coding language, since I remember GML being insanely easy to jump into & play around with -- it wasn't as simple as GML (I doubt _anything_ will be), but the whole package has been really easy to get acquainted with.

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

      Welcome to Godot! Glad you're enjoying so far!

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

    Hey! This wheel addon is really cool. I'm using it in a game I'm working on, thanks for making it! :)

  • @Mrme-cn9je
    @Mrme-cn9je Год назад

    Excellent. This also teaches other features of Godot.

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

    is this usable with an analog stick on a controller?

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

      The drawing should work, but you'll need to replace the mouse angle calculation code with analog stick code. I haven't worked with controllers in Godot before so I can't give code snippets for it, but theoretically the math should be much simpler, as an analog stick should just allow you to get the angle directly.

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

      @@squadron_studio thanks, i will research just that

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

    Thanks!! Now I just need to make a few slight changes so it fits my game :)

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

    thank you so much

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

    are you mixing combining multiple noisemaps? i have same parameters in my perlin noise generation project and iam getting very repetetive maps, like it looks same everytime

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

      It's just one noisemap, but with multiple octaves! If you're getting the exact same output every time, make sure you are changing the "seed" parameter because that's what gives different outputs with the same variables!

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

      @@squadron_studio oh, so like same seed maps but only difference is the octaves? thats the only way i can think of it, how can you add multiple octaves in 1 noisemap, also yeah iam changing the seed value, not getting the exact same map but i mean they all look very repetitive like its a little to random almost, no oceans or continets

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

      @@LinuxUser123 when "zoomed out" noise map tend to look repetitive. that's why like in the video you typically want to lower the frequency quite a bit

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

    subed btw

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

    we love u wingman!

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

    I love Wingman Gaming!