IT 기술 따라잡기

오늘은 timer.performWithDelay()를 이용해서 시간이 지날수록 점점 줄어드는 Time Bar를 만들어 보겠습니다.

Corona DOC에서 배운 기본 테크닉으로 응용해 본 건데요.

앱을 시작하면 저 흰 Bar가 점점 줄어드는 겁니다.

그럼 소스를 보겠습니다.

--Show a basic white bar
local timeBar = display.newRect( 20, 165, 280, 20 )
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
timeBar.y = 165

--Make the bar shrink over time
local function loseTime (event)
timeBar.width = timeBar.width - 2
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
end
gameTimer = timer.performWithDelay(100,loseTime, 0)

1. display.newRect로 사각형을 그립니다.
    color를 지정해 주지 않았는데 그러면 기본으로 White가 그려집니다.
    display.newRect( [parentGroup,] left, top, width, height )
2. ReferencePoint를 BottomLeft로 줍니다.
    이러면 Rect의 왼쪽 아래가 기준이 되서 x좌표 20 과 y좌표 165 가 그려집니다.
3. timeBar 의 x좌표와 y좌표를 그려줍니다.
    이미 newRect에서 x,y가 설정 돼 있기 때문에 이 부분은 생략되도 됩니다.
    혹시 x,y좌표를 바꿀 필요가 있을 때 이용하시면 됩니다.
4. 그 다음은 loseTime(event) 함수 부분입니다.
   event를 파라미터로 받는 걸로 봐서 어떤 리스너에서 호출되는 겁니다.
   그 리스너는 맨 마지막에 있는 timer.performWithDelay 입니다.
   신택스는 아래와 같습니다.
   timer.performWithDelay( delay, listener [, iterations] )
   위 예제에서는 delay가 100으로 돼 있기 때문에 0.1초마다 한번씩 loseTime을 콜 합니다.
   맨 마지막에 0으로 돼 있는건 이걸 계속 호출한다는 내용입니다.
   3으로 돼 있으면 3번 호출합니다.
5. loseTime(event) 함수 내용은요.
    실행 될 때마다 timeBar의 width를 -2 합니다.
    ReferencePoint는 여전히 BottomLeft로 하고 x좌표는 계속 20으로 합니다.

이런식으로 간단히 Time Bar 효과를 냈습니다.

살펴본 김에 Listener에 대해 자세히 한번 살펴 보고갈까요?

이 예제는 하얀색 Bar는 점점 줄어들고 녹색 공은 좌우로 랜덤하게 움직이는 겁니다.
그리고 Function Listener와 Table Listener에서는 Terminal에 일정 시간별로 print를 하구요.

아래 전체 소스 코드를 보겠습니다.

--Show a basic white bar
local timeBar = display.newRect( 20, 165, 280, 20 )
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
timeBar.y = 165

--Make the bar shrink over time
local function loseTime (event)
timeBar.width = timeBar.width - 2
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
end
gameTimer = timer.performWithDelay(100,loseTime, 0)

-- Function Listener
 local function listener( event )
    print( "Function listener called" )
 end
 
 timer.performWithDelay(500, listener,0 )
 
 -- Table Listener
 local listener1 = {}
function listener1:timer( event )
   print( "Table listener called" )
end
 
timer.performWithDelay(700, listener1,0 )


function newBall()
    local randomPosition = 100 + math.random(200)
    ballPosition = display.newImage("b3.png")
    ballPosition.y = 240
 
    -- wrap spawnBall and randomPosition inside a closure
    local myclosure = function()
        local randomPosition = 100 + math.random(200)
        return spawnBall( randomPosition )
    end
   
    timer.performWithDelay(180, myclosure, 0)
   
    --spawnBall()
    function spawnBall(pos)
        print( "randomPosition = " .. pos )
        ballPosition.x = pos
    end
end

newBall()

Function Listener 윗 부분은 처음에 살펴 봤던 부분이라서 넘어갑니다.

Function Listener는 TimeBar에서 우리가 사용했던 형식 입니다.
일정 시간이 지나면 해당 함수(Function)를 호출합니다.

그 다음 Table Listener 는 Table(배열) 값에 대해 리스너를 달 때 사용합니다.
소스코드와같이 함수를 테이블 이름 : timer(event) 형식으로 답니다.
timer.performWithDelay부분은 같습니다.

newBall()
함수 안에서 함수를 호출하는데 거기서 Parameter를 던져주는 방법에 대한 예제입니다.
처음에는 볼의 이미지를 그리고 그 y좌표를 설정했습니다.

그리고 performWithDelay에서 0.18초마다 myclosure를 호출합니다.
myclosure에서는 random한 값을 만들고 이를 spawnBall에 파라미터를 전달해 주면서 호출합니다.
spawnBall() 함수는 이 랜덤 값 파라미터를 받아서 볼의 x좌표를 세팅해 줍니다.

이렇게 하면 공은 좌우로 아주 랜덤하게 움직입니다.

오늘 샘플 코드는 아래에 있습니다. 그럼 즐공 하세요.

오늘은 간단한 팁을 하나 살펴 보겠습니다.

소스와 이미지는 위 압축파일 안에 있습니다.

오늘의 팁은 배경화면이 계속 위에서 아래로 내려가는 효과 입니다.
이 소스에서는 두개의 이미지를 사용했습니다.
갤러그같은 게임에 응용할 수있을 것 같습니다.

소스를 분석 해 볼까요?

-------------------------------------------------------------------------
-- SCROLLING GAME BACKGROUND --
--------------------------------------------------------------------------

local localGroup = display.newGroup()
--First half of scrolling background
local bg1 = display.newImage("background1.png")
bg1:setReferencePoint(display.CenterLeftReferencePoint)
bg1.x = 0
bg1.y = 0
localGroup:insert(bg1)

-- Second half of scrolling background
local bg2 = display.newImage("hutbg.png")
bg2:setReferencePoint(display.CenterLeftReferencePoint)
bg2.x = 0
bg2.y = 480
localGroup:insert(bg2)

local tPrevious = system.getTimer()
local function move(event)
local tDelta = event.time - tPrevious
tPrevious = event.time

-- Change this to adjust the speed of the background
local yOffset = ( 0.15 * tDelta )

bg1.y = bg1.y + yOffset
bg2.y = bg2.y + yOffset

if bg1.y > 720 then
bg1:translate( 0, -480*2)
end
if bg2.y > 720 then
bg2:translate(0, -480*2)
end
end

-- Gets the background moving
Runtime:addEventListener( "enterFrame", move )

우선 localGroup을 만들구요.
배경 이미지 두개를 설정합니다.
하나는 x=0,y=0으로 위치를 지정하구요. 다른 하나는 x=0, y=480으로 지정했습니다.
(y는 이미지 높이를 생각해서 지정하셔야 할 겁니다.)

그리고 이 두 이미지를 localGroup에 insert하구요.

다음엔 system.getTimer()를 해서 tPrevious라는 변수에 넣습니다.
그 다음 move(event) 함수를 만듭니다.
이 함수는 맨 아래에 있는 리스너에서 호출 될 건데요. 맨 아래에 있는 리스너는 Runtime리스너이고 enterFrame으로 파라미터가 돼 있네요.
앱이 시작하면서 이 함수가 호출 될 겁니다.

이 함수 내용을 보면요.
tDelta 변수에 event.time - tPrevious 를 담구요. tPrevious에는 새롭게 이벤트 시간을 담습니다.
그리고 yOffset변수에는 대강의 이미지 스피드를 계산해 넣습니다.
이 부분은 여러분이 원하는 숫자를 맘대로 넣어보세요.
1을 넣으면 아주 천천히 흘러갈 테고 큰 숫자를 넣을 수록 아주 빨리 흘러갈 겁니다.

그리고 첫번째 백그라운드 이미지의 y 좌표를 이 속도 만큼 + 해 줍니다.
bg1.y 가 720 보다 크면 첫번째 백그라운드 이미지를 translate 합니다.
여기에 나오는 y좌표의 숫자 480, 720 등은 배경이미지의 높이에 따라 적당히 바꿔 주시면 됩니다.

첫번째 백그라운드 이미지 처럼 두번째 백그라운드 이미지도 속도만큼 y좌표를 옮겨주고 720보다 크면 translate 시킵니다.

이렇게 하면 두개의 배경 이미지가 계속 번갈아가며 아래로 흐릅니다.

오늘은 배경 이미지 스크롤 다운에 대한 간단한 팁을 알아봤습니다.

어제에 이어서 계속 하겠습니다.

어제까지 한 소스는

--import the table view library
local tableView = require("tableView")
display.setStatusBar( display.HiddenStatusBar )

--local background = display.newImage("hutbg.png")

function listButtonRelease( event )
    self = event.target
    local id = self.id
    print(self.id)
end

local data = {
"감자떡",
"생선구이",
"된장찌개",
"막걸리",
"소주",
"동동주"
}

local myList = tableView.newList{
    data = data,
    default="listItemBg.png",
    onRelease=listButtonRelease,
}

여기까지 였습니다.

오늘은 여기에 이미지를 넣어 보겠습니다.
아래 이미지들을 받으세요.

제가 먹고 싶은 것 들인가 봐요.

이 그림들을 다 받으셨으면 이제 코딩을 시작하겠습니다.

우선 data 부터 바꾸겠습니다.
local data = {감자떡,생선구이,된장찌개,막걸리,소주,동동주}

이것을
local data = {}

--setup each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = "감자떡"
data[1].subtitle = "100% 감자로 만든 강원도 특산품"
data[1].image = "potato.png"

data[2] = {}
data[2].title = "생선구이"
data[2].subtitle = "맛있는 고갈비"
data[2].image = "grillfish.png"

data[3] = {}
data[3].title = "된장찌개"
data[3].subtitle = "구수한 된장찌개"
data[3].image = "soy.png"

data[4] = {}
data[4].title = "막걸리"
data[4].subtitle = "몸에 좋은 막걸리"
data[4].image = "mak.png"

data[5] = {}
data[5].title = "소주"
data[5].subtitle = "짜르르 몸에 퍼지는 소주"
data[5].image = "soju.png"

data[6] = {}
data[6].title = "동동주"
data[6].subtitle = "고향의 맛 동동주"
data[6].image = "dong.png"

이렇게 바꿔주세요.

이렇게 하고 실행 하면 아래와 같이 에러가 납니다.

잘 보시면 아시겠지만 첫번째 줄 디폴트 이미지를 뿌려주고나서 데이터를 뿌릴때 에러가 납니다.
데이터가 여러개라서 그런데요.
이렇게 한 row에 여러 텍스트라든지 혹은 텍스트 + 이미지를 표시하시려면 callback을 사용합니다.
그리고 이 callback에 있는 object들은 하나의 group으로 관리하게 됩니다.
그럼 myList를 아래와 같이 고쳐 보세요.

local myList = tableView.newList{
    data = data,
    default="listItemBg.png",
    onRelease=listButtonRelease,
    callback = function( row )
        local g = display.newGroup()
        return g  
    end
}

이제 에러는 안 나죠?
대신 callback 안에 어떤걸 표시할지 알려주지 않아서 그냥 row 배경이미지만 6개 나옵니다.

callback을 아래와 같이 채워주세요.
    callback = function( row )
        local g = display.newGroup()
            local img = display.newImage(row.image)
            g:insert(img)
            img.x = math.floor(img.width*0.5 + 6)
            img.y = math.floor(img.height*0.5)

            local title =  display.newText( row.title, 0, 0, native.systemFontBold, 14 )
            title:setTextColor(255, 255, 255)
            g:insert(title)
            title.x = title.width*0.5 + img.width + 6
            title.y = 30

            local subtitle =  display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
            subtitle:setTextColor(255,255,255)
            g:insert(subtitle)
            subtitle.x = subtitle.width*0.5 + img.width + 6
            subtitle.y = title.y + title.height + 6
        return g  
    end

우선 이미지를 표시하고 group에 insert시키고 x,y 좌표를 설정해 줍니다.
title과 subtitle도 마찬가지로 합니다.

자 이제 제대로 ListView(TableView) 가 나오죠?

여기다가 배경 화면을 은은하게 깔겠습니다.

local background = display.newImage("hutbg.png")
background.alpha = 0.4

이렇게 간단하게 이미지 하나 불러오고 투명도를 약간 줬습니다.

이번 TableView 모든 소스와 이미지 파일 입니다.

받으셔서 참고 하세요.

그럼 더 신나는 코딩을 위해 다음 시간에도 새로운 걸 배울께요....

원래 오늘은 SQLite를 할 까 했는데요.
이건 나중에 하고 우선 List View (Table View)를 할께요.
제가 했던 안드로이드에서는 이걸 List View라고 했는데 아이폰쪽에서는 Table View라고 하나봐요.

우선 List View에서는 아래와 같은 파라미터들이 사용 됩니다.
data. 값들을 가지고 있는 테이블. 각 row별로 표시될 값들
default.  row의 배경 화면이 될 이미지. touch 영역 설정 가능
backgroundColor. R,G,B 값으로 배경 색을 정할 수 있음
callback. 각 row에 데이터를 어떻게 display할까를 정의하는 함수. 테이블의 각 값들은 callback함수의 할당 된 'item' 인자와 관련되서 사용됨.
over. 터치 시 보일 이미지
onRelease(optional). row가 tap된이후에 일어날 action을 정의한 함수의 이름
top. list의 위쪽 영역. 리스트가 시작하고 다시 돌아오는 포지션
bottom. 리스트의 아래쪽 영역. 스크롤이 초과해서 진행 되면 이쪽으로 돌아온다.
cat. 각 아이템의 카테고리 값을 저장하기 위해 사용되는 테이블 키 이름.
order. cat의 option 항목. 임의의 정렬을 지정할 수 있다.

아래와 같은 메소드들이 있습니다.

* myList:addScrollBar() and myList:removeScrollBar()
스크린에 스크롤바를 넣거나 없앤다.

* myList:addOnTop(object, xVal, yVal)
리스트에 처음에 object를 추가한다. (search bar나 text 같은)

* myList:addOnBottom(object, xVal, yVal)
리스트의 마지막에 object를 추가한다.

* myList:scrollTo(yVal, timeVal)
리스트를 다이나믹하게 움직이도록 한다.

* myList:cleanUp()
리스트를 없애고 메모리를 풀어준다. 그리고 모든 이벤트 리스너들을 정지시킨다.

그럼 이제 실제로 table view (List View)를 사용해 보겠습니다.
우선 tableView.lua 파일이 있어야 됩니다.
아래 파일을 다운 받으세요.

그리고 이 파일이 있는 폴더에 main.lua 파일을 만드세요.
우선 아래와 같이 tableView.lua 파일을 사용하겠다고 선언합니다.

--import the table view library
local tableView = require("tableView")

일단 여기서 편의상 아이폰의 statusbar를 없앨께요.
display.setStatusBar( display.HiddenStatusBar )

아주 간단한 테이블을 만들어 보겠습니다.
local data = {
"감자떡",
"생선구이",
"된장찌개",
"막걸리",
"소주",
"동동주"
}

이 데이타들을 아래와 같이 해 보세요.
그리고 tableView.lua에 있는 List View 메소드를 선언합니다.
local myList = tableView.newList{data=data}

실행해 보면 이렇게 나옵니다.
글자를 누르고 드래그 하듯이 움직이면 터미널처럼 touch: began moved, ended 가 나옵니다.
이걸 보면 touch 리스너가 달려있고 began,moved,ended 이벤트시 어떤 동작을 지정할 수 있다는 걸 알 수 있겠죠?
그리고 드래그를 하지 않고 그냥 tap 만 하면 아래와 같이 나옵니다.

터미널에 보면 onRelease 필드가 nil 이라고 하면서 에러메세지가 나오죠?

그럼 이 newList안에 아래와 같이 추가 하겠습니다.
onRelease=listButtonRelease,
그리고 그 위쪽에 listButtonRelease 함수를 아래와 같이 만들어 주세요.
function listButtonRelease( event )
    self = event.target
    local id = self.id
    print(self.id)
end

이렇게 하면 각 row를 클릭하면 에러가 나지 않고 그 id가 터미널에 출력 됩니다.
여기까지 하면 가장 간단한 Table View(List View)가 완성 된 겁니다.

좀 더 그럴듯 하게 리스트 뷰를 만들어 볼까요?
아래 이미지를 다운 받으세요.

그리고 myList 에 default="listItemBg.png", 를 추가해 보세요.
local myList = tableView.newList{
    data = data,
    default="listItemBg.png",
    onRelease=listButtonRelease,
}

그럼 이와 같이 그럴듯한 ListView (TableView) 가 됩니다.

자 오늘은 코로나 SDK에서 ListView(TableView) 표시하기 가장 기초적인 부분을 다뤄봤습니다.

다음시간에는 이 글 첫번째에서 소개했던 여러 파라미터들하고 메소드들을 사용해서 좀 더 다이나믹한 효과를 내는 방법을 알아보겠습니다.

오늘은 화면에 점수 표시하는 샘플코드를 공부할 겁니다.

이 파일이 전체 소스 파일입니다.
웹 싸이트는 http://techority.com/2011/01/26/how-to-add-a-score-to-your-iphone-app/ 입니다.
이 싸이트로 가면 유튜브 동영상도 있습니다.

이 소스를 보면서 제 식으로 공부 해 보겠습니다.

이 소스를 실행하면 위 화면처럼 나옵니다.
화면을 Tapping 하면 1 포인트씩 숫자가 올라갑니다.

우선 main.lua부터 보겠습니다.

--[[
Related files are score.lua, 1 through 9.png, scorebg.png and space.png
--]]
display.setStatusBar( display.HiddenStatusBar )
local background = display.newImage ("background.png")

score = require ("score")

local border = 5

local scoreInfo = score.getInfo()

score.init({
x = 40,
y = 5}
)
score.setScore(0)

local function addtoit (event)
if event.phase == "ended" then
score.setScore (score.getScore()+1)
end
end
background:addEventListener("touch", addtoit)

처음에 아이폰의 StatusBar를 없앱니다. (원래 소스에는 없는데 그냥 제가 추가 했습니다. 이게 보기에 더 편하더라구요.)
두번째는 백그라운드 이미지를 display 합니다.

세번째는 score.lua 소스를 require (implement) 합니다.
그 다음은 border를 5로 설정합니다.(이 border는 뭐 하는건지 모르겠습니다. 그냥 쓸데없이 있는거 같네요.)

그 다음엔 아까 require했던 score.lua에 있는 getInfo() 함수를 scoreInfo 변수에 담습니다. 이 getInfo() 함수는 이따 score.lua 파일을 살펴 볼 때 어떤 기능인지 공부하겠습니다.

그 다음은 score.lua에 있는 init() 함수에 x,y 파라미터를 넣어서 실행시킵니다.
그리고 setScore()함수에 파라미터 값을 0으로 해서 보냅니다.

로컬 함수 addtoit(event) 함수를 만듭니다.
그 내용은 이벤트가 끝나면 score.lua의 setScore함수에 이전 점수 +1 을 한 파라미터 값을 넣어서 부릅니다.

맨 마지막으로 background 에 touch 리스너를 달구요. 이 이벤트가 일어났을 경우 addtoit() 함수를 실행시킵니다.

지금까지 main.lua의 코드를 분석해 봤습니다.
이제 score.lua 파일을 분석해 보겠습니다.

-- A sample score keeping display
-- This updates a display for a numeric score
-- Example usage:
--    Place the score at 50,50
--         score.init( { x = 50, y = 50 } )
--    Update the score to current value + 10:
--        score.setScore( score.getScore() + 10 )

module(..., package.seeall)
 
-- Init images. This creates a map of characters to the names of their corresponding images.
 local numbers = {
    [string.byte("0")] = "0.png",
    [string.byte("1")] = "1.png",
    [string.byte("2")] = "2.png",
    [string.byte("3")] = "3.png",
    [string.byte("4")] = "4.png",
    [string.byte("5")] = "5.png",
    [string.byte("6")] = "6.png",
    [string.byte("7")] = "7.png",
    [string.byte("8")] = "8.png",
    [string.byte("9")] = "9.png",
    [string.byte(" ")] = "space.png",
}

-- score components
local theScoreGroup = display.newGroup()
local theBackground = display.newImage( "scorebg.png" )
local theBackgroundBorder = 10

theScoreGroup:insert( theBackground )

local numbersGroup = display.newGroup()
theScoreGroup:insert( numbersGroup )

-- the current score
local theScore = 0

-- the location of the score image

-- initialize the score
--         params.x <= X location of the score
--         params.y <= Y location of the score
function init( params )
    theScoreGroup.x = params.x
    theScoreGroup.y = params.y
    setScore( 0 )
end

-- retrieve score panel info
--        result.x <= current panel x
--        result.y <= current panel y
--        result.xmax <= current panel x max
--        result.ymax <= current panel y max
--        result.contentWidth <= panel width
--        result.contentHeight <= panel height
--        result.score <= current score
function getInfo()
    return {
        x = theScoreGroup.x,
        y = theScoreGroup.y,
        xmax = theScoreGroup.x + theScoreGroup.contentWidth,
        ymax = theScoreGroup.y + theScoreGroup.contentHeight,
        contentWidth = theScoreGroup.contentWidth,
        contentHeight = theScoreGroup.contentHeight,
        score = theScore
    }
end

-- update display of the current score.
-- this is called by setScore, so normally this should not be called
function update()
    -- remove old numerals
    theScoreGroup:remove(2)

    local numbersGroup = display.newGroup()
    theScoreGroup:insert( numbersGroup )

    -- go through the score, right to left
    local scoreStr = tostring( theScore )

    local scoreLen = string.len( scoreStr )
    local i = scoreLen   

    -- starting location is on the right. notice the digits will be centered on the background
    local x = theScoreGroup.contentWidth - theBackgroundBorder
    local y = theScoreGroup.contentHeight / 2
   
    while i > 0 do
        -- fetch the digit
        local c = string.byte( scoreStr, i )
        local digitPath = numbers[c]
        local characterImage = display.newImage( digitPath )

        -- put it in the score group
        numbersGroup:insert( characterImage )
       
        -- place the digit
        characterImage.x = x - characterImage.width / 2
        characterImage.y = y
        x = x - characterImage.width
        --
        i = i - 1
    end
end

-- get current score
function getScore()
    return theScore
end

-- set score to value
--    score <= score value
function setScore( score )
    theScore = score
   
    update()
end

score.lua 파일을 보겠습니다.
score.lua 파일 처음에 module(..., package.seeall) 를 넣습니다. 이러면 이 파일은 모듈로 사용될 수 있습니다.
이것을 했기 때문에 main.lua에서 require("score") 를 할 수 있고 이것을 변수 score에 담아서 score.(score.lua에 있는 함수) 방법으로 score.lua 내의 함수를 main.lua에서 사용할 수 있습니다.

그 다음 numbers 라는 테이블 변수에 0~9 의 이미지 파일을 담습니다.

그 다음은 display.newGroup()으로 객체들을 담을 그룹을 만듭니다.
그리고 score를 표시할 백그라운드 이미지를 넣고 theBackgroundBorder 변수에 10을 담습니다.

아까 만들었던  theScoreGroup에 백그라운드 이미지(theBackground)를 insert 합니다.
보시면 아까 theScoreGroup 말고 또다른 Group인 numberGroup을 만듭니다.
그리고 이 numberGrooup 자체를 처음의 theScoreGroup에 insert 합니다.

다음 줄에서 theScore 변수를 0으로 선언합니다. 처음 0점부터 시작하게 됩니다.
이제 함수가 나오네요. 아까 main.lua에서 불렀던 init(params) 함수가 나옵니다.

여기서는 theScoreGroup.x와 y를 전달받은 파라미터 값으로 넣고 setScore()함수에 0을 던져 줍니다.
아까 main에서 x=40, y=5 으로 보냈기 때문에 그 위치에 theScoreGroup의 객체들이 display 될 겁니다.

다음은 getInfo() 함수입니다. main함수에서는 이 함수에서 세팅된 값을 scoreInfo 변수에 담았었습니다.
getInfo() 함수에서는 7개의 값을 return합니다.
Lua (Corona) 에서는 복수개의 값을 return 할 수 있습니다.
theScoreGrooup,x , y 값과 ymax,ymax, contentWidth,contentHeight, score 등의 값을 return합니다.

다음은 update() 함수입니다.
처음엔 이전 score를 없앱니다.
그 다음은 numbersGroup이라는 그룹을 만들고 이를 통째로 theScoreGroup에 넣습니다.
다음줄은 theScore를 String 값으로 변환해서 scoreStr 변수에 담습니다.
Score가 한자리 수 인지 두자리 수인지 세자리 수인지 에 대한 정보를 담는 변수도 있네요.
scoreLen변수에 scoreStr 의 length를 담습니다.
local x, y는 점수가 표시되는 위치 입니다. 한자리 수일때 두자리 수일때 표시되는 위치가 조금씩 다르겠죠?

그 다음 while 문에서 어떤 점수 이미지를 어디에 뿌려줄지 계산하는 로직이 있습니다.
이미지를 출력하고 그 이미지를 numbersGroup에 담습니다.
그리고 나서 이미지의 x,y 좌표를 설정하구요.
이 while 문은 scoreLen 만큼 돌아갈 겁니다.

다음 함수는 getScore() 함수인데 여기서는 theScore를 리턴해 줍니다.

그리고 setScore() 함수에서는 theScore 함수에 score 값을 넣어 준 후 update() 함수를 실행시킵니다.

여기 까지 하면 scoring 샘플이 모두 완성된거구요.
이걸 실행 한 후 background를 누르면 점수가 1씩 증가하게 될 겁니다.

이 소스를 가지고 있으면 나중에 게임 개발할 때 아주 유용하게 사용할 수 있을 겁니다.

그럼.........

오늘은 글로벌, 로컬 함수 사용법에 대해 자세히 살펴 보겠습니다.

함수의 기본

local function main()
   print("Hello from CoronaSDK")
end
main()

아주 평범하고 간단한 함수 작성 및 함수 불러오기 예제입니다.
main()함수는 로컬로 선언 됐고 터미널에 Hello from CoronaSDK 를 출력합니다.
이 함수는 맨 아랫 줄 에서 call 했습니다. (main() )

local main
  local function init()
    main()
  end
  function main()
   print("Hello from CoronaSDK")
  end
  init()

이번엔 main 을 로컬로 미리 선언해 놓고 함수 선언 시 local 을 따로 표시하지 않았습니다.
프로그램을 실행하면 로컬 init() 함수를 부를 것이고 이 init() 함수는 main() 함수를 부를겁니다. 문제없이 작동됩니다.
그런데 여기서

local main
  local function init()
    main()
  end
  local function main()
   print("Hello from CoronaSDK")
  end
  init()
이렇게 main() 함수 작성할 때도 local로 또 선언을 하면 에러가 나게 됩니다.
바로 init() 함수 안에서 main()함수를 불러올 때 에러가 납니다.
왜냐하면 main()을 불러올 때는 main() 함수가 없었기 때문에 main 이 nil 이기 때문에 불러오지 못하겠다고 에러 메세지를 뿌리는 겁니다.

local main

  local function main()
   print("Hello from CoronaSDK")
  end
  local function init()
    main()
  end
  init()
위 소스는 어떨까요. init()안에서 main()을 불러올 때 이미 그 위에서 로컬 main() 함수가 구현 돼 있죠? 이 경우는 제대로 실행이 될 겁니다.

Encapsulated Function (함수 캡슐화)

local function main()
    print ("Hello from CoronaSDK")

    function insideMain()
      print("This is a function inside of main, not available to be called from any other")
    end

   insideMain()
  end
 
  main()

자 이렇게 함수 안에 함수가 있는 경우 제대로 실행 됩니다.

local function spawnObject()
   local resultingObject = display.newRect(10,10,100,100)
   local function onTouch(event)
     if "ended" == event.phase then
      print("touched rectangle")
     end
   end
   resultingObject:addEventListener("touch",onTouch)
   return resultingObject
  end

  local xTemp = spawnObject()

위 코드를 실행하면 어떻게 될까요?
우선 맨 밑에 로클 xTemp 변수에 spawnObject() 가 담기변서 spawnObject() 가 실행 됩니다.
spawnObject()에서는 처음에 resultingObject라는 사각형을 그리게 됩니다.
그리고 event를 받는 onTouch라는 함수를 만들구요.
여기서는 touch 이벤트가 끝날 때 터미널에 문자열을 출력합니다.
그 다음엔 아까 그린 사각형에 리스너를 답니다. touch 가 일어났을 경우 onTouch 함수롤 불러오도록 설정합니다.
그 다음에 이 사각형을 리턴합니다.
이제 화면에 있는 사각형을 클릭하면 터미널에 문자열이 찍히게 됩니다.

Member functions (멤버 함수들)

멤버함수들은 객체가 되는 방법이 일반 함수들과 조금 다릅니다. 바로 전 코드에다가 색을 바꾸는 함수도 한번 추가해 봅시다.
일단 사각형 색을 바꾸는 함수 부분을 아래와 같이 추가합니다.
local function spawnObject()
   local resultingObject = display.newRect(10,10,100,100)

   function changeColor(theColor)
     resultingObject:setFillColor(theColor[1],theColor[2],theColor[3])
   end

   local function onTouch(event)
     if "ended" == event.phase then
      print("touched rectangle")
     end
   end

   resultingObject:addEventListener("touch",onTouch)

   return resultingObject
  end

  local xTemp = spawnObject()

자.. 이제 저 함수에 theColor라는 파라미터를 넣어서 불러오는 것을 해야 하는데요.
이 함수는 local로 선언돼 있지 않지만 spawnObject() 함수 밖에서는 불러올 수 없습니다.
spawnObject() 함수 안에 이 함수가 있으니까요.
그럼 밖에서 불러올 수 있도록 살짝 바꿔 보겠습니다.

local function spawnObject()
   local resultingObject = display.newRect(10,10,100,100)

   function resultingObject.changeColor(theColor)
     resultingObject:setFillColor(theColor[1],theColor[2],theColor[3])
   end

   local function onTouch(event)
     if "ended" == event.phase then
      print("touched rectangle")
     end
   end

   resultingObject:addEventListener("touch",onTouch)

   return resultingObject
  end

  local xTemp = spawnObject()
  xTemp.changeColor({255,0,255})

changeColor(theColor) 함수를 spawnObject()의 멤버인 resultingObject 의 멤버 함수로 선언했습니다.
이렇게 하면 spawnObject() 함수 밖에서 불러올 수 있습니다.
spawnObject() 를 xTemp 변수에 담았으니까. xTemp.changeColor({255,0,255}) 하게 되면 spawnObject()함수 안에 있는 changeColor를 불러오게 됩니다. 이 함수는 멤버인 사각형의 함수이니까요.

단순히 이 기능만 실행되게 하려면 여러 방법이 있습니다.
아래와 같이 해도 되구요.
local function spawnObject()
   local resultingObject = display.newRect(10,10,100,100)

   function changeColor(theColor)
     resultingObject:setFillColor(theColor[1],theColor[2],theColor[3])
   end

   local function onTouch(event)
     if "ended" == event.phase then
      print("touched rectangle")
     end
   end

   resultingObject:addEventListener("touch",onTouch)
    changeColor({255,0,255})
   return resultingObject
  end

  local xTemp = spawnObject()
  --xTemp.changeColor({255,0,255})

그런데 함수내 함수를 함수 바깥에서 부르기 위해서 멤버 변수를 사용한다는 예제를 배우는게 목적이니까 그걸 염두에 두고 보시면 될 거예요.

이 강좌의 원래 원본은 아래에 있습니다.
http://blog.anscamobile.com/2011/09/tutorial-scopes-for-functions/
코로나 SDK 만든 회사인 Ansca Mobile 에 있는 블로그에 있는 글입니다.

Cross calling

 다른 함수 안에 있는 함수 불러오는 방법 두번째 인데요. 이건 약간 복잡합니다.

local function spawnObject()
   local resultingObject = display.newRect(10,10,100,100)

   function resultingObject.changeColor(theColor)
     resultingObject:setFillColor(theColor[1],theColor[2],theColor[3])
   end

   local function onTouch(event)
     if "ended" == event.phase then
      print("touched rectangle")
     end
   end

  function wrap(event)
   if self.x < 25 then self.x = 25 end
   if self.x > 743 then self.x = 743 end
  end

   resultingObject:addEventListener("touch",onTouch)

   return resultingObject
  end

  local xTemp = spawnObject()
  Runtime:addEventListener("enterFrame", xTemp.wrap)


이 코드는 spawnObject() 안에 wrap(event) 함수를 만들고 spawnObject()

바깥에서 이 함수안의 wrap함수에 리스너를 답니다.


그런데 조금 이상하네요. 에러도 나구요. 아래 코드를 보겠습니다.


local function spawnObject()
   local resultingObject = display.newRect(10,10,100,100)

   function resultingObject.changeColor(theColor)
     resultingObject:setFillColor(theColor[1],theColor[2],theColor[3])
   end

   local function onTouch(event)
     if "ended" == event.phase then
      print("touched rectangle")
     end
   end

  local function wrap(event)

   print("in function wrap")

   if resultingObject.x < 25 then resultingObject.x = 25 end
   if resultingObject.x > 743 then resultingObject.x = 743 end
  end

   resultingObject:addEventListener("touch",onTouch)
   Runtime:addEventListener("enterFrame", wrap)

   return resultingObject
  end

  local xTemp = spawnObject()


이건 제대로 작동합니다. 

spawnObject() 이 실행 됐을 때 이와 관련된 모든 함수들이 캡슐화 됐습니다.

이 코드의 목적은 이렇게 캡슐화 시키는 건가 봅니다.

Advanced Function

local hide = print

 local print = math.random

 local function main()

   hide("What do you have to hide?")

   hide( print(5) )

 end


  main()


루아는 위와 같이 함수를 변수에 담아서 편리하게 사용할 수 있습니다.


오늘은 함수와 관련된 좋은 아티클이 있길래 한번 공부해 봤습니다.

제가 100% 다 이해하지는 못한 것 같습니다.


저보다 더 프로그래밍 기초가 튼튼하신 분들은 좀 더 확실해 이해 하셨겠죠?

제가 잘못 이해했거나 부족한부분.... 덧 붙이고 싶으신 부분 있으면 언제든지 코멘트 해 주세요.


감사합니다.

지금 Physics 쪽을 하고 있는데요.
잠시 눈을 돌려 앱에 광고 달기를 한번 배워보고 가겠습니다.

현재 Corona는 공식적으로 inMobi 광고만 지원합니다.
inMobi는 인도계 회사로 애드몹과 더불어 모바일 광고시장 1,2위를 다투고 있다고 하네요.

곧바로 앱에 광고 다는 거 한번 살펴 보겠습니다.

일단 inMobi 광고를 사용하려면 config.lua 파일에 launchpad 를 표시해 줘야 합니다.

지난번 사용했던 config.lua 파일에 launchPad = true, 를 위와 같이 추가해 주세요.

그리고 main. lua 에 아래 코드를 넣어 주세요.
    local ads = require "ads"
 
-- Examples for inmobi:
 ads.init( "inmobi", "4028cb962895efc50128fc99d4b7025b" )

     -- following are iPhone, iPod Touch, iPad
 ads.show( "banner320x48", { x=0, y=1, interval=10, testMode=true } )

그러면 아래와 같이 나옵니다.

일단 아주 간단하죠?

안드로이드 광고 달 때 처럼 jar 파일을 추가하고 xml 파일에 코드 넣고 또 자바 파일에 넣고.. 어떤 때는 Menifesto 파일에도 코드를 넣고...

많이 복잡한테..
코로나는 광고 조차도 이렇게 간단히 해결 해 줍니다.

일부 개발자들은 Web 기능을 써서 admob 광고를 넣기도 하는데요.
이 부분은 아직 공식적으로 Corona에서 지원하는게 아니라서....
그리고 제가 해보지 않았구요.
그래서 아직 글로 쓸만큼 몰라서 다음에 해보고 올릴께요.

위의 코드를 보면 처음에 require "ads" 를 하는데요.
이걸 하려면 먼저 config.lua 파일에 launchPad 를 세팅해야 합니다.

ads.init( "inmobi", "4028cb962895efc50128fc99d4b7025b" )
위 코드는 init 함수인데요. 처음에 inmobi를 사용하겠다고 하는 것이고 그 다음이 inmobi에 등록된 appId 입니다.
위 번호는 iphone 용 테스트 id 라서 아직 inmobi에 가입하지 않았어도 테스트 할 수 있습니다.
신택스는 아래와 같습니다.
Syntax:
ads.init( providerName, appId )

안드로이드용 테스트 아이디는 아래와 같습니다.
4028cba631d63df10131e1d3818b00cc
그리고 inMobi 싸이트를 보니까 iOS 테스트 아이드는 아래도 있네요.
4028cba631d63df10131e1d4650600cd
또 아래 아이디도 나옵니다.
4028cba631d63df10131e1d3191d00cb
inMobi에 대해 더 세부적인 사항이 궁금하시면 아래 싸이트를 참조하세요.
http://developer.inmobi.com/wiki/index.php?title=Integration_Guidelines

4028cb962895efc50128fc99d4b7025b 는 아이폰에서 제가 직접 테스트 해 본 아이디구요. 나머지는 직접 테스트 해 보진 못했습니다.

 -- following are iPhone, iPod Touch, iPad
 ads.show( "banner320x48", { x=0, y=100, interval=5, testMode=false } )

이 코드를 넣으면 광고가 지정한 위치에 지정된 크기로 보입니다.
테스트를 위해서는 testMode=true 를 해야 합니다.
 Syntax:
 ads.show( adUnitType [, params] )

사용할 수 있는 배너 크기는 두가지 입니다.
    * "banner320x48"
    * "banner300x250"

또 iPad에는 아래 배너 크기도 사용할 수 있습니다.
    * "banner728x90"
    * "banner468x60"
    * "banner120x600"

파라미터를 보면 x,y는 각각 좌표값이고 interval은 광고 refresh 되는 주기 이고 디폴트는 10입니다.

아직 이 ads의 크기는 해상도에 따라 자동으로 바뀌지 않는다고 합니다.
세밀하게 ads 크기를 사용하려면 디바이스를 알아내서 거기에 맞게 배너 크기를 넣어야 합니다.

ads.hide() 함수도 있습니다.

이외에 inMobi 가입 및 appid 받는 방법은 아래 주소를 참조하세요.
http://developer.anscamobile.com/reference/banner-ads

오늘은 앱에 광고 다는 법을 봤구요.

다음시간에는 당초 스케줄 대로 physics 의 collision (충돌) 에 대해 보겠습니다.

감사합니다.






안드로이드는 마켓에 Publish 하는 걸 많이 해봐서 이 부분은 그냥 패스 했는데요.
앱스토어에 올리는건 처음이라 왠지 정리해 두고 싶네요.

이제 Distribution 버전으로 빌드한 앱을 앱스토어에 올리려면 Provisioning Portal 에서 iTunes Connect 버튼을 클릭합니다.

그럼 아래와 같은 화면을 보시게 됩니다.

이번 첫번째 앱은 free 버전입니다.
그래서 Contracts, Tax & Banking Information  같은건 건너 뜁니다.
다음에 유료버전 올릴때 작성해야 겠네요.

오른쪽의 Manage Your Applications 를 클릭합니다.
진행하기 전에 미리 준비해야 할 것들입니다.
빌드한 앱을 zip 으로 압축합니다.
스크린 샷 파일 1~5개
57X57 아이콘 이미지와 같은 512X512 아이콘 이미지 파일 png

이제 Add New App 버튼을 클릭한 후 진행합니다.

그 이후 자세한 설명은 아래 싸이트를 참조하세요.
http://codecrue.egloos.com/1933192

앱에 대한 설명이 다 끝나면 빌드 후 압축한 앱 파일을 Load해야 합니다.
Xcode의  Aplication Loader 로 업로드 하면 된다고 하는데요.

해 보니까 간단하기도 하고... 또 헛갈리기도 하고...
한번 다 통과되면 간단하게 느껴질 거예요.
앱스토어에 올리느라 하루종일 보냈더니 머리가 좀 아프네요...

질문 있으면 올려주세요.

아이폰 개발 프로그램은 팀당 100개의 디바이스를 등록할 수 있도록 한답니다.
디바이스를 등록하기 위해서는 Uniques Device Identification(UDID) 번호가 필요합니다.
이 번호는 Xcode와 iTunes 에서 구할 수 있습니다.

Xcode에서 구하기

- 아이폰이든 아이패드 등 디바이스를 맥 컴퓨터에 연결한다
- XCode - Window - Organizer 를 클릭한다.

- Organizer 왼쪽편에 있는 DIVICES-mobile 을 선택한다.
- Identifier 에 있는 번호를 복사해 둔다.

- Web Page의 Provisioning Portal 로 가서 Devices 를 클릭하고 Add Devices 버튼을 클릭한다.
- 디바이스 이름과 아까 복사해 둔 Identifier를 넣는다.

====> 이렇게 하면 디바이스가 등록이 됩니다.

나중에 여러분이 앱을 빌드하고 테스트하기 위해 디바이스에 install, Uninstall 할 때도 이 Organizer를 열어서 합니다.
그러면 Applications에 디바이스에 깔린 앱들이 나올테구요.
+를 눌러서 여러부들이 빌드한 앱 파일을 선택하시면 디바이스에 자동으로 인스톨 됩니다. (앱이름.app 파일. 여기서는 zip으로 압축할 필요 없습니다.)

*   App IDs 생성
Provisioning profiles를 얻기 위해서는 먼저 App ID를 생성해야 합니다.
아이폰에서 모든 애플리케이션은  App ID를 가지고 있어야 합니다.

App ID를 생성하려면 Web Provisioning Portal로 가서  App IDs를 클릭합니다.

그리고 Description을 씁니다.
App  ID로는 안드로이드에서 말하는 패키지명을 써 넣습니다.
혹시 자신이 개발하는 모든 애플리케이션을 빌드할 때 사용하시려면 끝에  .*를 넣으면 된다고 하네요.
물론 그 앞에 이름들은 다 같아야 하겠죠?

* 배포용 Provisioning Profile 만들기
지난시간에 한 키 등록 이번시간에 한 디바이스 등록 그리고 App IDs 생성 이렇게 다 완료 됐으면 그 다음 메뉴가 Provisioning 이네요.

Provisioning Profiles에는 세가지가 있습니다.
Ad Hoc, Development, Distribution 이 그건데요. 앱스토어에 올리려면 Distribution profile을 사용해야 합니다.

Distribution Provisioning Profile
iOS Provisioning Poral 웹 화면에서 왼쪽에 있는 Provisiioning을 클릭합니다.
Distribution Tab을 클릭합니다.

Destribution Method 는 App Store를 선택하시고
Profile Name에는 앱 이름을 그리고 App ID에는 아까 만든 App ID를 선택하세요.

Submit을 누르고 잠시 기다리신 후 Status가 Active 되면 Distribution Provisioning Profiles를 다운 받습니다.

다운받은 파일을 아래 폴더에 복사해 넣습니다.
완료되면 위와 같은 화면이 뜹니다.

아이폰 앱은 제가 개발해 본 적이 없어서 무지 복잡하게 느껴지네요.
많이 개발 해 봤던 안드로이드 쪽도 실수가 있었으니 아이폰쪽은 미리 충분히 빌드와 앱스토어 업로드 방법을 숙지하고 일을 하려고 합니다.

우선 아이폰 앱 빌드를 위해서는 이 웹사이트에 등록하는 거부터 시작 합니다.
http://developer.apple.com/programs/ios/

간략하게 오늘 할 토픽들을 정리하면
- 개발자 등록
- Keychain certificate
- Device 등록
- App IDs 획득
- Provisioning Profile
- 앱 빌드
- 디비이스에 인스톨 해서 테스트하기
- 앱 스토어에 앱 올리기

이 내용들을 공부해야 합니다.

우선  99불 내고 아이폰 개발자로 등록하지 않으신 분은 아래 웹 사이트로 가셔서 등록 하셔야 합니다.
http://developer.apple.com/devcenter/ios/index.action
(여기서 자세한 방법은 따로 설명 드리지 않겠습니다. 네이버나 구글 검색하시면 자세한 설명 있는 글들 찾을 수 있을거예요.
http://developer.apple.com/devcenter/ios/index.action
http://cafe.naver.com/mcbugi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=74353&social=1
등등)

등록하고 난 후 developer.apple.com에 로그인을 하세요.

우측 상단에 있는 iOS Provisioning Portal 을 클릭해 보세요.

왼쪽에 있는 Certificates, Devices, App IDs, Provisioning, Distribution 이 앱 빌드하고 앱스토어에 등록하는데 중요한 메뉴들 입니다.

그리고 Macintosh HD-Applications-Utilities-Keychain Access.pp 도 중요합니다.

이제 웹사이트에서 인증서 받아서 키체인에 설치를 해야 합니다.
WWDR, 개발자용 인증서, 배포용 인증서를 키체인에 설치 하겠습니다.

제가 사용하는 맥에는 아래와 같이 모두 설치 돼 있습니다.

이걸 다 지우고 새로 깔기도 그렇고.. 회사 컴퓨터라서 맘대로 할 수도 없고 해서..
맥부기의 문성욱님이 설명하신 이미지와 내용을 좀 빌리겠습니다.
직접 보시려면 아래 싸이트에서 보실 수 있습니다.
http://cafe.naver.com/mcbugi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=8953&

---- 아래 문성욱님 글 ------

 

개발 준비, 인증서 등록 추가분 (다른 맥에서 같이 개발) http://cafe.naver.com/mcbugi/10487

----------- 문성욱님 글 끝 -----

자 이제 필요한 키들을 받고 여러분 맥의 키체인에 이것을 등록하는 과정까지 했습니다.

오늘은 여기까지 하구요.

이제 여러분들이 개발한 앱을 디바이스에 테스트하기 위해  Xcode 에 디바이스를 등록하고 App IDs 받고 Provisioning files 처리하고 코로나에서 앱 빌드하고 이걸 앱 스토어에 올리는 과정을 다음 시간에 살펴 보겠습니다.

처음이라서 그런지 앱스토어까지 가는 길이 무지 험난해 보이네요.

그럼....