Starling 영역과 Stage영역의 터치 중복 문제 해결 방법

Starling에서는 MouseEvent가 아닌 TouchEvent를 사용합니다.

기존의 MouseEvent가 아니기 때문에 처음에 활용하기 낯설었지만 사용하다보니까

모바일에 최적화되어 있는 방식이라서 큰 어려움은 없었습니다.

하지만 한 가지 단점이

UI는 Stage에서 작업으로 하고 (기존의 Display List 영역)

Game은 Stage3D에서 구현하다 보니 발생하는 문제가 있더군요.

Display List에서 UI를 띄워서 클릭을 하는데

뒤에 있는 Stage3D 영역에서도 클릭이 발생을 하더군요.

그냥 단순하게 잡을 수 있을 줄 알았는데

의외로 쉽지 않았습니다.

그 이유는 다음과 같습니다.

 - 마냥 Display List 에서 stage에 마우스 이벤트 걸어놓고 stopPropogation() 해버리면 UI 에서 사용하는 마우스 이벤트들도 영향을 받는다.

 - TouchProcessor 클래스를 수정하기에는 리스크가 너무 크다.

그래서 수작업으로 다음과 같이 처리했습니다.

UI를 총괄하는 클래스가 있습니다.

보통은 Document Class가 되겠죠.

여기서 mouseDown과 mouseUp 두 이벤트를 처리해줍니다.

public function Game() {      addEventListener( MouseEvent.MOUSE_DOWN, downListener ); } private function downListener( $e: MouseEvent ): void {      Starling.touchable = false;            stage.addEventListener( MouseEvent.MOUSE_UP, upListener ); } private function upListener( $e: MouseEvent ): void {      Starling.touchable = true;            stage.removeEventListener( MouseEvent.MOUSE_UP, upListener ); }

즉, 마우스를 눌렀다 떼는 동안에는 Starling영역에서는 반응하지 않도록 하게 했습니다.

Starling에는 touchable 이라는 속성이 없습니다.

추가해줍시다. (open source의 장점 아니겠습니까? ㅋ)

public class Starling extends EventDispatcher {     /** The version of the Starling framework. */     public static const VERSION:String = "1.2";                static public var touchable: Boolean = true; ....

그리고 아래 onTouch 라는 메소드에 코드를 추가해줍니다.

private function onTouch(event:Event):void {     if (!mStarted) return;            if( touchable == false )           return;          ..... }

이렇게 수정하면

UI 부분에서 발생하는 클릭 이벤트에는 Starling에서 반응하지 않습니다.

또 이 방식의 장점은

mouseEnabled나 mouseChildren의 속성 또한 구분하여 동작한다는 겁니다.

여러가지 방법을 시도했지만 이 방법이 가장 만족스러운 결과를 보여주네요^^

For the better.