World of Goo

I normally try to ignore the ulterior motives behind coding horror posts – but I think this one turned out to be quite a gem. [Just a shame it wasn’t titled “Go and support 2dboy” rather than blathering on about software piracy]. If you’re into physics based puzzle games then check out World of Goo. Not bad for AU$30.10, and good fun for all the family. If you’re not sure then check out the demo – only 32Mb and has a heap of levels included.

Can a developer learn design skills?

Over the years I have the opportunity to build a fair number of user interfaces for various software applications. Whilst some have been more effective than others I’ve always struggled to create what I’d consider to be a truly compelling experience.

I find it very difficult to “dream up” user interfaces that are both functional and unique. It’s the starting point – the blank canvas if you like that really stumps me. If I concentrate on small individual portions of the interface I’ve trained myself to be fairly good at decomposing it into graphic primitives in order to be able to duplicate the effect. I find that this is actually an exercise in consciously processing what I’m seeing – rather than relying on the assumptions being made unconsciously.

Some examples:

  • What makes something look three dimensional?
  • How are surfaces made to have either a matt or shiny finish?
  • What characteristics does a glass surface have? What about a mirrored surface?
  • How can an indicator light appear to realistically switch on and off – taking into account glow and shadows?

When boiled down to graphic primitives most of these become fairly simple – although not altogether obvious at first. I’ve found that when working for an extended period of time to achieve a particular effect its possible to un-train your unconscious so that you actually process the primitives rather than the desired effect. This is pretty frustrating because for the next few days when I look at, say the glowing indicator light, what I actually see are a bunch of linear and radial gradients. Still it wears off after a few days and then, if I’ve done it properly, they starting looking like indicator lights again.

Last night whilst experimenting with some glass effects I came across this website: http://www.bestechvideos.com/tag/screencasters. It has a number of video tutorials that explain how to achieve common visual effects such as shiny buttons, glass panels and the like. The tool they use is InkScape which appears to be a vector drawing program running on Linux. However, I found its pretty easy to translate the effects into XAML, especially with the help of Blend.

  <Grid>
<Image Source="F:\Pictures\Textures\Image_After_Stock_Images\b1crystal001.jpg" Stretch="None"/>
<Border BorderBrush="#FF040404" BorderThickness="1" CornerRadius="8" Width="135" Height="160" >
<Border Width="Auto" Height="Auto" Background="#60A0A0F0" 
BorderBrush="#A3808080" BorderThickness="5" CornerRadius="4"
> <Border.Effect> <DropShadowEffect BlurRadius="20" ShadowDepth="5" Opacity="0.4"/> </Border.Effect> <Path Stretch="Fill" Margin="0,0,0,70" VerticalAlignment="Top" Height="Auto" Data="M256,0 C256,0 260,0, 260,4 L260,80 C230.46646,92.718311 185.26848,100.83087 129.63841,101.82405 95.868918,102.42695 58.948563,96.301248 27.904232,88.28635 20.143162,86.282627 12.749348,84.160824 5.863842,81.996578 L0,80 0,4 C0,4 0,0 4,0 z"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#CFFFFFFF" Offset="0"/> <GradientStop Color="#00FFFFFF" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> </Border> </Border> </Grid>

This is a really simple example and you can tell I did the Path using Blend because of the ridiculous numbers (though I did clean up the edges). This XAML generates the following, with and without the background Image:

Glass Panel Effect    Glass Panel No Background

Here’s another glassy effect that I was using for an update to my word puzzle UI. This one just uses a linear gradient brush on a diagonal.

    <LinearGradientBrush x:Key="ShimmerBrush" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#40FFFFFF" Offset="0"/>
        <GradientStop Color="#40FFFFFF" Offset="0.25"/>
        <GradientStop Color="#80FFFFFF" Offset="0.3"/>
        <GradientStop Color="#80FFFFFF" Offset="0.5"/>
        <GradientStop Color="#40FFFFFF" Offset="0.55"/>
        <GradientStop Color="#40FFFFFF" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GlassEdge" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Offset="0" Color="#80808080"/>
        <GradientStop Offset="0.3" Color="#80FFFFFF"/>
        <GradientStop Offset="0.5" Color="#80FFFFFF"/>
        <GradientStop Offset="1" Color="#80606060"/>
    </LinearGradientBrush>

 Word Puzzle on Wood