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에서 조절

1. 버튼 코딩은 버튼의 "on Click"으로 가벼운 코딩 UI로 적용 혹은 빈오브젝트에 쓴 스크립트를 적용 가능

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

' '

public void ClickBackButton()
{
   //TODO: 이 상태에서 back 버튼을 누르면 메인화면으로 가야한다.
   /*
   if (FirstPanel.activeSelf == true & SecondPanel.activeSelf == false & ThirdPanel.activeSelf == false) { }
   */
   //두번째 페이지에서 첫번째 페이지로 이동
   if (FirstPanel.activeSelf == false & SecondPanel.activeSelf == true & ThirdPanel.activeSelf == false)
   {
         SecondPanel.SetActive(false);
         FirstPanel.SetActive(true);
    }
    //DataRecovery에서 첫번째 페이지로 이동
    if (FirstPanel.activeSelf == false & SecondPanel.activeSelf == false & ThirdPanel.activeSelf == true)
    {
        ThirdPanel.SetActive(false);
        FirstPanel.SetActive(true);
        buttontext.GetComponent().text = "data recovery";
        }
        //그외는 button의 onClick에서 사용
    }

2. 슬라이더 또한 on Value Change(Single)을 통해 간단한 코딩 혹은 스크립트 적용 가능

• 음악 및 소리를 가져오면 바로 적용 가능 ' '

참고 자료

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