(Yet) another version of Letraset Oxford

Whilst browsing dafont.com the other day, I noticed that (yet) another version of the classic Letraset Oxford typeface has been created, and this time it's another free (as in freedom) version.

The font is named Oxford-CP and was created by Diogene. It's licensed under the GPL with the font exception rather than the SIL OFL which I used to license my version.

The non-free version of Oxford, called Sportowy, which boasts some beautiful glyphs for things like @, is available here.

My version, which I called "Scene" in honour of the BBCtv schools programme that used the face for its logo, also features capital letters and Central European accenting and is available to download from here.

BBC Micro game Pipeline used Oxford

Ironically, after the huge amount of effort I put into creating it (see here, here and here), I still haven't actually done anything with my Scene font - but hopefully I'll get around to doing something with it soon.

Let's Go Nationwide

Recently I've been playing about recreating various SMPTE and custom made film leaders in Flash 8 and Inkscape. One of the most interesting for me, and one that reminds me of Blue Peter for some reason, is the BBC's own film leader. Here it is:

While working on film leaders, I've settled upon a hybrid Flash/Inkscape workflow in which I create the individual frames in Inkscape as Inkscape SVG files.

SMPTE Society Leader frames created as SVG files

I then export them all as EPS (Encapsulated PostScript) files so they can be imported into Macromedia Flash 8. You could export all the files from Inkscape by hand, but to save time I use a little Bash shell script instead:

#!/bin/bash
#
# Export all SVG files in a directory as EPS files

for i in *.svg; do
    inkscape $i --export-eps `basename $i .svg`".eps"

done

Then I import the EPS files into Flash and I'm ready to start putting the animation together.

Election 1970 - in Colour!

After seeing this, look what somebody very kind sent to me:

 Click to enlarge

Diamonds are for 1 minute 58 seconds

I've always had a fascination for the BBC schools diamond. In case you are not familiar with it, the BBC schools diamond was a mechanical model devised by Murray Andrew for use in the last two minutes of intervals before BBC programmes for schools and colleges.

I am ancient enough not only to remember it, but to have watched it as nature intended at primary school every week before a programme. I was always mesmerised by it, but my unimpressed teachers used to complain that it wasn't as easy to understand as ITV's schools clock.

The diamond mechanism itself is fascinating and it was very satisfying to work out how it worked.

The diamond animation as outlines in Flash

The four striped version of the diamond was originally only a static caption card, intended for use in place of the mechanical model in intervals less than two minutes in length.

I always wanted to see it being animated. Hence another lame mock that I produced, as always, in Macromedia Flash 8.

As I'm exclusively using GNU/Linux these days I exported the diamond from Macromedia Flash 8 as a PNG sequence. I imported that into the free software video tool Avidemux, added the music and exported the resulting sequence into an MP4 container with MPEG4-AVC video encoded using the x264 video codec and MP3 audio encoded using the LAME MP3 audio codec.

I find the overall effect is rather akin to seeing one of those 4x4 or 5x5 Rubik's cubes for the first time.

Anchor Cliff Michelmore

Regular readers of this blog will no doubt have been bored witless by my endless posts about the creation of a TrueType font based on the output produced by the BBC analogue character generation system Anchor.

Although I was very happy with the end result, I was aware that when compared to one famous example - the BBC's coverage of the General Election of 1970 - it didn't look quite right.

Here is an example image taken from this video - apologies in advance, as the quality is appalling:

Anchor used in anger, 1970

The characters looked fatter - squarer - than they did on my version. I was curious to know why.

Whilst browsing the internet for something else entirely I happened to come across a BBC .pdf file from January 1973 that explained what was going on:

"The addition of the lower-case facility has involved a change in the format of the display from 14 rows of 25 characters to 12 rows of 32 characters. This has been necessary to accommodate the descenders of such characters as 'y' and 'g' whilst preserving the appearance of the character set." BBC Engineering Design Information - 10168(1).JAN73.ECG.

So, here is how Anchor would look before January 1973:

Anchor, pre January 1973

And here is how it would look after January 1973:

Anchor, post Jan 73

And here is a gratuitous picture of Cliff Michelmore as, personally, I think you can't have too much Cliff Michelmore on your blog:

Click to enlarge

So, imagine you are doing something with Anchor.ttf on a 720 x 576 image that is supposed to be from pre-1973. In that case use Anchor at 41pt, stretched horizontally by 128% with 85% line spacing. And you mustn't use any lower case!

If you are doing something with Anchor.ttf on a 720 x 576 image that is supposed to be from post-1973 then simply use it at 41pt with 100% line spacing.

Inkscape to Flash 8

These days, if at all possible, I like to use Inkscape for creating vector artwork. At one time I used Macromedia Flash 8 for all my vector illustration work. But these days, if I have to create artwork in Flash it makes me feel like I'm being forced to write with my left hand.

There are also a number of things I can achieve easily in Inkscape that are harder to do in Flash. One recent example was when I was working on the animated menu for Simon Buckley's new website. I was given a signed off design as a bitmap illustration and was asked to turn the design into a vector animation in Macromedia Flash format.

Most of the design was very straightforward to achieve, but there was one part that was more fiddly. The name of the website was written in a font called Chalkdust, and it was fringed with a thick black outline. This is one of those things that looks simple to do until you actually try and do it in Flash.

The way I tackled getting an attractive vector outline for the Chalkdust text was to enter the Chalkdust text into Inkscape, turn the text into vector outlines and then use the Inkscape "Linked Offset" option to enable me to expand the text outline to the desired extent.

 Cleaning up Chalkdust in Inkscape

Chalkdust, like most typefaces, has very messy vector outlines with large amount of redundant nodes. This meant that the resulting expanded outline needed a lot of cleaning up and simplification - a job I could do very quickly with the node tool in Inkscape.

It's always worth making your vector outlines as clean as possible.  In the old days of dial-up modems this was because you hand to shave every last byte off of download times - I used to hand optimise everything I did in Flash to get Flash animations within bandwidth quotas set by customers. However these days it's because the more elegant your outline the better it looks (due to the vagaries of anti-aliasing routines) and the better it animates.

Cleaned up outline

The finished outline was soon cleaned up and ready for transferring from Inkscape 0.47 to Flash 8.

After some experimenting, I found that my favoured method of transferring vector Inkscape artwork into Macromedia Flash 8 is the Encapsulated Postscript or EPS format.


There is one important thing to be aware of when transferring between the two programs using this format. Take this Inkscape vector drawing as an example - it's 400 by 400 pixels in size.

400 x 400 pixel Inkscape drawing...

When imported into Macromedia Flash as an EPS it arrives as a vector drawing 320 by 320 pixels in size.

...becomes 320 x 320 pixel Flash drawing.

There is absolutely no way around this - Flash thinks EPS files should be 72dpi, Inkscape thinks EPS files should be 90dpi and neither program lets you do anything about it.

However, it's simple enough to use the Flash 8 Transform panel to scale all the EPS files you import into it by 125% to make up for the difference in dpi between the two packages.

Doing this becomes automatic after a while!

One final point to bear in mind with EPS transfers between Inkscape and Flash 8 - avoid gradient fills. These always seem to be imported as bitmaps in Flash 8. You will have to recreate any Inkscape fills again from scratch in Macromedia Flash so I never bother creating them in Inkscape in the first place.

The finished animated menu can be seen here. I've also written a blog post about my preferred method of getting my vector drawings from Flash 8 into Inkscape here.

Font Embedding - Better (12 Years) Late Than Never

Twelve years ago, when the internet was all shiny and new and I hadn't even heard of GNU/Linux, one of my favourite websites was the Microsoft typography website. One of the things I remember reading about on the site was a tool called WEFT (Web Embedding Fonts Tool). WEFT allowed you to embed fonts on your websites. This meant they were not restricted to using the fonts someone had installed on their computer, but could use any font you wanted. As someone who suffers from projectile vomiting at the merest glance of Comic Sans I immediately put trying out WEFT on my to-do list. And then forgot all about it.

Over a decade later I was reading the press release for Mozilla Firefox 3.6 and noticed that font embedding was about to re-enter the limelight. Mozilla Firefox 3.6 includes a support for a very similar system to WEFT for embedding fonts on web pages. It's called WOFF. So, being as curious and nosey as ever I thought I would investigate using WOFF.

But where to start? It turned out that from deciding to create a web-page using WOFF to the finished article took me the best part of a day of messing around, browsing, compiling tarballs and experimenting.

I decided I'd create a very simple web-page using one of my own fonts, Anchor. This is because there are a number of irritating legal issues around font embedding for web pages. In order to be able to embed a font on a website you have to have a licence to do this. The issues are explained very well in this article by Armand Niculescu.

Once I'd decided on a font, the next job was to create a WOFF file from Anchor. There are many reasons that you would want to use a WOFF file for font embedding rather than have your web-page link to your original font file. For instance a WOFF file is compressed, which saves download time. In addition, a WOFF file can contain only a subset of the characters or glyphs in a font that you actually use on your site which again can save a lot of download time on a site that uses several fonts.

Sadly, the simplest way to do this on GNU/Linux was download a windows binary file (an .exe file) and run it via WINE. WINE is a compatibility layer that allows you to run binary files intended for use on Microsoft Windows on GNU/Linux.

The tool I needed to run to convert font files to WOFF files is called sfnt2woff and I found some very good instructions on how to run and use this tool on Federico Moretti's blog. After creating my WOFF file, I could then incorporate it into a web page using the CSS @font-face declaration. All seemed to work well in Firefox 3.6 when I tested the resulting .html file from my local drive.

Success - my .woff works locally

However, when I was looking at Armand's Niculescu's blog entry again I realised that was not enough to ensure compatibility with most browsers. However, if I included a few more formats alongside my WOFF file, I could get the embedded fonts on my page working for 92% of browsers - which sounded good to me.

In order to make my web page work on the majority of web browsers I would also need to add a @font-face declaration that linked to a copy of my original TrueType font (.ttf) file for older versions of Firefox and the Opera, Safari and Chrome browsers.

In addition, to be on the safe side, I really needed to include an SVG font version of the font for use with the Safari and Chrome browsers. Creating an SVG version was simplicity itself. As I created the most recent version of the Anchor font in the free software tool FontForge, all I needed to do was use FontForge to export an .svg version of the Anchor font.

FontForge 2.0 File Export Dialogue box

SVG font created sucessfully there was one more format I needed to create - a Microsoft EOT file. An EOT file does exactly the same job as a WOFF file on Microsoft browsers. As WOFF is only going to be supported in Microsoft Internet Explorer 9 and later, for a site to work on Microsoft Internet Explorer 4-8 I'd need to create a EOT file.

My initial thought for creating a EOT file was to download WEFT from the Microsoft website and use that via WINE. However this failed miserably. But, as a consolation, I found that even Windows users found Microsoft's WEFT tool elderly, unintuitive and almost impossible to use.

Fortunately I found another tool on the internet - it was called ttf2eot and it claimed to do exactly what its name suggests. The bad news (simply because I'm lazy) was that the tool was a piece of C++ source code. That meant I had to download the build-essentials package and compile a binary myself. It took all of two minutes - such hardship!

Anyway, the file compiled beautifully and the tool worked first time. One line in the terminal (the tool needs the angle brackets around the source font filename):

./ttf2eot <Anchor.ttf> Anchor.eot

Was enough to create an eot file. The only thing that I found rather odd was my finished EOT file was bigger than the original TrueType font file!

So, I added all the formats into my @font-face declaration, tested the file locally and it worked. So triumphantly I uploaded my finished html file, along with my ttf, svg, woff and eot to my webspace using gFTP. And it failed miserably. 

Uploaded to my webspace - massive fail

Here was my CSS:

@font-face {
  font-family: 'Anchor';
  src: url('Anchor.eot');
  src: url("Anchor.woff") format("woff"),
  src: url("Anchor.ttf") format("truetype"),
  src: url("Anchor.svg#anchor") format("svg");
}

I couldn't understand why it failed - I thought I'd done everything correctly. But fortunately I had come across an excellent article by Paul Irish that explained exactly where I was going wrong. There are a whole host of gotchas with font embedding, and the order of statements in the CSS declaration is critical:

@font-face {
  font-family: 'Anchor';
  src: url('Anchor.eot');
  src: local('☺'),
    url("Anchor.woff") format("woff"),
    url("Anchor.ttf") format("truetype"),
    url("Anchor.svg#anchor") format("svg");
}

Was the only order that would get the @font-face statement to behave.

Success at last!

And then... And then... ...I found out that I needn't of bothered. A website called Font Squirrel has a nice tool that does everything for you plus more. In particular, it creates subsets of fonts for you so you can cut down on your file sizes and download times. You just need to specify the glyphs (characters) in your .ttf, .eot, .woff and .svg files that you actually use.

Font Squirrel also have loads of fonts that you can legally embed, and are hand-picked to ensure they are all good quality type faces.

Another good source of information is Milton Bayer's site, which explains about the CSS and XHTML needed to get WOFF working for those that may be unfamiliar with it.

Anyway, it was fun and I learnt a lot. The end result can be seen for real in the comfort of your own browser here:

http://www.kecskebak.co.uk/woff.html

I've designed a handful of fonts that can all be freely embedded in your websites. You can get hold of them from here.

Giro G hits Google

Google recently got a lot of criticism for "copying Microsoft's search engine Bing" in changing the background of their home page. But, if I remember correctly, they did this as an experiment once before long before Bing came along to showcase loads of Google commissioned "modern art". Although, that time, they didn't enforce a random work of "art" on you by default.

The pictures that Google offered up were so gaudy and obvious I thought I'd use one of my own, taken from an animated Granada Television close-down sequence that I produced using Inkscape:

Good Night

Google's homepage is so resolutely minimalist that it reminds me of Granada Television's ident throughout the 70s and 80s; the two were obviously made for each other.

Now all I need is some Derek Hilton...

Had the decorators in...

I've finally made my blog feel a little more personal. I call this theme "70s Regional News". It's not the world's most beautiful design, but it's not supposed to be. I wanted a shabby, tatty beige horror to remind me of shabbier, tattier beiger times.

There are Nutty bars and Spangles in the corner and if you're very good I'll let you have a Cadbury's Moose...

Dave Dunce Goes Gloss

At the end of April, I blogged about Claptraps - my friend testpilotmonkey's new computer game. Claptraps is a fiendishly addictive puzzle game written in Python using the PyGame SDL library.

I also noted at the time that Claptraps was a piece of free software - testpilotmonkey released it using Free Software Foundation's General Public Licence or GPL. This means that anyone is free to study or modify the source code and send copies of the game to their friends.

I felt that releasing something as fantastic as Claptraps under the GPL was an act of generosity that should not go unrewarded. As I don't have any money, I decided to donate some of my time instead.

The place I felt best able to help out was the graphics. Claptraps is a tile based game, with 40 x 40 pixel tiles which are stored as 32-bit Portable Network Graphics (PNG) files. testpilotmonkey had decided on a cartoon look for his graphics, with flat fills bounded by black outlines. Here is a screenshot of the game with the testpilotmonkey's original graphics:

Original graphics - Click to enlarge

I love these graphics, as they have bags of character and the animation is very pleasantly squishy and organic. But I thought it might be nice to take these graphics and see if I could make them a bit three-dimensional. To do this I decided to use a piece of free software called Inkscape. The reason I decided to use Inkscape, as opposed to a raster graphics package like The GIMP, was I felt cartoon-ish nature of the graphics lent themselves to be created in vector format. It also meant I could create one set of graphics that could be used at any size.

I made my canvas 40 x 40 pixels in Inkscape, for convenience. As far as guides were concerned, I just used two, one half way vertically and one half way horizontally which marked out the centre of the canvas for me. I imported the original graphics into Inkscape and used the Pen tool to trace over them. For each graphic, I created a separate Inkscape SVG (Scalable Vector Graphics) file.

As I was creating vectors to export to (rather small) bitmaps, there were a couple things I needed to bear in mind when tracing the original graphics to ensure good results. The first thing was I wasn't free to put black outlines anywhere I chose. The end result would be rather grey and muddy due to too much anti-aliasing being used on the exported bitmaps. To keep anti-aliasing to a minimum (and hence keep the graphics as clear and colourful as possible) I needed to ensure that the nodes for my lines and Bezier curves were on half pixel boundaries. The second was to ensure that all my outlines had a one pixel stroke width, and were completely black - sounds obvious, but easy to mess up.

One traced frog - click to enlarge

Once I had an outline for a graphic it was time to colour it in, and again it was Nancy Kominsky to the rescue. I used her technique of using three tones - light, medium and dark to fill each shape. Then, if necessary I'd add any highlights with light yellow and any lowlights with dark purple. The nice thing about Painting Along with Nancy in Inkscape is I don't have to put my spare colours into the fridge and cover them with cling film.

Incidentally, in case you think I'm joking about following Nancy Kominsky's advice, here's the Claptraps apple filled using a radial fill made up of my three tones - light, medium and dark red:

Where's the light coming from Alan?

And here are my three tones I used in the gradient fill editor :

Cadmium orange, vermilion and alizarin crimson...

Here is my purple lowlight and my lemon yellow and white highlight:

That's one teaspoon of purple, the colour...

And here is the finished apple - Nancy Style.

And no need to apply any varnish

And, just for you to compare, here are Nancy's apples:

Picture courtesy Rory Clark

So, after much colouring in but, sadly, no Alan Taylor to chat to while I was working, I had a finished set of graphics:

As seen in Fedora 13 Nautilus

And here are the finished graphics in place in the game:

Click to Enlarge

I was determined when working on the graphics that my input be as invisible as possible - Claptraps has bags of testpilotmonkey's character and I wanted to keep that. The graphics remain very much testpilotmonkey's, just coloured in slightly differently.

After showing testpilotmonkey my graphics, he said he'd like to use them in future releases of the games - which was very kind of him and made all the effort worthwhile. I'm hoping to spend more time on Claptraps and to return to it on this blog soon. In the meantime, why don't you download the game and have a play? You can get hold of it here.

Set Piece

A few months back Roddy Buxton asked if I could do him a favour. His son had a school project about "the 70s", and one of the things they were doing was making a 70s style news programme. As Roddy is from ATV land, that had to mean ATV Today. But in order to make the video authentic, Roddy wondered if I could recreate a section of the ATV Today set to key in behind his son on the video.

Reg Harcourt - ATV Today

I knew exactly the set he had in mind. It was the lovely beige one with an abstract geometrical design. If ever a set designer managed to capture the essence of the seventies current affairs in one set, this was this one. I managed to get a couple of pictures from Jase Robertson's site sub-TV.

At the time, I had mislaid my serial number for Swift 3D version 5, so I couldn't do this in 3D - which would have been the logical way to tackle this job. So, I fired up my trusty copy of Inkscape, and tried my best to muddle through using that.

All I did was take the best screen grab I had to hand (which, sadly, weren't as large or as clear as I would have liked) and trace one square section of the design.

Tracing the set in Inkscape with Margaret Hounsell

I then used gradient fills to create the 3D effect. I've found watching "Paint Along With Nancy" a great help with colouring in vector designs. I use Nancy Kominsky's technique of using three tones (light, medium and dark) and using purple for low-lights and lemon yellow and white for highlights if necessary. Nancy knows her stuff - it works!

Output from Inkscape

After exporting the resulting SVG file as a PNG I used the GNU Image Manipulation programme (otherwise known as The GIMP) to finish the job off. I adjusted the colours to match the image, blurred the image slightly so it would be slightly out of focus, added a tiny bit of HSV noise and then a very slight lens distortion completed the job.

After GIMP-ing, the end result

I've included the images I created at full size in this post, just in case you want to have a go at being Reg Harcourt or Derek Hobson and report on strikes at British Leyland in the comfort of your own home. Just click on them to enlarge.

Lolly Sticks

Another day, another video of a rather lame mock uploaded to YouTube. We're back to 4:3 again, and a short video a did to teach myself how to use Adobe Premiere Elements:

Before I bought Premiere Elements in early 2008 I'd never done any video editing before, so it was all very new to me. I did huge a number of videos to experiment and work out a good workflow to transfer my material from Flash or Fireworks to video. I recorded my work over and over again onto the same DVD-RW and then scuttled downstairs to the television to see how the results looked on a CRT television rather than an LCD monitor. As you can see from this video, I hadn't yet worked out things like interlacing or how to age transparencies properly.

Although the first BBC 1 globe symbol I remember from my childhood was the black and cyan version with the italic "COLOUR" lettering, the first BBC 2 symbol I remember was the striped cylindrical 2. I saw this countless times waiting for Play School on weekday mornings or Play Away - the strange oasis that appeared between boring black and white films - on Saturdays. BBC 1 and ITV were showing wall to wall sport at the time due to their regulatory obligation to provide programming for the hard of thinking. Channel Four didn't even exist. Play School mornings were usually accompanied by a cup of Mellow Birds made with milk. Despite being Julie Steven's favourite beverage, it never seemed to dissolve properly back then, so you'd get little brown bits on the top...

When the computer generated ==2== symbol replaced the cylinder on BBC 2, I never really took to it. The cylinder's animation was far more interesting, so I often wondered what would have happened if the stripey cylindrical 2 had been kept but updated. The end result, my "lolly sticks" symbol was created in Swift 3D. The animation does a very similar thing to the cylinder - the coloured stripes rotate in opposite directions - but to make it more interesting the camera does a 270 degree trip around the stripes as they do so.

Swift 3D - click to enlarge

One interesting thing about the lolly sticks symbol is that I created it at 400 x 300 in Swift 3D. As I was exporting it in vector format as a .swf it didn't matter what size it was so long as the aspect ratio was 4:3. Vector 3D is something that Swift 3D really excels at, although it's very good at raster 3D as well. After more experimentation I'd later scrub this approach in favour of working at 720 x 576 and correcting in advance in Swift 3D itself for non-square PAL pixels.

Thin hairline 2 in Flash

To get the striped 2 into Swift 3D in the first place, I drew it in Macromedia Flash 8. I drew it as a series of hairlines, and then turned the hairlines into thick rounded strokes.

 Exactly the same graphic, stroked in Inkscape

After doing this, I turned the strokes into fills, and exported the resulting graphic as an Adobe Illustrator file for importing into Swift 3D.

GNAT Flash - Click to Enlarge

The clock is my Macromedia Flash 8 version of BBC Engineer Richard Russell's computer originated GNAT (Generator, Network Analogue Time) clocks. The GNATs were used by BBC 1 and BBC 2 throughout the 1980s. There was even a rather nice yellow and blue Open University version for a few years. You can download a screensaver created using the final version of the GNAT software from Richard's site. Richard has also written an article that discusses the history of the GNAT.

Teacher's discipline problem #5435 - POW!!!!!!!!

The schools dots is again another one of my Flash 8 concoctions. This is the second version, where I finally got the font right! This, along with the clock, is the sort of animation that's very easy to do in Actionscript, but a real pain to produce a version you can export to use in video projects.

Henry Woolf was even better with Charlie than with Pinter

The slide was based on a BBC1 version I did around ten years ago now for the sadly soon to be defunct BBC Cult website. I simply traced a screen capture in Flash that the BBC supplied to me from the opening titles of the programme "Words and Pictures".

My treatment of the slide was very unsatisfactory - both in terms of the fading and blurring I used and the very bad banding that appears on the image. It looks very fake indeed, and one day I must get round to writing a post about how I would have gone about doing that job properly.

Just a note about the font - when I'm doing 70s stuff that requires Helvetica I tend to use URW++ Nimbus Sans these days. I'll explain why in a post about Thames Television some other time.

The music is from one of my favourite programmes - 4Square - and was composed by Ian McKim. The music was designed as a tension bed underneath a computer generated (Acorn Archimedes) maze game and made for a very exciting minute of television.

Anyway, technically a rather unaccomplished little video of another lame mock. But it brings back lot of memories and I enjoy watching it from time to time.

From Claptrap to Claptraps

Normally I use this blog to drone on about my own claptrap. However, today I'd like to use it to have a look at a friend's.

Level 1 - It's all uphill from here...

To be more precise, a computer puzzle game called Claptraps, written by "testpilotmonkey". It's one of the most joyfully bonkers and imaginative games I've ever played - the sort of thing Oliver Postgate would have come up with if he'd have been given a book about scripting languages.

The game itself was written in the language Python with the help of the wonderful PyGame SDL library.  If you've ever want to write a computer game for GNU/Linux, Windows, or Mac OS this combination is the place to start and indeed Claptraps will work beautifully on all three of these platforms and doubtless several more besides.

I think this game is really rather special for lots of reasons:

• it is released under the Free Software Foundation's General Public Licence or GPL. That in itself is a marvellous and selfless thing to do, particularly when you consider how much hard work has gone into the game.
• the quality of the music testpilotmonkey has composed to include in the game - I really enjoy listening to it.
• the graphics, which have a wonderful cut-out animation feel
• and, most of all, the standard of the puzzles. The game design is incredibly clever and the puzzles are fiendish but solvable with thought. That makes it one of the most rewarding games I've ever played.

I could talk about the game at length here, but why not download it yourself from testpilotmonkey's blog?

The game has come on in leaps and bounds since this video was made of an early demo version, but it's worth a look:

The gameplay is loosely inspired by the games in the Repton Infinity suite with dashes of Bonecruncher and XOR. However it has a personality all of its own, something which you don't get in modern games written by huge teams.

I'm hoping to do some work of my own on Claptraps if I get the chance over the coming weeks - in true GPL spirit I've been studying and modifying bits and bobs already which I hope to start sharing soon. The code is very, very clearly written and I'm looking forward to having a proper dabble with it enormously.

NB: As the game is still a work in progress, GNU/Linux users may find they need to append two lines to ClapTraps.py:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

Also, don't forget to right click on the Claptraps.py in the file browser, and go to Properties ➔ Permissions and check the Execute check box to Allow Executing File as Program. You'll also need to make sure you have the pygame package installed on your computer - but if you've installed GNU/Linux in the first place I'm sure you can manage this.

Windows users can just click on the .exe. I know nothing at all about Apples apart from the fact that Granny Smiths are my favourite and my mother's bramley crumble with custard is delicious.

Happy St George's Day

As I'm English, I thought I'd celebrate today with a video of my choice - my daughter speaking very good English even though she hasn't been there since she was eighteen months old:

But I suspect people reading this blog will be more interested in the first part of the video.

I've been playing with doing more work in widescreen in the past couple of years. The reason is simply that watching pillar boxed stuff annoys me. I always used to hate those letterboxed films they showed on BBC2 for film buffs with magnifying glasses when I was a kid. So as 4:3 televisions are becoming harder and harder to find and I have a 16:9 monitor I've been animating everything in 16:9 for the past couple of years - perversely I've got DVD's full of 16:9 presentation I've done in Flash from the 50s, 60s and 70s.

Flashy house building - Click to Enlarge

I animated the Playschool house animation from scratch in Macromedia Flash 8 and the BBC 1 South West globe in Swift 3D v5.0 - both at 720 x 576 for use as anamorphic 16:9 in Adobe Premiere Elements. The video was filmised in VirtualDub using the MSU Old Cinema plug in. I hope to have an example Flash animation of some kind filmised using OpenShot on GNU/Linux (I'll probably be on Fedora 13 by then) to compare this against soon - the options for filmising your work on this look very promising indeed.

The Whole Wide World in Swift 3D version 5

The BBC1 South West globe was animated at 50 frames per second, and I used that to create an interlaced 50 fields per second file in VirtualDub. The colour was keyed on in Adobe Premiere Elements. The announcement is actually Peter Macann (former Tomorrow's World presenter) and was from BBC1 South in Southampton.

The BBC1 caption was traced in Macromedia Flash 8 from a scan of the original BBC1 globe caption from BBC Graphic Designer Bob Richardson.

The Playschool music (the definitive Paul Reade version) has a voice over from the magical Brian Cant and the day is given to us by Australia's finest singer, Don Spencer.

ATV on the BBC

I have a YouTube channel called "stupidrubbish" where I put bits and pieces of video I've created as and when I get the chance.

The channel's name "stupidrubbish" comes from the rather unaffectionate term my wife uses to refer to television presentation. Her usual question would be "Are you working or are you doing stupid rubbish?". The answer would often be "Both." In Hungarian, the term translates to "hülye szemét" and sounds even ruder than it does in English.

Absolute bobbins, and I freely admit it

Amazingly, although it contains all sorts of bits and pieces I've poured my heart and soul into getting as accurate as possible, the most popular video on the channel is something I very nearly didn't upload at all, and did nearly 25 years ago. It was my first attempt to recreate some presentation on a computer and it was not done in Flash, or even on a PC. It was done on a BBC Master 128 computer in 1986, written in BBC BASIC and was the ATV colour zoom logo.

I hadn't seen an ATV logo in years in 1986, and wondered whether I would ever see one again. You can see from the animation that I couldn't really remember what the logo looked like, or even what happened in the animation, but I suppose it all adds to the charm. I planned the lightspots and the logo out on graph paper using a pencil and pair of compasses.

To draw the logo I used the Acorn Graphics Extension ROM (GXR) arcs (the GXR extensions were included in the Master by default), a GXR custom fill pattern and screen memory bank switching in order to animate the thing. I also used GCOL1 for mixing the colours using a bitwise AND in the lightspots and palette switching to allow me to animate on bits of the logo without having to wait to draw them.

A number of commenters expressed interest in the code, so here it is:

1REM The "ATV" logo

2REM by

3REM Dave Jeffery

10MODE2

20VDU23;8202;0||

30HIMEM=&3000

40*FX112,2

50*FX113,2

60PROCnext_setup

70HIMEM=&3000

80*FX112,1

90*FX113,1

100PROCcircles

110HIMEM=&3000

120*FX112,2

125*FX19

130*FX113,2

140PROCnext

150PROCletters

160END

170DEFPROCnext_setup

180CLS

190VDU23,2,&2A2A;&2A2A;&2A2A;&2A2A;

200MOVE600,500

210MOVE950,700

220PLOT173,250,700

230MOVE600,900

240MOVE250,700

250PLOT173,950,700

260GCOL0,0:MOVE600,700:PLOT157,600,892

270GCOL1,1

280MOVE600,300

290MOVE950,500

300PLOT173,250,500

310MOVE600,700

320MOVE250,500

330PLOT173,950,500

340GCOL3,1

350MOVE600,500

360PLOT157,788,500

370GCOL0,134:GCOL0,7

380PLOT133,600,500

390GCOL16,0

400GCOL0,129

410PLOT133,900,50

420PLOT133,600,688

430:

440c=1

450GCOL0,128

460FORbox=250 TO 958 STEP 8

470GCOL2,c

480MOVEbox,288:DRAWbox,900

490c=c+1:IFc=7 c=1

500NEXT

510GCOL3,15:MOVE600,700:PLOT157,600,888

520:

530ENDPROC

540DEFPROCnext

550VDU19,15,7||

551FORF=0TO75:NEXT

560VDU19,0,4||

570FORF=1 TO 6:VDU19,F,4;0;19,F+8,7;0;

580NEXT F

590FORF=1 TO 6:VDU19,F,3;0;19,F+8,3;0;: FORW=0TO100:NEXT

600NEXT

610VDU19,15,4||

620ENDPROC

630:

640DEFPROCcircles

650VDU19,0,7;0;19,8,0||

660COLOUR8

670Key=GET

680GCOL0,1

690FORloop=600 TO 792 STEP 8

700MOVE600,700:PLOT157,loop,700

710NEXT

720GCOL1,2

730FORloop=500 TO 692 STEP 8

740MOVE500,500:PLOT157,loop,500

750NEXT

760GCOL1,4

770FORloop=500 TO 692 STEP 8

780MOVE700,500:PLOT157,700,loop

790NEXT

800PRINTTAB(5,26);"IN COLOUR"

810FORwait=0 TO 1000:NEXT

820ENDPROC

830:

840DEFPROCletters

850GCOL0,128:GCOL0,3

860MOVE500,708:MOVE500+50,708+150

870PLOT85,500+75,708

880PLOT85,500+125,708+150

890MOVE500+100,708+150: MOVE500+150,708: PLOT85,500+150,708+150: PLOT85,700,708

900MOVE550,708+50:PLOT101,675,708+25

910FORwait=0 TO 1500:NEXT

920MOVE500,652:PLOT101,700,628

930MOVE575,628:PLOT101,625,528

940FORwait=0 TO 1500:NEXT

950MOVE500,328+150:MOVE500+50,328

960PLOT85,500+75,328+150

970PLOT85,500+125,328

980MOVE500+100,328: MOVE500+150,328+150: PLOT85,500+150,328: PLOT85,700,328+150

990REPEATUNTILFALSE

1000ENDPROC

If you want to run the code, why not pop along to BBCMicro.com, where you can get hold of a BBC Emulator to try this out for yourself.

If you run the code in an emulator (or on a real BBC Master 128) you'll notice I took a few liberties with the timings when I was editing the video together to upload to YouTube!

Hopefully I've got a bit better at recreating the ATV logo since then. A more recent attempt, in Macromedia Flash 8, is here:

Dydd Gŵyl Dewi Sant

I must admit glass scares me. Oh I see, you just give the impression of glass don't you?

Orbituary

I had finished creating my BSB Squarial font on December 16th. It was now the December 17th, the event was on January 9th, Rory hadn't yet received any BSB material from Kaleidoscope and time was getting short.

So, to make sure I had a fighting chance of getting an ident ready in time for Rory to use, I turned to the ever reliable TV-Ark site. I found some wonderful scans of BSB promotional material that I could use as source material. I started putting as much of this as I thought would useful into Inkscape.

The first thing I did were the channel logos - Movies, Now, Sport, Galaxy and Power Station. Due to the good quality of the source material I ended up being able to produce nice vector versions of these logos in Inkscape.

Five Inkscape BSB channel logos

I also used Google Image Search which sucessfully came up with some other source material I thought may be handy. At the fascinating Vintage Broadcasting site I found a fantastic IBA breakdown caption, which I recreated in Inkscape.

Inkscape IBA/BSB breakdown caption

...and a test card used for engineering tests. Again I recreated it in Inkscape.

Inkscape BSB Engineering Card

Another thing I found was the caption that was broadcast when BSB transmissions on the Marco Polo satellite ceased. Again here's my Inkscape recreation.

Inkscape BSB Closure caption

It was interesting that they used Friz Quadrata rather than the BSB corporate font for this. I suppose they must have been past caring by then!

Once I'd done all this I sent it all off to Rory in Inkscape SVG format so that he could use or edit any of the files I created if he needed to.

The good news was that Rory had received the BSB material from Kaleidoscope. The bad news was that it seemed to be mainly third generation VHS stuff. This is a nightmare source material for recreation because the VHS format chucks away so much picture detail and colour information that recreating anything from grabs of VHS material is slow, frustrating and largely down to guesswork.

However, Rory did send back ident grab of a BSB logo which was very handy, and which I duly recreated in Inkscape. The letters are a bolder weight of the BSB font than the one used in the caption below it, so I drew them from scratch.

Inkscape BSB logo

The coloured ring in the BSB logo is quite interesting. To do this I created a coloured background that was made of a red, yellow, green and blue fills overlayed on top of each other and grouped into a single object.

Inkscape BSB logo with the ring mask unset

Then I created the shape of the ring, and used that as a mask over the coloured background.

My final port of call was Mike Brown's excellent mb21 site. The mb21 site contains an extensive library of scans historical documents related to UK Broadcast transmission. What I was after was the famous BSB testcard complete with the girl who won the newspaper "be a the satellite test card girl" competition.

I created the testcard with a green circle in the centre in place of a photograph and a Kaleidoscope logo in place of a channel logo. The green circle was so that Rory could key in whatever he wanted.

Inkscape BSB/Kaleidoscope test card

Once I had done this, and sent it to Rory I had done about all the still images I usefully could so I couldn't delay doing the animated ident in Flash any longer. I still had no audio too, but I decided I'd start creating an ident anyway and hope for the best.

After Channel 4 burst onto the scene in 1982 with its famous CGI blocks logo there had been a glut of shiny plastic and metallic 3D shapes whizzing about the screen in television presentation. That meant that by the time BSB came along just seven years later that sort of thing was all old hat. What was now in vogue was creating lots of soft fluttery layers of images on top of each other with subtle lighting changes.

This actually suited me, as I don't have my copy of Swift 3D here in Hungary with me, so I couldn't have created something very three dimensional anyway (although if I had had Swift 3D my finished BSB ident would have been much nicer).

The brief from Kaleidoscope was to create an ident with the BSB logo and the legend "The Quest Continues..." underneath it. Obviously thoughts of space and Star Trek and Dr. Who came to mind.

"The Quest Continues..." text would be easy - I'd simply zoom it into view with a trail Tyne Tees 1979 stylee. Clichéd, naff and typical of me...

Tyne-Tees style text zoom

For the background I used a nice picture of Pleiades star cluster that I found on Wikipedia. I'd used this before for a Rediffusion Christmas ident that I'd recreated for Transdiffusion. You can see it below, behind the Rediffusion ad astral logo - you'll probably have to click on the image below to see it.

Flash 8 Rediffusion Xmas recreation

One of the things I wanted was to make a nice form-up of the diamond shape around the BSB logo that represented the BSB "squarial" receiving dish. I also wanted to make this a bit kaleidoscopic, in honour of the fact that the ident was being done for Kaleidoscope.

I decided on the simple device of making the sides of the box zoom in with coloured trails using Flash motion tweens.

I did an early test with solid colours - and this looked all wrong. It looked like a 1970s cel animated ident.

Rather 70s...

However, with some gradient fills and some alpha transparency it suddenly looked all right.

What a difference a fill makes...

Rory sent some audio and a genuine BSB Galaxy ident - this was handy because I hadn't actually seen any real BSB presentation at this point.

I realised that I needed to make the ident longer, and I also needed to add some more elements to layer it a bit more and make it a bit more "Lambie-Nairn" than "Lamey-Dave". I came up with some ribbons accompanied by Galaxy-style five-pointed stars.

Animating the ribbons in Flash

These were simply animated using shape tweens (shape morphs) in Flash. As well as tweening the shape of the ribbons, I anmated the gradient fill inside them to simulate the lighting effects. I used primary and secondary colours rather than the subtler shades that Lambie Nairn used as I wanted to get over the idea of "television".

Completed ribbons layer

Again, drawing the ribbons in Macromedia Flash 8 was a horrible job and every second of doing it made me miss Inkscape terribly. Using Bézier handles in Flash 8 is fiddly and unintuitive and I can't believe how much work I actually did using them!

I could have used Flash 8 Professional filter effects in my ident, which would have allowed Gaussian blurs, compositing effects etc. and made the end result both more pleasant to look at and created an effect more faithful to the genuine BSB idents. However I decided against this as if I had relied upon them and Rory couldn't import them his end we would have been stuck. I didn't have time to post him a DVD of an exported video file from Flash.

Rory, as always, immediately spotted what was wrong with my ident and added some beautiful stars that slowly moved towards the viewer, which made all the difference to the finished product. And here it is:

The finished BSB "Quest" ident

I'm really, really pleased with the way the finished ident turned out. My comfort zone is doing material from the 50s, 60s and 70s so I was really dreading doing a job that was supposed to evoke the late 80s. So to get anything approaching half-decent was a huge relief.