Corona SDK 사용해서 러너 게임 만들기 #2 배경화면&움직이기

이 문서는 하루 패드 마크 다운 에디터를 사용해서 작성하고 있습니다.

코로나

코로나 설치

코로나 SDK를 다운로드 하기위해 다운로드 페이지로 이동한다. 코로나는 Mac OS X과 윈도우를 지원한다. 자신의 플랫폼에 맞는 것으로 다운로드 한다. 다운로드 후 이동하는 페이지에 설치 방법을 동영상으로 자세하게 설명하고 있다.

dmg파일을 열어서 안에 있는 폴더를 통째로 Application 폴더로 복사하면 된다.

코로나 실행

Corona Simulator.app을 실행하거나 print() 함수를 사용하여 로그를 보고 싶다면 Corona Terminal을 실행한다.

에디터

코로나를 위한 무료 IDE는 딱히 없다. 그냥 맥과 윈도우에서 모두 사용할 수 있는 Sublime Text 2를 사용하는 것을 추천한다. Sublime Text 2용 Autocomplete 플러그인이 있다. TextMate 용으로 잘 만들어 놓은 Corona SDK 자동완성 번들이 오픈소스로 있다. 다운로드 (개발자님 감사합니다) Sublime Text 2 사용법에 대해서는 다루지 않을 것이다.

사용 방법은 아래와 같다.

1. 일단 다운로드 받아서 압축을 푼다.
2. Finder 에서 Cmd + Shift + G (Go)를 눌러서 ~/Library/Application Support/Sublime Text 2/Packages/Lua 위치로 이동한다.
3. Corona-SDK.tmbundle 디렉토리의 Syntaxes 와 Snippets 디렉토리 안의 모든 파일을 위의 디렉토리로 복사 또는 옮기기를 한다.
4. 그리고 Sublime Text 2를 재시작 한 후, Cmd+Shift+P 를 눌러서 syntax를 lua로 변경한다.

이후 아래 그림 2, 그림 3과 같이 자동완성 기능을 사용 할 수 있다.

[그림 1]. lua로 syntax 변경 

[그림 2] 

[그림 3] 

프로젝트 만들기

Corona Simulator.app로 실행을 하면 [그림 4]과 같이 코로나 SDK 툴이 나타난다. 새로운 프로젝트를 생성하기 위해서는 ‘New Project‘ 버튼을 클릭한다. [그림 5] 처럼 Create New App 팝업 창이 뜨고 App Name에는 앱 이름을 ‘Cat Runner‘으로 넣고, Choose a Template에서는 ‘Blank‘를 선택한다. Screen Size는 고해상도 iPhone에 맞게 ‘640x960‘으로 변경한다. Default Orientation은 가로화면 모드인 ‘Sideways‘로 선택한다. Next 버튼을 클릭하면 [그림 6] 처럼프로젝트가 성공적으로 만들어졌다는 메세지가 나타나고, 파인더에서 생성한 파일을 볼지, 에디터에서 바로 편집을 할지 선택을 한다. Open in Editor…를 선택해서 바로 편집에 들어가도록 하자.

[그림 4]

[그림 5]

[그림 6]

프로젝트를 생성하면 기본적으로 3개의 파일이 생성된다. 빌드를 위한 build.settings, 애플리케이션의 기본 설정을 위한 config.lua, 그리고 구현을 위한 main.lua가 있다. main.lua가 애플리케이션의 기본 시작하는 곳이다.

배경화면

많은 러너 게임들이 그렇듯이 플레이어 케릭터가 앞으로 나가는 것 처럼 보이지만, 자세히 살펴보면 케릭터는 고정되어 있고 배경화면이 움직인다. 더 완벽하게 보이기위해서 가까이에 있는 배경은 빨리 움직이고, 멀리 있는 배경은 조금 더 천천히 움직인다.

배경화면 넣기

화면에 불피요한 status bar를 제거하기 위해 아래 코드를 넣자.

display.setStatusBar( display.HiddenStatusBar )

저장을 하면 바로 시뮬레이터에서 변경된 것을 확인 할 수 있다. 코로나에서는 파일 편집을 하고 저장하는 순간에 다시 실행해서 바로 반영 한다. Lua가 스크립트언어여서 따로 빌드 과정이 필요없다.

-- 이미지를 추가하는 함수는 아래와 같다. 

--display.newImage( [parentGroup], "filename", [baseDirectory], left, top, isFullResolution )
--아래 처럼 이미지 파일만 넣고 위치 값을 따로 설정 할 수 있습니다.

-- 배경화면 하늘
local background = display.newImage( 'images/background.png', true)
background.x = 400
background.y = 270

-- 배경화면 산
local background21 = display.newImage( 'images/background2.png', true )
background21.x = 600
background21.y = 450

local background22 = display.newImage( 'images/background2.png', true )
background22.x = 1800
background22.y = 450

-- 배경화면 나무
local background31 = display.newImage( 'images/background3.png', true )
background31.x = 600
background31.y = 540

local background32 = display.newImage( 'images/background3.png', true )
background32.x = 1800
background32.y = 540

고정된 하늘은 하나의 배경화면만 있고, 산과 나무는 2개씩 한쌍으로 준비한다. [그림 2]와 같이 하나의 배경화면을 화면 밖에 위치시키고 동시에 움직이고 첫 번째 배경화면이 화면 영역밖으로 벗어나면 다시 두 번째 배경화면의 뒤에 위치시킨다. 이것을 계속해서 반복하면 배경이 무한 반복으로 움직이는 것 처럼 보인다.

배경화면 무한대로 움직이기

cocos2d에서 update() 함수로 스케줄러를 호출하는 것 처럼 코로나에서도 비슷하게 구현하면 된다.

아래와 같이 update() 함수를 하나 생성하고 타이머를 하나 만들어서 만들어진 update() 함수를 무한반복으로 호출 하면 된다.

function update()
    updateBackgrounds()
end

local speed = 1

function updateBackgrounds()
    background21.x = background21.x - (5 * speed)
    background22.x = background22.x - (5 * speed)
    background31.x = background31.x - (15 * speed)
    background32.x = background32.x - (15 * speed)

    if background21.x < -600 then
        background21.x = 1800
    end

    if background22.x < -600 then
        background22.x = 1800
    end    

    if background31.x < -600 then
        background31.x = 1800
    end

    if background32.x < -600 then
        background32.x = 1800
    end    

end

--타이머로 1ms에 한번 씩 update 함수를 무한반복(-1)해서 호출한다. 
timer.performWithDelay(1, update, -1)

1. 우선 update() 함수를 생성해서 배경화면 변경을 updateBackgrounds() 함수를 호출한다.
2. updateBackgrounds() 함수에서는 배경화면 각각에 다른 속도 가중치를 빼준다. 멀리있는 산은 천천히 움직이게 작은 값을 할당하고, 가까이 있는 나무는 빨리 움직이게 큰 값을 할당한다. 그리고 추후에 레벨에 따른 속도 변경을 위해서 speed 변수 값을 곱해서 뺀다.
3. 각각의 배경화면이 기기에서 보이는 화면 영역을 벗어나면 가장 뒤로 보낸다. 이것을 반복한다.
4. 타이머를 하나 만들어서 1ms에 한번 씩 update() 함수를 무한반복(-1)해서 호출한다.

이렇게 하면 [동영상 1] 처럼 배경화면이 무한반복되서 움직이는 것을 확인할 수 있다.

[동영상 1]