Hitchike with a Like is a Facebook app that I worked on for Tribal DDB Worldwide with the chaps at B-Reel London. VW Beetle wanted a game to celebrate the 21st Century Beetle and its heritage. Players can spend action points on journeys around Europe and can win prizes by entering competitions along the way. As part of a team I worked on the Flash front end and the game mechanics. The app went on to win a Site of the Day award on FWA.

Download the latest version here: http://www.tomdanvers.com/labs/moneytimeline/2012_03_01/MoneyTimeline.air

This version includes:

• Local storage of transactions in an SQLite database.
• Categorisation of transactions.
• Tooltips.
• Month / year breakdowns.

Adobe and the future of the Flash runtimes

Something I was interested to see was the way that Adobe handled themselves in response to recent ill-conceived communication decisions they’ve taken in regards to the future of the flash platform. On the whole I think they did very well, they offered a frank apology and backed this up with more information on the roadmap white paper they published on the 22nd of Feb 2012. Its worth a read, but in summary Adobe have selected two main directions they will be taking the flash platform in: gaming and premium video. They decided that the platform was growing in too many directions and being used in too many inapropriate places. I think its a good decision, the focussed approach should lead to more stable releases and more interesting features for us to play with! The release of Flash Player 11.2 and AIR 3.2 support this new direction with inclusion of mouse lock (for gaming and infinite scrolling), middle and right mouse click events (meaning the context menu can finally be overridden) and Stage3D for iOS and Android. Adobe also stressed that although these are the areas that they will be focussing on, the improvements in performance will benefit everyone. For example proper multi-threading will be introduced and I could use that right now in a project I’m working on instead of having to manually spread a complex process over multiple frames

Create JS

Grant Skinner did some interesting talks about his HTML5 tool suite CreateJS and his company’s transition to doing more HMTL5 work. CreateJS looks like a great starting point for flash developers who want to dip their toes in the JS/CSS3/HTML5 sea! He also mentioned that his favourite JS IDE was WebStorm for what its worth!

ASFEAT

I, along with the rest of the room, was totally blown away by the amazing work Eugene Zatepyakin has been doing with his ASFEAT tools. For a taste of what he’s up to check out his Vimeo channel because, lets face it, looking at demos is fun! I’ve embedded one that is especially mind blowing, he uses the light from the room he’s in to create a light map for his AR 3D content. The result is that the 3D content appears to be lit in the same way as the rest of the room. Genius!

ASFEAT | real world light system for AR from Eugene Zatepyakin on Vimeo.

Stage 3D

Some of the most exciting stuff I saw was built using Stage3D, both for desktop and mobile (using AIR 3.2) the performance issues that have plagued Flash apps on mobile devices have been largely done away with now that AIR can leverage the power of the hardware’s GPU. We saw some stunning game demos for both mobile and desktop, my favourite was probably BlackSun firstly because it looks amazing and secondly because I love twin stick shooters! It is built by Aerys using their Minko framework.

Monocle

I almost forgot about Monocle (WIP name) an amazing new profiling tool from Adobe (you may have seen at Max 2011). It runs as a stand alone app and will profile any running swf. The interesting thing is that you don’t need to be running the (slow) debugger version of Flash Player to be able to use it. The up-coming versions of the player will automatically expose profile data. Thibault showed a demo where he stepped through each triangle draw of a Stage3D render to build up the scene in the profiler. Monocle looks ace and seems to expose a lot more data than the FDT profiler (sorry guys).

See you next year Amsterdam!

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!