IT 기술 따라잡기

코로나에서 String을 다루는 방법이 첫번째 살펴볼 주제있니다.
Data and Files 에는 String, Table (Array), Math, Database (SQLite), Files, Crypto 등의 이슈가 있습니다.

첫번째 시간으로 String 인데요.
오늘 배울 부분들을 제가 연습하느라고 샘플 코드를 작성해서 공부했었는데요.
이것을 올려드릴께요.

오늘 글을 보면서 이 샘플코드에 직접 이것 저것 바꿔보면서 출력되는 것을 보면 좀 더 이해가 쉬울것 같습니다.

이 소스를 돌려보면 터미널에 결과값들이 찍힙니다.

String Manipulation

String Library 는 string 을 다루는 함수들을 제공해 줍니다.
루아에서 스트링을 인덱스 할 때 첫번째 문자는 포지션 1 입니다. (C 나 자바와 같이 0이 아닙니다.)
이 숫자는 마이너스도 허용합니다. 이 경우 스티링 맨 마지막에서부터 뒷쪽으로 검색하게 됩니다.
그러니까 마지막 문자가 -1이 됩니다.
String library는 테이블 스트링으로 이러한 함수기능을 제공합니다. 또한 스트링 테이블의 _index 필드에 스트링에 대한 메타테이블도 세팅 되어 있습니다. 이것을 개발자들은 객체 지향 개념으로 이용할 수 있습니다. 예를 들어 string.byte(s,i)는 s:byte(i)로 바꿔도 결과 값은 같습니다..

string.byte(s[,i[,j]])
문자 s[i],s[i+1] 문자의 내부 numerical code가 리턴 됩니다. 디폴트는 1 입니다. j의 디폴트 값은 i값입니다. 이 numerical code는 서로 다른 플랫폼간의 이동 및 공유가 되지 않습니다.

string.char(...)
0 이상의 integer를 Receive 받습니다. argument 숫자 길이 만큼 스트링이 리턴 됩니다. 근데 이건 제가 이것 저것 넣어 봤는데.. 결과값이 안 나오더라구요. 혹시 여러분 중에 무엇인지 아시는 분 댓글 부탁드립니다.

string.find(s,pattern[,init[,plain]])
스트링 s내에서 패턴에 맞는 첫번째를 찾습니다. 매치 되는 것을 찾으면 s의 인텍스를 리턴합니다. 없으면 nil을 리턴합니다. 세번째 옵션으로 있는 init 검색을 시작할 위치를 나타냅니다. 디폴트는 1이고 마이너스 값도 올 수 있습니다. 네번째 plain이 false일 경우 pattern matching 이 turn off 됩니다. plain이 있으면 init은 반드시 있어야 됩니다.
패턴이 검색 되면 이 검색된 패턴이 리턴됩니다.

string.format(formatstring,...)
매치 되면 미리 formatted 된 버전이 리턴됩니다. format string은 일반 C 함수의 printf 와 유사한 기능이 있습니다. 다른 점은 옵션들 입니다. l,L,n,p,h 는 support 되지 않습니다. 그리고 q 라는 옵션이 제공 됩니다. q는 루아 번역기가 읽기 쉬운 형태로 스트링을 포맷합니다.

예를 들어
  string.format('%q', 'a string with "quotes" and \n new line')
는
      "a string with \"quotes\" and \
      new line"
로 포맷 됩니다.

c, d, E, e, f, g, G, i, o, u, X, and x 옵션은 argument로 숫자가 들어가게 됩니다. 그리고 q와 s 는 문자가 들어가게 됩니다.

샘플코드에 이런 패턴들을 다 넣어 봤습니다. 결과값들이 다 다르게 나오는데 어떤건지 잘 와 닿지가 않네요. 실제 상황에서는 어떻게 써 먹는 건지도 모르겠구요.
제 프로그래밍 경력이 많지 않고 또 깊지 않아서 잘 모르는 것 같습니다. 혹시 이걸 어느 경우에 써 먹을 수 있는지 아시는 분들 조언 부탁 드립니다.

string.gmatch(s.pattern)
iterator 함수가 리턴 됩니다. 검색된 곳의 그 다음 capture 가 리턴 됩니다. 패턴이 없으면 전체가 매치된 것으로 나옵니다.
예를 들어
     s = "hello world from Lua"
     for w in string.gmatch(s, "%a+") do
       print(w)
     end
이것은 스트링 s의 모든 것을 iterate 합니다. 그리고 한줄당 하나씩 프린트 됩니다.
아래 예제는 key=value 의 모든 쌍들을 collect 합니다.
     t = {}
     s = "from=world, to=Lua"
     for k, v in string.gmatch(s, "(%w+)=(%w+)") do
       t[k] = v
     end

샘플코드에 있으니까 직접 결과 값을 확인 해 보세요.

string.gsub(s,pattern,repl[,n])
이건 해석하거나 설명하기 좀 복잡하네요.
아래 샘플을 보시죠.
     x = string.gsub("hello world", "(%w+)", "%1 %1")
     --> x="hello hello world world"
     
     x = string.gsub("hello world", "%w+", "%0 %0", 1)
     --> x="hello hello world"
     
     x = string.gsub("hello world from Lua", "(%w+)%s*(%w+)", "%2 %1")
     --> x="world hello Lua from"
     
     x = string.gsub("home = $HOME, user = $USER", "%$(%w+)", os.getenv)
     --> x="home = /home/roberto, user = roberto"
     
     x = string.gsub("4+5 = $return 4+5$", "%$(.-)%$", function (s)
           return loadstring(s)()
         end)
     --> x="4+5 = 9"
     
     local t = {name="lua", version="5.1"}
     x = string.gsub("$name-$version.tar.gz", "%$(%w+)", t)
     --> x="lua-5.1.tar.gz"

좀 헛갈리네요. 저도 소스를 잘 분석해 봐야겠어요.
뭐 그렇게 쓸일이 있을까? 싶지만요.

아래 함수들은 많이 쓰일 것 같네요.

string.len(s)
s의 length를 반환합니다. 아무 값도 없으면 length는 0 입니다. embeded 0도 카운트 됩니다. 그래서 "a\000bc\000" 의 length 는 5 입니다.

string.lower(s)
스트링을 모두 소문자로 바꿉니다.

string.match(s,pattern[,init])
패턴에 맞는 첫번째 조건을 찾습니다. 찾으면 찾은 값을 리턴해 줍니다. 없으면 nil을 리턴해 줍니다. 패턴이 아무것도 없으면 모든 문자를 리턴합니다. 세번째 옵션값인 init 은 검색을 시작할 위치를 표시합니다.

string.rep(s,n)
n개의 수만큼 s를 표시합니다.

string.reverse(s)
s의 거꾸로 된 값을 리턴합니다.

string.sub(s,i[,j])
i 번째에서 j번째까지의 문자를 표시합니다. i,j는 마이너스가 될 수 있습니다. j가 없으면 -1이 디폴트 입니다. string.sub(s,1,j)는 j에 -1값이 들어가고 string.sub(s,-i)는 length i의 suffix를 리턴합니다.

string.upper(s)
모든 문자를 대문자로 바꿔 줍니다.

### Patterns

Character Class

캐릭터 클래스는 문자들의 세트를 표현합니다.

. (dot) 모든 문자를 표시한다.
%a : 모든 문자를 표시한다.
%c : control character들을 표시한다.
%d : 숫자들을 표시한다.
%l : 소문자를 표시한다.
%p : 기능 문자들을 표시한다.
%s : 스페이스를 표시한다.
%u : 대문자를 표시한다.
%w : 알파뉴메릭을 표시한다.
%x : 헥사디시멀 숫자들을 표시한다.
%z : 0으포 표시되는 문자를 출력한다.
%x (x가 알파벳 문자가 아닌 경우) 캐릭터 x를 표시한다.
[set] : 세트 안의 모든 문자들의 집합 클래스를 표시한다.
%w 나 _%w는 모든 알파뉴메릭 문자와 언더스코어를 표시하고 [0-7] 은 8진수를 [0-7%l%-]은 8진수와 소문자와 -를 표시한다.
[^set] : 위에 해당하는 것의 반대로 표시한다.
 %a , %c 등으로 표시 되는데 이것을 대문자로 표시하면 그것의 반대로 표시한다.
예를 들어 %S 의 경우는 non-space 문자들을 출력한다.

pattern item
패턴 아이템은 아래와 같은 조건을 갖는다.
- 클래스의 싱글 캐릭터에 매치 되는 싱글 캐릭터 클래스
- *로 시작하는 싱글 캐릭터 클래스 0번 이상 반복되는 캐릭터. 이 반복되는 아이템들은 가능한 긴 시퀀스에 매치 된다.
- +로 시작하는 캐릭터. 1번 이상 반복되는 캐릭터. 이 반복되는 아이템들은 가능한 가장 긴 시퀀스에 매치된다.
- -로 시작하는 캐릭터. 0번 이상 반복되는 캐릭터. 이 반복되는 아이템들은 가능한 가장 짧은 시퀀스에 매치된다.
- ? 로 시작하는 캐릭터.
- %n n은 1~9 사이이다. n번째 무자를 말한다.
- %bxy x와 y 는 두개의 구별되는 문자들이다. x에서 시작해서 y에서 끝난다.

이렇게 코로나의 String 다루는 법을 정리했습니다.

다음엔 코로나에서 사용하는 배열인 tables 에 대해 알아보겠습니다.

이 Sprite Sheets 는 조금 독특한 것 같습니다.
이전에 플래시 같은데서 썼던 개념인지 어떤지 모르겠지만.
여러 동작을 표현한 하나의 이미지 파일을 불러와서 특정 구역을 지정하면.
코로나는 그 특정구역별로 하나씩 이미지로 인식합니다.
그리고 그것을 Frame 단위로 display 하면서 애니메이션 효과를 냅니다.

글로만 쓰니까 잘 모르겠죠?

이렇게 하나의 이미지파일에 여러 동작을 그려 넣습니다.
개발자는 Sprite Sheets를 이용해서 저 하나하나별로 구역을 나눕니다.
그러면 코로나는 그 개별 구역을 개별 이미지로 인식해서 애니메이션을 연출합니다.

이렇게 하면 하나의 이미지 파일을 불러오니까 메모리 절약 효과도 있겠네요.
Loading 시간도 줄일 수 있겠구요.
그 외에 어떤 장점이 있는지 (MovieClips와 비교해서) 한번 알아보죠.

Corona 는 두가지 형태의 Sprite Sheets 를 제공합니다.
사이즈와 포지션이 일정한 것과 사이즈와 포지션이 일정하지 않은 것이 있습니다.

위에 있는 이미지는 uniformly-sized 프레임 입니다. (이 이미지는 코로나 샘플 파일의 sprites 폴더에 보면 있습니다.)

두번째는 외부 데이터 파일에서 그 크기와 위치를 지정하는 건데요. 이건 Zwoptex 나 TexturePacker 같은 툴을 이용해서 만듭니다.

이 그림은 위에서 말한 샘플 코드 sprites 폴더 아래 있습니다. 그리고 외부 데이터 파일은 uma.lua 이름으로 있습니다.

코로나는 애니메이트 된 캐릭터에 대한 순서나 거꾸로 움직이기 등의 메소드를 제공하는 constructor들을 제공합니다. 이것은 frame-base 가 아니라 time-base로 주로 이용 됩니다.
샘플 코드 중 JungleScene 샘플 을 보시면 퓨마의 움직임하고 사람의 움직임이 약간 다릅니다. 정확히 속도가요.  이것은 두 객체가 다른 frame rate 으로 움직이기 때문입니다.

위에서 말한대로 이 JungleScene은 uniformly-sized frames를 사용했고 HorseAnimation 은 non-uniformly sized and positioned 방법을 사용했습니다.

혹시 다음에 시간 되면 이 샘플 소스들도 자세히 살펴 보도록 하겠습니다.
우선은 이 Sprite Sheets에 대한 진도를 계속 나가겠습니다.
주의 할 점은 이미지 사이즈가 디바이스의 맥시멈 사이즈를 넘으면 그림이 표시 되지 않습니다.
이 정보는 system.getinfo("maxTextureSize")를 통해서 얻을 수 있습니다.

이 sprite 효과를 사용하려면 아래와 같이 합니다.
require "sprite"
그리고 sprite.newSpriteSheet , sprite.newSpriteSheetFromData 이 두 함수는 새로운 sprite sheets를 생성합니다.

spriteSheet = sprite.newSpriteSheet("image.png", fromeWidth, fromeHeight)
이 코드는 uniformly-sized frames sprite sheet를 생성합니다.
spriteSheet = sprite.newSpriteSheetFromData("image.png", spriteData)
이 코드는 외부 파일에서 지정한 frame size와 포지션을 적용할 때 이용합니다.

외부 데이터 파일은 아래와 같은 형식으로 돼 있습니다.
-- test.lua
module (...)
 
function getSpriteSheetData()
 
        local sheet = {
                frames = {
                        {
                        name = "01.png",
                        spriteColorRect = { x = 38, y = 38, width = 50, height = 50 },
                        textureRect = { x = 2, y = 70, width = 50, height = 50 },
                        spriteSourceSize = { width = 128, height = 128 },
                        spriteTrimmed = true,
                        textureRotated = false
                        },
 
                        {
                        name = "02.png",
                        spriteColorRect = { x = 38, y = 36, width = 50, height = 52 }, 
                        textureRect = { x = 2, y = 242, width = 50, height = 52 }, 
                        spriteSourceSize = { width = 128, height = 128 }, 
                        spriteTrimmed = true,
                        textureRotated = false
                        },
                }
        }
        return sheet
end

위 소스는 이미지 파일을 두개의 이미지로 나누는데요. 위치와 사이즈 등을 설정하도록 돼 있습니다.

이 파일 (test.lua) 을 이용하려면 아래와 같이 합니다.
local sprite = require("sprite")
-- In this case, test.lua is exported from Zwoptex
local test = require("test.lua")
-- Method defined by test.lua that returns table data defining the sprites
local spriteData = test.getSpriteSheetData()
-- Load the sprite sheet in test.png using the sprite definitions from spriteData
local spriteSheet = sprite.newSpriteSheetFromData( "test.png", spriteData )

이 경우 밑에 두 줄은 아래와 같이 합칠 수도 있습니다.
local spriteSheet = sprite.newSpriteSheetFromData( "test.png", test.getSpriteSheetData() )

하나의 기본 이미지에 여러 캐릭터들이 들어 있을 때 관련 된 캐릭터들만 따로 세팅을 할 수 있습니다.
spriteSet = sprite.newSpriteSet(spriteSheet, startFrame, frameCount)

sprite에 추가 할 수도 있습니다.
sprite.add(spriteSet, "startFlying", startFrame,frameCount, time,[loopCount])

sprite sheet를 없애고 메모리에서 release시키려면 아래와 같이 합니다.
sprite.Sheet:dispose()
이 경우 removeSelf()도 불려 집니다.

======= o ========== o ========== o ========== o ========= o ===

si = sprite.newSprite( spriteSet )
sprite의 새로운 인스턴스를 만듭니다. 스프라이트는 Display Object입니다. 스프라이트는 한번에 하나의 애니메이션 시퀀스를 플레이 합니다.

si:prepare([sequence])
현재 플레이 되고 있는 애니메이션 시퀀스를 정지합니다. 현재 시퀀스를 바꿀수도 있고 첫번째 시퀀스의 프레임으로 갈 수도 있습니다.

si:play()
애니메이션 시퀀스를 플레이 합니다.현재의 프레임에서 시작합니다.
 
si:pause()
애니메이션을 정지시킵니다. 맨 마지막 display됐던 프레임이 남아 있게 됩니다.
 
si:addEventListener("sprite", listener)
스프라이트 인스턴스 애니메이션이 이벤트를 일으켰을 때 리스너에 통보 합니다.

이벤트는 리스너에게 다음과 같은 필드들을 전달합니다.

event.sprite
이벤트를 발생한 스프라이트; event.sprite.sequence 같이 현재 스프라이트의 프로퍼티들에 접근 할 수도 있습니다.

event.phase
phase는 다음과 같은 요소들이 있습니다.

"end" - 플레이를 멈춘다.
"loop" - 순차적으로 아니면 거꾸로 스프라이트를 루핑합니다.
"next" - 스프라이트의 다음 프레임이 플레이 됩니다.

======= o ========== o ========== o ========== o ========= o ===

여기까지 코로나의 Sprite Sheets로 애니메이션을 구현하는 방법에 대해 알아봤습니다.
근데 뭔가 어렵고 불편한 것 같은 느낌이 드네요.
뭔가 숙달이 안 되서 그런건가?

한번 다양한 방법으로 실습을 해 봐야겠습니다.
샘플을 보던지... 내가 직접 만들던지... 어쨌든 그래야 정확하게 내것이 되겠는데요.

일단 다음 주제는 데이터와 파일 단원에 들어가겠습니다.
SQLite (DB) 와 파일 (file) control도 하게 될 텐데요.

이 주제로 강좌를 진행하다가 sprite sheet 직접 실습해보고 sprite sheet 사용  방법을 알기 쉽게 한번 더 다룰께요.

그럼.......

코로나 SDK 는 어도브 플래시 (adobe flash)  회사 다니던 사람이 나와서 만든 툴이예요.

아래 링크를 클릭하시면 코로나 SDK를 개발한 Carlos가 자신들이 고생하면서 성장한 얘기에 대해 기술해 놨습니다.
최근 adobe 사에서도 기존의 Flex를 확장해서 모바일 앱 개발 툴을 만든다고 하던데 ..
우리의 Carlos가 이 글을 통해서 adobe (어도비) 사와의 경쟁에서도 자신있다라고 쓰고 있네요.
http://blog.anscamobile.com/2011/10/thoughts-on-flash/

코로나의 강력한 Physics Engine은 Box2D를 사용해서 구현한거고.. 이것에 대해서는 우리가 이미 살펴 봤습니다.

그러면 이제 코로나의 Animation and Motion 기능은 어떤가 한번 살펴 보죠.

이 애니메이션 기능도 아주 강력합니다. 플래시 개발하던 사람이 개발했으니까 당연하겠죠?
우선 Transitions (통과, 이동)에 대해 보겠습니다.
이 Transition Library는 여러분들에게 단 한줄로 쉽게 애니메이션을 만들 수 있게 해 줍니다.
단지 alpha 프로퍼티를 이용해서 객체를 천천히 사라지게 할 수도 있습니다.
transition.to 메소드로 껏을 할 수 있는데요.
한번 보죠.
local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 255,255,255 )
 
local w,h = display.contentWidth, display.contentHeight
 
local square = display.newRect( 0, 0, 100, 100 )
square:setFillColor( 255,255,255 )
 
local w,h = display.contentWidth, display.contentHeight
 
-- (1) move square to bottom right corner; subtract half side-length
--     b/c the local origin is at the square's center; fade out square
transition.to( square, { time=1500, alpha=0, x=(w-50), y=(h-50) } )
 
-- (2) fade square back in after 2.5 seconds
transition.to( square, { time=500, delay=2500, alpha=1.0 } )

위 소스를 main.lua로 저장하고 이를 시뮬레이터에서 실행 합니다.
첫줄은 사각형을 그리고 다음에 흰색으로 채웁니다.
w,h 변수에 contentWidth와 contentHeight 값을 넣구요.
그 다음에 두번째 사각형을 그리고 흰색으로 채웁니다.

그리고 transition.to로 이 사각형을 대각선으로 움직입니다.
(이때 사각형은 두번째 지정한 사각형이 됩니다.)
이때 alpha값은 0으로 놨으니까 점점 투명해 지겠죠?

그리고 두번째로 transition.to를 적용했는데요.
이것은 점차 투명도가 없어지는 겁니다.
그러니까 0이었던 alpha 값이 정해진 time과 delay에 맞춰 점차 1로 변하게 됩니다.

실행하면 아래와 같은 화면이 나옵니다.

사각형 하나는 좌상단에 그대로 있고 또 다른 사각형이 좌상단에서 우하단으로 점점 흐려지면서 움직입니다.
다 움직이고 난 후 이 사각형은 점차 뚜렷해 집니다. (delay를 사용했기 때문이죠)

아주 간단한 코드로 애니메이션을 만들었죠?

syntax (신택스)는 아래와 같습니다.
transition.to( target, params )
이 params에 time, alpha, x, y, delay 등이 들어간 겁니다.
정확하게 아래의 파라미터들이 사용가능합니다.
params.time : 밀리세컨드 단위로 동작이 일어나는 시간을 나타냅니다. 디폴트는 500(0.5초) 입니다.
params.transition : 디폴트는 easing.linear 입니다. 이 Easing 에 대해서는 잠시 후 다룰 겁니다.
params.delay : 동작 (코로나에서는 이것을 tween이라고 표현합니다.) 이 시작될 때까지의 시간입니다. 이 시간만큼 기다렸다가 실행 됩니다.
params.delta : boolean값으로 디폴트는 nil로 false를 말합니다.
params.onStart : tween이 시작 되기 직전에 불려집니다. 리스너가 이를 캣치 해서 어떤 동작을 작동 시킬 수 있습니다.
params.onComplete : tween이 끝난 직후 불려집니다. 리스너가 이를 캣치 해서 어떤 동작을 작동 시킬 수 있습니다.

transition.form(target,params)는 transition.to와 비슷한 역할을 합니다. 단지 시작하는 프로퍼티 값이 params table에 특정 지어지고 final값들은 target prior에 상응하는 값을 가진다고 돼 있는데.. 저도 잘 이해가 안 되네요.

아래코드를 보세요.
local rect = display.newRect(  0, 0, 100, 100 )
rect:setFillColor(255,255,255)
 
local tMax =1000+system.getTimer()
local function fadeOut(event)
  local t = event.time
  if t < tMax then
    rect.alpha = 1 - t/tMax
  else
    rect.alpha = 0
    -- done, so remove listener
    Runtime:removeEventListener("enterFrame", fadeOut )
  end
end
 
-- Add listener to begin animation
Runtime:addEventListener( "enterFrame", fadeOut )

사각형을 만들고 흰색으로 채우고
tMax에 현재시각보다 1초 더 많은 시각을 대입하고
fadeOut 함수에는 점차 alpha값을 주는 로직으로 돼 있습니다.
리스너는 Runtime리스너로 enterFrame시 fadeOut을 실행하도록 돼 있구요.
이 리스너는 함수 안에서 alpha 값이 0이 되면서 remove 됩니다.

이와 똑같은 기능을 아래와 같이 단 3줄로 할 수 있습니다.

local rect = display.newRect( 0, 0, 100, 100 )
rect:setFillColor(255,255,255)
 
transition.to(rect, {time=1000, alpha=0})

이제 transition.to의 간편함을 알겠네요.

이외에 아래 기능들이 있습니다.
transition.cancel( tween )    Cancels the tween.
transition.dissolve( src, dst, duration, delayDuration )

이제 아까 살펴 보기로 했던 Easing을 볼까요?

easing library는 transition library에 의해 사용되는 interpolation 함수들의 collection 입니다.
아래와 같은 종류들이 있구요.

easing.linear( t, tMax, start, delta )
easing.inQuad( t, tMax, start, delta )
easing.outQuad( t, tMax, start, delta )
easing.inOutQuad( t, tMax, start, delta )
easing.inExpo( t, tMax, start, delta )
easing.outExpo( t, tMax, start, delta )
easing.inOutExpo( t, tMax, start, delta )

start와 final 값을 만들기 위해 여러분만의 easing 함수를 만들 수도 있습니다.
함수안의 인수들은 다음과 같습니다.
t : transition이 시작된 이후부터 진행된 시간
tMax : transition의 duration
start : 시작 값
delta : 변화 값 (final value = start + delta)

무비클립 (Movieclips)

여러장의 이미지들을 테이블에 넣고 이를 순차적으로 보여주면서 애니메이션 효과를 내는 것이 무비크립입니다.
저는 두 물체가 부딪혔을 때 폭발하는 애니메이션을 이 무비클립으로 효과를 줬었습니다.
플래시 하시는 분들은 플래시에서 구현한 애니메이션을 코로나로 표현할 때 유용할 것 같습니다.
이 movieclip library에 대해 자세히 살펴 보겠습니다.
이 기능을 이용하려면 movieclip.lua 파일이 있어야 합니다.

위 파일을 다운 받으시면 됩니다.
한 400줄 되는 코드인데요. 각자 이 코드를 분석해 보시면 아마 많은 도움이 되실 겁니다.

우선 이 파일을 쓰려면 require()문을 써야합니다.
local movieclip = require("movieclip")
자 그럼 하나 만들어 볼까요?

이 그림들을 이용할 겁니다.

저도 이 그림들을 어떤 샘플 파일에서 받은 것 같은데요.

이름은 explode1.png ~ explode9.png 로 합니다.

local movieclip = require("movieclip")

function bombAni()
    bombAnim = movieclip.newAnim{"images/explode1.png", "images/explode2.png", "images/explode3.png", "images/explode4.png", "images/explode5.png",
    "images/explode6.png","images/explode7.png", "images/explode8.png", "images/explode9.png"};
    bombAnim.x = 200;
    bombAnim.y = 200;

    bombAnim:play{ startFrame=1, endFrame=9, loop=5, remove=true }
end

bombAni()

이 코드를 main.lua 파일에 넣고 실행 합니다.

첫번째 줄은 movieclip 파일을 require 하는 부분입니다.

그 다음 bombAni() 함수가 애니메이션 효과를 주는 부분 입니다.

movieclip.newAnim{} 에다가 사용할 그림들을 다 넣습니다.

그리고 이 값들을 bombAnim이라는 변수에 넣습니다.

bombAnim.x , y 좌표를 줍니다. (폭발하는 위치가 됩니다.)

그리고 bombAnim:play{} 로 애니메이션을 실행 시킵니다.

startFrame은 첫번째 그림부터 한다는 것이고 9번째 그림에서 끝나게 됩니다.

그리고 이 폭발 장면은 5번 반복하게 되고 폭발 장면이 끝난 후에는 remove 됩니다.

이 코드를 실행 시키면 폭발하는 장면이 그럴 듯 하게 나옵니다.

remove 파라미터를 false로 하면 마지막 이미지가 없어지지 않고 계속 남아 있습니다. 디폴트는 false입니다.

그리고 loop 부분을 넣지 않으면 디폴트 값으로 0이 들어가는데요. 이 경우 무한정으로 루프가 반복됩니다.

그리고 startFrame과 endFrame을 적당히 정해주면 중간 이미지부터 시작하거나 끝낼 수 있습니다.

object:reverse() 애니메이션이 거꾸로 실행 됩니다.

play와 똑 같이 파라미터를 넣으시면 됩니다.

object:reverse{startFrame=1, endFrame=9, loop=5, remove=true}

object:nextFrame() : 다음 이미지로 애니메이션이 넘어갑니다.

object:previousFrame() : 이전 이미지로 넘어갑니다. 그리고 정지합니다.

object:stop() :  애니메이션을 현재 프레임에서 정지합니다.

object:stopAtFrame(frame) : 지정한 이미지에서 애니메이션이 정지합니다.

bombAnim:stopAtFrame(2)
bombAnim:play()
 
bombAnim:stopAtFrame(1)
bombAnim:reverse()

이 코드를 추가해 보세요. 뭔가 바뀌었나요? 전 잘 모르겠는데.......

이부분도 많이 시도해 봐야 겠어요.

object:setLabels(labels)

객체에 라벨을 매깁니다.

myAnim:setLabels{ firstLabel=1, anotherLabel=3 }

object:setDrag 이 값이 true가 되면 드래그 할 수 있습니다. 그리고 드래그 범위를 지정하려면 bounds 파라미터를 사용할 수 있습니다.

myAnim:setDrag{ drag=true, limitX=false, limitY=false, onPress=myPressFunction, onDrag=myDragFunction,
                onRelease=myReleaseFunction, bounds={ 10, 10, 200, 50 }}

눌려졌을 경우 myPressFunction 이 실행되고 드래그 될 경우는 myDragFunction이 실행되고 release 됐을 경우는 myReleaseFunction이 실행됩니다.

Drag의 범위는 10,10,200,50 이 되구요.

이 기능으로 아주 다양한 표현을 할 수 있겠는데요...

이 기능을 없애려면 단순하게 myAnim:setDrag{drag=false}를 하시면 됩니다.

이 transition library를 사용하지 않고 애니메이션을 구현해야 할 때가 있습니다.

제 탁구 앱 (Multi Player Ping Pong) 에서 공이 튀는 부분도 프로그램으로 그냥 했거든요.

볼이 벽면에 계속 튀는 코드를 보겠습니다.

local xdirection,ydirection = 1,1
local xpos,ypos = display.contentWidth*0.5,display.contentHeight*0.5
local circle = display.newCircle( xpos, ypos, 20 );
circle:setFillColor(255,0,0,255);
 
local function animate(event)
        xpos = xpos + ( 2.8 * xdirection );
        ypos = ypos + ( 2.2 * ydirection );
 
        if (xpos > display.contentWidth - 20 or xpos < 20) then
                xdirection = xdirection * -1;
        end
        if (ypos > display.contentHeight - 20 or ypos < 20) then
                ydirection = ydirection * -1;
        end
 
        circle:translate( xpos - circle.x, ypos - circle.y)
end
 
Runtime:addEventListener( "enterFrame", animate );

이렇게 하면 저 빨간 공이 움직이면서 벽에 계속 튕깁니다.

제 앱의 경우는 각 벽면들과 공도 객체로 만들어서 addBody를 한 다음에 bounce를 주었습니다.

이렇게 프로그램으로 애니메이션을 하려면 enterFrame 으로 리스너를 달아야 합니다.

그리고 제가 했던 방법으로 하면 Ball에 addBody를 하고 Ball:setLinearVelocity()를 주어도 됩니다.

여기서는 enterFrame을 이용하는 방법을 좀 더 보도록 하죠.

위에 있는 소스는 enterFrame의 Frame-base로 코딩을 한 것입니다.

이 frame rate은 config.lua에서 세팅해 주죠? 그래서 이 세팅 값에 따라 속도가 느려지루도 빨라질 수도 있습니다.

이것을 방지하기 위해서 time-base로 코딩을 해도 됩니다.

만약에 일정한 움직임에 딱 맞는 sound효과를 주려면 위에 Frame base보다는 아래에 있는 time base가 더 낫겠네요.

local xdirection,ydirection = 1,1
local xpos,ypos = display.contentWidth*0.5,display.contentHeight*0.5
local circle = display.newCircle( xpos, ypos, 20 );
circle:setFillColor(255,0,0,255);
 
local tPrevious = system.getTimer()
local function animate(event)
        local tDelta = event.time - tPrevious
        tPrevious = event.time
        xpos = xpos + ( 0.084*xdirection*tDelta );
        ypos = ypos + ( 0.066*ydirection*tDelta );
 
        if (xpos > display.contentWidth - 20 or xpos < 20) then
                xdirection = xdirection * -1;
        end
        if (ypos > display.contentHeight - 20 or ypos < 20) then
                ydirection = ydirection * -1;
        end
 
        circle:translate( xpos - circle.x, ypos - circle.y)
end
 
Runtime:addEventListener( "enterFrame", animate );

실행 결과는 똑 같습니다.

다만 system.getTimer() 와 event.time으로 time base로 볼의 움직임을 콘트롤 한 것이 다릅니다.

이 time base의 경우에도 디바이스가 메모리가 딸려서 버벅 거린다면 문제가 일어날 수 있겠죠?

이렇게 버벅거리는 경우 아래 코드로 보완 할 수 있다고 하네요.

-- Add the following below the code in the previous example
 
local tSuspend
local function onSuspendResume( event )
        if "applicationSuspend" == event.type then
                tSuspend = system.getTimer()
        elseif "applicationResume" == event.type then
                -- add missing time to tPrevious
                tPrevious = tPrevious + ( system.getTimer() - tSuspend )
        end
end
 
Runtime:addEventListener( "system", onSuspendResume );

이 코드를 아까 time base 코드에 덧 붙이세요.

이 경우는 테스트 해 보기가 어려워서 직접 테스트는 못했는데요.

그냥 사용하면 될 것 같습니다.

오늘은 transition library와 Movieclips 그리고 코딩으로 애니메이션 구현하는 법에 대해서 배웠습니다.

다음시간엔 movieclips보다 조금 더 복잡하지만 세밀한 애니메이션 효과를 낼 수 있는 Sprite Sheets 에 대해서 살펴 보겠습니다.

그럼....