I’d been meaning to do this for a while but this weekend I replaced my BitmapData based renderer for my game with one that utilises the new hardware accelerated graphics of Flash Player 11 (formally Molehill). Rather than getting into the low level code required to make a custom renderer I decided to use one of the 2D frameworks that the Flash community have come up with. I chose the excellent ND2D by Lars Gerckens because it seemed to have all the features I’d need and the demos blew my socks off (press space to cycle through the demos on that page)! I like Lars’ implementation of Sprite Clouds (a group of sprites with a common texture), they work perfectly for game entities like projectiles and particle effects.

My renderer is un-optimised (I was eager to get something up and running as soon as possible without doing too much refactoring) and I’ll be making some changes to bring the game more in-line with the ND2D display list paradigm, but I think its a good start. I’ve noticed a huge performance boost already, the game is running at a smooth 60fps on my PC now. The next step will be to up the game viewport size as this was previously limited by how many tiles I could render every frame using BitmapData.copyPixels() without performance suffering. I’ve also noticed that screen tearing has completely disappeared (it was a real pain when using the BitmapData method).

If your planning to get involved with Flash Player 11 game developement then there are a few things to bear in mind when designing your application structure. The biggest one is that all Stage3D content is rendered on a layer (or layers) below the main flash stage. So, regardless of where your ND2D world is added to the display list, your game content will be behind all other display objects. As a result you need to cut a hole through all display objects that make up your UI (backgrounds etc) so the Stage3D content can shine through. Another thing thats worth implementing from the get-go is a time based (rather than frame based) update system. This is standard game dev practice but I’ve only just got into it. Instead of moving items the same distance every frame (I believe) it is better to move items based on the time since the last frame was rendered. All ND2D sprites have a step() method that accepts an ‘elapsed’ parameter. The ‘elapsed’ param is the number of seconds since the last update and all movement should be based on that (“sprite.x += 1 * elapsed” rather than “sprite.x += 10″). The resulting movement is much smoother as it compensates for variation in the number of milliseconds between updates caused by CPU/GPU usage.

Dabbling with this framework has got me really excited about the possibilities that will arise when this version of Flash Player penetrates through the market enough to start using it for client projects!

My girlfriend suggested I use a budget to keep a better grip on my finances. I never got around to doing one because I got sidetracked by making an AIR app which imports my bank statements and visualises my expenses over years, months and days. It was great fun to create a tool which I actually use and looks nice!

http://apps.facebook.com/re-source/

http://www.youtube.com/jeniferliveconcert

It won an FWA and was shortlisted for a Cannes Lion.

Norwegian telecomms company Tele2 decided to promote a mobile phone package by setting the world record for ‘longest phone call’. We created a site to support the live event. I did the flash development and worked closely with another developer to create a wordpress based site that allow the public to experience the record attempt in realtime.

http://www.verdensrekord.no/

We overcame some pretty major challenges to create a website that could be updated dynamically for the duration of the event. We had 5 FMS feeds on the site that the users could switch between at will. Admins were able to leave updates about the live event on a timeline which also rendered the viewer stats for each competing couple in graph form.

We created a site for the Lipton Exclusive Collection. The idea was to create a infinitely repeating animation that gave the user a sense of travelling through space. Each of the 6 ‘worlds’ in the site represented one of the tea blends in the product range.

I was lead developer and worked with the creative team closely. The animators did an incredible job bringing the worlds to life and it was my role to make sure that the looping worked correctly and that the mouse wheel interaction was consistent across different hard ware. I also created components for the animators to use to give their movieclips interactive behaviours.

http://www.lipton.com/en_en/exclusivecollection/index.html

The site went on to win an FWA site of the day award.

http://thefwa.com/site/lipton-exclusive-collection/

The amazing animators at B-Reel created a non-interactive version which is quite beautiful!

We worked with DDB Paris on this banner for INPES (the French equivalent of the COI). The idea was to make a game-like experience that highlighted the dangers of leaving your baby unattended around the house! I was the developer and worked with the 3D studio and designers to create the banner.

http://www.ddbparis-campaignsonline.com/inpes/banniere/

The banner won some awards in France.

We worked closely with a backend developer to create a system that allowed the user to upload their picture (or use a webcam image or facebook picture) and schedule their photo for projection onto the side of a building. At a predetermined time the photo was projected, this moment was captured by a webcam which then fed the captured image back into the system. After the event users could browse all the images using an interactive timelapse animation. They could browse the timelapse freely or jump to their own or their friend’s images.

I’ve been using these user interface components for a few years now, tweaking them as projects come and go. Click on the image above or here to see a working example of my ToggleButtonBase, ButtonBase, SliderBase, ToolTipBase and ScrollBase AS3 classes.

ButtonBase is a multistate button that works by extending a MovieClip in the Flash library with ButtonBase.as as the base class. It means the various visual states are controlled on the IDE timeline (see the gratuitous green button).

ToggleButtonBase uses two instances of ButtonBase and dispatches ToggleEvents when the user changes it’s state.

SliderBase dispatches SliderEvents which contain a ‘value’ property that changes from 0-1 as the user drags the slider from left to right.

ScrollBase takes various display objects (background sprites, content display object, and 2 or 3 ButtonBase instances) to create a vertical content scroller. See ComponentTestDoc.as for examples of how to do this.

The source files are zipped here if you want to have

Michael suggested using a source image as the starting point for the automata. I tried that out and then tried using the source from a webcam instead. This is the result. You’ll need to allow webcam access The un optimised swf is coming in at 3k.

Here is the scrolling version.