1. Unity에서 새로운 씬을 생성한 후 이름을 LoginScene 으로 설정하고 저장한다.
2. 배경으로 쓸 이미지를 준비하고(png, bmp 등) Project에 있는 Resources 파일에 저장한다.
3. Resources 폴더에 저장해둔 이미지를 클릭하고 우측 상단에 있는 Texture Type을 Sprite로 변경해준 후 Apply를 누른다.
배경이미지 예시
4. Hierarchy에서 UI -> Image를 생성하고 Image를 누른 후 이미지가 화면에 꽉 차도록 Anchor를 alt버튼을 누르고 가장 오른쪽 아래(상하좌우 strech)에 있는 것을 클릭한다.
5. 내가 다운로드 받은 이미지를 Source Image에 가져다 놓는다.(드래그 앤 드롭)
6. 3D로 되어있는 화면을 2D로 편하게 보기위해 Persp를 Iso로 변경 후 다시 back으로 바꿔준다.
7.Hierarchy에 Image라고 쓰인 부분을 Backgroud로 변경해준다.(알아보기 편하라고ㅎㅎ)
8. Canvas에서 UI -> Text를 생성한 후 이름을Text_StudentNumber라고 지정해준다. Text에는학번이라고 적어주고 클자 크기, 위치 등과 같은 나머지 설정은 아래 그림과 같이 해준다.
9.Canvas에서 UI -> Input_Field(사용자가 입력한 값을 표시해주는 영역)를 추가한 후 8번에서 적은 학번 옆에 위치시켜준다.
Input_Field에 보면 Placeholder와 Text 두개가 있는데 Placeholder는 위 그림의학번 입력처럼 유저가 값을 입력하기 전 들어가있는 글자이고 Text는 유저가 실제로 입력한 값이 들어가는 부분이다. Placeholder에 Text를학번 입력으로 바꿔준다. Input_Field라는 부분 역시Input_StudentNumber로 이름을 바꿔준다.
10. Canvas에서 Create empty로 빈 게임 오브젝트를 생성한 후 이름을StudentNumber_Field로 바꿔주고Text_StudentNumber와Input_StudentNumber를StudentNumber_Field안으로 드래그 앤 드랍 해준다.
11.StudentNumber_Field를 ctrl + c, ctrl + v한 후 학번 아래로 위치시키고 이름을 Password_Field,Text_Password와Input_Password로 바꿔준다. 이후 택스트에 있는 값을 비밀번호, 비밀번호 입력으로 바꿔준다. 여기까지 하면 아래 그림과 같이 나온다.
Text_Title은 이따가 아래에서 설명 예정...
12. InputField_StudentNumber를 클릭하고 우측 설정을 아래 그림과 같이 맞춰준다.
Character Limit은 InputField에 들어갈 최대 글자 수를 지정해주는 기능인데 여기서는 10으로 한다. Line Type은 Single Line으로 하여 글자가 한줄로 계속 입력되도록 만들어주고, Caret Blink Rate는 사용자가 값을 입력할때 커서의 깜빡이는 속도를, Caret Width는 커서의 굵기를 정해주는 기능이다. 그 외 기능은 개인적으로 찾아보는걸로...ㅎㅎ
InputField_Password도 마찬가지로 설정을 아래와 같이 바꿔준다.
이때 Content Type을 Password로 하면 사용자가 값을 입력할때 그 값들이 ***** 모양으로 나오게 된다.
13. 로그인 버튼을 만들기 위해Canvas에서 UI -> Button을 클릭해준다. 버튼 사이즈와 위치를 조절해주고 버튼의 이름을Button_Login으로 설정해주고 안에 있는 Text를 아래 그림과 같이 만들어준다.
14. 화면의 제목(이름)과 상태메시지를 나타내주기 위해 Canvas에서 UI -> Text를 2개 만든다. 하나는 이름을 Text_Title, 나머지 하나는 Text_Message로 해준다. 위치와 글자 크기 등을 조절해준다. 그러고 나면 아래 그림과 같은 로그인 씬이 만들어지게 된다.
