Pluggin’ Pixel Bender into Flixel
If that means nothing to you, you might as well browse on… Geekspeak ensues! If it does, welcome to my short tutorial on what I last posted about, and specifically how to plug Pixel Bender filters into Adam Atomic‘s wonderful Flixel framework for Flash. Also apologies for the temporary blog theme, as I managed to screw up my previous stylesheet with no backup. Will do something when I have more time, I promise!
Anyway, I’ll leave the Pixel Bender Toolkit stuff itself to other people (there’s loads of tutorials and free sample code for writing the filters themselves…)
Just remember to alter your project properties to build for at least Flash Player 10 0 0 (right click on the project icon in the project explorer and choose Properties, you’ll find the setting in the Actionscript Compiler area, where you set your Flex SDK.)
Once you’ve created your compiled ‘.pbj’ filter in the Toolkit (from a ‘.pbk’, the code file), and stuck it somewhere suitable like your ‘data’ directory, the main problems I had were how to:
1. Load the filter in Flixell
You’ll need these includes:
import flash.display.Shader;
import flash.filters.ShaderFilter;
Make sure to use ‘octet-stream’ encoding. Embed it as a Class:
[Embed(source = "/../data/filter.pbj", mimeType = "application/octet-stream")] private var FilterCode:Class;
…and plug it into the Shader() constructor:
var coolShader:Shader = new Shader(new FilterCode());
2. Access your filter’s paramters:
You can access any of the parameters you defined in Pixel Bender toolkit like this:
coolShader.data.paramName.value
(*paramName being your parameter name, not the word paramName!)
Important to note that even if the parameter is a single float, you must pass the Shader a one-parameter array. So for example, my light position, which is a float3 of x,y and z would be accessed as follows:
coolShader.data.lightPosition.value=[x,y,z];
coolShader.data.lightAttenuation.value=[1.0];
3. [Optionally] Add additional inputs to the filter (by default, the input is also the output, but what if you need a fog texture, for example…)
Just refer to it as you would a parameter, only pass BitmapData in, and use the ‘input’ property instead of the ‘value’ one:
coolShader.data.fogMap.input = FlxG.addBitmap(ImgFog,false);
Obviously if your PB filter doesn’t need a second input (like a desaturation filter, for example), you can skip this step. Make sure you name your input the same as the input parameter in your PB code.
4. Apply the filter to the buffer
The Pixel Bender shader itself has to be wrapped up in a way Flash can understand. This is what the ShaderFilter class is for. You create one by passing the Shader to it. Add this to your setup code:
var coolFilter:ShaderFilter = new ShaderFilter(coolShader);
And then you can apply this filter as you would a normal Flash filter, and there are three ways to do this. I’m actually using the supposed slowest of the three apparently, but it seems to be the fastest in my results!
In your ‘PlayState’ add the following to an overridden postProcess() function:
FlxG.buffer.applyFilter(FlxG.buffer,new Rectangle(0,0,screenWidth,screenHeight),new Point(0,0),coolFilter);
The point is for the top-left, and the rectangle just specifies the bounds.
NOTES:
If you only want to store one reference, and aren’t switching shaders on an object, you can actually access the Shader parameters through the ShaderFilter, like so:
coolFilter.shader.data.fogMap.input = FlxG.addBitmap(ImgFog,false);
I’ve experimented with adding the filter in this way too, just like Flash’s in-built filters:
myGameState.filters=[coolFilter];
In Flixel, this works but operates on the post-transformed pixels (ie post-Flixel-scaling), whereas applying it to the BitmapData in postProcess() is pre-scale.
Make sure you don’t include loops in your .pbk code as they’re not supported in Flash, and avoid conditionals where possible, especially when sampling a texture within one.
BIG QUALIFIER:
I’m a pretty crappy coder, and have never posted this kind of thing before. Hope it was in some way helpful! Feel free to point out any errors which there are no doubt quite a few of… Thanks also to others who paved the way for this tutorial such as Salt and various other helpful bloggers.
I not too long ago stumbled on your current net page, nonetheless i’d like to convey i genuinely loved this page, a lot of thanks.
I am therefore happy to have come across the data you’ve got ! Sewer
Only wanna remark in handful of frequent items, The web page kind is excellent, the topic matter is rattling excellent
Hello.This post was extremely interesting, especially because I was investigating for thoughts on this subject last week.
You made some first rate points there. I regarded on the web for the problem and found most people will go along with along with your website.
Wow, incredible weblog layout! How lengthy have you ever been blogging for? you made blogging glance easy. The whole look of your web site is excellent, let alone the content material!
Found your informative blog. And very happy that I bumped on this site. Two thumbs up. Keep up the good work.
I found your blog site on google and test a few of your early posts. Continue to maintain up the very good operate. I just extra up your RSS feed to my MSN News Reader. Searching for ahead to studying more from you later on!…
Hello there, I discovered your web site by the use of Google even as searching for a related topic, your site got here up, it seems to be good. I’ve bookmarked it in my google bookmarks.
I have been browsing on-line greater than 3 hours lately, yet I by no means found any interesting article like yours. It’s beautiful worth sufficient for me. Personally, if all webmasters and bloggers made just right content as you did, the internet might be a lot more useful than ever before.
I was very pleased to search out this web-site.I wanted to thanks to your time for this glorious read!! I definitely enjoying each little little bit of it and I have you bookmarked to take a look at new stuff you weblog post.
I will right away snatch your rss as I can not to find your e-mail subscription link or e-newsletter service. Do you’ve any? Please allow me recognise in order that I may just subscribe. Thanks.
Howdy! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Thank you!
This is the proper weblog for anyone who needs to search out out about this topic. You notice so much its virtually onerous to argue with you (not that I really would want…HaHa). You undoubtedly put a new spin on a topic thats been written about for years. Nice stuff, simply great!
Again outstanding read-up thanks rafts for sharing, keep me posted I’ll be interpretation more of your pieces in the approaching!
Thank you for this specific info I was basically researching all Yahoo to be able to find it!
Just wished to allow you recognize that I enjoy studying your posts. Dont have much to add, cheers!
I think other site proprietors should take this site as an model, very clean and great user genial style and design, let alone the content. You’re an expert in this topic!
yea.thanx for sharing this blog post with me.i just found it buy google couse i was searching for
more info about this.Ang BANG! i found your blog that was so use full for me.
feel free to drop me email i will send small donation.
regards felek grill bar
Hi, Neat post. There is a problem along with your web site in internet explorer, may check this… IE nonetheless is the market chief and a big section of other people will miss your fantastic writing because of this problem.
Great Read, really enjoyed it, Well done.
I precisely wished to thank you very much all over again. I do not know the things that I would’ve followed in the absence of the type of hints contributed by you relating to my theme. It absolutely was an absolute frustrating difficulty in my circumstances, but noticing the specialised tactic you processed that forced me to cry over happiness. I’m thankful for this work and thus expect you realize what a great job you were putting in training the others via your website. I’m certain you’ve never got to know all of us.
Thank you for all your hard work on this blog. Kim enjoys carrying out investigation and it’s obvious why. My spouse and i learn all relating to the lively mode you create simple solutions on the blog and therefore foster contribution from the others on that content and our child is discovering so much. Take advantage of the rest of the new year. Your doing a wonderful job.