Employing Multitouch

이제 멀티 터치 포인트들의 시작을 detect 할 수 있는 object를 가지게 됐습니다. 그리고 그 객체는 각 포인트에 대한 tracking dot을 생성하고 touch 이벤트들을 receive하게 되죠.

이 멀티터치 정보의 기본적인 사용법을 활용하기 위해 이 rect display object를 touch point의 중심에 위치시킬겁니다. 이러한 기능들은 사각형 객체의 :touch() function 안에서 구현됩니다. 여러 터치 이벤트들의 중심에 rect 객체를 위치시키기 위해 우선 모든 터치 이벤트들의 평균 x값과 y값을 구해야 합니다. 이 기능을 위해서는 별도의 함수를 만들어서 구현하겠습니다.

sample5.lua

local function calcAvgCentre( points )
   local x, y = 0, 0
   
   for i=1, #points do
      local pt = points[i]
      x = x + pt.x
      y = y + pt.y
   end
   
   return { x = x / #points, y = y / #points }
end

이 함수를 call 하려면 rect 는 자신이 생성한 tracking dot들의 리스크를 보관하고 있어야 합니다. 이 리스트들을 생겼을 떄 바로 사각형의 property 로 추가할 겁니다.

-- create object to listen for new touches
local rect = display.newRect( 200, 200, 200, 100 )
rect:setFillColor( 0, 0, 255 )
rect.dots = {}  -- table for the list of tracking dots

-- standard multi-touch event listener
function rect:touch(e)
 
   local target = e.target  -- get the object which received the touch event
   
   -- handle began phase of the touch event life cycle...
   if (e.phase == "began") then
       
      print( e.phase, e.x, e.y )
      local dot = newTrackDot(e)  -- create a tracking dot
      rect.dots[ #rect.dots+1 ] = dot  -- add the new dot to the list
      return true  -- we handled the began phase
      
   elseif (e.parent == rect) then
      
      local centre = calcAvgCentre( rect.dots )  -- calculate centre pos of touch points
      rect.x, rect.y = centre.x, centre.y  -- update the position of rect
      
      if (e.phase == "moved") then
         print( e.phase, e.x, e.y )
      else -- ‘ended’ and ‘cancelled’ phases
         print( e.phase, e.x, e.y )
      end
      return true
      
   end
   
   return false  -- if the target is not responsible for this touch event return false
end



main.lua
sample5.lua

오늘은 처음으로 Coronasdk  홈페이지의 blog 에 올라오는 글 중 Friday Night Forum 글을 읽고 블로그에 옮겨 봤습니다.

블랙베리와 관련해서 올라왔는데요.

회사에서 직원들에게 회사 폰으로 블랙베리를 제공하고 있어서 제가 개발하는 모바일 웹들은 모두 블랙베리를 주 타겟으로 하고 있습니다.

회사 폰이 블랙베리가 아닌 다른 기종으로 쉽게 바뀔것 같지도 않구요.

그래서 블랙베리에 대해 관심이 있는데요.

이번에 새로운 운영체제가 발표 됐네요.

회사에서 회사 폰을 교체할 때 이 새 운영체제의 블랙베리를 선택할지 아니면 아이폰이나 안드로이드를 선택할지는 모르겠습니다.

블랙베리가 일반 소비자 시장에서는 인기가 전혀 없지만 아직 Enterprise 시장에서는 다른 폰 보다 우월한 면이 있기는 한 것 같습니다.

Corona SDK 에서는 블랙베리를 지원하지 않는 것으로 알고 있는데 Corona SDK 블로그에 관련 글이 올라와서 읽어 봤습니다.

코로나에서 블랙베리도 지원하려고 하는 걸까요?

아니면 블랙베리에서 안드로이드 앱을 사용할 수 있도록 지원할 수도 있겠네요.

원래 블랙베리 10에서 안드로이드 앱을 지원할 거라는 뉴스가 있기는 했는데 이번 발표내용을 보도한 기사에서는 그런 얘기를 볼 수가 없네요.

When leaving a storyboard scene, you are required to clean up:

Runtime listeners    

Timers    

Transition's that have an onComplete    

Audio that has an onComplete    

Network requests that have not completed yet and will call back to a listener.

Also, if you load sounds in your storyboard scene in either createScene, willEnterScene or enterScene, it's your responsibility to dispose of them in exitScene() or destroyScene().

스토리보드 장면을 떠날때는 깨끗하게 정리하고 가셔야 합니다.

런타임 리스너

타이머

onComplete 된 Transition

onComplete 된 오디오

아직 complete 되지 않았고 리스너로 call back 될 네트워크 요청

그리고 createScene, willEnterScene or enterScene 안에서 스토리보드에 사운드를 로드했다면 exitScene() or destroyScene() 에서 그것들을 dispose 시켜주셔야 합니다.

댓글에는 이미지나 위젯들도 clean up 해 줘야 된다고 써있네요.

그리고 transition이나 network request 는 어떻게 cancel 해야 하냐는 질문도 있구요.

아직 답글은 안 달렸고.....

그거 보니까 작년 12월에 보낸 제 질문 메일이 생각납니다.

이 블로그에 올라온 질문들 정리해서 메일로 보냈었는데... 한달째 감감무소식....

이젠 메일로 보내지 말고 포럼에 올려봐야겠어요.

The Multitouch Problem


위 코드의 장점은 multiple touche들을 쉽게 구분할 수 있다는 겁니다. 그래서 각 object들은 자신들에 할당된 touch를 잃지 않고 계속 영향을 받을 수 있는거죠. 아주 큰 장점이지만 작은 문제점도 있습니다.

"
아주 큰 장점은 setFocus 로 유저가 어떤 object를 touch 헀으면 그 object 내에서 해당 touch는 계속 유효하게 되는 겁니다. 그 object 밖으로 나가버리면 더이상 유효하지 않게 되는거죠.

작은 문제점은 다른 touch 이벤트를 receive 하게 되면 이 setFocus 는 이 display object를 stop 시킨다는 겁니다.


만약 아직 setFocus를 call 하지 않았다면 hasFocus 를 사용하는 것이 해당 object 가 그 object에서 시작하지 않은 이벤트들을 무시하도록 하는 편리한 방법입니다. 이 방법은 자주 필요한데요. 왜냐하면 유저들은 그 객체가 아니라 배경화면이나 그 객체 밖에서 시작하는 swiping 이벤트를 자주 발생시키거든요. 그 swiping 이벤트는 이 객체를 지나가게 되죠. 그래서 이 객체에서 시작되지 않은 이벤트를 무시하도록 하려고 하는 겁니다. 그리고 그 다음 드는 의문은 코로나가 어떻게 여러 객체들이 multiple touch들을 받아서 작동하도록 만드는가 입니다. 그 방법은 바로 began phase안에 tracking object를 생성하는 것입니다.


The Concept

이전에 다뤘던 코드에 약간의 변화를 주겠습니다. 우리는 began phase안에서 여러 객체들을 생성하는 하나의 object를 생성할 겁니다. 이 객체들은 각각의 touch들을 track 할 겁니다. 그리고 그 touch 가 끝나면 해당 객체를 없애도록 코딩할 겁니다. 이를 구현하기 위해 touch event의 began phse를 listen 하는 함수를 하나 만들겁니다. 그리고 moved 를 listen 하는 함수도 하나 만들거구요. 이 두개의 함수들은 target listening object와 tracking dot object들에 add 될 겁니다.


Spawning Tracking Dots



첫번째로 처음에 began phase를 handle 하게 될 객체를 생성해야 합니다. began phase에서 이 객체는 tracking dot을 생성하기 위해 function을 call 할 겁니다.

sample3.lua

 
-- create object to listen for new touches
local rect = display.newRect( 200, 200, 200, 100 )
rect:setFillColor( 0, 0, 255 )
 
-- standard multi-touch event listener
function rect:touch(e)
 
   local target = e.target  -- get the object which received the touch event
   
   -- handle began phase of the touch event life cycle...
   if (e.phase == "began") then
 
      local dot = newTrackDot(e)  -- create a tracking dot
      return true  -- we handled the began phase
   end
 
   return false  -- if target is not responsible for this touch event return false
end
 
rect:addEventListener("touch")  -- listen for touches starting on the touch object

간단해서 딱 보면 코드를 이해하실 수 있을 겁니다. 어떤 touch 이벤트가 일어나던지 그 began phase를 listen 할 display 객체를 생성합니다. 이 객체가 touch 이벤트의 began phase를 receive하면 새로운 display object를 생성할 함수를 call 하게 됩니다. 이 새 object는 그 객체를 생성시킨 touch를 track 하게 될 겁니다. 그 작업은 setFocus 를 call 함으로서 가능해 지죠. hasFocus 값을 세팅하지 않은 점을 잘 보세요. 왜냐하면 이 multitouch 객체들은 began phase에서만 처리되고 있거든요.

-- creates an object to be moved
local function newTrackDot(e)
 
   local circle = display.newCircle( e.x, e.y, 50 )  -- create a user interface object
   circle.alpha = 0.5  -- make it less imposing
   
   -- standard multi-touch event listener
   function circle:touch(e)
 
      local target = circle  -- get the object which received the touch event
      
      -- handle each phase of the touch event life cycle...
      if (e.phase == "began") then
 
         display.getCurrentStage():setFocus(target, e.id)  -- set touch focus on this object
         target.hasFocus = true  -- remember that this object has the focus
         return true  -- indicate the event was handled
 
      elseif (target.hasFocus) then  -- this object is handling touches
         
         if (e.phase == "moved") then  -- move the display object with the touch
            target.x, target.y = e.x, e.y
         else  -- "ended" and "cancelled" phases
            display.getCurrentStage():setFocus(target, nil)  -- remove touch focus
            target.hasFocus = false  -- this object no longer has the focus
         end
         return true  -- indicate that we handled the touch and not to propagate it
      end
      
      return false  -- if target is not responsible for this touch event return false
   end
   
   circle:addEventListener("touch")  -- listen for touches starting on the touch layer
   circle:touch(e)  -- pass the began phase to the tracking dot
   
   return circle  -- return the object for use
end

Multiple Touches


이 함수를 multiple display object들에 의해 사용되도록 하는 방법은 그렇게 어렵지 않습니다. setFocus 로 catch 해서 각 display object별로 한개의 touch 에 대해 listen 하도록 할 수 있습니다. 즉 하나의 touch 가 하나의 object 에 할당 되면 다른 touch 들은 그 object 에서는 무시되는 거죠. 이렇게 각 object 별로 각 touch 들을 할당해 놓으면 멀티터치 기능이 구현 가능합니다.

multitouch 를 구현하기 위해 이전 글에서 만들었던 코드를 수정할 겁니다.

sample2.lua

이 코드가 이전 코드와 다른점들을 살펴 보죠.

- multitouch 를 activate 했습니다.
- display object 생성을 wrap 했습니다. 그래서 display object 가 반복적으로 call 될 수 있게 됐습니다.
- setFocus 가 특정 touch ID 를 받아서 유저가 화면에 하는 여러 touch 들을 구분할 수 있도록 했습니다.
- When ending the touch, setFocus accepts nil to release the object’s touch input.
- touch가 끝나면 setFocus 는 nil 을 받아서 해당 object가 그 touch input 받는 일을 release 시켜 줍니다.


위 의 코드를 실행하면 5개의 큰 원을 생성하게 됩니다. 그 각 원들은 따로따로 움직일수가 있죠. setFocus 가 display object에 특정 Touch ID를 연결시켜주기 때문에 그 object는 다른 touch 들은 무시하게 됩니다. 이 로직으로 각 원들은 각각 다른 touch들이 할당 되서 multitouch로 따로따로 움직일 수 있게 되는 거죠.

이번주의 Corona Tutorial은 무척 깁니다.

한번에 다 포스팅 하기는 어렵구요... 그렇게 하다가 작성해 놓은 글 날렸어요... ;;

예제가 총 11개 나오던데 이 예제별로 포스팅을 하려고 합니다.

이번에는 직접 실습도 해 가면서 저 나름대로 덧 붙일게 있으면 덧 붙여서 정리하려구요.

오늘의 guest tutorial 은 Matt Webster, a.k.a. “HoraceBury.”  가 무료로 정보를 공유합니다. Matt 은 central London 에서 Development Manager 로 일하고 있습니다. 그는 닷넷과 자바 웹 개발분야에 15년의 경력을 가지고 있습니다. 그리고 게임이나 physics-based app 을 개발하는데는 Corona 를 사용하고 있습니다. 그는 Corona Labs Ambassador이기도 한데요 London meet-ups 를 두번이나 개최했습니다. 그리고 2013년도에는 더 많은meet-up을 가질 계획입니다. Matt 의 첫번째 Corona game 은  Tiltopolis 이었습니다. 고전인 Columns 와 Tetris를 합친 게임이죠.

Preface

우선 project files을 다운 받으세요.그러면 아래 예제들을 쉽게 테스트해 보실 수 있습니다. 각각의 samplex 모듈들은 기능을 갖고 있는 mini-project 입니다. 그리고 main.lua 에서 한번에 하나씩 실행시켜 보실 수 있습니다. 필요한 구문만 코멘트를 지워서 사용하세요. 마지막 모듈은 sample11.lua 는 전체 pinch-zoom-rotate module 입니다. 이 모듈은 여러분이 앱을 개발하실 때 실제 활용하시면 아주 유용할 겁니다.

Introduction

대부분의 어플리케이션에서는 하나의 터치 포인트일 경우 이를 제대로 표현할 수 있습니다. 아주 다양한 앱들이 저마다 아주 많은 기능들을 가지고 있지만 한번에 한개의 input 만 사용할 수 있죠. 한번에 한개의 버튼을 누를 수 있고 한번에 한개의 swipe 이벤트를 다룰 수 있고 등등이요.

앵그리버드를 예로 들어보죠. 이 앱에서는 각각의 tap, drag 그리고 swipe 들이 단지 한 손가락으로 이루어 지도록 돼 있습니다. 메뉴를 살펴보는 것, settings 를 여는 것, 새를 날려버리는 것 모두 한개의 손가락으로 처리하죠. 한 손가락으로만 하게 되면 일단 간단하죠. 그리고 직관적이고 또 집중할 수 있도록 도와 줍니다. 그런데 pinch zoom 같이 두 손가락 이상으로 해야 되는 경우도 있습니다.

이 경우 규칙을 어떻게 적용해야 할까요? 한손가락을 사용할 때는 터치된 object 에 action 을 구현하고 두 손가락이 사용됐을 때는 parent display group 의 top-level 에 어떤 action을 구현해야 겠죠.


이 튜토리얼의 목적은 이 multitouch 와 관련해서 최대한 간단하게 하려면 어떻게 처리해야 되는지에 대해 여러분에게 알려드리려는 겁니다. 그리고 pinch zoom 에 대해서도 좀 더 자세하게 다룰 겁니다.

Touch Basics

이 튜토리얼을 보시는 분들은 대부분 Corona touch model 을 사용해 본 경험이 있으 실 겁니다. 그러니 그와 관련해서는 핵심적인 내용 몇가지만 언급하겠습니다.

    addEventListener() 는 특정 display 객체에 대해 사용자의 터치가 일어나는 지를 listen 하기 위해 사용됩니다.
    터치 이벤트에는 두 종류가 있습니다 : touch and tap.
    터치 이벤트에는 다음과 같은 phases 가 있습니다 : began, moved and ended..
    display object 에 터치와 tap 이벤트가 동시에 일어날 경우 tap event 보다 touch event phases 가 먼저 fire 됩니다.
    Returning true from an event function stops Corona from passing that event to any display objects beneath the object.
    multitouch를 위해 system.activate(“multitouch”) 를 사용함니다.
    터치 이벤트가 일단 시작되면 다른 touch phases들은display.getCurrentStage():setFocus().를 call 함으로서 같은 listener 에 연결 되게 됩니다.
    setFocus 는 한 object와 한 evnet 별로 call 될 수 있습니다.
    display object에 dispatchEvent()를 call 하면 별도의 원하는 event들을 만들어 낼 수 있습니다.
    dispatchEvent로 fire 된 이벤트들은 다른 display hierarchy 에 전파되지 않습니다.

The Tap Problem



위에 언급한대로 터치 이벤트에는 여러 phases들이 있습니다. 각각 디바이스에 대한 유저의 interaction 상황을 나타냅니다. 화면에 손가락을 대고, 움직이고 그리고 떼고 하는 상황들을요.


일반적인 tap 이벤트는 주어진 시간안에 — iOS employs about 350 milliseconds — 위에 언급한 이벤트 phases들을 fire 합니다. 그리고 시작과 끝 지점은 10 픽셀이하의 거리이구요.
이 시간과 거리별로 계속 해당 phases가 발생 되는 겁니다.


즉 터치이벤트와 tap 이벤트를 동시에 listening 한다면 터치 리스너 함수 내에서 이미 곧 tap 리스너 함수가 call 될 거라는 것을 알 수 있을 겁니다. 그리고 이미 tap 이벤트를 감지했다면 더는 tap 리스너를 attach 할 필요가 없습니다. 이 튜토리얼에서는 tap 이벤트는 코드를 복잡하게 만들 뿐이라서 코딩해 넣지 않을 겁니다.

위 함수에서는 multitouch 가 아닌 일반적인 touch event를 처리합니다.
이 예제로는 아래와 같은 일을 할 겁니다.

    객체에 터치가 시작됨
    터치 후 움직임으로서 객체도 움직이게 됨
    touch 가 off 가 되면 객체는 영향을 받지 않음
    해당 터치가 한 객체를 움직이는 동안은 다른 객체는 터치의 영향을 받지 않는다.
    display object는 자신의 :touch(e) function을 갖는다. (global function이 아니라)

해당 객체에서 터치가 일어났을 때에만 영향을 받고 터치가 객체 바깥에서 일어나면 터치의 영향을 받지 않습니다. 이 기능은 hasFocus 를 세팅해서 인데요. 해당 객체는 began이 일어난 이후에 touch phase들을 accept 하게 됩니다. 또한 한번 터치가 일어나면 그 터치는 끝날때까지 해당 객체에 영향을 미치게 됩니다. 바로 setFocus 가 코로나에게 이후의 터치 진행 상황을 해당 객체에 적용하라고 일러 주는 것이거든요.

Facebook Corona TIP

Want to turn off your debug print statements for your production build?

production build에서는 디버그용 print 구문이 실행되지 않도록 하고 싶으세요?

Add this little block of code to your main.lua:

main.lua 파일에 아래 코드 블럭을 추가하세요.

Then to turn it off, change "debugMode" to false.

print 구문을 출력하고 싶지 않으시면 간단하게 debugMode를 false로 바꿔주시기만 하면 됩니다.