Starling + Particle Designer

파티클은 게임이나 모션에서 다양한 효과를 연출하는 데 사용 됩니다. 예를 들어 눈,비가 내리는 효과라든지 폭팔씬 또는 불과 같은 효과를 연출 할 수 있습니다. Starling 은 기본적으로 이러한 파티클을 지원합니다. 이번 시간에는 Starling 에서 Particle Designer를 이용해 파티클효과를 만들어 보도록 하겠습니다.

Particle Designer

Particle Designer 는 복잡한 파티클 효과를 GUI를 통해 간단히 제작 할 수 있도록 해주는 프로그램입니다. 이미 다양한 프리셋을 제공하므로 자신이 필요로 하는 효과와 유사한 효과를 기본으로 수정/저장 할 수 있습니다. 또 Starling 외에 cocos2d 등 다양한 플렛폼을 지원합니다. 다만 유료라는 점과 맥용 뿐이라는게 사용에 조금 걸림돌이긴 합니다. 제작사 사이트에서 파일저장이 되지 않는 무료버전을 다운받아 체험 해 볼 수 있습니다.

Particle Designer

엄청난 수의 프리셋이 준비되어 있습니다.

썸네일을 클릭하면 상세설정을 할 수 있습니다.

선택한 파티클을 저장합니다. Starling에서 사용하기 위해서는 pex 포멧으로 저장 해야 합니다. 이때 옵션에 Embed texture가 있는데 Starling 에서는 텍스쳐를 따로 지정해 줘야 하므로 선택을 해제 하고 저장 합니다.

Particle Editor

Particle Designer 가 유료라는 점과 특히 맥 전용이라는 점은 윈도우 유저에게 큰 문제가 아닐 수 없습니다. 무료버전으로는 파일 저장도 못하므로 테스트도 해 볼 수가 없습니다. Particle Editor는 이러한 고민을 단번에 해결 해 줍니다. Particle Designer  와 거의 유사한 옵션을 온라인에서 수정/저장 할 수 있습니다.

Particle Designer 와 같은 프리셋은 없으므로 제작은 조금 불편하지만 Particle Designer 의 상세설정을 보고 약간의 노고다를 하면 윈도우에서도 파티클을 만들 수 있습니다.

이제 옵션을 수정해서 필요로 하는 파티클 효과를 만들고 파일을 저장합니다. Particle Editor 에서 파일을 저장하면 particle.pex 와 texture.png 파일이 저장되는 것을 볼 수 있습니다. particle.pex는 각 설정을 담은 XML 파일이고 texture.png 는 파티클에 사용 할 텍스쳐 이미지 입니다.

Particle Editor

Starling Extension: Particle System

Starling에서 파티클을 사용하기 위해서는 Particle System 을 따로 다운 받아야 합니다. Particle System 은 아래 링크에서 다운 받을 수 있습니다.

Starling Extension: Particle System

소스를 다운받고 기존의 starling 패키지에 복사해 줍니다. 그럼 이제 Starling 에서 파티클을 사용 할 준비가 완료되었습니다. 간단하게 예제소스를 살펴 보도록 하겠습니다.

//===========================================================
//
// Starling implements
//
//===========================================================

import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.extensions.ParticleDesignerPS;
import starling.textures.Texture;

internal class Game extends Sprite
{
	[Embed(source="../embeds/particle.pex", mimeType="application/octet-stream")]
	private const ParticleRef:Class;

	[Embed(source="../embeds/texture.png")]
	private const TextureRef:Class;

	[Embed(source="../embeds/space.png")]
	private const SpaceRef:Class;

	[Embed(source="../embeds/ship.png")]
	private const ShipRef:Class;

	private var _space:Image;
	private var _ship:Image;
	private var _shipPosX:Number;
	private var _particle:ParticleDesignerPS;

	public function Game()
	{
		addEventListener(Event.ADDED_TO_STAGE, onAddedStage);
	}

	private function onAddedStage(event:Event):void
	{
		removeEventListener(Event.ADDED_TO_STAGE, onAddedStage);

		initGame();
		initParticle();
		initListener();
	}

	private function initGame():void
	{
		_space = new Image(Texture.fromBitmap(new SpaceRef));
		addChild(_space);

		_ship = new Image(Texture.fromBitmap(new ShipRef));
		_ship.x = _shipPosX = stage.stageWidth - _ship.width >> 1;
		_ship.y = 60;
		addChild(_ship);
	}

	private function initParticle():void
	{
		var config:XML = XML(new ParticleRef);
		var texture:Texture = Texture.fromBitmap(new TextureRef);
		_particle = new ParticleDesignerPS(config, texture);
		_particle.emitterX = _ship.x + _ship.width / 2;
		_particle.emitterY = _ship.y + _ship.height;
		addChildAt(_particle, 1);

		Starling.juggler.add(_particle);
		_particle.start();
	}

	private function initListener():void
	{
		addEventListener(TouchEvent.TOUCH, onTouch);
		addEventListener(Event.ENTER_FRAME, onEnterFrame);
	}

	private function onEnterFrame(event:Event):void
	{
		var targetX:Number = _shipPosX - (_ship.width/2);
		_ship.x += (targetX - _ship.x) * .1;
		_particle.emitterX = _ship.x + _ship.width / 2;
		_particle.emitterY = _ship.y + _ship.height;

		if(_space.y < 0){
			_space.y += .5;
		} else {
			_space.y = -600;
		}
	}

	private function onTouch(event:TouchEvent):void
	{
		var touch:Touch = event.getTouch(stage);
		if(touch) _shipPosX = touch.globalX;
	}
}

소스는 크게 어려운 부분은 없습니다. 처음에 필요한 자원을 임베드하고 이를 이용해서 초기화를 합니다. 파티클을 초기화 하는 부분만 보도록 하겠습니다.

	private function initParticle():void
	{
		var config:XML = XML(new ParticleRef);
		var texture:Texture = Texture.fromBitmap(new TextureRef);
		_particle = new ParticleDesignerPS(config, texture);
		_particle.emitterX = _ship.x + _ship.width / 2;
		_particle.emitterY = _ship.y + _ship.height;
		addChildAt(_particle, 1);

		Starling.juggler.add(_particle);
		_particle.start();
	}

Particle Designer 에서 저정한 particle.pex 와 texture.png를 이용해 파티클 시스템을 만듭니다. emitter는 파티클을 방출하는 방출기 입니다. emitterX, emitterY를 이용해 방출기의 위치를 조절 할 수 있습니다. 파티클 시스템을 다 만들었으면 마지막으로 Starling의 juggler 에 파티클 시스템을 등록 시켜 줍니다. juggler 는 Starling의 애니메이션 시스템으로 IAnimatable 인터페이스를 가진 클래스의 애니메이션을 실행시켜주는 역활을 합니다.

이제 파티클 시스템의 start함수를 실행하면 멋지게 불을 뿜는 파티클을 볼 수 있습니다.

Conclusion

Particle Designer 와 Starling을 이용하여 파티클을 만들어 보았습니다. 파티클을 이용하면 일반적으로 만들기 어려운 여러 효과들을 만들 수 있습니다. 또 게임에 적절히 이용하면 시각적으로 상당한 이펙트를 줄 수 있습니다. pex 파일을 열어보시면 알겠지만 Particle Designer 가 만들어주는 이 파일은 어떻게 파티클을 만들지에 대한 설정파일에 불과 합니다. 다만 이 설정이 생각보다 어렵지요.^^ 더 멋진 효과를 만들기 위해서는 차근차근 각 설정 옵션들을 테스트 해 볼 필요가 있습니다.

파티클을 Starling에 적용시키는 것 자체는 크게 어렵지 않으니 지금 한번 멋진 효과를 만들어 보시기 바랍니다.

[button url=”https://sewonist.com/wp-content/uploads/2013/01/StarlingParticle.zip”]Download Sources[/button]