Interactables

How to use ?

Create a new Interactable instance. You can pass custom actions using the onTap and onHover parameters. You also have to give it an identifier. Be careful, this identifier should be unique across your interactables !

Feel free to extend the Interactable class if you want more control over the default behavior. You have some examples already built in the library :

• Door which allow you to go to another room.
• PickableObject which allow you to add an item to the inventory when tapped.
• Clue which allow to display a clue to the player when found.

How to render ?

Like for rooms, you can change an interactable render settings (asset, width, height, animation, ...) by passing a custom InteractableRenderSettings object. An interactable is invisible if you don't specify its asset. In debug mode, invisible interactables are surrounded by a semi-transparent pink box (it helps a lot during development).

Interactables are rendered by default using the InteractableWidget widget. You can change this behavior by passing a custom interactableWidgetBuilder to your RoomWidget (see Room > How to render ?).

Example

Interactable(
  id: 'my-tooltip':
  renderSettings: InteractableRenderSettings(
    top: 50,
    left: 50,
    height: 200,
    width: 200,
  ),
  onHover: (escapeGame) => const ActionResult.success(object: InteractableTooltip(text: 'Is this a tooltip ?')),
);

Easily creating interactables

Launch your escape game in debug mode. Then, click anywhere on a room and drag your cursor until you see a semi-transparent green box appearing. Click on this box and a dialog will help you creating an interactable at that location.