Making a Portal to Move to Another Location

# Course Introduction

You can add portals within the maps of your world to allow players to quickly travel from place to place. Let's explore how to use [PortalComponent](/apiReference/Components/PortalComponent).

# Making Portals

[PortalComponent](/apiReference/Components/PortalComponent) allows you to set an entity with the same PortalComponent as the destination, and enables the player avatar to move to the destination when performing a specific action (such as a key input) within the portal area. We recommend using visually prominent sprites when creating entities that serve as functional portals. For example, a pair of shining circles or two distinct images will help the user distinguish the portals from other objects.

#### Making Portals with a Portal Model

Select Preset List - Portal and place it in the Scene. Portal models automatically include PortalComponent.  
[png](1663915370804d5440d19b5644734bd933e7778f83708)  
  


#### Making Portals from Scratch

  1. Place an entity that uses a custom-made sprite or MSW resource sprite.
  2. Open the Property Editor window and add PortalComponent. [png](16877649298670292c6aaa1a24154979d84844e1418f3) [png](1634802949512ccfae4badddf4a9b94e54c465e52fe6a)



# Setting Portal Destinations

You can target an entity with PortalComponent to set it as the destination. Only one destination can be set per component and the portal is one-way only.

  1. Place 2 or more portals.  
[png](1634802987275d1041c5e61784d01aa9e0f46471e9154)
  2. Click PortalComponent - PortalEntityRef and select the destination portal.  
[png](1634803045300b9122896120d423ea925ee9a2a3f89c2)
  3. Press the Start [png](163453086660754178e0ff96a45c58d1a580a4dfab9d1) to check if it works.  
[gif](16348033108010ff14400fad74976a47ac11befbe43e3)



> Tip You can refresh the portal path by placing it in [png](1634520188174b448bb50e5c64320bb3c882a5b438d6d)World, and then Saving (Ctrl + S) or [png](1635317657654c59c47ffc44d414db579b8d2fc0715a8) test playing. Please save or test, as you need to refresh to see the set portal path.

# Making Two-Way Portals

You can connect two portals so that they go both ways. This can work on the same map, or between two different maps.

#### Two-Way Portals on the Same Map

  1. Place portals in their positions.
  2. Choose the destination for each PortalComponent - PortalEntityRef.  
[png](163480347290834c9258780db465485f2abcf0bc3c64c)
  3. Press Start [png](163453086660754178e0ff96a45c58d1a580a4dfab9d1) to see the movement.  
[gif](16348058145167aaa89d461ff4c1c8946f863262bd401)



#### Two-Way Portal between Maps

  1. Place portals in their positions in different maps.
  2. Press PortalComponent - PortalEntityRef and select the destination.[png](1634804528834453c58fe14e24cc8adb4ab9e4a3e0a5b)
  3. Press the Start [png](163453086660754178e0ff96a45c58d1a580a4dfab9d1) to see the movement.  
[gif](16348062106844c69bcbaa6df4e4e9f3a6cd65394b137)



# Setting Portal Areas

You can set the portal area regardless of the Sprite size. Box Size and Box Offset are synchronized. [png](1634804632410373ff4eeb66a406facf39bb888857a1d)

  * BoxCollider: Activates the portal range editing function.
  * BoxOffset: The area that's considered the portal.
  * BoxSize: Changes the size of the portal box.


  1. Press Box Collider - Edit to enable editing mode.  
In editing mode, the area will turn red.  
[png](16348046753553247448f7d1e4b83add5fac2e7b76e80)
  2. You can change the X and Y values, or drag the box handler to adjust its size.  
[gif](1634804819824c51759c6a62848348bb5f7f339bbf701)
  3. Press Start [png](163453086660754178e0ff96a45c58d1a580a4dfab9d1) to see the changed area.   
As the box is bigger than the portal sprite, you can also move from the side of the portal.



[{"index":"Basic box setting","0":"[gif](16348050501643cf72b5f23084b3794b9a405f1cbeceb)"},{"index":"After changing box size","0":"[gif](1634805074080dd3861e6a9bc4ec89beff04deb974bf0)"}]