코로나로 앱 만들기

2

설치 및 환경설정Lua 기본 알고가기TEST : main.lua

화면전환 ( 컴포저 )캐릭터 넣기 ( 트랜지션 )

앱만들기 실습

코로나로 앱 만들기

3

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

4

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

요렇케요 ~

5

화면을 전환해 보자필요한 게 뭘까요 ?

전환에 필요한 두 개의 화면 ?

6

화면을 전환해 보자필요한 게 뭘까요 ?

전환에 필요한 두 개의 화면 ?

display.newText명령 쓰면 되지요 .

7

화면을 전환해 보자필요한 게 뭘까요 ?

전환에 필요한 두 개의 화면 ?

display.newText명령 쓰면 되지요 .

과연 !!코딩이 그렇게 짧을까요 ?

8

화면을 전환해 보자필요한 게 뭘까요 ?

전환에 필요한 두 개의 화면과제어해 줄 메인 화면그리고 두 개의 개념을 알아야 합니다 .

Scene

Composer

9

화면을 전환해 보자필요한 게 뭘까요 ?

전환에 필요한 두 개의 화면과제어해 줄 메인 화면그리고 두 개의 개념을 알아야 합니다 .

Scene

Composer

장면모듈

10

화면을 전환해 보자필요한 게 뭘까요 ?

전환에 필요한 두 개의 화면과제어해 줄 메인 화면그리고 두 개의 개념을 알아야 합니다 .

Scene

Composer

장면모듈

대상도구

11

화면을 전환해 보자 : 1-1

hello 화면 만들기

12

기억할 것변수이름이 두 가지 였던거 기억나지요 ?화면전환 코드를 이해해 봅시다 .

function Sample()    aa                  -- 전역변수가 된다 .    local aa           -- Sample 함수가 끝날 때 소멸된다 .end

function Sample(aa)     -- aa 는 자동으로 지역변수가 된다 . -- local 을 붙여줄 경우 오히려 에러를 낸다 .

13

화면을 전환해 보자 : 1-1

hello 화면 만들기composer 안에 scene 을 만든다 .

scene:create (event) 를 불러온다 .>>> hello 2 초 corona 슬라이드>>> 리턴

“ 씬그룹을 보여줘라” 선언 후화면 중앙에 나타날 글씨를 적는다 .

함수의내용

이 제어를 current 로 정의하고 ,시간이 지나면 사라진다 .corona.lua 가 0.8 초 동안 슬라이드 된다 .제어시간은 2 초이다 .

시간에 의한 제어를 한다 .

scene 에 발생하는 (event) 함수를 만든다 .

14

화면을 전환해 보자 : 1-2

corona 화면 만들기

어떻게 하면 될까요 ?

15

화면을 전환해 보자 : 1-2

corona 화면 만들기

어떻게 하면 될까요 ?

hello 부분하고 딱 두 군데만 바꿔 쓰면 되요 .

16

화면을 전환해 보자 : 1-2

corona 화면 만들기

왼쪽 오른쪽은 중요하지 않지만… ..^^

17

화면을 전환해 보자 : 1-3

두 화면을 제어 할 main.lua 에서는둘 중에 하나만 불러오면 알아서 돌아가겠죠 !

글자가 잘 움직이면 , 이미지로도 한번 해보세요 .

세 번째 줄은 배웠으니깐 한번 써 본겁니다 . 안 써도 되요 ~

18

화면을 전환해 보자 : 2

display.newText (sceneGroup, “hello", display.contentCenterX, display.contentCenterY, 0, 0, native.systemFont, 50)

display.newImage (sceneGroup, "/img/c01.jpg", display.con-tentCenterX, display.contentCenterY, 0, 0, true)

display.newText (sceneGroup, "corona", display.contentCen-terX, display.contentCenterY, 0, 0, native.systemFont, 50)

display.newImage (sceneGroup, "/img/c02.jpg", display.con-tentCenterX, display.contentCenterY, 0, 0, true)

이렇게 쓰면 되죠 !

19

화면을 전환해 보자 : 3

클릭하면 전환되는 것은어떻게 하는지 해봐요 .

전체 화면을이용해 볼까요 ?

20

화면을 전환해 보자 : 3

클릭하면 전환되는 것은어떻게 하는지 해봐요 .

전체 화면을이용해 볼까요 ?

21

화면을 전환해 보자 : 3

클릭하면 전환되는 것은어떻게 하는지 해봐요 .

전체 화면을이용해 볼까요 ?

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)endscene:addEventListener ("create", scene)return scene

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

endendRuntime:addEventListener ("touch", scene)endscene:addEventListener ("create", scene)return scene

24

화면을 전환해 보자 : 참조이벤트가 발생한 터치 순서대로 확인하는 문자열입니다 .

- 터치가 화면에 시작되었음을 나타냅니다 .

- 터치가 화면에 이동 한 것을 나타냅니다 .

- 터치 화면에서 해제되었음을 나타냅니다 .

- 시스템 터치의 추적이 취소되었음을 나타냅니다 .

더 많은 API 보기

25

화면을 전환해 보자 : 4

클릭하면 전환되는 것은어떻게 하는지 해봐요 .

on_Timer 부분을 지우고

버튼 ‘ object’ 를 넣어 제어해 보세요 .

26

화면을 전환해 보자 : 4

corona 화면 왼쪽 위에 버튼이 나타났습니다 .

이상한 점을 발견 하셨나요 ?저 버튼은 hello 화면에도 살아있게 됩니다 .

버튼을 corona 화면에 귀속시키기 위해서는Group 화 방법을 알아야 한답니다 .

27

Group

씬 처음에 코딩했던 “ sceneGroup” 의 GROUP 이 떠올랐나요 ?

씬그룹은 화면에 나타날 녀석들이 들어있는 곳이라고 알려드렸었지요 .

28

Group

씬 처음에 코딩했던 “ sceneGroup” 의 GROUP 이 떠올랐나요 ?

씬그룹은 화면에 나타날 녀석들이 들어있는 곳이라고 알려드렸었지요 .

바로여기

29

Group

그 씬 그룹에 버튼이 포함된다고 알려주기만 하면 되요 .

이렇게 !! 너무 간단해서어이가 없죠 !?

30

Transition : 움직여 봅시다 .

corona.lua 에서 버튼을 클릭하면 이동할 페이지를study.lua 로 바꾸시고요 ,

STUDY 가 써있는 study.lua 페이지를만들어 보세요 .

31

Transition : 움직여 봅시다 .

hello.lua 파일을 복사한 다음 글자 바꿔주면 됩니다 !

study.lua 로 이동하라는 뜻이죠 !!

32

Transition : 움직여 봅시다 .

hello.lua 파일을 복사한 다음 글자 바꿔주면 됩니다 !

“ 복붙”도실력입니다 .

local function on_Timer (e) 자기 혼자 자동으로 어디론가 가버리는 타이머 함수는 지워주세요 .

33

Transition : 움직여 봅시다 .

이제 STUDY 라는 저 글자를 움직이게 할게요 .

transition.to (a, {time=3000, y=1000, transition=easing.linear})변수이름이동하시오 {3 초간 , y 의 좌표는 1000, 직선으로 }

34

Transition : 움직여 봅시다 .

이제 STUDY 라는 저 글자를 움직이게 할게요 .

transition.to (a, {time=3000, y=1000, transition=easing.linear})

이제 실행하면 에러가 납니다 .

잘못된 곳을 찾으셨어요 ?

변수이름이동하시오 {3 초간 , y 의 좌표는 1000, 직선으로 }

35

Transition : 움직여 봅시다 .

STUDY 라는 저 글자에 이름을 정해주지 않았지요 .

언능 써주세요 .

바로여기

36

Transition : 움직여 봅시다 .

시뮬레이터에서 확인해 보세요 .

스르르륵 내려와서 멈추지요 ?

요렇케요 ~

37

Transition : 움직여 봅시다 .

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

38

잴 많이 씀

Transition : 움직여 봅시다 .

Functions

transition.cancel()transition.from()transition.pause()transition.resume()transition.to()

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=iMacxZQMPXsLua Tutorial 이게 영어라 그렇지 젤 봐야 할 것이라는 생각이 듭니다 . 1• https://www.youtube.com/watch?v=mbupjJXcChICorona SDK Tutorial 이게 영어라 그렇지 젤 봐야 할 것이라는 생각이 듭니다 . 2그리고 이사람 동영상목록을 다 봐야 할 것 같아요 ㅠㅠ• https://www.youtube.com/watch?v=5X2HizsU9ZoComposer API: button• https://www.youtube.com/watch?v=W9urL3VAQ4gComposer API: scene:show and scene:hide and How They're Used

LUA, Corona SDK, Tutorial, Beginners, children // 검색

40

앱 만들기 실습스터디에 참석하여 코딩과 함께 실습하고 실력을 키워 보세요 .

-- 본 슬라이드는 ( 원강민 ) 님의 책을 참조하여 -- 프로그래머가 아닌 웹디자이너가 독학 및 -- 코로나 SDK 한국커뮤니티의 도움을 받아-- 코로나 SDK 의 저변확대를 위하여 작성한 자료입니다 .