얼마 전 용호님이 뭔가 물어보셨습니다. 그 때 깨달았던 점이 OS수준의 이벤트를 수신할 수 없는 플래시에서는 입력관련 최적화도 상당히 중요하고 또한 이에 대한 토론이 별로 되어있지 않다는 점이었습니다.

저야 게임을 많이 만들다 보니 플래시 내에서 키보드, 마우스에 대한 최적화를 항상 고민하는 편입니다. 그에 관해 간략히 몇 가지 포인트만 살펴보고 나중에 입출력 클래스를 공개하도록 하죠.

마우스

마우스 이벤트에 대해서는 아주 깊이 이해할 필요가 있습니다(사실 플레이어가 일으키는 이벤트는 개별적으로 다 깊이 이해할 필요가 있습니다)

1. 마우스의 액션은 플래시플레이어가 수신하여 swf 바이트코드에게 직접 dispatch해준다.
2. 이 때 dispatch할 대상에 대한 자동적이 조건이 있다.
3. 먼저 interactiveObject 인 녀석들 중
4. Stage나 그 하위 트리 중 어딘가에 등록되어 있어야 하며,
5. mouseEnabled 속성이 true여야 한다.

이러한 조건이 충족되면 AVM2는 OS에게 수신한 마우스 이벤트를 해당 객체들에게 dispatch합니다. 따라서 우리 눈에 안보이지만 아래와 같은 코드가 이미 클래스에 내장되어있다고 볼 수 있습니다.

class InteractiveObject extends DisplayObject{

	public function InteractiveObject(){
		addEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );
	}

	private function ADD_TO_STAGE( $e:Event ):void{
		removeEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );
		//AVM2를 직접 호출할 수 있다고 가정한다면
		//내부적으로 stage에 등록된 순간 자신의 mouseEnabled값으로 판단하여
		//마우스이벤트를 AVM2에 등록한다.
		if( mouseEnabled ){
			AVM2.addEventListener( MouseEvent.CLICK, bridge );
			AVM2.addEventListener( MouseEvent.MOUSE_DOWN, bridge );
			…//마우스이벤트 전부
		}
	}

	private function bridge( $e:MouseEvent ):void{
		//마우스이벤트를 AVM2로부터 수신하여 이를 자신의 리스너에게 다시 dispatch한다.
		dispatchEvent( new MouseEvent( $e.event ) );
		//물론 마우스 이벤트를 이렇게 할 수는 없다. AVM2가 내부적으로 한다고 가정하자.
	}

즉 조건이 갖춰지면 AVM2는 마우스 이벤트가 생길 때마다 dispatch를 하고 있고 그걸 다시 개별 객체들은 자신의 리스너에게 dispatch하고 있는 셈이죠. 사실 이를 상속한 DisplayObjectContainer의 속성 중 mouseChildren 속성이 있다는 사실을 고려하면 더욱 심각한 상황이 됩니다.

class DisplayObjectContainer extends InteractiveObject{

	public function DisplayObjectContainer(){
		addEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );
	}

	private function ADD_TO_STAGE( $e:Event ):void{
		//상동
	}

	private function bridge( $e:MouseEvent ):void{
		dispatchEvent( new MouseEvent( $e.event ) );
		//자식들에게도 전파한다.
		if( mouseChildren ){
			for( var i = 0, j = numChildren ; i<j ; ++i ){
				if( getChildAt(i) is InteractiveObject){
					//마우스이벤트를 전파
				}
			}
		}
	}

위의 브릿지에서 할 일을 addChild시에 addEventListener했던 bridge에서 했던 별로 상관없습니다(짜피 추측된 코드 ^^) 암튼 논리적으로 볼 때, 저런 일은 어딘가엔 반드시 삽입되어있습니다.
이 추측된 구조로부터 몇 가지 최적화 포인트를 찾아낼 수 있습니다.

1. 먼저 AVM2가 dispatch할 대상을 줄여 줘야합니다. 이는 꼼꼼히 Sprite등을 생성하실 때, 마우스 이벤트와 관련 없는 경우 mouseEnabled를 false로 해주시면 달성할 수 있습니다. 원리는 당연한 거 아닌가요 ^^; AVM2가 마우스이벤트를 통보할 대상이 없을 수록 부하는 적어지는 거죠.
2. mouseChildren 속성을 생각해보면 AVM2는 stage에게만 마우스 이벤트를 통지하고 stage가 자기자식들에게, 그 자식들이 또 자식들에게 전파하는 구조일 가능성이 높습니다. 따라서 전파의 싹을 막아버리는게 상책입니다. stage.mouseChildren = false는 가혹하지만 트리상 상위에서 막을 수록 전파를 크게 막을 수 있습니다.
3. 어쨌든 어떤 객체가 마우스 이벤트를 받았는데 더이상의 전파가 필요없다면 습관을 e.stopPropagation() 해주도록 들이는 좋습니다. 원래 dispatch의 연쇄는 정말 끝장입니다. 커스텀이벤트 구현해서 dispatch연쇄를 네다섯번만 하시고 getTimer()로 측정해보세요. 같은일을 걍 루프돌리거나 직접 호출 때와 비교하시면 끔찍합니다.
4. AVM2가 마우스이벤트를 어느 정도 주기로 dispatch하는지를 인지한다. – 이게 바로 아래서 설명할 내용입니다.

AVM2는 얼마나 자주 마우스 이벤트를 dispatch할까요?

마우스를 클릭하면 즉시 반응한다고요? 혹은 마우스를 움직이면 즉시 반응한다고요? – 거짓말이시겠죠 ^^;

제가 테스트해본 바로는 기계에 따라 차이는 있지만 5~20ms 정도의 딜레이를 두고 dispatch를 합니다. 마우스move이벤트에 setPixel같은걸로 테스트해보시면 마우스의 궤적에 따라 선이 그려지는게 아니라 끊어지는걸 보실 수 있습니다. 그것 자체가 마우스 이벤트가 모두 전달되는게 아니라 적당히 띄엄띄엄 보내준다는 증거죠. click이나 up은 상대적으로 빠른 편입니다. 연속이벤트가 아니라 이벤트가 발생하자마자 통지하기 때문에 대부분 5ms 이하였습니다(사실 이 정도 반응속도로는 너무 느리기 때문에 directInput 기반의 fps 손맛은 전혀 안나죠. 화면 fps를 떠나서..)

여하튼 이 한계 내에서 가장 최적화를 해야하는 이벤트는 바로 mouseMove입니다. 이 이벤트는 어디에 쓰냐면 주로 drag에 사용합니다. drag를 쓸 일이 있냐구요? 수많은 똑똑하신 ux강사분들이 악의 ui라고 깍아내리는 drag…

하지만 구글맵이 불편하던가요. 지오메트리 기반은 drag를 엄청 씁니다. 수많은 타이쿤류 게임, FPS과 전략시뮬레이션과 용호님네 스타플도 드래그를 무지하게 씁니다. 어디 그 뿐인가요. 모든 그리기 프로그램도 사실 드래그입니다. 결국 드래그는 마구 씁니다 ^^;

드래그를 구현하는 방법은 여러 가지가 있지만, 많은 분들이 사용하시는 방법은 down에 move이벤트를 걸고, up에 이벤트를 해지하는 것입니다. 이 방법은 절대 사용하면 안되는 방법이기도 합니다.

일단 move이벤트에 반응하여 뭔가 화면갱신이나 작업처리를 하게 되면 모든 시스템의 처리속도가 AVM2가 move이벤트를 통보하는 주기인 25ms이상으로 느려지게 됩니다. 갑자기 애니메이션은 뚝뚝 끊기고 여러 가지 처리도 느림보가 됩니다. move이벤트가 frameRate와 무관한 속도로 일어난다는 점을 꼭 기억하세요.

이미 이걸 이해하시는 순간 move이벤트에 반응하는 식으로 프로그래밍을 하면 안된다는 점을 이해할 수 있습니다.

그럼 대안은 무엇이냐면 up, down, enterFrame으로 이벤트를 구성하고 enterFrame에서 DisplayObject의 mouseX, mouseY를 이용하는 것이죠. 이 부분은 설명보다 move를 이용해서 구현한걸 enterFrame으로 변환하는 과정을 소스로 살펴보죠.

// up,down,move로 구성한 경우

class test1 extends Sprite{

	public test1(){
		addEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );
	}

	private function ADD_TO_STAGE( $e:Event ):void{
		removeEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );

		addEventListener( MouseEvent.MOUSE_DOWN, function( $e:* ):void{ addEventListener( MouseEvent.MOUSE_MOVE, MOUSE_MOVE ); } );
		addEventListener( MouseEvent.MOUSE_UP, function( $e:* ):void{ removeEventListener( MouseEvent.MOUSE_MOVE, MOUSE_MOVE ); } );
	}

	private function MOUSE_MOVE( $e:MouseEvent ):void{
		trace($e.stageX, $e.stageY);
	}

}

// up,down,enterframe, mouseX, mouseY로 구성한 경우

class test2 extends Sprite{

	public test2(){
		addEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );
	}

	private function ADD_TO_STAGE( $e:Event ):void{
		removeEventListener( Event.ADD_TO_STAGE, ADD_TO_STAGE );

		_isDown = false;

		addEventListener( MouseEvent.MOUSE_DOWN, function( $e:* ):void{ addEventListener( Event.ENTER_FRAME, ENTER_FRAME ); } );
		addEventListener( MouseEvent.MOUSE_UP, function( $e:* ):void{ removeEventListener( Event.ENTER_FRAME, ENTER_FRAME); } );

	}

	private function ENTER_FRAME( $e:Event ):void{
		trace(mouseX, mouseY);
	}

}

이렇게 소스를 바꾸면 뭐가 달라지는 걸까요? 실제로 mouseX와 mouseY의 값이 갱신되는 속도는 move이벤트와 일치합니다. 하지만 알고리즘 처리는 EnterFrame수준으로 빨라지죠. 즉 마우스의 갱신이 비동기적으로 이루어지게 된다는 겁니다. 마우스move는 절대로 비동기화 해야하는 엄청 느린 AVM2이벤트입니다 ^^;

와..길다. 키보드는 다음에 하겠습니다. ^^;