http://gizmo.hannes-moser.com.

The most important feature is the possibility to change the grid setup by simply chaning some -blueprint-grid parameters.

/* Grid setup */
$-blueprint-grid-columns:24;
$-blueprint-grid-width:30px;
$-blueprint-grid-gutter:10px;

There is no documentation right now, but i want to share at least the grid.scss with you.
If you want to try on your own ensure you have at least SASS version 3.1 installed as this snippet use custom SASS functions.

/* Grid calc function */
@function -blueprint-grid-width($n) {
	@return $n * $-blueprint-grid-width + ($n - 1) * $-blueprint-grid-gutter;
}

/* A container should group all your columns. */
.container {
  width: -blueprint-grid-width($-blueprint-grid-columns);
  margin: 0 auto;
}

/* Use this class on any .span / container to see the grid. */
.showgrid {
  background: url(src/grid.png);
}

/* Use these classes to set the width of a column. */
.column {
	float:left;
	margin-right:$-blueprint-grid-gutter;
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

@for $i from 1 through $-blueprint-grid-columns {
	.span-#{$i} {
		@extend .column;
	}
	.span-#{$i} {
		width: -blueprint-grid-width($i);
		@if $i == $-blueprint-grid-columns {
			margin-right:0;
		}
	}
}

/* Use these classes to set the width of an input. */
input.span {
	border-left-width: 1px;
	border-right-width: 1px;
	padding-left: $-blueprint-grid-gutter / 2;
	padding-right: $-blueprint-grid-gutter / 2;
}
@for $i from 1 through $-blueprint-grid-columns {
	input.span-#{$i},textarea.span-#{$i} {
		@extend input.span;
	}
	input.span-#{$i} {
		width:-blueprint-grid-width($i) - $-blueprint-grid-gutter - 2;
	}
}
@for $i from 1 through $-blueprint-grid-columns {
	textarea.span-#{$i} {
		@extend input.span-#{$i};
	}
}

/* Add these to a column to append empty cols. */
@for $i from 1 through ($-blueprint-grid-columns - 1) {
	.append-#{$i} {
		padding-right:-blueprint-grid-width($i) + $-blueprint-grid-gutter;
	}
}

/* Add these to a column to prepend empty cols. */
@for $i from 1 through ($-blueprint-grid-columns - 1) {
	.prepend-#{$i} {
		padding-left:-blueprint-grid-width($i) + $-blueprint-grid-gutter;
	}
}

/* Border on right hand side of a column. */
.border {
  padding-right: $-blueprint-grid-gutter / 2 - 1;
  margin-right: $-blueprint-grid-gutter / 2;
  border-right: 1px solid #ddd;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: ($-blueprint-grid-width + 20) / 2 - 1;
  margin-right: ($-blueprint-grid-width + 20) / 2;
  border-right: 1px solid #ddd;
}

/* Use these classes on an element to push it into the next column, or to pull it into the previous column.  */
.pull {
	float:left;
	position:relative;
}
@for $i from 1 through $-blueprint-grid-columns {
	.pull-#{$i},.push-#{$i} {
		@extend .pull
	}
	.pull-#{$i} {
		margin-left:- -blueprint-grid-width($i) - $-blueprint-grid-gutter;
	}
}

@for $i from 1 through $-blueprint-grid-columns {
	.push-#{$i} {
		margin:0 -(-blueprint-grid-width($i) + $-blueprint-grid-gutter) 1.5em (-blueprint-grid-width($i) + $-blueprint-grid-gutter);
	}
}

/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
  margin-top:1.5em;
}
div.append-bottom, .append-bottom {
  margin-bottom:1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #e5eCf9;
}

/* Use this to create a horizontal ruler across a column. */
hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: 1px;
	margin: 0 0 17px;
	border: none;
	&.space {
		background: #fff;
		color: #fff;
		visibility: hidden;
	}
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
.clearfix, .container {
	display: block;
	&:after {
		content: "\0020";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		overflow:hidden;
	}
}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

/**
 * CSS3 Border-Radius
 *
 * @param $topLeft Either the top left radius, if no other param provided, this value is applied for all params
 * @param $topRight [optional]
 * @param $bottomRight [optional]
 * @param $bottomLeft [optional]
 */
@mixin border-radius($topLeft, $topRight : null, $bottomRight : null, $bottomLeft : null) {
	@if $topRight == null and $bottomRight == null and $bottomLeft == null {
		$topRight : $topLeft;
		$bottomRight : $topLeft;
		$bottomLeft: $topLeft;
	} @else if $bottomRight == null and $bottomLeft == null {
		$bottomRight : 0;
		$bottomLeft : 0;
	} @else if $bottomLeft == null {
		$bottomLeft : 0;
	}
	-moz-border-radius-topleft: $topLeft;
	-moz-border-radius-topright: $topRight;
	-moz-border-radius-bottomright: $bottomRight;
	-moz-border-radius-bottomleft: $bottomLeft;
	-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
	border-radius: $topLeft $topRight $bottomRight $bottomLeft;
}

/**
 * CSS3 Box-Shadow
 *
 * @param $inset Either true or false
 * @param $x
 * @param $y
 * @param $blur
 * @param $spread
 * @param $color
 */
@mixin box-shadow($inset, $x, $y, $blur, $spread, $color) {
	@if $inset == true {
		$inset : inset;
	} @else {
		$inset :"";
	}
	-webkit-box-shadow: #{$inset} $x $y $blur $spread $color;
	-moz-box-shadow: #{$inset} $x $y $blur $spread $color;
	box-shadow: #{$inset} $x $y $blur $spread $color;
}

/**
 * CSS3 Text-Shadow
 * @param $x
 * @param $y
 * @param $blur
 * @param $color
 */
@mixin text-shadow($x, $y, $blur, $color) {
	text-shadow: $x $y $blur $color;
	filter: dropshadow(color=#{$color}, offx=#{$x}, offy=#{$y});
}

/**
 * CSS3 Multi-Column Layout
 * @param $columns
 * @param $gap
 */
@mixin columns($columns, $gap) {
	-moz-column-count: $columns;
	-moz-column-gap: $gap;
	-webkit-column-count: $columns;
	-webkit-column-gap: $gap;
	column-count: $columns;
	column-gap: $gap;
}

/**
 * CSS3 Outline
 * @param $thickness
 * @param $style
 * @param $color
 * @param $offset [optional]
 */
@mixin outline($thickness, $style, $color, $offset : null) {
	outline: $thickness $style $color;
	@if $offset != null {
		outline-offset: $offset; /*Delete if you don't want an offset*/
	}
}

/**
 * CSS3 Transition
 * @param $property
 * @param $duration
 * @param $function [optional]
 */
@mixin transition($property, $duration, $function : ease) {
	-webkit-transition: $property $duration $function;
	-moz-transition: $property $duration $function;
	-o-transition: $property $duration $function;
	transition: $property $duration $function;
}

/**
 * CSS3 Transformation
 * @param $scale
 * @param $rotate
 * @param $translate
 * @param $skew
 */
@mixin transform($scale, $rotate, $translateX, $translateY, $skewX, $skewY) {
	-moz-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-webkit-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-o-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-ms-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
}

/**
 * CSS3 Background Gradient
 * @param $color1
 * @param $color2
 */
@mixin gradient($color1, $color2) {
	background: -moz-linear-gradient(top, $color1 0%, $color2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, $color1 0%,$color2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, $color1 0%,$color2 100%); /* IE10+ */
	background: linear-gradient(top, $color1 0%,$color2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0 ); /* IE6-9 */
}

There are also a lot of other enum implementations available for PHP, but most of the time they suck, either they are to complicated to use or they simply suck. The solution i want to provide is far away from perfect, but there will never be a perfect solution until enums become an integrated type within PHP. My basic usage scenario for enums in php includes the comparison of object states.

class MyEnum {
const SUCCESS = 'success';
const ERROR = 'error';
}

Its easy and most of the time it will do the trick. But if i work on bigger projects, comparison of constants sometimes lead to strange issues which are hard to debug. What i need is a more stable comparison that avoid conflicts by design. Have a look at my example and let me know what you think.

The abstract baseclass for all enums:

/**
 * Enum
 *
 * @author Hannes Moser
 * @version 1.0
 * @since 1.0
 */
abstract class Dovigo_Enum {

	/**
	 * Return an associative array with the enum values as a list of
	 * key/value pairs.
	 * @return array
	 */
	public static function toArray() {
		$r = new ReflectionClass(get_called_class());
		return $r->getStaticProperties();
	}

}

/**
 * The message status enum
 *
 * @author Hannes Moser
 * @version 1.0
 * @since 1.0
 */
final class Dovigo_Message_Status extends Dovigo_Enum {

	public static final $SUCCESS	= array(__NAMESPACE__, __CLASS__, __LINE__);
	public static final $ERROR		= array(__NAMESPACE__, __CLASS__, __LINE__);

}

If you are using PDT or ZendStudio it’s easy to create a template for the declaration part, so you don’t have to write this every time on your own.

Games are an essentiel part of our society. Since ages we like to play and nothing has changed since the new-media-revolution arrived. Games became one of the most important parts of the media-industry.
One scheme in context of videogames is especially successful: the simulation of virtual worlds and their interactivity. The foundation of this success is a constant development of the technology behind the games. Parts of this technology are a visual, a sound and an interactive component. The evolution in terms of technology is heavily linked to hardware-development. The applications are simply following the hardware-enhancements.
In the past, nobody thought it would be possible to have volumetric clouds rendered in real-time, or that you can have an exorbitant count of polygons in one scene. There is a nice side-effect of this strong link between hardware- and application-enhancements. Gamers are able to enjoy innovations all the time.
In context of videogames, the main improvements that have been made where related to graphic and interactive components. When we talk about interactivity, we are talking about physical simulation and how we are able to achieve realistic behaviour in a virtual environment.

Just think about simple things like open a door or a ball that is falling down to the floor or even more complex things like steering a car in a realistic manner. Physic-simulation is a very important part for video-games.
The simulation of complex physical behaviour is usually only limited by the available hardware. A major target of this paper is to have a proof of concept for typical end-user hardware like a game-console.
Microsoft is offering the XNA framework for their game-console Xbox 360. So it is possible for every developer to have their applications run on the console.

The area of research i have chosen, is the realistic simulation and visualization of fluids in context of real-time environments. A fluid can be a gas or a liquid. Fluids are not very commonly used in nowadays computer-games, but there is a particular interest into this topic. Fluid-simulation cannot be replaced by a more simple approximation. The reason is the good quality of the results produced by a fluid-simulation. New hardware, especially massiv-parallel systems like the GPU, allows us to have realtime simulation implemented into interactive environments. This paper should give a comprehensive overview about fluid-simulation and visualization.

g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){/*src*/}
addEventListener("enterFrame",f);

I am so addicted, i can’t stop…

My 140 chars of legend…. wait for it -dary.

#tweetcoding – “Pipes” http://twitter.com/eliias/statuses/1228303442

m=.05;if(!o.r)o.r={x:r()*m,y:r()*m,z:r()*m};w=20+s(i*o.r.y);l=2500/w;ls(1);g.drawCircle(200+s(++i*o.r.x)*l,200+s(i*o.r.y*2)*l,l/l*w);

Can’t stop #tweetcoding – “Shorty” http://twitter.com/eliias/statuses/1228042430

mt(200,200);g.lineStyle(1,0);lt(s(i+=0.1)*i/0.1,m.cos(i)*i/0.1);lt(s(i+5)*i/0.1,m.cos(i+5)*i/0.1);

#tweetcoding – “Crazy” http://twitter.com/eliias/status/1227884420

g.clear();g.beginFill(0);if(!o.s)o.s=[];o.s[o.i=i%440]={x:o.i%11*40,y:i++%440};while(t=o.s[o.i--])g.drawCircle(t.x,t.y,s(i/40+o.i)*30)

For me it was always clear, that the basic vector tools, some bitmap effects(live-effect) and the ability to handle the file-export easily are enough to setup a layout. At least the pixel-perfect positioning threw input fields of vector-forms is a main, maybe the biggest reason for me to use Fireworks.

I met some designers that prefer using Illustrator/Photoshop to get their results, but i always discovered that this combination has a major drawback, two different tools for one thing.

But in the last month i am getting very annoyed about Fireworks because of its bad font-rendering behavior. One major reason is the Anti-Aliasing of Fonts. The basic settings (Crisp, Strong, Smooth) are crap. Font-sizes up to 15px are looking like the same that my neighboures dog lost in front of my door this morning. Event for the basic fonts like Arial, Verdana, Tahoma it is heavy to find a good anti-aliasing setting.

About font-sizes around 10px, 11px, 12px (this  is usually my choise for floating text or text that is not so important) the things get really worse.

Next big problem with Fireworks is rendering text. Even the Flash-Player has better capabilities of how to render text, especiall block-text (and for sure, Flash-Player has the better Anti-Aliasing).

In version 10 of a product that has its focus on prototyping web-applications i expect a bit more than block-left aligned, block-right aligned and an unusable block-centric. At least it should be possible to have a multi-line paragraph that is block-text and the lines do not have this crazy kerning.

Multi-column text would also be a nice feature. Maybe it is possible to get the new Flash-Player text-rendering with the new text-layout framework to work with Fireworks. Would be an advancement to the current status. But i would prefer to have the same text-anti-aliasing like Photoshop had it.

I also discovered a bug. First i thought is has nothing to do with Fireworks and it depends on the used font, but later i see that it also happens with system fonts.

The text should be in the blue area.

I am currently thinking about how to improve this without changing the tools. But i think its Adobe’s turn now.

h.

Btw. if you have similar problems or even better a solution for this, just drop me a few lines here.

The gameplay of Ace of Mace is based on physics and the challenge is to master the 5 levels.

Update

So BAMMM…. good news

“Adobe Site of the day” on 9th of January, 2009
“FWA – Site of the day” on 6th of February, 2009

It happened already two weeks ago, but there was no time to post about it. We were nominated and invited to the Europrix  09 award and won in the category for games. The game will be online soon(1st January 2009), you will find it here.

Some photos from the event could be found here.

And for sure i am the GEEK on the photo .

Thanks to the other project members

Bernhard Kerschbaumer (3D and effect artist)
Jürgen Brunner (sound design and level design)
Max Brandl (project management and screen sesign)

Ps.: Jürgen send me an URL to link your name.

Finally, the Alpha state is ready for public. I have tested some features of the system and most of them are quite impressing. But as a WordPress user i still miss some things. Most important for me is to be different with my blog from others, not only in entries also in design and appearance. There should be a possibility to access the data threw an API (webservice). I would definitly swap from WordPress to kontain if i get a chance to switch back any time and/or import data from each service to the other.

I like the way f-i is building user-interfaces and the media-experience is great. So this is still an Alpha, but i am looking forward to the features coming.