I am trying to build a game and i want people to be able to select stuff with a pointer but i don't want it to be just an ugly looking default pointer so i wrote this code to try and get a image as it

first i loaded the image

game.load.image('selector', 'assets/img/pointer.png')

then I put it into my game

selector = game.add.sprite(game.world.centerX, game.world.centerY, 'selector')

and then in my render() function i do this

selector.x = game.input.x;
selector.y = game.input.y;

it moves fine with my mouse but with one problem

my game is designed so that i have to use a camera that follows my character because the map is bigger than the view

so since for some reason my sprite always starts at 0,0 it can only move 800x600px since thats all that the canvas sees the mouse in so i need a way to fix this but i'm not sure how to do this because i am new to phaser


1 Answer 1


You can use JavaScript's pointer lock API.

First of all, it's still an experimental feature, so to be sure, you might need to check for compatibility and make sure there's a single working function:

if (!("pointerLockElement" in document || "mozPointerLockElement" in document || "webkitPointerLockElement" in document))
    alert("No pointer locking");

canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;

Then request pointer lock and setup an eventhandler:

canvas.onclick = function () {

function changeHandler(e) {
    // Do something with e.movementX and e.movementY
    // These are also prefixed, so you may need to use e.mozMovementX, etc.

canvas.addEventListener("pointerlockchange", changeHandler);    
canvas.addEventListener("mozpointerlockchange", changeHandler);
canvas.addEventListener("webkitpointerlockchange", changeHandler);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .