don't stop believing

기본 Menu 만들기 본문

Unity

기본 Menu 만들기

Tongchun 2019. 7. 12. 13:53

YouTube에 올라온 강좌를 따라해 봤습니다.

 

Asset Store에서 TextMesh Pro를 Import 합니다.
1. Unity > Asset Store > "TextMesh Pro" > Download & Import
: TextMeshPro를 받았다면
: Window > TextMeshPro > Import TMP Essential Resources

 

Background 이미지를 추가합니다.
1. Background로 사용할 이미지를 Assets/Secens 안에 Drag & Drop으로 추가합니다.
2. Inspector > Texture Type -> Sprite (2D and UI)

Game Scene을 먼저 만듭니다.
1. Project > Assets > Scenes > Create > Scene
2. 생성된 Scene 이름을 GameSample로 변경
3. Hierachy > Create > UI > Panel
4. Hierachy의 Panel 더블클릭 후 Scene 창에서 2D 선택
5. Inspector > Image > Source Image -> D&D Background Image
6. Inspector > Image > Color > A (Alpha) -> 255
7. Hierarchy의 Panel의 이름을 Background로 변경
8. Hierarchy > ... > Canvas > Create > UI > Text
9. Inspector > Rect Transform > Pos X, Pos Y, Poz z -> (0, 160, 0)
10. Inspector > Rect Transform > Width, Height -> (1200, 180)
11. Inspector > Text -> "THIS IS A GAME"
12. Inspector > Text > Font Size -> 120
13. Inspector > Text > Paragraph > Alignment -> Center, Middle
14. Inspector > Text > Color -> FFFFFF (white)

UI Scene을 지정합니다.

1. Project > Assets > Scenes > SampleScene의 이름을 UIScene으로 변경합니다.

 

UI Menu로 사용할 배경을 만듭니다.
1. Hierachy > Create > UI > Panel
2. Hierachy의 Panel 더블클릭 후 Scene 창에서 2D 선택
3. Inspector > Image > Source Image -> D&D Background Image
4. Inspector > Image > Color > A (Alpha) -> 255
5. Hierarchy의 Panel의 이름을 Background로 변경

Text의 글자색으로 사용할 Color를 지정합니다.
1. Project > ... > Scenes > Create > TextMeshPro > Color Gradient
2. 생성된 New TMP Color Gradient의 이름을 Gold로 변경
3. Inspector > Gold > Colors > Top Left (FFC757) / Top Right (FFC757)
4. Inspector > Gold > Colors > Botton Left (FF9C31) / Botton Right (FF9C31)

Play라는 텍스트를 만듭니다.
1. Hierarchy의 Canvas에서 UI > Text -TextMeshPro 추가
2. Inspector > Rect Transform > Width -> 600
3. Inspector > Rect Transform > Height -> 160
4. Inspector > Text Mesh Pro UGUI > Main Settings > Font Size -> 92
5. Inspector > Text Mesh Pro UGUI > Main Settings > Alignment -> Center, Middle
6. Inspector > Text Mesh Pro UGUI > Main Settings > Text -> "PLAY"
7. Inspector > Text Mesh Pro UGUI > Main Settings > Font Style -> B (Bold)
8. Inspector >  SDF Material > Underlay -> Check
9. Inspector >  SDF Material > Underlay > Offset X -> 1
10. Inspector >  SDF Material > Underlay > Offset Y -> -1
11. Inspector >  SDF Material > Underlay > Softness -> 0.5
12. Inspector > Text Mesh Pro UGUI > Color Cradient -> Check
13. Inspector > Text Mesh Pro UGUI > Color Cradient -> Color Preset -> D&D Gold
14. Hierarchy > ... > Canvas > Text (TMP)의 이름을 Play로 변경 

Play 버튼을 만듭니다.
1. Hierarchy > ... > Canvas > Create > UI > Button
2. Inspector > Rect Transform > Width, Height -> (600, 160)
3. Inspector > Image > Color -> 000000 (Black)
4. Inspector > Image -> Uncheck
5. Hierarchy > ... > Canvas > Button > Text를 삭제하고 Play를 D&D
6. Hierarchy > ... > Canvas > Button의 이름을 PlayButton으로 수정
7. Hierarchy > ... > Canvas > PlayButton > Play의 이름을 Text로 변경
8. Inspector > Rect Transform > Anchor Presets > option 키를 누른 상태에서 오른쪽 아래 Preset 선택
9. Hierarchy > ... > Canvas > PlayButton 선택
10. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, 300, 0)

Play 버튼의 클릭했을 때의 배경색을 만듭니다.
1. Hierarchy > ... > Canvas > PlayButton 선택
2. Inspector > Image -> Check
3. Inspector > Button > Normal Color > Alpha -> 0
3. Inspector > Button > Highlighted Color > Alpha -> 60
3. Inspector > Button > Pressed Color > Alpha -> 120

Options 버튼을 만듭니다.
1. Hierarchy > ... > Canvas > PlayButton Copy & Paste
2. 새로 생성된 PlayButton의 이름을 OptionButton으로 변경
3. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, 100, 0)
4. Hierarchy > ... > Canvas > OptionsButton > Text 선택
5. Inspector > Text Mesh Pro UGUI > Text -> Options

Quit 버튼을 만듭니다.
1. Hierarchy > ... > Canvas > OptionsButton Copy & Paste
2. 새로 생성된 OptinsButton의 이름을 QuitButton으로 변경
3. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, -100, 0)
4. Hierarchy > ... > Canvas > QuitButton > Text 선택
5. Inspector > Text Mesh Pro UGUI > Text -> Quit

Main 메뉴를 만듭니다.
1. Hierarchy > ... > Canvas > Create > Create Empty
2. 새로 생성된 GameObject를 MainMenu로 변경
3. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (-1.2, 94, 0)
4. Inspector > Rect Transform > Width, Height -> (800, 700)
5. Hierarchy > ... > Canvas > MainMenu 안으로 PlayButton, OptionButton, QuitButton 이동

Options 메뉴를 만듭니다.
1. Hierarchy > ... > Canvas > MainMenu Copy & Paste
2. 새로 생성된 MainMenu Object의 이름을 OptionsMenu로 변경
3. Hierarchy > ... > Canvas > MainMenu 선택
4. Inspector > MainMenu -> Uncheck (layer의 visible, invisible과 같은 느낌)
5. Hierarchy > ... > Canvas > OptionsMenu 선택
6. Hierarchy > ... > Canvas > OptionsMenu > OptionButton > Text를 OptionsMenu 하위로 이동
7. Hierarchy > ... > Canvas > OptionsMenu > Text 선택
8. Inspector > Rect Transform > Left, Top, Pos Z -> (100, 64, 0)
9. Inspector > Rect Transform > Right, Bottom -> (100, 476)
10. Hierarchy > ... > Canvas > OptionsMenu > PlayButton, OptionsButton 삭제
11. Hierarchy > ... > Canvas > OptionsMenu > QuitButton을 BackButton으로 변경
12. Hierarchy > ... > Canvas > OptionsMenu > BackButton > Text 선택
13. Inspector > Text Mesh Pro UGUI > Text, Font Size -> ("Back", 50)
14. Hierarchy > ... > Canvas > OptionsMenu > BackButton 선택
15. Inspector > Rect Transform > Width, Height -> (300, 120)

 

Options 메뉴의 슬라이더를 만듭니다.
1. Hierarchy > ... > Canvas > OptionsMenu > Create > UI > Slider
2. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (1.2, -50, 0)
3. Inspector > Rect Transform > Width, Height -> (540, 50)
4. Hierarchy > ... > Canvas > OptionsMenu > Slider > Handle Slide Area > Handle 선택
5. Inspector > Image -> Uncheck
6. Hierarchy > ... > Canvas > OptionsMenu > Slider > BackGround 선택
7. Inspector > Image > Color -> 000000 (Black)
8. Inspector > Image > Color > Alpha -> 90
9. Hierarchy > ... > Canvas > OptionsMenu > Slider > Fill Area > Fill 선택
10. Inspector > Image > Color -> F5BC61 (스포이드 사용)

Options 메뉴의 Volume 텍스트를 만듭니다.
1. Hierarchy > ... > Canvas > OptionsMenu > Text Copy & Paste
2. 생성된 Text의 이름을 Volume으로 변경
3. Inspector > Text Mesh Pro UGUI > Font Size -> 42
4. Inspector > Rect Transform > Left, Top Pos Z -> (140, 320, 0)
5. Inspector > Rect Transform > Right, Bottom -> (380, 325)
6. Inspector > Text Mesh Pro UGUI > Text -> Volume
7. Inspector > Text Mesh Pro UGUI > Main Settings > Alignment -> Left

Main 메뉴에 사용할 C# 스크립트를 만듭니다.
1. Hierarchy > ... > Canvas > OptionMenu 선택
2. Inspector > OptionMenu -> Uncheck
3. Hierarchy > ... > Canvas > MainMenu 선택
4. Inspector > MainMenu -> Check
5. Inspector > Add Component > 검색창에 MainMenu 입력 > New Script
6. Inspector > Main Menu (Script) > MainMenu 더블클릭 후 Visual Studio 열기

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour
{
    public void Playgame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    }
}

 

Main 메뉴의 Play 버튼과 스크립트를 연결합니다.

1. Unity로 돌아와서
2. Tool bar > File > Build Settings
3. Build Settings > Scenes In Build안에 Project창의 UISample Scens과 GameSample을 D&D
4. Scenes/UISample의 Index가 0, Scenes/GameSample의 Index가 1인 것을 확인합니다.
5. Build Settings 창을 닫음.
6. Hierarchy > ... > Canvas > MainMenu > PlayButton 선택
7. Inspector > Button > On Click() > + 
8. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > MainMenu를 D&D
9. On Click() > No Function > MainMenu > PlayGame 선택

Main 메뉴의 Quite 버튼에 사용할 스크립트를 만들고 연결합니다.
1. Project > Assets > MainMenu (C#) 더블클릭

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour
{
    public void Playgame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    }

    public void QuitGame()
    {
        Debug.Log("QUIT!");
        Application.Quit();
    }
}

2. Unity로 돌아와서
3. Hierarchy > ... > Canvas > MainMenu > QuitButton 선택
4. Inspector > Button > On Click() > +
5. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > MainMenu를 D&D
6. On Click() > No Function > MainMenu > QuitGame 선택

Options 버튼의 클릭 처리를 연결합니다.
1. Hierarchy > ... > Canvas > MainMenu > OptionButton 선택
2. Inspector > Button > On Click() > +
3. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > OptionsMenu를 D&D
4. On Click() > No Function > GameObject > SetActive 선택
5. On Click() > GameObject.SetAction 밑의 Check Box -> Check
6. Inspector > Button > On Click() > + 
7. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > MainMenu를 D&D
5. On Click() > GameObject.SetAction 밑의 Check Box -> Uncheck

Options 메뉴의 Back 버튼 클릭 처리를 연결합니다.
1. Hierarchy > ... > Canvas > OptionsMenu > BackButton 선택
2. Inspector > Button > On Click() > +
3. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > MainMenu를 D&D
4. On Click() > GameObject.SetAction 밑의 Check Box -> Check
5. Inspector > Button > On Click() > +
6. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > OptionsMenu를 D&D
7. On Click() > GameObject.SetAction 밑의 Check Box -> Uncheck

 

'Unity' 카테고리의 다른 글

Android SDK "Invalid Android SDK directory"  (2) 2020.04.25
Table - CURD  (0) 2019.07.14
Unity 온라인 (YouTube) 강좌  (0) 2018.07.31
Comments