mirror of
https://github.com/bevyengine/bevy
synced 2025-02-18 15:08:36 +00:00
# Objective It's difficult to understand or make changes to the UI systems because of how each system needs to individually track changes to scale factor, windows and camera targets in local hashmaps, particularly for new contributors. Any major change inevitably introduces new scale factor bugs. Instead of per-system resolution we can resolve the camera target info for all UI nodes in a system at the start of `PostUpdate` and then store it per-node in components that can be queried with change detection. Fixes #17578 Fixes #15143 ## Solution Store the UI render target's data locally per node in a component that is updated in `PostUpdate` before any other UI systems run. This component can be then be queried with change detection so that UI systems no longer need to have knowledge of cameras and windows and don't require fragile custom change detection solutions using local hashmaps. ## Showcase Compare `measure_text_system` from main (which has a bug the causes it to use the wrong scale factor when a node's camera target changes): ``` pub fn measure_text_system( mut scale_factors_buffer: Local<EntityHashMap<f32>>, mut last_scale_factors: Local<EntityHashMap<f32>>, fonts: Res<Assets<Font>>, camera_query: Query<(Entity, &Camera)>, default_ui_camera: DefaultUiCamera, ui_scale: Res<UiScale>, mut text_query: Query< ( Entity, Ref<TextLayout>, &mut ContentSize, &mut TextNodeFlags, &mut ComputedTextBlock, Option<&UiTargetCamera>, ), With<Node>, >, mut text_reader: TextUiReader, mut text_pipeline: ResMut<TextPipeline>, mut font_system: ResMut<CosmicFontSystem>, ) { scale_factors_buffer.clear(); let default_camera_entity = default_ui_camera.get(); for (entity, block, content_size, text_flags, computed, maybe_camera) in &mut text_query { let Some(camera_entity) = maybe_camera .map(UiTargetCamera::entity) .or(default_camera_entity) else { continue; }; let scale_factor = match scale_factors_buffer.entry(camera_entity) { Entry::Occupied(entry) => *entry.get(), Entry::Vacant(entry) => *entry.insert( camera_query .get(camera_entity) .ok() .and_then(|(_, c)| c.target_scaling_factor()) .unwrap_or(1.0) * ui_scale.0, ), }; if last_scale_factors.get(&camera_entity) != Some(&scale_factor) || computed.needs_rerender() || text_flags.needs_measure_fn || content_size.is_added() { create_text_measure( entity, &fonts, scale_factor.into(), text_reader.iter(entity), block, &mut text_pipeline, content_size, text_flags, computed, &mut font_system, ); } } core::mem::swap(&mut *last_scale_factors, &mut *scale_factors_buffer); } ``` with `measure_text_system` from this PR (which always uses the correct scale factor): ``` pub fn measure_text_system( fonts: Res<Assets<Font>>, mut text_query: Query< ( Entity, Ref<TextLayout>, &mut ContentSize, &mut TextNodeFlags, &mut ComputedTextBlock, Ref<ComputedNodeTarget>, ), With<Node>, >, mut text_reader: TextUiReader, mut text_pipeline: ResMut<TextPipeline>, mut font_system: ResMut<CosmicFontSystem>, ) { for (entity, block, content_size, text_flags, computed, computed_target) in &mut text_query { // Note: the ComputedTextBlock::needs_rerender bool is cleared in create_text_measure(). if computed_target.is_changed() || computed.needs_rerender() || text_flags.needs_measure_fn || content_size.is_added() { create_text_measure( entity, &fonts, computed_target.scale_factor.into(), text_reader.iter(entity), block, &mut text_pipeline, content_size, text_flags, computed, &mut font_system, ); } } } ``` ## Testing I removed an alarming number of tests from the `layout` module but they were mostly to do with the deleted camera synchronisation logic. The remaining tests should all pass now. The most relevant examples are `multiple_windows` and `split_screen`, the behaviour of both should be unchanged from main. --------- Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com> Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
207 lines
6.5 KiB
Rust
207 lines
6.5 KiB
Rust
//! Renders two cameras to the same window to accomplish "split screen".
|
|
|
|
use std::f32::consts::PI;
|
|
|
|
use bevy::{
|
|
pbr::CascadeShadowConfigBuilder, prelude::*, render::camera::Viewport, window::WindowResized,
|
|
};
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_systems(Startup, setup)
|
|
.add_systems(Update, (set_camera_viewports, button_system))
|
|
.run();
|
|
}
|
|
|
|
/// set up a simple 3D scene
|
|
fn setup(
|
|
mut commands: Commands,
|
|
asset_server: Res<AssetServer>,
|
|
mut meshes: ResMut<Assets<Mesh>>,
|
|
mut materials: ResMut<Assets<StandardMaterial>>,
|
|
) {
|
|
// plane
|
|
commands.spawn((
|
|
Mesh3d(meshes.add(Plane3d::default().mesh().size(100.0, 100.0))),
|
|
MeshMaterial3d(materials.add(Color::srgb(0.3, 0.5, 0.3))),
|
|
));
|
|
|
|
commands.spawn(SceneRoot(
|
|
asset_server.load(GltfAssetLabel::Scene(0).from_asset("models/animated/Fox.glb")),
|
|
));
|
|
|
|
// Light
|
|
commands.spawn((
|
|
Transform::from_rotation(Quat::from_euler(EulerRot::ZYX, 0.0, 1.0, -PI / 4.)),
|
|
DirectionalLight {
|
|
shadows_enabled: true,
|
|
..default()
|
|
},
|
|
CascadeShadowConfigBuilder {
|
|
num_cascades: if cfg!(all(
|
|
feature = "webgl2",
|
|
target_arch = "wasm32",
|
|
not(feature = "webgpu")
|
|
)) {
|
|
// Limited to 1 cascade in WebGL
|
|
1
|
|
} else {
|
|
2
|
|
},
|
|
first_cascade_far_bound: 200.0,
|
|
maximum_distance: 280.0,
|
|
..default()
|
|
}
|
|
.build(),
|
|
));
|
|
|
|
// Cameras and their dedicated UI
|
|
for (index, (camera_name, camera_pos)) in [
|
|
("Player 1", Vec3::new(0.0, 200.0, -150.0)),
|
|
("Player 2", Vec3::new(150.0, 150., 50.0)),
|
|
("Player 3", Vec3::new(100.0, 150., -150.0)),
|
|
("Player 4", Vec3::new(-100.0, 80., 150.0)),
|
|
]
|
|
.iter()
|
|
.enumerate()
|
|
{
|
|
let camera = commands
|
|
.spawn((
|
|
Camera3d::default(),
|
|
Transform::from_translation(*camera_pos).looking_at(Vec3::ZERO, Vec3::Y),
|
|
Camera {
|
|
// Renders cameras with different priorities to prevent ambiguities
|
|
order: index as isize,
|
|
..default()
|
|
},
|
|
CameraPosition {
|
|
pos: UVec2::new((index % 2) as u32, (index / 2) as u32),
|
|
},
|
|
))
|
|
.id();
|
|
|
|
// Set up UI
|
|
commands
|
|
.spawn((
|
|
UiTargetCamera(camera),
|
|
Node {
|
|
width: Val::Percent(100.),
|
|
height: Val::Percent(100.),
|
|
..default()
|
|
},
|
|
))
|
|
.with_children(|parent| {
|
|
parent.spawn((
|
|
Text::new(*camera_name),
|
|
Node {
|
|
position_type: PositionType::Absolute,
|
|
top: Val::Px(12.),
|
|
left: Val::Px(12.),
|
|
..default()
|
|
},
|
|
));
|
|
buttons_panel(parent);
|
|
});
|
|
}
|
|
|
|
fn buttons_panel(parent: &mut ChildSpawnerCommands) {
|
|
parent
|
|
.spawn(Node {
|
|
position_type: PositionType::Absolute,
|
|
width: Val::Percent(100.),
|
|
height: Val::Percent(100.),
|
|
display: Display::Flex,
|
|
flex_direction: FlexDirection::Row,
|
|
justify_content: JustifyContent::SpaceBetween,
|
|
align_items: AlignItems::Center,
|
|
padding: UiRect::all(Val::Px(20.)),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
rotate_button(parent, "<", Direction::Left);
|
|
rotate_button(parent, ">", Direction::Right);
|
|
});
|
|
}
|
|
|
|
fn rotate_button(parent: &mut ChildSpawnerCommands, caption: &str, direction: Direction) {
|
|
parent
|
|
.spawn((
|
|
RotateCamera(direction),
|
|
Button,
|
|
Node {
|
|
width: Val::Px(40.),
|
|
height: Val::Px(40.),
|
|
border: UiRect::all(Val::Px(2.)),
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::Center,
|
|
..default()
|
|
},
|
|
BorderColor(Color::WHITE),
|
|
BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
|
|
))
|
|
.with_children(|parent| {
|
|
parent.spawn(Text::new(caption));
|
|
});
|
|
}
|
|
}
|
|
|
|
#[derive(Component)]
|
|
struct CameraPosition {
|
|
pos: UVec2,
|
|
}
|
|
|
|
#[derive(Component)]
|
|
struct RotateCamera(Direction);
|
|
|
|
enum Direction {
|
|
Left,
|
|
Right,
|
|
}
|
|
|
|
fn set_camera_viewports(
|
|
windows: Query<&Window>,
|
|
mut resize_events: EventReader<WindowResized>,
|
|
mut query: Query<(&CameraPosition, &mut Camera)>,
|
|
) {
|
|
// We need to dynamically resize the camera's viewports whenever the window size changes
|
|
// so then each camera always takes up half the screen.
|
|
// A resize_event is sent when the window is first created, allowing us to reuse this system for initial setup.
|
|
for resize_event in resize_events.read() {
|
|
let window = windows.get(resize_event.window).unwrap();
|
|
let size = window.physical_size() / 2;
|
|
|
|
for (camera_position, mut camera) in &mut query {
|
|
camera.viewport = Some(Viewport {
|
|
physical_position: camera_position.pos * size,
|
|
physical_size: size,
|
|
..default()
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
fn button_system(
|
|
interaction_query: Query<
|
|
(&Interaction, &ComputedNodeTarget, &RotateCamera),
|
|
(Changed<Interaction>, With<Button>),
|
|
>,
|
|
mut camera_query: Query<&mut Transform, With<Camera>>,
|
|
) {
|
|
for (interaction, computed_target, RotateCamera(direction)) in &interaction_query {
|
|
if let Interaction::Pressed = *interaction {
|
|
// Since TargetCamera propagates to the children, we can use it to find
|
|
// which side of the screen the button is on.
|
|
if let Some(mut camera_transform) = computed_target
|
|
.camera()
|
|
.and_then(|camera| camera_query.get_mut(camera).ok())
|
|
{
|
|
let angle = match direction {
|
|
Direction::Left => -0.1,
|
|
Direction::Right => 0.1,
|
|
};
|
|
camera_transform.rotate_around(Vec3::ZERO, Quat::from_axis_angle(Vec3::Y, angle));
|
|
}
|
|
}
|
|
}
|
|
}
|