Archive for the Category Design

Flixel 2.0 – Flash game development

beatbarni-blogimg

We have finished an enjoyable project for SPAR International, which involved creating an athletics game based around the button bashing classic, Daley Thomson’s Decathlon. When creating the graphics and style for this game we wanted to utilise the nostalgic bitmap effect which you see quite often in Flash games and in the graphic style of Pixel Art. From a development perspective this was very convenient because I have been looking for an excuse to try the Actionscript 3 game framework, Flixel, which I have seen lorded around the Internet as perfect for this purpose.

It has it’s own global render cycle which simplifies the process of adding bitmap graphics to the stage and creates a predictable fps independent game loop. Forum posts on the Flixel site state that this rendering process is more efficient than Flash player alone due to the fact that is purely geared toward low resolution bitmapped graphics. There where many elements which increased the speed of development such as the inclusion of the FlxObjects which are already set-up with simple motion facilities such as acceleration and velocity on both x and y axis which allow for the simulation of horizontal character movement and also vertical forces (i.e. gravity).

There are many other noteworthy features of the Flixel framework such as Sprites for Animation and the global/static FlxG control class which have been very well designed to make game development in Flash easier. I will, however, not go into detail about these because a concise post about Flixel from the Inside RIA blog has covered these. For those (developers mainly, I suspect) interested in understanding the affordances of using this framework over creating a game from scratch, reading this and also exploring the host of games and tutorials on the Flixel site will be worthwhile. Canabalt is a particular favourite game due to the intense screen shaking and accompanying music.

The game we created is called Beat Barni and is online now. Due to time constraints we created a pentathlon (5 events) rather than a decathlon, so feel free to challenge Barni to any of the following events; 100m, 400m Hurdles, Javelin, Pole-vault and Long Jump.

GOOD Infographics

GOOD Infographics competition

GOOD produces a website, videos, live events, and a print magazine. They seem to successfully mix an ethical ethos with good design throughout their projects.

I came across the results of a competition they have recently finished for the best infographic which would “highlight executive compensation (as in, how much CEOs etc. are paid) in an interesting way.”

It’s nice to see creative visualizations of mass data and these are very good examples of this.

Wordle – Updated

Wordle Tag Cloud - Updated

One of the first blog posts on the UVd blog was about Java application called Wordle which created pretty looking tag clouds based on word occurrences in blog RSS feeds, del.icio.us accounts or any block of supplied text.

It is quite interesting to see a peripheral snapshot of how a blogs content changes over time. Saves the trouble of reading it all as well.

FOWD Tour -Bristol

FOWD Tour Logo

Whilst Gareth was attending the1st linked data meetup I was on the other side of the country in lovely Bristol attending the FOWD Bristol Tour.  The day long conference was designed to let people get a chance to experience what the normal FOWD conferences are like in a place nearer to them without having to go to London or New York (And for a fraction of the price!).

Though, as I already live in work in London, the main attraction for me to travel all the way to Bristol was down to the fine line-up of speakers for the day. With the likes of Elliot Jay Stocks and Bruce Lawson I had no valid reason not to attend, and the small factor of being able to catch up with some old friends.

Elliot kicked the day of with ‘A Perfect Portfolio’. A talk aimed at highlighting the key strengths and weaknesses in portfolio designs, and some very valid points that you should take into consideration when designing your own. A subject that is very topical here at UVd at the moment due to us being in full swing of our own re-branding. It was very interesting to see the amount of points that came up that we have spent hours (coming up to years) discussing and deliberating over, such as the importance of showing your featured work on your homepage, to how you go about showing the process of your work: Elliot summed up the presentation succinctly:

“It’s not about the finished project, it’s ‘How you get there!’”

The next discussion of the day was from Paul Boag of Headscape titled “The Battlefield of Design – Designers vs Clients “. The first interesting thing to note was that Paul had decided not to use any slides at all and to rely purely on his memory (and cue cards) to educate us. Although, even with his new controversial style of presenting, it turned out to be a very insightful look into the process that Headscape use from brief to sign off. With the main aim of including the client throughout the design process rather than “designing behind doors”. I picked up some good tips from this, which we will be hopefully be putting into practice here in the future.

The HTML5 working spec is something that I have been following throughout the year and starting to become very passionate about. Therefore there was no doubt that in my opinion the best was saved until last, with Bruce Lawson’s talk on the Future of HTML5.  He covered a wide range of basic HTML5 knowledge, from the introduction of new basic tags such as <header>, <article>, <section>, <aside>, and <footer> to some of the more advanced such as <video>, <audio> and my personal favourite <canvas>  which enables the dynamic rendering of graphics on the page through javascript, a good example of this can be seen here.

The most important thing to take from Bruce’s talk though, is the fact that you don’t have to wait for the HTML5 spec to be complete to start using it. That could be years and even more so for the browsers to fully implement it, the pages with the new doctype<!DOCTYPE html> will still render in the browsers we know today, and most will accept the new tags. So why not start experimenting and playing! We certainly have, as you’ll see if you take a look at the source of this very blog.

Overall FOWD was a very enjoyable day, yet there is no way I could have covered everything in one small blog post. So for more info Bruce and Elliots slides from the day can can be viewed here:

Beautiful UVd Logo

UVd logo

Our snail paced re-brand has evolved into a rather brisk ramble (we are nearly out of breath) and as you can see we have settled on a new logo. Actually we have almost completed the web layouts but that’s another story (why say it in one post when you can say it in two!).

The basic premise behind the logo / re-brand was that the original Ultraviolet Design brand no longer represented the type of work we do and how we wish to be seen to the wider audience; with the only recognisable industry word in our name emphasising ‘design’, we felt that our other attributes were being unfairly over-powered. For instance, whilst we do web design, the design element is only one function we have to perform in an overall process of many. To put it another way, to emphasise only one skill of the many skills we have seems a little short sighted!

As such, we have re-branded ourselves UVd and the website will follow shortly. No, it really will! Watch this space.

Brilliant brilliant colour

Uvd re-design colour swatches

It is almost comical how long we have had a holding page where our website used to be, a true laugh or cry moment. In my wisdom I decided that taking it down would incentivize us to design and develop our new site in a prompt fashion………incorrect. Despite this there has been a recent spark of activity in this drawn out redesign – the colour scheme. Probably not the largest chunk of work in the entire process, i grant you, but still essential.

During our meetings quite some time ago we discussed where our main skills lie and what kind of work we would like to procure in the future. We performed some pseudo-branding exercises to try to discover the desired words/images/emotions we wished to evoke and associate with Ultraviolet (Uvd).  Although this was not guided by a branding professional I believe it was beneficial and has helped us at this stage to gauge what is and isn’t appropriate for the site aesthetically.

Due to our strong background in technical areas of digital media production and the associations with the name Ultraviolet we decided to keep in mind a theme of science when creating a logo, site visuals and colour schemes. I believe that discounting the purple shade, the cool greys and blue are evocative of this. Another reason for deciding on this schema is that I believe effective use of shades of grey/black are (if used correctly) very effective in web design.

Either way I think it’s winning. Kudos to Patrick our designer. Next we have the layouts to look forward to…………

Wordle – Clever Java Tag Clouds

Ultraviolet Blog - Tag Cloud

Lovely lovely words. Wordle is a java app developed by a guy from IBM. It generates “word clouds” from a sample of text you provide or generates it dynamically from your blog URL (with an RSS feed) or del.icio.us user name. Above is the the cloud from this blog. Ten points for spotting Climatron in there.

Search