Phaser home
Log inCreate a game

← Expansion packsLogic

Phaser AE

Per-object pointer handlers

Free packv3.0.0-32DLogic

Over, out, down, up, tap and drag handlers on the objects that want them, with the capture rule that makes a drag survive the pointer leaving the object. It is the pointer bookkeeping every game otherwise writes for itself, and usually gets subtly wrong, done once.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 14, 2026 · updated October 19, 2026

Per-object pointer handlers: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

What it does

The kernel gives a game the raw list of pointers, and the roster can say which object is at a point. Between the two sits the bookkeeping: which object each pointer is over, which one it went down on, whether the release counts as a tap, and what happens when the pointer slides off the object it pressed. The pack keeps that state for every object that carries handlers and calls onOver, onOut, onDown, onUp, onTap and onDrag as things happen.

Two rules do the work. A press captures: the drag, the release and the tap test all go to the object the press landed on, even once the pointer has left it, so a slider keeps following the hand when the pointer slips off the knob. And a tap is a release on the captured object, having moved no further than tapSlop, so sliding away and letting go cancels the press rather than tapping something else. Hover is the exception: over and out only ever concern what the pointer is actually on, so a hover highlight stays right in the middle of a drag.

Handlers are a data bag on the object, set with the spawn spec's pointer key, so they compose like any other component. Each event carries the pointer's world position, its movement since the last step, where the press began, the pointer's id, the button, and whether it is a mouse, a touch or a pen. Screen pixels are converted to world units for you, so a handler never needs to know which the game is in. With no pointers, as in a headless test, it does nothing.

Features

  • Six handlers — onOver, onOut, onDown, onUp, onTap and onDrag, all optional and all live.
  • Capture on press — everything after a press goes to the object it landed on, wherever the pointer goes.
  • Taps that mean it — a release counts as a tap only on the captured object and within tapSlop, 6 world units by default.
  • Drag threshold — dragThreshold holds onDrag back until the press has moved that far; once started, the drag runs to the release.
  • Live state for looks — over and held on the object, for a hover or a pressed appearance.
  • Picking that ignores decoration — only objects with handlers are picked, top-most by depth, so a label or an icon drawn over a button does not take its presses.
  • Multi-touch — one capture per pointer, keyed by its id.
  • Interactive later — game.pointer.add and game.pointer.remove switch handlers on and off for an object a pack spawned or a plain object made interactive part-way through; other packs reach the same pair through the registry.
  • Queries — game.pointer.over, captured, release (drop a capture by hand, on a scene change) and count.

Good for

  • Menus and buttons drawn as sprites, with a hover tint and a tap to start.
  • Drag-and-drop: cards onto piles, items into inventory slots, pieces onto a board.
  • Sliders and knobs that must keep tracking when the pointer slips off them.
  • Clickable sprites and map pins in a scrolling world, where positions must be in world units.
  • Touch games where several fingers each press their own object.
  • Panels that block presses to the world beneath them, with an empty pointer: {} bag.

Make it yours

There is nothing to set when you compose it: every option lives on the object. tapSlop sets how far a press may wander and still be a tap, dragThreshold how far it must move before a drag begins, and enabled switches an object off without removing its handlers. Packs that spawn their own objects, such as a canvas text or a widget, can make them interactive through the registry, and leaving this pack out makes those objects quietly static rather than broken.

Two different uses: a title menu of sprite buttons that tint on onOver, reset on onOut and start the game on onTap; and a card table where onDown lifts a card, onDrag moves it by the event's dx and dy, a small dragThreshold stops a tap being mistaken for a drag, and onUp sets the card down wherever it was released.

A quick look

A sprite button with a hover tint and a tap:

game.spawn({
    x: 100, y: 100, width: 64, height: 24, frame: Art.BUTTON,
    pointer: {
        onOver: (e) => { e.target.tint = '#ffd166'; },
        onOut:  (e) => { e.target.tint = '#ffffff'; },
        onTap:  () => start(),
    },
});

Works with

  • core-2d and core-vector — both include it, so most 2D games have it already.
  • ui — a full widget set of panels, sliders and text fields, when you want more than handlers.
  • sketch — drawing and gesture recognition, for input beyond one capture per finger.

Good to know

  • Picking is top-most by depth over an object's rectangle; the pack adds no shape test of its own.
  • A full-screen object with handlers takes every press that nothing above it claims. To stop presses reaching what is under a panel, give the panel handlers, even empty ones.
  • Two fingers on one object are two separate captures, not a pinch; sketch and ui handle gestures.
  • An object killed mid-drag drops its capture silently, with no onUp for an object that no longer exists.

More Logic packs

Show all →