CORONA SDK composer & transition (화면전환 & 움직이게하기) 앱 만들기 실습 전에 꼭 알고 넘어가야 할 두가지 명령어

1. 코로나로 앱 만들기

2. 설치 및 환경설정
Lua 기본 알고가기
TEST : main.lua
화면전환 (컴포저)
캐릭터 넣기 (트랜지션)
앱만들기 실습
코로나로 앱 만들기
2

3.  화면을 전환해 보자
hello 와 corona 가
2초의 시간차이를 두고
전환하는 것을 해볼게요.
3

4.  화면을 전환해 보자
hello 와 corona 가
2초의 시간차이를 두고
전환하는 것을 해볼게요.
요렇케요~
4

5.  화면을 전환해 보자
필요한 게 뭘까요?
전환에 필요한 두 개의 화면?
5

6.  화면을 전환해 보자
필요한 게 뭘까요?
전환에 필요한 두 개의 화면?
display.newText
명령 쓰면 되지요.
6

7.  화면을 전환해 보자
필요한 게 뭘까요?
전환에 필요한 두 개의 화면?
display.newText
명령 쓰면 되지요.
과연!!
코딩이 그렇게 짧을까요?
7

8.  화면을 전환해 보자
필요한 게 뭘까요?
전환에 필요한 두 개의 화면과
제어해 줄 메인 화면
그리고 두 개의 개념을 알아야 합니다.
Scene
Composer
8

9.  화면을 전환해 보자
필요한 게 뭘까요?
전환에 필요한 두 개의 화면과
제어해 줄 메인 화면
그리고 두 개의 개념을 알아야 합니다.
Scene
Composer
장면
모듈
9

10.  화면을 전환해 보자
필요한 게 뭘까요?
전환에 필요한 두 개의 화면과
제어해 줄 메인 화면
그리고 두 개의 개념을 알아야 합니다.
Scene
Composer
장면
모듈
대상
도구
10

11.  화면을 전환해 보자 : 1-1
hello 화면 만들기
11

12.  기억할 것
변수이름이 두 가지 였던거 기억나지요?
화면전환 코드를 이해해 봅시다.
function Sample()
aa -- 전역변수가 된다.
local aa -- Sample 함수가 끝날 때 소멸된다.
end
function Sample(aa) -- aa 는 자동으로 지역변수가 된다.
-- local 을 붙여줄 경우 오히려 에러를 낸다.
12

13.  화면을 전환해 보자 : 1-1
hello 화면 만들기
composer 안에 scene을 만든다.
scene:create (event)를 불러온다.
>>> hello 2초 corona 슬라이드
>>> 리턴
13
“씬그룹을 보여줘라” 선언 후
화면 중앙에 나타날 글씨를 적는다.
함
수
의
내
용
이 제어를 current 로 정의하고,
시간이 지나면 사라진다.
corona.lua가 0.8초 동안 슬라이드 된다.
제어시간은 2초이다.
시간에 의한 제어를 한다.
scene에 발생하는 (event)함수를 만든다.

14.  화면을 전환해 보자 : 1-2
corona 화면 만들기
어떻게 하면 될까요?
14

15.  화면을 전환해 보자 : 1-2
corona 화면 만들기
어떻게 하면 될까요?
hello 부분하고 딱 두 군데만 바꿔 쓰면 되요.
15

16.  화면을 전환해 보자 : 1-2
corona 화면 만들기
16
왼쪽 오른쪽은 중요하지 않지만…..^^

17.  화면을 전환해 보자 : 1-3
두 화면을 제어 할 main.lua 에서는
둘 중에 하나만 불러오면 알아서 돌아가겠죠!
글자가 잘 움직이면, 이미지로도 한번 해보세요.
세 번째 줄은 배웠으니깐 한번 써 본겁니다. 안 써도 되요~
17

18.  화면을 전환해 보자 : 2
display.newText (sceneGroup, “hello", display.contentCenterX,
display.contentCenterY, 0, 0, native.systemFont, 50)
display.newImage (sceneGroup, "/img/c01.jpg",
display.contentCenterX, display.contentCenterY, 0, 0, true)
display.newText (sceneGroup, "corona", display.contentCenterX,
display.contentCenterY, 0, 0, native.systemFont, 50)
display.newImage (sceneGroup, "/img/c02.jpg",
display.contentCenterX, display.contentCenterY, 0, 0, true)
18
이렇게 쓰면 되죠!

19.  화면을 전환해 보자 : 3
클릭하면 전환되는 것은
어떻게 하는지 해봐요.
전체 화면을
이용해 볼까요?
19

20.  화면을 전환해 보자 : 3
클릭하면 전환되는 것은
어떻게 하는지 해봐요.
전체 화면을
이용해 볼까요?
20

21.  화면을 전환해 보자 : 3
클릭하면 전환되는 것은
어떻게 하는지 해봐요.
전체 화면을
이용해 볼까요?
21
hello.lua가 0.5초 동안 슬라이드 된다.
touch 이벤트 발생이 끝나면
터치에 의한 제어를 한다.
터치되면 디버깅창에 메시지가 나오고
자기가 있던 자리에
create 이벤트 발생

22.  지금까지 배운 명령어
local composer = require ("composer”)
local scene = composer.newScene()
function scene:create (event)
local sceneGroup = self.view
“display.씬 내용”
--이벤트--
local function on_Timer (e)
local currentScene=composer.getSceneName ("current”)
composer.removeScene (currentScene)
composer.gotoScene ("corona", "slideLeft", 500)
end
timer.performWithDelay (2000, on_Timer, 1)
end
scene:addEventListener ("create", scene)
return scene
22

23.  지금까지 배운 명령어
“display.씬 내용”
--이벤트--
function scene:touch (event)
if event.phase == "began" then
print ("You touched the screen!”)
-- reset touch focus
display.getCurrentStage():setFocus (nil)
self.isFocus = nil -- nil=null
composer.gotoScene ("hello", "slideRight", 500)
return true
end
end
Runtime:addEventListener ("touch", scene)
end
scene:addEventListener ("create", scene)
return scene 23

24.  화면을 전환해 보자 : 참조
이벤트가 발생한 터치 순서대로 확인하는 문자열입니다.
- 터치가 화면에 시작되었음을 나타냅니다.
- 터치가 화면에 이동 한 것을 나타냅니다.
- 터치 화면에서 해제되었음을 나타냅니다.
- 시스템 터치의 추적이 취소되었음을 나타냅니다.
24
더 많은 API 보기

25.  화면을 전환해 보자 : 4
클릭하면 전환되는 것은
어떻게 하는지 해봐요.
on_Timer 부분을 지우고
버튼 ‘object’를 넣어
제어해 보세요.
25

26.  화면을 전환해 보자 : 4
corona화면 왼쪽 위에 버튼이 나타났습니다.
이상한 점을 발견 하셨나요?
저 버튼은 hello 화면에도 살아있게 됩니다.
버튼을 corona화면에 귀속시키기 위해서는
Group화 방법을 알아야 한답니다.
26

27.  Group
씬 처음에 코딩했던 “sceneGroup” 의 GROUP 이 떠올랐나요?
씬그룹은 화면에 나타날 녀석들이 들어있는 곳이라고 알려드렸었지요.
27

28.  Group
씬 처음에 코딩했던 “sceneGroup” 의 GROUP 이 떠올랐나요?
씬그룹은 화면에 나타날 녀석들이 들어있는 곳이라고 알려드렸었지요.
28
바로여기

29.  Group
그 씬 그룹에 버튼이 포함된다고 알려주기만 하면 되요.
29
이렇게!! 너무 간단해서
어이가 없죠!?

30.  Transition : 움직여 봅시다.
corona.lua에서
버튼을 클릭하면 이동할 페이지를
study.lua 로 바꾸시고요,
STUDY 가 써있는
study.lua 페이지를
만들어 보세요.
30

31.  Transition : 움직여 봅시다.
hello.lua 파일을 복사한 다음 글자 바꿔주면 됩니다!
31
study.lua 로 이동하라는 뜻이죠!!

32.  Transition : 움직여 봅시다.
hello.lua 파일을 복사한 다음 글자 바꿔주면 됩니다!
32
“복붙”도
실력입니다.
local function on_Timer (e)
자기 혼자 자동으로 어디론가 가버리는
타이머 함수는 지워주세요.

33.  Transition : 움직여 봅시다.
이제 STUDY 라는 저 글자를 움직이게 할게요.
transition.to (a, {time=3000, y=1000, transition=easing.linear})
33
변수
이름
이동하시오 {3초간, y의 좌표는 1000, 직선으로}

34.  Transition : 움직여 봅시다.
이제 STUDY 라는 저 글자를 움직이게 할게요.
transition.to (a, {time=3000, y=1000, transition=easing.linear})
이제 실행하면 에러가 납니다.
잘못된 곳을 찾으셨어요?
34
변수
이름
이동하시오 {3초간, y의 좌표는 1000, 직선으로}

35.  Transition : 움직여 봅시다.
STUDY 라는 저 글자에 이름을 정해주지 않았지요.
언능 써주세요.
35
바로여기

36.  Transition : 움직여 봅시다.
시뮬레이터에서 확인해 보세요.
스르르륵 내려와서 멈추지요?
36
요렇케요~

37.  Transition : 움직여 봅시다.
time=시간,
x=좌표, y=좌표,
alpha=0~1.0사이 값,
xScale=배율,
yScale=배율,
rotation=각도,
delay=시간,
transition=easing.설정값,
onComplete=함수이름
37
더 많은 easing.설정값 보기

38. 잴 많이 씀
 Transition : 움직여 봅시다.
Functions
transition.cancel()
transition.from()
transition.pause()
transition.resume()
transition.to()
38
Convenience Methods
transition.blink()
transition.dissolve()
transition.fadeIn()
transition.fadeOut()
transition.moveBy()
transition.moveTo()
transition.scaleBy()
transition.scaleTo()

39.  강좌 참조 사이트
• Corona SDK youtube
• https://www.youtube.com/watch?v=iMacxZQMPXs
Lua Tutorial 이게 영어라 그렇지 젤 봐야 할 것이라는 생각이 듭니다. 1
• https://www.youtube.com/watch?v=mbupjJXcChI
Corona SDK Tutorial 이게 영어라 그렇지 젤 봐야 할 것이라는 생각이 듭니다. 2
그리고 이사람 동영상목록을 다 봐야 할 것 같아요 ㅠㅠ
• https://www.youtube.com/watch?v=5X2HizsU9Zo
Composer API: button
• https://www.youtube.com/watch?v=W9urL3VAQ4g
Composer API: scene:show and scene:hide and How They're Used
LUA, Corona SDK, Tutorial, Beginners, children // 검색
39

40.  앱 만들기 실습
40
스터디에 참석하여 코딩과 함께 실습하고 실력을 키워 보세요.
-- 본 슬라이드는 (원강민)님의 책을 참조하여
-- 프로그래머가 아닌 웹디자이너가 독학 및
-- 코로나SDK 한국커뮤니티의 도움을 받아
-- 코로나SDK의 저변확대를 위하여 작성한 자료입니다.