[실전 예제]Easing, Trasition을 이용하여 수축, 팽창을 반복하는 로고 제작

Corona에는 Easing이라는 편리한 수치 반환 객체가 있었네요.
저는 잘 몰랐어서.... cocos2d에는 있는 action이 없다고 징징댔는데 이 easing이라는걸 오늘 제대로 써보면서 그런 생각이 팍 죽었습니다. 
물론 cocos2d의 action 체제를 절대 무시하는 것은 아닙니다.
cocos2d::action은 여러가지 액션들을 충분한 상속관계를 통해 유연하게 구현해놓았습니다.
다만 Corona에도 그런 것을 편리하게 구현할 수 있게 도와주는 API가 있다는 것이지요.

Easing에 대한 내용은 시뮬레이터의 easing 샘플을 직접 보시는 것이 더 효과적일 것입니다.
이 글에서는 easing과 transition을 이용하여 어떻게 팽창과 수축을 반복하는 로고를 구현하는지에 대한 언급만을 하도록 하겠습니다.


1. 로고를 화면에 표시
먼저 로고 파일을 불러와서 display 객체로 만드는 작업이 필요하겠죠.

logo = display.newImage("Image/title/logo.png")

logo.x, logo.y = 120, 80

logo.xScale, logo.yScale = 0.85, 0.85

display.newImage로 화면에 logo.png를 추가하고, 그것의 x, y 좌표를 원하는 곳에 세팅해줍니다.
xScale과 yScale은 변수 이름을 보면 아시겠지만 크기를 조정하는 변수인데요.
제가 의도하는 바는 로고의 scale을 1.15와 0.85 사이를 반복하는 것이고 scale 값은 default 값이 1이기 때문에
처음에 약간 부자연스러운 부분이 있어서 처음 값을 0.85로 수정하였습니다.

2. transition사용법
transition에는 여러 종류가 있습니다. (to, from, dissolve, cancel)
각각의 transition에 대한 설명은 Corona 홈페이지의 API란을 참조하시는 것이 좋을 것 같고 저 같은 경우에는 주로 to, from을 사용합니다.
이번에 쓸 transition.to를 간단히 설명하자면 to는 현재 값에서 삽입한 파라미터 값을 '향하는' 것입니다.
logo가 특정 scale 값으로 점점 변하는 것을 구현한 것이 아래의 소스입니다.

transition.to(logo, {time=2000, xScale=1.15, yScale=1.15,  transition = easing.inOutQuad})

transition.to 함수의 첫번째 파라미터는 transition을 적용할 대상 객체입니다.
그리고 두번째 파라미터인 테이블에는 첫번째 파라미터로 넣은 객체의 값을 어떻게 바꿀 것인지에 대한 내용인데요.
time은 이 transition을 적용하는데 얼마나 시간이 걸릴 것인지에 대한 값이며
다음으로 여기서 scale 값을 수정하고자 하기 때문에 xScale, yScale 값을 넣었습니다.
마지막 테이블 값인 transition은 어떤 수치 반환 객체를 사용할 것인지에 대한 선택인데 저는 easing 샘플을 보고 easing.inOutQuad가 수축과 팽창을 반복하는 것에 적합한 easing인 것 같아 선택하였습니다.

이렇게 transition을 명령해놓으면 한 번 이 transition을 합니다.

3. transition 반복
보편적인 방법인지는 잘 모르겠으나 저 같은 경우엔 수축하는 transition과 팽창하는 transition을 반복하기 위해서
수축하는 transition이 끝나면 팽창하는 transition을 하는 함수를 호출하고
팽창하는 transition이 끝나면 수축하는 transition을 하는 함수를 호출하도록 하였습니다.
결과적으로 한 transition을 명령해두면 두 transition을 반복하는 모양새가 되겠죠.

local logoTransition1, logoTransition2

logoTransition1 = function()

transition.to(logo, {time=2000,

 xScale=1.15,

 yScale=1.15,

 transition = easing.inOutQuad,

 onComplete=logoTransition2})

end

logoTransition2 = function()

transition.to(logo, {time=2000,

 xScale=0.85,

 yScale=0.85,

 transition = easing.inOutQuad,

 onComplete=logoTransition1})

end

위에 local으로 먼저 메소드를 선언 해 둔 이유는 lua 언어의 특징상 해당 라인보다 아래에 있는 것을 인식하지 못하기 때문에
저렇게 위에 먼저 선언을 해두어야 하기 때문입니다.
transition 함수의 두 번째 파라미터인 테이블에는 onComplete이라는 파라미터를 사용할 수 있습니다.
해당 transition이 끝나면 무엇을 할 것인지에 대한 설정을 할 수 있는 것인데요.
A라는 transition이 끝나면 B라는 transition을 실행 하고, B라는 transition이 끝나면 A라는 transition을 실행하도록 하였습니다.
결과적으로 위에서 말한 두 행동을 영원히 반복하는 것이 될 것입니다.
몇 번만 하도록 하고 싶다면 timer 등을 이용하여 이 loop에서 빠져나오도록 할 수 있겠죠.



이렇게 transition과 easing을 이용하여 action을 구현하는 방법에 대해 알아보았습니다.
lua의 문법이 상당히 자유로워서 이렇게 번거롭게 코드를 쓰지 않고 짧게 쓰는 방법도 있어 보입니다.
하지만 저는 lua 문법이 아직 익숙하지 않아서.... 이렇게 밖에 쓸 수가 없네요.
앞으로 더 많은 공부를 해야겠습니다 ㅎㅎ