A motion that is being executed.
The easing function to use for the motion.
Easing functions specify the rate of change of a parameter over time
The time at which the motion will end in long milliseconds.
The initial position before the motion.
The time at which the motion started in long milliseconds.
The target position after the motion.
Supported easing types
Flag that indicates if the tiles are clickable
Camera position
Camera zoom
Unique key to identify the element.
In witch layer order the element should be rendered.
The key of the sprite to use for the element.
The position of the element in the tilemap.
Map dimensions (number of cols and rows)
A motion request.
Settings of the motion.
The target position after the motion.
Motion settings.
The easing function to use for the motion.
Easing functions specify the rate of change of a parameter over time
The maximum duration of the motion in seconds. If it is not provided, the motion will run until it reaches the target using the configured speed. If it is provided, the speed will be calculated to reach the target in the given max duration.
The minimum duration of the motion in seconds.
The speed of the motion in pixels per second.
Absolute position (x, y)
Configuration for camera motions that are being executed after a canvas resize or zoom change.
Settings of the motion.
The target position of the camera after any canvas resize. If it is 'center', the camera will be centered on the tilemap. If it is a tile position, the camera will be centered on the given tile position.
Types of recenter motion targets.
Size (width and height)
Height value
Width value
Definition of a sprite to be used in the tilemap.
The sprite is defined by a list of images that will be used as frames.
The first image will be used as the default image.
The rest of the images will be used for animation.
If there is only one image, the animation will not be disabled.
The images must have the same size.
You can define the imageSrc as a base64.
Delay in milliseconds between each animation frame.
If not provided, the default value will be used.
If there is only one image, the animation will not be disabled.
The delay must be greater than 0.
List of image sources to be used as sprite frames.
The first image will be used as the default image.
The rest of the images will be used for animation.
If there is only one image, the animation will not be disabled.
The images must have the same size.
Unique key to identify the sprite.
Sprite's offset in tiles. Indicates how many tiles the sprite will be offset from it origin.
Sprite's size in tiles. Indicates how many tiles the sprite will occupy.
If not provided, the default value will be used.
The size width and height must be greater than 0.
This event is triggered when a camera motion ends.
This event is triggered when a zoom motion ends.
Tilemap's drag speed sensitivity.
If not provided, the default value will be used. If provided, it must be greater than 0.
Flag to indicate if the tilemap drag controls to move the camera are enabled.
Initial camera position when the tilemap is mounted.
If not provided, the default value will be used.
Initial zoom level when the tilemap is mounted.
If not provided, the default value will be used.
Configuration for camera motions that are being executed when the canvas is resized.
Configuration for camera motions that are being executed after a the zoom level is changed.
Zoom increment per wheel scroll.
If not provided, the default value will be used.
Flag to indicate if the tilemap zoom control is enabled.
Position of a tile in the grid (col, row)
A tilemap element.
In witch layer order the element should be rendered.
The key of the sprite to use for the element.
The position of the element in the tilemap.
A map of tilemap elements.
Tilemap events.
It will be called when an error occurs while loading sprites.
Error that occurred while loading sprites.
It will be called when defined tilemap's tile are clicked.
tile position
It will be called when a tile is right clicked.
tile position
It will be called when a tile is double clicked.
tile position
It will be called when a tile is hovered.
tile position
It will be called when a tile is hovered out.
tile position
It will be called when a tilemap is clicked, even if is not a tile where the click happened.
tile position
It will be called when a tilemap is right clicked, even if is not a tile where the click happened.
tile position
It will be called when a tilemap is double clicked, even if is not a tile where the click happened.
tile position
Tilemap component props.
Tilemap settings.
Tilemap's background color.
If not provided, the default value will be used. If provided, it must be a valid CSS color.
Tile default tile size in px.
If not provided, the default value will be used. If provided, it must be greater than 0.
Definition of the sprites that tilemap will render.
Scheme of Columns/rows/layers of sprite keys that will be rendered on the tile map.
This component is used to manually control the camera position and zoom of the tilemap.
Use clickable prop to enable or disable click controls.
Use this component to operate with a third person camera in the tilemap.
Here you can forget about control the camera position and zoom because this component will do it for you enabling drag and zoom controls by default.
This component will provide a context to all its children. There you can use the useThirdPersonCamera hook to get this context and use it to control the camera using the addCameraMotion and addZoomMotion functions.
Tilemap main component.
Use third person camera context.
This hook is used to access the third person camera context.
Third person camera context
Generated using TypeDoc
The context of the ThirdPersonCamera component.