fps_overlay/
fps_overlay.rs

1//! Showcase how to use and configure FPS overlay.
2
3use bevy::{
4    dev_tools::fps_overlay::{FpsOverlayConfig, FpsOverlayPlugin, FrameTimeGraphConfig},
5    prelude::*,
6    text::FontSmoothing,
7};
8
9struct OverlayColor;
10
11impl OverlayColor {
12    const RED: Color = Color::srgb(1.0, 0.0, 0.0);
13    const GREEN: Color = Color::srgb(0.0, 1.0, 0.0);
14}
15
16fn main() {
17    App::new()
18        .add_plugins((
19            DefaultPlugins,
20            FpsOverlayPlugin {
21                config: FpsOverlayConfig {
22                    text_config: TextFont {
23                        // Here we define size of our overlay
24                        font_size: 42.0,
25                        // If we want, we can use a custom font
26                        font: default(),
27                        // We could also disable font smoothing,
28                        font_smoothing: FontSmoothing::default(),
29                        ..default()
30                    },
31                    // We can also change color of the overlay
32                    text_color: OverlayColor::GREEN,
33                    // We can also set the refresh interval for the FPS counter
34                    refresh_interval: core::time::Duration::from_millis(100),
35                    enabled: true,
36                    frame_time_graph_config: FrameTimeGraphConfig {
37                        enabled: true,
38                        // The minimum acceptable fps
39                        min_fps: 30.0,
40                        // The target fps
41                        target_fps: 144.0,
42                    },
43                },
44            },
45        ))
46        .add_systems(Startup, setup)
47        .add_systems(Update, customize_config)
48        .run();
49}
50
51fn setup(mut commands: Commands) {
52    // We need to spawn a camera (2d or 3d) to see the overlay
53    commands.spawn(Camera2d);
54
55    // Instruction text
56
57    commands.spawn((
58        Text::new(concat!(
59            "Press 1 to toggle the overlay color.\n",
60            "Press 2 to decrease the overlay size.\n",
61            "Press 3 to increase the overlay size.\n",
62            "Press 4 to toggle the text visibility.\n",
63            "Press 5 to toggle the frame time graph."
64        )),
65        Node {
66            position_type: PositionType::Absolute,
67            bottom: px(12),
68            left: px(12),
69            ..default()
70        },
71    ));
72}
73
74fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {
75    if input.just_pressed(KeyCode::Digit1) {
76        // Changing resource will affect overlay
77        if overlay.text_color == OverlayColor::GREEN {
78            overlay.text_color = OverlayColor::RED;
79        } else {
80            overlay.text_color = OverlayColor::GREEN;
81        }
82    }
83    if input.just_pressed(KeyCode::Digit2) {
84        overlay.text_config.font_size -= 2.0;
85    }
86    if input.just_pressed(KeyCode::Digit3) {
87        overlay.text_config.font_size += 2.0;
88    }
89    if input.just_pressed(KeyCode::Digit4) {
90        overlay.enabled = !overlay.enabled;
91    }
92    if input.just_released(KeyCode::Digit5) {
93        overlay.frame_time_graph_config.enabled = !overlay.frame_time_graph_config.enabled;
94    }
95}
fps_overlay/fps_overlay.rs

fps_overlay/
fps_overlay.rs
