Currently the posts are filtered by: libs
Reset this filter to see all posts.

11.08.2010

10:24

Layout management for display objects

I am working hard at the next update for www.kineticarm.com. So I didn't have much time for the blog in the last month, sorry for that.

At my latest custom project I had a complex GUI system and the whole Movie had to be resizeable. So a layout manager seemed to be a proper solution. I just wanted to have a system where I define positions and sizes of the GUI objects once and without having to care about it afterwards.

I builded a static Layoutmanager class where I register all objects and a helper class that allows me to define position and size of each object.

Values can be defined absolute and relative as in CSS and referenced to top left and bottom right border.

all values ending with "px" are absolute
all values ending width "%" are relative
all values starting width "-" are referenced to bottom/right border.
all values starting with "+" or without any sign are referenced to top/left border.

On top of that all properties can be referenced to the stage or other objects as well. So if layout gets really complex it's possible to build unvisible dummy objects to align other objects to it.Here are some Examples:

// Created an instance from an object from the lib.
// and adds it to the stage
var obj1:MovieClip = new Item();
addChild(obj1);
// creates a layout object for the added Displayobject
// The constructor takes the display object
lit = new LayoutItem(obj1);
lit.scale = false // the size isn't touched
lit.x = "90%"; // X pos. is 90% of stage width
lit.y = "50%"; // Y pos. is 50% of stage height
Layouter.registerObject(lit); // registers the object to the layoutManager
// Created an instance from an object from the lib.
// and adds it to the stage
var obj2:MovieClip = new Item();
addChild(obj2);
// creates a layout object for the added Displayobject
// The constructor takes the display object
lit = new LayoutItem(obj2);
lit.reference = obj1; // values references to obj1
lit.scale = false // the size isn't touched
lit.x = "-100px"; // X pos. is 100 pixels left to obj1
lit.y = "0px"; // Y pos. is obj1.y
Layouter.registerObject(lit);

The only thing you need to do is to call the static method "arrange" of the LayoutManager everytime you want to rearrange all registered objects. This is mostly done in a function called at the stage's resize event.

Here you can download the source code with some examples.

PermalinkComments 0

libs / tools

20.03.2010

13:06

Depth of Field in flash (DOF)

For my latest game I wanted to simulate DOF in flash. In flash we can apply filters to objects and flash provides a blur filter, this is the base of the work. What we need is a mechanism to coordinate the depths of the objects.

First We build a class that manages everything about DOF. This class needs an array which holds references to all the objects we want to use with DOF. We build a virtual space with the depths of 1 where 0 is the position of the camera and 1 is the point most faraway from the camera. Our class has a function addObject which takes the display object and a depths in our virtual space. Next our class has got a property maxBlur that defines how strong the maximum blur effect will be. And of course there is a property focus which defines the current focus.

In my game I needed the effect animated, so I added a main function which manipulates the focus and recalculates the blur effect for each object.

package at.lueftenegger.dof {
import at.lueftenegger.dof.operator.Operator;
import flash.display.DisplayObject;
import flash.filters.BlurFilter;
public class Dof{
public var maxBlur:Number = 5;
private var _focus:Number = 0; // 0 -> 1
private var last_focus:Number;
public var operator:Operator;
public function Dof(){
objects = new Array();
operator = new Operator();
}
protected var objects:Array;
public function set focus(value:Number):void {
_focus = value;
render();
}
public function addLayer( object:DisplayObject, position:Number ):void {
if (position < 0) position = 0;
if (position > 1) position = 1;
var l:Layer = new Layer();
l.dispObj = object;
l.position = position;
objects.push(l);
}
public function main():void {
_focus = operator.giveFocusValue();
if(_focus == last_focus) return;
render();
last_focus = _focus;
}
private function render():void {
for ( var i:String in objects) {
var h:Number = ( (objects[i].position - _focus) < 0 ) ? -(objects[i].position - _focus) : (objects[i].position - _focus);
var blur:Number = h * maxBlur;
var filter:BlurFilter = new BlurFilter( blur, blur, 1 );
var filterss:Array = [];
filterss.push(filter);
objects[i].dispObj.filters = filterss;
}
}
}
}
package at.lueftenegger.dof{
import flash.display.DisplayObject;
public class Layer{
public var position:Number;
public var dispObj:DisplayObject;
}
}
package at.lueftenegger.dof.operator{
public class Operator{
public function Operator(speed:Number = 0.15){
}
public function giveFocusValue():Number {
return 0.5;
}
}
}
package at.lueftenegger.dof.operator{
public class Sinus extends Operator{
private var speed:Number;
private var run:Number = 0;
public function Sinus(speed:Number = 0.15){
this.speed = speed;
}
override public function giveFocusValue():Number {
run += speed;
return 0.5 + Math.sin(run) * 0.5;
}
}
}

How to use it

Create a new FLA file.
Put some MovieClips on screen and give them names.
Add the following script.

var dof:Dof = new Dof();
dof.operator = new Sinus(0.1);
dof.maxBlur = 10;
dof.addLayer( getChildByName("object1"),0);
dof.addLayer( getChildByName("object2"),0.2);
dof.addLayer( getChildByName("object3"),0.4);
dof.addLayer( getChildByName("object4"),0.6);
dof.addLayer( getChildByName("object5"),0.8);
dof.focus = 0.4;

PermalinkComments 1

libs

02.12.2009

23:03

plasma

You can reload the page to see different effects.

Some weeks ago I needed some eye candy for my latest game. The easiest way was to put some plasma in the background. But mostly plasma algorithms generate a repetitive pattern and i wanted a better one.

I found this post in david's blog: http://www.gibbongames.com/?p=167

Unfortunatley this program is written in blitzmax, a language I don't know at all. But the syntax is easy to understand, so it took just some hours to port it.

I have added one nice feature. You can define how many lines are calculated by render circle. So you can screw down the fps of the plasma effect and use the CPU for what you really want to do.

download: click hear to download a demo project.

p.s.: My favourite line of code in this project is

if ( ubyte[plasma_id] & 128 )
ubyte[plasma_id] = (~ubyte[plasma_id])&0x7F;

It's a very good example of the power of bit operation.

PermalinkComments 0