Fire effect in Flex. Имитация огня, воды и дыма.

Эффекты огня, воды и дыма на Flex. Все эти эффекты легко получить используя фильтр DisplacementMapFilter

Имитация огня, воды и дыма, отражение.

Чтобы сделать имитацию огня достаточно использовать фильтр DisplacementMapFilter и perlinNoise метод. Делается это просто:

Создаем Sprite, в нем рисуем прямоугольник черного цвета, добавляем на сцену в главный спрайт.

            fireSprite = new Sprite();
            fireSprite.graphics.beginFill(0x000000);
            fireSprite.graphics.drawRect(0, 0, 180, 200);
            fireSprite.graphics.endFill();
            mainSprite.addChild(fireSprite);


Затем добавим к спрайту огонь. Создадим новый класс - FireParticle, в нем нарисуем прямоугольник с градиентной заливкой и на его основе создадим новую BitmapData.

            var fillType:String = GradientType.RADIAL;
            var colors:Array = [0xff8d2c, 0xff2f2f];
            var alphas:Array = [1, 0];
            var ratios:Array = [0, 160];
            var matr:Matrix = new Matrix();
            matr.createGradientBox(160, 160, 0, 0, 0);           
            this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, SpreadMethod.REFLECT);
            this.graphics.drawRect(0, 0, 160, 160);
            this.graphics.endFill();
            //create bitmadata with the same size as we drown the rectangle, then draw our sprite (this)
            fireBitmapData = new BitmapData(160, 160, false, 0xFFFFFF);
            fireBitmapData.draw(this);   

Применим DisplacementMapFilter и на событие ENTER_FRAME начнем имитировать огонь, примерно так:

            var part:FireParticle = new FireParticle();
            part.x = 10;
            part.y = 10;
            fireSprite.addChild(part);


Для того, чтобы сымитировать воду загрузим картинку с изображением воды и применим к ней тот же  DisplacementMapFilter:

            waterSprite = new Sprite();
            waterSprite.graphics.beginFill(0x000000);
            waterSprite.graphics.drawRect(0, 0, 180, 200);
            waterSprite.graphics.endFill();
            waterSprite.y = 200;
            this.addChild(waterSprite);           
            var waterLoader:Loader = new Loader();
            var waterUrl:URLRequest = new URLRequest("images/water3.jpg");
            waterLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
            waterLoader.load(waterUrl);

//.....

        private function loadComplete(event:Event):void
        {
            waterSprite.addChild(event.currentTarget.content);
            waterSprite.addEventListener(Event.ENTER_FRAME, waterEffectStart);
            waterBitmapData = new BitmapData(180, 200, false, 0xFFFFFF);
            waterBitmapData.draw(waterSprite);   
            //create a DisplacementMapFilter
            waterDisplaceFilter = new DisplacementMapFilter(waterBitmapData, new Point(0, 0), BitmapDataChannel.BLUE, BitmapDataChannel.BLUE, 10, 5, DisplacementMapFilterMode.CLAMP)
            waterOffset[0] = new Point();       
            waterSprite.filters = [waterDisplaceFilter]   
        }

Получается такой результат:

Исходники - source, приложение - application