IT 기술 따라잡기

안녕하세요?

이번주에는 코로나에서 enterFrame에 대한 블로그 강좌를 했네요.
이 강좌 내용을 아래에 정리했습니다.

원본은 여기를 클릭하시면 보실 수 있습니다.

Understanding Corona’s enterFrame Event

오늘은 코로나의 enterFrame Event에 대해 알아보겠습니다.
Event 전반에 대해 알고 싶으시면 여기를 클릭하세요.

****** What is an enterFrame event?

앱이 시작하면서 여러분의 앱은 아주 빠른 속도로 화면을 새로 갱신하면서 보여주게 됩니다.
이 속도를 나타내는 단위는 frames-per-second (FPS)입니다. 코로나에서는 두가지 세팅을 지원하는데요. 30과 60 FPS입니다.
관련된 정보는 여기에 있습니다.

이 속도를 다른 말로는 framerate이라고도 합니다.
여러분이 config.lua파일에 60FPS로 설정을 했으면 이것은 1초에 스크린을 60번 다시 그린다는 겁니다.

enterFrame아라는 말은 새로운 프레임에 entering하는 순간을 말합니다. 즉 framerate이 30이라면 이 enterFrame이벤트는 1초에 30번 일어나게 됩니다.
그러니까 이 enterFrame 이벤트를 사용하면 여러분은 매 프레임마다 어떤 컨트롤을 할 수 있게 되는 겁니다.

****** enterFrame Listeners
이 enterFrame이벤트와 다른 많은 코로나 이벤트와 다른점은 리스너를 Runtime으로만 설정할 수 있다는 겁니다.
각 object마다 이 enterFrame을 따로 적용할 수는 없습니다.

아래 이 enterFrame 사용 예제를 보세요.

-- listener function
local function onEveryFrame( event )
    print( "This function will be called on every frame." )
end

-- assign the above function as an "enterFrame" listener
Runtime:addEventListener( "enterFrame", onEveryFrame )

우선 함수를 만들고 그 다음에 Runtime에 enterFrame 이벤트를 add합니다.
이 예제는 아주 기본적인 거구요. 다음 예제에서 조금 응용한 걸 보여드리겠습니다.

***** Translating objects
아래 예제는 각 프레임마다 객체가 천천히 아래로 내려갔다가 한번에 다시 올라가고 또 내려오는 동작을 반복하는 움직임을 보일 겁니다.

local ball = display.newImage( "redball.png" )
ball.x = math.random( display.contentWidth )
ball.y = -ball.contentHeight

-- listener function for enterFrame event
local function onEveryFrame( event )
    ball:translate( 0, 1 ) -- move ball 1pt down on every frame

    -- move ball above top of screen when it goes below the screen
    if ball.y > display.contentHeight then
        ball.y = -ball.contentHeight
    end
end

-- assign the above function as an "enterFrame" listener
Runtime:addEventListener( "enterFrame", onEveryFrame )

***** Tracking Time

enterFrame 리스너의 이벤트 테이블 안에는 여러분의 앱이 시작한 이후부터 지금까지의 시간에 대한 정보가 들어있습니다.
event.time이 시작한 시간인데요. system.getTimer()메소드를 통해서 값을 얻을 수 있습니다.
아래 예제는 유저가 버튼을 누르고 3초 이상 지났을 때를 체크하는 코드 입니다.
local timeThresh = 3

local button = display.newImage( "button.png" )
button.markTime = system.getTimer()

-- enterFrame listener function
local function trackTime( event )
    local secondsPassed = (event.time - button.markTime) / 1000 -- divide by 1k to get seconds
   
    if secondsPassed >= timeThresh then
        print( "You held down the button for at least " .. timeThresh .. " seconds." )
       
        -- stop tracking time
        Runtime:removeEventListener( "enterFrame", trackTime )
    end
end

-- touch event for the button object
function button:touch( event )
    if event.phase == "began" then
        print("Touched");
       
        -- assign touch focus to this object
        display.getCurrentStage():setFocus( self )
        self.isFocus = true
       
        -- mark time and start tracking time with enterFrame listener
        self.markTime = system.getTimer()
        Runtime:addEventListener( "enterFrame", trackTime )
   
    elseif self.isFocus then
        if event.phase == "ended" or event.phase == "cancelled" then
           
            -- stop tracking time
            Runtime:removeEventListener( "enterFrame", trackTime )
           
            -- remove touch focus from button
            display.getCurrentStage():setFocus( nil )
            self.isFocus = false
        end
    end
   
    return true
end

button:addEventListener( "touch", button )

이 코드 아주 유용하게 쓰여질 수도 있겠네요.

****** Special Considerations

이 enterFrame은 각 프레임별로 체크를 하기 때문에 아주 강력합니다. 대신에 메모리를 많이 소비하므로 꼭 필요할 때만
사용하고 그렇지 않을 때는 없애 줘야 합니다.
한 scene에서 enterFrame을 사용했는데 다른 scene으로 넘어갈 때 이 enterFrame을 제거하지 않는다면 유저가 다시 첫번째
scene으로 돌아 왔을 때는 각 프레임마다 이 enterFrame이 두번 실행 될 겁니다.
다시 다른데 갔다가 돌아오면 세번 실행되겠죠? 각 프레임마다.... 그럼 performance가 아주 형편 없어질 겁니다.

이 enterFrame사용시 절대 잊어서는 안되는 것이 이런 상황을 만들지 않는 겁니다.

~~~~~ ~~~~~

지난달 Michelle Fernandez 가 만든 Corona SDK Game Development Beginner's Guide 책 표지 디자인 공모 소식을 전해 드렸었습니다.

그 글 읽으신 분 들 중 혹시 표지 디자인에 공모하신 분이 계신 지 모르겠는데요.

그 표지 디자인 콘테스트 결과가 발표 됐습니다.

총 40여면이 응모했다고 하는데요 3편이 당선 됐고 그중 최종 우승자는 Raphael Pudlowski 작품이 선정됐습니다.
Pudlowski 는 폴란드의 Cracow 사람입니다.
Cracow는 예전에 가 본적 있는데 도시 중앙 광장이 아주 넓은 .. 그리고 예전에는 섬유업이 아주 발달했던 도시로 기억납니다.
왕이 살던 궁전도 언덕위에 아주 아름답게 있었구요.
무엇보다 아우슈비츠 수용소가 가까이 있어서 저도 들르게 됐었습니다.

작가는 이 작품이 개인적으로 진행하던 프로젝트 였는데 콘테스트 광고를 보고 성격에 잘 맞을 것 같아서 응모했다고 하네요.
코로나가 아주 급속도로 발전/성장하고 있고 주로 게임에 이용되는 툴이기 때문에 재미와도 연관되고 해서요...
카멜레온이 환경에 맞게 자신의 색을 마음대로 변하듯이 코로나도 그런 이미지가 있다고 느꼈답니다. 한번 개발해서 여러 플랫폼용으로 빌드할 수 있다는 점이요. 그리고 카멜레온은 또한 Corona 맥주 광고에도 나온다고 하네요.

심사위원 중 Ansca의 CEO인 Carlos는 로케트가 위를 향해서 발사되는 모습하고 카멜레온이 마음에 들었다고 합니다. 카를로스에게 위로 발사되는 로케트는 성공을 연상시켰고 그 로케트는 corona sdk가 아주 발사 됐다는 연상도 됐구요. 그리고 카멜레온은 외로운 인디'indie' 가 연상됐다고 하네요. 개별 개발자 나 앱이라는 무기를 쉽게 장착할  수없는 개인이 로케트라는 장치에 쉽게 올라타서 멋진 글라이딩을 펼칠 수 있는 그런 느낌. 우리의 Carlos는 그런 느낌을 받아서 이 작품을 선정했다고 합니다.

덧붙여서 Corona는 원래 태양을 의미하고 Lua 는 달을 의미합니다. 그 이미지와도 연관이 있구요.

이 작품은 Michelle M. Fernandez가 쓴  Corona SDK Beginner's Guide라는 책의 표지 모델로 사용이 될 겁니다. 4월말에 출판 될 예정이라네요. 그리고 Corona SDK 무료 이용권하고 Packt Publishing으로부터 100달러 상당의 이미지 라이센스 사용권을 받는다고 합니다. 그리고 책 안에도 이름과 작품이 언급될 예정이구요.

아주 멋지죠?

2위는 미국 조지아에 사는 Andrew Wardlow의 아래 작품이 선정됐습니다.

3위는 멕시코의 Michoacan에 사는 Adam Jhesu Rufino Nakamura가 탔습니다.
성이 나카무라네요. 일본계인가보죠?

2위와 3위는 Packt Games Library의 120불 상당 회원권을 받구요 Corona SDK Game Development Beginner's Guide책도 무료로 한권 받는 답니다.

이상 뉴저지에서 Corona SDK 명예 홍보대사 Douglas 였습니다. ^^~~~~~

지난번까지 Sencha Touch 에 대해 대략적으로 알아보고 SDK를 설치하고 그리고 어플리케이션을 하나 만들어 봤습니다.

어플리케이션을 만들어보니 대충 감이 잡히던데요.

일단 Sencha Touch에서 제공하는 Tutorial을 한번 훑어보는게 센차터치를 좀 더 디테일하게 알 수 있는 가장 좋은 방법인것 같습니다.

Corona SDK도 코로나에서 제공하는 튜토리얼인 Corona DOC를 한번 다 훑고 나서 새로 추가되는 기능들을 하나하나 정리해 나가니까 정말 도움이 되더라구요.

오늘부터는 우공이산이라고 하나하나 기초적인 튜토리얼부터 공부해 나가볼 생각입니다.

***** Sencha Touch란?
센차터치란 안드로이드나 iOS, 블랙베리 같은 모바일 폰에 HTML5를 기반으로 앱을 쉽고 빠르게 만들 수 있도록 해 줍니다.

***** 필요한 것은?
- Sencha Touch 2.0 SDK beta
- 웹 서버 (로컬)
- 웹 브라우저 최신버전 (크롬하고 사파리를 추천합니다.)
=> 보다 자세한 사항은 제 글 Sencha Touch getting started - 설치 및 예제 실행 - 를 참조하세요.

***** 시작하기
웹 서버를 설치하지 않아도 아래 두개 파일만 있어도 예제를 실행할 수는 있습니다.
sencha-touch.css

sench-touch-all-debug.js

위 두 파일을 임의의 폴더에 복사해 넣으세요.
그리고 아래 html 파일을 작성해 넣으세요.

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started</title>
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

html파일 이름은 마음대로 정하셔도 됩니다.
이제 app.js파일을 만드셔서 코딩을 하시면 됩니다.

첫번째 코딩은 alert화면 띄우기 입니다.
Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});

이렇게 작성하시고 html파일을 브라우저에서 실행해 보세요.

이렇게 alert화면이 뜨면 성공하신겁니다.

app.js를 아래와 같이 바꾸고 실행해 보세요.
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hello World'
        });
    }
});

그러면 이렇게 Hello World가 나올 겁니다.
Ext.create()는 Ext.ClassManager.instantiate를 간단히 사용하기 위해 만든 겁니다.
Ext.create()대신 Ext.ClassManager.instantiate를 넣으셔도 결과는 똑 같습니다.
instantiate(String name, Mixed args) 가 신택스 입니다.

Tutorial 첫 시간은 여기까지 하겠습니다.
앞으로 Sencha Touch에서 공식적으로 제공하는 Tutorial을 기반으로 글을 정리해 나가겠습니다.

다음 시간에 뵈요....
~~~~~~~~ ~~~~~~~~