How to change the cursor icon?

[max-vogler]

Is there a way to change the mouse/pointer cursor icon? It'd be neat to use a spritesheet or animation! Or should I fall back to CSS cursor: url(...)?

[eonarheim]

Hi @max-vogler!

Good question! I think I'd stick with CSS first, unless you need to do something special.

Otherwise you could do this by positioning an Actor using the primary pointer. You can add your graphics/animations on the cursor

const game = new ex.Engine({...});
const animation = ...;

const cursor = new ex.Actor({
   radius: 100,
   color: ex.Color.Red,
   coordPlane: ex.CoordPlane.Screen
});
cursor.graphics.use(myAnimation);
game.add(cursor);
game.input.pointers.primary.on('move', evt => {
   cursor.pos = evt.screenPos;
});

[max-vogler]

Thanks for the input! This works well enough for my prototype, even though the in-game Actor being slightly sluggier than the OS-native cursor.

Here's my complete code:

class Cursor extends Actor {
  constructor(args: ActorArgs = {}) {
    super({
      coordPlane: CoordPlane.Screen,
      collisionType: CollisionType.PreventCollision,
      z: 99,
      ...args,
    });
  }

  onInitialize(engine: Engine): void {
    engine.canvas.style.cursor = "none";
    engine.input.pointers.primary.on("move", (evt) => {
      this.pos = evt.screenPos;
    });
  }
}

Then you can add the cursor to your Scene/Engine:

const cursor = new Cursor();
cursor.graphics.use(SpriteSheets.Cursors.getSprite(0, 0)!);
this.add(cursor);