---
agentTools:
  projectIndex: https://creator-program.readme.io/llms.txt
---

# Mini-map

1. Create a User Widget as the subclass of ***WBP\_MiniMap***

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/a140d7b-mini_map_1.jpg",
        "mini_map_1.jpg",
        580,
        313,
        "#000000"
      ]
    }
  ]
}
[/block]

2. Create a ***Canvas Panel*** and make it the root of your widget.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/ef4b4e3-mini_map_2.jpg",
        "mini_map_2.jpg",
        580,
        945,
        "#000000"
      ]
    }
  ]
}
[/block]

3. Add any images, shapes, or text in the places you want to. Put buttons at the places you want to interact with.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/7fa7662-mini_map_3.jpg",
        "mini_map_3.jpg",
        580,
        230,
        "#000000"
      ]
    }
  ]
}
[/block]

4. Set the style of the buttons in the ***Appearance*** section in ***Details panel***.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/420c72b-mini_map_4.jpg",
        "mini_map_4.jpg",
        580,
        546,
        "#000000"
      ]
    }
  ]
}
[/block]

5. Add ***On Clicked*** event to the button.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/48b9331-mini_map_5.jpg",
        "mini_map_5.jpg",
        580,
        196,
        "#000000"
      ]
    }
  ]
}
[/block]

6. Right click in the Graph and search for the\*\*\* ‘Call Teleport to Target’***, connect it to the ***On Clicked*** event. The*** ‘Target Name’\*\*\* should be a unique name for each of the buttons.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/b4c59ad-mini_map_6.jpg",
        "mini_map_6.jpg",
        580,
        347,
        "#000000"
      ]
    }
  ]
}
[/block]

7. Find the ***‘BP\_MiniMap’*** in ***Plugins/GarouWorldContent/Blueprints/Minimap***, add it in your level.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/a660a5c-mini_map_7.jpg",
        "mini_map_7.jpg",
        580,
        228,
        "#000000"
      ]
    }
  ]
}
[/block]

8. In the ***Details Panel***. Select ***MiniMapWidget***, change the widget class to the one you just created.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/0134911-mini_map_8.jpg",
        "mini_map_8.jpg",
        580,
        683,
        "#000000"
      ]
    }
  ]
}
[/block]

9. Place ***Target Points*** in your level, where your want the player to teleport to.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/7cddb8c-mini_map_9.jpg",
        "mini_map_9.jpg",
        580,
        217,
        "#000000"
      ]
    }
  ]
}
[/block]

10. The blue arrow represents the direction players will face after the teleportation. Rotate the ***Target Point*** if you want to change that.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/bae0469-mini_map_10.jpg",
        "mini_map_10.jpg",
        580,
        279,
        "#000000"
      ]
    }
  ]
}
[/block]

11. Select the ***BP\_MiniMap*** you placed in the world. In ***Details/Teleport*** section, click the ***+*** button to add more ***Target Points***.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/05c175b-mini_map_11.jpg",
        "mini_map_11.jpg",
        580,
        521,
        "#000000"
      ]
    }
  ]
}
[/block]

12. **The name should correspond to the name you used in the minimap widget.** Choose the corresponding ***Target Points*** you created in the second column.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/00c72e3-mini_map_12.jpg",
        "mini_map_12.jpg",
        580,
        96,
        "#000000"
      ]
    }
  ]
}
[/block]