animation chain 소스 분석 해 보기 01

오늘은 정말 오랜만에 Corona SDK 의 한 샘플 코드를 받아서 공부 좀 해 봤습니다.

animationchain 이라는 소스인데요.

소스는 https://github.com/personalnadir/animation 에 가시면 보실 수 있습니다.

파일을 다운 받아서 실행시켜 보시면 아래와 같은 화면을 보실 겁니다.

화면에 빨간 점이 4개 찍혀 있고 하얀 공이 이 빨간 공들을 찍으면서 움직입니다.

궁금하신 분들은 파일 다운 받아서 직접 실행해 보시면 됩니다.

오늘은 우선  main.lua  파일을 분석해 보죠.

require "animationchain"

local stops={
    {x=20},
    {y=20},
    {x=200,simul=true},
    {y=600},
    {x=display.contentCenterX,y=display.contentCenterY,delete=true}
}

local x,y=display.contentCenterX,display.contentCenterY
for k,v in ipairs(stops) do
    x,y=(v.x or x), (v.y or y)
    if not v.simul then
        display.newCircle(x,y,10):setFillColor(255,0,0)
    end
end

local c=display.newCircle(display.contentCenterX,display.contentCenterY,20)
animationchain.anim(c,stops[1]).whenDone(c,stops[2]).whenDone(c,stops[3]).whenStart(c,stops[4]).onComplete(c,stops[5]).onStart(function() print("done") end).start()

첫번째 줄은 animationchain.lua 라는 파일에 있는 함수를 implement 한다는 얘기 입니다.

오늘은 main.lua 만 다룰거니까 이 animationchain.lua 파일은 신경쓰지 않겠습니다.

다음은 stops 라는 배열에 key,value 형식으로 값들을 집어 넣었습니다.

다음은 x 와 y라는 변수에 화면 중심의 x, y 값을 대입했습니다.

그 다음은 for 문으로 위에 정해 줬던 stops 라는 key,value 쌍으로 돼 있는 배열을 돌면서 원을 만드네요.

화면에 찍힌 4개의 빨간색 점들이 이 for 루프를 돌면서 찍힌 겁니다.

display.newCircle(x,y,10):setFillColor(255,0,0) 는 지름이 10픽셀인 원을 x,y 좌표에 그리는데 그 원의 색은 빨간색 (RGB 에서 R 만 255이기 때문에 빨간색이 됩니다) 으로 그리라는 뜻입니다.

그다음에 또 원을 그리네요 c 라는 변수에 담기는 원을 그리는데요.

20픽셀의 지름을 갖는 원을 그리는데 그 위치는 화면의 중앙이 됩니다.

따로 원의 색을 지정해 주지 않았기 때문에 디폴트인 흰색(255,255,255)이 됩니다.

그 다음은 아까 require 에서 지정한 animationchain 이라는 파일 안에 있는 anim() 이라는 함수를 call 하는 겁니다.

일단 이 부분은 오늘 다루지 않을 부분이구요.

for 문에서 main.lua 의 주요 작업이 다 진행되니 이 for 문을 집중적으로 보겠습니다.

처음에 나오는게 ipairs 함수 입니다.

이 함수는 3개의 값을 return 합니다.

신택스는

for i,v in ipairs(t) do body; end

입니다.

이럴경우 (1,t[1]), (2,t[2]), ..., 이런 값들을 리턴하는데요. 이 루프는 ipairs안에 있는 t 라는 테이블의 마지막에 있는 값까지 도달하면 끝이 납니다.

그럼 main에 있는 for 문을 볼까요?

for k,v in ipairs(stops) do
    x,y=(v.x or x), (v.y or y)
    if not v.simul then
        display.newCircle(x,y,10):setFillColor(255,0,0)
    end
end

for 문만 보면 stops 에 있는 값들의 갯수 만큼 for  문이 돌겠군요.

그리고 그 값들은 1,stops[1], 2,stops[2] 이런식으로 진행이 됩니다.

다음줄은 x 에 v.x 나 x 를 대입하고 y에는 v.y나 y 를 대입합니다.

그러니까 v.x 가 있으면 그 값을 대입하고 그 값이 없으면 위에 지정한 x 값 즉 화면 중앙의 x 좌표값을 대입하게 됩니다.

그러니 처음 x 값은 stops 의 첫번째 값인 20 이 대입될 겁니다. 그 다음엔 y 값은 없으니까 for 문 바로 위에 지정해 둔 화면 중앙의 y 값이 대입될 거구요.

그리고 그 값을 x,y 값으로 해서 지름 10짜리의 빨간색 원을 그릴겁니다.

그 다음은 다시 for 문 처음으로 가는데 x, 값은 아까 지정된 20이 있을 테고 그 다음은 stops[2] 가 선택이 되니까 y 값으로 20이 지정될 겁니다.

그 다음에 두번째 빨간색 원이 그려질텐데 그 위치는 20,20이 될 겁니다.

다음 for 루프 돌 때는 stops[3] 가 되서 x는 200 이 되겠구 y는 따로 없으니까 바로 전에 지정된 20이 되겠네요.

그런데 if 문에서 v.simul이 아닐 경우에만 원을 그리라고 했으니까 이 원은 그려지지 않을 겁니다.

말로 설명하면 잘 감이 안올 수도 있으니까 눈으로 확인해 보겠습니다.

local stops={
    {x=20},
    {y=20},
    {x=200,simul=true},
    {y=600},
    {x=display.contentCenterX,y=display.contentCenterY,delete=true}
}

local x,y=display.contentCenterX,display.contentCenterY
for k,v in ipairs(stops) do
    x,y=(v.x or x), (v.y or y)
    print (v.x )
    print (v.y)
    if not v.simul then
        display.newCircle(x,y,10):setFillColor(255,0,0)
        print (k ..  " : " .. x .. " , " .. y)
        cord = k .. " : " .. x .. "," .. y;
        display.newText(cord,x+10,y, native.systemFont, 20)
    end
end

local c=display.newCircle(display.contentCenterX,display.contentCenterY,20)

for 문 안에서 x, y 좌표를 console 하고 화면에 찍는 코드를 삽입했습니다.

그러면 결과는 아래와 같습니다.

보시면 첫번째 빨간 원은 20,427 이고 두번째는 20,20 입니다. 그리고 세번째는 200,20 이 될 텐데 if 문에 걸려서 이 세번째 원은 그려지지 않을 겁니다.

네번째는 200,600 이고 다섯번째는 stops 의 마지막 값으로 화면 정중앙에 있는 빨간 원이 그려집니다.

그냥 좌표값을 사용해서 그리면 될 텐데 왜 이렇게 복잡하게 할까요?

일단 이렇게 하면 코드의 양을 줄일 수 있고 빨간원이 그려지는 위치를 stops 배열 안에서 정해주면 되니까 나중에 수정하거나 할 떄 편해 집니다.

가독성이 좋고 maintanance 를 용이하게 해 주는 것이죠.

그리고 모바일은 기계마다 해상도가 다른데 이 stops 좌표를 각 해상도마다 따로 만들어 줘서 기계의 해상도에 따라서 다른 좌표를 사용해서 빨간 원을 그리게 할 때도 편리하게 이용할 수 있습니다.

맨 마지막 줄은 animationchain 파일에 있는 anim()함수를 call 하고 있습니다.

이 때 parameter들이 전달 되는데요.

첫번째 파라미터로 c 즉 하얀 원이 전달 됩니다. 이 c 가 움직일 거니까 이 객체를 파라미터로 전달해야겠죠.

그리고 두번째는 stops[1] 이 전달 됩니다. 이 하얀 공이 첫번째로 갈 목적지가 될 겁니다.

목적지에 도달하면 (whendone) 두번쨰로 c,stops[2] 를 인수로 해서 anim 을 call 하고 이 작업을 c,stops[5] 가 될 때까지 할 겁니다.

그 다음에 onStart()를 붙인 것은 transition이 일어나기 전에 이 onStart() 메소드를 실행하라는 의미입니다. 다음 파일안에 이 onStart 메소드가 있어야 되고 그 메소드 안에서 이벤트 대신 target이 pass 되도록 할 수 있습니다.

잘 이해가 안 되시는 분들은 API를 보시면 도움이 되실 겁니다.

여기서는 onComplete() 다음에 호출 되니까 공이 다 돌면 다음 transition 하기 전에 print 'done' 을 하라는 거네요.

그 다음은 animationchain 에 있는 start() 함수를 호출하는 거구요.

여기까지 main.lua 에 대해 공부해 봤습니다.

다음엔 이 오픈소스의 핵심인 animationchain 파일을 분석해 보겠습니다.