Part4 - 월드 공간 UI

[ 재사용 가능한 기본 UI 만들기 ]

- GameObject >> UI >> Canvas

- - Name : DefaultCanvas
  - DeaultCanvas Inspector
    - Cavas Component : Render Mode : world space
    - Rect Transform
      - Width : 640, Height : 480
      - Scale (0.00135, 0.00135, 0.00135) : 월드 공간 유닛에서 픽셀 하나의 크기를 의미
      - PosX, PosY, PosZ (0, 1.325, 0)

- - DefaultCanvas 선택후 오른쪽 마우스 클릭 >> UI >> Image
    - Image Inspector >> anchor presets >> stretch-strectch 옵션 선택
      - 비어있는 공간을 이미지가 늘어나서 캔버스를 채우게됨

- - DefaultCanvas 선택후 오른쪽 마우스 클릭 >> UI >> Text
    - Text Inspector >> Alignment : Center Anlign , Middle Align
      - Vertical Overflow : Overflow
      - Scale ( 4, 4, 4)

- - - Text Inspector >> anchor presets >> stretch-strectch 옵션 선택

- - DefaultCanvas >> Canvas Scaler Component >> Dynamic Pixels Per Unit : 10
    - 폰트를 표시하기 위한 해상도 증가

- - Prefab으로 저장
    - DefultCanvas =>(드래그) Project : Assets/prefabs

[ 바이저 HUD ]

- Visor(햇빛 가리게) HUD : 항사 붙어다니는 HUD를 의미
- DefaultCanvas 프리팹 =>(드래그) [ MeMyselfEye>>Main Camera]
  - DeaultCanvas이름을 VisorCanvas로 바꿈
  - Rect Transform >> PosX, PosY, PosZ (0, 0, 1)

- - DefultCanvas >> Text Inspector
    - Default Text : "Welcome! My exhibition hall"
    - Text color : 녹색

- - VisorCanvas >> Image Inspector
    - 비활성화 (체크박스의 체크를 해제)

- 5초 뒤에 환영 메시지를 사라지도록 하기
  - VisorCanvas Inspector >> Add Component >> New Script
    - Name : DestroyTimeout - Source Code Link 04
- 테스트

[ 십자선 커서 ]

- DefaultCanvas 프리팹 =>(드래그) [ MeMyselfEye>>Main Camera]
  - Name : ReticleCursor
  - Rect Transform >> PosX, PosY, PosZ (0, 0, 1) : 십자선 커서는 항상 1미터 거리 앞에 떠 있게 됨

- - Image 와 Text 오브젝트 삭제
  - 이미지 다운로드(reticle)
  - ReticleCursor 오른쪽 마우스 클릭 >> UI >> Raw Image
    - PosX, PosY, PosZ (0, 0, 0)
    - Width, Hegiht (22,22)
    - reticle =>(드래그) [ Raw Image Inspector :Raw Image : Texure ]

- - 테스트

- 실제 보고자 하는 위치에 커서를 올려 놓기 위한 방법
  - ReticleCursor Inspector : Add Component >> New Script
    - Name : CursorPositioner - Source Code Link 04

[ 정보 풍선(info bubble) ]

- DefaultCanvas 프리팹 =>(드래그) [WalkTarget]
  - Name : InfoBubble
  - Rect Transform >> PosX, PosY, PosZ (0, 0.2, 0)
  - InfoBubble >> Text >> Rect Transform >> PosX, PosY, PosZ (0, 0, 0) / Right, Bottom (0 , 0 )
    - Default Text : X:00.00, Z:00.00
  - InfoBubble >> Image >> Scale (0.7, 0.2, 1)
- WalkTarget >> LookMoveTo.cs 수정
- Source Code Link 04
  - infoBubble =>(드래그)[ WalkTarget Inspector : LooKMoveTo >> infoBubble ]

Page updated

Google Sites

Report abuse