- 10
- 243 525
Jacques
United States
Приєднався 2 чер 2020
mastodon.social/@happyhippie
jacquesj_dev
www.youtube.com/@jacques-dev
github.com/frederickjjoubert
jacquesj.itch.io
jacquesj_dev
www.youtube.com/@jacques-dev
github.com/frederickjjoubert
jacquesj.itch.io
Learn Bevy 0.10 - EP10 - Bevy UI (User Interface Tutorial)
This is the tenth episode of my Bevy Game Engine beginner video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games.
In this episode, we will learn how to use Bevy UI to create a user interface for both 2d and 3d games in Bevy. Bevy UI uses the Flexbox model to layout and style our user interfaces, while also leveraging Bevy ECS to update and interact with our user interface. We will learn how to build complex hierarchical user interface layouts from the four widgets provided by Bevy UI - NodeBundle, ButtonBundle, TextBundle, and ImageBundle.
This video is perfect for those new to Bevy Game Engine and wanting to learn the basics of ECS game development with Rust. It will provide an introduction to the engine and teach you how to make games with Bevy with the entity component system game architecture.
Whether you are a beginner or a seasoned developer, this tutorial is an excellent resource for anyone who wants to learn the fundamentals of Bevy Game Engine and ECS game development with Rust.
So, if you want to learn the Bevy Game Engine v0.10 and start your journey to create amazing games, check out this tutorial series.
---
Chapters
0:00 Introduction
0:55 Code Fixes
3:26 Code Cleanup
4:48 Flexbox Model
6:27 Flexbox Survival Guide
8:46 Bevy Ball Game UI Sketches
9:07 Bevy UI and Bevy ECS
9:56 Main Menu Layout
15:00 Style
16:02 Main Menu Layout Continued
32:19 Style Clean Up
37:02 Interactions and Updates with Bevy ECS
44:08 HUD, Pause Menu, and Game Over Menu
45:56 Wrap Up
---
Code:
- Episode 9 Fixes: github.com/frederickjjoubert/bevy-ball-game/tree/Episode-9-Fixes
- Episode 10 Final Code: github.com/frederickjjoubert/bevy-ball-game/tree/Episode-10
---
Reading:
Bevy UI: docs.rs/bevy_ui/latest/bevy_ui/
Flexbox CSS Reference: cssreference.io/flexbox/
A Complete Guide to Flexbox: css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Flexbox Poster: css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png
Fireship Flexbox: ua-cam.com/video/K74l26pE4YA/v-deo.html
Style: docs.rs/bevy/latest/bevy/ui/struct.Style.html
NodeBundle: docs.rs/bevy_ui/latest/bevy_ui/node_bundles/struct.NodeBundle.html
ButtonBundle: docs.rs/bevy_ui/latest/bevy_ui/node_bundles/struct.ButtonBundle.html
ImageBundle: docs.rs/bevy_ui/latest/bevy_ui/node_bundles/struct.ImageBundle.html
TextBundle: docs.rs/bevy/latest/bevy/prelude/struct.TextBundle.html
---
This tutorial assumes basic knowledge of the Rust programming language, but total beginners can still try to follow along.
www.rust-lang.org
Please make sure you have the latest version of the Rust programming language installed.
---
#bevy #rust #gamedev #bevyengine #bevygameengine #learnbevy #learnbevygameengine #bevygameenginetutorial #bevyecs #bevyentitycomponentsystem #ecs #entitycomponentsystem #learnecs #learnecsgamearchitecture #gamedevelopment #rustgamedevelopment #rustgamedev #rustprogramminglanguage #rustecs #howtomakeagame #gametutorial #gamedevelopmenttutorial #learngamedev
---
🎵 Music: Music provided by Chillhop: chillhop.ffm.to/creatorcred
fantompower - Vitamin D chll.to/ba2493cc
In this episode, we will learn how to use Bevy UI to create a user interface for both 2d and 3d games in Bevy. Bevy UI uses the Flexbox model to layout and style our user interfaces, while also leveraging Bevy ECS to update and interact with our user interface. We will learn how to build complex hierarchical user interface layouts from the four widgets provided by Bevy UI - NodeBundle, ButtonBundle, TextBundle, and ImageBundle.
This video is perfect for those new to Bevy Game Engine and wanting to learn the basics of ECS game development with Rust. It will provide an introduction to the engine and teach you how to make games with Bevy with the entity component system game architecture.
Whether you are a beginner or a seasoned developer, this tutorial is an excellent resource for anyone who wants to learn the fundamentals of Bevy Game Engine and ECS game development with Rust.
So, if you want to learn the Bevy Game Engine v0.10 and start your journey to create amazing games, check out this tutorial series.
---
Chapters
0:00 Introduction
0:55 Code Fixes
3:26 Code Cleanup
4:48 Flexbox Model
6:27 Flexbox Survival Guide
8:46 Bevy Ball Game UI Sketches
9:07 Bevy UI and Bevy ECS
9:56 Main Menu Layout
15:00 Style
16:02 Main Menu Layout Continued
32:19 Style Clean Up
37:02 Interactions and Updates with Bevy ECS
44:08 HUD, Pause Menu, and Game Over Menu
45:56 Wrap Up
---
Code:
- Episode 9 Fixes: github.com/frederickjjoubert/bevy-ball-game/tree/Episode-9-Fixes
- Episode 10 Final Code: github.com/frederickjjoubert/bevy-ball-game/tree/Episode-10
---
Reading:
Bevy UI: docs.rs/bevy_ui/latest/bevy_ui/
Flexbox CSS Reference: cssreference.io/flexbox/
A Complete Guide to Flexbox: css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Flexbox Poster: css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png
Fireship Flexbox: ua-cam.com/video/K74l26pE4YA/v-deo.html
Style: docs.rs/bevy/latest/bevy/ui/struct.Style.html
NodeBundle: docs.rs/bevy_ui/latest/bevy_ui/node_bundles/struct.NodeBundle.html
ButtonBundle: docs.rs/bevy_ui/latest/bevy_ui/node_bundles/struct.ButtonBundle.html
ImageBundle: docs.rs/bevy_ui/latest/bevy_ui/node_bundles/struct.ImageBundle.html
TextBundle: docs.rs/bevy/latest/bevy/prelude/struct.TextBundle.html
---
This tutorial assumes basic knowledge of the Rust programming language, but total beginners can still try to follow along.
www.rust-lang.org
Please make sure you have the latest version of the Rust programming language installed.
---
#bevy #rust #gamedev #bevyengine #bevygameengine #learnbevy #learnbevygameengine #bevygameenginetutorial #bevyecs #bevyentitycomponentsystem #ecs #entitycomponentsystem #learnecs #learnecsgamearchitecture #gamedevelopment #rustgamedevelopment #rustgamedev #rustprogramminglanguage #rustecs #howtomakeagame #gametutorial #gamedevelopmenttutorial #learngamedev
---
🎵 Music: Music provided by Chillhop: chillhop.ffm.to/creatorcred
fantompower - Vitamin D chll.to/ba2493cc
Переглядів: 23 840
Відео
Learn Bevy 0.10 - EP9 - Bevy States and Run Conditions
Переглядів 12 тис.Рік тому
This is the ninth episode of my Bevy Game Engine beginner video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we will learn how to use bevy states as a co...
Learn Bevy 0.10 - EP8 - Explicit System Ordering and Bevy System Sets
Переглядів 8 тис.Рік тому
This is the eighth episode of my Bevy Game Engine beginner video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we will learn how to explicitly order our s...
Learn Bevy 0.10 - EP7 - Bevy Project Organization and Refactor, Rust Modules, and Bevy Plugins
Переглядів 12 тис.Рік тому
This is the seventh episode of my Bevy Game Engine beginner video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we we performing two refactors of our bevy...
Learn Bevy 0.10 - EP6 - Spawning Enemies over Time, and Bevy Events! - Bevy Engine Beginner Tutorial
Переглядів 11 тис.Рік тому
This is the sixth episode of my Bevy Game Engine beginner video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we will be spawning in enemies over time usi...
Learn Bevy 0.10 - EP5 - Spawning and Collecting Stars, Score Resource, and Timers - Tutorial
Переглядів 12 тис.Рік тому
This is the fifth episode of my Bevy Game Engine video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we will be spawning in stars for the player to collec...
Learn Bevy 0.10 - EP4 - Enemy Movement, Collisions, Sound Effects, Despawning - Bevy Tutorial
Переглядів 19 тис.Рік тому
This is the fourth episode of my Bevy Game Engine video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we will add an enemy movement system, basic / pseudo...
Learn Bevy 0.10 - EP3 - Player Movement from Keyboard Input and Spawning Enemies - Bevy Tutorial
Переглядів 24 тис.Рік тому
This is the third episode of my Bevy Game Engine video tutorial series, teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. In this episode, we will use keyboard input to move our player. We wil...
Learn Bevy 0.10 - EP2 - First Game Setup + Bundles and Resources - Bevy Tutorial
Переглядів 32 тис.Рік тому
This is the second episode of my Bevy Game Engine video tutorial series teaching you how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. This video is perfect for those new to Bevy Game Engine and wanting to...
Learn Bevy 0.10 - EP1 - Intro Tutorial to Bevy Game Engine Entity Component System and Queries
Переглядів 89 тис.Рік тому
In this first introductory episode tutorial video, you will learn how to use Bevy Game Engine version 0.10, a powerful game engine built with the Rust programming language that utilizes the entity component system (ECS) architecture. With Bevy, you can create fast, efficient, and highly customizable games. This video is perfect for those new to Bevy Game Engine and wanting to learn the basics o...
Excellent video! The pace was slow enough to get a really good grasp of these core concepts, but still avoided wasting any time. Thanks for making this!
@@kotajacob my pleasure! Thank you for the kind words and I’m glad you found it helpful.
Amazing series, truly! 🥹 As a software engineer rather than a game developer, I find Bevy much more approachable compared to other game engines. The overwhelming complexity of traditional game engine editors often makes me feel like, ‘Do I really need to understand all these features?’ or wonder, ‘What’s happening behind the scenes?’. While Bevy has its own challenges, it feels tailored for developers who aren’t primarily game developers. It strikes a great balance for someone like me. :3 Again, thanks for opening the door to this. It’s definitely something I see as worth learning, and I hope to see you back on UA-cam soon. All the best!
This was my first time working with Rust, and coming from a Go background, it actually felt somewhat familiar. The surprising part was how the bulky, nested UI structure reminded me of Flutter, which I’ve also worked with. :D Now that Bevy is at v0.15, I’ve noticed a lot of changes compared to what you’ve shown here (v0.10). But, as they’ve mentioned, breaking changes are to be expected from time to time.
@@bujupaah thank you for your kind words! I’m very happy you enjoyed this introduction and series. All the best on your Bevy journey. I hope to make an updated series in the future.
21:31 am pretty sure those comments saying what those are, are self explaned by the code
13:45 there can be Very good use of match in this
also to note when the system has no way to figure out the order based on data it just runs whatever is in the current order shurg it worked when i put enemy change direction after confine enemys
ALso center the camera to fix the window resize issue
also for _ in 1.. (1.0+random::<f32>()*10.0) as i32 { for random amount of ememies that cannot be 0
Also use add_systems() with a tuple for functions for better format
Tutorial looks great, but honestly I am about to give up on Rust just from seeing "something".to_string() .. is this a general indication of how the language is pointlessly verbose?
"something" is a string on the stack. In rust this type is called 'str'. It consumes a fixed amount of memory and ist known at compile time. "something".to_string() is of type 'String' and saved to the dynamic heap memory. Rust encourages (and sometimes straight up forces) you to think about performance and memory footprint. I was put of by this as well but once you nonlonger see it as burden, but instead as a tool that Rust gives you (and other languages dont), its a tremendous experience.
bros keyboard made the video even better!
Thanks a lot for the tutorial series! Bevy is a ton of fun so far, and you’ve been a great help! :) But I'm wondering, couldn't you get a lot more use out of the components? For example, instead of iterating over the players and enemies separately to keep them in bounds, why not attach some kind of "keep_in_bounds" component and check for that instead? And some of the constant values could also be stored as components to make it more modular. Something like "sprite_size" and "sprite_speed" for example. That being said, trying to optimize the code helps me a lot, so I'm not really complaining!
Thank you for the kind words, it is my pleasure. There are an infinite amount of ways to accomplish the same thing in programming, I encourage you to try out different approaches to what I demo in the videos to learn and explore. :)
just wondering, but why do you make all your functions and structs public ? I'm learning on a newer version of bevy and was wondering if those were necessary at the time, or if not and it's just more useful later down the line.
For this beginner series I didn’t think the nuance between public vs private was necessary to teach so I just set everything to public to make it easier
changes to follow in bevy 0.14: game_over_event_reader.iter() => game_over_event_reader.read() app_exit_event_write.send(AppExit); => app_exit_event_write.send(AppExit::Success);
what keyboard do you use? it sounds heavenly
@@enternix3942 Keychron K10, I am incredibly happy with it.
You can constraint player 3 translation Vec3 with Vec3.clamp method. The problem with your approach with window is that it will not work when window is resized, since you check width and height but when you resize the window origin of the world changes and your constraints will be broken. No idea how to fix it tho :D
i had a weird bug where sometimes the enemy movement seems to get stuck (after reaching screen end all enemies move in the same direction and get stuck in one corner) i fixed it in bevy 0.14 with .chain() in the add_systems call - so confine enemy movement will get spawned at after the enemies got their movement and update direction. Maybe this helped somebody else :) - like the series! :)
Very good work. Keep it up
Unity is also ESC . We call it Unity DOTS consist of ECS , Job System and Burst Compiler
Unity DOTS is a feature, it is not the default way to make games in Unity.
Hi @jacques-dev, I ran the game and it kept increasing RAM usage. Could you explain why ? Thanks!!!
Hi there! I'm sorry to hear that, it sounds like there may be a memory leak somewhere, one would need to investigate what's going on with the profiler in your IDE.
@@jacques-dev Hi! Thanks for the response. It looks like a memory leak might be the culprit, I see 87% is libsystem_pthread.dylib`thread_start
Wait... Where are all your semicolons? How are you not getting compiler errors?
so many bevy tutorials just walk through already written code, or go through features in a totally backwards order. thank you for this easy to digest series 🙏
Analyzers, linters, etc.. sometimes mess up and make VSCode behave poorly or show up non-errors. Faster way to keep your focus without closing VS at all is to simply *CTRL+SHIFT+P > Reload Window* This ensures you can keep flowing with minimal hiccups.
Will their be other episodes or do you prefer to wait for a more stable release ? I guess life happens too, but still, it's a great tutorial series, too bad it had to end here like many other...
Life happens… work is taking up all my time. I do hope to make more videos in the future but I don’t have any planned right now. I am sort of waiting for Bevy to have a UI editor before I go any further I think it’s too important of a feature for a game engine to (not) have to work without one.
@@jacques-dev I see, work often takes all the free time we had... And yeah, an editor for Bevy would be great, can't wait for that !
amazing tutorial, your learned me so much
Thank you I am happy to hear that :)
You don't need to set the player and camera to half of window dimensions, you can just set all coordinates to 0. Of course if you don't want the camera and player aligned, e.g. if you want the player to be in the 25% from the left, then you indeed need to use window dimensions (but the positions won't update upon resizing the window).
Another approach to pause simulation is to create a system `transition_to_paused_simulation` and then schedule like `OnExit(AppState::Game, transition_to_paused_simulation)`, this way if we have more ways to go to main menu the simulation will still pause.
I tried to create a component called Ball and add to both player and enemy so I can implement a single system called confine_ball_movement, for some reason the query never found the balls. Another way to fix the bug is to fix the position of the enemies on spawn as once they are created they will never cross the limits
@@carlosverdes please share your system with me and I can take a look :)
@@jacques-dev Thanks for the prompt response! The idea is that both Player and Enemy has a component Ball so we can build systems that apply to balls and reuse that logic Here I spawn the player commands.spawn(( SpriteBundle { transform: Transform::from_xyz(window.width() / 2.0, window.height() / 2.0, 0.0), texture: asset_server.load("sprites/ball_blue_large.png"), ..default() }, Player {}, Ball {}, )); Similar code for Enemy (omited) Then the system: pub fn confine_ball_movement( mut ball_query: Query<&mut Transform, With<Ball>>, window_query: Query<&Window, With<PrimaryWindow>>, ) { if let Ok(mut ball_transform) = ball_query.get_single_mut() { ... This code doesn't work, however if I use Query<&mut Transform, With<Player> it works
@@jacques-dev thanks for the prompt response The idea is to have a component Ball and use it in both Player and Enemy so we can reuse common logic like confine movement #[derive(Component)] pub struct Ball {} #[derive(Component)] pub struct Player {} pub fn spawn_player( mut commands: Commands, window_query: Query<&Window, With<PrimaryWindow>>, asset_server: Res<AssetServer>, ) { let window = window_query.single(); commands.spawn(( SpriteBundle { transform: Transform::from_xyz(window.width() / 2.0, window.height() / 2.0, 0.0), texture: asset_server.load("sprites/ball_blue_large.png"), ..default() }, Player {}, Ball {}, )); } pub fn confine_ball_movement( mut ball_query: Query<&mut Transform, With<Ball>>, window_query: Query<&Window, With<PrimaryWindow>>, ) { if let Ok(mut ball_transform) = ball_query.get_single_mut() { let window = window_query.single(); let half_ball_size = PLAYER_SIZE / 2.0; let min_x = 0.0 + half_ball_size; let max_x = window.width() - half_ball_size; let min_y = 0.0 + half_ball_size; let max_y = window.height() - half_ball_size; if ball_transform.translation.x < min_x { ball_transform.translation.x = min_x; } else if ball_transform.translation.x > max_x { ball_transform.translation.x = max_x; } if ball_transform.translation.y < min_y { ball_transform.translation.y = min_y; } else if ball_transform.translation.y > max_y { ball_transform.translation.y = max_y; } } }
I just found the issue, the query can't be get_single as there are many instances :) Changed to an interator and it works
I actually recommend to add this into the tutorial, to build a common component with reusable systems like the example above
Why do you add global variables and not put them in structs?
because they will never change and contain a single constant field.
This a very complex programming language
Thats just the tip of it tbh it has many more complex features
It’s just a slightly different way of writing code, once you get used to it you will see the benefits.
new hello world code: use bevy::prelude::*; fn main() { App::new().add_systems(Update, hello_world_system).run(); } fn hello_world_system() { println!("hello world"); }
Just a note on spawning stars overtime: `timer.just_finished()` may be better choice to be used for Rust 1.79.0 & bevy 0.13.2 (2024), since what we need are trigger for when the timer is just finished. But since it behave identically with `timer.finished()` on a repeating timer, I wouldn't say the video is wrong. Just more in readability aspect IMHO. Amazing tutorial by the way!
Oh noo - it's over..? 😢 Thanks a lot for this excellent series!
Thanks for this gem! Another set of building blocks in place. This was easier than I expected
Ecs is awesome. Soo easy to extend. I'm glad I found your tutorial series, since I was creating a mess. Looking forward to the cleanup tomorrow with the new knowledge.
I really like how you extend the functionality of the game over time. This shows how well you can extend an ecs codebase. Looking forward to experimenting with it!
Great tutorial! Well paced and easy to understand. ECS felt very natural to me for some reason and I didn't know why. Your example with the sql table made it click.
First of all thank you so much for this amazing tutorial! It really helped me a lot! I found a bug in the UI for Ep10 where if the GameOver event is cleared before the GameOverMenu is up and running the Final Score will not update. I made a pr with a fix I found using manual event clearing. If you have the chance, please consider reviewing it.
Thank you for making the PR! :) I approved it, please go ahead and merge :)
In your transform, why didn't you query for a Transform With Enemy?
I like this tutorial, though It's quite difficult for me to tell if what you're coding is a Bevy construct or if what you're coding is a helper that's unrelated to Bevy.
Hi there, if you tell me which part of the code you’re looking at and copy paste a snippet I can tell you :)
me and my homies hate bevy UI (I still don't know how to Center text without jank ahh methods, I'm just praying for a gui editor for it soon)
Yeah I hope so too.
I am getting a weird issue where my video output renders for what I assume is one frame and then goes back to black? using bevy 0.13.0, with the z value of the camera set to 1, both the spawn camera and spawn player are in an add systems set to startup, it's giving a warning saying "couldn't get swap chain texture. this often happens with the Nvidia 550 driver. it can be safely ignored" incase that's significant. also I am on Wayland. very confused why it is rendering the output for a frame and then just back to a black screen. I don't think this is an issue with me forgetting something because the bevy example breakout game also renders a single frame and then goes black.. any ideas what might be up? edit: btw my gpu is a gtx 1650 incase there's something to do with that edit 2: I checked discord for someone else with this issue, they said resizing window fixes it (it does), why is that even happening???
That’s really weird :( good job asking in the discord though!
@@jacques-dev didn't ask myself, saw a different post with same error and that solution (of resizing window) fixes it for that run.
Thanks for the great tutorial!🤩
It is my pleasure! Thank you for your kind words.
Sorry dude I couldn't concentrate over the sound of that keyboard. I mean HOLY SHIT it sounds good. What switches are you running in there?
Yeah it’s a loud one. It’s a Keychron K10 with brown switches
For those coming from Bevy 0.13 .iter does not work on events, you need to use .read
So far, very good!
Me every time that I start a video "What's his name again". You "Hi, my name is Jacques"
Hehe
Really liking this tutorial series. You have a very easy going voice and instruction. Very cool. Thanks.
Thank you very much for your kind words I appreciate it, I am glad you are enjoying the series.
This was the most crunchy episode so far but it is so important. Thank you for making learning crates and managing a project so easy. This is a level up even for my non-gamedev rust projects.
I am glad you found it helpful :)
2:15 `keyboard_input: Res<ButtonInput<KeyCode>>` now
9:50 now is `add_systems(Startup, hello_world)`
You saved my life