마구 진행해 나가고 있는데요. 사실… hsharma.com 에서 제공하는 프로젝트 파일과는 조금 다르게 가고 있습니다. 혹시 두개 동시에 보시는 분들은 조금 혼동스러울 수 있을 듯 합니다. 또한 제가 보고 이상하게 나누어진 부분은 한번에 설명드리고 있어요. 지난 02번 게시글의 내용은 동영상강의의 EP3, EP4에 걸쳐진 내용이었습니다.
착오 없으시길 빌겠습니다.
이번에는 네비게이션 부분입니다. 우리의 Welcome.as 를 잠시 보시면 버튼에 아무런 이벤트가 걸려있지 않죠. 이 부분에 이벤트를 걸어주도록 하겠습니다.
그런데 잠시 생각을…..
버튼에 모든 이벤트를 걸어주는 것 보다 Welcome 자체에 이벤트 트리거를 걸어주는 거죠. 그럼 뭔가 반응을 하겠죠? 이렇게 말이죠.
this.addEventListener(Event.TRIGGERED, onMainMenuClick);
자 그리고 onMainMenuClick을 작성해 보죠.
private function onMainMenuClick(e:Event):void
{
trace(e.target as Button);
}
이렇게 해주고 디버그 해보죠.
그럼 버튼을 누를 때마다 콘솔창에 버튼이 찍히고 있을 것입니다. 우리가 웰컴 스크린에서 버튼 두개에만 반응을 하도록 하는거죠. 이 트리거에는 버튼만이 해당되는 것입니다. 스탈링 참 쉽네요. 그리고 저 안에어 if 명령을 통해서 들어온 버튼이 무엇인지를 판단하고 그에 맞는 동작을 하도록 만들면 될 것 같습니다.
자. 그리고 우리는 우리의 커스텀 이벤트를 만들도록 하겠습니다. 이렇게요.
package events
{
import starling.events.Event;
public class NavigationEvent extends Event
{
public static const CHANGE_SCREEN:String = "changeScreen";
public var params:Object;
public function NavigationEvent(type:String, _params:Object=null, bubbles:Boolean=false, data:Object=null)
{
super(type, bubbles, data);
this.params=_params;
}
}
}
그리고 이렇게 만들어 주도록 하겠습니다. 일단은 따라오도록 하시죠~ Welcome .as 로 이동후에 이렇게 고쳐주도록 합니다.
private function onMainMenuClick(e:Event):void
{
var buttonClicked:Button = e.target as Button;
if((e.target as Button)==playBtn)
{
this.dispatchEvent(new NavigationEvent(NavigationEvent.CHANGE_SCREEN,{id:"play"},true));
}
}
자 여기서 보시면 아시겠지만. 플래이 버튼이 클릭이 되면 우리는 네비게이션 이벤트를 통해서 pramas 로 id play 값을 버블링 합니다. 그렇게 되면 우리의 윗단이 Game.as에서 이 사실을 감지할 수 있겠죠? 그럼 Game.as로 돌아가겠습니다. 그리고 이렇게 변경할께요.
package
{
import events.NavigationEvent;
import screens.InGame;
import screens.Welcome;
import starling.display.Sprite;
import starling.events.Event;
public class Game extends Sprite
{
private var screenWelcome:Welcome;
private var screenInGame:InGame;
public function Game()
{
super();
this.addEventListener(Event.ADDED_TO_STAGE,onAdded);
}
private function onAdded():void
{
this.removeEventListener(Event.ADDED_TO_STAGE,onAdded);
this.addEventListener(events.NavigationEvent.CHANGE_SCREEN, onChangScreen);
screenInGame = new InGame();
screenInGame.disposeTemporarily();
this.addChild(screenInGame);
screenWelcome= new Welcome();
this.addChild(screenWelcome);
screenWelcome.initialize();
}
private function onChangScreen(e:NavigationEvent):void
{
switch(e.params.id)
{
case "play":
break;
}
}
}
}
자 보시면 일단 Game 안에서 InGame을 불러올 것입니다. 그리고 여기에 이벤트를 하나 추가합니다. 우리의 커스텀 이벤트를 추가하구요. 그담에 InGame을 추가시키도록 하죠. 그런데 InGame 클래스의 경우에는 진짜 게임에 들어갔을 때 보여주도록 하는 클래스이기 때문에 보이면 안되겠죠? 그래서 disposeTemporaily 라는 메소드를 통해서 아직은 화면에 보여주지 않게 하겠다는 내용입니다. 이런 메소드가 있냐구요? 없으니 만들어야죠.
그리고 아까 걸어주었던 이벤트에는 play 에 반응 할 수 있도록 일단 형태만 잡아준 상태입니다. 그럼 InGame 클래스로 돌아가도록 하죠.
public function disposeTemporarily():void
{
this.visible=false;
}
이렇게 해주면 화면에 뜨지는 않겠죠/ 그럼 이제 Game 클래스로 돌아가겠습니다.
private function onChangScreen(e:NavigationEvent):void
{
switch(e.params.id)
{
case "play":
screenWelcome.disposeTemporarily();
screenInGame.initialize();
break;
}
}
아까 형태를 잡아주었던 부분에서 이제는 뭔가 동작을 취하도록 할텐데요. 생각해 보시면 welcome 스크린은 플래이가 되면 사라져야 하고 InGame이 들어와야 합니다. 따라서 이렇게 만들어주고요. 메소드가 없으니 가서 만들어 주도록 합시다. 일단 Welcome.as입니다.
public function disposeTemporarily():void
{
this.visible=false;
if(this.hasEventListener(Event.ENTER_FRAME)) this.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
}
일단 보이는 것 없애구요. 그담에 만약에 첨 시작할때는 엔터프레임 이벤트가 걸리겠지만 게임을 시작하면 이녀석이 리소스를 잡아먹고 있으면 안되잖아요? 보이지 않는다고 enterFrame이벤트가 돌지 않는 것은 아니니까요. 그러니까 만약에 이녀석이 이 이벤트를 가지고 있으면 없애버리라는 뜻이겠죠.
자 이젠 InGame으로 넘어가도록 하죠.
public function initialize():void
{
this.visible=true;
}
이것만 추가해 주면 되겠죠? 테스트 해 보시면 play 버튼을 누르게 되면 화면이 바뀌게 될 것입니다.
네 오늘은 여기까지 하시도록 하죠.
'Flash with Adobe AIR' 카테고리의 다른 글
| Starling-Hungry Hero-05 (0) | 2015.02.16 |
|---|---|
| Starling-Hungry Hero-04 (0) | 2015.02.16 |
| Starling-HungryHero-02 (0) | 2015.02.16 |
| ANE for Android -2 (0) | 2015.02.11 |
| ANE for Android – 1 (0) | 2015.02.11 |