Best Tween Engine ? (AS3)

---

 

트윈 엔진의 종류

트윈 엔진의 종류는 꽤 많이 있지만.. 그 중에서도 가장 많이 사용한다는 google Tweener, gTween, TweenLite(Max) 이 3가지에 대해 알아보겠습니다.

Google Tweener

• Google code의 오픈소스 프로젝트에서 발전 되어 많은 사용자들이 사용하는 엔진 중에 하나입니다.
  보통 'tweener' 라고 불리며 많은 사람들이 사용하기 시작하였고,
  여러 오픈 엔진들이 발전하게 된 밑거름이 된 프로젝트입니다.

gTween

• 다음으로는 Flash를 업으로 하고 있는 사람이면 대부분 알고 있는 Grant Skinner란 개발자가 만든 gTweeen 입니다.
  TweenLite와 비교해 속도면에선 아직 부족하지만, 셋 중 가장 최근에 만들어졌다는 것과 꾸준한 업데이트로 인한 성능 향상으로 많은 사용자들이 사용하고 있습니다.

TweenLite / TweenMax

• Jack Doyle이라는 사람이 만든 TweenLite, TweenMax는 현재 서치(자체) 결과 가장 많은 사람들이 사용하고 있는 엔진으로 보입니다.
  무엇보다도 최고의 퍼포먼스를 내는 것에 많은 사용자들이 Google Tweener에서 TweenLite로 갈아 탔다는 말들이 있습니다.;
  (참고로 TweenLite는 기본적인 트윈 종류만 가지고 있는 가벼운 라이브러리이며, TweenMax는 TweenLite를 확장한 보다 다양한 트윈을 제공하고 있습니다.)

---

 

트윈 엔진들의 성능 비교

단지 최고의 퍼포먼스를 낸다고 그것도 웹소문으로 TweenLite를 사용해야 한다는 것에는 아직 부족한 감이 있습니다.
그래서 위 엔진들을 비교한 웹페이지의 도움을 받아 보겠습니다.

• Speed Test - Tweening Engine Comparison Tool
  • 아마 많은 사람들이 위의 퍼포먼스 테스트를 하고 난 뒤 TweenLite(Max)로 갈아탔을 거라 생각됩니다.
    테스트를 해보면 정말 속도면에선 빠르다는 것을 알 수 있습니다. 거기다 Flash 기본 트윈은 절망인 것도 알게 됩니다.
    하지만 이 테스트는 TweenLite를 만든 곳에서 한 것이므로 100% 신뢰는 어렵다고 생각하였습니다.

• Optimization test AS3 - Tween library performances 1
  • 이것은 Yohei Shimomae란 사람의 자체 테스트 입니다.
    여러 부분에 대해 비교를 해 놓았는데.. 여기서도 TweenLite가 우세하게 나오네요.;;

---

 

트윈 엔진들의 사용법

• Google Tweener

Tweener.addTween(myMovie, {_x:10, _y:10, time:1, transition:"linear"});

자세히 보기
API Document

• gTween

이벤트 방식

var myTween:GTween = new GTween(mySprite, 2, {x:200});



myTween.addEventListener(Event.COMPLETE, handleTweenComplete);



// hold a reference in myTween, so we can modify it later

var myTween:GTween = new GTween(mySprite, 2, {x:200});



// run once, and then free tween for garbage collection new GTween(mySprite1, 2, {x:400});

자세히 보기
API Document

• TweenLite

import gs.*;



TweenLite.to(mc, 1, {x:200}); //automatically garbage collects

var myTween:TweenLite = TweenLite.to(mc, 1, {x:200});



//stores a reference to the TweenLite instance, 



//but you're responsibleformaking sure it becomes eligibleforgarbage collection when you're finished with it



//(you can simply set your variable tonull, orifit is still in progress, call TweenLite.removeTween(myTween) first)

var myTween:TweenLite = new TweenLite(mc, 1, {x:200});



//identical to the previous line - it just looks more object-oriented.

콜백 방식

import gs.*;



import gs.easing.*;



TweenLite.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:5, clip_mc});



function onFinishTween(parameter1:Number, parameter2:MovieClip):void {



      trace("The tween has finished! parameters: " + parameter1 + "\, and " + parameter2);



}

• TweenMax

이벤트 방식

import gs.TweenMax;



import gs.events.TweenEvent;



var myTween:TweenMax = TweenMax.to(my_mc, 2, {x:300});



myTween.addEventListener(TweenEvent.COMPLETE, myFunction);

자세히 보기

보시면 아시겠지만, 사용법은 거의 비슷하게 보입니다. 하지만, gTween은 AS3.0의 이벤트 방식을 따랐고, TweenLite는 콜백 방식을 사용하였습니다. gTween이 좀 더 개발자 지향적이라고 할 수 있습니다.(skinner가 한 말..) 이런 이유에서 인지 TweenMax에서도 이벤트 방식이 업데이트가 되었습니다. 확장성을 고려한다면 gTween과 TweenMax를 빠른 퍼포먼스는 TweenLite가 아닌가 하는 생각이 듭니다.

---

 

트윈 엔진들의 업데이트

• Google Tweener
  Stable version 1.31.74 (2008/10/24)
• gTween
  Beta 4 Release (2008/12/15)
• TweenLite
  Version 9.3, Updated (2008/12/17)
• TweenMax
  Version: 3.6, Updated (2008/12/17)

각 엔진들의 업데이트 내역을 보면, Google Tweener만 약간 처질 뿐 나머지는 다 업데이트 활동이 활발하다고 볼 수 있겠습니다.

---

 

트윈 엔진들의 성능 비교 테스트

위에 나와있는 성능 비교의 자료는 형평성에(?) 어긋나는 것 같아서 자체적으로 간단히 만들어 보았습니다. 위의 성능 비교 자료들은 구 버전들을 비교한 것이므로, 각각 최신 버전을 사용하여 제작하였습니다.

테스트 결과 4가지 엔진은 거의 비슷한 FPS와 메모리 사용량을 나타내었습니다. 용량이 아주 큰 트위닝을 사용하는 작업(3D 등)이 아닌 이상.. 성능상으로 차이를 내야하는 건 무리라는 생각이 들었습니다. 성능과 사용 편의성을 잘 따져.. 선택하는 것은 각자의 몫인 것 같습니다.

 

---