지돌스타 - 쿠키랩 블로그

Starling Framework는 플래시 게임 엔진으로 Flash Player 11의 Stage3D기반에서 2D GPU 렌더링을 지원한다. API의 인터페이스가 플래시 패키지와 유사하다. 가령 MovieClip의 경우, flash.display.MoviClip대신 staring.display.MoviClip이 된다. 그래서 Stage3D에 대해서 잘 모르더라도 개발에 대한 처음 진입장벽이 낮은 편이다. 2D 게임을 만들기에 편리하도록 다양한 기능도 포함하고 있다. 

이 프레임워크는 iOS용인 Sparrow Framework를 만든 개발자가 직접 포팅한 것이다. 

이 프레임워크 환경에서 2D 게임을 개발하기 위해 다음 조건이 필요하다.
1. Flash Player 11이 브라우져에 설치되어야 한다.
2. Flash Buidler에 Flash Player 11용 Flash를 개발하기 위한 환경을 조성한다. 
3. starling-framework를 다운로드 받아야 한다.

정식으로 Flash Player가 배포된 것은 아니므로 아직까지는 개발자용으로만 테스트 해볼 수 있겠다.

Introducing the Starling Framework 글에 있는 동영상을 보고 간단하게 테스트 해봤다.

이 동영상에서 SpriteSheet를 쉽게 만들어주는 TexturePacker 앱이 눈에 띄었다. 사용법도 간단하니 한번 써보길 바란다. 동영상을 따라하려면 이 앱을 설치해야 한다. 이것을 사용하면 여러개의 이미지 소스로 부터 아래와 같은 1개의 SpriteSheet용 이미지를 아주 편하게 생성할 수 있다. 필요없는 영역도 자동으로 다 제거해주니 정말 편하다. 

 위 SpriteSheet를 플래시 내에서 다시 쪼개기 위한 xml도 다음처럼 만들어준다. 
   

<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath="run.png">
    <!-- Created with TexturePacker -->
    <!-- http://texturepacker.com -->
    <!-- $TexturePacker:SmartUpdate:54fd03ba2d659990a342598e55bc0af8$ -->
    <SubTexture name="run0001" x="0" y="0" width="94" height="156" frameX="-230" frameY="-128" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0002" x="94" y="0" width="94" height="150" frameX="-230" frameY="-134" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0003" x="188" y="0" width="98" height="148" frameX="-229" frameY="-136" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0004" x="286" y="0" width="100" height="154" frameX="-230" frameY="-130" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0005" x="386" y="0" width="98" height="160" frameX="-230" frameY="-124" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0006" x="0" y="160" width="96" height="160" frameX="-230" frameY="-124" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0007" x="96" y="160" width="96" height="158" frameX="-229" frameY="-126" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0008" x="192" y="160" width="96" height="152" frameX="-229" frameY="-132" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0009" x="288" y="160" width="98" height="150" frameX="-229" frameY="-134" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0010" x="386" y="160" width="100" height="156" frameX="-230" frameY="-128" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0011" x="0" y="320" width="98" height="160" frameX="-230" frameY="-124" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0012" x="98" y="320" width="96" height="160" frameX="-229" frameY="-124" frameWidth="550" frameHeight="400"/>
</TextureAtlas>

Starling은 아래 코드처럼 아주 간단하게 만들 수 있다. 

//StarlingTest.as 
package
{
	import flash.display.Sprite;
	
	import starling.core.Starling;
	
	[SWF(frameRate=60, width=800, height=600)]
	public class StarlingTest extends Sprite
	{
		public function StarlingTest()
		{
			//Starling을 생성하고 시작한다. 
			var star:Starling = new Starling(Main, stage);
			star.start();
		}
	}
}

//Main.as
package
{
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;
	
	public class Main extends Sprite
	{
		//SpriteSheet 텍스쳐 이미지에 대한 정보 XML
		[Embed(source="run.xml", mimeType="application/octet-stream")]
		private var AtlasXML:Class;
		
		//SpriteSheet 텍스쳐 이미지 
		[Embed(source="run.png")]
		private var AtlasTexture:Class;
		
		public function Main()
		{
			//이미지로 부터 텍스쳐 생성 
			var texture:Texture = Texture.fromBitmap(new AtlasTexture());
			
			//XML 데이터 
			var xml:XML = XML(new AtlasXML());
			
			//Texture Atlas 생성 
			var atlas:TextureAtlas = new TextureAtlas(texture, xml);
			
			//Texture Altlas로 부터 텍스쳐를 읽어 무비클립 생성 후 자식으로 추가. 주기는 30bps로 설정  
			var mc:MovieClip = new MovieClip(atlas.getTextures("run"), 30);
			addChild(mc);			
			
			//현재 활동하는 Starling 객체로 지정  
			Starling.juggler.add(mc);
		}
	}
}

이 예제는 단순히 SpriteSheet 텍스쳐의 이미지를 가지고 에니메이션 처리하는게 다 이지만, Starling 프레임워크가 어떤 형태로 개발할 수 있는가 직접 볼 수 있는데 의의가 있겠다.

다른 데모는 아래 링크를 통해 보도록 하자. 
http://www.starling-framework.org/demo/index.html

만약 입자 시스템에 대한 확장 기능이 필요하다면 다음 링크를 참고하자.

입자시스템 소스 : https://github.com/PrimaryFeather/Starling-Extension-Particle-System
입자시스템 데모 : http://www.bytearray.org/?p=3431 


Flash Player 11이 AIR 3.0과 더불어 곧 나올 기세이다. 이런 프레임워크는 이들 플랫폼에 쉽게 대응하는데 큰 도움이 될 것이다. 꼭 한번 테스트라도 해보는게 좋을 것 같다. 

글쓴이 : 지돌스타(http://blog.jidolstar.com/786) 

Adobe Flash 3D AIR 3.0, Flash Player 11, GPU, Molehill 3d, Sparrow Framework, Stage3D, Starling Framework, 어도비, 플래시