05e0315355
hello ! im not english native, don't hesitate to correct my code comments. # Objective a simple example for new users. This is a question asked a lot, and i struggled to do it at first too. see https://github.com/bevyengine/bevy/discussions/11223 ## Showcase  --------- Co-authored-by: theotherphil <phil.j.ellison@gmail.com>
71 lines
2.7 KiB
Rust
71 lines
2.7 KiB
Rust
//! This example shows how to render 2D objects on top of Bevy UI, by using a second camera with a higher `order` than the UI camera.
|
|
|
|
use bevy::{color::palettes::tailwind, prelude::*, render::view::RenderLayers};
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_systems(Startup, setup)
|
|
.add_systems(Update, rotate_sprite)
|
|
.run();
|
|
}
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
// The default camera. `IsDefaultUiCamera` makes this the default camera to render UI elements to. Alternatively, you can add the `UiTargetCamera` component to root UI nodes to define which camera they should be rendered to.
|
|
commands.spawn((Camera2d, IsDefaultUiCamera));
|
|
|
|
// The second camera. The higher order means that this camera will be rendered after the first camera. We will render to this camera to draw on top of the UI.
|
|
commands.spawn((
|
|
Camera2d,
|
|
Camera {
|
|
order: 1,
|
|
// Don't draw anything in the background, to see the previous camera.
|
|
clear_color: ClearColorConfig::None,
|
|
..default()
|
|
},
|
|
// This camera will only render entities which are on the same render layer.
|
|
RenderLayers::layer(1),
|
|
));
|
|
|
|
commands.spawn((
|
|
// We could also use a `UiTargetCamera` component here instead of the general `IsDefaultUiCamera`.
|
|
Node {
|
|
width: Val::Percent(100.),
|
|
height: Val::Percent(100.),
|
|
display: Display::Flex,
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::Center,
|
|
..default()
|
|
},
|
|
BackgroundColor(tailwind::ROSE_400.into()),
|
|
children![(
|
|
Node {
|
|
height: Val::Percent(30.),
|
|
width: Val::Percent(20.),
|
|
min_height: Val::Px(150.),
|
|
min_width: Val::Px(150.),
|
|
border: UiRect::all(Val::Px(2.)),
|
|
..default()
|
|
},
|
|
BorderRadius::all(Val::Percent(25.0)),
|
|
BorderColor::all(Color::WHITE),
|
|
)],
|
|
));
|
|
|
|
// This 2D object will be rendered on the second camera, on top of the default camera where the UI is rendered.
|
|
commands.spawn((
|
|
Sprite {
|
|
image: asset_server.load("textures/rpg/chars/sensei/sensei.png"),
|
|
custom_size: Some(Vec2::new(100., 100.)),
|
|
..default()
|
|
},
|
|
RenderLayers::layer(1),
|
|
));
|
|
}
|
|
|
|
fn rotate_sprite(time: Res<Time>, mut sprite: Single<&mut Transform, With<Sprite>>) {
|
|
// Use any of the regular 2D rendering features, for example rotating a sprite via its `Transform`.
|
|
sprite.rotation *=
|
|
Quat::from_rotation_z(time.delta_secs() * 0.5) * Quat::from_rotation_y(time.delta_secs());
|
|
}
|