When I lock the pointer using .requestPointerLock() my default and hover cursors are no longer visible

Questions
1

I use:

setupPointerLock(canvas:HTMLCanvasElement)

    {

        // when element is clicked, we're going to request a

        // pointerlock

        canvas.onclick = function(){

            canvas.requestPointerLock = 

                canvas.requestPointerLock ||

                canvas.mozRequestPointerLock ||

                canvas.webkitRequestPointerLock

            ;

            // Ask the browser to lock the pointer)

            canvas.requestPointerLock();

        };

    }

To make it so when you click the canvas the pointer becomes locked but I have set custom cursors and when locking like this, the cursors disappear.

How can I lock the mouse but also see babylonJS’s cursors that I altered?

2

You will need to implement your own pointer rendering logic with this scenario; listen for onPointerMove events and update the position of a 2D GUI object or a mesh textured with your custom pointers and such.

HTH

1 Like
3

Ok. I am a bit new. I already have a full AdvancedDynamicTexture.createFullscreenUI() for my GUI and I don’t think adding a cursor into that is right.

How can I draw an image at pointer x and y? Or are you saying I should create a plane mesh and apply my cursor png as texture and make the mesh transparent in some way so that only the png colors show and this is will be a 3d cursor but will look like a 2d cursor?

Sorry if I’m a bit lost.

4

Lol if this is your “lost”, I’d hate to see your “found”, because you’re doing pretty darn well as it is!

You have either option as far as cursor goes. Since you already have the GUI setup that’s a great option, especially since you wouldn’t have to translate between coordinate spaces. The second option is also a viable approach that might make sense depending on things you want to do with it, like particle effects or whatnot

HTH

1 Like
5

So I have the image drawing using:

myGUI.getContext().drawImage(cursor, x, y)

and that work but when the pointer is not locked a trail of old cursors shows…like the screen is not being updated. I tried myGUI.clear() but that made my whole scene black…

how can i clear the texture so that my cursor redraws instead of just adding more images but also show my scene?

6

disabling the gui element would be more efficient in this case instead of trying to re render a pointer

7

which element are you talking about?

the cursor image, the advancedDynamticTexture, the advancedDynamicTexture.getContext() ?

I’ve looked at all of these and do not see a way to disable them…

This almost works:
this.gui.getContext().clearRect(0, 0, 4000, 4000);

but it messes up my backpack with is a grid control added to the advancedDynamicTexture.

what I have now:

updateCursorPosition(canvas:HTMLCanvasElement, x:number, y:number)
    {
        this.gui.getContext().clearRect(0, 0, 4000, 4000);
        if(document.pointerLockElement === canvas) {
            const w = this.gui.getBaseSize().width;
            const h = this.gui.getBaseSize().height;
            this.gui.getContext().drawImage(this.cursor, w/2 - 16, h/2 - 16); // locked
        } else {
            this.gui.getContext().drawImage(this.cursor, x - 16, y - 16); // unlocked
        }

        this.gui.update();
    }
8

Maybe I’ll look into rendering two scenes…one with my game and the other a simple scene with its own AdvancedDynamicTexture.createFullscreenUI()

  • i saw somewhere you can’t have two full screen ADTextures on one scene.
1 Like
9

I was able to get the cursors working by using a new scene with it’s own fullscreen advancedDynamicTexture UI.

One problem, when the pointer is not locked the windows cursors show up. I want those hidden. How do I do that?

1 Like
10

I do not think you can unfortunately

11

I was actually able to get what I needed with this in my css file.

canvas {
  outline: none;
  height: 100%;
  width: 100%;
  cursor: none;
}
12

oh right getting rid of it fully on the canvas :slight_smile: sorry I thought you did not want it at all in the browser

13

No worries. My canvas is 100% so it kinda is the whole browser. Thanks!

1 Like