How to create a custom cursor?

[Ewan88]

I'm trying to create a custom cursor but am hitting a roadblock.

I am able to hide the default cursor and create an ImageBundle to represent my new cursor - as there doesn't seem to be a way to specify the default cursor as an image this seems to be the only way.

My function to move the cursor looks like this:

fn move_cursor(window: Query<&Window>, mut cursor_state: Query<(&mut Transform, &mut Movable)>) {
    let window: &Window = window.single();
    if let Some(position) = window.cursor_position() {
        for (mut transform, mut cursor) in &mut cursor_state {
            transform.translation = Vec3::new(position.x, position.y, 0.0);
        }
    }
}

I have a query to get the window and retrieve the cursor position, then I grab the transform and cursor to set the translation to a new value. These functions are being called by .add_system(move_cursor), and the Movable struct is defined above:

#[derive(Component)]
struct Movable {
    spawn: Vec3,
}

impl Movable {
    fn new(spawn: Vec3) -> Self {
        Movable { spawn }
    }
}

I am also drawing the cursor inside a .add_startup_system(setup_cursor), and assigning as a new Movable type:

fn setup_cursor(
    mut windows: Query<&mut Window>,
    mut commands: Commands,
    asset_server: Res<AssetServer>,
) {
    let mut window: Mut<Window> = windows.single_mut();
    window.cursor.visible = false;
    let cursor_spawn: Vec3 = Vec3::ZERO;

    commands.spawn((
        ImageBundle {
            image: asset_server.load("cursors/point.png").into(),
            style: Style {
                //display: Display::None,
                position_type: PositionType::Absolute,
                ..default()
            },
            z_index: ZIndex::Local(1),
            transform: Transform::from_translation(cursor_spawn),
            ..default()
        },
        Movable::new(cursor_spawn)
    ));
}

My intention is to hide the cursor until the cursor moves into the window and then update the style on the ImageBundle but at the moment I can't even update the transform. I know that querying the cursor position is working because I can println the values but for some reason it's just cemented in the top-left corner of the screen.

Have been trying to follow the transform example but I'm not sure how to proceed from here. Does anyone have any ideas?

[Ewan88]

I got it working.

Changed my code to look like this:

#[derive(Component)]
struct GameCursor {}

fn setup_cursor(
    mut windows: Query<&mut Window>,
    mut commands: Commands,
    asset_server: Res<AssetServer>,
) {
    let mut window: Mut<Window> = windows.single_mut();
    window.cursor.visible = false;
    let cursor_spawn: Vec3 = Vec3::ZERO;

    commands.spawn((
        ImageBundle {
            image: asset_server.load("cursors/point.png").into(),
            style: Style {
                //display: Display::None,
                position_type: PositionType::Absolute,
                position: UiRect::all(Val::Auto),
                ..default()
            },
            z_index: ZIndex::Global(15),
            transform: Transform::from_translation(cursor_spawn),
            ..default()
        },
        GameCursor {}
    ));
}

fn move_cursor(window: Query<&Window>, mut cursor: Query<&mut Style, With<GameCursor>>) {
    let window: &Window = window.single();
    if let Some(position) = window.cursor_position() {
        let mut img_style = cursor.single_mut();
        img_style.position.left = Val::Px(position.x);
        img_style.position.bottom = Val::Px(position.y);
    }
}

Seems like ImageBundle get there x y coordinates from Style rather than Transform.

I then attached a reference to the Style along with the struct when calling the move_cursor function that let me modify the values.

[Ewan88]

for those who are interested I had to apply an offset to get it to align with the default Windows cursor.

        img_style.position.left = Val::Px(position.x - 2.0);
        img_style.position.bottom = Val::Px(position.y - 24.0);

Not sure how this will impact other systems and resolutions

[JohnReedV]

Thanks for this. It also works on my Linux distro.

[RayRay12123]

nah bru this aint working

[Inspirateur]

Tried this and I've found there's a significant lag between the actual cursor and the display image ... has to be multiple frames