오늘은 무얼 공부할까 싶다가.. 그냥 터치 이벤트를 하려고 합니다.
음… 일단 starling 자체는 TouchEvent 로 사용자와의 인터랙션이 이루어진다고 생각하시면 간단할 것 같아요.
일단 터치 이벤트에 대해서 알아봅시다.
http://doc.starling-framework.org/core/
이 주소로 접속해 보면 starling 레퍼런스를 알아볼 수 있는데요. 일단 우리가 오늘 목표로 하는 TouchEvent를 찾아가 봅시다.
가령 starling을 이용하여 모바일로 올렸을때 그 터치에도 대응할 수 있도록 되어 있는 녀석이에요.
일단 한번 경험해 봅시다.
Trace를 이용해서 터치가 되는 좌표를 뽑아보는 연습부터 해 볼께요.
일단 이녀석은 TouchEventTest라는 클래스로 만들 예정이구요. StarlingStat 프로젝트에서는 TouchEventTest클래스를 불러와야 하는 건 이제 당연히 아실테니 이부분은 넘어가겠습니다.
TouchEventTest . as
package
{
import flash.geom.Point;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
public class TouchEventTest extends Sprite
{
public function TouchEventTest()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage():void
{
this.removeEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
stage.addEventListener(TouchEvent.TOUCH, onTouch);
}
private function onTouch(e:TouchEvent):void
{
var touch:Touch = e.getTouch(stage);
var p:Point = touch.getLocation(stage);
trace(p.x, p.y);
}
}
}
일단 소스입니다. 이걸 컴파일 시켜서 마우스를 움직이다 보면 에러가 하나 뜰 수 있습니다.
다음은 에러의 내용입니다.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at TouchEventTest/onTouch()[C:\Users\Gray_Desk2\Adobe Flash Builder 4.7\StarlingStar\src\TouchEventTest.as:31]
at starling.events::EventDispatcher/invokeEvent()[D:\Adobe\lib\starling\starling\src\starling\events\EventDispatcher.as:138]
at starling.events::TouchEvent/dispatch()[D:\Adobe\lib\starling\starling\src\starling\events\TouchEvent.as:156]
at TouchProcessor/advanceTime()[D:\Adobe\lib\starling\starling\src\starling\core\TouchProcessor.as:122]
at starling.core::Starling/advanceTime()[D:\Adobe\lib\starling\starling\src\starling\core\Starling.as:364]
at starling.core::Starling/nextFrame()[D:\Adobe\lib\starling\starling\src\starling\core\Starling.as:354]
at starling.core::Starling/onEnterFrame()[D:\Adobe\lib\starling\starling\src\starling\core\Starling.as:530]
여기에서 주목해 보셔야 할 접은 맨 첫줄입니다. 에러코드 1009 고… null Object에는 접근할 수 없다는 내용입니다.
생각을 한번 해보죠. 일단 마우스가 스테이지 위에서는 제대로 동작을 하지만 스테이지를 벗어나게 되면 에러를 발생합니다.
유추해서 생각해 본다면. 마우스가 스테이지를 벗어나는 경우 터치 이벤트에서는 null 값을 반환하게 되는데 우리는 null 값에 접근하게 되기 때무에 에러를 발생합니다. 따라서 터치이벤트에서 null 값일 경우에는 아무것도 하지 않게 만들면 에러를 잡을 수 있겠죠.
그럼 오류를 잡아 보죠 뭐.
private function onTouch(e:TouchEvent):void
{
var touch:Touch = e.getTouch(stage);
if(touch!=null){
var p:Point = touch.getLocation(stage);
trace(p.x, p.y);
}
else
{
trace(touch);
}
}
자 이렇게 만들면 되겠죠. 일단 null 값이 아니면 실행이 되도록 하고, null 값이면 trace를 이용하여 touch를 살펴보도록 하죠
마우스를 이리저리 움직이면 touch의 좌표값이 나타나다가 stage를 벗어나게 되면 null 값을 표현하게 됩니다.
사실 이거 가지고 많이 고민했습니다. 도대체 왜 …???
에러코드도 명확하지가 않아서요. 하여간 이렇게 처리하면 되겠죠?
그러면 일단 객체를 한번 넣어 보겠습니다. 그림 불러서 넣는건 귀찮으니 우리의 친구 Quad를 다시한번 불러보죠. 그리고 살펴보도록 합시다요.
package
{
import flash.geom.Point;
import starling.display.Quad;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
public class TouchEventTest extends Sprite
{
public function TouchEventTest()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage():void
{
this.removeEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
var q:Quad = new Quad(200,200,0xffff00);
this.addChild(q);
stage.addEventListener(TouchEvent.TOUCH, onTouch);
}
private function onTouch(e:TouchEvent):void
{
var touch:Touch = e.getTouch(stage);
if(touch!=null){
var p:Point = touch.getLocation(stage);
trace(touch.target);
}
else
{
trace(touch);
}
}
}
}
이게 전체 코드이구요 실행한번 시켜볼께요. Trace 값을 잘 살펴보시면 어떤때는 quad 이고, 어떤때에는 stage 입니다.
마우스가 stage 위일 경우에는 터치의 타겟은 stage, quad일 경우에는 quad 가 됩니다.
그렇다면. 일단 quad를 마우스 위치로 가져갈 수 있게 하는건 어떻게 할까요?
생각하보면 일단 터치의 stage 좌표를 받아서 quad의 좌표 값으로 넘겨주게 되면 간단히 해결 되겠죠?
일단 해보죠. 터치가 실행될 때마다 그렇게 해 주는 녀석으로 말이죠.
그렇게 하려면 일단 q를 전체적으로 사용할 수 있도록 약간 바꿔줘야 합니다. Touch 에서 q에 접근하려고 해도 onAddedToStage에서 생성해버렸기 때문에 접근하기가 힘들죠.
그럼 이렇게 하면 되겠죠?
package
{
import flash.geom.Point;
import starling.display.Quad;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
public class TouchEventTest extends Sprite
{
//quad를 다른 메소드에서 사용할 수 있도록 선언
private var q:Quad;
public function TouchEventTest()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage():void
{
this.removeEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
q = new Quad(200,200,0xffff00);
this.addChild(q);
stage.addEventListener(TouchEvent.TOUCH, onTouch);
}
private function onTouch(e:TouchEvent):void
{
var touch:Touch = e.getTouch(stage);
if(touch!=null){
var p:Point = touch.getLocation(stage);
q.x=p.x;
q.y=p.y;
}
else
{
trace(touch);
}
}
}
}
실행해 보면 마우스 끝에 Quad 의 0,0 왼쪽 상단이 잡히게 됩니다. 그런데 우리가 보통 드래그를 할 때 그 위치가 가운데가 가고 싶어하게 되죠?
기본적으로 어떤 객체가 생성될때 그 중심은 그 객체의 0,0 좌표가 설정되게 됩니다. 따라서 이 중심을 바꿔줄 때 사용하는 것이 pivot 이 되겠습니다.
우리는 객체의 중심에 가게 하고 싶어하는 것이니… 그 중간을 할 수 있도록 pivot의 값을 q의 중간에 가게 해보죠.
이렇게 하면 될 듯 싶습니다.
q.pivotX= q.width/2;
q.pivotY=q.height/2;
이녀석들이 되겠죠? 추가하고 마우스를 이리저리 움직여 보면… 잘 따라오는 것이 보입니다.
흐음… 그리고 터치 이벤트에 다른 녀석들을 한번 살펴보도록 할께요.
trace(e.interactsWith(q));
이렇게 해서 한번 실행해 보면 boolean 값을 반환하게 됩니다.
public function interactsWith(target:DisplayObject):Boolean
이 녀석인데요. 디스플레이오브젝트와 터치이벤트가 어떻게 되었느냐를 말하는 거죠. 마우스 위에 올라갔을때.. 를 뜻합니다.
그렇다면 이녀석이 마우스에 올라갔을때 q의 색깔을 변화시키게 될 때 if문을 이용하여 해결 할 수 있겠죠?
그리고 하나 더 알아 두어야 할 것이 타임 스템프 입니다.
일단 타임스템프를 찾아보면
timestamp | property |
|
timestamp:Number [read-only]
The time the event occurred (in seconds since application launch).
Implementation
public function get timestamp():Number
이렇게 설명하고 있습니다.
그냥 접근할 수 있는 값인데요. 한번 해보죠.
private function onTouch(e:TouchEvent):void
{
if(touch!=null){
trace(e.timestamp);
}
else
{
trace(touch);
}
}
터치 이벤트 부분을 이렇게 해주고 값을 찍어보면 마우스가 움직일 때마다, 그 때의 타임을 찍어줍니다.
이녀석을 어따 써먹어야 할 것이가… 이겠죠? 그럼 아까 인터렉트 위드와 타임스템프의 값을 가지고 더블클릭을 잡아낼 수 있겠죠.
그런데 생각해보면 일단 그냥 마우스를 끌어가서 올리는 것도 인터렉트와 반응을 하게 될 것입니다. 그렇다면.
터치 이벤트의 상태를 알아볼 수 있는 녀석이 필요합니다. 그것이 바로 TouchPhase 입니다.
다음번에는 TouchPhase 에 대해서 알아볼께요.
'Flash with Adobe AIR' 카테고리의 다른 글
| (0) | 2015.02.16 |
|---|---|
| Starling-Hungry Hero-05 (0) | 2015.02.16 |
| Starling-Hungry Hero-04 (0) | 2015.02.16 |
| Starling-Hungry Hero-03 (0) | 2015.02.16 |
| Starling-HungryHero-02 (0) | 2015.02.16 |