Particle System

hika님의 블로그에 파티클에 관련된 글이 하나 올라 왔습니다. 학습과제와 함께… 원래는 눈팅만 하고 도망가려 하였으나 hika님의 도발에 넘어가서 잠깐 시간을 내어 제 나름대로 재구성 해봤습니다. 짧은 시간에 기능만 구현하려다 보니 손발이 오그라드는 코드가 나와버렸습니다. 특히 중력 계산하는 부분은 그냥 산수 입니다;;;;

원 소스에 있는 선택 값과 구간 값 표현하는 표현식 정말 아이디어 인거 같습니다. 저런 표현식을 그냥 블로깅 하면서 만들어 내시다니 차마 따라 갈 수 없는 내공입니다. orz

그럼 먼저 소스 부터 보겠습니다.

package{

    import com.bit101.components.Label;
    import com.bit101.components.Slider;
    import com.greensock.TweenMax;
    import flash.events.Event;

    import flash.display.BlendMode;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.geom.Point;

    [SWF(backgroundColor="#EEEEEE", frameRate="110", width="500", height="400")]

    public class Main extends Sprite {

        public static var GRAVITY:Number = 100;
        public static var WIND:Number = 0;
        public static var POWER:Number = 0;

        public var duration:Number;
        public var rate:Number;
        public var particle:Class;
        public var lifeTime:Number;
        public var repeat:int;
        public var emitter:Point = new Point;
        public var power:Point = new Point;

        public function Main(){
            initComps();

            duration = 1;
            rate = 30;
            particle = Drop;
            lifeTime = 5;

            stage.addEventListener( MouseEvent.CLICK , run );
        }

        public static function randFloat( $start:Number, $end:Number ):Number{
            return Math.random()*$end + $start;
        }

        private function run( $e:* ):void{
            if ( repeat === 0 && stage.mouseY > 60 ) {
                repeat = rate*duration;
                emitter.x = stage.mouseX;
                emitter.y = stage.mouseY;
                make();
            }
        }

        private function make():void {
            var life:Number = randFloat(lifeTime-1.5, lifeTime);
            var power:Point = new Point(randFloat(-(POWER/2), POWER), randFloat(POWER, POWER));
            var instance:* = new particle(life, power);
            instance.x = emitter.x;
            instance.y = emitter.y;
            addChild(instance);

            if( --repeat ){
                TweenMax.to( {x:0}, duration/rate, {x:1, onComplete:make} );
            }

        }

        private function initComps():void
        {
            _gravitySlider = new Slider(Slider.HORIZONTAL, this, 30, 30, handleGravity);
            _gravitySlider.minimum = 0;
            _gravitySlider.maximum = 200;
            _gravitySlider.value = 100;
            _gravitySlider.mouseEnabled = false;

            _gravityLabel = new Label(this, 28, 13, "Gravity : "+_gravitySlider.value);
            new Label(this, 27, 36, "0");
            new Label(this, 118, 36, "200");

            _windSlider = new Slider(Slider.HORIZONTAL, this, 150, 30, handleWind);
            _windSlider.minimum = -100;
            _windSlider.maximum = 100;
            _windSlider.value = 0;

            _windLabel = new Label(this, 148, 13, "Wind : "+_windSlider.value);
            new Label(this, 140, 36, "-100");
            new Label(this, 243, 36, "100");

            _powerSlider = new Slider(Slider.HORIZONTAL, this, 270, 30, handlePower);
            _powerSlider.minimum = 0;
            _powerSlider.maximum = 200;
            _powerSlider.value = 100;

            _powerLabel = new Label(this, 268, 13, "Power : "+_powerSlider.value);
            new Label(this, 266, 36, "0");
            new Label(this, 360, 36, "200");

            GRAVITY = _gravitySlider.value;
            WIND = _windSlider.value;
            POWER = _powerSlider.value;
        }

        private function handlePower(e:Event):void
        {
            _powerLabel.text = "Power : " + _powerSlider.value;
            POWER = _powerSlider.value;
        }

        private function handleGravity(e:Event):void
        {
            _gravityLabel.text = "Gravity : " + _gravitySlider.value;
            GRAVITY = _gravitySlider.value;
        }

        private function handleWind(e:Event):void
        {
            _windLabel.text = "Wind : " + _windSlider.value;
            WIND = _windSlider.value;
        }

        private var _gravitySlider:Slider;
        private var _gravityLabel:Label;
        private var _windSlider:Slider;
        private var _windLabel:Label;
        private var _powerSlider:Slider;
        private var _powerLabel:Label;
    }
}

import flash.display.DisplayObject;
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;

class Drop extends Shape {

    public function Drop($life:Number, $power:Point)
    {
        super();

        if(!_this) _this

        _life = $life;
        _power = $power;
        _elapsed = 0;

        graphics.beginFill( 0x4f9cf2, Main.randFloat(.5, 1) );
        graphics.drawCircle( 0, 0, 3 );

        addEventListener(Event.ADDED_TO_STAGE, handleAddStage);
    }

    private function handleAddStage(e:Event):void
    {
        removeEventListener(Event.ADDED_TO_STAGE, handleAddStage);

        _rate = 1 / stage.frameRate;
        addEventListener(Event.ENTER_FRAME, hanleThis);
    }

    private function hanleThis(e:Event):void
    {
        x += (-_power.x + (Main.WIND * _elapsed)) * _rate;
        y += (-_power.y + (Main.GRAVITY * _elapsed)) * _rate;

        _elapsed += _rate;

        if (_elapsed/_life>0.9) {
            alpha = 1 + (.9 - _elapsed / _life)*10;
        }

        // Destroy
        if (_elapsed > _life) {
            var _this:DisplayObject = e.currentTarget as DisplayObject;
            if (parent.contains(_this))
                _this.removeEventListener(Event.ENTER_FRAME, hanleThis);
                parent.removeChild(_this);
                _this = null;
        }
    }

    private var _this:Drop;
    private var _life:Number;
    private var _elapsed:Number;
    private var _power:Point;
    private var _rate:Number;
}

원 소스에서는 TweenMax 를 이용해서 구현했는데 저는 조금 다르게 걍 enterFrame 으로 구현했습니다. 저렇게 생성되는 instance 에서 enterFramer 을 도는 건 아무래도 성능상의 문제가 좀 있을 것 같기는 합니다. 그래도 객체 스스로 살고 죽고 하니까 만들어만 주면 따로 신경 쓰지 않아도 되서 즐겨 쓰고 있는 방법 입니다. 중력과 바람은 월드에 단 하나만 있으면 되니까 걍 static 으로 고정 했습니다. 결과는 다음 과 같습니다.

중력계산 하는 걸 제대로 수정하고 싶지만 모르니까 패스~ 일단 TweenMax 를 사용 하지 않고 간단한 중력계를 넣었다는 거에 만족 합니다. ㅎㅎㅎ 다만 누군가 파티클을 만들 고 싶으시다면 말성임 없이 StardustParticle 을 사용하라고 추천해 드리고 싶습니다.