A reference to the Scene that this Input Plugin is responsible for.
ReadonlyactiveThe current active input Pointer.
A reference to the Scene Cameras Manager. This property is set during the boot method.
A reference to the Scene Display List. This property is set during the boot method.
The distance, in pixels, a pointer has to move while being held down, before it thinks it is being dragged.
The amount of time, in ms, a pointer has to be held down before it thinks it is dragging.
The default polling rate is to poll only on move so once the time threshold is reached the
drag event will not start until you move the mouse. If you want it to start immediately
when the time threshold is reached, you must increase the polling rate by calling
[setPollAlways]Phaser.Input.InputPlugin#setPollAlways or
[setPollRate]Phaser.Input.InputPlugin#setPollRate.
If true this Input Plugin will process DOM input events.
An instance of the Gamepad Plugin class, if enabled via the input.gamepad Scene or Game Config property.
Use this to create access Gamepads connected to the browser and respond to gamepad buttons.
ReadonlyisAre any mouse or touch pointers currently over the game canvas?
An instance of the Keyboard Plugin class, if enabled via the input.keyboard Scene or Game Config property.
Use this to create Key objects and listen for keyboard specific events.
A reference to the Game Input Manager.
A reference to the Mouse Manager.
This property is only set if Mouse support has been enabled in your Game Configuration file.
If you just wish to get access to the mouse pointer, use the mousePointer property instead.
ReadonlymouseThe mouse has its own unique Pointer object, which you can reference directly if making a desktop specific game.
If you are supporting both desktop and touch devices then do not use this property, instead use activePointer
which will always map to the most recently interacted pointer.
Readonlypointer1A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer10A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer2A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer3A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer4A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer5A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer6A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer7A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer8A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
Readonlypointer9A touch-based Pointer object.
This will be undefined by default unless you add a new Pointer using addPointer.
How often should the Pointers be checked?
The value is a time, given in ms, and is the time that must have elapsed between game steps before the Pointers will be polled again. When a pointer is polled it runs a hit test to see which Game Objects are currently below it, or being interacted with it.
Pointers will always be checked if they have been moved by the user, or press or released.
This property only controls how often they will be polled if they have not been updated. You should set this if you want to have Game Objects constantly check against the pointers, even if the pointer didn't itself move.
Set to 0 to poll constantly. Set to -1 to only poll on user movement.
A reference to the Scene that this Input Plugin is responsible for.
A reference to the Scene Systems Settings.
A reference to the Scene Systems class.
When set to true (the default) the Input Plugin will emulate DOM behavior by only emitting events from
the top-most Game Objects in the Display List.
If set to false it will emit events from all Game Objects below a Pointer, not just the top one.
ReadonlyxThe x coordinates of the ActivePointer based on the first camera in the camera list. This is only safe to use if your game has just 1 non-transformed camera and doesn't use multi-touch.
ReadonlyyThe y coordinates of the ActivePointer based on the first camera in the camera list. This is only safe to use if your game has just 1 non-transformed camera and doesn't use multi-touch.
Add a listener for a given event.
The event name.
The listener function.
Optionalcontext: anyThe context to invoke the listener with. Default this.
Adds new Pointer objects to the Input Manager.
By default Phaser creates 2 pointer objects: mousePointer and pointer1.
You can create more either by calling this method, or by setting the input.activePointers property
in the Game Config, up to a maximum of 10 pointers.
The first 10 pointers are available via the InputPlugin.pointerX properties, once they have been added
via this method.
Optionalquantity: numberThe number of new Pointers to create. A maximum of 10 is allowed in total. Default 1.
Clears a Game Object so it no longer has an Interactive Object associated with it. The Game Object is then queued for removal from the Input Plugin on the next update.
The Game Object that will have its Interactive Object removed.
OptionalskipQueue: booleanSkip adding this Game Object into the removal queue? Default false.
Removes all listeners.
Disables Input on a single Game Object.
An input disabled Game Object still retains its Interactive Object component and can be re-enabled
at any time, by passing it to InputPlugin.enable.
The Game Object to have its input system disabled.
OptionalresetCursor: booleanReset the cursor to the default? Default false.
Calls each of the listeners registered for a given event.
The event name.
Additional arguments that will be passed to the event handler.
Enable a Game Object for interaction.
If the Game Object already has an Interactive Object component, it is enabled and returned.
Otherwise, a new Interactive Object component is created and assigned to the Game Object's input property.
Input works by using hit areas, these are nearly always geometric shapes, such as rectangles or circles, that act as the hit area for the Game Object. However, you can provide your own hit area shape and callback, should you wish to handle some more advanced input detection.
If no arguments are provided it will try and create a rectangle hit area based on the texture frame the Game Object is using. If this isn't a texture-bound object, such as a Graphics or BitmapText object, this will fail, and you'll need to provide a specific shape for it to use.
You can also provide an Input Configuration Object as the only argument to this method.
The Game Object to be enabled for input.
OptionalhitArea: anyEither an input configuration object, or a geometric shape that defines the hit area for the Game Object. If not specified a Rectangle will be used.
OptionalhitAreaCallback: HitAreaCallbackThe 'contains' function to invoke to check if the pointer is within the hit area.
OptionaldropZone: booleanIs this Game Object a drop zone or not? Default false.
Creates an Input Debug Shape for the given Game Object.
The Game Object must have already been enabled for input prior to calling this method.
This is intended to assist you during development and debugging.
Debug Shapes can only be created for Game Objects that are using standard Phaser Geometry for input, including: Circle, Ellipse, Line, Polygon, Rectangle and Triangle.
Game Objects that are using their automatic hit areas are using Rectangles by default, so will also work.
The Debug Shape is created and added to the display list and is then kept in sync with the Game Object
it is connected with. Should you need to modify it yourself, such as to hide it, you can access it via
the Game Object property: GameObject.input.hitAreaDebug.
Calling this method on a Game Object that already has a Debug Shape will first destroy the old shape,
before creating a new one. If you wish to remove the Debug Shape entirely, you should call the
method InputPlugin.removeDebug.
Note that the debug shape will only show the outline of the input area. If the input test is using a pixel perfect check, for example, then this is not displayed. If you are using a custom shape, that doesn't extend one of the base Phaser Geometry objects, as your hit area, then this method will not work.
The Game Object to create the input debug shape for.
Optionalcolor: numberThe outline color of the debug shape. Default 0x00ff00.
Return an array listing the events for which the emitter has registered listeners.
This method will force the given Game Object into the 'down' input state.
This will check to see if the Game Object is enabled for input, and if so,
it will emit the GAMEOBJECT_POINTER_DOWN event for it. If that doesn't change
the input state, it will then emit the GAMEOBJECT_DOWN event.
The Game Object is not checked against the Pointer to see if it can enter this state, that is up to you to do before calling this method.
The pointer to use when setting the state.
The Game Object to have its state set.
This method will force the given Game Object into the 'out' input state.
This will check to see if the Game Object is enabled for input, and if so,
it will emit the GAMEOBJECT_POINTER_OUT event for it. If that doesn't change
the input state, it will then emit the GAMEOBJECT_OUT event.
The Game Object is not checked against the Pointer to see if it can enter this state, that is up to you to do before calling this method.
The pointer to use when setting the state.
The Game Object to have its state set.
This method will force the given Game Object into the 'over' input state.
This will check to see if the Game Object is enabled for input, and if so,
it will emit the GAMEOBJECT_POINTER_OVER event for it. If that doesn't change
the input state, it will then emit the GAMEOBJECT_OVER event.
The Game Object is not checked against the Pointer to see if it can enter this state, that is up to you to do before calling this method.
The pointer to use when setting the state.
The Game Object to have its state set.
This method will force the given Game Object into the given input state.
The pointer to use when setting the state.
The Game Object to have its state set.
The event to emit on the Game Object.
The event to emit on the Input Plugin.
OptionalsetCursor: booleanShould the cursor be set to the Game Object's cursor? Default false.
This method will force the given Game Object into the 'up' input state.
This will check to see if the Game Object is enabled for input, and if so,
it will emit the GAMEOBJECT_POINTER_UP event for it. If that doesn't change
the input state, it will then emit the GAMEOBJECT_UP event.
The Game Object is not checked against the Pointer to see if it can enter this state, that is up to you to do before calling this method.
The pointer to use when setting the state.
The Game Object to have its state set.
Returns the drag state of the given Pointer for this Input Plugin.
The state will be one of the following:
0 = Not dragging anything 1 = Primary button down and objects below, so collect a draglist 2 = Pointer being checked if meets drag criteria 3 = Pointer meets criteria, notify the draglist 4 = Pointer actively dragging the draglist and has moved 5 = Pointer actively dragging but has been released, notify draglist
The Pointer to get the drag state for.
Takes the given Pointer and performs a hit test against it, to see which interactive Game Objects it is currently above.
The hit test is performed against which-ever Camera the Pointer is over. If it is over multiple cameras, it starts checking the camera at the top of the camera list, and if nothing is found, iterates down the list.
The Pointer to check against the Game Objects.
Checks to see if the Input Manager, this plugin and the Scene to which it belongs are all active and input enabled.
Return the number of listeners listening to a given event.
The event name.
Return the listeners registered for a given event.
The event name.
Creates a function that can be passed to setInteractive, enable or setHitArea that will handle
pixel-perfect input detection on an Image or Sprite based Game Object, or any custom class that extends them.
The following will create a sprite that is clickable on any pixel that has an alpha value >= 1.
this.add.sprite(x, y, key).setInteractive(this.input.makePixelPerfect());
The following will create a sprite that is clickable on any pixel that has an alpha value >= 150.
this.add.sprite(x, y, key).setInteractive(this.input.makePixelPerfect(150));
Once you have made an Interactive Object pixel perfect it impacts all input related events for it: down, up, dragstart, drag, etc.
As a pointer interacts with the Game Object it will constantly poll the texture, extracting a single pixel from the given coordinates and checking its color values. This is an expensive process, so should only be enabled on Game Objects that really need it.
You cannot make non-texture based Game Objects pixel perfect. So this will not work on Graphics, BitmapText, Render Textures, Text, Tilemaps, Containers or Particles.
OptionalalphaTolerance: numberThe alpha level that the pixel should be above to be included as a successful interaction. Default 1.
Remove the listeners of a given event.
The event name.
Optionalfn: FunctionOnly remove the listeners that match this function.
Optionalcontext: anyOnly remove the listeners that have this context.
Optionalonce: booleanOnly remove one-time listeners.
Add a listener for a given event.
The event name.
The listener function.
Optionalcontext: anyThe context to invoke the listener with. Default this.
Add a one-time listener for a given event.
The event name.
The listener function.
Optionalcontext: anyThe context to invoke the listener with. Default this.
Remove all listeners, or those of the specified event.
Optionalevent: string | symbolThe event name.
Removes an Input Debug Shape from the given Game Object.
The shape is destroyed immediately and the hitAreaDebug property is set to null.
The Game Object to remove the input debug shape from.
Remove the listeners of a given event.
The event name.
Optionalfn: FunctionOnly remove the listeners that match this function.
Optionalcontext: anyOnly remove the listeners that have this context.
Optionalonce: booleanOnly remove one-time listeners.
Forces the Input Manager to clear the custom or hand cursor, regardless of the interactive state of any Game Objects.
Loops through all of the Input Manager Pointer instances and calls reset on them.
Use this function if you find that input has been stolen from Phaser via a 3rd party component, such as Vue, and you need to tell Phaser to reset the Pointer states.
Sets a custom cursor on the parent canvas element of the game, based on the cursor
setting of the given Interactive Object (i.e. a Sprite).
See the CSS property cursor for more information on MDN:
The Interactive Object that will set the cursor on the canvas.
Tells the Input system to set a custom cursor.
This cursor will be the default cursor used when interacting with the game canvas.
If an Interactive Object also sets a custom cursor, this is the cursor that is reset after its use.
Any valid CSS cursor value is allowed, including paths to image files, i.e.:
this.input.setDefaultCursor('url(assets/cursors/sword.cur), pointer');
Please read about the differences between browsers when it comes to the file formats and sizes they support:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property
It's up to you to pick a suitable cursor format that works across the range of browsers you need to support.
The CSS to be used when setting the default cursor.
Sets the draggable state of the given array of Game Objects.
They can either be set to be draggable, or can have their draggable state removed by passing false.
A Game Object will not fire drag events unless it has been specifically enabled for drag.
An array of Game Objects to change the draggable state on.
Optionalvalue: booleanSet to true if the Game Objects should be made draggable, false if they should be unset. Default true.
Sets the drag state of the given Pointer for this Input Plugin.
The state must be one of the following values:
0 = Not dragging anything 1 = Primary button down and objects below, so collect a draglist 2 = Pointer being checked if meets drag criteria 3 = Pointer meets criteria, notify the draglist 4 = Pointer actively dragging the draglist and has moved 5 = Pointer actively dragging but has been released, notify draglist
The Pointer to set the drag state for.
The drag state value. An integer between 0 and 5.
When set to true the global Input Manager will emulate DOM behavior by only emitting events from
the top-most Scene in the Scene List. By default, if a Scene receives an input event it will then stop the event
from flowing down to any Scenes below it in the Scene list. To disable this behavior call this method with false.
Set to true to stop processing input events on the Scene that receives it, or false to let the event continue down the Scene list.
Sets the hit area for the given array of Game Objects.
A hit area is typically one of the geometric shapes Phaser provides, such as a Phaser.Geom.Rectangle
or Phaser.Geom.Circle. However, it can be any object as long as it works with the provided callback.
If no hit area is provided a Rectangle is created based on the size of the Game Object, if possible to calculate.
The hit area callback is the function that takes an x and y coordinate and returns a boolean if
those values fall within the area of the shape or not. All of the Phaser geometry objects provide this,
such as Phaser.Geom.Rectangle.Contains.
A hit area callback can be supplied to the hitArea parameter without using the hitAreaCallback parameter.
An array of Game Objects to set the hit area on.
OptionalhitArea: anyEither an input configuration object, a geometric shape that defines the hit area or a hit area callback. If not specified a Rectangle hit area will be used.
OptionalhitAreaCallback: HitAreaCallbackThe 'contains' function to invoke to check if the pointer is within the hit area.
Sets the hit area for an array of Game Objects to be a Phaser.Geom.Circle shape, using
the given coordinates and radius to control its position and size.
An array of Game Objects to set as having a circle hit area.
The center of the circle.
The center of the circle.
The radius of the circle.
Optionalcallback: HitAreaCallbackThe hit area callback. If undefined it uses Circle.Contains.
Sets the hit area for an array of Game Objects to be a Phaser.Geom.Ellipse shape, using
the given coordinates and dimensions to control its position and size.
An array of Game Objects to set as having an ellipse hit area.
The center of the ellipse.
The center of the ellipse.
The width of the ellipse.
The height of the ellipse.
Optionalcallback: HitAreaCallbackThe hit area callback. If undefined it uses Ellipse.Contains.
Sets the hit area for an array of Game Objects to be a Phaser.Geom.Rectangle shape, using
the Game Objects texture frame to define the position and size of the hit area.
An array of Game Objects to set as having an ellipse hit area.
Optionalcallback: HitAreaCallbackThe hit area callback. If undefined it uses Rectangle.Contains.
Sets the hit area for an array of Game Objects to be a Phaser.Geom.Rectangle shape, using
the given coordinates and dimensions to control its position and size.
An array of Game Objects to set as having a rectangular hit area.
The top-left of the rectangle.
The top-left of the rectangle.
The width of the rectangle.
The height of the rectangle.
Optionalcallback: HitAreaCallbackThe hit area callback. If undefined it uses Rectangle.Contains.
Sets the hit area for an array of Game Objects to be a Phaser.Geom.Triangle shape, using
the given coordinates to control the position of its points.
An array of Game Objects to set as having a triangular hit area.
The x coordinate of the first point of the triangle.
The y coordinate of the first point of the triangle.
The x coordinate of the second point of the triangle.
The y coordinate of the second point of the triangle.
The x coordinate of the third point of the triangle.
The y coordinate of the third point of the triangle.
Optionalcallback: HitAreaCallbackThe hit area callback. If undefined it uses Triangle.Contains.
Sets the Pointers to always poll.
When a pointer is polled it runs a hit test to see which Game Objects are currently below it, or being interacted with it, regardless if the Pointer has actually moved or not.
You should enable this if you want objects in your game to fire over / out events, and the objects are constantly moving, but the pointer may not have. Polling every frame has additional computation costs, especially if there are a large number of interactive objects in your game.
Sets the Pointers to only poll when they are moved or updated.
When a pointer is polled it runs a hit test to see which Game Objects are currently below it, or being interacted with it.
Sets the poll rate value. This is the amount of time that should have elapsed before a pointer
will be polled again. See the setPollAlways and setPollOnMove methods.
The amount of time, in ms, that should elapsed before re-polling the pointers.
When set to true this Input Plugin will emulate DOM behavior by only emitting events from
the top-most Game Objects in the Display List.
If set to false it will emit events from all Game Objects below a Pointer, not just the top one.
true to only include the top-most Game Object, or false to include all Game Objects in a hit test.
Removes all listeners.
Given an array of Drop Zone Game Objects, sort the array and return it, so that the objects are in depth index order with the lowest at the bottom.
An array of Game Objects to be sorted.
Given an array of Game Objects and a Pointer, sort the array and return it, so that the objects are in render order with the lowest at the bottom.
An array of Game Objects to be sorted.
The Pointer to check against the Game Objects.
This method should be called from within an input event handler, such as pointerdown.
When called, it stops the Input Manager from allowing this specific event to be processed by any other Scene not yet handled in the scene list.
This is called automatically by the Input Manager. It emits events for plugins to listen to and also handles polling updates, if enabled.
The current time. Either a High Resolution Timer value if it comes from Request Animation Frame, or Date.now if using SetTimeout.
The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
The Input Plugin belongs to a Scene and handles all input related events and operations for it.
You can access it from within a Scene using
this.input.It emits events directly. For example, you can do:
To listen for a pointer down event anywhere on the game canvas.
Game Objects can be enabled for input by calling their
setInteractivemethod. After which they will directly emit input events:There are lots of game configuration options available relating to input. See the [Input Config object]
Phaser.Types.Core.InputConfigfor more details, including how to deal with Phaser listening for input events outside of the canvas, how to set a default number of pointers, input capture settings and more.Please also see the Input examples and tutorials for further information.
Incorrect input coordinates with Angular
If you are using Phaser within Angular, and use nglf or the router, to make the component in which the Phaser game resides change state (i.e. appear or disappear) then you'll need to notify the Scale Manager about this, as Angular will mess with the DOM in a way in which Phaser can't detect directly. Call
this.scale.updateBounds()as part of your game init in order to refresh the canvas DOM bounds values, which Phaser uses for input point position calculations.