IT 기술 따라잡기

코로나 SDK 는 어도브 플래시 (adobe flash)  회사 다니던 사람이 나와서 만든 툴이예요.

아래 링크를 클릭하시면 코로나 SDK를 개발한 Carlos가 자신들이 고생하면서 성장한 얘기에 대해 기술해 놨습니다.
최근 adobe 사에서도 기존의 Flex를 확장해서 모바일 앱 개발 툴을 만든다고 하던데 ..
우리의 Carlos가 이 글을 통해서 adobe (어도비) 사와의 경쟁에서도 자신있다라고 쓰고 있네요.
http://blog.anscamobile.com/2011/10/thoughts-on-flash/

코로나의 강력한 Physics Engine은 Box2D를 사용해서 구현한거고.. 이것에 대해서는 우리가 이미 살펴 봤습니다.

그러면 이제 코로나의 Animation and Motion 기능은 어떤가 한번 살펴 보죠.

이 애니메이션 기능도 아주 강력합니다. 플래시 개발하던 사람이 개발했으니까 당연하겠죠?
우선 Transitions (통과, 이동)에 대해 보겠습니다.
이 Transition Library는 여러분들에게 단 한줄로 쉽게 애니메이션을 만들 수 있게 해 줍니다.
단지 alpha 프로퍼티를 이용해서 객체를 천천히 사라지게 할 수도 있습니다.
transition.to 메소드로 껏을 할 수 있는데요.
한번 보죠.
local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 255,255,255 )
 
local w,h = display.contentWidth, display.contentHeight
 
local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 255,255,255 )
 
local w,h = display.contentWidth, display.contentHeight
 
-- (1) move square to bottom right corner; subtract half side-length
--     b/c the local origin is at the square's center; fade out square
transition.to( square, { time=1500, alpha=0, x=(w-50), y=(h-50) } )
 
-- (2) fade square back in after 2.5 seconds
transition.to( square, { time=500, delay=2500, alpha=1.0 } )

위 소스를 main.lua로 저장하고 이를 시뮬레이터에서 실행 합니다.
첫줄은 사각형을 그리고 다음에 흰색으로 채웁니다.
w,h 변수에 contentWidth와 contentHeight 값을 넣구요.
그 다음에 두번째 사각형을 그리고 흰색으로 채웁니다.

그리고 transition.to로 이 사각형을 대각선으로 움직입니다.
(이때 사각형은 두번째 지정한 사각형이 됩니다.)
이때 alpha값은 0으로 놨으니까 점점 투명해 지겠죠?

그리고 두번째로 transition.to를 적용했는데요.
이것은 점차 투명도가 없어지는 겁니다.
그러니까 0이었던 alpha 값이 정해진 time과 delay에 맞춰 점차 1로 변하게 됩니다.

실행하면 아래와 같은 화면이 나옵니다.

사각형 하나는 좌상단에 그대로 있고 또 다른 사각형이 좌상단에서 우하단으로 점점 흐려지면서 움직입니다.
다 움직이고 난 후 이 사각형은 점차 뚜렷해 집니다. (delay를 사용했기 때문이죠)

아주 간단한 코드로 애니메이션을 만들었죠?

syntax (신택스)는 아래와 같습니다.
transition.to( target, params )
이 params에 time, alpha, x, y, delay 등이 들어간 겁니다.
정확하게 아래의 파라미터들이 사용가능합니다.
params.time : 밀리세컨드 단위로 동작이 일어나는 시간을 나타냅니다. 디폴트는 500(0.5초) 입니다.
params.transition : 디폴트는 easing.linear 입니다. 이 Easing 에 대해서는 잠시 후 다룰 겁니다.
params.delay : 동작 (코로나에서는 이것을 tween이라고 표현합니다.) 이 시작될 때까지의 시간입니다. 이 시간만큼 기다렸다가 실행 됩니다.
params.delta : boolean값으로 디폴트는 nil로 false를 말합니다.
params.onStart : tween이 시작 되기 직전에 불려집니다. 리스너가 이를 캣치 해서 어떤 동작을 작동 시킬 수 있습니다.
params.onComplete : tween이 끝난 직후 불려집니다. 리스너가 이를 캣치 해서 어떤 동작을 작동 시킬 수 있습니다.

transition.form(target,params)는 transition.to와 비슷한 역할을 합니다. 단지 시작하는 프로퍼티 값이 params table에 특정 지어지고 final값들은 target prior에 상응하는 값을 가진다고 돼 있는데.. 저도 잘 이해가 안 되네요.

아래코드를 보세요.
local rect = display.newRect(  0, 0, 100, 100 )
rect:setFillColor(255,255,255)
 
local tMax =1000+system.getTimer()
local function fadeOut(event)
  local t = event.time
  if t < tMax then
    rect.alpha = 1 - t/tMax
  else
    rect.alpha = 0
    -- done, so remove listener
    Runtime:removeEventListener("enterFrame", fadeOut )
  end
end
 
-- Add listener to begin animation
Runtime:addEventListener( "enterFrame", fadeOut )

사각형을 만들고 흰색으로 채우고
tMax에 현재시각보다 1초 더 많은 시각을 대입하고
fadeOut 함수에는 점차 alpha값을 주는 로직으로 돼 있습니다.
리스너는 Runtime리스너로 enterFrame시 fadeOut을 실행하도록 돼 있구요.
이 리스너는 함수 안에서 alpha 값이 0이 되면서 remove 됩니다.

이와 똑같은 기능을 아래와 같이 단 3줄로 할 수 있습니다.

local rect = display.newRect( 0, 0, 100, 100 )
rect:setFillColor(255,255,255)
 
transition.to(rect, {time=1000, alpha=0})

이제 transition.to의 간편함을 알겠네요.

이외에 아래 기능들이 있습니다.
transition.cancel( tween )    Cancels the tween.
transition.dissolve( src, dst, duration, delayDuration )

이제 아까 살펴 보기로 했던 Easing을 볼까요?

easing library는 transition library에 의해 사용되는 interpolation 함수들의 collection 입니다.
아래와 같은 종류들이 있구요.

easing.linear( t, tMax, start, delta )
easing.inQuad( t, tMax, start, delta )
easing.outQuad( t, tMax, start, delta )
easing.inOutQuad( t, tMax, start, delta )
easing.inExpo( t, tMax, start, delta )
easing.outExpo( t, tMax, start, delta )
easing.inOutExpo( t, tMax, start, delta )

start와 final 값을 만들기 위해 여러분만의 easing 함수를 만들 수도 있습니다.
함수안의 인수들은 다음과 같습니다.
t : transition이 시작된 이후부터 진행된 시간
tMax : transition의 duration
start : 시작 값
delta : 변화 값 (final value = start + delta)

무비클립 (Movieclips)

여러장의 이미지들을 테이블에 넣고 이를 순차적으로 보여주면서 애니메이션 효과를 내는 것이 무비크립입니다.
저는 두 물체가 부딪혔을 때 폭발하는 애니메이션을 이 무비클립으로 효과를 줬었습니다.
플래시 하시는 분들은 플래시에서 구현한 애니메이션을 코로나로 표현할 때 유용할 것 같습니다.
이 movieclip library에 대해 자세히 살펴 보겠습니다.
이 기능을 이용하려면 movieclip.lua 파일이 있어야 합니다.

위 파일을 다운 받으시면 됩니다.
한 400줄 되는 코드인데요. 각자 이 코드를 분석해 보시면 아마 많은 도움이 되실 겁니다.

우선 이 파일을 쓰려면 require()문을 써야합니다.
local movieclip = require("movieclip")
자 그럼 하나 만들어 볼까요?

이 그림들을 이용할 겁니다.

저도 이 그림들을 어떤 샘플 파일에서 받은 것 같은데요.

이름은 explode1.png ~ explode9.png 로 합니다.

local movieclip = require("movieclip")

function bombAni()
    bombAnim = movieclip.newAnim{"images/explode1.png", "images/explode2.png", "images/explode3.png", "images/explode4.png", "images/explode5.png",
    "images/explode6.png","images/explode7.png", "images/explode8.png", "images/explode9.png"};
    bombAnim.x = 200;
    bombAnim.y = 200;

    bombAnim:play{ startFrame=1, endFrame=9, loop=5, remove=true }
end

bombAni()

이 코드를 main.lua 파일에 넣고 실행 합니다.

첫번째 줄은 movieclip 파일을 require 하는 부분입니다.

그 다음 bombAni() 함수가 애니메이션 효과를 주는 부분 입니다.

movieclip.newAnim{} 에다가 사용할 그림들을 다 넣습니다.

그리고 이 값들을 bombAnim이라는 변수에 넣습니다.

bombAnim.x , y 좌표를 줍니다. (폭발하는 위치가 됩니다.)

그리고 bombAnim:play{} 로 애니메이션을 실행 시킵니다.

startFrame은 첫번째 그림부터 한다는 것이고 9번째 그림에서 끝나게 됩니다.

그리고 이 폭발 장면은 5번 반복하게 되고 폭발 장면이 끝난 후에는 remove 됩니다.

이 코드를 실행 시키면 폭발하는 장면이 그럴 듯 하게 나옵니다.

remove 파라미터를 false로 하면 마지막 이미지가 없어지지 않고 계속 남아 있습니다. 디폴트는 false입니다.

그리고 loop 부분을 넣지 않으면 디폴트 값으로 0이 들어가는데요. 이 경우 무한정으로 루프가 반복됩니다.

그리고 startFrame과 endFrame을 적당히 정해주면 중간 이미지부터 시작하거나 끝낼 수 있습니다.

object:reverse() 애니메이션이 거꾸로 실행 됩니다.

play와 똑 같이 파라미터를 넣으시면 됩니다.

object:reverse{startFrame=1, endFrame=9, loop=5, remove=true}

object:nextFrame() : 다음 이미지로 애니메이션이 넘어갑니다.

object:previousFrame() : 이전 이미지로 넘어갑니다. 그리고 정지합니다.

object:stop() :  애니메이션을 현재 프레임에서 정지합니다.

object:stopAtFrame(frame) : 지정한 이미지에서 애니메이션이 정지합니다.

bombAnim:stopAtFrame(2)
bombAnim:play()
 
bombAnim:stopAtFrame(1)
bombAnim:reverse()

이 코드를 추가해 보세요. 뭔가 바뀌었나요? 전 잘 모르겠는데.......

이부분도 많이 시도해 봐야 겠어요.

object:setLabels(labels)

객체에 라벨을 매깁니다.

myAnim:setLabels{ firstLabel=1, anotherLabel=3 }

object:setDrag 이 값이 true가 되면 드래그 할 수 있습니다. 그리고 드래그 범위를 지정하려면 bounds 파라미터를 사용할 수 있습니다.

myAnim:setDrag{ drag=true, limitX=false, limitY=false, onPress=myPressFunction, onDrag=myDragFunction,
                onRelease=myReleaseFunction, bounds={ 10, 10, 200, 50 }}

눌려졌을 경우 myPressFunction 이 실행되고 드래그 될 경우는 myDragFunction이 실행되고 release 됐을 경우는 myReleaseFunction이 실행됩니다.

Drag의 범위는 10,10,200,50 이 되구요.

이 기능으로 아주 다양한 표현을 할 수 있겠는데요...

이 기능을 없애려면 단순하게 myAnim:setDrag{drag=false}를 하시면 됩니다.

이 transition library를 사용하지 않고 애니메이션을 구현해야 할 때가 있습니다.

제 탁구 앱 (Multi Player Ping Pong) 에서 공이 튀는 부분도 프로그램으로 그냥 했거든요.

볼이 벽면에 계속 튀는 코드를 보겠습니다.

local xdirection,ydirection = 1,1
local xpos,ypos = display.contentWidth*0.5,display.contentHeight*0.5
local circle = display.newCircle( xpos, ypos, 20 );
circle:setFillColor(255,0,0,255);
 
local function animate(event)
        xpos = xpos + ( 2.8 * xdirection );
        ypos = ypos + ( 2.2 * ydirection );
 
        if (xpos > display.contentWidth - 20 or xpos < 20) then
                xdirection = xdirection * -1;
        end
        if (ypos > display.contentHeight - 20 or ypos < 20) then
                ydirection = ydirection * -1;
        end
 
        circle:translate( xpos - circle.x, ypos - circle.y)
end
 
Runtime:addEventListener( "enterFrame", animate );

이렇게 하면 저 빨간 공이 움직이면서 벽에 계속 튕깁니다.

제 앱의 경우는 각 벽면들과 공도 객체로 만들어서 addBody를 한 다음에 bounce를 주었습니다.

이렇게 프로그램으로 애니메이션을 하려면 enterFrame 으로 리스너를 달아야 합니다.

그리고 제가 했던 방법으로 하면 Ball에 addBody를 하고 Ball:setLinearVelocity()를 주어도 됩니다.

여기서는 enterFrame을 이용하는 방법을 좀 더 보도록 하죠.

위에 있는 소스는 enterFrame의 Frame-base로 코딩을 한 것입니다.

이 frame rate은 config.lua에서 세팅해 주죠? 그래서 이 세팅 값에 따라 속도가 느려지루도 빨라질 수도 있습니다.

이것을 방지하기 위해서 time-base로 코딩을 해도 됩니다.

만약에 일정한 움직임에 딱 맞는 sound효과를 주려면 위에 Frame base보다는 아래에 있는 time base가 더 낫겠네요.

local xdirection,ydirection = 1,1
local xpos,ypos = display.contentWidth*0.5,display.contentHeight*0.5
local circle = display.newCircle( xpos, ypos, 20 );
circle:setFillColor(255,0,0,255);
 
local tPrevious = system.getTimer()
local function animate(event)
        local tDelta = event.time - tPrevious
        tPrevious = event.time
        xpos = xpos + ( 0.084*xdirection*tDelta );
        ypos = ypos + ( 0.066*ydirection*tDelta );
 
        if (xpos > display.contentWidth - 20 or xpos < 20) then
                xdirection = xdirection * -1;
        end
        if (ypos > display.contentHeight - 20 or ypos < 20) then
                ydirection = ydirection * -1;
        end
 
        circle:translate( xpos - circle.x, ypos - circle.y)
end
 
Runtime:addEventListener( "enterFrame", animate );

실행 결과는 똑 같습니다.

다만 system.getTimer() 와 event.time으로 time base로 볼의 움직임을 콘트롤 한 것이 다릅니다.

이 time base의 경우에도 디바이스가 메모리가 딸려서 버벅 거린다면 문제가 일어날 수 있겠죠?

이렇게 버벅거리는 경우 아래 코드로 보완 할 수 있다고 하네요.

-- Add the following below the code in the previous example
 
local tSuspend
local function onSuspendResume( event )
        if "applicationSuspend" == event.type then
                tSuspend = system.getTimer()
        elseif "applicationResume" == event.type then
                -- add missing time to tPrevious
                tPrevious = tPrevious + ( system.getTimer() - tSuspend )
        end
end
 
Runtime:addEventListener( "system", onSuspendResume );

이 코드를 아까 time base 코드에 덧 붙이세요.

이 경우는 테스트 해 보기가 어려워서 직접 테스트는 못했는데요.

그냥 사용하면 될 것 같습니다.

오늘은 transition library와 Movieclips 그리고 코딩으로 애니메이션 구현하는 법에 대해서 배웠습니다.

다음시간엔 movieclips보다 조금 더 복잡하지만 세밀한 애니메이션 효과를 낼 수 있는 Sprite Sheets 에 대해서 살펴 보겠습니다.

그럼....

오늘은 주로 이론적인 내용들이 많을 것 같네요.
그래서 코로나에서 제공하는 매뉴얼을 번역했습니다.
원문은 아래 링크를 참조하세요.
http://developer.anscamobile.com/content/application-programming-guide-graphics-and-drawing

스크린에 그려지는 모든 객체는 DisplayObjects에 의해 그려진다.
그러므로 스크린에 표시되는 모든 것은 DisplayObject의 인스턴스 들이다.

Display Objects 생성하기

개발자가 DisplayObject를 바료 생성하지는 않는다.
대신 rectangles, circles,images, text, groups 같은 특별한 종료의 DisplayObject를 생성하게 된다.

DisplayObject의 모든 인스턴스들은 Lua 테이블 처럼 다뤄질 수 있다.
이는 DisplayObject가 미리 선점한 프로퍼티를 제외한 개발자만의 프로퍼티들을 생성해서 사용할 수 있다는 얘기다.
다만 DisplayObject 내의 인스턴스를 소팅하는 기능은 안 된다.

페인터 모델

DisplayObject는 Painter's Model을 사용해서 스크린에 그린다.
먼저 그린게 맨 밑에 깔리고 가장 최근에 그린게 가장 위에 나타난다는 얘기다.

Display Hierarchy

그려진 DisplayObject들의 순서를 관리하기 위해서 이 DisplayObjects들은 hierarchy를 갖게 된다.

Group Objects

이 Hierarchy 는 group objects를 사용해서 구성할 수 있다.
group 객체는 DisplayObject로서 child를 가질 수 있다. child들은 배열로서 관리 된다.
첫번째 child는 index 1이다.  group:insert() 메소드를 사용해 객체들을 Group에 넣을 수 있다.

local square = display.newRect( 0, 0, 100, 100 )
local rect = display.newRect( 0, 0, 100, 100 )
local group = display.newGroup()
group:insert( square )
group:insert( rect )
assert( (group[1] == square) and (group[2] == rect) )

Stage Objects

새로운 객체를 생성할 때마다 이 객체들은 hierarchy 최상단에 있는 특별한 group 객체에 암시적으로 add되게 된다.
이 특별한 group object를 stage object라고 부른다.
(현재 코로나에는 오직 하나의 stage만이 있다. 이 스테이지는 화면 전체를 말한다.)

객체들을 앞, 뒤로 위치 시키기

한번 지정된 객체들의 순서는 불변이 아니다. 순서를 바꿀 수 있다.
group:insert()메소드를 사용해서 객체들의 순서를 재배열 할 수 있다.
local square = display.newRect( 0, 0, 100, 100 )        -- Red square is
square:setFillColor( 255, 0, 0 )                        -- at the bottom.
local circle = display.newCircle( 80, 120, 50 )         -- Green circle is
circle:setFillColor( 0, 255, 0 )                        -- in the middle.
local rect = display.newRect( 0, 0, 100, 100 )          -- Blue rect is
rect:setFillColor( 0, 0, 255 )                          -- at the top.
 
-- square,circle,rect all have same parent
local parent = square.parent
 
-- Move to top. Siblings at higher indices are above those at lower ones
parent:insert( square )         -- same as parent:insert( parent.length, square)
 
-- Move below all other siblings
parent:insert( 1, circle )

객체들은 object:toBack , object:toFront 를 사용해서 위치를 재배열 할 수 있다.

Drawing Cycle

각 객체들이 그려지고 난 후 Lua는 Display Objects 내에 있는 객체가 변경될 때 새로 그리게 된다.
이 변경은 adding, removing, changing 프로퍼티 들에 의해 일어나게 된다.
이 Cycle은 1초당 30~60 회 일어난다. 정확한 숫자는 config.lua에 세팅된 frame rate에 의해 결정된다.
각 싸이클의 시작 지점에서 enterFrame 이벤트가 일어나게 된다. 이러한 리스너들에 대한 실행이 끝난 후 스크린은 업데이트 된다.

Coordinates and Transforms

스크린에 무엇인가를 그릴 때의 기준은 좌표이다. 코로나는 좌측 최 상단을 좌표 0,0 으로 인식한다.
각 객체에 대한 좌표도 각 객체의 좌측 상단에서 부터 시작한다.

Coordinates

포지션을 정의하는데에는 Cartesian coordinate system (일명 rectangular coordinate system 또는 데카르트 좌표계) 이 사용된다.
참조 http://blog.naver.com/destinycs?Redirect=Log&logNo=140113963405
       http://www.kyungmoon.com/bookstory/story_1_5.htm
원래의 데카르트 좌표계와는 다르게 스크린의 원점은 좌측 상단이다. 그러므로 오른쪽으로 갈수록 x좌표값은 증가하고 아래쪽으로 갈수록 y좌표값이 증가한다. (y 좌표값이 데카르트 좌표계와 반대이다.)
각 객체들은 좌표값을 이동시키거나 회전시킬수 있다. 이 경우 원래의 좌표값은 따로 가지고 있다. 객체 r을 예로 들면 r.xOrigin, r.yOrigin이 원래의 좌표값이다.
객체가 만들어 졌을 때 그 객체는 screen에 소속 된다. 그 다음 어느 한 그룹에 배속 됐을 때 그 객체는 그룹에 소속되게 된다. 이에 따라 좌표 계산도 달라지게 된다.
객체가 회전 등을 할 경우 이 참조 좌표는 r.xReference, r.yReference 로 알 수 있다.

Changing Position of Object

객체의 포지션을 바꾸려면 x,y 좌표를 이용해서 바꾸면 된다. (xOrigin,yOrigin을 바꿔도 되지만 권장할만한 방법은 아니다.)
Reference Point는 그 객체의 중앙이 된다. 이 레퍼런스 포인트를  좌측상단으로 바꾸려면 아래와 같이 한다.
(object:setReferencePoint(display.TopLeftReferencePoint)

Transforms

Transformation 은 기하학적인 법칙이 적용되고 다음과 같은 규칙을 따른다.
1. 객체의 크기 변형은 reference Point를 사용한다. (object.xScale, object.yScale)
2. 객체의 회전은 object.rotation degree reference Point를 이용한다.
3. origin을 이동실킬 때는 object.x, object.y를 이용한다.

object:scale(), object:rotate() object:translate() 처럼 파라미터를 사용하지 않고 함수를 사용하는 명령어는 origin이 아니라 그 이전 객체 상태에서 변형을 하게 된다.

Object References

객체들의 순서를 재배열 하기 위해서는 integer 값을 사용해서 그룹의 children에 접근한다. 하나의 child를 위로 위치시키면 이 이후의 모든 children들의 순서값도 바뀌게 된다.
태양계 행성들을 예를 들어 설명하겠다.
local planetFiles = { sun="sun.png", mercury="mercury.png",
   venus="venus.png", earth="earth.png", mars="mars.png",
   jupiter="jupiter.png", saturn="saturn.png", neptune="neptune.png",
   uranus="uranus.png", pluto="pluto.png" }
 
local solarSystem = display.newGroup()

이렇게 planetFiles 테이블에 각 행성 이름과 이미지 이름을 대입 시킵니다.
그리고 solarSystem이라는 그룹을 생성합니다.
그 다음은 이미지 객체를 생성하기 위해서 특별한 iterator 인 ipairs를 사용합니다. 이것은 프로퍼티 이름과 파일 이름을 리턴하게 됩니다. 이 파일 이름으로 실제 이미지파일을 로드하게 될 겁니다.
프로퍼티 이름은 그룹에 이 프로퍼티들을 할당하는데 사용합니다. 이럼으로서 단지 숫자로만 테이블 내의 객체들을 다룰 때보다 덜 헛갈리게 작업을 할 수 있습니다.
-- Loop through all the files, load the image, assign property in the group for key,file in pairs( planetFiles ) do
        -- key will be "sun", "mercury", etc.
        -- file will be "sun.png", "mercury.png", etc.
        local planet = display.newImage( file )
   solarSystem:insert( planet )
   solarSystem[key] = planet
end
 
-- Afterwards:
-- solarSystem.sun will refer to the image object for "sun.png",
-- solarSystem.mercury will refer to the image object "mercury.png",
-- etc.
만양 이 중에 하나를 remove하고 싶으면 두가지 작업이 필요합니다.
첫번째로 hierarchy 로부터 이것을 remove합니다.
두번째로 해당 프로퍼티를 nil로 만들어 줍니다.

Removing Objects Properly

객체를 제대로 remove 하는 것은 아주 중요합니다. 왜냐하면 디바이스는 한정된 메모리를 가지고 있기 때문입니다. 이렇게 함으로서 퍼포먼스 향상을 얻을 수 있습니다.
이 해당 객체가 더 이상 스크린에 표시 될 필요가 없다면 다음의 두가지 방법으로 display hierarchy에서 없앱니다.
image.parent:remove( image ) -- remove image from hierarchy
-- or --
image:removeSelf( ) -- same as above

이렇게 되면 이 이미지 객체는 garbage collected 됩니다. 이 이미지를 확실하게 없애려면 한단계 더 필요합니다.
이에 대해서는 아래 variable References에서 살펴 봅니다.
(그룹을 없애면 그 그룹내의 모든 리스너와 texture 들을 없애게 됩니다. 그리고 display object 변수들은 simple 한 루아 테이블로 바뀌게 되고 이 것은 garbage collect에 남게 됩니다. )

variable References

display obeject가 hierarchy에서  remove 되었더라도 아직 그 객체는 존재한 상태 일 수 있습니다. 가비지 컬렉터에서도 이 남아있는 정보들을 없애려면 아래와 같이 합니다.
local sun = solarSystem.sun
sun.parent:remove( sun ) -- remove image from hierarchy
solarSystem.sun = nil -- remove sun as a property of solarSystem

화면에 보이지 않더라도 객체가 계속 display object 에 남아 있는 경우가 있는데 이 경우 nil을 부여해 확실하게 없앨 수 있습니다.

만약에 글로벌 변수가 display object 에 할당 돼 있으면 얘기가 조금 달라집니다.
hierarchy 에 있지 않아도 글로벌 변수는 계속 존재합니다.
이 경우 글로벌 변수에도 따로 nil을 대입해야 합니다.

만약 함수가 함수 밖에 있는 로컬 변수를 참조하고 있다면?

local sun = solarSystem.sun
 
function dimSun()
        sun.alpha = 0.5 -- sun was declared outside the function block
end

보시면 이 함수는 글로벌입니다. 그래서 저 이미지는 계속 남아 있습니다.

아래와 같이 하면 그러한 위험을 없앨 수 있고 또한 이 함수가 다양한 display object를 처리 할 수도 있습니다.

local sun = solarSystem.sun
 
function dim( object )
        object.alpha = 0.5
end

Common Pitfalls 흔히 실수 하는 것들

흔히 그룹 내의 모든 객체들을 확실하지 않게 remove 하는 실수 들을 하게 됩니다.
아래 예제는 제대로 remove 하지 못한 경우입니다.

for i=1,solarSystem.numChildren do
        local child = solarSystem[i]
        child.parent:remove( child )
end

이 경우  우리는 다른 collection (다른 그룹의 children 배열) 수정하게 됩니다. 결과는 다른 collection의 children을 없애게 됩니다.

아래 소스를 실행해 보시고 분석해 보세요. 그리고 위에 소스를 어떻게 고쳐야 할지 생각해 보세요.

local array = {1,2,3,4,5,6,7,8,9,10}
print( table.concat( array, " " ) ) --> 1 2 3 4 5 6 7 8 9 10
 
for i=1,#array do
        table.remove( array, i )
end
 
print( table.concat( array, " " ) ) --> 2 4 6 8 10

위에 소스를 고치려면 아래와 같이 합니다.
for i=solarSystem.numChildren,1,-1 do
        local child = solarSystem[i]
        child.parent:remove( child )
end

이러면 모든 children이 hierarchy에서 remove 됩니다.
물론 가비지 콜렉터에서마저 없애려면 모두 nil값을 대입 시켜야죠.

그냥 대충 보고서는 제가 이해하지 못해서 원문을 그냥 번역해 봤습니다.
이론이고 그림 없이 글자들만 있으니까 이해하기 힘드네요.
하지만 이렇게 번역을 해 보면서 많이 이해 된 것 같습니다.
이걸 가지고 또 실습을 해 보면 더 확실히 이해 하겠죠.

한 김에 Bitmap Mask 까지 하겠습니다.

Bitmap Mask

아래 두개의 이미지를 사용할 겁니다.

그리고 아래 소스를 main.lua에 넣고 실행 해 보세요.

local img=display.newImage("endinggreen.png",50,50)
local mask=graphics.newMask("podium.png")
img:setMask(mask)
img.maskRotation =30
img.maskX = 20
img.maskY=10
--img.maskScaleX=2
--img.maskScaleY=1
--img.maskRotation = 5

그러면 아래와 같은 이미지가 나옵니다.

뭔가 두개의 이미지가 합쳐져서 희한하게 나오죠?
영화 마스크 보면 짐캐리가 마스크를 쓰면 완전히 다른 사람이 되던데.. 그 마스크가 생각나네요.

코로나의 비트맵 마스크는 이미지를 비트맵으로 사용하고 이것을 다른 display object에 적용할 수 있도록 합니다.
코로나는 마스크로 정의된 이미지를 우선 흑백(grayscale)으로 바꿉니다. 흰색은 없앴다네요.
이 비트맵 마스크는 다른 display objects에 적용가능한데요 텍스트와 native display objects에는 안 된다고 하네요.

한번 마스크로 설정된 이미지는 다른 일반 이미지 객체로 불러올수 없다고 합니다. 그 반대도 마찬가지구요.  iOS, 안드로이드, 코로나 시뮬레이터에서 작동합니다.

디바이스에 따라 마스크 갯수에 제한이 있답니다. 넥서스 원은 2개 iPhone 3G 는 8개 입니다.

신택스는 graphics.newMask() ,local mask = graphics.newMask( filename [, baseDir] ) 입니다.

object:setMask() 로 마스크를 적용하고 object:setMask(nil)로 remove 합니다.
프로퍼티들엔 아래와 같은 것들이 있습니다.
object.maskX
object.maskY
object.maskScaleX
object.maskScaleY
object.maskRotation
이 프로퍼티들을 위 소스에 대입하면서 감을 잡으시면 도움이 되실 겁니다.

이상으로 Images, Shapes and Text 에 대한 걸 마쳤습니다.

후반부엔 조금 이론적인 내용들이 많아서 힘들었습니다.

다음엔 코드 작성하고 객체들이 막 움직이고 하는 Animation and Motion 을 하겠습니다.

그럼...

어제 애플(Apple)이 아이폰을 발표했는데 iPhone 5 가 아니라 iPhone 4S 였군요. 새로워진 것도 별로 없고... 안드로이드 진영에선 이미 다 구현 한 것들이구.
실망이 이만 저만이 아니겠는데요. 잡스 없는 애플이 이제 내리막 길로 가는 것은 아닌지......
우리나라의 삼성과 LG 에는 아주 좋은 기회가 될 듯 합니다.
1년 넘는 기간 동안 그정도 밖에 준비 못했다니..... 애플 완전 실망...

오늘은 코로나 SDK (Corona SDK) 에서 다각형 그리기 부터 하겠습니다.

코로나에서는 벡터 객체를 사용해서 다각형을 그립니다. 벡터 객체는 DisplayObject의 특별한 타입 입니다.
우선 사각형, 모서리가 둥근 사각형, 원 그리는 신택스를 보겠습니다.

display.newRect( [parentGroup,] left, top, width, height )
parentGroup은 옵션이구요. 이건 나중에 볼께요. 우선 좌측과 상단 값을 넣어서 좌상단 꼭지점의 위치를 정하고 너비와 높이 값을 주어서 사각형을 선언합니다. 여기서 색을 지정하는 건 없네요. 메소드를 사용해서 색을 지정할까요? 잠시후에 보죠.

display.newRoundedRect( [parentGroup,] left, top, width, height, cornerRadius )
모서리가 둥근 사각형은 위의 사각형과 같구요. 다만 맨 마지막에 모서리에 그릴 곡선의 반지름 값을 넣으면 됩니다.

display.newCircle( [parentGroup,] xCenter, yCenter, radius )
원은 원 중심의 x,y 값을 넣고 반지름 값을 넣습니다.
   
strokeWidth (테두리선)는 아래와 같이 파라미터를 사용해서 정해 줍니다.
object.strokeWidth = 픽셀
색 지정은 아래와 같이 메소드를 사용합니다.
object:setFillColor(r,g,b[,a]) , object:setStrokeColor(r,g,b[,a])
a는 알파값(투명도) 로 옵션 입니다. 들어갈 값은 0~255 사이에 있는 수입니다.

라인 그리기는 display.newLine(x1,y1,x2,y2) 을 사용합니다.
그리고 라인과 라인을 연결하면 다각형을 만들 수 있는데요. 이것은 object:append()를 사용합니다.

아래 샘플 코드를 작성하고 실행 해 볼까요.
 local star = display.newLine( 0,-110, 27,-35 )
  star:append( 105,-35, 43,16, 65,90, 0,45, -65,90, -43,15, -105,-35, -27,-35, 0,-110 )
  star:setColor( 255, 102, 102, 255 )
  star.width = 3

별을 그리는 코드인데요.
별 모양이 왼쪽 위에 반만 나와 있죠?
이 라인 위치와 색 그리고 width 등은 여러분들이 바꾸면서 익혀 보세요.
남의 소스를 자기 맘대로 막 고치면서 이해도 더 잘 되고 실력도 더 많이 늘더라구요.

아래는 코로나에서 제공하는 샘플 코드인데요. (Graphics/PolyLines)
한번 실행해 보세요.
--
-- Abstract: PolyLines sample app, demonstrating how to draw shapes using line segments
-- Version: 1.0
-- Sample code is MIT licensed, see http://developer.anscamobile.com/code/license
-- Copyright (C) 2010 ANSCA Inc. All Rights Reserved.
-- Example of shape drawing function
local function newStar()
    -- need initial segment to start
    local star = display.newLine( 0,-110, 27,-35 )
    -- further segments can be added later
    star:append( 105,-35, 43,16, 65,90, 0,45, -65,90, -43,15, -105,-35, -27,-35, 0,-110 )
    -- default color and width (can also be modified later)
    star:setColor( 255, 255, 255, 255 )
    star.width = 3
    return star
end

-- Create stars with random color and position
local stars = {}

for i = 1, 20 do
    local myStar = newStar()
   
    myStar:setColor( math.random(255), math.random(255), math.random(255), math.random(200) + 55 )
    myStar.width = math.random(10)
   
    myStar.x = math.random( display.contentWidth )
    myStar.y = math.random( display.contentHeight )
    myStar.rotation = math.random(360)
   
    myStar.xScale = math.random(150)/100 + 0.5
    myStar.yScale = myStar.xScale
   
    myStar:setReferencePoint( display.CenterReferencePoint )

    local dr = math.random( 1, 4 )
    myStar.dr = dr
    if ( math.random() < 0.5 ) then
        myStar.dr = -dr
    end

    table.insert( stars, myStar )
end

function stars:enterFrame( event )

    for i,v in ipairs( self ) do
        v.rotation = v.rotation + v.dr
    end
end

Runtime:addEventListener( "enterFrame", stars )

저는 사용하던 소스에 위 소스를 덧 붙였더니 위 화면같이 나옵니다.
지금 까지 배운 걸로도 이 소스를 충분히 분석할 수 있을 것 같은데요.
나중에 샘플 코드 분석할 때 시간 되면 이 소스도 함 자세히 분석해 보죠.
오늘은 Text, Group, Stage 등 앞으로 나갈 진도가 더 있어서 계속 진도 나가겠습니다.

TEXT
우리가 작성한 소스에 이미 Text 사용하는게 있는데요.
local textObj = display.newText("A short string", 0,0, nil, 26);
display.newText 를 사용하고 그 안에 텍스트와 x,y 좌표 그리고 폰트(여기선 nil), 글자 사이즈 이렇게 들어갑니다.
현재 사용하고 있는 폰트를 알아내시려면 native.getFontNames() 함수를 사용합니다.
디폴트 폰트는 native.systemFont , native.systemFontBold 입니다.
object.size - 텍스트 사이즈를 정합니다. (=숫자 를 덧붙이시면 됩니다.)
object.setTextColor(r,g,b[,a]) -  텍스트 칼라를 지정합니다.
파라미터는 . 를 사용하고 메소드는 : 를 사용하는건 이제 아시겠죠?
값을 대입 시키는 것도 대부분 파라미터는 = 숫자 , 문자 등등 을 사용하고 메소드는 () 안에 인수값을 넣구요.

원하는 폰트를 사용하시려면 우선 폰트 파일 (.ttf) 이 있어야 되고 이것을 building.settings 파일에 아래와 같이 세팅해 줘야 합니다.
settings =
{
        iphone =
        {
                plist =
                {
                        UIAppFonts =
                        {
                                "Harrowprint.ttf"
                        }
                },
        },
}
이것은 아이폰 일 경우만 해당되고 안드로이드용은 이 build.settings 파일에 세팅을 하지 않아도 됩니다.

Groups

이  Group 객체도 DisplayObject의 특별한 타입 중 하나입니다.
display.newGroup() 으로 그룹을 생성합니다. 그리고 이 그룹에 객체들을 insert 하고 각 객체들에 대한 접근은 테이블(배열) 에서 접근하는 것처럼 index 1번 부터 시작합니다.
그룹 생성 및 인서트는 아래와 같이 합니다.
 local group = display.newGroup()
  group:insert( rect1 ) -- assume rect1 is an existing display object
  group:insert( rect2 ) -- assume rect2 is an existing display object

만약 그룹 2개를 생성하고 한 객체를 두군데 모두 삽입했다면 코로나가 알아서 마지막 insert문만 적용하도록 만듭니다.
local txt=display.newText('Hello',0,0)
local g1=display.newGroup()
local g2=display.newGroup()
             
-- Insert text object into g1
g1:insert(txt)              
-- Insert same text object into g2
g2:insert(txt)
 
print("g1[1]: " .. tostring(g1[1])) -- prints nil
print("g2[1]: " .. tostring(g2[1])) -- prints textObject    

그룹을 없애려면 remove를 사용합니다. group:remove(indexOrChild)

이 그룹은 여러 객체를 하나의 객체처럼 사용할 때 편리합니다.

Stage

스테이지도 GroupObject의 특별한 타입 중 하나입니다.
스테이지는 모든 display 객체들의 root group입니다.
현재의 스테이지는 아래와 같이 접근 할 수 있습니다.
display.getCurrentState()

다른 Display함수들을 보면 아래와 같은 것들이 있습니다.
display.captureScreen(saveToAlbum) 화면을 캡쳐해서 이미지로 만듭니다. saveToAlbum 이 true이면 그 이미지를 디바이스(핸드폰) 의 앨범에 저장합니다.
시뮬레이터일 경우에는 데스크탑 컴퓨터에 저장합니다.

display.save(displayObject,filename[,baseDirectory])
해당 객체를 JPEG 이미지로 filename에서 지정한 이름으로 바꿔 줍니다.

display.setStatusBar(mode) mode가 display.HidenStatusBar이면 아이폰의 스테이터스 바가 화면에 나오지 않습니다. 관련된 argument들엔 다음과 같은 것들이 있습니다.

    * display.HiddenStatusBar
    * display.DefaultStatusBar
    * display.TranslucentStatusBar
    * display.DarkStatusBar

Size 관련된 프로퍼티들엔 아래와 같은 것들이 있습니다.
display.contentWidth - 스크린 너비가 픽셀단위로 나타납니다. config.lua에서 픽셀 말고 다른 것으로 설정해 놨으면 그 값이 나타납니다.
display.contentHeight - 스크린 높이가 나타납니다.
display.viewableContentWidth - 다이나믹 스케일 모드일 때 유용하게 사용할 수 있습니다. 해당 객체의 너비를 나타냅니다.
display.viewableContentHeight - 해당 객체의 높이를 나타냅니다.
display.statusBarHeight - 상태 바의 높이를 픽셀로 나타냅니다. iOS에서만 적용됩니다.

Display Object 대 Table

DisplayObject와 Table은 유사한 점이 많습니다. 다른 점은 Display Object의 메타테이블을 세팅할 수 없다는 겁니다.
내부적으로 코로나의 DisplayObject는 native C++객체를 사용합니다.

오늘은 여기까지 알아봤구요.

다음 시간에 Display Object 와 Stage에 대해 좀 더 자세히 예제와 함께 알아보겠습니다.

감사합니다.