Time Bar 만들기

오늘은 timer.performWithDelay()를 이용해서 시간이 지날수록 점점 줄어드는 Time Bar를 만들어 보겠습니다.

Corona DOC에서 배운 기본 테크닉으로 응용해 본 건데요.

앱을 시작하면 저 흰 Bar가 점점 줄어드는 겁니다.

그럼 소스를 보겠습니다.

--Show a basic white bar
local timeBar = display.newRect( 20, 165, 280, 20 )
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
timeBar.y = 165

--Make the bar shrink over time
local function loseTime (event)
timeBar.width = timeBar.width - 2
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
end
gameTimer = timer.performWithDelay(100,loseTime, 0)

1. display.newRect로 사각형을 그립니다.
    color를 지정해 주지 않았는데 그러면 기본으로 White가 그려집니다.
    display.newRect( [parentGroup,] left, top, width, height )
2. ReferencePoint를 BottomLeft로 줍니다.
    이러면 Rect의 왼쪽 아래가 기준이 되서 x좌표 20 과 y좌표 165 가 그려집니다.
3. timeBar 의 x좌표와 y좌표를 그려줍니다.
    이미 newRect에서 x,y가 설정 돼 있기 때문에 이 부분은 생략되도 됩니다.
    혹시 x,y좌표를 바꿀 필요가 있을 때 이용하시면 됩니다.
4. 그 다음은 loseTime(event) 함수 부분입니다.
   event를 파라미터로 받는 걸로 봐서 어떤 리스너에서 호출되는 겁니다.
   그 리스너는 맨 마지막에 있는 timer.performWithDelay 입니다.
   신택스는 아래와 같습니다.
   timer.performWithDelay( delay, listener [, iterations] )
   위 예제에서는 delay가 100으로 돼 있기 때문에 0.1초마다 한번씩 loseTime을 콜 합니다.
   맨 마지막에 0으로 돼 있는건 이걸 계속 호출한다는 내용입니다.
   3으로 돼 있으면 3번 호출합니다.
5. loseTime(event) 함수 내용은요.
    실행 될 때마다 timeBar의 width를 -2 합니다.
    ReferencePoint는 여전히 BottomLeft로 하고 x좌표는 계속 20으로 합니다.

이런식으로 간단히 Time Bar 효과를 냈습니다.

살펴본 김에 Listener에 대해 자세히 한번 살펴 보고갈까요?

이 예제는 하얀색 Bar는 점점 줄어들고 녹색 공은 좌우로 랜덤하게 움직이는 겁니다.
그리고 Function Listener와 Table Listener에서는 Terminal에 일정 시간별로 print를 하구요.

아래 전체 소스 코드를 보겠습니다.

--Show a basic white bar
local timeBar = display.newRect( 20, 165, 280, 20 )
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
timeBar.y = 165

--Make the bar shrink over time
local function loseTime (event)
timeBar.width = timeBar.width - 2
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
end
gameTimer = timer.performWithDelay(100,loseTime, 0)

-- Function Listener
 local function listener( event )
    print( "Function listener called" )
 end
 
 timer.performWithDelay(500, listener,0 )
 
 -- Table Listener
 local listener1 = {}
function listener1:timer( event )
   print( "Table listener called" )
end
 
timer.performWithDelay(700, listener1,0 )


function newBall()
    local randomPosition = 100 + math.random(200)
    ballPosition = display.newImage("b3.png")
    ballPosition.y = 240
 
    -- wrap spawnBall and randomPosition inside a closure
    local myclosure = function()
        local randomPosition = 100 + math.random(200)
        return spawnBall( randomPosition )
    end
   
    timer.performWithDelay(180, myclosure, 0)
   
    --spawnBall()
    function spawnBall(pos)
        print( "randomPosition = " .. pos )
        ballPosition.x = pos
    end
end

newBall()

Function Listener 윗 부분은 처음에 살펴 봤던 부분이라서 넘어갑니다.

Function Listener는 TimeBar에서 우리가 사용했던 형식 입니다.
일정 시간이 지나면 해당 함수(Function)를 호출합니다.

그 다음 Table Listener 는 Table(배열) 값에 대해 리스너를 달 때 사용합니다.
소스코드와같이 함수를 테이블 이름 : timer(event) 형식으로 답니다.
timer.performWithDelay부분은 같습니다.

newBall()
함수 안에서 함수를 호출하는데 거기서 Parameter를 던져주는 방법에 대한 예제입니다.
처음에는 볼의 이미지를 그리고 그 y좌표를 설정했습니다.

그리고 performWithDelay에서 0.18초마다 myclosure를 호출합니다.
myclosure에서는 random한 값을 만들고 이를 spawnBall에 파라미터를 전달해 주면서 호출합니다.
spawnBall() 함수는 이 랜덤 값 파라미터를 받아서 볼의 x좌표를 세팅해 줍니다.

이렇게 하면 공은 좌우로 아주 랜덤하게 움직입니다.

오늘 샘플 코드는 아래에 있습니다. 그럼 즐공 하세요.

TimeBar.zip