Breaking the Taxi’s 4th Wall

20 Sep

If you’ve been keeping tabs on my side projects – you’ll note that I’ve yet again done some upgrades to the Taxi’s website.  (The Kings Row Taxi Service is a Super Hero Group associated with the game City of Heroes – I’ve been upgrading their site as a side project to keep my skills and my mojo where they should be.)

One of the first things we did – was get rid of the old static intro page and replace it with some hot new technology.  Namely Silverlight as I’ve mentioned in a previous post.  The page looked good but we got some feedback (Tip: If you’re going to do a side project always treat it like a real project.  That means imagedocumentation, user focus groups, the whole ball of wax.  Sure – it’s just for fun, but if you treat side projects with respect – people will respect you for your professionalism … just don’t take it too far.  :-))

As you can see from the screen shot, we dumped that gaudy glowing screen border for a more relaxed and more TV like interface.  In doing this we added a couple of visual tricks that can’t be seen well by the naked eye.  By providing a video that appears real, and combining it with elements from the game and the Taxi’s characters that we’re familiar with – and even if you have no idea who they are… or what this is about – you can effectively break the 4th Wall web design, and bring the user into the feel of the site, the action, and make them want to watch.  So visual elements which are subtle are often the most important.  Currently they’re a little too subtle for my taste – so they may be kicked up a notch (after more user feedback – the PM in me SCREAMS for More Meetings and Emails Maniacally!!). 

As the screen image changes – we slowly increase and decrease the alpha on the faux screen reflections and scan lines.  Eventually we may code up our own scan lines to give it an even more realistic appearance – but for now, this will do… and does a fair job.  One advantage of this technique of visual illusion is, thanks to Silverlight’s XAML and JavaScript code I can change the settings easily without having to rebuild my entire project.  I can, imageactually even change it with a Notepad editor if I want to go old school on it.  

 Another trick I can – and will be doing – but I haven’t yet is break apart my various video clips and apply my SPFX to them individually.  By doing this I can substitute clips on the fly based on users cookies – for example, if Solomon Kane image(pictured left) comes to the site, I can tailor the story around him.  If Cabbie, Vegas – or even myself come to the site – they’ll get a different experience – I could do this in Flash obviously but the XAML and JavaScript make the experience much easier and open up avenues I’d have to do a lot of actionscript and JavaScript combined to accomplish the same thing.

Our next step for this intro will be to introduce more videos that users can select from, and provide VCR functionality – this has been a requested feature.  Other requests from user feedback which I’m considering are making it so when someone sees your character on screen in the video – you can click on them, and bring up an online comic of that character – not something we’re likely to see soon since I’m doing this in my spare time – but it’s definitely a request we want to keep in the documentation for later.

Leave a comment

Posted by on September 20, 2007 in Uncategorized


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: