이미지맵
 |
 |
이미지맵이란 따로 버튼이나 바를 추가하지 않고 그림의 일부를 버튼이나 바처럼 만들 수 있는 GUI입니다. 지도를 이용한 이동 시스템이나, 범죄 현장을 뒤지는 변호사 게임을 만들고 싶다면, add 로 바탕 그림을 추가하고 버튼을 일일히 넣는 대신 이미지맵을 이용합시다.
이미지맵은 스크린 블록에서 imagemap 명령문으로 만듭니다. 이미지맵에는 많은 속성을 입력해야 하니 되도록 블럭형태로 만들어서 사용합시다.
ground 와 hover
이미지맵을 만들 때 필요한 그림은 최소 2장입니다.
위 그림은 렌파이 튜토리얼 게임에 있는 이미지맵 예제입니다. 이 그림을 보는 순간 한가지 정보를 알 수 있습니다. 바로 저 노란색으로 나타난 아이콘이 지금 플레이어가 선택한, 정확히는 마우스를 올려놓은 아이콘이라는 사실입니다.
최소 2장이 필요한 이유가 바로 이것입니다. 사용자가 마우스를 올려놓지 않았을 때에 사용할 이미지와, 사용자가 어떤 곳에 마우스를 올려놨는지를 구분하기 위한 이미지, 이렇게 두 장을 이미지맵에서는 사용해야 하기 때문입니다.
ground |
hover |
이 때 기본이 되는 그림파일의 이름은 imagemap 명령문의 ground 속성에 적어야 하고, 마우스가 올라갔을 때 나타낼 그림은 hover 속성에 적어야합니다1. 위 그림파일이름이 각각 imagemap_ground.png 와 imagemap_hover.png 라고 했을 때, 이미지맵을 만들기 위한 스크립트는 다음과 같이 적을 수 있습니다.
auto
혹은 auto속성을 이용할 수도 있습니다.auto 속성으로 이미지를 지정하면 렌파이는 이미지맵을 만들 때 필요한 파일을 자동으로 검색해서 이미지맵에 사용합니다. 예로 들어 설명하자면, auto 에 "imagemap_%s.png" 라고 적고, ground 와 idle 속성에 파일 이름을 입력하지 않으면 ground 속성에는 "imagemap_ground.png" 를, hover 속성에는 "imagemap_hover.png"를 자동으로 입력해서 써먹게 됩니다. 즉 %s 에 각 속성의 이름을 자동으로 대입하게 됩니다. 그러므로 auto 속성을 이용할 때는 %s를 반드시 써야 합니다.
hotspot
어쨌든 지금은 써먹을 그림만 정했을 뿐이므로 이 이미지맵은 제대로 작동하지 않습니다. 따라서 마우스에 반응할 영역을 지정해야 합니다.
우선 마우스에 반응할 영역의 원점 좌표(x,y)를 알아야 합니다. 그 후 원점에서 가로, 세로(w, h)로 몇 픽셀 떨어진 곳까지의 영역을 반응영역으로 지정할 것인지 적어주면 됩니다.
노란선으로 표시한 곳을 원점으로 삼으려고 한다고 했을 때, x, y, w, h 값은 개발자메뉴2의 Image Location Picker 로 알아낼 수 있습니다.
먼저 shift+d 로 개발자 메뉴를 불러오고, Image Location Picker 를 선택
이미지맵에 쓸 그림을 선택
그리고 원점을 찾아서 마우스를 갖다대면 x,y값을 알아낼 수 있습니다. 값은 화면 왼쪽 아래에 적혀있습니다. (스샷에는 안 나와있는데 마우스 포인터를 go home 버튼의 좌측상단 모서리에 놓은 상태입니다.
원점이 될 곳을 클릭하고 반응영역으로 만들 곳만큼 드래그를 하면 사각형이 생깁니다. 이후에는 화면 왼쪽 아래의 rectangle 값이 생기는데, 여기 적힌 튜플이 바로 우리가 찾는 값이 됩니다.
이렇게 알아낸 정보를 imagemap 명령문의 hotspot 속성에 튜플로 적어주면 됩니다.
Image Location Picker 로 다른 영역에 해당하는 값도 알아내서 hotspot으로 추가합시다.
이제는 이 영역이 선택되었을 때 작동할 액션을 action 속성에 적어주면 됩니다. 사용법은 버튼의 action 속성과 같습니다.
그리고 레이블 블럭에서 call screen 문으로 이미지맵이 있는 스크린을 호출해서 이용하면 됩니다.
이 글에 적은 내용은 이미지맵의 기본 기능뿐입니다. 이미지맵에는 hotbar 로 바를 넣을 수도 있고, 좀 더 세부적인 상황에 적용할 이미지를 지정할 수도 있습니다. 그러나 ground/hover/hotspot 정도만으로도 일반 비주얼 노벨/텍스트 어드벤처/육성 시뮬레이션 게임을 만드는데는 충분할 것입니다. 더 자세한 내용이 필요하시다면 매뉴얼을 참조하시면 됩니다.
