Author Topic: Bloom trouble[SOLVED]  (Read 1981 times)

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Bloom trouble[SOLVED]
« on: Sun, Jan 2, 2011 »
Hey there!

I'm trying to get this to work:
https://github.com/AdamAtomic/FlxBloom/blob/master/src/MenuState.as

While it is doing what it's supposed to do, I don't want the entire screen covered in blur. I just want one or two objects to have the blur effect. Is there any way I can do that? I'm trying groups right now, but it only doubles the blur effect.

Many thanks in advance.
« Last Edit: Mon, Jan 10, 2011 by xhunterko »
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

jlong64

  • Member
  • **
  • Posts: 34
  • Karma: +0/-0
    • View Profile
    • Iokat
Re: Bloom trouble
« Reply #1 on: Mon, Jan 3, 2011 »
I haven't messed with this at all, but here's what I think you need to do. First, check out how the blur actually gets created each frame:

Code: [Select]
override public function postProcess():void
{
//The actual blur process is quite simple now.
//First we draw the contents of the screen onto the tiny FX buffer:
_fx.draw(screen);
//Then we draw the scaled-up contents of the FX buffer back onto the screen:
screen.draw(_fx);
}

It's drawing the entire screen onto the blur buffer, then drawing the blurry buffer back onto the screen. So if you want to just blur a few objects, you need to draw just those objects onto the buffer instead of the entire screen.

So first create a group of all the sprites you want to be blurry. Unfortunately you can't give an entire FlxGroup to the draw function, you can only give it FlxSprites. This should work though:

Code: [Select]
// Assuming the group you made is called "blur_group".
for each (var s:FlxSprite in blur_group.members) {
    _fx.draw(s);
}

Just replace the line "_fx.draw(screen);" with that. I haven't tested this at all but I believe it should work.

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: Bloom trouble
« Reply #2 on: Mon, Jan 3, 2011 »
I've decided to just cut it from the game instead.

Trying your method:
Code: [Select]
package 
{

import org.flixel.*;

public class TitleScreen extends FlxState
{
[Embed(source = "noise/LunariumTitle.mp3")] private var soundFX1:Class;

private var title_text:FlxText;
private var title_text2:FlxText;
private var title_text3:FlxText;
private var title_text4:FlxText;
private var title_text5:FlxText;
private var title_text6:FlxText;

private const _bloom:uint = 7; //How much light bloom to have - larger numbers = more
private var _fx:FlxSprite; //Our helper sprite - basically a mini screen buffer (see below)

protected var _bloomies:FlxGroup;

        public var a1:Aquarius;


private var sf:StarField = new StarField();

override public function create():void
{
FlxState.bgColor = 0xFF000000;

//add(sf);

_bloomies = new FlxGroup();
a1 = new Aquarius(0, 0);
a1.health = 2;
add(a1);
_bloomies.add(a1);

title_text = new FlxText(20, 0, 300, 'Lunarium');
title_text.setFormat(null, 50, 0xffffffff, "center");
add(title_text);


title_text2 = new FlxText(20, 50, 290, 'press x to play');
title_text2.setFormat(null, 8, 0xffffffff, "center");
add(title_text2);

title_text3 = new FlxText(20, 60, 290, 'Use arrow keys to move');
title_text3.setFormat(null, 8, 0xffffffff, "center");
add(title_text3);

title_text4 = new FlxText(20, 70, 290, 'click with yellow target on celestial objects to score');
title_text4.setFormat(null, 8, 0xffffffff, "center");
add(title_text4);

title_text5 = new FlxText(20, 80, 290, 'Celestial Objects: constellations, galaxies, planets, comets, nebulae');
title_text5.setFormat(null, 8, 0xffffffff, "center");
add(title_text5);


//This is the sprite we're going to use to help with the light bloom effect
//First, we're going to initialize it to be a fraction of the screens size
_fx = new FlxSprite();
_fx.createGraphic(FlxG.width/_bloom,FlxG.height/_bloom,0,true);
_fx.origin.x = _fx.origin.y = 0; //Zero the origin so scaling goes from top-left not center
_fx.scale.x = _fx.scale.y = _bloom; //Scale it up to be the same size as the screen again
_fx.antialiasing = true; //Set AA to true for maximum blurry
_fx.color = 0xafffff; //Tint it a little, cuz that looks cool
_fx.blend = "screen"; //Finally, set blend mode to "screen" (important!)
//Note that we do not add it to the game state! It's just a helper, not a real sprite.

//Then we scale the screen buffer down, so it draws a smaller version of itself
// into our tiny FX buffer, which is then scaled up. The net result of this operation
// is a blurry image that we can render back over the screen buffer to create the bloom.
screen.scale.x = screen.scale.y = 1/_bloom;

FlxG.play(soundFX1, 0.222,true);

}

override public function update():void
{
if(FlxG.keys.X)
{
this.onFade();
}

if(FlxG.keys.SPACE)
{
this.onFade3();
}

super.update();


}

override public function postProcess():void
{
//The actual blur process is quite simple now.
//First we draw the contents of the screen onto the tiny FX buffer:
//_fx.draw(screen);
for each (var s:FlxSprite in _bloomies.members) {
_fx.draw(s);
}
//Then we draw the scaled-up contents of the FX buffer back onto the screen:
//the effects itself
screen.draw(_fx);
/*
screen.draw(title_text2);
screen.draw(title_text3);
screen.draw(title_text4);
screen.draw(title_text5);
*/
//anything you want excluded goes here, except objects

//screen.draw(a1, 50, 50);

}

private function onFade():void
{
FlxG.fade.start(0xff69190C, 1.2, onFade2);
}
private function onFade2():void
{
FlxG.state = new PlayScreen();
}

private function onFade3():void
{
FlxG.fade.start(0xff69190C, 1.2, onFade4);
}
private function onFade4():void
{

FlxG.state = new PlayScreen();
}



}

}

Yields this:
http://www.swfcabin.com/open/1294098607

That produces a little blur in the upper right corner, but I have no idea how. It's also not blinking unlike a normal bloom effect would. Which, is what I was trying to achieve to make objects appear more distinct from the regular starfield. Oh, and one more thing. When applying the normal bloom filter like normal, any text that you don't want bloomed simply add it after the bloom like so:

Code: [Select]
screen.draw(title_text2);
I assume it works for sprites but I have no conclusive proof of whether or not that is actually going on.
Thanks again.
(why do you not like pre-loaders swf cabin? why?)
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

jlong64

  • Member
  • **
  • Posts: 34
  • Karma: +0/-0
    • View Profile
    • Iokat
Re: Bloom trouble
« Reply #3 on: Mon, Jan 3, 2011 »
Oh, I think I see what's going on. When we're calling _fx.draw, we aren't passing in the coordinates where we want to draw the sprite, so it defaults to drawing the sprite at (0, 0) every time. It works in the original example because it's drawing the entire screen into the buffer, and since the screen IS the screen, it always has screen coordinates of (0, 0).

Try this out:

Code: [Select]
for each (var s:FlxSprite in _bloomies.members) {
    var screen_loc:FlxPoint = s.getScreenXY();
    _fx.draw(s, screen_loc.x / _bloom, screen_loc.y / _bloom);
}

I'm pretty sure you need to scale the screen location by _bloom in order to draw it in the right place on the buffer. If it doesn't work try removing that though.

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: Bloom trouble
« Reply #4 on: Tue, Jan 4, 2011 »
That seemed like it could work. I still got the same result though.
*shrugs*
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: Bloom trouble
« Reply #5 on: Tue, Jan 4, 2011 »
For a bit of crazy, use the arrow keys:
http://www.swfcabin.com/open/1294196444

I dug up some old code. I also found something else that I'm willing to try. To get this effect, in the sprite class of a1, here is the code:

Code: [Select]
package
{
import flash.geom.Point;
import org.flixel.*;
//import org.flashdevelop.utils.FlashConnect;
import flash.filters.*;

public class Aquarius extends FlxSprite
{
[Embed(source = "pics/Aquarius.png")] private var ImgHills:Class;

private var title_text:FlxText;

public static  var speed:int = 220;



public function Aquarius(X:int, Y:int)
{
super(X, Y);
loadGraphic(ImgHills, true, false, 168, 104);


alpha = 0.555;
//title_text.visible = false;
//offset.y = 8;
FlxG.state.add(title_text);

title_text = new FlxText(this.x, this.y, 100, 'Aquarius');
title_text.setFormat(null, 8, 0xffffffff, "center");
title_text.alpha = 0.555;
title_text.visible = false;
}

override public function update():void
{


if (health < 2)
{

FlxG.state.add(title_text);
title_text.visible = true;

}

velocity.x = velocity.y = 0;
if (FlxG.keys.LEFT)
{

velocity.x -= speed ;
}
else if (FlxG.keys.RIGHT)
{

velocity.x += speed ;
}
if (FlxG.keys.UP)
{

velocity.y -= speed ;
}
else if (FlxG.keys.DOWN)
{

velocity.y += speed ;
}

super.update();
}
override public function render():void
{
var blur:BlurFilter = new BlurFilter();
blur.blurX = 0;
blur.blurY = 0;
blur.quality = 1;
FlxG.buffer.applyFilter(FlxG.buffer, FlxG.buffer.rect, new Point(x,y), blur);
}




}
}

Any way to fix this and keep it on the flxsprite? Trying the other filters causes some sort of the same thing, except that it drags a transparent frame around. :D

Edit: I was also going to try something like this:
http://flixel.org/forums/index.php?topic=1648.0

But I ran into an error where you add your own arrayremove utility (which I know not how to do). I also have no idea how he does the other examples in the swf he provides.
« Last Edit: Tue, Jan 4, 2011 by xhunterko »
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

zez

  • Active Member
  • ***
  • Posts: 203
  • Karma: +0/-0
    • View Profile
    • Devlog
Re: Bloom trouble
« Reply #6 on: Wed, Jan 5, 2011 »
Code: [Select]
public function spritewithblurfilter(X:Number, Y:Number)
{
super(X, Y);
var blur = new BlurFilter(6, 6, 1);//or whatever
loadGraphic(sprite sheet, true, true, 32);// ditto
pixels.applyFilter(pixels, pixels.rect, _flashPoint, blur);
}
Totally works for applying a bitmap filter (in this case Blur, but it could be anything,) to the entire sprite sheet.

 You can also apply it to _framePixels the same way (I mean, you probably want to store the variable somewhere so you only make a new one once, and keep track of if you have already applied it too the frame so you dont end up re-applying the same effect 3000 times or something silly....)
If you want to have an easy way of toggling the effect.

You may or may not have to make Pixels and or _framePixels public in FlxSprite to make this work (I forget if I did that or not. Im pretty sure I did it too at least one of them, if it was _framePixels then it only matters if you want too apply it at pre set times to whatever frame the sprite is on.)

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: Bloom trouble
« Reply #7 on: Wed, Jan 5, 2011 »
Heh, well that works finally! Thank you!
Except that I can't get GlowFilter/GlowFilterGradient to work apparently. I'm just using the values (6,6) since I don't know how to manipulate anything else. Blur may work for that, but any help on that would be appreciated too.
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: Bloom trouble
« Reply #8 on: Sat, Jan 8, 2011 »
Me again. Still fiddling with trying to get the glow to work. Currently, I am trying this:

Code: [Select]
var glow:GlowFilter = new GlowFilter(253011212,3,0,3,2);//or whatever

if (health < 2)
{

FlxG.state.add(title_text);
title_text.visible = true;
//pixels.applyFilter(pixels, pixels.rect, _flashPoint, blur);
pixels.applyFilter(pixels, pixels.rect, _flashPoint, glow);

}


Which, as far as I can see, doesn't seem to apply the effect.
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: Bloom trouble[SOLVED]
« Reply #9 on: Mon, Jan 10, 2011 »
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha