World Coordinates and Screen Coordinates

# Course Introduction

World space and screen space exist in MapleStory Worlds. Each space uses a different coordinate system. Let's learn about the coordinate systems used in the two spaces.

# World Space

World space refers to Hierarchy - world - map space.

## World Coordinates

World coordinates are specific position values on the map. The `TransformComponent.WorldPosition` value of entities placed on the map are world coordinates. The origin of the world coordinates is the center of the map. For example, as in the image below, Fountain Entity located at X = 23.91, Y = -3.37, Z = 999.953 in the world is known by the WorldPosition value.

[png](16560451065876f02eae1080d46618432600ef68e44ec)

# Screen Space

The coordinates used in screen space can be divided into Screen Coordinates and UI Coordinates. Both coordinates refer to position values on the screen, but the methods for calculating them differ.

## Screen Coordinates

Screen coordinates correspond to the number of pixels in the device's display resolution. The origin of screen coordinates is the bottom-left corner. Since the display resolution varies by device, the maximum values for screen coordinates also differ. For example, the max value of iPhone 16 is 2556 x 1179, and the max value of Galaxy S25 is 2340 x 1080. Screen coordinate values can be checked by using `ScreenTouchEvent`, `ScreenTouchHoldEvent`, `UILogic.ScreenWidth`, `UILogic.ScreenHeight`.

The following is Samsung Galaxy S10+'s Screen coordinates origin and max value coordinates.

[png](17515098580721c29bc7c83a24474bf1b38fb72f3a236)

## UI Coordinates

UI coordinates origin and max value change based on the device. UI coordinates' default origin is the center of the visible screen, and UI coordinates' max value is set close to 1920 x 1080.

#### UI Coordinates Origin by Device

  * PC: The visible canvas's center is the origin (0,0). [png](1751510074818eedf66599ea54950bd381b1b30a3f6bf)
  * Mobile: Safe Area's center is the origin (0,0). Safe Area refers to the area that can be safely used as it isn't affected by notches or tab bars in mobile devices. [png](17515100532491f1477f2f58c44f088db81ab0ca34efe)



If you place the UI in the UIGroup, the UI entity uses UI coordinates. The origin and max value of UI coordinates vary by device, so even if placed in full in PC, it may not be full on screen in a different device.

[{"index":"PC","0":"[png](17514482389113061b375c5af442cbc1af9c27e6f984e)"},{"index":"Apple iPhone 12 Mini","0":"[png](1751448252201c407bce361bb4d198816856516c7a183)"},{"index":"Samsung Galaxy S10+","0":"[png](1751448268722abd9bdd5be9b4e99839a6ded171432d5)"}]

# UI Coordinates Area Processing Method by Resolution

UI coordinates area default resolution is 1920 x 1080, and default ratio is 16:9. Regardless of device resolution, the visible screen appearance remains consistent even when the world screen zooms in or out.

#### PC

MapleStory Worlds users who use PC can change window size. However, even if you change the window size, the screen ratio will remain 16:9. The ratio is kept, so the visible area of the screen will be enlarged or reduced proportionally. However, if the window is full screen, the horizontal area displayed will appear larger or smaller depending on the monitor's aspect ratio. For example, the screen will look the same when the window size is 1920x1080 and when it's 3840x2160.

[{"index":"1920x1080","0":"[png](1751526293382a3747cbf4fa24976b52d4dc05e854b79)"},{"index":"3840x2160","0":"[png](1760355323385269cedca02f343a6ad9089315fa4c96d)"}]

#### Mobile

When you enter the world from a mobile device, the screen will switch to landscape mode.

Visible area is based on a 16:9 aspect ratio, with the vertical area remaining constant. The horizontal area may appear larger or smaller depending on the device's resolution ratio. Like the image below, the resolution of an iPad Pro 12.9 with a ratio of 16:12 is 2732 x 2048, but if you calculate all of the coordinate area, it's 1920 x 1439. The difference with screen coordinates is approximately 1.42x, and compared to 16:9, 16:12 ratio is vertically longer so it's the result of adjusting the canvas size based on 1920.

[png](1751526324699a520b57239974b27a5a253474d4f7549)

As another example, the resolution of the Galaxy S10+ with a ratio of 19:9 is 3040 x 1440, but the entire size of the canvas is 2280 x 1080. The ratio difference with screen coordinates is approximately 1.3x, so compared to 16:9, the 19:9 aspect ratio is wider, so the canvas size was adjusted based on 1080.

[png](1751526357807622abec3694e4ac9a02bc427a92e8ad9)

# UI Coordinate Settings

Based on the Anchor Presets setting of `UITransformComponent`, the UI is placed somewhere PosX, PosY values away. Required properties vary based on Anchor Presets settings.

[png](1754011712034b9838df4d63c4911a492903c6d88962f)

#### Anchor Settings

Anchor can be selected by pressing the checkered patter icon of `UITransformComponent`. Enter **PosX and ** PosY after selection to place UI at a distance equal to the value entered relative to the Anchor. The UI Anchor's reference point is the Safe Area area at this point.

[png](1652754058498d1bc17b4c1d04e75bc8000fde8722de1)

Setting the Anchor to Stretch will make the UI expand according to the settings. If the Anchor stretches long, the properties that can be set based on type change. For example, black semi-transparent background image (PopupBack) of the popup message is centered and scaled to cover the entire screen. Regardless of screen resolution, when a pop-up message appears, a black background image covers the colorful map, allowing the user to focus solely on the pop-up message. [png](165604560743653ab60032b284c4cb1fa149610be2b93)

#### Anchor Presets Type

[{"Anchor":"[png](1652753675728c2aaf37b9f124af7893d195adcef175b)","Description":"UI is positioned at a distance of PosX and PosY from the top-left corner."},{"Anchor":"![anchThe UI will be stretched vertically. It's positioned at a distance equal to the PosX value from the left center.","Description":"nan"},{"Anchor":"[png](1652762899845dbdb414c754049a5b95a6e0d3f7426b8)","Description":"The UI will be stretched vertically after leaving the values as much as the Top and Bottom values based on the center. It's positioned at a distance equal to the PosX value from the center point."},{"Anchor":"[png](1652762937587653a13ae666f45329c6afa9c618617e4)","Description":"The UI will be stretched vertically after leaving the values as much as the Top and Bottom values based on the right center. It's positioned at a distance equal to the PosX value from the center of the right side."},{"Anchor":"[png](1652762962358809eb3ba031f47f491b2a12900b0b324)","Description":"The UI will be stretched everywhere after leaving the values as much as the Top and Bottom values based on the center."}]

# Using Anchor Presets

Each device has its own resolution and Safe Area, so determining UI positions using UI coordinates may cause parts of the UI to appear cropped or invisible depending on the device. However, checking the Safe Area and setting the UI positions for every different device is not an efficient approach to development. Therefore, UI elements should be positioned based on some other criteria, such as how far they should be from another specific point in the UI.

Let's look at the issues that may arise when placing UI elements based on UI coordinates. UI positions change based on screen resolution changes. Consider what would happen if you set a single button with a centered Anchor, and then try to place it below the Social button to the right of the screen. Say you place the button at UI coordinates 800, 400. If you play the World on a screen with 1920 x 1084 (16:9) resolution, the UI element will show in the desired location.

[png](1761722356633567344378b9c4005b5c0d3ded1e480f8)

If you play on a screen with 3040 x 1440 (19:9) resolution, the UI button will be placed in a position the Creator did not intend. This is because the screen resolution ratios are different. Regardless of the resolution of the user's device, if you want to show UI elements in a specific desired position, you must use the Anchor Presets function.

[png](17617232008259055a237bce9451fb3ea92694455b9cd)

To accomodate such a variety of resolutions, Anchor is set in `UITransformComponent` so that UI distance can be calculated. Anchor is placed at a point located PosX and PosY away from the origin. For example, the default chat UI provided in MapleStory Worlds has its Anchor Point set to the top-left corner. If configured this way, the chat UI will be positioned at coordinates 368.9725, -251.8051 relative to the top-left corner of any device.

[png](165604514596759c47da1127745c2b9207457e3d9bbe9)

# Difference between UI Coordinates and Screen Coordinates

Since UI coordinates and Screen coordinates differ in ratio and origin position, they have different coordinate values even when representing the same position. So if the Screen coordinate value is entered as-is in the `UITransformComponent.Position` value, the UI entity will not be positioned in the expected position. For mobile, the max value of UI coordinates is determined based on the device's screen aspect ratio.

Set the simulator to Galaxy S10+ and use the UI TransformComponent Anchor Preset. Create a UI entity and select the stretching UITransformComponent - Anchor Preset in all directions to make the Left, Right, Top, and Bottom values all 0 and cover the entire screen. You'll see that the screen was covered, but only the Safe Area area was filled. The covered Safe Area's UI coordinates value is 2173.5 x 1080, and the origin is the center of the Safe Area. But in Screen coordinates, `UILogic.ScreenWidth` is 3040 , `UILogic.ScreenHeight` is 1440. Because these coordinates are Screen coordinates, the origin is in the lower left.

[png](1751526243746915bec31023144ad83bb3513bbee6799)