PixelBender for game developers
This week I found the time to take a look at PixelBender. And of course my first thought was, how to use it in my next game.
In praxis PixelBender is used for two thing. On one hand it's used for what it's supposed to - visual effects. On the other hand it's used for calculation. In this post I am talking just about visual effects.
For my games in the past I used movieclip animations for visual effects. With visual effects I mean brain death effects. That means the effect is played and doesn't have any back coupling to the logic or the game environment. That's nice to use, because you trigger the effect and don't have to care about the rest. The movieclip removes itself from the stage with a short script in the last frame.
This mechanism had got the following characteristics:
- Effect has to be easy to start.
- The effect should be animated automatically.
- When the effect is finished everything should be cleaned up automatically.
For PixelBender effects I wanted a mechanism doing exactly the same, but things are a bit more complicated.
- For flash games all recourses should be compiled into one swf. There are some issues to get the PixelBenders effect into the swf file.
- PixelBender effects are not designed to be animated.
- The filters array of the Displayobject object is not able to be manipulated.
Getting PixelBender effects into the swf file
Exporting the PixelBender kernel in the PixelBender toolkit created a .pbj file. This file is used by the flash player at runtime. There are three methods get the .pbj file into the swf file.
1. loading at runtime
I will not discuss this solution here, because it isn't practical for flash games. Flash games are mostly spread over a lot a sites and servers. You would need your own server to store all your effects, what would cause a lot of traffic and work to maintain.
2. [embed]
The embed tag allows you to embed the .pbj file into your swf file. There is just one drawback about it. The embed tag in not part of the AS3 specifications, it's part of the flex framework. So, if you use this tag the flex framework is involved.
3. PixelBender to Actionscript converter
I have found this tool, that converts your .pbj file into an actionscript class containing the .pbj file as a byte array. With this method the .pbj file is embedded into the swf file without involving the flex framework. But there is a drawback too. This method makes it necessary to convert the .pbj file newly every time you change it.
http://blog.brun.pl/2008/05/pixel-bender-pbj-file-to-actionscript-class-converter/
I decided to use the embed tag in my class, because from my point of view it's the best solution.
I won't explain the source of the classes here. They should be easily understood and where it's needed the source is documented.
The main class is the effectManager. You have to call it's main function in your main game loop. You may now ask why I didn't use timer objects for the animations. The solution is simple: I design all my programs to be driven by one force based on the ENTER_FRAME event. It's simply easier to handle.
In the download file you will find the logic for the effect management, an example PixelBender project and an example how it's used in the swf file.
download: pixelbender1.zip
- package {
- import classes.at.lueftenegger.effects.EffectsManager;
- import classes.at.lueftenegger.effects.fx.ShockWave;
- import flash.display.Sprite;
- import flash.events.Event;
- import flash.events.MouseEvent;
- public class Main extends Sprite{
- // Embed is not part of the AS3 specification.
- // It's part of the Flex framework.
- // So this framework is involved here,
- // but there is no other solution.
- [Embed("./assets/shockwave.pbj", mimeType = "application/octet-stream")]
- public static var fxShockWave:Class;
- private var _fm:EffectsManager;
- public function Main(){
- _fm = new EffectsManager();
- addEventListener(MouseEvent.CLICK, doShockwave);
- addEventListener(Event.ENTER_FRAME, main);
- // you have to write a Class implementing IEffect for every single effect
- // you create in your game.
- // This line gives the effect class a reference
- // to the embeded pbj file
- ShockWave.effect = fxShockWave;
- }
- private function doShockwave(e:MouseEvent):void {
- // this line of code triggers the effect. That's all you have to do.
- _fm.AddEffect(new ShockWave(stage.mouseX, stage.mouseY), image);
- }
- private function main(e:Event):void {
- // game main loop
- // ... your game runs here
- // in your game main loop call the effect manager's
- // main function to run the effects.
- _fm.main();
- }
- }
- }
AST for AS3 (AST2)
This time i would like to show you the AS3 version of my ASToolBox. The AS3 version works a bit different than the AS2 version. I have split the whole tool into two components. There is a standalone applikation for all output data and a static class for use in your Flash file.
download: ast2.zip
You can find the installation instructions in the readme file.
To use AST you have to give it a reference to the stage.
- ...
- import at.lueftenegger.ast2.AST;
- ...
- AST.stage = stage;
- ...
- // The output and timer function are the same as in the AS2 version:
- AST.tracelocal("W");
- AST.trace("1");
- AST.clear();
- AST.trace("2");
- AST.traceStage();
- AST.var_dump(
- {
- _string:"Hello world!",
- _int:int(1),
- _uint:uint(2),
- _number:Number(3),
- _bool:Boolean(true),
- _array:[1,2,3],
- _object:{_a:"hello", _b:"world" },
- _nested:[ "a",
- "b",
- { c:"c",
- d:"d",
- e: [ 0,
- 1,
- 2
- ]
- },
- int(1),
- uint(2),
- Number(3)
- ],
- _xml: XML("<a>hello World</a>")
- }
- );
- // timer functions
- var u:Number;
- AST.timer_clear();
- var i:int = 0;
- for(i = 0; i < 10; i++){
- AST.timer_start();
- for(var x:int = 0; x < 1000000; x++)
- u = Math.sin(x)+Math.cos(i)+Math.random()/Math.cos(x);
- AST.timer_stop();
- }
- AST.timer_report();
- AST.timer_avg();
- //timer 2
- AST.timer_clear();
- for( i = 0; i < 3; i++){
- AST.timer_start();
- for( x = 0; x < 1000; x++)
- u = Math.sin(x)+Math.cos(i)+Math.random()/Math.cos(x);
- AST.timer_stop();
- }
- AST.timer_report();
- AST.timer_avg();
- // trace stage
- // this function is new to AST2
- // It gives a tree structure of the displaylist.
- AST.traceStage();
- for(i = 0; i<30; i++)
- addChild( new MovieClip() );
- AST.traceStage();
AST - ASToolBox (AS2)
This time I want to share a tool for all AS2 coders out there.
I wrote it because I needed an easy to use trace tool for my projects written with flashdevelop. At this time trace in flashdevelop wasn't an easy step and I didn't want to read all the tutorials because they simply didn't solve the problems for my installation.
ASToolBox (short ast) is a static class which offers functions for tracing, var_dump and time measurement of code segments.
Installation:
Copy the class source code below in a .as file and safe it in the folder
C:\Dokumente und Einstellungen\[USERNAME]\Lokale Einstellungen\Anwendungsdaten\Adobe\Flash CS4\de\Configuration\Classes\FP8
trace data
To trace data ast offers three functions. Firstly there is trace. It's the most common function in flash, so I think I don't need to explain it.
Secondly there we have var_dump. It takes an Object and traces an analysed string of it. It's an flash equivalent of the PHP function.
And Finally println, it works very similar as the C equivalent, but it doesn't know data types. Everything is handled as a String. Actually it doesn't output anything. It just prepares and returns a string for output.
Additionally to these output functions there is clear, which simply clears the output window.
time measurement
Sometimes you want to measure the time that is taken for a peace of code to be executed. Ast gives you some functions to make this task very simple.
- ast.trace("In europe children get their presents on 24. December in the evening.");
- ast.var_dump({a:1, b:"w", c:["hello", "world"], d:{a:1, b:2, c:3}});
- ast.trace( ast.println("In europe %0 get their presents on %1. December in the evening%2", ["children", 24, "."]) );
- ast.clear();
- var z:Number = 0;
- var finish:Number = 0;
- for( var i:Number = 0; i < 5; i++){
- finish = 1000+Math.random()*10000;
- ast.timer_start();
- for( var a:Number = 0; a < finish; a++)
- z = --z +1;
- ast.timer_stop();
- }
- ast.timer_report();
- ast.timer_avg();
- // if you don't call clear here the measurements
- // above are added to the report below.
- ast.timer_clear();
- var z:Number = 0;
- var finish:Number = 0;
- for( var i:Number = 0; i < 5; i++){
- finish = 1000+Math.random()*10000;
- var handle:Number = ast.timer_start();
- for( var a:Number = 0; a < finish; a++)
- z = --z +1;
- ast.timer_stop(handle2);
- }
- ast.timer_report();
- ast.timer_avg();
Here you can download ast.as
flash frame rate measurement(fps)
Frame rate measurement is an important topic in flash game development.
Goggle brings you a ton of scripts showing the current fame rate in a text field in a corner of your swf. But in your games you often have situations where the amount of calculations in/decreases very rapidly and you want to see at the first look how the frame rate if affected. For this a graph showing the frame rate is much better than the frame rate in a text field.
I would like to share a tool I wrote in 2006 and ported to AS3 last month.
download: http://www.lueftenegger.at/downloads/
Manual:
- green graph: shows the current frame rate.
- blue graph: shows the average frame rate of the last 50 frames.
- red graph: shows the average frame rate of the whole runtime.
To use the window, just drag the Symbol "fpsWindow" from the library on the stage.
To create it programmatically use the following code:
- // AS3:
- addChild(new fpsWindow());
- // AS2:
- _root.attachMovieClip("fpsWindow","fpsWindow",getNextHighestDepth());
flashgameblog.at in english
Last night I had an interesting chat with some developers. We talked about blogging and I came to the conclusion to continue this blog in english. The german posts will stay as they are.
Letzte Nacht hatte ich eine interessante Unterhaltung mit einigen Flashspieleentwicklern. Diese Unterhaltung führte mich zu der Entscheidung, diesen Blog in englisch weiterzuführen. Die vorhandenen deutschen Einträge bleiben ungeändert vorhanden.
