Long overdue makeover

June 6th, 2009

Finally, I've got round to giving deeperbeige.com its much needed makeover. The new site is geared towards touting my freelance abilities instead of the random malarkey of the previous site. All the old content is still available, should you find yourself in desperate need of random malarkey.

The new site runs on WordPress (ooh, shiny), with a custom theme (ooh, pretty) and has just about all my previous webby-work in it (ooh, um, contenty). There's lots of tags and categories to help you find stuff you might like too, so take a look!

If you spot something broken, comment here or on the site, and I'll fix it. Probably.

Skulduggery Quest Postmortem

September 15th, 2007

At work we recently built an RPG game promoting the children's book Skulduggery Pleasant. It is a bad game. You can play it if you like on the link below. Register and complete the game, and you might win a Wii even (chances are pretty good as not many people are going to qualify for it).

http://www.skulduggerypleasant.co.uk/quest/

Since the book is based around a character who is dead, it seems appropriate to do a project postmortem. The company has spent a considerable amount of time making the game compared to how long most projects take for us at least. Overall it is a much larger undertaking than we normally attempt and it has multiple mini-games built in, each of which could be a typical game project in its own right:

Hub: Walk around in a vaguely Zelda-like fashion, exploring and picking stuff up. This is intended as a sort of story-led role-playing-game section that takes you through the other mini games.

Spot the difference: Just the basic spot the difference game transferred to a computer. You get a different puzzle made up each time so it doesn't become completely trivial to solve if you replay.

Magic Levitation: A physicsy lift 'em up. Not sure I've played anything quite like it before - you have a magical levitation ability that you have to train up until you can chuck the item you need out of the window.

Cave Exploration: A bit like the old Amiga game Commandos. You have to find the final important game item whilst evading the sight of the guards.

Individually, each mini game is amusing for a bit. The big problem with the game as a whole however is the lack of cohesion. I think this stemmed from a lack of adequate planning in the early stages, leading to a fair bit of making-it-up-as-we-go as the deadline encroached. What we ended up with was a nice enough game engine for an RPG, but with no story or other characters to interact with. For a story driven game, having no story sounds like a bit of a deal breaker to me. And if there were a story, having no characters also sounds like a problem!

There's some neat code running under some of this, despite the lackadaisical gameplay experience.

Hub: Whilst walking around, you can pass both in front and behind most objects. I came up with a method to do this that doesn't require constantly swapping the depths of everything. There are two copies of the clip that contains all the scenery objects positioned directly at the same spot on screen, with your character sandwiched between them. Each item's position on screen is compared to the characters. If it is above the character then the back version is set to visible and the front invisible. If below, the other way round. Flash's _visible property works internally by simply skipping the object when rendering to screen, so its very efficient this way.

I wouldn't recommend you build a similar system however! There's a downside (isn't there always). Whilst it works really fast and reliably with one moving object, if you add any more you can't guarantee that its possible to sort things still!

Levitation: I've been developing a lightweight springs and masses engine for a while now. It was last in use on the Rant game, and before that to do a string effect on Paul Steel's site. Each iteration the springs get more stable, the masses collide more realistically and the efficiency of the engine improves. At some point I'll try and do a game purely based around this engine - I have something unusual and interesting in mind!

Anyhow, the physics engine grew a couple of features for this game. Attractor and repulsor masses for a start (to do the actual levitation bit). The game worked beautifully with an attractor mass - it was like trying to pick things up with a weak magnetic ball. It wasn't all that easy to play however so I made it a repulsor following the mouse position instead, and got a lovely floaty feel.

The collision engine got an overhaul too. It now has a concept of collision sets. This is a way of tagging a mass such that it knows not to check for certain types of collision that can't happen, or even that we don't want to compute to help the game effects. There's another major performance enhancement gained from sorting all the masses along the x-axis. The sort routine is built into Flash's runtime engine and hence almost free in terms of execution time. Most of the Flash built in stuff runs really well, but as soon as you try and do something complex and algorithmic in ActionScript (version 2 and below that is) the inherent sloth of the language's dynamic style means everything grinds to a halt. Anyhow, after the x-axis sorting, masses are only compared until one is found on an x-position that cannot collide no matter what. This runs in both directions from the mass in question and the search is culled beyond the discovered limits. This gives an impressive performance boost overall.

I've made pretty heavy use of Flash 8's new-ish bitmap processing for graphical effects. Push the light around with your magic, and watch the shadows. Its a subtle effect but the shadows move around depending where the light is coming from. Shadows get longer, fainter and adjust their position all in realtime. This is all done using the new drop-shadow filter on each of the graphical objects in the scene, and a bit of trivial trigonometry. A simple effect, but powerful, and I haven't seen anyone else doing it yet.

The graphical effect of the magic itself is scripted too, rather than an animation. Particles of magic are placed onto a bitmap each frame, then the bitmap is faded and colour transformed via yet more filter effects. Over multiple frames, moving things leave trails across the screen. Pretty.

Caves: The base engine for the caves section is identical to the hub. I can hear what you're thinking (if you're still awake). You're asking how it can have NPCs wondering around when the system can only cope with depth sorting against one moving object. You weren't asking that? Well you're getting the answer anyway.

The NPCs follow a set path. They are at a set depth with respect to the walls etc, and are duplicated in the same way (in fact, they're just objects in the world like any other). If you pick their path and depth in the scene carefully, you can engineer it so that they don't look wrong. It just means you can't have an NPC wander about freely as they can't walk both behind and in front of an object without causing odd glitches. On the final screen the baddies do laps of an island-wall, which seems to break the engine's rules again. The trick is that the baddies don't actually go behind the wall at the top - they just stay above it a little. Look carefully and you might see their shadows glint above the wall rather than behind it.

Visual line of sight 'vision cones' were a challenge too. It isn't all that hard check if a particular point on screen is in sight of another particular point. You just cast a ray between them and see if you hit anything that blocks sight along the way. Or if you have the walls in vector form you can check for collisions mathematically with a line intersection check.

To show a cone of vision however, you have to run the above check for every pixel that might be in sight. That's generally a hulluvalotta pixels, and infeasible for realtime Flash games.

I'm fairly proud of the technique I invented to get sufficient performance here. I first cast a shadow off the back of each of the wall segments to the edge of the screen. This is done by simply projecting the end points of each segment out plenty of distance and joining the dots. This polygon is then drawn to a memory bitmap with the drawing API and clipped to the visible area. Flash is superb at doing this sort of manipulation as long as the shapes are simple, so there's only a minimal performance cost here.

Once the shadow of every wall is drawn (as if the enemy in question is a light source), we have a set of pixels that the baddie cannot see. A little bitmap magic to invert this, and we have a mask we can apply to its vision cone drawn complete. Job done - our baddie can't see through walls anymore.

One nice bonus with this technique is that we get almost free line of sight tests between the baddie and any point on screen. First do a hitTest against the complete vision cone shape. If the test succeeds, do a pixel colour lookup on the mask bitmap at the appropriate point. If that point is within a shadow, we're out of sight. If not, we're visible. HitTest and getPixel32 are both lightening fast.

This technique has a few unavoidable downsides. Firstly it uses two large bitmaps for every baddie. This means lots of memory allocation (bad for old machines) and lots of pixel setting (bad for any machine in Flash). Its setting all these pixels every frame that costs most of the time in this routine, even though those pixels aren't used directly on screen. There is also some kind of bug in the Flash player that leads to rapid memory leakage. Switch screens and you lose a meg or two of memory as the new baddies are generated. You also lose a smaller amount each frame. I eventually traced the leakage to a line that reads;

clip.cacheAsBitmap = true;

Without the line, no memory goes missing. With the line, megs per screen. Doesn't seem to matter if you turn the caching off later, you still lose the memory. This is something that the Flash player is meant to entirely manage internally, rather than it being the programmer's responsibility. The same behavior exists on the Mac player too, curiously.

Final lesson learned: On the PC Flash player, Key.isDown(1) is a fine way to read if the left mouse is pressed. Its a fine way to find out nothing at all on the Mac. That's the first really significant difference I've found cross-platform with Flash. A testament to just how well the player is built and tested!

Still here? How determined of you!

Email Revolution

September 15th, 2007

You may be too new to the internet to remember email in the early days. Everyone now associates it with the chores of wading through spam, impersonal communication from your colleges and hoping your message doesn't get filtered by one of the many protective layers most companies have.

Time was, email functioned as a guaranteed way to get a message to someone you knew. If you sent an email, it would either arrive or you'd find out why not. If you had email waiting for you, it was exciting - like receiving a personal handwritten letter in the post from an old friend. Nowadays, the cherished personal email is likely to be destroyed automatically because the server decides it is spam. Actual spam is just as likely to arrive and take over your computer with a virus.

So with this in mind, I propose a new two part email manifesto:

Part A: Protocol

This is the stuff that runs underneath to pass email from place to place. You don't need to know about it, but your computer does. The current protocol system was built many years ago where the internet was filled mostly with geeks who didn't really want to harm anything, so it isn't appropriate now that the scam artists and marketers have moved in.

1. You can only send email if both you and your server can be strongly authenticated. At the moment more or less anyone can pretend to be more or less anyone else really rather easily. Strong authentication of your identity would fix this.

2. Your ability to send email can be revoked if you don't play nice. This would work at a user and server level, so if you act as an idiot then you can be banned from emailing people. Or if you run a dodgy server to send spam, that can be banned in its entirety. Be good, or try your scams elsewhere.

3. Email clients will encrypt sent messages using a key requested from the recipient beforehand. This also gives the recipient an ideal chance to not receive email from you if they don't want to - if they don't give you their encryption key, you can't talk to them. Tough.

4. Encryption keys shall only work for the authenticated person they were given to in the first place. Ie, if bob@mycompany.com gives a key to marketer@dubiousproducts.com, at least the ability to spam Bob can't be spread to dodgy@spammersanonymous.com.

Part B: Email formats
Currently there's a mess of formats hacked over the basic original idea of sending simple text. You can send HTML, rich text, executable code, embedded video, links out to other resources and all sorts. Everything beyond text is open to some form of abuse, so your email client has to have loads of rubbish to reign in that usage. Things like the email client asking you if you want to download images because they could be used as tracking. That's the software manufacturer deferring their security responsibilities onto you by asking you a question you can't possibly hope to answer.

1. Plain text only. No you can't have that in bold. Nor italics or underlined. Tough. Get your point across with words, not fancy colours. And no proportional fonts either.

2. No attachments. If you want to send a file, you have to uuencode it. If you want to receive that file, you have to decode it yourself using the appropriate tools which may not be built into the client. If you don't know what uuencoding is (and won't find out for yourself) then you can't be trusted with a computer and shouldn't have access to whatever file was sent to you anyway. Take up knitting instead.

3. Top-posters will be banned after three offenses. Relative newcomers to the internet don't know that it was once the height of bad manners to post your response to an email at the top of the mail. The proper technique is to let your email client indent your friend's text with greater-than symbols at the start of each line, then to write your responses just below the relevant bit. This works to preserve context, and everyone can remember what on earth they were all talking about in the first place.

This article is a rant of course. None of the things above are really workable because people are happy with their colourful fonts and top posting and trojan executable attachments. People are used to spam and forget that it wasn't always like that. People accept that every now and then their computer will be demolished by a virus.

Wouldn't it be nice to go back to the old ways though?

At least for aging computer geeks who can actually remember them.

Robots In Disguise

August 29th, 2007

Everyone my age remembers Transformers from their youth. Everyone young today remembers Transformers from the recent film.

So that's everyone then.

I was quite the fan when young. I had lots of the toys. I saw the films. I watched the TV series. I read the comics. Whenever you fondly remember something from your youth you tend to have a sort of predetermined distaste for any attempt to revive and modernise the concept. Imagine then my horror when I learned they were making a new Transformers film, and that I'd be working on a microsite promoting the line of new toys.

How could the new stuff possibly compare to the nostalgia-enhanced awesomeness of my childhood?

Luckily the new film is pretty damn good. It is pitched at just the right balance between serious, cool and self-deprecating humour.

Even better, the new toys are damn good too. We only had the big Optimus Prime and Megatron toys in, but both are pretty impressive. The Megatron toy is the lesser of the two and only transforms into a sort of alien airplane thing. The Optimus Prime toy changes into a very nice truck model via a really complex series of transforms. You keep spotting new bits about it that are cunning. For example, you split, pull out then twist part of the truck grill to become the feet. As you're doing that internal mechanisms move another part of the feet into position for you. There are similar nice touches all over the model, including hands adjustable fingers and thumb.

Anyhow, that's enough of a free advert for them. Now for the one they paid me to make. Click below to play out the Autobots Vs Decepticons in cool street-fighter stylee action.

http://www.cartoonnetwork.co.uk/microsites_advertiser/transformers

I'm fairly pleased with a few aspects of this game. Since we started from the Turtles game we built a while back, we could afford to enhance a few features.

  • AI tuned separately for each character. Each enemy in Turtles was essentially the same AI bashing the keys of the other characters.
  • Mild element of learning in the AI. Use the same special over and over and it'll learn to counter effectively.
  • AI self tuning. If it starts to thrash you it lets up and plays a bit easier for a bit. If you kick its ass it gets more aggressive.
  • Better specials - from projectiles to transformation specials, there's more imagination to enjoy.
  • Matched characters. As part of testing I put both characters on AI mode at quadruple speed and let them slog it out. Over 60 rounds later, the results were too even to call!

Is your keyboard giving away your secrets?

August 17th, 2007

You've got Windows fully patched up, you have a firewall on active duty and you have antivirus software in place. You even know you aren't meant to open spam attachments even when they promise you nudie pictures of the latest socialite floozie. You're as secure as you can be, right?

Not necessarily. Are you using a wireless keyboard? They're popular and convenient these days, and a large amount of people have them. Thing is, they broadcast your keystrokes either via radio or infrared, and usually in an entirely unencrypted form. A few use a basic form of encryption, but it isn't strong enough to stop a determined hacker.

This means you're wide open to anyone who knows a bit about electronics and can get get reasonably close to your machine. Outside your window would probably be sufficient. Everything you type could be read, including usernames and passwords, contents of email and so on. The attacker could even take control of your computer with a suitable transmitter.

My advice? Stick with wires. Not only are they more secure, but you don't have to keep charging the batteries!

Popup hell still exists

August 10th, 2007

Cast your mind back to the dark ages of the Internet, if you were involved with it back then. If you weren't, you may struggle to believe just how pure things like email and the web were. They weren't full of adverts, or spam. There were very few malicious tricks being pulled like phishing or 419 scamming.

Eventually the con-men cottoned on to the lucrative potential and wrecked email with spam and scams. Good honest programmers made filters and so on to combat this. Banner adverts appeared on every popular webpage. People began to automatically filter out the distinctive banner shape whilst browsing, so the evildoers invented popup adverts, which leap in front of the page you're reading demanding your attention at least long enough to find the browser-close button.

Of course, the popup ad problem on the web has been mostly solved now. Browsers have popup stoppers built in these days so you don't even have to go and find a 3rd party one for yourself.

But popups aren't dead. Oh no. They're alive and well, albeit in a cunning new disguise. They aren't adverts anymore, but they're just as annoying. I'm talking about the scourge of the automatic update.

What's that you say? You like your programs being updated automatically? Well, I'd happily debate whether automatic updates should happen at all, but that's not what I'm trying to say here. What I want to know is why on Earth do I need to be told about it with a popup dialog? If its automatic, do it silently and behind my back! Don't require a reboot. Don't even require the restarting of the program being updated should it be in use. Just do it without annoying me.

When I start my computer at work, I get pestered for Windows updates, antivirus definition updates, Adobe software updates, backup reminders, Messenger updates and more. All I ever do is acknowledge each dialog until it buggers off. I'm not making any real choices for the software that I need to be involved in. I'm just wading through crap that's getting in the way of work.

Message to Adobe: When I open Acrobat Reader by double-clicking on a PDF, there's a fair chance I want to read the document. Five seconds after I start reading is exactly the wrong time to shove a giant and incomprehensible update box in my face. I just want to read my document. When I open Photoshop or Flash, I have a project to complete and a deadline to meet. I don't need to update some random bit of crap I never use. I just need to get on with what I'm doing. Go away please!

Message to Microsoft: My work computer gets rebooted every day. Please don't make me do it more often than that. Surely the latest update can wait until tomorrow morning? At least give me a "sod off updater popup" button that really does make it go away. As it stands the dialog contains options for reboot now, interrupting everything you were in flow working on, and reboot later which translates as "annoy me in five minutes with another popup when I'm typing something important".

Message to antivirus manufacturers: Your software is important to me and I like being protected by it. I don't however need to be told all the time that it is behaving itself like a good little program. I only care when there's a problem. Bother me when my PC is infected, not when its updating itself happily. Better yet, silently prevent the infections in the first place and don't tell me at all.

And, finally, to anyone who makes software anywhere in the world: Don't steal the system focus when I'm working on something else. If you absolutely must bring something to my attention, pop something up that sits to one side until I've had a chance to react to it. If your dialog is that vital in the first place, why risk the chance that I may be pressing space or enter at the exact time the options appear? All that will happen is I won't see the dialog because I'll accidentally choose the default option with the keyboard shortcut to it.

Bitmap flashyness

July 22nd, 2007

I've finally found a good excuse at work to play with Flash 8's BitmapData class. This is a long-awaited feature new to Flash 8 that lets programmers play with bitmaps of data in memory and display them onto the screen. Prior to Flash 8 you could only use vector shapes and predefined bitmaps from the resource library. You could do a limited amount of things to the bitmaps like make them transparent or shift their colours a bit, but it was all rather limited.

Now all that has changed. Actionscript now has the ability to render a vector shape to a bitmap in memory, run fast filters over the bitmap, blend bitmaps together in various ways and to plot individual pixels. It might not sound like much, but the scope for new tricks is huge.

One such trick helps make particle effects better. You move and render your particles to the bitmap each frame, then process the bitmap with some kind of bitmap effect. In a simple form this gives rise to nice spark effects:

Sparks
You do not have the latest version of Flash installed. Please click here to go and get it


This is nothing we couldn't do with earlier versions of Flash to an extent. The cool thing here is that it runs way faster than before. The work to be done in each frame is to move the particles, redraw the particle head effect and draw the most recent segment of the particle tail. Then the entire tails bitmap is processed with a colour transform that reduces the alpha channel of every pixel. This fades the tails out in a pleasing way. It also means that the length of the tail and even the amount of tails being processed has no effect on the time taken to render the last step. If we want longer tails we just fade the bitmap less per frame.

The new bitmap effects are good for smoke too. This is stuff we couldn't do in earlier versions of Flash without a large looping video. The following three examples are nearly identical code with minor tweaks to change the way the bitmap is processed. In fact, all the demos in this post are nearly identical code - just different configurations of the new particle engine I built.

You might need to stop each effect before starting the next, depending on how fast your computer is.

Smooth smoke
You do not have the latest version of Flash installed. Please click here to go and get it


Moody smoke
You do not have the latest version of Flash installed. Please click here to go and get it


Lost's Smoke Monster?
You do not have the latest version of Flash installed. Please click here to go and get it


Explosions
You do not have the latest version of Flash installed. Please click here to go and get it

How about some destruction? Click for explosions. Effects like this are usually done with a series of pre-rendered bitmaps, but this leads to a couple of problems. Firstly every explosion looks the same. Secondly, two overlapping explosions get various silly-looking halo effects at the edges. The way the bitmap processing is done here avoids both those problems. Try putting a few explosions near each other and see how they smoothly mix where they overlap.

Need a little water to put out the fire?
You do not have the latest version of Flash installed. Please click here to go and get it

When scientists get bored

June 24th, 2007

Its a lazy Friday afternoon. You've got a PHD in something unpronounceable and a lab full of funky Tesla coils. There's nothing to do but boring paperwork. How do you procrastinate?

Click here for video

3D Stereo Wigglegram Image

June 23rd, 2007

Remember those silly red/green images where if you wore silly glasses, you'd get a vague impression of monochromatic 3D? Well I recently stumbled on a cool technique for giving a similar illusion, but with full colour and no special viewing equipment.

Click here to view

To make the above, you just need to take two pictures of the same object from slightly different positions. You hardly have to move the camera for close up images like this one. For further images, you have to move it more. The camera should not be rotated. You should also program the camera to use the same settings from one image to the next - same ISO, flash, aperture, white balance and shutter time. Then you just combine the two onto frames of an animgif and line them up visually. Remarkably easy!

This technique requires a stationary subject of course. I have an idea in mind that may allow this to work for action shots too. Just need to give it a go!

You can also combine the image in a different way for stationary 3D viewing. You still get a full colour image in stereo 3D, and you still don't need any special viewing equipment. It is a lot harder to see however, and may make your eyes hurt a little! Try the following:

1. Click here to open the image

2. Make the browser big enough for the image to display at full size, and all on screen at once. If your screen isn't wide enough, try a smaller image by clicking here

3. Go cross-eyed! No, really. Do whatever you do to go cross-eyed and look at the screen. This takes a bit of practice. Some people can just look at their nose then look up a bit. Some people find it helps to hold a finger out at arms length then stay focused on it while moving it towards your nose. Whatever works for you!

4. Whilst cross-eyed, look at the image on screen and adjust your vision until you can see three go-karts, not just two. You should find that you can adjust how cross-eyed you are to make the middle image line up better/worse.

5. Now move towards/away from the screen until the middle kart falls into a natural sharp focus. The Goldilocks zone where it is just right seems to be pretty small. As a guide, for me the small image works best at about 40cm and the large one at about 50cm.

6. Relax your eyes and enjoy the 3D effect!

It takes a bit of doing, but its a pretty convincing 3D effect and worth trying for a few minutes to achieve. You'll probably agree after you've got it however that the wigglegram is a helluva lot easier for an effect nearly as good.

Four fixes and a demolition

June 17th, 2007

I've been doing my bit to battle ever-increasing entropy of broken things this week. I've repaired some stuff, and broken some stuff. Overall net gain is positive, which makes for a nice change!

1. Fixed the alternator back onto a friend's car. It had sheered its bolts and required creative bodgery to sort out.

2. Fixed a friend's laptop. Usually this would mean I wiped out the viruses and configured a firewall, but this fix involved cutting, glue and soldering. The power connector socket had been broken right off the motherboard and required creative bodgery to repair.

3. Opened a combination lock for a friend who had forgotten the number. I had brought a mini die grinder and some safety goggles along to solve the problem destructively. It turned out to be such a poor lock that I was able to pick it in about 20 seconds, to my friend's endless amazement. That was the first lock I've ever picked. What looked like magic to my friend was actually just a creative and bodgy application the way locks work.

4. Fixed the brakes on my car. The bracket holding the calliper on was bent by a clumsy garage monkey. The damage wasn't apparent until long after when the disks started rusting in funny places. The bent bracket can't be removed without dismantling the hub which means destroying the bearing. A bit of creative bodging with an air-powered angle grinder* and the hub had a new slot to get the bracket through. Application of the Standard Lotus Component Editing Tool (big hammer) and the bracket is a decent approximation of 'straight'.

Demolition. My alarm clock was already on thin ice having failed to wake me up earlier in the week. Sure, there was a power cut, but that shouldn't be enough to make an alarm clock fail. An alarm clock has one basic function - to make an annoying sound at a particular time until an off button is pressed. If that means it has to have a small rechargeable battery inside to cope with power cuts, so be it. To hell with the expense, have a battery backup and people won't be needlessly late for work.

Anyhow, Friday morning and it goes off at the right time. But the off button won't shut it up. In fact, I tried every button and I couldn't stop the intolerable noise. In my sleepy irrationalism the only solution was to beat the obnoxious device to death by bashing it into the floor repeatedly.

This isn't the first time I've had to kill an alarm clock for not shutting up when turned off. I had a cunning helicopter alarm thing. The idea was that it spun up and released a set of propeller blades that flew off and landed in a random location. It would sound the alarm until the blades were found and returned to the base unit, by which time you were certainly awake.

This was a brilliant concept, but the implementation was abysmal. The clock kept terrible time, which fails the first part of its basic function - the particular time bit. Then the clock took to firing off the blades again as soon as they were returned to the base unit, instead of shutting up. That failed the last part of its basic function. Nothing my sleepy brain could do would make it shut up so it too was beaten until quieted.

The moral of the story? Don't piss people off with your user interface design. Especially when they're sleepy.



* I know of absolutely no better tool in existence than the air angle-grinder. I've yet to meet a problem in life that can't be solved with the suitable application of angle grinding.