개인 과제 해설 풀이 2회차

Chapter .1 기본 지식

Content .1 코드 작성 방법

https://velog.io/@sangwon93/TIL-2024.05.14

• 기존 1회차 해설에서 안내해준 코드는 실제 현업에서 사용하기 부적합함
• 프로토 제작 시에는 빠르게 제작 가능하여 괜찮지만, 확장성과 유동성이 떨어짐
• 객체지향성을 띄게 코드를 짜는 방식을 연습해야 함

Content .2 Rect Transform 조정

Position과 Width, Height의 좌측에 위치한
center & middle 이 적힌 사각형 아이콘 클릭

• 일반 클릭 : Anchors 위치만 변경
• Alt 클릭 : Anchors + Unit 위치 변경
• Shift 클릭 : Anchors + Pivot 위치 변경
• Alt + Shift 클릭 : 3가지 모두 위치 변경

Content .3 Anchors와 Pivot

1. Anchors

• Canvas에서의 UI를 고정시키는 위치 값

2. Pivot

• UI의 Position 기준 값

Content .4 UI Scale Mode

1. Constant Pixel Size

• UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지

2. Scale With Scereen Size

• 화면이 커질수록 UI 요소도 커짐

3. Constant Physical Size

• 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기 유지

Chapter .2 과제 풀이 해설

Content .1 맵 제작하기

1. 에셋 다운로드 후 타일 파렛트 제작
2. 타일맵 취향에 맞게 제작

• 코드를 이용한 부분이 아니며, 실제로 이미 활용을 충분히 하고 있음

Content .2 카메라 따라가기

1. Player의 자녀로 Main Camera 삽입
2. Player의 Freeze Rotation Z 체크

• 많은 수강생이 코드를 이용해서 만듦

코드로 모자라 Cinemachine까지 활용하여 제작을 했는데, 너무 쉬운 방법이 있어서 다소 충격을 받았습니다.

Content .3 걷는 애니메이션 제작

1. Animator 생성 후 Player의 자녀인 Sprite에 Add Component
2. 원하는 방식으로 Animation 제작 후 Animaotr 창에서 설정값 적용 (isMove, isAttack 등)

Content .4 이름 입력 시스템

1. MainScene 전에 진입할 New Scene 생성
2. New Scene 안에 Canvas 생성
3. Canvas Scaler에서 UI Scale Mode를 변경
   (Scale With Scereen Size : X 1920, Y 1080)
4. UI 중 InputField와 Button 추가
5. 사이즈 및 위치 값 조절
6. 스크립트 작성

public class IntroUI : MonoBehaviour
{
	// OK 버튼을 누르면 인풋 필드에 입력된 이름 가져오기
    public TMP_InputField inputField;

	public void OnClickBtn()
    {
    	// 버튼을 눌렀을 때 이뤄져야 할 작업
        // 2~10글자 사이
        if (inputField.text.Length > 2 || inputField.text.Length < 10)
        	return;
		
        // 15번 진행 시 작성
        DataManager.instance.userName = inputField.text;
        
        // OK를 눌렀을 때 씬 변경
        SceneManager.LoadScene(1);
	}
}

7. Canvas에 IntroUI 스크립트 추가 및 Referance에 InputField 추가
8. Button에 On Click에 Canvas 추가 후 IntroUI() -> OnClickBtn 선택하여 추가
9. MainScene으로 이동 후 Canvas 추가
10. Canvas의 Render Mode를 World Space로 변경
11. Image를 통해 NameTag를 만들고 Text칸 추가 후 Player의 자녀로 삽입
12. Build Settings를 통해 Scene 순서 정리
13. New Scene에 DataManager라는 Object 생성
14. DataManager라는 Script도 생성 후 Object에 Add Componenet
15. 스크립트 작성

public class DataManager : MonoBehaviour
{
	public static DataManager instance;
    
    public string userName;
    
    private void Awake()
    {
    	if(instance == null)
        {
        	instance = this;
            DontDestroyOnLoad(this.gameObject);
        }
    }
}

16. PlayerName이라는 Script 추가
17. 11번에서 추가한 Text를 눌러서 Add Component
18. 스크립트 작성

public class PlayerName : MonoBehaviour
{
	TMP_Text nameText;
    
    void Start()
    {
    	nameText = GetComponent<TMP_Text>();
        nameText.text = DataManager.instance.userName;
    }
}

Content .5 캐릭터 선택하기

1. NewScene에서 Canvas안에 UI-Image 2개 추가
2. 한 개는 안에 Image 추가하여 SeletedCharacter로 이름 변경 및 작업
3. 나머지는 PopupMenu로 이름 변경 후 Button 추가
4. Button 내 불필요한 Text는 삭제
5. PopupMenu 사이즈 조절 및 Button에 에셋 이미지 추가
6. Button을 복제하여 옆으로 옮기고 다른 에셋 이미지 추가
7. PopupMenu에 Text칸 추가하여 선택 명령어 작성
8. PopupMenu Off 처리해두기
9. Image의 Inspector에서 Button을 Add Component
10. On Click에 PopupMenu 넣고 Function에서 GameObject - SetActive(bool) 선택 및 CheckBox On 설정
11. PopupMenu 내부 버튼들에도 10번과 동일하게 작업 후 CheckBox Off만 다르게 설정
12. 기존 IntroUI 스크립트 수정

public class IntroUI : MonoBehaviour
{
    public TMP_InputField inputField;
    
    // 배열로 캐릭터 이미지 추가
    public Sprite[] CharacterImage;
    // Image 중 UnityEngine.UI.Image 선택
    public Image seletedcharacter;
    
    public void ChoiceCharacter(int num)
    {
    	// 넘버를 받아 캐릭터 이미지 선택
    	selectedcharacter.sprite = characterImages[num];
        // 16번 진행 시 작성
        DataManager.instance.characterNum = num;
    }

	public void OnClickBtn()
    {
        if (inputField.text.Length > 2 || inputField.text.Length < 10)
        	return;
		
        DataManager.instance.userName = inputField.text;
        
        SceneManager.LoadScene(1);
	}
}

13. Canvas에서 Intro UI 스크립트 내부에 1,2번 Player 이미지 드래그 앤 드랍
14. 남은 Selectedcharacter Referance에 2번에서 만든 SeletedCharacter 추가
15. PopupMenu 내부 버튼들에 On Click 추가하여 Canvas 삽입 후 Function에 IntroUI - ChoiceCharacter(int) 선택 및 0, 1 숫자 입력
16. 기존 DataManger 스크립트 수정

public class DataManager : MonoBehaviour
{
	public static DataManager instance;
    
    public string userName;
    // 숫자도 받을 수 있게 수정
    public int characterNum;
    
    private void Awake()
    {
    	if(instance == null)
        {
        	instance = this;
            DontDestroyOnLoad(this.gameObject);
        }
    }
}

17. MainScene에서 Player의 Sprite를 Character1으로 이름 변경 후 복제하여 Character2로 이름 변경
18. Character1,2에 맞는 이미지를 넣어주고 Off 처리
19. 기존 PlayerController 스크립트 수정

public class PlayerController : MonoBehaviour
{
	public float speed;
	SpriteRenderer spriteRenderer;
    
    public GameObject[] characters;

	void Start()
	{
		spriteRenderer = GetComponentInChildren<SpriteRenderer>();
        characters[DataManager.instance.characterNum].SetActive(true);
	}

	void Update()
	{
		transform.position +=
        (new Vector3(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"))).normalized
        * speed * Time.deltaTime;

		Vector3 mousePos = Input.mousePosition;

		spriteRenderer.flipX = (mousePos.x < Screen.width/2);
	}
}

20. MainScene에 Player로 가서 Player Controller 내부에 characters 부분에 character1,2를 드래그 앤 드랍

Chapter .3 내가 사용한 방법과 비교

https://github.com/Kwaksangwon93/homework2

InputField와 배열을 활용하는 방법이 아직 미숙하다 보니 해설을 분석하면서 많은 부분에서 부족함을 크게 느끼게 됨

스크립트끼리 유기적으로 연결되지만 의존성이 높지 않도록 객체지향적으로 구성된 부분에서 많이 놀랐음