The 3DMax to create and apply to the animated a .DAE file.

요번에는 애니메이션이 되는 .dae 파일을 생성해서 아래와 같은 효과를 낼 것이다.
(3DMax와 Collada에 대한 튜토리얼은 이전 포스트를 참조하기 바란다.)

요번에 보여줄 성난 몬스터 애니메이션 소스인 “monster_angry.max” 파일을 제공을 해주신 브리짓닷텀의 한광재 실장님에게 감사를 전한다. 이것은 맵핑을 하지 않은 상태이다. 2009 LG 모바일 월드컵에 사용된 게임 캐릭터로 맵핑한 자료를 올리기에는 저작권에 문제가 생길지도 모르기 때문에 힘들것 같다.

필요한 소스를 먼저 다운로드 하자.
Flash Source, Classes, Marker Image

이전의 튜토리얼에서와 같이 Collada export를 사용하여 애니메이션을 체크하여 .DAE 파일을 생성하면 된다.
중요한건 각 프레임별로 모션이 적용되어 있어야 한다. 이 .DAE 파일은 64 프레임으로 애니메이션이 되어있다.

위 그림 처럼 Collada .DAE로 저장을 하면…
이전에 보았던 Animation checkbox를 선택하고 Export를 하면 아래와 같은 코드가 생성이 된다.

<library_animations>
<animation>
  <source id="node-ChamferBox358_rotationX.ANGLE-input">
	<float_array id="node-ChamferBox358_rotationX.ANGLE-input-array" count="65">0.03333333 0.06666667 0.1 0.1333333 0.1666667 0.2 0.2333333 0.2666667 0.3 0.3333333 0.3666667 0.4 0.4333333 0.4666667 0.5 0.5333333 0.5666667 0.6 0.6333333 0.6666667 0.7 0.7333333 0.7666667 0.8 0.8333333 0.8666667 0.9 0.9333333 0.9666667 1 1.033333 1.066667 1.1 1.133333 1.166667 1.2 1.233333 1.266667 1.3 1.333333 1.366667 1.4 1.433333 1.466667 1.5 1.533333 1.566667 1.6 1.633333 1.666667 1.7 1.733333 1.766667 1.8 1.833333 1.866667 1.9 1.933333 1.966667 2 2.033333 2.066667 2.1 2.133333 2.166667</float_array>
	<technique_common>
	  <accessor source="#node-ChamferBox358_rotationX.ANGLE-input-array" count="65" stride="1">
		<param name="TIME" type="float"/>
	  </accessor>
	</technique_common>
  </source>
  <source id="node-ChamferBox358_rotationX.ANGLE-output">
	<float_array id="node-ChamferBox358_rotationX.ANGLE-output-array" count="65">0 0 0 0 0 0 0 0 0 0 0 0 0 0.9858586 3.336753 6.142659 8.493553 9.479412 8.493554 6.14266 3.336753 0.9858589 0 1.212546 3.464417 4.676962 4.417889 3.749751 2.836175 1.840787 0.9272113 0.2590737 0 1.212546 3.464417 4.676962 4.417889 3.749751 2.836175 1.840787 0.9272113 0.2590737 0 1.212546 3.464417 4.676962 4.516572 4.086728 3.464416 2.726624 1.950338 1.212546 0.5902338 0.1603896 0 0 0 0 0 0 0 0 0 0 0</float_array>
	<technique_common>
	  <accessor source="#node-ChamferBox358_rotationX.ANGLE-output-array" count="65" stride="1">
		<param name="ANGLE" type="float"/>
	  </accessor>
	</technique_common>
  </source>
  ...
  <sampler id="node-ChamferBox358_rotationX.ANGLE-sampler">
	<input semantic="INPUT" source="#node-ChamferBox358_rotationX.ANGLE-input"/>
	<input semantic="OUTPUT" source="#node-ChamferBox358_rotationX.ANGLE-output"/>
	<input semantic="INTERPOLATION" source="#node-ChamferBox358_rotationX.ANGLE-interpolation"/>
  </sampler>
  <sampler id="node-Dummy21_rotationX.ANGLE-sampler">
	<input semantic="INPUT" source="#node-Dummy21_rotationX.ANGLE-input"/>
	<input semantic="OUTPUT" source="#node-Dummy21_rotationX.ANGLE-output"/>
	<input semantic="INTERPOLATION" source="#node-Dummy21_rotationX.ANGLE-interpolation"/>
  </sampler>
  ...
  <channel source="#node-ChamferBox358_rotationX.ANGLE-sampler" target="node-ChamferBox358/rotationX.ANGLE"/>
  <channel source="#node-Dummy21_rotationX.ANGLE-sampler" target="node-Dummy21/rotationX.ANGLE"/>
  ...
</animation>
</library_animations>

코드를 잘 보면 프레임 수 만큼의 해당 되는 태그들이 뽑힌것을 알 수 있다.
그럼, 여기까지 되었다면 플래시 액션스크립트로 아주 간단하게 효과를 주면 된다.

코드는 아래와 같다.

package 
{
 
	/**
	 * @author jin_u EUM (jin_u@jinustudio.com)
	 * @since 26/02/2010
	 * @version 1.0.0
	 */
 
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.papervision3d.objects.parsers.DAE;
 
	public class FLAR_3DMax_Ani_DAE extends PV3DARApp 
	{
 
		private var _monster:DAE;
 
		public function FLAR_3DMax_Ani_DAE() {
			addEventListener(Event.INIT, _onInit);
			init('Data/camera_para.dat', 'Data/ghost_corps_marker.pat');
		}
 
		private function _onInit(e:Event):void {
			_monster = new DAE();
			_monster.load('model/monster.dae');
			_monster.scale = 7;
			_monster.z = 30;
			_monster.rotationX = 90;
			_markerNode.addChild(_monster);
 
			addEventListener(Event.ENTER_FRAME, _update);
 
			mirror = !mirror;
			stage.addEventListener(MouseEvent.CLICK, _onClick);
		}
 
		private function _onClick(e:MouseEvent):void {
			mirror = !mirror;
		}
 
		private function _update(e:Event):void {
 
			if (_markerNode.visible)
			{
				if (!_monster.playing)
				{
					_monster.play();
				}
			}
			else
			{
				_monster.pause();
			}
		}
	}
}

부연 설명을 하자면, 마커가 보일때 애니메이션이 진행중임를 체크한 후 진행중이 아니면 진행시키고, 마커가 안보인다면 애니메이션을 중단 시킨다. 이렇게 하면 스크린에서 마커를 놓쳤다고해도 모션이 중간에 사라지는 것을 막을 수있다.

이것 말고도 마커를 인식 실패해서 껌뻑 거림을 막기 위해 처리하는 방법도 있는데, 이것은 다음 포스팅에서 간단하게 알아보자.

작성 후기 :
요즘 FLARToolKit 2.5.0이 지속적으로 업뎃이 되서 살펴보고 있다. FlashPlayer 10.0 버전이라 접근을 할까 말까 고민하고 있다. 대중적인 컨텐츠를 개발하게 된다면 아무래도 FlashPlayer 9.0 버전을 사용해야 할 듯 하다. 시연을 하면서 이곳 저곳을 돌아다녀 보았는데… FlashPlayer 버전에 대해서 언급을 하는 것을 보았기 때문에 내가 이런 생각을 하고있는지 모르겠다.