corona sdk, Million Tile Engine 로 만드는 게임(3)

이제 게임의 대문을 만들어 보겠습니다.
첫페이지에 게임제목과 Play버튼을 넣고 레벨 선택하고 게임을 할 수 있도록 하면 됩니다.
그럴려면 장면 전환이 많이 일어나는데 corona sdk에서는 story board를 이용하여 제작 할 수 있습니다. 하지만 예전에는 storyboard가 기본으로 corona sdk에 포함되어 있었지만 현재는 빠져있습니다. 아래 링크에서 해당 내용이 나옵니다.
https://forums.coronalabs.com/topic/59565-20152731-module-storyboard-not-found-vs-latest-stable-cfstreamfault/
그리고 storyboard는 open souce로 여전히 사용할 수 있습니다.
아래 링크에서 받으면 됩니다.
https://github.com/coronalabs/framework-storyboard-legacy

구성 되는 화면은 아래와 같습니다.
menu.lua에서 만들어집니다.

Play와 credits 버튼을 만들었습니다. Play버튼을 누르면 아래와 같이 level select 화면으로 넘어갑니다. 아래화면은 levelselect1.lua, levelselect2.lua, levelselect3.lua 에서 이루어 집니다.

위에서는 테스트한다고 많이 나와있습니다. 적당한 level을 선택하면 지금까지 구현한 play화면으로 들어갑니다. 이것은 levelplay.lua에서 이루어 지는데 levelselect?.lua에서 levelplay.lua가 곧장 호출되는 방식이 아니라 autoloadlevelplay.lua에 의해 loading화면이 보여집니다. 안그러면 속도가 떨어져서 levelselcet 화면이 잠시동안 반응없는 상태가 됩니다.

아래는 credits버튼을 눌렀을때 입니다. credits.lua에서 구현됩니다.

 아래는 pause버튼을 눌렀을때 입니다. 이건 levelplay.lua에서 메뉴를 띄우게 됩니다.

storyboard는 기본 템플릿이 있습니다. 아래는 menu.lua입니다. buttonHit를 제외한 함수들은 모두 존재해야 합니다. 그리고 createScene에는 화면을 구성하는것들을 넣어주고 enterScene에는 timer나 callback함수들을 넣어주며, 마지막으로 중요한것은 모든 이미지는 scene내에서는 self.view의 그룹으로 되어있어야 scene가 전환될때 모두 삭제됩니다.
scene전환은 storyboard.gotoScene()함수를 이용하며 뒤쪽 전환 효과도 마음대로 선택 할 수있습니다.
storyboard를 이용하면 소스 관리도 효율적으로 할 수 있으며 화면 전환도 편하게 할 수있습니다.

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

-- local forward references should go here --

local function buttonHit(event)
 storyboard.gotoScene (  event.target.destination, {effect = "slideDown"} )
 return true
end

-- Called when the scene's view does not exist:
function scene:createScene( event )
 local group = self.view
 print("menu createScene")
 -- CREATE display objects and add them to 'group' here.
 -- Example use-case: Restore 'group' from previously saved state.

 bg = display.newImage('resource/titlebg.png', centerX, centerY)
 titleBg = display.newImage('resource/titletext.png', centerX, centerY-100)
 playBtn = display.newImage('resource/btnplay.png', centerX, centerY +100)
 creditsBtn = display.newImage('resource/btncredits.png', centerX, centerY +240)

 playBtn.destination = "levelselect" .. tostring(levelLastPlay)
 creditsBtn.destination = "credits"
 
 playBtn:addEventListener('tap', buttonHit)
 creditsBtn:addEventListener('tap', buttonHit)
 
 group:insert(bg)
 group:insert(titleBg)
 group:insert(playBtn)
 group:insert(creditsBtn)

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.)
 -- Remove listeners attached to the Runtime, timers, transitions, audio tracks

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.)
 -- Remove listeners attached to the Runtime, timers, transitions, audio tracks

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

전체 소스는 아래 링크롤 통해서 확인하면 됩니다.

https://drive.google.com/file/d/0B9vAKDzHthQIbjk0dFB4T1F4cFE/view?usp=sharing