Repton: The Lost Realms loading screen

After I created the artwork for "Repton: The Lost Realms", Dave Moore of Retro Software asked me if I would create a loading screen for the BBC Micro and Acorn Electron versions of the game. Initially the brief was quite loose - he thought we needed a Mode 5 screen for the cassette versions and a Mode 1 screen for the disc versions.

My cover artwork for Repton: The Lost Realms

On a BBC Micro or Electron, Mode 1 and Mode 5 are both four colour screen modes. The difference is that in Mode 1 the resolution is 320 x 256, whereas in Mode 5 the resolution is 160 x 256. However, both images are the same size because in Mode 5 the pixels are twice as wide as they are high. Due to its lower resolution, Mode 5 uses half the memory of Mode 1 so will load far more quickly for those using cassette recorders.

My first thought was to create the Mode 1 screen, and to use the excellent BBC Micro Image Converter software by Francis G Loch. This is an application written in PureBasic that takes image files (bmp, jpg, etc.) and downconverts them into the native screen display formats of the BBC Micro. To aid you in doing this it offers an almost bewildering array of image processing options specifically tailored for getting modern images into BBC Micro format. It can  also takes BBC Micro screen dumps and convert them to modern image formats.

BBC Micro Image Converter copes with anything

I use Ubuntu Linux, which means I have to run the Windows binary of the BBC Image Converter under WINE. I've found the operation of the program under WINE to be problematic if you don't export import and output images from and to the WINE "C:\Program Files" folder. It also seems happier with being fed bmp files than pngs under WINE.

Inspired by Michael "Mic" Hutchinson's excellent loading screen for the disc version of Repton Inifinity, I decided to use the same Red, Black, White Green palette. I was very pleased by my early results - particularly the way the brown came out on the safe. However I hadn't left any room for branding and so on.

My first try in BBC Image Converter

So I decided to create a version that had an area at the bottom that could be removed in the same way as the version on Repton Infinity disc for loading messages etc.

My rejected disc loading screen

I showed Dave this version and he had a number of reservations - the main one being that the loading screen in Mode 1 didn't really grab him at all. He wanted something more colourful for the disc version, and he suggested trying Mode 2. Mode 2 is identical to Mode 5, apart from the fact you can use eight colours.

The first thing I did was to create a screen in Inkscape that was 320 x 256 pixels that was set out exactly as I wanted to my loading screen to look. I would use this to feed into the BBC Micro Image Converter.

The image I made to feed into the BBC Micro Image Converter

When I imported it, the results were excellent. In fact, the results were too good. Although obviously I needed to retouch here and there to tidy up the writing and the balloon strings I was overwhelmed by the feeling that really I should be producing something that was done by hand on a pixel editor - not put through some ingenious image processing we could only dream of in 1987.

All it needs now is for me to make it a bit rubbish

Therefore I fired up "The GIMP" and tried to add a sort of "hand designed" feel a pixel at a time. I was quite aware that what I was doing wasn't as good as what the BBC Image Converter could produce, but the idea was to get a "retro" feel.

Final image after I gave it a "hand made" feel in The GIMP

I showed Dave Moore and he was happy with the Mode 2 screen, so the next job was to produce the cassette loading screen in Mode 5.

When it came to creating a Mode 5 screen, I decided to convert the eight colour Mode 2 screen to a four colour Mode 5 screen by hand, instead of running through the BBC Image Convertor again. This was because I wanted to keep the two loading screens as close as possible to each other in appearance.

I reduced the colour depth by hand in The GIMP

Dave was happy, so that was my first two loading screens for Retro Software done and dusted.

Repton: The Lost Realms is under development by Retro Software. Repton name used by permission of Superior Interactive.

The BBC Image Converter is currently released under a non-free licence but it's free as in beer to use for commercial or non commercial uses. You can look at a number of the PureBasic routines Francis wrote for it here.

As Advertised...

The Acorn World show is still on today, and one of the things you'll be able to see there are some rather retro looking adverts for games from Retro Software.

Dave Moore always liked the Superior Software adverts of 1984-1985 vintage. In particular there were two styles he liked. The full screen blue version that advertised one game:

Vintage advert for Matthew Atkinson's Tempest

And the "split" ad that advertised two games:

A vintage advert for two of Superior's games

He wondered if I could do something similar in Inkscape for him to use as promotional materials at the show. The job turned out to be quite straight forward as I had all the things I needed. I had created the svg of the Retro Software logo as well as the original cover artwork for Zap! and The Krystal Connection.

Here's my rendition of The Krystal Connection:

I like the way this turned out

And here is my "split" ad:

Not my rubbish "Zap!" artwork again...

The main thing I had to watch was keeping the colours muted, and again the Tango icon palette was my friend here. I used it to create the artwork for The Krystal Connection and I've become rather fond of it. The font was Bahaus - it was difficult to resist adding the Access credit card logo though!

Acorn World Show

I've just noticed Joel Rowbottom has published a picture of a Master 128 running my Acorn World teletext screen at the Acorn World show.

 

Joel Rowbottom / CC BY-NC-ND 2.0

As you can see, I added (and animated) the BBC Microcomputer owl logo, and the Archimedes logo to the bottom of the screen. Here's the finished screen:

I wrote a BBC BASIC program to make the owl blink

I'm really glad the screen got used in the end.

Round Spherical Objects

With the addition of things like filters, the boundary between vector art and bitmap art is getting fuzzier and fuzzier all the time.

To put this to the test, I decided to have a go at recreating in Inkscape something that was done on card using an airbrush to see if I could create a piece of vector art entirely in SVG format that looked like a piece of bitmap art. The piece of artwork I decided to use was taken from the Central Independent Television styleguide (many thanks to Roddy Buxton for giving me a scan of his copy), and is their colour logo from 1982. The most useful thing about the style guide illustration is that it contains a grid, precisely so that other people (like me!) can reproduce the artwork from scratch at a future date if necessary.

The original image, taken from Central style guide

The version of Inkscape I used was an early build of 0.47. The first thing I tackled was the border around the sphere. To be honest, it was the centre of the sphere I really wanted to tackle, so I didn't spend much time on this at all, and did it as two gradient fills (blue and black) one on top of the other. I may well go back and revisit this at some stage.

The next job was to tackle the first colour. I started with the blueish red at the top of the sphere, and drew the rough shape of the red as a vector shape:

Red area added

Then I applied a filter. I made my own filter, which I imaginatively called "central" to do this. The results are shown below.

Red area filtered

As you can see below, my filter is actually nothing more than a Gaussian Blur.

This is where all the magic takes place

The "air brush" effect I was after comes from the Standard Deviation, which makes the softness slightly random.

Next I added yellow, on a separate layer, and applied my "central" filter. However, it doesn't quite look right.

Yellow added on a separate layer

The trick here is to use "Multiply"' to Blend Mode to blend the layers containing colours together. Then the yellow mixes with the red to make orange:

Multiply blend mode makes the yellow and red orange

Then, if you carry on for light blue and purple (you only need four colours) then you get the familiar Central coloured sphere logo. So there you have it, an "air brushed" Central logo which is entirely described in an SVG file.

Scan on the left, my entirely vector SVG version on the right

And of course, the nicest thing is the entire logo SVG is only 9.3Kb - and that's uncompressed and without the Inkscape editor information removed!

Now I can have fun making captions like this one

Mountain Panic Poster

Mountain Panic is a new arcade adventure for the BBC Micro based on At the Mountains of Madness, a novella by H.P. Lovecraft. It's being programmed by Dave Footitt for Retro Software, and it's shaping up to be really quite something.

And it's not only the game that's stunning. The cover artwork by Roger Coe and Chris Hogg is as well. So stunning in fact that Dave Moore of Retro Software naturally wanted to produce an A2 poster of it to use at the Byte Back retro gaming show that took place at Stoke-on-Trent in March.

 

Roger Coe and Chris Hogg's superb artwork for Mountain Panic

However the artwork presented Dave with a number of difficulties. It was a 1053 x 744 png file, which was too low a resolution for an A2 poster. Although the painting actually scaled well, the lettering didn't work at all scaled up to A2 - and it was burnt into the image. So he asked me if there was anything I could do.

After I had a look at the image, I decided the only thing to do would be to create the Mountain Panic lettering as an .svg, which would allow its use at any size, and paint out the lettering on the original artwork in The GIMP.

The Mountain Panic lettering was easy to produce in Inkscape; basically it was a simple hand tracing job.

Lettering in vector format in Inkscape

Then I turned to the painting - it took me a couple of hours to paint out the Mountain Panic lettering in The GIMP. The hardest part was painting out the letter C that went over the mountain. Dave also asked me to extend the image downwards to the extent of the A2 page as well.

Lettering all painted out in The GIMP

You can download a demo of Mountain Panic that will work on a BBC Micro emulator (or a real BBC Micro!) from the Retro Software website.

The finished poster

Repton Thru Time

Back in the 1980s, when I had a BBC Model B running Acorn MOS instead of a PC running Ubuntu, I used to be a very keen Repton player.

If you haven't heard of it, Repton is an engrossing puzzle game that also contains arcade elements and it seems to appeal equally to people of all ages. My youngest daughter Mary is 6 years old and a particularly keen player.

In 1986 the third Repton game was released and it was my Christmas present from my parents that year. Although Repton 3 wasn't my favourite Repton game (that was always Repton 2) it did allow you to design your own screens and, even better, redesign the game characters.

I soon became a keen Repton character designer, and this obsession held when I received into Repton Infinity. But I never showed my screens to anyone else at the time. I didn't even know another BBC user with Repton!

The Repton 3 Editor

I used to particularly look forward to summer holidays and half terms when my Dad would bring home a BBC Master 128 which meant I could flip between the editor and game by pressing the break key. This small improvement speeded up designing Repton screen sets enormously.

In the middle of last year, on the Stairway To Hell forums, Acorn enthusiast Andrew Weston announced that he was putting together a website of all the non-official Repton levels that people had designed over the years. I mentioned that I had some but they were on 5.25" floppy disc and I had no way of transferring them to a BBC Micro.

One of the forum administrators, "Samwise", offered very kindly to transfer my discs to Emulator disc images that I could run on my PC. And, by return of post, I had my Repton 3 levels (and many other things beside) working on BeebEm on my PC.

Not all of my levels were on the discs I sent to Samwise, but the three sets with the best graphics were (some of my better level designs will have to wait for another time).

I sent the levels off to Andrew and he added them to his website and, after that, things seemed to take on a life of their own.

First came the offer from Dave Moore of Retro Software to design graphics for their forthcoming release "Repton: The Lost Realms".

After that the person who is undoubtedly the world's best Repton player, "Michael S. Repton", reviewed my levels and was very kind about them indeed. Not only that, but he produced videos of him completing some of them and added them to his YouTube channel.

My aim, back in the late 80s was to design a "Round Britain Whizz" set of Repton 3 levels, with 5 sets set in different locations around the country. I designed three of the sets.

First there was a farming set based on the farm I grew up on in Somerset.

There's the old BP oil can we had in the shed, my goat Timmy, the farmhouse, the Dutch barn, lots of barbed wire, fixing broken bails with binder twine and chasing errant cows into the right fields.

The next set was London - based on the Palace of Westminster. I always enjoyed visiting London as a child, I loved the tube and Oxford Street and the sights.

It contains lots of clichés of London - rain, American tourists, bobbies on the beat, portraits of the Queen and mugs of tea. The fungus in this set was supposed to be "the growing unemployed".

And finally there was Rovers - based on Coronation Street.

Rovers, running in BeebEm

Again, a lot clichés in this one - whippets, terraces, dark satanic mills, Hilda Ogden, Keir Hardie's cap and tellies tuned to Granada.

Michael also pointed out something I didn't know - my screens had been converted to PC Repton 3 format by Richard Hanson of Superior Interactive no less! Incidentally, if you've never seen them, the Superior Interactive PC versions of Repton are really quite something, and are well worth anyone's money.

The interesting thing about all this to me is that once you make your work available to others it takes on a life of its own that's wonderful to see.

Obviously other interests and schoolwork got in the way and I never actually completed my level sets but I'm hoping that one day I'll get the chance to go back and finish them all off. Maybe even for "Repton: The Lost Realms".

Museum Piece

It's an extremely strange feeling to know that something you've worked on is in a museum...

Teletext

The Acorn World show is taking place on 12-13 September 2009 and I've done several of bits and pieces for it. One run of the mill job was that I recreated the Acorn World logo as an .svg as organiser Dave Moore only had it as a small bitmap.

My svg vector Acorn World logo

However, after that I was asked to do something a bit more unusual. Dave wanted to have a real BBC Micro show a selection of pages of information to people arriving at the show, and asked me if I could do something in teletext Mode 7.

Creating teletext graphics is quite fiddly as there are numerous limitations you have to be aware of - if I hadn't done a lot of teletext work back in the 80s on my Beeb (mainly lame mickey takes of Ceefax and Oracle) I would have found this job tricky.

The teletext mode consists of 25 lines of 40 characters. As far as graphics work is concerned each character space is made up of a grid of 2 x 3 pixels. That gives you an effective resolution of 80 x 75 pixels. You are limited to 8 primary and secondary colours. However, each character square can only hold two colours (foreground and background) and if you want to change one of the colours (either foreground or background) you need to have a blank square to hold the colour change.

The first thing I did was take export my Acorn World logo from Inkscape as a bitmap. I imported it in The GIMP and convert it to an indexed palette consisting of black, red, green, yellow, blue, magenta, cyan and white. I already had this palette handy as it's the standard one I use when creating BBC/Electron loading screens.

Next I reduced the size of the image to 80 pixels in width. After that I then created a grid using guides on the image spaces two pixels apart horizontally and three pixels apart vertically. This corresponded to character squares on the image, which is very important. You need to see easily where the character boundaries are in order to work out where you have blank squares in which to change colour. It also helps you create the artwork on a BBC Micro.

The first character space had to be black, as that would be where I would change the graphics colour to white. I also had to make sure that the green Acorn did not overlap any character square used by the black writing - this would have been impossible to render in a teletext mode.

All ready to enter on a BBC Micro Emulator?

One special difficulty of this screen is that you cannot do black graphics on a white background in teletext mode on a BBC Micro (although teletext enabled TV sets can do this). You can only do white graphics on a black background. This may sound odd, but only being able to do the latter makes it much more difficult to change colours.

For instance, I had no white background when I came to do the green on white acorn, as the background for the "Acorn" text was black. This meant I needed two colour changes (one for the foreground and one for the background) and this takes two character squares. The Acorn in the picture shown above needed to be shifted right by a character square to allow room for this.

Next I needed to get my design into a BBC Micro. I'm not lucky enough to have a real BBC Micro here in Hungary, so I use the excellent free software BBC Micro Emulator BeebEm. Sadly, on Ubuntu Linux, I have to run the Windows version under Wine as the GNU/Linux port has been rather neglected.

Back in the 1980s I used to use a teletext editor called "Teditor" by Jim Notman that I typed in from a program listing in The Micro User (Volume 2, Issue 6). However, these days I use a program imaginatively called "Teletext Screen Editor" that I got from a link in a thread on The Stairway To Hell forum. It's a particularly good editor as it has something called "Graphics Mode". This means that the letters QW, AS and YX act as toggles for individual teletext pixels in a character square. This is a huge help.

When using a BBC Micro utility you really miss modern niceties like auto-saves and multiple undos! Therefore, in case of accidents I use the BeebEm "Quick Save" save state function to save my work regularly.

The finished result in the editor

All I have to do in the teletext editor is "type" the screen in using my GIMP image as a guide, and send off a BBC Micro disc image to Dave to load onto a real BBC Micro.

Test cards and Tuning Signals

One of the best ways of improving your skills with a vector graphics editor is to try and produce a test card using one. Producing test cards helped to hone my skills in Flash enormously, so I thought it was about time I tried to make one up in Inkscape to see how I got on.

The card I chose was the original BBC/ITA/BREMA Test Card D, from 1964. This is because I had a very good quality scan of an original held in the Transdiffusion archive.

One of the things I found different was that in Flash I often used to set the "origin" of my drawing at the centre of the screen. In Inkscape I couldn't do this - the origin is always the bottom left hand corner of the document. Of course, what I could have done was create my drawing with the origin at the centre and then positioning it properly in the document at the end, but I didn't think of that!

The main thing I got out of the exercise was that in Inkscape the "Align" panel really is your friend. It makes positioning regularly arranged shapes really easy. Most of the work in this picture was done by simply drawing shapes and then arranging them one of the numerous Align options.

The gratings (the stripey bits) in the centre of the card are simply boxes containing reflected gradient fills.

Completed "Inkscape" Test Card D

After doing a test card, I decided to have a bash at a tuning signal. The one I particularly wanted to try was the ITA "Picasso" card. This was very quick - it took no more than an hour to complete.

 Picasso in Inkscape

However, once I'd completed it I wanted to add some captions to it, and this is where the problem started. The original issue of the Picasso card was captioned in a weird mutant grotesque font. No font I had or could see available to buy really matched it, so I decided to make my own in Inkscape and FontForge using pictures of as many genuine Picasso cards as I could as reference material.

 The "Picasso ITA" font

Then, all that was left to do was a bit of what my friend Rory Clark calls "distressing" in The GIMP and I was all done.

Click to enlarge

I've released the font under CC-BY-SA and it is available to download from here.

Repton: The Lost Realms artwork

Some time after the release of Repton 3, Paras Sidapara started work on "Repton 4" for the BBC Micro and Acorn Electron, a new Repton game with several novel features. When Repton Infinity came along the game was reworked as a new game, Cyroid:X, before being dropped completely.

Paras's Repton 4 game was thought lost until a year ago when it was recovered from an old 5.25" disc. Development on the game resumed, and Retro Software got permission from Superior Interactive to release the game for the BBC Micro and Acorn Electron. The project was retitled "Repton: The Lost Realms" in order to avoid confusion with the Repton 4 game in Repton Infinity and Superior's Repton 4:EGO game for the Archimedes.

Dave Moore of Retro Software approached me and asked how I would feel about trying to come up with some cover art for the game.

I bit his hand off. Repton was a bit of an obsession to me when I was growing up, and no Christmas was complete without me receiving the latest Repton release. I spent hour upon hour playing, designing screens and designing graphics. The game itself looks like Boulderdash superficially but is a very different creature to play - it's more of a logic puzzle and attracts large numbers of chess players.

The first thing I did was to doodle on the back on an envelope whilst I was on the phone:

The Scream

The Repton in the sketch owes more to Edvard Munch than Tim Tyler, but it showed roughly what I wanted to do. My idea was a bit like "The Secret Garden", with Repton opening a door and finding fantastic "lost realms" inside. Doors are also a feature of the game itself, so it seemed the obvious thing to do.

I chose to produce the artwork in vector format. This was because as we planned to print everything from small tape inlays to A2 promotional posters from the artwork. This meant I had to export 600dpi bitmap images from my work, so vector artwork seemed the best way to go. I chose Inkscape as I'd heard it's the best vector artwork package available, it runs perfectly on Ubuntu Linux and because it saves artwork as, svg, a completely free format.

The original Repton artwork was done by Ellis Ives Sprowell Partnership in Wakefield. They gave Repton a very strong brand image so all I had to do was follow their lead and not mess it up. The REPTON logo was traced in Inkscape from a scan of the advert for the original REPTON release to get it as accurate as possible. The subtitle was in the font Eras, just as it was in the original releases.

As this was my first major project in Inkscape I started simple. Just outlines and solid, non-gradient fills. I drew Repton, a couple of doors and a transporter and then sent it to Dave and Paras.

Start off simple

Paras's wife seemed fascinated by Repton's bum, but apart from that everyone was happy so I decided to explore flood fills and shading.

Gradient fills gave me endless trouble in Inkscape for a long time. This is because having been so used to the way Adobe Flash handled gradient fills: creating them in a dialog box. Therefore I simply assumed I was supposed to use them the same way in Inkscape and it gave me endless headaches - creating gradient fills using the dialog in Inkscape is for masochists. It wasn't until after I created the botched artwork for "Zap!" I finally worked out the "Inkscape" way to handle flood fills - using the gradient tool and the mouse - and never had a problem with them again.

Anyway, taking about three times as long as I needed to, I finally created a shaded image. I also tried some blurring and glowing too, and was happy with the results so far. The idea is that Repton is in darkness but lit by light coming from the transporter. I had to fight a bit for this with Dave as he understandably wanted everything light and bright to make his posters and packaging eyecatching, whereas I wanted the lighting to be more moody.

I wish I had known what I was doing...

I chose cartoony black outlines for the poster, to match the original Repton artwork, and also tried hard to make my Repton character look like the Repton in the original artwork.

Next, I needed to create all the other game characters eminating from the "lost realms" doorway. Because of the need to create cover artwork of varying aspect ratios for cassette, disc, posters and in order to make life simpler I created each of the game characters in a separate Inkscape file. That meant I could put the picture together at the end. This saved me hours and hours of work in the end, as the final composition was a result of a lot of too-ing and fro-ing between Dave and myself.

The individual characters took between an hour and four hours to create, the crown taking the longest. Many of them are deliberately based on the original artwork for the Repton games - for instance the diamond, safe, boulder and cage. I did this to underline the fact that the game is part of the same family as the rest of the Repton games. I'm particularly pleased with the way the safe turned out.

Bunch of dodgy characters

The spirit gave me the most trouble as it's a very difficult thing to portray in a "cartoon" like way. Look at the spirits in the previous Repton artwork to see how tricky they are to do justice too. In the end I based the spirit on Matthew Atkinson's Repton 3 design. I also had trouble with the egg - my first attempt looked like "a yellow finger nail" according to Paras! Incidentally, you may notice a fly agaric - I've always liked toadstool fungus in Repton, but Paras and Dave vetoed the idea.

After abandoning my idea of a brick wall (like the one in my pencil sketch), I'd originally intended the artwork to be on a black background, but Dave Moore suggested a green gradient fill, which worked out very well indeed. And with that, it was finished.

The end result

The final artwork worked out very well - as a first major project in Inkscape I'm quite proud of it. It has the Repton feel that I was after and also shows off the new features of the game prominently. Dave Moore told me he asked Richard Hanson of Superior Interactive if he would have used my artwork at the time. He said "Yes", which put me on a high for a week.

Contributing to an officially sanctioned Repton project of any kind makes you part of BBC Micro history and I'm very proud to have contributed to a real Repton game - it's a long standing ambition fulfilled.

Repton: The Lost Realms is currently under development by Retro Software. Repton name used with permission from Superior Interactive.

Telefusion Yorkshire

A friend of mine, Greg Taylor, went freelance recently and started a new company. When he told me he had registered his company as "Telefusion Yorkshire Ltd", the name was immediately familiar to me.

Telefusion was a sucessful TV rentals business in the 1960s who were based in Blackpool, Lancashire. By the late sixties they decided to copy their TV rentals rivals Granada and Rediffusion and diversify into television broadcasting. They set up a subsidiary called "Telefusion Yorkshire Limited" and successfully bid for the new ITA Yorkshire franchise in 1967. Of course, Telefusion Yorkshire Limited became better known by the name it went on air with: Yorkshire Television.

Several years ago I had asked a friend of mine, Robin Carmody, if he could find a real Telefusion logo for me, and he came up trumps:

A real Telefusion logo

When Greg told me about his new company I forwarded him the example Robin had sent to me as I thought he would be interested to see it. He was and replied "You can draw it for me if you like!". I couldn't resist, so I fired up Inkscape:

My .svg version

Greg then asked if I could create something incorporating the word "Yorkshire". I did this in Inkscape and then distressed it in The GIMP. What I did was add scratches, glow, gaussian blur, lens distortion, rotation, noise, made the lightness of the background uneven and so on.

Add Dorothy Sleightholme to taste

After creating this rather "retro" logo in Inkscape Greg then asked if I could make something a bit more up to date. Eventually, after playing with Inkscape 0.47's filters and an extreme lens distortion in The GIMP I got the TSW-styled image I was after.

Where's Wil Malone?

And this week, I was delighted to see Greg is using it on this website. Best of luck with your new venture Greg - and careful where you go with that pointer!

The Krystal Connection

On the 12th September, Retro Software are going to release a new game for the BBC Microcomputer at the Acorn World 2009 show. The game is called "The Krystal Connection". It was originally written by Stephen Smith back in 1986 and was going to be released by Melbourne House.

The game didn't have a loading screen or any cover artwork, so Dave Moore of Retro Software asked me to create some.

The game is going to be released on cassette, 5.25" disc, 3.5" disc and also as an emulator image (for use on BeebEm, B-Em, etc.) on CD ROM. The packaging for each of these formats has a different aspect ratio; some are square, some are rectangular. This meant I had to create one piece of artwork that would be suitable each of the various formats and also work as a loading screen on the BBC Micro.

When I designed covers for Dave before I started with the packaging artwork, and then used Francis G. Loch's BBC Image Convertor software to convert this to a loading screen. Although this produces excellent results, the trouble is that the resulting artwork looks too good - it does not have the retro feel of a piece of 80s BBC art done by hand in a pixel editor, probably using a keyboard.

This time I decided I would start with the BBC Micro loading screen and then base the cover artwork on that. There would in fact be two BBC Micro loading screens. The cassette version would be Mode 5, which is limited to four colours whereas the disc version would be in Mode 2, which has an eight colour palette.

I decided to start with the Mode 5 loading screen. As usual I'm working on Ubuntu Linux (Jaunty Jackalope at present), and to create the loading screen I used The GIMP (version 2.6). As well a being limited to four colours, Mode 5 is made up of 160 x 256 rectangular pixels which are twice as wide as they are high. To cope with this, I use a 2 x 1 pixel grid in The GIMP and created a custom brush that is 2 x 1 pixels in size.

For the loading screen I also have to reserve some space for the tape loading messages (I use a guide to mark out the bottom of the area I can use, which is 208 pixels from the top of the screen.

The thing I usually get wrong is perspective, so for The Krystal connection I started out by laying Paths down using The GIMP's path tool. This allows me to get the perspective of the scene right in rough - it's like doing a pencil sketch that you can see at any time. As you can see, I still got the perspective completely wrong!

Paths created with The GIMP's Path Tool

Now it was time to do the raster work, so I started with the lettering. For this, I decided to use the font Stop. I chose it because it was futuristic, and it's also the Retro Software logo font. I added a sort of metallic effect by hand, and was pretty pleased with how it turned out. I also added a border design around the loading screen made up of crystals. I also added my name and the logo.

The border and logos added

Then it was basically just drawing and colouring. When I work on a loading screen I always put each individual element on its own layer so I can change my mind about the composition later.

The platforms hide a multitude of sins!

This means I have a bit more work up front, as I do a lot of drawing that eventually gets "hidden", but it means I can change my mind at any time about the composition.

The finished MODE 5 screen

Once the Mode 5 screen was done, I had to add some colour to turn it into the Mode 2 screen. I wasn't very happy about this, as the end result looked like a ZX Spectrum loading screen. It had a sort of "coloured in black and white look".

Beeb Spectrumesque?

Next it was Inkscape. I was very lucky in that just before I started this project I found a copy of an early build on Inkscape 0.47, which made all the difference to the way the artwork turned out.

Inkscape 0.47 includes of a number of filters, such as bevels and specular lighting. I used these on the game's title and was really pleased at the way it made it look.

I started the Inkscape artwork from scratch - I could have imported the paths I created in the GIMP and used them in Inkscape, but I decided that I needed to get the perspective better for the cover art so decided against it.

Unlike the cover art I did for Repton: The Lost Realms, which was cartoony with black outlines, I wanted to do something without black outlines at all. I used the Tango Icon palette (one of the standard palettes supplied in Inkscape) to create the artwork as limiting your colour palette makes life much easier. I also used the guidelines for creating Tango icons to create the artwork.

I also decided on a light source - somewhere in the middle, to the right of the viewer - early to avoid the mess I made of the artwork for the game Zap!

As in the GIMP, I drew each element on a separate layer. I also drew much more than I needed to so that I could cope with the different uses the artwork would be put to.

Always draw more than you need

Overall I am very pleased with the way the artwork for The Krystal Connection turned out, and hope it does the game justice.

The finished product

The Krystal Connection will be available from Retro Software from 12th September 2009.

Got my Giro...

As promised, here are the multicoloured Giro Gs....

Ubuntu in state of DVD denial

One of the things I have had trouble with ever since I installed Ubuntu was playing DVDs. I need to use DVDs as source material for the graphics I do for both work and pleasure, and not being able to play all the DVDs I am sent was becoming increasingly frustrating. Although a large number of DVDs wouldn't even mount in Ubuntu, the DVD player under my telly played them fine.

I tried the normally excellent Ubuntu UK IRC channel to no avail, so I was on my own. Eventually I discovered the mount -l command, and saw the letters UDF. That turned out to be a vital clue.

And today, by a stroke of luck, I found this page. Not only was the problem explained, but a (partial) solution was given. I can now play any DVD, provided I open it from a session of Nautilus running as the root user.

dave@dave-desktop:~ sudo /usr/bin/nautilus

Being careful to save the files on my Desktop, and not root's Desktop, I could take screen shots that frustratingly I couldn't delete or move.

That's because the screen shots I took from Nautilus running as root also had root privilges, so a bit more command line lurve was needed - the "chown" (or change owner) command:

dave@dave-desktop:~/Desktop cd dave Screenshot1.png

Now I'm happy and can do lots of delightfully rainbow coloured Granada "Giro" Gs to accompany Derek Hilton and his band...

Creating A Font with Inkscape and FontForge

One of the things I wanted to do on Ubuntu was to create a TrueType font. I have done this in the past using Fontographer and Macromedia Flash on Windows, but I wanted to have a go using Free Software to see how the process compared.

I had the font I wanted to digitise as a high quality scan. I imported that into Inkscape and created all the characters, or glyphs:

Glyphs created over the scanned original

As it was my first time doing this in Inkscape, I made a number of mistakes. Firstly, I created the fonts as filled shapes. If you are going to create a TrueType font then outlines are enough. The biggest problem with using fills instead of outlines in Inkscape is that you can never see if a path is "closed" properly - this will cause problems for the font editing software later on.

Another mistake was that I had forgotten I could not overlap paths - if you do, the overlapping area becomes transparent. Each path has to be made of continuous oulines so, in the case of the capital letter Q I could not draw the circle as one path and the square tail stroke as another.

The next thing I needed to do was to create an .svg file for each letter.

.svg files created for each glyph

Again, I made mistakes doing this. I created a 1000 x 1000 pixel file for each glyph with a 200 pixel base line that the letters would sit on. I should have realised that for .ttf files your glyph size needs to be a power of 2, so I should have used 1024 pixel files.

The next thing was to import the glyphs into FontForge 2. FontForge is an excellent program, if you can get past the fact that the interface looks like it decided 1990 was so lovely it would stay there. It looks a bit daunting but in fact, skimming three pages of the online manual, including this one, was enough to create a truetype font with metrics and kerning.

The most valuable thing in FontForge is the Ctrl+Shift+D to correct the direction of your paths (whether your paths are clockwise or anticlockwise is something very important for font creation).

My corrected Q in FontForge

Once you have got your glyphs imported into FontForge, what you have in essence is a monospaced font - all the letters are the same width. The next job is the metrics - in other words changing the widths of each letter so that the I is thinner than the Q. FontForge makes this very easy, with a drag and drop interface.

After that you have to correct the Kerning - in other words coping with the fact that with two letter combinations such as AV the V is should be moved a little closer to the A. This was a little complicated to get started but again it's drag and drop. It took me about three hours to do the metrics and kern all the letter combinations for my font by hand.

Once that was done I just needed to generate my .ttf - something very satisfying.

The end result - B12JP.ttf

And the software didn't cost a penny. And indeed, neither does the font. I've released the font under CC-BY-SA and it is available to download from here.

Converting .ai files from Flash 8 to .svg

This morning I wanted to use a number of the graphics I have done in Flash in Inkscape.

The .swf and .fla files are stuck at the moment until I have access to a copy of Flash, but I also have a large stock of .ai files. I exported them from Flash 8 to use in Fireworks, which allowed me to use various raster effects on my vector artwork.

Inkscape would only import Adobe Illustrator 9 files, but Flash 8 exported .ai files in Adobe Illustrator 6 format. However, the solution was already available and installed on my computer with Inkscape. It just needed a bit of "command line love" (as they say on the Ubuntu UK podcast). The program in question is a command line tool called Uniconvertor, and it's very easy to use.

Open a terminal, put the .ai files in your Home folder, and type:

dave@dave-desktop:~$ uniconvertor source.ai destination.svg

Very, very useful.