스토리 보드 기본 사용법

Storyboard Basic Usage

Posted on August 21, 2012. Written by Jonathan Beebe

스토리보드 API는 아주 강력하고 flexible 하지만 new user들에게는 아주 헛갈리게 한다는 걸 인정해야겠네요. 그리고 Director Class 같은 3rd party scene management library를 사용하다가 스토리보드를 사용하려는 개발자 들도 헛갈릴 겁니다.

오늘은 이 간단한 Storyboard API를 정말 간단하게 사용하고 싶은 분들에게 기본적인 스토리보드 사용법에 대해 안내를 할 까 합니다. 아마 Director Class 만큼이나 간단할 겁니다. 스토리보드에는 많은 유용한 기능이 있지만 이 기능들이 항상 사용되야만 하는 것은 아닙니다. 그러니까 처음부터 이 모든걸 다 이해할 필요는 없습니다.

이 튜토리얼은 스토리보드 API를 빠르고 쉽게 사용할 수 있는 기본적인 기능에 대해서 다루려고 합니다.

Setup

스토리보드 API는 대부분의 다른 3rd party scene management libraries 하고는 약간 다른것들이 있습니다. 특히 화면 전환 부분이 그렇죠. 디폴트로 스토리보드의  scene 들은  화면전환 (scene transiton) 할 때 이전 scene들이 removed or purged 되지 않습니다. 대부분의 third-party scene management libraries 에서는 화면이 전환 될 때마다 이전 화면(scene)이 remove 되죠. Storyboard API에서도 이렇게 할 수가 있는데요. 자동으로 이전 scene들을 remove 하려면 함수가 call 될 때마다 inactive scene들을 purge 되도록 main.lua에 세팅할 수 있습니다.

main.lua

local storyboard = require "storyboard"
storyboard.purgeOnSceneChange = true

완전 간단하죠?

Scene Modules

Director class 에서는 scene 모듈은 new()라는 한개의 함수로 만들어 졌었습니다. 이 함수는 scene이 로딩 될 때마다 call 되게 되죠. 옵션으로 scene이 unload 될 때 call 되는 clean() 함수도 있었습니다. 아래는 Director Class에서 보여지는 scene 코드 입니다.

Director Class Scene

module(..., package.seeall)

-- setup function:
function new() 
    local localGroup = display.newGroup()

    local img = display.newImage( "hello.png" )
    localGroup:insert( img )
   
    return localGroup
end

-- cleanup function:
function clean()
    print( "Called when scene is unloaded." )
end

Storyboard API 를 사용할 때도 비슷한 structure와 로직이 적용될 수 있습니다. (위에 Setup 섹션에서 보실 수 있습니다.). Director Class 에서 위와 같이 사용해서 얻는 기능과 비슷하게 Storyboard API에서도 아래와 같이 코딩을 할 수 있습니다.

Storyboard Scene

local storyboard = require "storyboard"
local scene = storyboard.newScene()

-- setup function:
function scene:createScene( event )
    local img = display.newImage( "image.png" )
    self.view:insert( img )
end
scene:addEventListener( "createScene" )

-- cleanup function:
function scene:destroyScene( event )
    print( "Called when scene is unloaded." )
end
scene:addEventListener( "destroyScene" )

return scene

많이 다르지는 않죠? 코딩은 약간 다르지만 그 로직은 완전히 같습니다. createScene 이벤트 리스너에 모든 scene creation과 로직을 넣으시면 됩니다. 그리고 모든 cleanup 코드는 “destroyScene” event listener 에 넣으시면 되죠.

createScene 리스너는 Director의 new 함수와 비슷한 기능을 합니다. 그리고 destroyScene 리스너는 clean 함수와 하는 기능은 거의 같죠. main.lua 파일에 storyboard.purgeOnSceneChange를 true 로 하는 것을 잊지 마세요. 그렇게 하지 않으면 화면은 전환 할 때마다 destroyScene 이벤트가 자동적으로 dispatch 되지 않을 겁니다.

이제 여러분의 Storyboard API의 scene들을 어떻게 하면 Director 클래스와 비슷하게 셋업할 수 있는지 알게 됐습니다. 이제  storyboard.gotoScene() 를 사용해서 화면 전환을 하시기만 하면 됩니다.

Conclusion

Storyboard API 에 가시면 훨씬 더 많은 기능을 보실 수 있을 겁니다. 그 기능들은 필요하실 때만 가져다가 쓰시면 됩니다. 대부분의 경우 특히 Director Class를 사용하시다가 Storyboard로 전환하시는 분들에게는 이 튜토리얼이면 충분히 쉽게 스토리보드를 이해하시고 사용하실 수 있을겁니다.