Creating Resolution-independent UIs in Unreal Engine · ben🌱ui (benui.ca)

Design the UI at the lowest-supported resolution

μ–Έλ¦¬μ–Όμ—μ„œ μ‹€μ œλ‘œ UIλ₯Ό μ œμž‘ν•˜λŠ” μ›Œν¬ν”Œλ‘œλŠ” μœ„μ ―κ³Ό μ»€μŠ€ν…€ μœ μ €μœ„μ ―μœΌλ‘œ UIλ₯Ό κ΅¬μ„±ν•˜λŠ” 일반적인 방식과 동일해야 ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ κ°€μž₯ μ€‘μš”ν•œ λ³€ν™”λŠ” μ§€μ›λ˜λŠ” μ΅œμ € ν•΄μƒλ„μ—μ„œ UIλ₯Ό λ””μžμΈν•΄μ•Ό ν•œλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.

즉, UIλ₯Ό ꡬ성할 λ•Œ μ§€μ›λ˜λŠ” μ΅œμ € ν•΄μƒλ„μ—μ„œ UIλ₯Ό ꡬ성해야 ν•œλ‹€λŠ” λœ»μž…λ‹ˆλ‹€. μ΅œμ†Œ ν•΄μƒλ„λ‘œ λ””μžμΈν•˜κ³  더 큰 크기둜 μš”μ†Œλ₯Ό μΆ”κ°€ν•˜λŠ” 것이 κ·Έ λ°˜λŒ€μ˜ κ²½μš°λ³΄λ‹€ 훨씬 μ‰½μŠ΅λ‹ˆλ‹€. κ²Œμž„μ€ μ΅œμ†Œ ν•΄μƒλ„μ—μ„œ μž‘λ™ν•΄μ•Ό ν•©λ‹ˆλ‹€:

Steam 톡계 쑰사 결과둜 λŒμ•„κ°€μ„œ, μ§€μ›ν•˜κ³ μž ν•˜λŠ” μ΅œμ†Œ 해상도λ₯Ό κ²°μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€. μΈλ”μŠ€νŠΈλ¦¬ 였브 νƒ€μ΄νƒ„μ˜ 경우 λΆˆκ°€λŠ₯ν•˜μ§€ μ•ŠμœΌλ©΄μ„œλ„ κ°€μž₯ 넓은 λ²”μœ„λ₯Ό 컀버할 수 μžˆλŠ” 1280 x 720을 μ„ νƒν–ˆμŠ΅λ‹ˆλ‹€.

μ΅œμ†Œ 해상도λ₯Ό μ„ νƒν–ˆμœΌλ©΄ κ°€μž₯ λ¨Όμ € ν•΄μ•Ό ν•  일은 UMG μœ„μ ― λ””μžμ΄λ„ˆ μΈν„°νŽ˜μ΄μŠ€λ₯Ό ν•΄λ‹Ή ν•΄μƒλ„λ‘œ μ„€μ •ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

λ””μžμ΄λ„ˆ 뷰의 였λ₯Έμͺ½ 상단 λͺ¨μ„œλ¦¬μ—μ„œ μ»€μŠ€ν…€μ„ μ„ νƒν•œ λ‹€μŒ μ›ν•˜λŠ” 해상도(이 경우 1280 및 720)λ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€(μŠ€ν¬λ¦°μƒ· μ°Έμ‘°).

1280x720으둜 κΈ°λ³Έ UI λ§Œλ“€κΈ° λ””μŠ€ν”Œλ ˆμ΄ 해상도λ₯Ό μ‚¬μš©μž 지정 및 1280x720으둜 μ„€μ •ν•˜λ©΄ μœ„μ ―μ΄ ν•΄λ‹Ή ν•΄μƒλ„λ‘œ ν‘œμ‹œλ©λ‹ˆλ‹€.

https://benui.ca/assets/unreal/resolution-main-1280x720.png

κ°œλ³„ μœ„μ ―μ„ λ‹€λ₯Έ μœ„μ ―μœΌλ‘œ κ΅¬μ„±ν•˜λŠ” κ²½μš°μ—λŠ” 그럴 ν•„μš”κ°€ μ—†μ§€λ§Œ 전체 ν™”λ©΄μœΌλ‘œ ν‘œμ‹œλ˜λŠ” λͺ¨λ“  μœ„μ ―μ˜ 경우 λͺ¨λ“  것이 μ΅œμ†Œ 해상도에 λ§žλ„λ‘ μ‚¬μš©μž μ •μ˜ 해상도λ₯Ό μ„€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€.

Make source textures at the highest-supported resolution

μž‘μ€ ν•΄μƒλ„μ—μ„œ μž‘λ™ν•˜λ„λ‘ UIλ₯Ό λ””μžμΈν•˜λ”λΌλ„ λ§Žμ€ ν”Œλ ˆμ΄μ–΄κ°€ 훨씬 높은 ν•΄μƒλ„μ—μ„œ ν”Œλ ˆμ΄ν•œλ‹€λŠ” 점을 μ΄ν•΄ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. 2023λ…„μ—λŠ” 일반적으둜 4Kκ°€ κ°€μž₯ 높은 해상도λ₯Ό 지원할 κ²ƒμœΌλ‘œ μ˜ˆμƒλ©λ‹ˆλ‹€.