SpriteGUI

SpriteGui는 KakaoMapsSDK에서 제공하는 GUI의 한 종류로서, 화면 좌표상의 특정 지점에 그려지고 카메라가 바라보는 각도에 상관없이 항상 일정하게 그려지는 특성을 가집니다. 따라서 SpriteGui를 이용하여 지도 화면상의 임의의 위치에 원하는 정보를 표시해서 사용자에게 필요한 부가 정보를 표시하거나, 추가 액션을 위한 버튼을 제공할 수 있습니다.

예를들어, 아래 스크린샷과 같이 지도 화면상에 임의의 버튼을 띄워서 사용자에게 특정 액션을 제공할 수 있습니다.

SpriteGui Properties

SpriteGui는 크게 두가지 분류의 property로 구성됩니다. SpriteGui 자체의 Proeprty와 SpriteGui를 구성하는 GuiLayout의 Property으로 분류됩니다.

SpriteGui에 대한 property는 아래와 같습니다. 이 속성중 get only property를 제외하고는 공통적으로 SpriteGui를 추가하고 지도 위에 표시한뒤에도 해당 속성값을 업데이트하면 별도의 updateGui() 호출 없이도 자동으로 업데이트됩니다.

origin과 position

SpriteGui가 표시될 위치는 origin과 position값으로 조절할 수 있습니다. origin은 아래와 같이 9가지로 설정할 수 있습니다.

vertical 방향으로 3가지, horizontal 방향으로 3가지로 총 9가지 조합이 존재하며 spriteGui의 origin을 설정함으로써 기본적인 SpriteGui의 위치를 지정할 수 있습니다. 위 스크린샷의 경우, Button으로 구성된 SpriteGui는 (bottom, right)로 origin이 설정되었습니다.

또한 position값을 조절하여 origin으로부터의 위치를 조절할 수 있습니다. 단, origin 위치에 따라 position의 x,y 증감 축이 다르므로 유의하셔야 합니다. 각 원점별로 증감 축은 위 스크린샷을 참조하시기 바랍니다.

SpriteGui의 main Layout

SpriteGui는 기본으로 GuiLayout 한 개를 가지고 있습니다. SpriteGui의 addChild 함수를 호출하게 되면 이 mainLayout에 child를 추가하게 됩니다. SpriteGui의 mainLayout property를 통해 mainLayout의 arrangement(배치방향)등의 layout property를 설정할 수 있습니다.

SpriteGui의 getChild함수는 이 mainLayout에 속하는 children component중에서 특정 component를 가져올 수 있습니다. 또한 SpriteGui를 생성하고 난 뒤에, getChild로 특정 컴포넌트를 가져오고나서 컴포넌트를 update할 수 있습니다. 아래 예제 코드는 SpriteGui의 버튼 클릭시 발생하는 guiDidTapped 이벤트를 구현하여 SpriteGui의 GuiText 컴포넌트를 업데이트하는 예제입니다.

    // GuiEventDelegate - GuiButton이 클릭되면 발생한다.
    func guiDidTapped(_ gui: GuiBase, componentName: String) {
        NSLog("Gui: \(gui.name), Component: \(componentName) tapped")
        
         // GuiButton을 포함하는 SpriteGui에서 특정 아이디의 GuiText Component를 가져온다.
        let guitext = gui.getChild("text") as? GuiText
        
         // 컴포넌트의 텍스트 값을 변경한다.
        guitext?.updateText(index: 0, text: "Pressed")
        
        // update를 호출하면 변경사항이 반영된다.
        gui.updateGui()
    }

SpriteGui Controls

SpriteGui는 View객체에 있는 GuiManager를 통해서 추가가 가능합니다. SpriteGui객체를 생성하고 GuiManager의 addGui()를 통해 추가를 해야 지도 위에 SpriteGui가 표시됩니다. addGui를 호출하지 않고 SpriteGui 의 show를 호출할경우 지도 위에 표시되지 않습니다. 즉, 지도에 먼저 SpriteGui를 추가하고 난 후에 SpriteGui를 조작하는 function을 사용할 수 있습니다.

아래 예제는 GuiManager를 통해 SpriteGui를 추가하는 예제입니다.

    func createSpriteGUI() {
        let mapView = mapController?.getView("mapview") as! KakaoMap
        let guiManager = mapView.getGuiManager()
        let spriteGui = SpriteGui("testSprite") //SpriteGui를 만듬. SpriteGui는 화면좌표상의 특정지점에 고정되는 GUI이다. 구성방법은 InfoWindow와 동일하다.
        
        // spriteGui mainLayout property 변경
        spriteGui.arrangement = .horizontal // 배치 방향
        spriteGui.bgColor = UIColor.clear // 배경 색깔
        spriteGui.splitLineColor = UIColor.white //구분선 컬러
        
        // spriteGui property 
        spriteGui.origin = GuiAlignment(vAlign: .top, hAlign: .center
        ) //화면의 우하단으로 배치
        spriteGui.position = GuiOffset(x: 80, y: 200)
        
        let button1 = GuiButton("button1")
        button1.image = UIImage(named: "track_location_btn.png")
        
        let button2 = GuiButton("button2")
        button2.image = UIImage(named: "tile.png")
        
        spriteGui.addChild(button1)
        spriteGui.addChild(button2)
        
         // 아래의 guiManager를 통해 addGui를 하고난 이후에 SpriteGui의 show()/hide() 함수들이 동작한다.
         // 추가하기 전에는 show()를 호출해도 아무것도 표시되지 않는다.
        let _ = guiManager.addGui(spriteGui)
        spriteGui.delegate = self
        spriteGui.show()
    }