- Видео 6
- Просмотров 17 324
Squadron Studio
Добавлен 9 ноя 2015
Game developer and game design enthusiast
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
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!
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?
I followed ur tutorial step by step and for some reason my icons are not drawing. How can I fix this?
Took me 2 hours to make it ))) thanks. Next will make it as a touch button selections
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
I ended up not using your solution, but building my custom one. But it's still a great tutorial! Well done :)
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
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
Man, that's really great tutorial
I'm a Unity user, but this video was still super useful as a walkthrough of noise generation in general, thank you!
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.
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?
any ideas why using C# apearence of scene doesnt changes when i change values in editor?
nwm. Its just randomly starts working without any changes
Great tutorial! Thank you
Thank you so much for this series!
Dude, you are awesome! Thank you for this tutorial. I have learned so much new stuff.
great video, no questions left open - you have a new subscriber :)
You are a great person
subscribed and liked. keep doing great stuff
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.
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?
@@squadron_studio Yes, it's a good option. Thanks.
Where is the Size() function in first video??
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.
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
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...
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!
Thank you so much for this insanely good tutorial, i was able to make a fortune wheel thanks to that :)
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. ❤
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!
@@squadron_studio Thank you very much :D
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.
Great tutorial! It was exactly what I was looking for!
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?
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.
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! ✨
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?
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.
@@squadron_studio yep that fixed it thanks! Figured it had something to do with input handling. Glad it was an easy fix!
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! 😘👍
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. :)
😞 *Promo SM*
just stumbled over your channel, great videos! is part 3 coming any soon?
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.
Informative. Thanks.
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?
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.
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!!!
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.
@@WoYoSensei hey hi, This way, how is the code, how does the texture work, since it gives an error...
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!
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.
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.
en.m.wikipedia.org/wiki/File:PrecipitationTempBiomes.jpg
@@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.
@@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.
@@oliverroos3874 Usually the easiest way is to make a TileSet and apply it to a TileMap, yes!
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.
Welcome to Godot! Glad you're enjoying so far!
Hey! This wheel addon is really cool. I'm using it in a game I'm working on, thanks for making it! :)
Excellent. This also teaches other features of Godot.
is this usable with an analog stick on a controller?
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.
@@squadron_studio thanks, i will research just that
Thanks!! Now I just need to make a few slight changes so it fits my game :)
thank you so much
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
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!
@@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
@@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
subed btw
we love u wingman!
I love Wingman Gaming!