Tools / Gamepad Viewer

Back to examples View in GitHub
This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.

//! Shows a visualization of gamepad buttons, sticks, and triggers

use std::f32::consts::PI;

use bevy::{
    input::gamepad::{GamepadAxisChangedEvent, GamepadButtonChangedEvent, GamepadConnectionEvent},
    prelude::*,
    sprite::Anchor,
};

const BUTTON_RADIUS: f32 = 25.;
const BUTTON_CLUSTER_RADIUS: f32 = 50.;
const START_SIZE: Vec2 = Vec2::new(30., 15.);
const TRIGGER_SIZE: Vec2 = Vec2::new(70., 20.);
const STICK_BOUNDS_SIZE: f32 = 100.;

const BUTTONS_X: f32 = 150.;
const BUTTONS_Y: f32 = 80.;
const STICKS_X: f32 = 150.;
const STICKS_Y: f32 = -135.;

const NORMAL_BUTTON_COLOR: Color = Color::srgb(0.3, 0.3, 0.3);
const ACTIVE_BUTTON_COLOR: Color = Color::srgb(0.5, 0., 0.5);
const LIVE_COLOR: Color = Color::srgb(0.4, 0.4, 0.4);
const DEAD_COLOR: Color = Color::srgb(0.13, 0.13, 0.13);

#[derive(Component, Deref)]
struct ReactTo(GamepadButton);
#[derive(Component)]
struct MoveWithAxes {
    x_axis: GamepadAxis,
    y_axis: GamepadAxis,
    scale: f32,
}
#[derive(Component)]
struct TextWithAxes {
    x_axis: GamepadAxis,
    y_axis: GamepadAxis,
}
#[derive(Component, Deref)]
struct TextWithButtonValue(GamepadButton);

#[derive(Component)]
struct ConnectedGamepadsText;

#[derive(Resource)]
struct ButtonMaterials {
    normal: MeshMaterial2d<ColorMaterial>,
    active: MeshMaterial2d<ColorMaterial>,
}
impl FromWorld for ButtonMaterials {
    fn from_world(world: &mut World) -> Self {
        Self {
            normal: world.add_asset(NORMAL_BUTTON_COLOR).into(),
            active: world.add_asset(ACTIVE_BUTTON_COLOR).into(),
        }
    }
}
#[derive(Resource)]
struct ButtonMeshes {
    circle: Mesh2d,
    triangle: Mesh2d,
    start_pause: Mesh2d,
    trigger: Mesh2d,
}
impl FromWorld for ButtonMeshes {
    fn from_world(world: &mut World) -> Self {
        Self {
            circle: world.add_asset(Circle::new(BUTTON_RADIUS)).into(),
            triangle: world
                .add_asset(RegularPolygon::new(BUTTON_RADIUS, 3))
                .into(),
            start_pause: world.add_asset(Rectangle::from_size(START_SIZE)).into(),
            trigger: world.add_asset(Rectangle::from_size(TRIGGER_SIZE)).into(),
        }
    }
}

#[derive(Bundle)]
struct GamepadButtonBundle {
    mesh: Mesh2d,
    material: MeshMaterial2d<ColorMaterial>,
    transform: Transform,
    react_to: ReactTo,
}

impl GamepadButtonBundle {
    pub fn new(
        button_type: GamepadButton,
        mesh: Mesh2d,
        material: MeshMaterial2d<ColorMaterial>,
        x: f32,
        y: f32,
    ) -> Self {
        Self {
            mesh,
            material,
            transform: Transform::from_xyz(x, y, 0.),
            react_to: ReactTo(button_type),
        }
    }

    pub fn with_rotation(mut self, angle: f32) -> Self {
        self.transform.rotation = Quat::from_rotation_z(angle);
        self
    }
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .init_resource::<ButtonMaterials>()
        .init_resource::<ButtonMeshes>()
        .add_systems(
            Startup,
            (setup, setup_sticks, setup_triggers, setup_connected),
        )
        .add_systems(
            Update,
            (
                update_buttons,
                update_button_values,
                update_axes,
                update_connected,
            ),
        )
        .run();
}

fn setup(mut commands: Commands, meshes: Res<ButtonMeshes>, materials: Res<ButtonMaterials>) {
    commands.spawn(Camera2d);

    // Buttons

    commands
        .spawn((
            Transform::from_xyz(BUTTONS_X, BUTTONS_Y, 0.),
            Visibility::default(),
        ))
        .with_children(|parent| {
            parent.spawn(GamepadButtonBundle::new(
                GamepadButton::North,
                meshes.circle.clone(),
                materials.normal.clone(),
                0.,
                BUTTON_CLUSTER_RADIUS,
            ));
            parent.spawn(GamepadButtonBundle::new(
                GamepadButton::South,
                meshes.circle.clone(),
                materials.normal.clone(),
                0.,
                -BUTTON_CLUSTER_RADIUS,
            ));
            parent.spawn(GamepadButtonBundle::new(
                GamepadButton::West,
                meshes.circle.clone(),
                materials.normal.clone(),
                -BUTTON_CLUSTER_RADIUS,
                0.,
            ));
            parent.spawn(GamepadButtonBundle::new(
                GamepadButton::East,
                meshes.circle.clone(),
                materials.normal.clone(),
                BUTTON_CLUSTER_RADIUS,
                0.,
            ));
        });

    // Start and Pause

    commands.spawn(GamepadButtonBundle::new(
        GamepadButton::Select,
        meshes.start_pause.clone(),
        materials.normal.clone(),
        -30.,
        BUTTONS_Y,
    ));

    commands.spawn(GamepadButtonBundle::new(
        GamepadButton::Start,
        meshes.start_pause.clone(),
        materials.normal.clone(),
        30.,
        BUTTONS_Y,
    ));

    // D-Pad

    commands
        .spawn((
            Transform::from_xyz(-BUTTONS_X, BUTTONS_Y, 0.),
            Visibility::default(),
        ))
        .with_children(|parent| {
            parent.spawn(GamepadButtonBundle::new(
                GamepadButton::DPadUp,
                meshes.triangle.clone(),
                materials.normal.clone(),
                0.,
                BUTTON_CLUSTER_RADIUS,
            ));
            parent.spawn(
                GamepadButtonBundle::new(
                    GamepadButton::DPadDown,
                    meshes.triangle.clone(),
                    materials.normal.clone(),
                    0.,
                    -BUTTON_CLUSTER_RADIUS,
                )
                .with_rotation(PI),
            );
            parent.spawn(
                GamepadButtonBundle::new(
                    GamepadButton::DPadLeft,
                    meshes.triangle.clone(),
                    materials.normal.clone(),
                    -BUTTON_CLUSTER_RADIUS,
                    0.,
                )
                .with_rotation(PI / 2.),
            );
            parent.spawn(
                GamepadButtonBundle::new(
                    GamepadButton::DPadRight,
                    meshes.triangle.clone(),
                    materials.normal.clone(),
                    BUTTON_CLUSTER_RADIUS,
                    0.,
                )
                .with_rotation(-PI / 2.),
            );
        });

    // Triggers

    commands.spawn(GamepadButtonBundle::new(
        GamepadButton::LeftTrigger,
        meshes.trigger.clone(),
        materials.normal.clone(),
        -BUTTONS_X,
        BUTTONS_Y + 115.,
    ));

    commands.spawn(GamepadButtonBundle::new(
        GamepadButton::RightTrigger,
        meshes.trigger.clone(),
        materials.normal.clone(),
        BUTTONS_X,
        BUTTONS_Y + 115.,
    ));
}

fn setup_sticks(
    mut commands: Commands,
    meshes: Res<ButtonMeshes>,
    materials: Res<ButtonMaterials>,
) {
    // NOTE: This stops making sense because in entities because there isn't a "global" default,
    // instead each gamepad has its own default setting
    let gamepad_settings = GamepadSettings::default();
    let dead_upper =
        STICK_BOUNDS_SIZE * gamepad_settings.default_axis_settings.deadzone_upperbound();
    let dead_lower =
        STICK_BOUNDS_SIZE * gamepad_settings.default_axis_settings.deadzone_lowerbound();
    let dead_size = dead_lower.abs() + dead_upper.abs();
    let dead_mid = (dead_lower + dead_upper) / 2.0;

    let live_upper =
        STICK_BOUNDS_SIZE * gamepad_settings.default_axis_settings.livezone_upperbound();
    let live_lower =
        STICK_BOUNDS_SIZE * gamepad_settings.default_axis_settings.livezone_lowerbound();
    let live_size = live_lower.abs() + live_upper.abs();
    let live_mid = (live_lower + live_upper) / 2.0;

    let mut spawn_stick = |x_pos, y_pos, x_axis, y_axis, button| {
        commands
            .spawn((Transform::from_xyz(x_pos, y_pos, 0.), Visibility::default()))
            .with_children(|parent| {
                // full extent
                parent.spawn(Sprite::from_color(
                    DEAD_COLOR,
                    Vec2::splat(STICK_BOUNDS_SIZE * 2.),
                ));
                // live zone
                parent.spawn((
                    Sprite::from_color(LIVE_COLOR, Vec2::splat(live_size)),
                    Transform::from_xyz(live_mid, live_mid, 2.),
                ));
                // dead zone
                parent.spawn((
                    Sprite::from_color(DEAD_COLOR, Vec2::splat(dead_size)),
                    Transform::from_xyz(dead_mid, dead_mid, 3.),
                ));
                // text
                let style = TextFont {
                    font_size: 13.,
                    ..default()
                };
                parent
                    .spawn((
                        Text2d::default(),
                        Transform::from_xyz(0., STICK_BOUNDS_SIZE + 2., 4.),
                        Anchor::BottomCenter,
                        TextWithAxes { x_axis, y_axis },
                    ))
                    .with_children(|p| {
                        p.spawn((TextSpan(format!("{:.3}", 0.)), style.clone()));
                        p.spawn((TextSpan::new(", "), style.clone()));
                        p.spawn((TextSpan(format!("{:.3}", 0.)), style));
                    });
                // cursor
                parent.spawn((
                    meshes.circle.clone(),
                    materials.normal.clone(),
                    Transform::from_xyz(0., 0., 5.).with_scale(Vec2::splat(0.15).extend(1.)),
                    MoveWithAxes {
                        x_axis,
                        y_axis,
                        scale: STICK_BOUNDS_SIZE,
                    },
                    ReactTo(button),
                ));
            });
    };

    spawn_stick(
        -STICKS_X,
        STICKS_Y,
        GamepadAxis::LeftStickX,
        GamepadAxis::LeftStickY,
        GamepadButton::LeftThumb,
    );
    spawn_stick(
        STICKS_X,
        STICKS_Y,
        GamepadAxis::RightStickX,
        GamepadAxis::RightStickY,
        GamepadButton::RightThumb,
    );
}

fn setup_triggers(
    mut commands: Commands,
    meshes: Res<ButtonMeshes>,
    materials: Res<ButtonMaterials>,
) {
    let mut spawn_trigger = |x, y, button_type| {
        commands
            .spawn(GamepadButtonBundle::new(
                button_type,
                meshes.trigger.clone(),
                materials.normal.clone(),
                x,
                y,
            ))
            .with_children(|parent| {
                parent.spawn((
                    Transform::from_xyz(0., 0., 1.),
                    Text(format!("{:.3}", 0.)),
                    TextFont {
                        font_size: 13.,
                        ..default()
                    },
                    TextWithButtonValue(button_type),
                ));
            });
    };

    spawn_trigger(-BUTTONS_X, BUTTONS_Y + 145., GamepadButton::LeftTrigger2);
    spawn_trigger(BUTTONS_X, BUTTONS_Y + 145., GamepadButton::RightTrigger2);
}

fn setup_connected(mut commands: Commands) {
    // This is UI text, unlike other text in this example which is 2d.
    commands
        .spawn((
            Text::new("Connected Gamepads:\n"),
            Node {
                position_type: PositionType::Absolute,
                top: Val::Px(12.),
                left: Val::Px(12.),
                ..default()
            },
            ConnectedGamepadsText,
        ))
        .with_child(TextSpan::new("None"));
}

fn update_buttons(
    gamepads: Query<&Gamepad>,
    materials: Res<ButtonMaterials>,
    mut query: Query<(&mut MeshMaterial2d<ColorMaterial>, &ReactTo)>,
) {
    for gamepad in &gamepads {
        for (mut handle, react_to) in query.iter_mut() {
            if gamepad.just_pressed(**react_to) {
                *handle = materials.active.clone();
            }
            if gamepad.just_released(**react_to) {
                *handle = materials.normal.clone();
            }
        }
    }
}
fn update_button_values(
    mut events: EventReader<GamepadButtonChangedEvent>,
    mut query: Query<(&mut Text2d, &TextWithButtonValue)>,
) {
    for button_event in events.read() {
        for (mut text, text_with_button_value) in query.iter_mut() {
            if button_event.button == **text_with_button_value {
                **text = format!("{:.3}", button_event.value);
            }
        }
    }
}

fn update_axes(
    mut axis_events: EventReader<GamepadAxisChangedEvent>,
    mut query: Query<(&mut Transform, &MoveWithAxes)>,
    text_query: Query<(Entity, &TextWithAxes)>,
    mut writer: Text2dWriter,
) {
    for axis_event in axis_events.read() {
        let axis_type = axis_event.axis;
        let value = axis_event.value;
        for (mut transform, move_with) in query.iter_mut() {
            if axis_type == move_with.x_axis {
                transform.translation.x = value * move_with.scale;
            }
            if axis_type == move_with.y_axis {
                transform.translation.y = value * move_with.scale;
            }
        }
        for (text, text_with_axes) in text_query.iter() {
            if axis_type == text_with_axes.x_axis {
                *writer.text(text, 1) = format!("{value:.3}");
            }
            if axis_type == text_with_axes.y_axis {
                *writer.text(text, 3) = format!("{value:.3}");
            }
        }
    }
}

fn update_connected(
    mut connected: EventReader<GamepadConnectionEvent>,
    gamepads: Query<(Entity, &Name), With<Gamepad>>,
    text: Single<Entity, With<ConnectedGamepadsText>>,
    mut writer: TextUiWriter,
) {
    if connected.is_empty() {
        return;
    }
    connected.clear();

    let formatted = gamepads
        .iter()
        .map(|(entity, name)| format!("{} - {}", entity, name))
        .collect::<Vec<_>>()
        .join("\n");

    *writer.text(*text, 1) = if !formatted.is_empty() {
        formatted
    } else {
        "None".to_string()
    }
}