Skip to main content
Version: Phaser v4.0.0

Zone

A Zone is a non-rendering rectangular Game Object that has a position and size but no texture. It never displays visually, but it does live on the display list and can be moved, scaled, and rotated like any other Game Object.

Its primary use is for creating Drop Zones and Input Hit Areas. It provides helper methods for both circular and rectangular drop zones, and can also accept custom geometry shapes. Zones are also useful for object overlap checks, or as a base class for your own non-displaying Game Objects.

The default origin is 0.5, placing it at the center of the Zone, consistent with other Game Objects.

Constructor

new Zone(scene, x, y, [width], [height])

Parameters

nametypeoptionaldefaultdescription
scenePhaser.SceneNoThe Scene to which this Game Object belongs.
xnumberNoThe horizontal position of this Game Object in the world.
ynumberNoThe vertical position of this Game Object in the world.
widthnumberYes1The width of the Game Object.
heightnumberYes1The height of the Game Object.

Scope: static

Extends

Phaser.GameObjects.GameObject
Phaser.GameObjects.Components.Depth
Phaser.GameObjects.Components.GetBounds
Phaser.GameObjects.Components.Origin
Phaser.GameObjects.Components.Transform
Phaser.GameObjects.Components.ScrollFactor
Phaser.GameObjects.Components.Visible

Source: src/gameobjects/zone/Zone.js#L16
Since: 3.0.0

Inherited Members

From Phaser.GameObjects.Components.Depth:

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

From Phaser.GameObjects.GameObject:


Public Members

blendMode

blendMode: number

Description:

The Blend Mode of the Game Object. Although a Zone never renders, it still has a blend mode to allow it to fit seamlessly into display lists without causing a batch flush.

Source: src/gameobjects/zone/Zone.js#L89
Since: 3.0.0


displayHeight

displayHeight: number

Description:

The displayed height of this Game Object. This value takes into account the scale factor.

Source: src/gameobjects/zone/Zone.js#L125
Since: 3.0.0


displayWidth

displayWidth: number

Description:

The displayed width of this Game Object. This value takes into account the scale factor.

Source: src/gameobjects/zone/Zone.js#L103
Since: 3.0.0


height

height: number

Description:

The native (un-scaled) height of this Game Object.

Source: src/gameobjects/zone/Zone.js#L80
Since: 3.0.0


width

width: number

Description:

The native (un-scaled) width of this Game Object.

Source: src/gameobjects/zone/Zone.js#L71
Since: 3.0.0


Inherited Methods

From Phaser.Events.EventEmitter:

From Phaser.GameObjects.Components.Depth:

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.GetBounds:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.RenderSteps:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

From Phaser.GameObjects.GameObject:


Public Methods

setCircleDropZone

<instance> setCircleDropZone(radius)

Description:

Sets this Zone to be a Circular Drop Zone. The circle is centered on this Zone's x and y coordinates.

Parameters:

nametypeoptionaldescription
radiusnumberNoThe radius of the Circle that will form the Drop Zone.

Returns: Phaser.GameObjects.Zone - This Game Object.

Source: src/gameobjects/zone/Zone.js#L200
Since: 3.0.0


setDisplaySize

<instance> setDisplaySize(width, height)

Description:

Sets the display size of this Game Object. Calling this will adjust the scale.

Parameters:

nametypeoptionaldescription
widthnumberNoThe width of this Game Object.
heightnumberNoThe height of this Game Object.

Returns: Phaser.GameObjects.Zone - This Game Object.

Source: src/gameobjects/zone/Zone.js#L180
Since: 3.0.0


setDropZone

<instance> setDropZone([hitArea], [hitAreaCallback])

Description:

Enables this Zone as an interactive Drop Zone by calling setInteractive with the given hit area shape and callback. You can pass any Phaser geometry shape, or a custom shape with a matching hit-test callback. If no arguments are provided, a Rectangle matching the size of this Zone will be used automatically. Has no effect if this Zone is already interactive.

Parameters:

nametypeoptionaldescription
hitAreaobjectYesA Geometry shape instance, such as Phaser.Geom.Ellipse, or your own custom shape. If not given it will try to create a Rectangle based on the size of this zone.
hitAreaCallbackPhaser.Types.Input.HitAreaCallbackYesA function that will return true if the given x/y coords it is sent are within the shape. If you provide a shape you must also provide a callback.

Returns: Phaser.GameObjects.Zone - This Game Object.

Source: src/gameobjects/zone/Zone.js#L233
Since: 3.0.0


setRectangleDropZone

<instance> setRectangleDropZone(width, height)

Description:

Sets this Zone to be a Rectangle Drop Zone. The rectangle is centered on this Zone's x and y coordinates.

Parameters:

nametypeoptionaldescription
widthnumberNoThe width of the rectangle drop zone.
heightnumberNoThe height of the rectangle drop zone.

Returns: Phaser.GameObjects.Zone - This Game Object.

Source: src/gameobjects/zone/Zone.js#L216
Since: 3.0.0


setSize

<instance> setSize(width, height, [resizeInput])

Description:

Sets the native (un-scaled) width and height of this Zone. Also updates the display origin and, by default, resizes any non-custom input hit area associated with this Zone.

Parameters:

nametypeoptionaldefaultdescription
widthnumberNoThe width of this Game Object.
heightnumberNoThe height of this Game Object.
resizeInputbooleanYestrueIf this Zone has a Rectangle for a hit area this argument will resize the hit area as well.

Returns: Phaser.GameObjects.Zone - This Game Object.

Source: src/gameobjects/zone/Zone.js#L147
Since: 3.0.0