1. 가이드 이미지 세팅을 위한 Canvas와 Image 생성2. 프로젝트의 해상도(1920x1080)설정3. 생성한 Canvas의 Canvas Scaler 속성 설정 (Scale With Screen Size, 1920x1080)4. 생성한 image 오브젝트에 사용할 가이드 이미지(Component1)를 Source Image에 연결하고 SetNative Size 클5. 적용된 가이드 이미지6. 가이드 이미지의 알파 값을 살짝 투명하게 조정7. 메인 카메라의 backgound 색상 변경(검정색)8. 게임씬 적용 확인9. Test01Main 빈 오브젝트와 Canvas의 이름을 Test01UIMain으로 변경해주고 각각의 스크립트를 만들어 컴포넌트로 연결10. 빈 오브젝트(Main)을 만들고 가로/세로 설정(1920x1080)11. 버튼 만들기(TextMeshPro)12. 만들 버튼의 Source Image와 Font Asset이 뭔지 알고, 구하기 위해 프리팹 파일 Open13. Source Image 확인(btn_rectangle_01_n_blue)14. Font Asset 확인(Alata-Regular SDF)15. Button의 Source Image를 만들 버튼의 sprite로 변경(btn_rectangle_01_n_blue)16. 그리고 Image Type을 Simple로 변경 후, Set Native Size 클릭17. Font Asset도 변경(Alata-Regular SDF)18. 그리고 다시 Image Type을 Sliced로 변경19. 잘 만들어 졌는지 확인20. 디버그로 버튼 이벤트 확인을 위해 Test01UIMain 스크립트 수정21. Test01Main 스크립트 수정22. Test01Main 스크립트에 선언된 Ui Main에 Test01UIMain 연결23. Test01UIMain 스크립트에 선언된 Btn Blue에 만든 Button을 연결24. 콘솔 창에서 버튼 클릭시 로그 확인25. 같은 방식으로 Red 버튼을 생성26. 버튼 타입을 상수(eButtonType)으로 정의 후, 각각 타입에 맞게 코드 수정27. 버튼 클릭시 버튼 타입이 로그로 출력되게 Text01Main 스크립트 수정28. 콘솔 창에서 Blue 버튼과 Red 버튼 이벤트 로그 확인
++**버튼을 배열로 만들어보자**
29. 다음과 같이 버튼을 배열로 선언 후, Init을 수정30. 콘솔 창에서 버튼 이벤트 확인
이때, Blue 버튼 또는 Red 버튼을 클릭하면 모두 2가 나온다. 왜 그럴까?
이유는...
이 문제는 일반적으로 클로저(Closure)라는 것 때문에 발생한다.
for loop에서 람다를 사용하여 이벤트 리스너를 추가할 때, 람다는 loop 변수 i를 캡쳐하는데
이때, i 변수는 for loop의 변수이므로 각 반복마다 새로운 값으로 업데이트된다.
그런데 람다 함수 내부에서 i를 참조하면, 모든 람다 함수가 동일한 i 변수를 참조하게 되어,
loop가 끝나는 시점의 i 값을 모두가 캡쳐하게 된다는 것이다.
그 결과, 모든 버튼이 마지막 값(btns.Length=2)을 참조하게 된다.
따라서 해결하기 위한 방법으로는
(1) loop안에 람다 함수가 캡쳐하게 될 다른 변수를 선언하는 방법 또는
(2) 람다 함수 부분을 별도의 메서드로 정의 하는 것이다.
31. (1) loop안에 람다 함수가 캡쳐하게 될 다른 변수(i) 를 선언하는 방법32. 콘솔 창에서 버튼 이벤트 확인32. (2) 람다 함수를 별도의 메서드로 정의33. 콘솔 창에서 버튼 이벤트 확인
