[Trouble_Case] 2. Unity - 채팅 UI 말풍선 크기 간섭 해결

- Trouble Case 

-> 담당하고 있는 채팅 UI 에서 문제가 발생했다.

-> 메모리 이득 때문에 SuperScroll 을 사용하고 있는데, Slot의 크기에 따른 정렬이 원활히 되지 않는다는 점이다.

 

말풍선 제작에 참고한 블로그

https://euliciel.tistory.com/3

[Unity] UGUI로 말풍선 만들기

 

많은 사람들이 말풍선 제작할 때, 참고하는 블로그다.

좋은 자료이긴하지만, Superscroll 을 쓸때, 여러가지 제한점이 존재하는것 같다.

LayOut Group Component 를 사용하면 Flickkering 마냥 Position이 떨린다던가.... 

 

내가 다룬 UI 는 Prefab은 다음과 같다.

 

ChattingSlot

ㄴ Panel (image)

    ㄴ Text

 

이런 구조를 가지고 있고, Panel의 Component는 RectTransform, Contents SizeFitter 가 있다.

Contents Size Fitter 는 x,y에 관해 Child Preffered Size? 로 설정해서, 자식의 크기에 따라 변화할 수 있도록 설정했고, Horizontal LayOutGroup 의 속성으로 Padding : Left, Right, Top, Bottom 10 , Top middle 로 sort 한 것 같다.

 

Panel 내부에 어차피 Text 하나 들어갈거라 Horizontal , Vertical 제약에는 딱히 신경쓰지 않았다. 어차피 하나니까 vertical layout group 도 문제 없겠지..

 

대강 현상은 아래와 같다.

[유니티 문제로 추가예정]

 

약 2가지 해결방법을 생각해보았는데, 

1. ChattingSlot 에 Contents Size Fitter 부착, Contents Size 크기로 수정.

-> Contents Size 와 Position 떨림으로 실패

2. Text Component 를 ChattingSlot으로 이동해서 Panel Image가 ChattingSlot의 크기대로 움직이도록 수정

-> Contents Size 와 Padding 간격 이상이 발생.

3. LoopListView 를 LoopStarggedList로 변경

-> Super Scroll Document를 번역하면서 Custom으로 해도 별 변화가 안보여서 다시 Revert 했다.

4. 코드로 크기 수정 & 피벗 수정

-> 피벗 수정 이전에 채팅을 수행했더니, Left Top이 아닌 Top Centor 에 들어가고 있어서, Top Centor 위치 피벗을 Left Top 로 수정했다. 

일단, 위치는 잡혔다. ChattingSlot의 크기를 잡아주기 위해 다음과 같이 처리했다.

 

Vector2 v2 = new Vector2(Text.PrefferedWidth,Text.PrefferedHeight);

Vector2 ImagePadding = new Vector2(Panel.SizeDelta);

ImagePadding += v2;

 

ChattingSlot.GetComponent<RectTransform>().SizeDelta = ImagePadding;

 

생각하자면 이런느낌이다.

1. 텍스트의 사이즈를 가져온다.

2. Panel Image 크기를 자연스럽게 맞추기 위해 Text 보다 x + 10 , y + 10 만큼의 크기 확장한것을 생각해 더해준다.

(이렇게 안하면, 텍스트 크기가 말풍선보다 커서 안이쁘다.)

3. 1번 + 2번해서 3번에 크기를 맞춰준다면 SuperScroll 이 RefreshShown 하면서 잡아줄 것을 기대했다.

 

결과는 뭔가 이상했다. 

잘되다가도 다른탭 넘어오거나, 채팅을 연타했을때 문제가 발생했다. 클라채팅 금지로직이 있지만, 이거랑은 별개의 문제다.

이유를 찾기위해 Debugging을 했다.

간헐적으로 ImagePaddind 의 크기가 10,10 이아니라 0,0이 들어와서 SuperScroll에서 수행하는 정렬로직이 찌그러져보인것이다.

 

ImagePadding Size는 따로 바꿀일이 없어서 ImagePadding 을 변동성 심한 SizeDelta로 넣기보단, 하드하게 vector2(10f,10f)으로 넣었더니 모든것이 완벽해졌다.

 

알아야할 키워드는 Text의 PrefferedSize와 SizeDelta 였다.

이 두가지만 알았어도 진즉 끝냈을 일을..

 

사진은 지금 용량이없어서 추가 못한다.. 추후 추가예정...