Here’s a more action packed trailer of my iPhone game ‘Flick The Frog‘, with my new dubstep track in the background:

So in my last post, I demoed a quick stage3D test featuring a mouse-type object composed of primitive shapes with a trail effect for a funky glowing neon mouse tail:

 

Trail Effect

Some people were wondering how I achieved the tail effect, so I’ve made it into a re-usable class which you can add to your own project. The main functionality is pretty simple – basically just an array of Planes where each plane follows the one in front of it in the array during an enter frame event, with a bit of drag applied in between:

public function updatePosition(_x:Number, _y:Number, _z:Number):void {		
 
    var trail0:Plane = _trailArray[0];
    trail0.x  += (_x - trail0.x) / _length;
    trail0.y  += (_y - trail0.y) / _length;
    trail0.z  += (_z - trail0.z) / _length;
 
    for (var i:Number = 1; i < _trailArray.length; i++) {
        var t:Plane = _trailArray[i];
        t.x += (_trailArray[i - 1].x - t.x)/ _length;
        t.y += (_trailArray[i - 1].y - t.y) / _length;
        t.z += (_trailArray[i - 1].z - t.z) / _length;
    }		
 
}

Class and Sample Project:

You can download the fully commented class here and I’ve also made a sample project (based on the last post) showing how to integrate it into an away4 scene – FYI the trail is initialized in Mouse.as (line 111). You can see how when the mouse wiggles as it moves, the movement is sent through the trail.

 

Customization

The trail can be customized by changing the texture, size, alpha, blend mode, number of segments, distance between segments and tapering. By experimenting with these parameters you should be able generate a reasonably diverse range of trails (e.g. in this example the blend mode is ADD to give a neon glowing effect, but you can get quite different looks just by changing this param).

Please leave a comment if the source code is unclear or if you have extended the functionality of the trail class to allow for different effects etc.

Following on from the last post here is another test, this time with some code driven movement, lighting and depth of field filter applied to the scene.

Click on the image to view the flash (requires flash player 11):
mouse 3D

If anyone like me to write a full tutorial on all this going into more detail, including the full FDT setup, and the various elements in the test please leave a comment.

Here is a quick test I created last May using the (then) newly released flash player 11 and away3d 4 classes. It demonstrates some of the new Stage 3d features which are wrapped up in the brilliant away3d 4 classes, including dynamic lighting, bump mapping and a cube map. The example demonstrates pulling in some lat and long coords for a couple of countries and translating those coords into the 3d space and sticking an interactive 3D marker over the country. You can also spin the globe around using the mouse.

Click on the image to view the flash (requires flash player 11):
globe 3D

Back then there were a load of steps you had to complete in your IDE to get it running, now with the new Flex 4.6 compiler some of those steps are taken out.
All I needed to do was install the Flex 4.6 SDK and latest Away3d 4 src. Once you have these create a new flash ActionScript project in FDT, set the Flex compiler to your new latest one, REMOVE the flex.swc swc from the SDK Library tab under the FDT Build Path and finally set the wmode: “direct” param in your html wrapper. You no longer need to add the ‘-swf-version=13′ compiler argument or swap out the playerglobal.swc as these are now part of the update.

Then you just need create a folder called ‘away3d’ or similar inside your projects src folder and copy the away3d/src classes into it, right click on the src folder and select ‘add to classpath’.

 

Project Files:

Some people have asked for the project files / source codeĀ  – click here to download a zip containing the project files. For the camera movement, basically I’m rotating an empty ObjectContainer3D located in the centre of the globe based on the mouse x and y positions using TweenMax, and then on each frame loop, applying the empty ObjectContainer3D’s transform to the camera’s transform, and moving the camera back so you can see the globe. It should make more sense hopefully if you check out the source code!

The awesome new physics based action puzzler leap ‘em up ‘Flick the Frog’, from developer Adam Cousins is live on the Apple App Store today.

It is a fun mix of action and puzzle solving and uses the awesome box2d physics engine for realistic and responsive physics. It’s very addictive, has the ‘just one more go’ factor and guaranteed to give you hours of entertainment. It is currently 0.99$, with a free ‘Lite’ version on the way.

Make sure to like the Facebook page and follow Flick the Frog on Twitter to stay tuned for updates.

 

Flick The Frog Screens

Earlier this year the agency I work at, Collective London, produced a promo video for the release of Crysis 2. The video involved projecting the game onto various landmarks in London Paris where members of the public could get a sneaky taster before it’s release. Check out Designer Dan’s blog post about it for more info and some photos.

They used my track “Energetic Pumping” for the soundtrack. Here is the result:

Produced for the interactive digital production company Furnace, Tappoles is an addictive, fun and visually stunning multiplayer tap’em up iOS game.

Featuring exciting, competetive gameplay, it is the ultimate ‘tea decider’. Art and design assets by Bora Demirbilek , features music from Badadam .

in game sreenshot

“Whistle Blower” from Badadam. Filthy guitars and huge dirty bass fight for attention amongst tight, solid beats. Huge build ups and euphoric synth leads make the track take off.

Has been used for the soundtrack for the excellent video display promo “Fashion Promo 4″ by motion graphics artist Alex Zlatev. Check out his stuff, it’s great!

Whistle Blower by adamjamescuz