Author Archives: tomdanvers

Ray-ban – MADE

rayban-jump

Stinkdigital brought me on board to help with the development of this game for Ray-ban. I got involved when lots of the groundwork had been done but helped with gameplay implementation, UI creation, asset integration and helped bring the product to its production ready state. We used the brilliant PhaserJS (which is built on top of PIXIjs) as our game framework and rendering engine. The game is really fun and it was brilliant to work on!

rayban-boss

How many of your friends can you save!?

http://game.ray-ban.com/

rayban-customise rayban-complete rayban-game-over

McDonalds – Little Piccadilly

little-piccadilly-scale

I worked with Pirata (r.i.p) on this digital outdoors campaign for Leo Burnett and McDonalds. McDonalds wanted to use their famous Piccadilly Circus ad space for something out of the ordinary. Pirata built a website/mobile app that allowed visitors to Piccadilly Circus to push an avatar they’d created to the big screen. I built the Air app that ran on the screen 24/7 and displayed new characters from the backend.

I had to pay close attention to memory management as the app only got reset once in a while. Challenges included, functionality to handle a varied volume of data from the backend, a real day-night cycle and displaying relevant animations for each unique character.

little-parisa

It was very satisfying to see something I’d help make on a huge display at an iconic location in London. Needless to say I made a few Little Piccas of myself!

little-piccadilly-tom

little-piccadilly-london

Me. By Me. TKMaxx

mebyme_1

I was the frontend developer on this project with Weir&Wong. The site, for TKMaxx and Brooklyn Brothers, was to support the fashion brand’s #mebyme campaign in which it’s customers play the leading role.

The backend was built on WordPress and the talented backend team used a combination of plugins and bespoke functionality to serve up a complex API for reading and creating posts. WordPress was the perfect tool to allow admin users to moderate user content and create their own posts.

The frontend application framework I chose was EmberJS. I love its integration of the Handlebars templating system and fully featured routing. I also used Ember’s sister framework EmberData for handling api calls and model management.

My favourite font icon system IcoMoon came into play again on this project. IcoMoon’s web app and lightweight outputted font files make it a great tool.

mebyme_2

 I used Modernizr for feature detection, SASS for compiling css and Grunt to minify JS and run some other deployment tasks.

I love the end product which was a result of a lot of hard work on a tight deadline.

http://mebyme.tkmaxx.com/en

Adidas – Unite All Originals

Adidas - Animation

I worked on this project at Stinkdigital for Sid Lee / Adidas. The experience uses the newChrome Web Speech API to allow the user to interact with their voice. The user can call out objects they see in the video to activate enhanced animations and visual effects. People with an out of date version of Google Chrome can interact with their keyboard instead.

http://www.adidas.com/uk/apps/unite/

Adidas - UI Adidas - Toybox Adidas - Poster Adidas - Intro Adidas - Fire Adidas - Animation

 

Ray-Ban Social Visionaries

Animade animation

Animade animation

[UPDATE] – This project won a D&AD 2014 Yellow Pencil – Huzzah!

I helped the guys and girls at Stinkdigital create this facebook app for Ray-Ban. It scrapes the user’s facebook data and generates a custom animation for them. The real star of the show is the amazing animation work done by Animade, mind blowing stuff 🙂

http://www.facebook.com/RayBan/app_184017091765220

The end message

The end message

The Menu

The Menu

 

 

Mentos Fresh News

Mentos Fresh News

Mentos Fresh News

I worked with a crack team of digital ninjas at Stinkdigital to create this project for Mentos. The incredible back-end work by Arpad Ray allowed users to view a rendered video based on their Facebook profile. The video took dynamic graphic elements and spliced them into a funny news report about the user. I was part of the front end team doing the JS/HTML/CSS build. It was a great experience working in an expert team of front end devs. The js work I did was built on backbone.js

http://www.mentosfreshnews.com/
This is my fresh news!

Landscape Generation in Away3D

landscape_generator

I recently did a client project in AIR that had a location map section. They created the map in 3D Studio Max and wanted the user to be able to control the camera using a touch screen. I used Prefab3D to parse the 3D file into an .awd file and then used Away3D to load and render the map model.

I’m never happier than when making little game landscapes using perlin noise so I decided to do one in 3D. I started with a BitmapData object to which I applied perlin noise using the BitmapData.perlinNoise() method. Then I translated each pixel into a world tile object. I used the pixel’s red value to define the height of the tile (i.e the terrain elevation). The pixel’s blue value became a terrain type (e.g. forest, desert, snow). I used the green value to represent temperature (which i skewed to be colder for high and low values of y to mimic the icey poles of my world).

Using the resultant tile data I created a height map BitmapData which I needed to create the 3D mesh for my world and a texture map BitmapData which I’d apply to the mesh.

Away3D has a great elevation mesh object which takes a height map BitmapData and returns a mesh based on the brightness of each pixel in the height map. I used this to create a mesh and applied my texture map to it.

I added a directional light to represent sunlight. I updated the light direction based on a ‘time of day’ variable to achieve a day/night cycle type effect. A flat plane with a water texture became the surface of the sea.

I exposed a load of setup variables in a debug panel to let me play with tile generation, lighting and the 3D camera.

Check it out (you’ll need an up-to-date version of Flash Player) because Stage3D is a relatively new feature.

Google Chrome – Super Sync Sports

Super Sync Sports

I worked with Weir&Wong on this Chrome Experiment.

Users who visit http://chrome.com/supersyncsports/ can play a range of button-bashing sports games using their mobile phone as the controller. I helped out towards the end of the project with design/animation implementation (using swiffy and css) and some functionality tweaks and bug fixing (JavaScript). It was great fun working on such a technically challenging, beautiful and fun project with a whole bunch of clever people!

AS to JS

Flash > HTML5

Hello campers! My portfolio site hasn’t been updated for an age. Mostly because I’m a lazy creature but also because I’ve been busy spending the last few months expanding my knowledge base into the heady world of HTML5. As a freelance developer working in London I’ve noticed a bit of a drop off in the number of decent AS gigs that are out there. Most of my contracts are still ActionScript but I thought it wise to get my head around JS and its bedfellows for future job security.

So how was the transition?

Well fairly painless really. HTML and CSS still infuriate me now and then. I expect too much of them. I keep thinking of them as programming languages instead of crude tools to make text look pretty. Nothing can get me as enraged as CSS. Nothing. This is mostly due to my lack of understanding and I’m sure it gets better and more fun with time. Otherwise why would so many devs choose to do it as their job? Right?

JavaScript is a piece of piss after spending any time doing ActionScript. Its initially a pretty revolting language when you’re used to a strongly typed, class based syntax like AS3, but once the feelings of nausea pass then it allows for a lot of flexibility. If AS3 is the serious, beautiful and dependable girl/boy you want to marry then JS is the fun, easy going (slightly dirty) fling you have when single. JavaScript can be written as beautifully or as badly as the programmer behind the keyboard likes. And that’s one of my problems with it. With great power comes great responsibility. For every coder who is interested in creating beautiful, pragmatic and manageable code there are three who don’t give a crap as long as it works. My job often involves picking through code bases developed by other people. This can sometimes be tricky but AS development in the freelance scene (here in London at least) has reached quite a nice equilibrium. Most people will use some sort of micro architecture/framework (RobotLegs/PureMVC) and a suite of other tools that manage asset loading, tweening etc. This is great! It makes the process of diving into projects, for sometimes only a few days, relatively simple. At the moment JS development still seems a pretty gun-ho affair, like the American Mid West a few hundred years ago, no industry standards have emerged and this makes some jobs pretty frustrating.

Something else that makes me sad about the slow-down in Flash work is cross-browser compatibility. It sooooo dull. I never realised how lucky I’ve had it all these years, only being at the whim of one massive corporation (Adobe) instead of a whole bunch (Google, MS, Apple et al). Cross platform problems are such a horrible waste of time and sap the joy of coding out of a project (for me at least, perhaps some people enjoy the challenge).
So far I’ve been lucky enough to mostly work on html projects that are for one specific device or targeted at one browser but its only a matter of time till I have to deal with cross browser compatibility regularly.

Finally my biggest disappointment with making the switch is the massive step backwards in fidelity that the transition to HTML5 means for me. As a creative developer its been great working with flash, constantly being on the edge of what can be made and consumed over the internet. Regular increases in Flash Player performance over the years have meant regular jumps in visual fidelity for the things I make. Delivering high quality video and audio, accessing web cams and, more recently, having access to a users GPU have meant things look better and better and the amount of power available to me has been growing and growing. Brilliant. Now I feel I’m taking a big step back in what is possible with the technology I work with which sucks. And when I say ‘what is possible’ I mean what is possible for the average browser on the average users’ computer that Johnny CEO specifies. Of course I could develop projects that work exclusively on version X of browser Y because it allows me access to computer feature Z but that wouldn’t be very in keeping with the idealistic-open-non-proprietary-down-with-adobe viewpoint so popular with HTML5 fanboys?

Anyhow. Enough ranting. I could go on and on.

The transition has been helped immeasurably by a bunch of people. Neil helped me get my first HTML5 gig and, along with Phil, put up with lots of stupid HTML/CSS questions. Weir&Wong took a chance on me and let me help out on the final stages of a project they launched recently.The chaps on the null&void email group have also given me lots of food for thought around HTML5, the rise of the one page JS site and other related topics so thanks for that!

Geox – Amphibiox

Italian shoe maker, Geox, tested their latest outdoor shoe range in Cherrapunjee, the rainiest place on earth.
They wanted a site to promote the various high tech features of their shoes. The site that SMFB concepted and Stinkdigital built, documents the adventures of four testers who put the shoes through their paces (excuse the pun).
I was lead dev on the flash build. The amazing responsive html work was done by Rich Hallows and the team at SD.

Lovely stuff!

Edit: It’s lovely to get this kind of feedback from the guys at propoganda3.

“Everything about this site says, “polished.” There are no mistakes. Everyone in the digital should look at this. Congrats.”

Very nice to hear!

The Geox Amphibiox site won a 2013 One Show Interactive Gold Pencil award.

http://amphibiox.geox.com/#top

 

Grolsch – Big Bold

Grolsch - Big Bold

I was the ActionScript developer on this project for Grolsch. Alongside the lovely peeps at Stink Digital I helped create this site which allows users to text in their nicknames and recieve SMS responses from the character in the video. It involved some nice corner pin tracking of content onto video and interfacing with a third party API.

 http://www.grolsch.co.uk/campaign/bigbold

BA – Social Symphony

BA - Home Advantage

I worked with Ogilvy to help produce this mini-site for BA. Its a neat concept but the time frame made it a real challenge. However I think we pulled it of pretty well. The waves represent the social media buzz around Team GB during the Olympics. The height of the waves effects the sound track. Simple but effective!

https://apps.facebook.com/socialsymphony/

AS3 BitmapData Value Maps

A selection of value maps used in my game.
Whilst tinkering with (yet another) game idea I’ve been having fun using BitmapData value maps. My game world consists of a space that is 100 metres square and I have a range of different BitmapDatas that describe different properties of the world. I use BitmapData.getPixel() to get information about the point in the world that corresponds to the NPC’s (Non Player Character) current position. Although slower than other types of value maps you can get some interesting effects when using the built in methods of the AS3 BitmapData class (perlin noise and filters for example).

Simple Value Maps
Sometimes world information is not modfified throughout the game session and when this is the case I use a static value map. In my game I have a cover map that determines how much protection an NPC receives for standing in a particular location. This currently looks like this.

Black areas represent parts of the world that have no cover. The brighter a pixel becomes the more cover is provided. So friendly units standing in the trenches and central fort area will avoid a percentage of attacks.

These static maps could be used for a myriad of applications e.g. height (to give higher NPCs a combat advantage), surface types (to modify an NPC’s speed based on different conditions) or environmental hazards (NPCs could take damage whilst walking through barbed wire or caltrops).

Flow Field Value Maps
I wanted the enemy NPCs to approach the central fort as if they were dodging and weaving to throw off the the aim of the defenders. I’m using a value map to alter the heading of incoming NPCs. I effect an NPCs rotation based on a value map that converts the brightness of the pixel into a value between 0 and 360 degrees. This can be achieved using a base shape like this.

Adding some noise to this base image produces a more natural wandering movement in the approaching enemies.

This method was inspired by a conversation I had a few years ago with Shane McCartney who was using similar techniques in his games. I also loved the perlin noise flow field demo done by Justin Windle over on SoulWire as an illustration of what can be achieved with this technique.

Dynamic Value Maps
During their time in the game world NPCs can be exposed to threats such as grenades, rockets and area of effect attacks. I’m using a dynamic value map to help NPCs avoid these threats. When a threat is introduced into the game world I draw a small circle into the threat value map. Every few frames I use BitmapData.applyFilter() to blur the source BitmapData to feather the circle and gradually fade it out when the threat is removed. Any NPC that is standing in an area that corresponds to a high threat level will turn away from the threat and run off until the threat level decreases. I use one value map for all the factions in the game but just query different channels depending what alliance they belong to. E.g. the ‘red’ faction only respond to threats in the blue and green channels, the ‘blue’ faction respond to threats in the red and green channels etc.
A grenade showing up in the threat map:

Now I bet you are thinking “Tom you fool! Using BitmapData where a Vector or 2 dimensional array would suffice is lunacy!”. Well, fair point, especially for the simpler implementations (like the cover map). But using this technique I could easily update the cover map on the fly. For example if a large explosion occurred in the game world I could print another gradient circle into the cover map to represent the cover created by the resultant crater. As soon as the value map becomes a bit more complex or dynamic this is actually a reasonably fast way of going about things. It’s also nice being able to chuck the BitmapData on stage via a Bitmap object for debugging purposes. I can also overlay the value map on a minimap to accurately see where NPCs are. I’m sure I’ll not being use this technique so often in the finished game when some serious optimisation has taken place but until then this is a fast and convenient way of getting the values I need and, perhaps more importantly, visualising them.

Nike Football : My Time is Now

 

 

 

I’ve spent the last few months working with the lovely folk at Stink Digital to create this YouTube channel for Nike Football. We worked alongside Wieden & Kennedy London to create an interactive version of the TV spot directed by Adam Berg. The user can click on hotspots to discover hidden games, videos and player stats.

This Nike campaign won a 2013 One Show Interactive Gold Pencil award.

Hitchhike with a Like

Hitchhike with a Like

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.