화면 전환 Storyboard API 개요

오늘은 이번에 새로 릴리즈된 코로나 버전에서 선보인 Corona SDK Storyboard API에 대해 공부하겠습니다.

이 API가 나오기 전에 코로나에서는 화면전환을 위한 방법으로 우선 모든 display object들을 그룹화하고 그 그룹을 없앤 후 다음 화면의 새 display 그룹을 불러오고 하는 방식으로 사용하도록 제시했었습니다.
그런데 이 방법은 한계가 있었습니다. 예를 들어 한 화면(Scene)의 display 객체들이 별도의 모듈에 있다던지 할 때는 콘트롤 하기가 아주 힘듭니다.

얼마전에 다룬 주제 중에 director.lua 클래스를 이용해서 화면 전환하는 것을 다뤘습니다.
이것은 코로나 SDK를 만든 Ansca 에서 제공한 것이 아니라 Ricardo Rauber 라는 개발자가 개발해서 공유한 3rd party 클래스 입니다. 사실 저도 그렇고 이 리카르도가 배포한 director 클래스를 화면전환할 때 많이 썼습니다.  아마 한 1년 정도는 이 director 클래스가 화면전환에 주로 사용 되어졌을 겁니다.

이제 Ansca에서도 공식적인 화면 전환 API인 Storyboard API 를  Corona build 2011.678 버전에 선보였고 Corona build 2011.703 버전이 무료 사용자에게도 공개 되면서 누구나 사용할 수 있게 됐습니다.

Getting Started

일단 시작해 볼까요?
File-New Project 를 누릅니다.

이런 화면이 나올겁니다.
제가 지금 맥에서 하고 있는데요. 아까 집에서 윈도우즈로 코로나 세버전 다운 받아서 해 보니까 Choose a template에 좀 더 다양한 내용들이 있더라구요.
이번에 코로나가 새로 업그레이드 되면서 많이 변했습니다.
나중에 이 부분은 따로 다룰 기회가 있겠죠?
오늘은 Storyboard API에 대해 공부할 거니까요. 일단  Scene을 체크하고 Next를 누릅니다.
그럼 App Name에 넣은 이름으로 폴더가 만들어지고 그 안에 아래와 같이 4개의 파일이 자동적으로 생길 겁니다.

기본적으로 필요한 파일들을 자동으로 생성해 주네요.
개발하기 훨씬 편해 졌습니다.
여기서 main.lua를 볼까요?
-----------------------------------------------------------------------------------------
-- main.lua
-----------------------------------------------------------------------------------------
local storyboard = require "storyboard"
-- load scenetemplate.lua
storyboard.gotoScene( "scenetemplate" )
-- Add any objects that should appear on all scenes below (e.g. tab bar, hud, etc.):

storyboard를 require하고 storyboard.gotoScene("scenetemplate") 했습니다.

자 이제 이 내용들을 공부해 보겠습니다.

The Basics

우선 Storyboard API를 보세요.
처음에 있는 Scene Template이 아까 만들어진 파일 중에 있는 scenetemplate.lua 입니다.
이것은 조금 후에 공부하겠습니다.
그 다음엔 어떤 함수(메소드)들이 있는지 한번 이름만이라도 보고 갈까요?
getPrevious()는 이전 Scene 정보를 얻는 걸테고 getScene은 현재 정보 그리고 gotoScene()은 다음에 넘어갈 Scene(화면)으로 갈 때 사용하는 함수 일 겁니다.
newScene()은 새로운 화면을 만드는 것 같고 purgeAll(), purgeScene(),removeAll(), removeScene() 함수들은 화면을 없애는 것과 관련이 있을 겁니다.

자세한 내용과 사용법은 나중에 다뤄 보겠습니다. 오늘은 간단히 개요만 볼께요.

Loading Scenes

가장 기본적으로 Scene을 로드 하는 방법은 아래와 같습니다.
local storyboard = require "storyboard"
    storyboard.gotoScene( "scene1" )
여기서 scene1은 scene1.lua 파일의 내용으로 가라는 겁니다.
여기서 알아두어야 할 것은 이 scene1.lua는 scenetemplate.lua에 있는 규칙에 맞게 작성 되어져야 합니다.
gotoScene()함수는 다음 화면으로 가도록 하는 함수입니다.

Scene Events

각 화면(Scene)에는 여러 이벤트가 있어서 이 이벤트 별로 콘트롤이 가능합니다.
즉 scene1.lua에서 이 이벤트 가지고 콘트롤 하게 된다는 얘기 입니다.
storyboard API에는 4가지 이벤트가 있습니다.
이 이벤트를 핸들링 하려면 해당 리스너를 셋업 해야 하겠죠?
이 예제는 아까 생성됐던 scenetemplate.lua 파일에 소개 돼 있습니다.
조금 후에 볼께요.

createScene
storyboard.gotoScene()이 call 되고 새 화면이 display 될 때 동작을 합니다.
enterScene
storyboard.gotoScene()이 call되고 transition이 완료된 직후에 동작합니다.
exitScene
gotoScene()이 call되고 transition이 막 일어나기 전에 동작합니다.
이것은 현재의 Scene에 해당 되는 거겠죠? 이전에 두개는 그 다음 Scene에 해당하는 거구요.
destroyScene
display group이 removed 되기 바로 전에 동작합니다. 그리고 storyboard.purgeScene()이나 storyboard.removeScene()을 call 했을 때도 동작합니다.

지 이제 Scene Template를 보겠습니다.
----------------------------------------------------------------------------------
-- scenetemplate.lua
----------------------------------------------------------------------------------
local storyboard = require( "storyboard" )
local scene = storyboard.newScene()
----------------------------------------------------------------------------------
--    NOTE:
--    Code outside of listener functions (below) will only be executed once,
--    unless storyboard.removeScene() is called.
---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
-- BEGINNING OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------
-- Called when the scene's view does not exist:
function scene:createScene( event )
    local group = self.view
 -----------------------------------------------------------------------------
    --    CREATE display objects and add them to 'group' here.
    --    Example use-case: Restore 'group' from previously saved state.
----------------------------------------------------------------------------
end
-- Called immediately after scene has moved onscreen:
function scene:enterScene( event )
    local group = self.view
-----------------------------------------------------------------------------
    --    INSERT code here (e.g. start timers, load audio, start listeners, etc.)
----------------------------------------------------------------------------
end
-- Called when scene is about to move offscreen:
function scene:exitScene( event )
    local group = self.view
-----------------------------------------------------------------------------
    --    INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)
-----------------------------------------------------------------------------
end
-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )
    local group = self.view
----------------------------------------------------------------------------
    --    INSERT code here (e.g. remove listeners, widgets, save state, etc.)
-----------------------------------------------------------------------------
end
---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------
-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )
-- "enterScene" event is dispatched whenever scene transition has finished
scene:addEventListener( "enterScene", scene )
-- "exitScene" event is dispatched before next scene's transition begins
scene:addEventListener( "exitScene", scene )
-- "destroyScene" event is dispatched before view is unloaded, which can be
-- automatically unloaded in low memory situations, or explicitly via a call to
-- storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( "destroyScene", scene )
---------------------------------------------------------------------------------

return scene

공간을 절약하기 위해 필요없는 라인은 지웠는데요.
여러분은 scenetemplate.lua 파일을 열어 보시면 됩니다.

주석이 아주 자세히 달려 있어서 보시면 아실 겁니다.
쭉 훑어 보면
storyboard를 require하고 storyboard.newScene()을 합니다.
그 밑에 보면 좀 전에 다뤘던 createScene,enterScene,exitScene,destroyScene 함수가 차례대로 나옵니다.
createScene에 display object들하고 이 객체들을 그룹화 하는 것을 구현해야 합니다.
그리고 enterScene에 이 화면에서 동작할 내용들을 코딩해야 합니다.
주로 타이머 시작이나 오디오 로드, 리스너 등록 등의 작업을 이곳에서 합니다.
exitScene 함수 안에서는 타이머 멈춤, 리스너 제거, unload sounds 등의 작업을 합니다.
destroyScene 함수에서는 리스너 제거나 게임같은 경우에 저장해야 할 데이터(점수,레벨 등등) 저장 등을 이곳에서 합니다.

그리고 그 밑에는 이 함수들에 대한 리스너를 다는 방법이 설명 돼 있습니다.
이건 보시면 아실 겁니다.

각 scene들은 마지막에 반드시 return scene을 해야 합니다.

Scene Purging and Removal

이전 화면에서 다음 화면으로 넘어갔을 때 이전 화면은 스크린에서만 안 보이는 것이지 실제로 없어진 것은 아닙니다. 그 얘기는 이전 신은 여전히 메모리를 차지하고 있다는 얘기 입니다. 이전화면에 빨리 돌아가야 하면 이렇게 메모리에 올라 있는것이 더 좋을 겁니다.
하지만 때때로 절대 불려지지 않을 화면인데 계속 메모리만 차지하고 있으면 메모리 낭비이고 퍼포먼스에도 영향을 줍니다.
이럴때 purge나 remove 함수를 씁니다.

storyboard.purgeScene(sceneName)

이 함수는 해당(seneName) scene을 purge시킵니다. 즉 보이지 않게 없어진다는 겁니다. 하지만 이 scene은 메모리에 남아 있게 됩니다. 그래서 다른 화면에서 이 화면을 storyboard.gotoScene()하게 되면 빠르게 불려지게 됩니다.
purge되기 전에 destroyScene 함수가 실행 될 겁니다.

storyboard.removeScene(sceneName)

이 함수는 우선 scene을 purge하고 나서 메모리에서 이 scene을 unload 합니다.
이후에 이 scene이 gotoScene()으로 call되면 메모리에 reload되게 됩니다.

Automatic Scene Purging

개발자가 위 purge나 remove를 하지 않은 상태에서 OS의 메모리가 부족하게 되면 Corona는 자동적으로 이전 Scene을 제거합니다.

Excluding objects from Transitions

scenetemplate.lua에서 보시면 local group=self.view 가 있을 겁니다.
view 는 그 Scene의 display 객체들입니다. 만약 화면전환 효과에 특정 display를 적용시키지 않으려면 두가지 방법이 있습니다.
1. 객체를 main.lua에서 생성한다.
2. scene 모듈에서 객체를 생성했으면 해당 객체를 view 그룹에 insert 하지 않는다.

이 방법을 사용할 때는 잘 생각해서 해야 겠죠? 2번의 방법을 사용할 때 그 객체를 새로 생성되는 로직이 있다면 이전의 객체는 남아있고 새로운 객체는 계속 생기고 하는 현상이 발생합니다.

제가 director.lua 클래스 사용할 때도 group 에 객체를 insert 시키지 않아서 에러가 생기는 바람에 그 에러 잡느라고 시간을 좀 보냈거든요.

오늘은 이렇게 storyboard API에 대해서 개요를 살펴 봤구요.
다음엔 코로나에서 제공한 샘플 코드를 분석해 볼까 합니다.

오늘 글은 아래 코로나 홈페이지에서 제공한 글을 바탕으로 작성했습니다.
http://blog.anscamobile.com/2011/11/introducing-the-storyboard-api/