멀티 터치 지원하는 모양 맞추기 앱 개발하기

지난번 튜토리얼이 길어서 11번에 나눠서 다 올렸습니다.

그거 올리느라고 다른 글들이 많이 밀렸네요.

공부할 것이 많아서 좋습니다. :)

오늘 다룰 글은 1월 29일에 Coronasdk 홈페이지에 올라온 튜토리얼입니다.

모양 맞추기 게임을 아주 쉽게 잘 가르쳐 주고 있네요.

Guest Tutorial: Basic Shape-Matching App

Posted on January 29, 2013. Written by Rob Miracle

오늘의 guest tutorial 은 Greg Pugh 의 무료 강좌 입니다. 그는 MC Strategies 에서 플래시 및 앱 디벨로퍼로 일하고 있고 펜실베니아 Nanticoke 에 있는 independent studio인 GP Animations의 owner 이기도 합니다.  Greg이 개발한 앱들은 그의 블로그에서보실 수 있습니다. 또한 그는 RayWenderlich.com 과 Kwiksher.com에 Corona tutorial을 연재하고 있습니다. 또한 그는 최근 Corona Ambassador 로서 Corona SDK 의 세계로 새로 진입하는 개발자들을 위한 iBook 을 집필하고 있습니다.

Preface

애들이 있다 보니까 저의 iPad는 아이들이 주로 독서하거나 게임할 때 그리고 앱들을 가지고 노는데 사용합니다. 바로 지금 제 딸이 두 책에 끌리는가 봅니다. 제가 쓴 책 (http://www.ColinTurtle.com)과  약간 괴상한 "Game For Cats" 라는 책에요. 조만간 제 딸은 자기 외모와 색깔들과 알파벳 뭐 이런것들을 배울 나이가 되겠죠. 그리고 다른 앱들을 가지고 놀게 될 겁니다. 오늘 저는 아이들이 모양을 드래그 and 드롭해서 같은 모양의 틀에 맞추는 아주 기초적인 아이들용 앱을 만드는 방법으로 보여드리려고 합니다.

우선 실제 이 앱이 동작하는 것을 이 비디오를 통해서 먼저 보셨으면 합니다.

보시다시피 두개의 모양을 동시에 drag 할 수 있게 만들 겁니다. 왜냐하면 아이들은 smart device들을 가지고 놀 때 두손을 모두 사용하려고 하는 경향이 있거든요. 이 기능을 구현하기 위해 David McCuskey 가 만든 dmc_multitouch 를 사용할 겁니다. (관련 모듈이 들어 있는 파일들은 프로젝트에 포함돼 있습니다. 그러니 따로 다운 받으실 필요는 없구요. 그냥 이 프로젝트만 다운 받으시면 됩니다.) 이 글을 쓰는 지금 시점에는 코로나 시뮬레이터에서 멀티터치를 지원하지 않고 있습니다. 테스트를 하시려면 publish 를 해서 디바이스에 인스톨 하신 다음에 멀티터치를 테스트 하셔야 할 겁니다.

프로젝트 파일은 여기에서 다운 받으실 수 있습니다. 일단 SnapShapes 폴더의 압축을 풀면 그 안에 두개의 폴더가 있을 겁니다. SnapShapes_FINAL 에는 완성된 main.lua file 가 있습니다. 그리고 SnapShapes_START 폴더에는 단순한 artwork 와 supporting files 들만 있습니다.

Project Code

시작하시려면 우선 여러분이 사용하시는 텍스트 에디터를 여시고 create a new file 을 선택하신 다음에 그 파일 이름을 main.lua 로 하고 SnapShapes_START 폴더 안에 저장하세요. 첫번째로 할 작업은 dmc_multitouch.lua 파일을 import 하는 겁니다. 아래 코드를 카피해서 main.lua 에 붙여넣기 하세요.

-- Require dmc_multitouch
MultiTouch = require("dmc_multitouch");

다음으로는 status bar 를 감출겁니다. 아이들은 상태바에 나오는 시간이나 여러분 phone 에 어떤 서비스들이 있는지 등은 관심이 없거든요.

-- Hide status bar
display.setStatusBar(display.HiddenStatusBar);

이제 제공된 이미지들을 여러분의 images 폴더에 넣으세요. 그리고 아래 코드를 복사해서 main.lua  파일에 붙여 넣고 저장하세요.

-- Background image
local background = display.newImageRect("images/background.png", 640, 960);
background.x = display.contentCenterX;
background.y = display.contentCenterY;
-- Square outline
local sqLine = display.newImageRect("images/sqLine.png", 228, 228);
sqLine.x = 473;
sqLine.y = 181;
-- Square
local square = display.newImageRect("images/square.png", 188, 188);
square.x = 144;
square.y = 778;
-- Circle outline
local circLine = display.newImageRect("images/circLine.png", 245, 245);
circLine.x = 181;
circLine.y = 180;
-- circle positioning
local circle = display.newImageRect("images/circle.png", 200, 200);
circle.x = 473;
circle.y = 778;
-- myText positioning
local myText = display.newImageRect("images/myText.png", 508, 78);
myText.x = 311;
myText.y = 475;

Corona SDK Simulator 를 여신 후 File > Open 을 선택하세요. 그리고 SnapShapes_START  폴더에 있는 main.lua 를 여세요. phone 종류는 iPhone으로 선택하시기 바랍니다. 이제 여러분 시뮬레이터는 아래 이미지처럼 보일 겁니다.

이제 여러분은 화면에 display 해야할 모든 것을 다 display 했습니다. 이제 기능들을 추가할 차례입니다.
우선 파란 원에 적용될 코드를 만들겁니다. 그 다음에는 단지 변수 이름 등만 수정해서 빨란 사각형에 적용하면 됩니다. 이 때 이 원에 대해 멀티터치가 가능하도록 하고 initial positioning variables 들을 0으로 세팅하세요. 아래 코드를 복사해서 여러분이 만든 main.lua 파일에 붙여 넣으세요.

-- Circle
MultiTouch.activate(circle, "move", "single");
-- Set initial variables to 0
local circlePosX = 0;
local circlePosY = 0;

원을 드래그 하면 이 원은 touch event의 target 이 될 겁니다. moved 와 ended 같은 phases 들을 이용해서 기능을 구현할 수 있게 되는 거죠. 이 원이 위에 있는 동그란 점선 중앙에 50픽셀 이내로 접근했다면 그 원은 그 동그란 점선 안으로 snap 될 겁니다. 그 외의 경우에는 원은 그냥 드래그한 장소에 있게 됩니다.
아래 코드를 추가해 주세요.

-- User drag interaction on blue circle
local function circleDrag (event)
local t = event.target
-- If user touches & drags circle, follow the user's touch
if event.phase == "moved" then
   circlePosX = circle.x - circLine.x; 
   circlePosY = circle.y - circLine.y;
   if (circlePosX < 0) then circlePosX = circlePosX * -1; end
   if (circlePosY < 0) then circlePosY = circlePosY * -1; end
   -- If user drags circle within 50 pixels of center of outline, snap into middle
   if (circlePosX <= 50) and (circlePosY <= 50) then
      circle.x = circLine.x;
      circle.y = circLine.y;
   end

이 원이 동그란 점선 안으로 snap 됐고 유저가 드래그 하는 것을 멈췄다면 그 원은 동그란 점선 안에 제대로 안착돼 있을 갑니다. 

아래 코드를 추가하세요.

-- When the stops dragging circle within 50 pixels of center of outline, snap into middle, and...
elseif event.phase == "ended" then
   if (circlePosX <= 50) and (circlePosY <= 50) then
      circle.x = circLine.x;
      circle.y = circLine.y;
     -- ...lock circle into place where it cannot be moved.
     MultiTouch.deactivate(circle);
   end
end
return true;
end

마지막으로 circleDrag 함수에 이벤트 리스너를 추가하세요. 그리고 저장하시구요.

circle:addEventListener(MultiTouch.MULTITOUCH_EVENT, circleDrag);

시뮬레이터를 refresh 하면 화면에서 파란 원을 드래그 하실 수 있으실 겁니다. 그리고 동그란 점선 중앙에서 50 픽셀 이내로 접근하면 동그란 점선 중앙에 원이 곧바로 snap 될 겁니다. 더이상 드래그를 하지 않으면 그 원은 동그란 점선 안에 제대로 위치해 있을 겁니다.

이제 같은 코드를 빨간 사각형에 적용해 보죠.
그냥 변수 이름들만 바꾸시면 됩니다.

-- Same actions for the square as the circle
MultiTouch.activate(square, "move", "single");
local squarePosX = 0;
local squarePosY = 0;
local function squareDrag (event)
local t = event.target
if event.phase == "moved" then
   squarePosX = square.x - sqLine.x;
   squarePosY = square.y - sqLine.y;
   if (squarePosX < 0) then squarePosX = squarePosX * -1; end
   if (squarePosY < 0) then squarePosY = squarePosY * -1; end
   if (squarePosX <= 50) and (squarePosY <= 50) then
      square.x = sqLine.x;
      square.y = sqLine.y;
   end
elseif event.phase == "ended" then
   if (squarePosX <= 50) and (squarePosY <= 50) then
      square.x = sqLine.x;
      square.y = sqLine.y;
      -- If you'd like to be able to move the square again, comment out the line below
      MultiTouch.deactivate(square);
   end
end
return true;
end
square:addEventListener(MultiTouch.MULTITOUCH_EVENT, squareDrag);

사각형이 점선안에 제대로 자리 잡은 후에도 계속 드래그할 수 있도록 하시려면 코드의 deactivate 라인을 주석처리해 주세요.
이제 유저가 두 모양을 모두 제자리에 놓았다면 유저에게 잘 했다고 축하 해 주시면 되겠네요.

여기까지 입니다. 아이들이 가지고 놀 수 있는 앱을 아주 쉽고 빠르고 만들었습니다.

The Next Step?

위에 구현된 기본적은 기능을 확장해서 좀 더 큰 아이나 어른들을 위한 앱으로 발전 시킬 수도 있겠죠.

    이 코드를 활용해서 아이들이 인형에게 옷을 입히는 앱을 만들 수도 있겠죠?
    여러 조각의 퍼즐을 맞추는 게임을 만들수도 있을 겁니다. 위에 있는 함수들을 여러 조각들에 적용해서 구현하면 될 겁니다.
    adventure game 에 puzzle challenge 를 만들 수도 있을 겁니다.

모바일 혁명이 계속된다면 교육용 앱도 지금 보다 많이 대중성을 가질 겁니다. multitouch 모양 맞추기 기능의 기본을 이해하고 있으면 집에서만이 아니라 학교에서도 사용할 수 있는 아주 좋은 앱을 확장해서 개발할 수도 있겠죠?