Starling-HungryHero-02

배고픈 영웅 2번째 시간입니다.

오늘은 Sprite Sheet를 할것이구요.

http://www.youtube.com/watch?v=Qhq4COk_QyU 유툽 링크입니다.

 

http://hsharma.com 으로 접속하시면 프로젝트 파일을 받으실 수 있습니다.

SpirteSheet 만드는 과정과 설명이 유투브 링크에 있으니 보시면 될 것 같구요. 우리는 소스파일을 어떻게 구성해야 할지를 생각해 보겠습니다.

 

 

시작하죠.

먼저 시작할 부분은 Assets.as 입니다.

우리의 목적은 Assets.as 를 통해서 모든 그래픽에 접근하고 싶습니다. 마찬가지로 우리가 만들어 놓은 SpriteSheet도 해당하는것이죠. 또한 SpriteSheet는 TextureAtlas에 의해서 컨트롤 됩니다. 그러니 TextureAtlas의 객체를 하나 만들어 주어야 겠죠?그럼 이렇게 될 것입니다.

        private static var gameTextures:Dictionary = new Dictionary();

        private static var gameTextureAtlas:TextureAtlas;

 

어제 소스 밑에 한줄 추가된 것이 보이시죠? 그리고 SpriteSheet와 Xml 파일을 불러오도록 합니다. 이렇게요.

 

        

        [Embed(source="../assets/graphics/mySpritesheet.png")]

        public static const AtlasTextureGame:Class;

        

        [Embed(source="../assets/graphics/mySpritesheet.xml", mimeType="application/octet-stream")]

        public static const AtlasXmlGame:Class;

 

이제 기초공사는 끝난 것 같습니다. 이제 TextureAtlas를 반환할 메소드를 하나 만들어 주어야 하는데요. 이렇게 만들 것입니다.

        public static function getAtlas():TextureAtlas

        {

            if(gameTextureAtlas==null)

            {

                var texture:Texture = getTexture("AtlasTextureGame");

                var xml:XML = XML( new AtlasXmlGame());

                gameTextureAtlas = new TextureAtlas(texture, xml);

                

            }

            return gameTextureAtlas;

        }

외부에서 접근할 수 있어야 하니 public 으로 만들어 주구요. 그담에 반환할 것은 TextureAtlas 이구요. 이녀석은 그냥 SpriteSheet를 가져오는 녀석입니다. 그냥 생성해서 불러오면 안되냐고 물으실 수있지만. 여기에서는 기본적으로 어떻게 돌아가는지를 보여드리기 위해서 이렇게 작성되었다고 생각하시면 편하실 거에요. 자 보시죠. 일단 우리가 만든 gameTextureAtlas가 null 값을 가지고 있으면 텍스쳐 한마리를 불러와야 겠죠? 그런데 그냥 불러오기 보다는 밑에있는 getTexture에서 불러오는 편이 좋겠죠? 재사용도 하고 손꾸락도 안아프고… 그담에는 SpriteSheet 불러오는거 예전에 하셨죠? 이렇게해서 gameTextureAtlas를 가져오게 되었습니다.

 

이제는 게임에 들어갈 화면을 만들어 보겠습니다.

InGame.as구요 Sprite에서 받아옵니다. 패키지는 screens 입니다. InGame 클래스 역시 화면에 뿌려줄 녀석이기 때문에 이렇게 스크린 패키지 안으로 들어갑니다.

이것도 하나 만들어 주자구요. 그리고 Hero.as를 해보러 가겠습니다.

일단 Hero를 담을 무비클립을 하나 만들어 줄 것입니다.

private var heroArt:MovieClip;

        

이렇게요. 자 그럼 기본적인 이벤트 부터 생성하고..

 

        public function Hero()

        {

            super();

            this.addEventListener(Event.ADDED_TO_STAGE, onAdded);

        }

        

        private function onAdded():void

        {

            this.removeEventListener(Event.ADDED_TO_STAGE,onAdded);

            createHeroArt();

        }

 

그다음 createHeroArt()라는 메소드에서 처리해 줄 것입니다.

        private function createHeroArt():void

        {

            heroArt = new MovieClip(Assets.getAtlas().getTextures("fly_"),20);

            heroArt.x=Math.ceil(-heroArt.width>>1);

            heroArt.y=Math.ceil(-heroArt.height>>1);

            starling.core.Starling.juggler.add(heroArt);

            

            this.addChild(heroArt);

            

            

        }

 

이렇게 처리했습니다. 잠시 내용을 살펴보면. 이전에 배웠던 내용이죠? 무비클립인 heroArt를 객체생성을 하는데요. MovieClip 이기 때문에 텍스쳐벡터와, 프레임을 매개변수로 해주죠. 그런데 잘 보시면 Assets.getAtals()를 먼저 불러옵니다. 이렇게 되면 TextureAtlas가 반환이 되겠죠? 여기서 다시 getTextures 를 이용합니다. 여러장의 텍스처를 한꺼번에 묶게 되죠. 여기서 한 가지 알아두어야 할 것은 이녀석이 바로 벡터로 반환된다는 것입니다. 즉, 이전에 우리는 벡터를 생성하고 거기에 할당해서 불러왔는데요. 그 과정을 줄이는 이 녀석이죠. 우리가 특별히 heroArt 프레임에 접근할 이유도 없으니 벡터가 필요가 없죠. 그냥 이렇게 만들겠습니다. 프레임은 20이구요. 그담에…..

포지션 설정인데요. 여기서 보실 것은 >>1 이라는 비트 연산자에요. 이거 뜻이 그냥 /2하라는 말과 같습니다. 더 찾아보실 분은 검색엔진등에서 비트연산자 부분을 참조하시면 될 듯합니다. 그냥/2 쓰지 왜 비트연산자를 쓰냐고 물으신다면. 폼나잖아요.;; 라기보다는 조금 더 효율이 좋을 것 같아서요. 비트를 연산하는게 컴퓨터한테는 더 좋겠죠?

그담으로 설명 드릴 것은 juggler 입니다. 지난번 할때 잠깐 보셨죠? 저글러를 이용해서 이 녀석이 돌아가게끔 만들어 주는 것입니다.

 

자 그러면 heroArt 클래스는 이것으로 마치고.이제 InGame 클래스로 돌아오겠습니다. 이 클래스는 이렇게 꾸밀것입니다. 일단 게임이 시작되면 히어로가 나타나야 겠죠?

package screens

{

    import objects.Hero;

    

    import starling.display.Sprite;

    import starling.events.Event;

    

    public class InGame extends Sprite

    {

        private var hero:Hero;

        public function InGame()

        {

            super();

            this.addEventListener(Event.ADDED_TO_STAGE, onAdded);

        }

        

        private function onAdded():void

        {

            this.removeEventListener(Event.ADDED_TO_STAGE, onAdded);

            drawGame();

        }

        

        private function drawGame():void

        {

            hero = new Hero();

            hero.x=stage.stageWidth>>1;

            hero.y=stage.stageHeight>>1;

            this.addChild(hero);

            

        }

    }

}

 

InGame 클래스의 코드 부분입니다. 처음 부분은 설명 드릴 필요가 없고, drawGame() 메소드를 통해서 우리가 만들어 두었던 Hero클래스의 객체를 생성하고. 그 위치를 스테이지의 가운데로 만들어 줍니다. 이녀석을 보시면 역시 /2 대신에 >>1 의 비트연산자를 사용해서 만들었습니다. 폼나죠? 그리고 이녀석을 화면에 붙이는 코드입니다.

 

이제 테스트를 해볼 시간인데요. 우리 프로젝트의 메인 클래스에서 Game 을 불러오는 것이 아니라. InGame 클래스를 불러 오도록 하죠. InGame 클래스는 screens 안에 있으니 불러올때는.

 

_starling = new Starling(screens.InGame, stage);

 

이렇게 바꾸어 주면 될 것 같습니다. 실행을 시켜보면. 거무스름한 화면에 히어로 한명이 그냥 날아가는 것이 표현이 될 것입니다.

오늘은 여기까지 하죠.

 

오늘의 중점은 SpriteSheet를 활용하는 부분이었습니다.