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: https://github.com/frederickjjoubert/...
Episode 10 Final Code: https://github.com/frederickjjoubert/...

---

Reading:

Bevy UI: https://docs.rs/bevy_ui/latest/bevy_ui/
Flexbox CSS Reference: https://cssreference.io/flexbox/
A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a...
CSS Flexbox Poster: https://css-tricks.com/wp-content/upl...
Fireship Flexbox:    • CSS Flexbox in 100 Seconds  
Style: https://docs.rs/bevy/latest/bevy/ui/s...
NodeBundle: https://docs.rs/bevy_ui/latest/bevy_u...
ButtonBundle: https://docs.rs/bevy_ui/latest/bevy_u...
ImageBundle: https://docs.rs/bevy_ui/latest/bevy_u...
TextBundle: https://docs.rs/bevy/latest/bevy/prel...

---

This tutorial assumes basic knowledge of the Rust programming language, but total beginners can still try to follow along.

https://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: https://chillhop.ffm.to/creatorcred

fantompower - Vitamin D https://chll.to/ba2493cc