OceanCleaner 21.08.16. 개발일지 - 미리보기 이미지 키우기

간만에 작업을 진행하는것 같다 :D

사실 그동안 이 전에 했던 Cursed Treasure를 포트폴리오화 시키며 버그나는 부분을 수정한 뒤 영상을 편집하다보니 시간이 오래걸렸다. (대략 1주일정도 ㅠㅠ)

 

 

상점에서 배들을 구입할 때 이미지가 너무 작다는 피드백이 들어와 해당 이미지를 키워달라는 요청이 있었다.

따라서 이미지를 키우는 작업을 했는데 처음에는 Sprite의 픽셀을 크게 만들어주는 방법을 검색했다

 

▲이런식으로 Texture를 Sprite로 만들어진 상태

• 이미 진행된 프로젝트에서 중간에 편입한 내게는 구조만 파악하기에도 꽤나 버거운 상황이므로 스프라이트의 픽셀을 바꾸는 방식을 찾아봤지만 아무래도 Texture자체의 크기가 바뀌지 않는 이상 당연하게도 Sprite의 크기는 바뀌지 않았다.
• 따라서 Image의 Width와 Height 또는 Scale을 변경하는 방식으로 진행했다.
• 내가 생각하기엔 Image의 RectTransform.sizeDelta를 통해 크기를 조절하는 방법과 Scale을 조절하는 방법 두가지가 존재했는데 나는 Scale을 조절하는 방법을 통해서 구현했다.

switch (Convert.ToInt32(itemData.index))
        {
            case (5001):
                {                    
                    this.itemIcon.transform.localScale = new Vector3(1.5f, 1.5f, 1.5f);
                    this.itemIcon.transform.localPosition = new Vector3(0, 220, 0);
                }
                break;
            case (5002):
                {
                    this.itemIcon.transform.localScale = new Vector3(1.6f, 1.6f, 1.6f);
                    this.itemIcon.transform.localPosition = new Vector3(0, 185, 0);
                }
                break;
            case (5003):
                {
                    this.itemIcon.transform.localScale = new Vector3(1.8f, 1.8f, 1.8f);
                    this.itemIcon.transform.localPosition = new Vector3(0, 190, 0);
                }
                break;
            case (5004):
                {
                    this.itemIcon.transform.localScale = new Vector3(1.5f, 1.5f, 1.5f);
                    this.itemIcon.transform.localPosition = new Vector3(0, 225, 0);
                }
                break;
        }

위와 같이 구현했으며 switch로 나눈 이유는 아래 사진을 통해 설명하겠다.

 

 

▲정렬된 모습

switch문으로 각각의 스케일과 위치를 지정해주지 않는 경우, 멜팅어스와 통통배는 글씨를 가릴정도로 커지고 하단으로 내려왔으며 일리오스는 너무 작게 보였다.

따라서 각각의 알맞은 스케일배수와 포지션을 지정해줌으로써 적절한 위치를 할당해주었다.

 

 

---

그리고 스크롤의 드래그 영역을 넓혔다.

 

 

▲투명한 이미지를 배경에 깔아둬서 티가 나지 않는다

• 기존에는 배와 구매버튼을 드래그해야 스크롤이 좌우로 가능했는데 이를 Content Size Filter의 설정값과 Image를 추가함으로써 간단하게 영역을 넓혀주었다.

 

 

• 기존에는 Horizontal Fit만 Preferred Size로 되어있었는데, 이를 Vertical또한 알맞은 크기로 자동조정되게 하여 드래그하기 충분한 면적을 확보하였고
• Image를 추가하여 Raycast가 가능하게 하였다.
  • Image는 알파값을 0으로 설정하여 투명하게 했다.

 

 

• 그리고 Image를 깔아도 괜찮은 이유가 contents의 Hierachy레이어보다 아이템들의 레이어가 높기때문에 contents의 이미지는 자연스럽게 배경으로 깔리게된다.