반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


어제 세계 최고의 기획자로 부터 야바위 게임 스토리 보드를 전달 받았습니다.
기획자가 너무 훌륭해서 스토리 보드만 가지고도 충분히 코딩을 할 수가 있겠네요. ^^
기획자로부터 자세히 설명을 듣고 이렇게 스토리보드 까지 받았습니다.

이제 프로그래머는 나름대로 objects 들과 함수들에 대한 설계를 했을 테고 또 Flow Chart 를 그려서 어떻게 앱이 진행될지 그려 보았을 겁니다.

좀 더 완벽하게 준비하는 스타일의 개발자라면 Use Case 도 한번 정리 해 봤겠죠...
물론 이 내용들은 하나의 문서에 정리 돼 있겠구요.

이제 코딩을 시작하겠습니다.

display.setStatusBar(display.HiddenStatusBar)
-- Graphics-- [Background]
local bg = display.newImage('bg.png')

일단 아이폰에서 status bar 를 안보이도록 하구요.
백그라운드 이미지는 앱이 시작하면서 끝날때까지 유지 되니까 함수(function) 내가 아니라 이렇게 앱 시작하면서 display를 해 놓습니다.

그 다음엔 각 objects를 담을 변수들을 만듭니다.

-- [Title View]
local title; local playBtn; local creditsBtn; local titleView

여긴 게임 첫 화면에 나올 objects를 정리했습니다.
게임 제목과 플레이 버튼,크레딧 버튼이구요. 이 첫 화면 객체들을 담을 그룹으로 titleView를 사용할 겁니다.

-- [Credits]
local creditsView -- 첫 화면에서 나올 credit 이미지가 들어갈 변수입니다.

-- [Bank Credits]
local bank; local bankText

게임 화면에서 좌측 상단에 들어갈 숫자(bank)와 이미지(bankText) 변수 입니다.

-- [Shells]
local s1; local s2; local s3; local shells;

3개 shell에 대한 변수 이구요. 이 3개 shell 들을 담을 로컬그룹 변수 shells입니다.

-- [Ball]
local ball -- ball 이미지를 담을 변수입니다.
-- [Button Bar]
local buttonBar -- 아래 진한 색 네모를 표시할 이미지를 담을 변수입니다.
-- [Bet Button]
local betBtn     -- 게임 시작 버튼 이미지를 담을 변수 입니다.
-- [Message Text]
local msg        -- 왼쪽 아래 안내 문구를 담을 변수 입니다.
-- [GameView]
local gameView  -- Game 화면에 있는 모든 변수
-- [Alert]
local alert-- alert 이미지 담을 변수
local moveSpeed = 600  -- shell 움직이는 스피드
local totalMoves = 5      -- shell 움직이는 횟수

자 여기까지 야바위 게임에서 사용할 모든 objects에 대한 변수를 선언했습니다.
세계최고의 기획자가 스토리보드에서 언급한 모든 객체를 생성했구요.
또 프로그래머가 화면 전환할 때 사용하기 위해 각 화면별 objects들의 localGroup으로 사용할 변수들도 선언했습니다.
그리고 스피드,움직이는 횟수같은 개념적인 객체에 대한 변수까지 다 선언했습니다.
변수의 갯수가 총 20개네요.
20개의 objects들이 이 게임을 만들어 나갈겁니다.
출연자들이죠. 주연도 있고 조연도 있고...
이제 스토리보드 대로 (시나리오대로) 움직임을 만들 차례입니다.

그러기 위해 함수(메소드)를 선언합니다.

-- Functions
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local placeBet = {}
local randomShellMove = {}
local checkMovesLeft = {}
local revealBall = {}
local alert = {}

이 앱에서는 총 10개의 메소드가 사용됩니다.

-- Main Function
function Main()
    title = display.newImage('title.png', display.contentCenterX - 123, 40)
    playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
    creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
    titleView = display.newGroup(title, playBtn, creditsBtn)
  
    startButtonListeners('add')
end

첫번째 함수는 Main()함수입니다.
이 소스코드 맨 마지막을 보시면 이 메인 함수를 호출합니다.
Main() 부분이죠. 그러니까 이 앱은 이 Main()부터 시작합니다.
그러니까 첫화면에 display될 제목과 플레이/credit 버튼을 화면에 그립니다.
그리고 이 title화면의 객체들을 titleView라는 localGroup으로 그룹화 합니다.
(여기서 bg는 빠졌습니다. 왜냐하면 bg는 모든 화면에 다 등장할 거거든요.)

그리고 startButtonListeners()라는 함수에 add라는 인수를 전달하면서 호출합니다.

function startButtonListeners(action)
    if(action == 'add') then
        playBtn:addEventListener('tap', showGameView)
        creditsBtn:addEventListener('tap', showCredits)
    else
        playBtn:removeEventListener('tap', showGameView)
        creditsBtn:removeEventListener('tap', showCredits)
    end
end

메인에서 호출된 함수인데요.
메인에서 add를 인수로 던졌죠?
안에 내용을 보니까 add가 인수일 경우에는 플레이버튼과 크레딧 버튼에 리스너를 답니다.
플레이버튼을 누르면 showGameView() 함수를 실행하고 크레딧버튼을 누르면 showCredits() 함수를 실행하게 됩니다.
만약 인수가 add가 아니라면 이 두 리스너를 remove합니다.

우선 크레딧 버튼을 눌렀을 때 실행될 showCredits() 함수를 보겠습니다.

function showCredits:tap(e)
    playBtn.isVisible = false
    creditsBtn.isVisible = false
    creditsView = display.newImage('credits.png')
    transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

메인함수에서 크레딧 버튼을 누르면 실행되는 함수입니다.
처음에 플레이 버튼과 크레딧 버튼을 안 보이도록 만듭니다.
그리고 creditsView 이미지를 만들구요. 이 이미지를 transition합니다.
0.3초동안 왼쪽에서부터 서서히 나올 겁니다.
이미지가 다 나오면 이 이미지에 리스너를 답니다.
이 creditsView 이미지를 클릭하면 hideCredits() 함수가 실행 됩니다.

function hideCredits:tap(e)
    playBtn.isVisible = true
    creditsBtn.isVisible = true
    transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

크레딧 이미지를 클릭하면 실행되는 함수 입니다.
아까 안 보이도록 했던 플레이버튼과 크레딧 버튼을 모두 다시 보이도록 합니다.
creditsView를 transition.to를 이용해서 왼쪽으로 사라지도록 합니다.
다 사라지면 아까 만들었던 creditsView에 대한 리스너를 remove합니다.

여기까지가 첫 화면에서 크레딧 버튼을 누르고 나서 다시 원래 화면으로 돌아오기 까지 진행시키는 함수들 입니다.

다음엔 첫 화면에서 플레이 버튼을 누르면 실행되는 showGameView() 함수입니다.
본격적으로 게임이 시작 되는 부분입니다.

function showGameView:tap(e)
    transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
    -- [Bank Credits]
    bank = display.newText('5', 18, 5, native.systemFontBold, 14)
    bank:setTextColor(234, 170, 12)
    bankText = display.newImage('bankText.png', 7.5, 25)

    -- [Ball]
    ball = display.newImage('ball.png', 228, 142)
  
    -- [Shells]
    s1 = display.newImage('shell.png', 50, 114)
    s2 = display.newImage('shell.png', 195, 84)
    s2.name = 's2'
    s3 = display.newImage('shell.png', 340, 114)
    shells = display.newGroup(s1, s2, s3)
  
    -- [Button Bar]
    buttonBar = display.newImage('buttonBar.png', 0, 270)
    msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
    betBtn = display.newImage('betBtn.png', 223, 275)
  
    betBtn:addEventListener('tap', placeBet)
  
    gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn)
end

실제 게임화면으로 넘어오면 처음에 실행되는게 이전 화면의 객체들을 없애는 작업입니다.
아까 첫 화면 객체들은 titleView라는 localGroup으로 그룹화를 했었습니다.
transition.to를 이용해서 이 titleView를 왼쪽으로 이동시키고 다 이동되면 startButtonListener에 rmv라는 인수를 전달하면서 실행시킵니다.
startButtonListener는 아까 add를 인수로 전달하면서 불렀던 함수인데요.
인수가 add가 아니면 첫 화면의 플레이버튼하고 크레딧 버튼의 리스너를 remove하도록 돼 있었습니다.
그러니까 첫화면의 객체들을 사라지게 하고 이 객체들에 할당된 리스너들도 다 remove 한 겁니다.
그 다음으로는 text를 출력할 bank를 만들고 위치시켜주고 색도 지정합니다.
그리고 bankText 이미지도 지정된 위치에 display합니다.
다음은 ball 이미지를 지정된 위치에 display하구요. shell 3개를 나란히 display합니다.
여기서 ball이 들어가 있게 될 shell은 별도로 name을 s2라고 할당합니다.
그리고 이 shell들을 shells라는 변수에 그룹화 시켜 놓습니다.
다음에 하단에 buttonBar를 표시하고 msg Text를 표시합니다.
그리고 betBtn을 표시하고 이 이미지에 리스너를 답니다.
이 이미지를 누르면 paceBet() 함수가 실행됩니다.
맨 마지막에는 이 게임 화면에 있는 모든 objects를 gameView변수로 그룹화 합니다.
나중에 화면전환 할 때 사용하기 위해서 입니다.


function placeBet:tap(e)  
    -- Place Bet
    bank.text = bank.text - 1;
    -- Remove Button Listener
    betBtn:removeEventListener('tap', placeBet)
    -- Change Msg
    msg.text = ''
    -- Reset Total Moves
    totalMoves = 5
    -- Hide Ball
    transition.to(s2, {time = moveSpeed, y = s2.y + 30, onComplete = randomShellMove})
end

betBtn을 누르면 실행 될 placeBet()함수입니다.
이 함수에서는 bank.text를 -1해서 다시 display합니다.
그리고 betBtn이미지의 리스너를 remove합니다.
다음으로는 msg.text를 아무것도 표시하지 않도록 고치구요.
shell이 몇번 움직일지 그 숫자를 다시 지정합니다.
(지금은 초기 설정값이랑 같은데 만약에 점점 더 움직이는 횟수를 늘리고 싶으면 이 부분에서 코딩해 주면 됩니다.)
다음은 s2를 아래로 내립니다. 그러면 공을 덮어서 안 보이게 됩니다.
완료 되면 randomShellMove() 함수가 호출 됩니다.

function randomShellMove()
    local randm = math.floor(math.random() * 2) + 1
  
    local shell1 = shells[randm]
    local shell2
  
    if(shell1 ~= 3) then
        shell2 = shells[randm + 1]
    elseif(shell1 ~= 1) then
        shell2 = shells[randm - 1]
    end
  
    ball.isVisible = false
  
    totalMoves = totalMoves -1
  
    transition.to(shell1, {time = moveSpeed, x = shell2.x, y = shell2.y})
    transition.to(shell2, {time = moveSpeed, x = shell1.x, y = shell1.y, onComplete = checkMovesLeft})
end

여기는 3개의 shell을 움직이는 로직입니다.
아마 이 앱에서의 핵심 부분일 겁니다.
이 로직은 여러분이 연구해 보세요.
이것보다 더 좋은 로직을 생각해 보셔도 되구요.
이 로직에 대한 해석은 생략하겠습니다.
하여간 로직대로 shell3개를 5회 움직입니다. 이때 ball은 안보이도록 하구요.
shell2가 다 움직이면 checkMovesLeft()를 호출합니다.

function checkMovesLeft()
    if(totalMoves > 0) then
        randomShellMove()
    else
        s1:addEventListener('tap', revealBall)
        s2:addEventListener('tap', revealBall)
        s3:addEventListener('tap', revealBall)
      
        -- Change Msg
        msg.text = 'Click where the ball is'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    end
end

이 함수에서는 totalMoves를 먼저 체크합니다. 0이 아니면 randomShellMove()함수를 다시 호출합니다. 이렇게 해서 총 5번 randomShellMove()함수가 실행 될 겁니다.
totalMoves가 0 이면 각 shell에 모두 리스너를 답니다.
tap 하면 revealBall함수가 실행되도록이요.
그리고 msg.text는 Click where the ball is 로 바꿔 주시고 그 위치를 바로 잡아 줍니다.

function revealBall:tap(e)
    -- Remove Shell Mouse Listeners
    s1:removeEventListener('tap', revealBall)
    s2:removeEventListener('tap', revealBall)
    s3:removeEventListener('tap', revealBall)
  
    -- Move Ball to correct position
    ball.x = s2.x + 75
    ball.y = s2.y + 150
    ball.isVisible = true
  
    -- Give credits if correct guess
  
    if(e.target.name == 's2') then
        bank.text = bank.text + 2
        -- Change Msg
        msg.text = 'Correct! Click Bet to play again'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    else
        msg.text = 'Wrong! Click Bet to play again'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    end

    -- Reveal Ball
    transition.to(s2, {time = moveSpeed, y = s2.y - 30})
  
    -- Add Bet button listener
    betBtn:addEventListener('tap', placeBet)
  
    -- Check for bank credits
    if(bank.text == '0') then
        betBtn:removeEventListener('tap', placeBet)
            alert()
    end
end

이 함수에서는 호출되면 일단 3개 shell에 할당된 리스너를 모두 remove합니다.
그리고 ball의 위치를 두번째 shell 즉 s2 안으로 위치시키고 이 볼이 보일 수 있게 합니다.
터치한 shell이 s2이면 즉 ball이 있는 shell이면 msg.text를 Correct! Click Bet to play again 으로 표시하고 그 위치를 바로 잡습니다. 그리고 s2가  아니면 Wrong! Click Bet to play again 을 표시하고 그 위치를 잡습니다.
그리고 s2를 transition.to를 이용해서 위로 올립니다. 그러면 ball이 나오겠죠?
이제 게임을 다시 시작할 수 있도록 betBtn에 리스너를 다시 달아줍니다.
만약 bank.text가 0 이면 그 리스너를 다시 없애고 alert() 함수를 실행합니다.

function alert()
    alert = display.newImage('alert.png')
    alert:setReferencePoint(display.CenterReferencePoint)
    alert.x = display.contentCenterX
    alert.y = display.contentCenterY
    transition.from(alert, {time = 300, xScale = 0.3, yScale = 0.3})
  
    msg.text = ''
  
    alert:addEventListener('tap', restart)
end

이 함수에서는 alert이미지를 transition.from을 이용해서 display하구요.
msg.text를 아무것도 표시 안 합니다.
그리고 이 alert이미지에 리스너를 달아서 tap하면 restart()함수가 실행되도록 합니다.

function restart()
    display.remove(gameView)
    gameView = nil
    display.remove(alert)
    alert = nil
  
    Main()
end
이 함수에서는 게임화면에 있는 모든 객체들(gameView)을 remove합니다.
그리고 alert화면도 remove합니다.
그리고 Main()을 실행시켜 게임을 다시 시작하도록 합니다.

Main()
이 부분은 앱이 처음 시작할 때 Main()을 호출하는 부분입니다.

이번엔 야바위게임을 같이 살펴봤습니다.
게임 설계가 아주 모범적으로 잘 돼 있는것 같습니다.

저도 이 모범적인 설계를 배우고 싶어서 공부 자료로 사용했습니다.
코딩이 아주 깔끔하네요.

아래 원래 소스 파일이 있습니다.

반응형

Comment

  1. kang 2012.01.27 06:12

    흐아 ~ 오늘은 야바위를 만들면서 코로나를 아주 조금이나마
    더 알가는 계기가 되어가는 것 같네요,

    항상 좋은 강의 감사합니다.

    혹시 특정 버튼을 터치하면 앱을 종료하게끔 하는 함수를 아시는지
    궁금합니다

    • 솔웅 2012.01.29 05:27 신고

      제 기억으로는 안드로이드에선 두개의 함수가 있었던거 같은데.. exit와 quit 이요. 아마 system.exit()이 아니었나 싶은데요.
      코로나에서는 찾아보니까 os.exit()이 있네요.

  2. named 2012.01.27 13:44

    혹시 게임 타이틀 화면 구성시 버튼에 애니메이션 효과를 주는 클래스는없나요 ? , 제가 따로 만들어보기는 했는데..
    애니메이션이 다 재생되기도 전에 바로 다음 화면으로 넘어가버려서

    뭔가 특정 애니메이션을 1회재생하고 난 뒤에 명령문을 실행해야하는데
    그걸 못하고 있어 난감하네요 ~

    • 솔웅 2012.01.29 05:40 신고

      버튼을 누르면 애니메이션이 한번 시행되고 화면 전환 같은걸 하려고 하시나 보죠?
      찾아보니까 spritesheet를 이용하면 되지 않을까 싶은데요.
      local function spriteListener( event )
      print( "Sprite listener" .. event.name, event.sprite, event.phase,
      event.sprite.sequence
      end

      -- Add sprite listener
      instance:addEventListener( "sprite", spriteListener )
      여기서 리스너에서 event.phase가 끝난 상태이면 그 다음 효과를 주면 될 것 같습니다.
      movieClip에서는 onComplete나 뭐 이런걸 찾았는데 없더라구요.
      여기선 timer 로 1초정도 시간을 주고 다음 화면으로 넘어가는 메소드가 있는 함수를 호출하도록 할 수 있을 것 같습니다.

      감사합니다.

  3. 민낭 2012.01.29 18:01

    솔웅님 샘플코드 분석 항상 고맙게 보고있습니다 ^^
    야바위도 무사히 완료했네요 ~
    다음 포스팅이 기다려집니다 ~

    • 솔웅 2012.01.30 04:09 신고

      감사합니다.
      조만간 다른 샘플코드도 한번 분석해봐야겠는데요.

      좋은 하루 되세요.

  4. named 2012.01.30 03:06

    헛.Director 를 이용해서 화면전환을 하게 되면요,
    특정 이미지에 이벤트리스너를 달은 정보도 넘어가나요?,

    문제가생겼는데..
    화면이 바뀌고 이미지도 싹 다 바꼈는데 그 전 화면에서의 이미지영역에
    터치가 되면 그 동작이 먹더군요..

    • 솔웅 2012.01.30 04:08 신고

      우선 그 리스너를 단 객체(object)를 group화 했는지 살펴보시구요. 그리고 화면 전환 하기 전에 리스너나 타이머는 모두 remove 해 주시는게 좋습니다.
      제 경우엔 메모리가 계속 늘어나서 나중에는 속도가 느려지더라구요.
      전 display object들도 다 remove를 했는데도 계속 메모리가 쌓여서 director 클래스로 작업했던걸 새로 나온 storyboard API로 바꾸었습니다.
      지금 작업하시고 계시다면 storyboard API로 작업 하시기를 추천드리고 싶네요.

      감사합니다.

    • kang 2012.01.30 04:42

      흐아, 프로그래밍이 익숙치 않아 힘드네요 ㅠㅠ
      리스너의 리무브방법은
      remove(이미지이름) 인가요?..
      아니면 다른 형식으로 하는것인가요 ?? ..

      storyboard API 를 한번 보았는데 이해가
      잘되지않아 쉬운 Director 를 사용했는데
      아무래도 다시하는게 낮겠지요? ㅠ ㅠ

      그리고 화면에서 동적으로 생성되는 객체(이미지)들은
      그룹화할 수 가 있나요 ?..

      아직 초기화가 되지않은 테이블 전체를 미리 그룹화 시킬 수 있는지도 궁금하네요 ..

    • 솔웅 2012.01.30 07:52 신고

      Corona SDK 화면전화 API Story Board 라는 글에 보면 샘플예제 중 exitScene 부분에 리스너와 타이머 remove 시키고 cancel 시키는 예제가 있습니다.
      동적으로 생기는 객체들은 동적으로 생길 때 그룹화 하시면 됩니다. 제 글 중 내가 그린 선으로 떨어지는 공 받아내기 예제를 잘 보시면 있습니다.
      그리고 테이블을 그룹화 시키는건 좀 아닌것 같구요. display 객체를 그룹화 시켜야죠. display 객체를 만들 때 그룹화 하시면 될 것 같습니다.

  5. 만두 2013.09.11 19:34

    저 randonshellMove 로직에서 shell2가 자꾸 런타임 에러가 나는데 원인이 뭔지 모르겠네요 ㅜㅜ


    attempt tp index local 'shell2'(a nil value)

    라고 나는데

    transition.to(shell1, {time = moveSpeed, x = shell2.x, y = shell2.y})

    이부분에서 오류가 나는 상황이예요 ㅜㅜ아무리 해도 잘 모르겠네요ㅠㅠㅠㅠ

이전 1 2 3 4 5 6 7 8 9 10 ··· 14 다음