캔버스에 이미지 스프라이트를 띄워 드래그하다보면, 스프라이트끼리 겹치기도 하죠. 이 경우 스프라이트가 가려지거나 서로 달라붙어버리는 현상이 발생합니다. 이렇게 말이죠. 캔버스 배경에 강아지 사진을 띄워두고, 이미지 스프라이트를 이용해 하트, 별, 잔디 스티커로 강아지 사진을 꾸며보려했는데, 이게 뭔일인가요.
이를 sprite cannibalism 현상이라고 부릅니다. 해석하면 스프라이트 동족끼리 잡아먹는 현상 정도가 되겠네요. 어감이 좀 무시무시하죠? ㅎㅎ 이 현상을 해결하지 않으면 사진꾸미기, 게임제작 등 여러가지 캔버스 사용 작업 시에 문제가 발생합니다. 하지만 걱정마세요. 이 문제도 간단한 코드추가로 해결할 수 있습니다.
해결방법
1. 디자이너화면 설정
일단 그림이 없는 숨김용 이미지 스프라이트 하나를 만들어줍니다. 그 다음 visible 체크를 해제하여 실제로 캔버스에서는 보이지 않게 해주세요.
2. 블록화면에서 코딩
코드를 아래와 같이 작성해주세요.
우선 현재터치라는 변수를 하나 만들어요. 이 변수는 사용자가 바로 현재 어떤 스프라이트를 터치하고 있는 지를 담게 됩니다.
그 다음 어떤 스프라이트든지 터치를 하는 순간 (Touch Down) 터치한 그 스프라이트(component)가 현재 터치가 되도록 코딩합니다. 터치하고 있는 스프라이트에만 집중되게 만드는 거죠.
손을 핸드폰에서 떼는 순간(Touch Up) 그 포커스는 우리가 실제 사용하지 않는 숨김 스프라이트로 가게 돼요.
드래그는 터치다운을 해야 이루어지는 것이기 때문에, 드래그(Dragged)를 하게 되면 터치하고 있는 그 스프라이트를 자유롭게 이동할 수 있어요. 다른 스프라이트의 간섭을 받지 않지요.
3. 결과 확인
어때요? 생각보다 간단한 작업이죠?
사진에 스티커를 붙이는 앱도, 이러한 코딩을 넣어줘야 사용자가 더욱 편리하게 사용할 수 있을 거에요. 이제 스프라이트끼리 겹치는 걱정없이 다양한 앱들을 만들어보세요.
혹시 궁금한 점이 있으시면, 댓글 남겨주세요. 제가 아는 것들은 최대한 답변 달아드릴게요. 이번 시간도 수고하셨습니다.
댓글