이전 글 까지만 해도 이 코드는 유용합니다. 하지만 좀 더 다듬어야 하죠. 작은 파란 사각형을 하나 이상의 손가락으로 움직일 수 있습니다. multitouch input device의 장점은 virtual 상황에서 real world 의 느낌을 주는데 있습니다. 이 코드에 rotation 과 scaling 효과를 주면 훨씬 더 실감나게 움직이곘죠.

Relative Motion


이 작업을 하기 전에 이전 코드(6번)를 실행 시킨 후 한 손가락을 이용했을 때 사각형이 어떻게 움직이는지 한번 보세요. touch point 로 사각형의 중심이 이동한 다음에 움직이죠. 이렇게 사각형의 중심이 이동하지 않고 그냥 touch point 와 그냥 relative 하게 움직이도록 할 겁니다. 이 작업을 하기 위해 moved와 ended phases 에 코드를 추가 할 겁니다.

sample7.lua

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
      
      -- pre-store the centre position of all touch points
      rect.prevCentre = calcAvgCentre( rect.dots )  
      return true  -- we handled the began phase
      
   elseif (e.parent == rect) then
       
      if (e.phase == "moved") then
          
         print( e.phase, e.x, e.y )
         -- calculate the centre position of all touch points
         local centre = calcAvgCentre( rect.dots )
         rect.x = rect.x + (centre.x - rect.prevCentre.x)  -- update the X position of rect
         rect.y = rect.y + (centre.y - rect.prevCentre.y)  -- update the Y position of rect
         rect.prevCentre = centre  -- store the centre of all touch points
         
      else  -- ‘ended’ and ‘cancelled’ phases
          
         print( e.phase, e.x, e.y )
         if (isDevice or e.numTaps == 2) then  -- remove the tracking dot from the list
            
            local index = table.indexOf( rect.dots, e.target )  -- get index of dot to be removed
            table.remove( rect.dots, index )  -- remove dot from list
            e.target:removeSelf()  -- remove tracking dot from the screen
            -- store the new centre of all touch points
            rect.prevCentre = calcAvgCentre( rect.dots )
         end
      end
      return true
   end
   
   return false  -- if the target is not responsible for this touch event return false
end
 





main.lua
sample7.lua

   

여기서 수정한 부분은 아래와 같습니다.

    모든 touch 들의 center 를 계산하고 began phase 안에서 참고하기 위해 그 값을 저장한다.
    moved phase 에서 사각형의 x,y 값에 이전 touch 와 현재의 touch center 사이의 차이점을 추가적용한다.
    ended phase 에 터치들의 저장된 터치들의 중심값을 업데이트한다. 그래서 손가락을 떼더라도 다음 moved phase 에서 사각형이 필요없이 이동하지 않도록 한다.

이제 사용자는 사각형 위에 여러 손가락을 얹어도 이상하게 움직이지 않을 겁니다. 그 손가락들을 바꾸고 움직이고 해도 어색하지 않게 움직입니다. 이제 사각형이 손가락 움직임에 따라 회전하면 더 자연스럽겠네요.

multitouch display object 들을 위한 시뮬레이터 디버거를 사용하실 수 있습니다. tracking dot 중의 하나에서 touch 를 release 했을 때 이 dot 이 사라지지 않는걸 보셨을 겁니다. 이게 디버깅하기 아주 좋은 조건이거든요. 왜냐하면 touch 를 뗐어도 여러 touch point 가 있는 것처럼 데이터가 저장돼 있을 거거든요. 디버깅에는 좋지만 실제 앱을 이렇게 만드는 건 별로 유용하지는 않을 거에요. 계속 하얀 원이 쌓일 테니까요.


이 문제를 해결하시려면 rect:touch() function 의 ended phase 에서 해당 tracking dot들을 없애주면 됩니다. 일단 device 에서 running 하는지 여부를 코드의 시작 부분에서 변수에 저장해 두는 것에서부터 시작해야 되겠네요.

-- which environment are we running on?
local isDevice = (system.getInfo("environment") == "device")

The isDevice variable will be true if the code is running on a real, physical device and it can be used to automatically remove the tracking dot when the user lifts their finger.
isDevice 변수는 이 앱이 실제 디바이스에서 구동될 경우 true 가 될 겁니다. 그러면 이 값이 true 일 경우에만 손가락이 떼어질 때 해당 tracking dot 을 없애버리면 되겠죠.

sample6.lua

if (e.phase == "moved") then
   print( e.phase, e.x, e.y )
 
else  -- ‘ended’ and ‘cancelled’ phases
 
   print( e.phase, e.x, e.y )
   if ( isDevice or e.numTaps == 2 ) then  -- remove the tracking dot from the list
      local index = table.indexOf( rect.dots, e.target )  -- get index of dot to be removed
      table.remove( rect.dots, index )  -- remove dot from list
      e.target:removeSelf()  -- remove tracking dot from the screen
   end
end
return true
 

isDevice or e.numTaps == 2 가 있죠? 이렇게 함으로서 이미 rect:touch() function를 call 한 tap lisener 를 가지는 tracking dot을 가능하게 합니다. 그러면 시뮬레이터에서는 double tap 으로 tracking dot 을 remove 할 수 있도록 구현할 수 있습니다.

그 tap listener 는 이 코드가 시뮬레이터에서 돌아갈 때에만 동작하도록 해야합니다. 그래서 이 때 isDevice 변수를 다시 사용할 겁니다. 이 tap listener 는 tracking dot들을 생성하는 newTrackDot() 함수 안에 추가 됐습니다.

-- listen for a tap when running in the Simulator
function circle:tap(e)
   if (e.numTaps == 2) then
      e.parent = rect  -- set the parent
      rect:touch(e)  -- call touch to remove the tracking dot
   end
   return true
end
   
-- only attach tap listener in the simulator
if (not isDevice) then
   circle:addEventListener("tap")
end




main.lua

sample6.lua

Note that we also:
    우리는 두개의 tap 을 체크해서 double tap 일 경우에만 tracking dot을 remove 할 겁니다.
    그리고 touch 함수안에 했던 대로 .parent property를 세팅합니다.
    이 코드가 시뮬레이터에서 동작할 경우에만 해당 tap listener를 attach 합니다.

그동안 개발한 모바일 웹을 블랙베리용 WebWorks 어플리케이션으로 개발을 해야 합니다. 그래서 블랙베리 웹웍스에 대한 공부를 시작했습니다.

What's a WebWorks application?

BlackBerry WebWorks application은 블랙베리 스마트폰이나 태블릿에 설치할 수 있는 standalone web application 입니다.

What tools do I need?