[Unity] 유니티 마스크 관련

 

 

=================================

=================================

=================================

 

 

 

안녕하세요.  

 

UGUI를 이용해 마스킹 에 관해 작업해 보고 있습니다.

 

그런대 제가 생각하는 마스킹이 제대로 작동을 안해서 질문드립니다.

 

 

그림을 보시면 백그라운드는 이미지 패널로 백그라운드 이미지가 설정되어 있습니다.

 

왼쪽에 패널은 Hierarchy 뷰에서 백그라운드 자식으로 되어 있습니다.

 

마찬가지로 버튼은 Hierarchy뷰에서 패널의 자식으로 되어 있습니다.

 

구조는 이렇게 됩니다.

 

백그라운드

     └ 패널

           └ 버튼

 

문제는 제가 위의 버튼을 왼쪽 또는 오른쪽으로 움직일때 패널 안에서 벗어나면 표시를 안해주기 위해 패널에 Mask 컴포넌트를 부착했습니다.

 

하지만 버튼이 패널을 벗어나도 백그라운드에 버젓이 표시 되네요.

 

고수님들의 조언을 부탁드립니다.

-----------------------------------------------------------------------------------------------------------------------------------------------------

왼쪽에 패널이라고 써주신 버튼보다 조금 큰 네모의 영역에서 벗어나면 버튼이 안보이게 하시고 싶으신거라 이해하고 말씀드려보겠습니다. 

마스크라는 기능보다는 클리핑기능을 이용하시면 어떨까 싶습니다.

 

자바헬  2015.03.16 11:08  

답변 신고

맞습니다. 정확하세요. 

마스크가 왜 동작안하는지는 천천히 찾아봐야겠네요 

혹시 실례가 안된다면 클리핑 기능에 대해 여쭈어 봐도 될까요?

 

 

DevMachine  2015.03.16 11:13  

답변 신고

단어뜻 그대로 클리핑입니다. UI패널에 보시면 클리핑이라고 있습니다. 
하드/소프트/알파? 하튼 몇종류있습니다. 
하드클리핑은 클리핑영역에서 딱 끊으내는겁니다. 짤리듯이요.. 
소프트 클리핑은 클리핑영역 가장자리에 검은색으로 그라데이션을 깔아줍니다. 
알파틑 소프트클리핑과 같지만 검은색대신 알파그라데이션을 넣어주고요.. 

패널과는 별개로 영역을 지정할수있습니다. 패널은 말그대로 패널이고 패널자체에 대한 영역은 지정되지 않으니 패널안에서 이미지를 짤라내고자 할때에는 클리핑을 쓰시면 될듯합니다. 

도움이 되셨기를..ㅎㅎ

 

 

자바헬  2015.03.16 11:18  

답변 신고

죄송합니다. 제가 UI패널의 클리핑이라는 부분을 아직 못찾아서 그러는대 인스펙터인지 상단 툴바인지 아니면 컴포넌트인지 어디에 표시되는지 알려주시면 감사하겠습니다. 

UGUI를 사용하고 있습니다.

 

 

DevMachine  2015.03.16 11:20  

답변 신고

UI Panel 컴포넌트 인스펙터에 있습니다. 

클리핑은 UI패널에 포함된 기능입니다.

 

 

자바헬  2015.03.16 11:26  

답변 신고

확인해 봤는대 NGUI에는 있지만 UGUI는 없는듯 하군요. 

인스펙터창에 NGUI는 딱 표시되지만 UGUI는 없네요 ㅠ 

두개를 동시에 쓸수가 있나 ㄷㄷ

 

 

DevMachine  2015.03.16 11:30  

답변 신고

아...죄송합니다. UGUI였네요...헛대답만 해드려 죄송합니다.ㅠㅠ

 

 

DevMachine  2015.03.16 11:36  

답변 신고

http://blog.naver.com/nameisljk/220256283063 

이 게시물 한번 참조해보시겠어요?

 

 

자바헬  2015.03.16 11:45  

신고

아 안그래도 해본건대 답변감사드립니다. 

저도 방금 찾아낸건대 이게 답이없네요... 

근대 문제가 생긴게 패널의 백그라운드가 알파가 되어야 하는대 알파먹이면 뭔짓을 해도 차일드 컴포넌트까지 전부 알파처리되버리네요 ㅎㅎ 

안보여버리니 후

 

 

=================================

=================================

=================================

 

 

 

출처: https://freezer09.tistory.com/4

 

 

유니티에서 간단하게 UI 이미지를 위와같이 마스크하는 방법을 소개합니다.

위 이미지같은 경우에는 원래는 바탕화면 크기의 원본이미지를, X마크 모양으로 출력하게 한 결과입니다.

(MASK란? 타겟이미지를 원하는 모양대로 일부를 잘라서 출력하는 방식)

 

 

 

 

반응형

 

728x90

 

 

 

 

마스크를 이용하면 이미지를 모양마다 매번 새로 만들어서 저장할 필요가 없습니다!

따라서 에셋 관리 및 데이터 관리에도 유용하고, 디자이너가 작업할때도 좀 더 편리하게 작업할 수 있습니다.

 

(▼ 같은 이미지를 마스크 이미지만 변경하면 총모양으로도 뽑을 수 있습니다.)

 

방식은 정말 간단합니다! 

 

1. 우선 마스크할 모양의 이미지를 추가합니다.

GameObject -> UI -> Image 추가

보기 편하게 하기 위해 마스크하는 이미지를의 이름을 Image(Mask)라고 수정했습니다. 

 

 

 

2. 그럼 Image의 Source Image의 경로를, 마스크 할 이미지로 정해줍니다.

우리는 총모양으로 이미지를 뽑을 거니까, 총모양을 선택할게요.

 

 

그러면 이렇게 원본 이미지인 총 모양이 나오는 걸 확인할 수 있습니다.

 

3. 이제 방금 만든 Image하단에 새 Image를 추가합니다.

이번에도 보기 편하게 이름을 Mask Target이라고 변경했어요.

 

 

4. 이전에 했던 것 처럼, 방금 만든 Image의 Source Image를 정해줍니다.

(이 이미지는 마스크가 될 대상, 원하는 모양으로 나오게 할 타겟 이미지 입니다.)

저는 방공호 배경의 그림으로 정했는데요. 

아직 마스킹 처리를 하지 않았기 때문에 원본 모양인 사각형의 모양으로 출력됩니다.

 

 

5. 이제 마스킹 처리를 해볼건데요.

가장 처음 만든 Image를 클릭하여 Mask 컴포넌트를 추가합니다.

 

 

6. 그럼 아래와 같이 원본 이미지가 총 모양으로 마스킹된 것을 확인할 수 있습니다.

 

7. 유니티의 Mask 컴포넌트를 이용해 이미지를 마스크하는 방법이었습니다.

마지막은 하이라키 구조입니다.

 

 

 

Image(Mask) - 마스크 시킬 이미지 (이미지의 모양틀!)

Image(MaskTarget) - 마스크가 될 대상 이미지 (원본 이미지)

 

* Mask 컴포넌트의 Show Mask Graphic은 마스크 이미지를 보여지게 하는 기능입니다.

필요에 따라 끄고 켜면 됩니다.

(Ex 크기가 타겟 이미지 보다 클 경우 등)

 

 

 

=================================

=================================

=================================

 

 

 

 

기타관련링크:

- https://docs.unity3d.com/kr/current/Manual/script-Mask.html

 

- https://newstory-of-dev.tistory.com/entry/Unity-UI%EA%B8%B0%EC%B4%88-%EB%A7%88%EC%8A%A4%ED%81%AC

 

- https://mrbinggrae.tistory.com/90

 

 

 

=================================

=================================

=================================