develop MainscreenOption

메인화면 옵션 만드는 과정

준비

• canvas
• Panel
• Text-TextMeshPro
• Button-TextMeshPro
• Raw Image
• Slider
• Dropdown-TextMeshPro
• Toggle

세팅

• Panel 이름을 "OptionBackground", 위치(0, -40, 0), 크기(1800, 640), source image: "MainscreenPainting"

  • Button-TextMeshPro 이름을 "BackButton", 위치(-140, -40, 0), 크기(160, 50), TMP: "back"
  • Raw Image 이름을 "Possessed money", 위치(0, -40, 0), 크기(300, 50), text: "0"(font: 36, 왼쪽 정렬)
  • Dropdown-TextMeshPro 이름을 "Language", 위치(400, 150, 0), 크기(160, 30), Option: "English", "Korean"
  • Button-TextMeshPro 이름을 "DataRecovery", 위치(480, -260, 0), 크기(160, 30), text: "data recovery"(font: 24, 가운데 정렬)

• Panel 이름을 "OptionMenu_1Page", 위치(0, -40, 0), 크기(600, 560)

  • Text-TextMeshPro 이름을 "Option", 위치(0,245, 0), 크기 (200, 50), text: "Option"(font: 36, 가운데 정렬)
  • Slider 이름을 "Sound", 위치(150, 160), 크기(160, 20), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(70, 25) text: "Sound"(font: 20)
  • Slider 이름을 "Music", 위치(150, 100), 크기(160, 20), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(70, 25) text: "Music"(font: 20)
  • Toggle 이름을 "VisualEffect(VFX)", 위치(150, 40), 크기(30, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(180, 25) text: "Visual Effect(VFX)"(font: 20)
  • Toggle 이름을 "Fullscreen", 위치(150, -20), 크기(30, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(180, 25) text: "Fullscreen"(font: 20)
  • Toggle 이름을 "PerformanceMode", 위치(150, -80), 크기(30, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(180, 25) text: "Performance"(font: 20)
  • Button-TextMeshPro 이름을 "ClassicMode", 위치(150, -160, 0), 크기(160, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(180, 30) text: "Classic Sound Effect"(font: 20)
  • Text-TextMeshPro 이름을 "Page", 위치(0, -260, 0), 크기(100, 20), font: "1/2", Button-TextMeshPro 이름을 "Next" 위치(65, 0, 0), 크기 (30, 30), Button-TextMeshPro 이름을 "Back" 위치(-65, 0, 0), 크기 (30, 30)

• "OptionMenu_1Page"을 Duplicate하여 "OptionMenu_2Page"를 만들고, "Option"과 "page"제외하고 삭제 page의 font: "2/2"로 교체

  • Button-TextMeshPro 이름을 "JoystickDisplay", 위치(150, 160, 0), 크기(30, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(200, 25) text: "Joystick Display"(font: 20)
  • Button-TextMeshPro 이름을 "ShowDamage", 위치(150, 100, 0), 크기(30, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(200, 25) text: "Show Damage"(font: 20)
  • Button-TextMeshPro 이름을 "HideStageProgress", 위치(150, 40, 0), 크기(30, 30), Text-TextMeshPro 추가하여 위치(-300, 0), 크기(200, 25) text: "Hide Stage Progress"(font: 20)

• "OptionMenu_1Page"을 Duplicate하여 "DataRecovery"를 만들고, Option을 제외하고 모두 제거, "Option"을 "DataRecovery"로 이름 교체, text: "Data Recovery"(font: 36)

  • Button-TextMeshPro 이름을 "DataRecoveryButton"를 만들고, 위치(0, 160, 0), 크기(210, 40), text: "Load Last Save"(font: 24)

자세한 GUI기획이 필요

스크립트

• 큰 개념: "OptionBackground"을 고정시키며 그 외에 panel을 OptionManager로 다루고, panel내부에 있는 버튼이나 슬라이더, 토글, 드랍다운은 각각 상위에 있는 panel에서 조절
• 들어가기 전
  • 버튼 코딩은 버튼의 "on Click"으로 가벼운 코딩 UI로 적용 혹은 빈오브젝트에 쓴 스크립트를 적용 가능

* button을 작동하기 위해 스크립트에 "using UnityEngine.UI;" 추가, Raycast Target를 비활성화, EventSystem있는지 확인, 버튼 옵션 Navigation을 None으로 설정 

참고 자료

• https://you-rang.tistory.com/463
• https://www.youtube.com/watch?v=4Zj4sf7FgPo&ab_channel=JayceLee