Whith a very unique style and heaps of options you are sure to create some very cooky characters.

This first release consists mostly of the Jayvatar builder, which is where you can create your custom jayvatar by combining any of the various pieces of clothing and accessories. You can also choose between male and female body types, as well as different attributes, such as height, weight and arm length.

There is even a ‘random’ button for the less visually creative that generates a random jayvatar automatically.

Once you have completed creating you Jayvatar, you can save it and share it via facebook, twitter and email. You can also save a version onto your computer for whatever reason you have in mind.

You can also play around with your Jayvatar in the Javatar Playground.
Here you can make your Jayvatarcan fly around the screen, bump items, crash down, etc.

At the moment the playground is just a Beta version so there is only a limited amount of interactivity happening. There full release will allow you to do a lot more.

Below is a version of me I created using the site, as well as some of the random creations it generated for me.

As a bonus, those people from Australia and New Zealand that sign up soon will be given a free $10 voucher to spend in store… BONUS!

So what are you waiting for? Head over to the Jay Jays site and create your own..

A few months back, Visual Jazz (the place I work) was building a new site for Visy called Visy Enviromaniacs. The purpose of the site was to help educate children about the environment, teaching them about recycling, saving energy, etc.

To help make the learning for fun and keep the kids interested, a major section of the site was a series of mini games with a planet saving theme. It was my job to build those games… I love my job

Read on to hear about the games, and then check them out at VISY Enviromaniacs.

Each of the games had a different theme, focussing on different ways to save the environment. To keep things interesting, we made sure that the games were also different in the way that they played. We didn’t one to have 5 of the same game with just a graphics changed.

As always, deadlines were tight, but the managers and designers that I worked with were right on top of things, so it all ended up falling into place.

Here is a quick run through of what we made:

Recycle Frenzy

Recycle Frenzy was the first game we made. It was a bit of across between Bejeweled, Tetris and a sorting game. Pieces of litter would be added to the bottom of the screen, one row at a time. The player would have to drag the pieces of litter the appropriate bin – general waste, recycling, paper or green waste.

If the rubbish made it all the way to the top of the screen, the game was over.

To add a bit of spice to the game, the player could swap the positions of litter by dragging them around the grid. Arranging litter into larger groups before dragging it to the bin would result in bonus points being added to the score.

Also, by filling up the bins the user unlocked ‘power ups’ that allowed them to do things like remove an entire row or column with a single click.

Keeping with the tradition with these types of games, the speed would gradually increase as the game went on, causing for some very frantic game play – hence the ‘frenzy’ part

Energise the Earth

Energise the Earth is a bit of a strange game. It is a very simple concept, but proved to be a bit harder to build then initially thought.

The basic idea of the game is to collect the energy that is escaping from appliances around the house. As you look around the room, ‘energy tokens’ will jump out from different appliances and you have to roll your mouse over them to collect them.

Each room you enter has a specified number of energy tokens you have to collect to successfully pass the room. If you reach that amount, you move onto the next room. If you don’t, it is game over.

There are 5 rooms in total, including the living room, study, kitchen, laundry and bedroom. If you pass all of the rooms, you start again, but with higher umber of tokens required in each of the rooms.

It is surprising frantic and keeping up with the pace can be quite stressful. Good luck!

Wild About Water

Wild About Water was the second game I had to build. This one was a bit more complex and confusing, but one you get the hang of it, it is quite addictive and satisfying.

The idea behind it is that you have to keep on top of all the possible water wasting events that occur around a house. Everything from fixing dripping taps to covering swimming pools to prevent evaporation. When something goes wrong, you are alerted and given an amount of time to fix the problem. The longer you take to fix the problem, the more water you will lose. If you run out of water, the game is over.

It’s not all bad though. When you fix a problem, you are given the chance to collect that water with your bucket, adding to your overall water total.

If that wasn’t enough though, there are a couple of side tasks you have to keep in mind. Firstly, you have to keep the plants alive by giving them some of your water at regular intervals. Secondly, you have to drag dishes to the dish washer and clothes to the washing machine, making sure that the machines are full before they start so that you don’t waste water.

As I write this, it does sound overly complex, but like I said at the start, once you get used to it, it does prove to be a challenge.

Bitter About Litter

Bitter about Litter is all about collecting and sorting litter. Sounds like fun, I know, but the game does go a long way to making it so.

You control a guy, in a park full of litterers. As they drop throw their litter on the ground, you run over and pick it up. You then bring it back to your bins where you quickly sort it into either waste or recycling.

When there is litter on the ground, your health begins to drop. The more litter that is there, the faster your health will drop. When you put rubbish int the bins, you get a bit of your health back – as long as it is going into the right bin. When your health runs out, the game is over.

To add some more interest to the game, the player is awarded bonus points for sorting items of rubbish into the the bins without making mistakes. There are also bonus points for returning with as much rubbish as you can carry.

Another nice feature we slotted into the game is that the character in the game actually takes on the look of the player’s ‘enviromaniac’ avatar. A small thing I know, but still pretty cool.

Pick Your Packets

Pick Your Packets is all about learning and identifying the different packaging types you may encounter in the super market.

The player is given the task of sorting the various products into either good or bad packaging types. Good items get scanned and added to the shopping basket, bad items get returned to the store. To help them out, when ever they pick up a product a small description is displayed on the check-out display.

As the game goes on, the items on the conveyor begin to come out more rapidly. If the player is not fast enough, the products will begin to back up, causing the players health to drop. If the health reaches 0, the game is over.

Thats pretty much it so far. If you are interested in checking them out just head over to the VISY Enviromaniac site. Also, big Kudos to the team at Visual Jazz who I work with. They did an awesome job on building the site. You can read a bit about it on the VJ site here.

Did you ever get the feeling that you were being tested? That’s what happened to me with this site. The designers I work with at Visual Jazz really like to push us developers some times.

When I first saw the designs for it I remember saying to myself ‘Gosh darn! How is one supposed to go about doing that??’ (I may have used some more colourful language but you get the jist) I had never done 3D before, and that was just the beginning. There was depth of field, keyed out video, and a pile of information to be displayed.

Luckily, it all came together in the end – you can read about how in this post.

The main idea behind the site was for a big 3D column with 3 spiralling streams of video screens wrapped around it. The user could spin and pan the column around to see the different screens. When they click on one, it would come to the foreground where a video would then play.

The first place I started was to learn about PaperVision 3D. Luckily for me, there is a huge number of posts and tutorials to get me started. Yay for the internet!

Once I had the customary 3D primitives floating around on screen, I started looking into the problem of faking depth of field. The idea I had was to create a series of blurred textures for each object, then swap them out based on their distance from the camera. If you want a bit more detail on this, check out an post I wrote on it here.

There were of course some other tricky items involved – because the screens have some depth to them, simply blurring the textures did not look right. I had to make it so that when the screens got about halfway back, they were swapped over with a basic plane.

The next 3D problem was the curved lines. We could have just had some curved lines modelled up in max, but because we wanted the lines to blur, they had to be done in a similar way to the other blurry objects. I ended up coming up with a bit of code that would generate the curved lines from a series of small straight lines, basically aligning them from end to end. This allowed me to blur individual segments, which wasn’t a perfect result, but worked pretty damn well.

I can’t even remember the exact method – I just know that it included a fair bit of trigonometry and experimentation.

The last 3D part was getting the videos to line up with the 3D screens when they were selected. It took a bit of playing around, but after a bit of googling and tweaking some figures I finally got it all lining up nicely. There is bit of a formula to getting 3D graphics to line up, but once you know it, it just works.

Oh, as for the big green curved shapes, they were pretty simple. They were simplymodelled up by the 3D guys and loaded into the scene via a Collada (DAE) file. Apart from some minor texture path issues, they were probably the easiest parts of the site.

The videos themselves were pretty cool. Each of the students represented on a screen was filmed on a keyed background, walking out from behind the panel. They would then introduce themselves before returning back to behind the panel. It was a pretty simple trick, but proved to be quite effective. There was a little bit of trickery involved getting the walking in and out to look right, but we got there in the end.

After all of that, the only remaining content was a series of different informational pages. These were pretty straightforward and were achieved by using a template system that was run off of XML based content. This allowed us to easily add and edit content to the site without the need for an entire rebuild.

Overall it was a pretty cool project, so check it out if you get the chance – Sciences at Melbourne. You can also read about it on the Visual Jazz site.

Sometimes in this line of work someone gives you a job that is nothing but fun.

Visual Jazz was rebuilding the entire Baker’s Delight website, and as a bit of a side project we were given the task of building a virtual bakery in Flash. The bakery was to be a high gloss virtual representation of one of their stores, allowing visitors to browse through a sample selection of their products.

It was a simple project with a pretty cool looking result. Read on to find out some of the features, and then check it out at http://www.bakersdelight.com.au/virtual.html.

Going through in a chronological order, the site starts off with a steaming loaf of bread. The loading progress of the site is spelled out in the steam coming off of the bread. This neat little trick was created using DisplacementMap filters in Flash. It was a pretty simple trick, once I learned out displacement maps actually worked.

After that, the user is presented with the store front. All of the different categories are laid out on display in the store. The store was set up such a way that it panned and distorted based on mouse movement, giving the slight feeling that you were looking around a store. It is a very subtle effect, but took some careful cutting out of graphics to make it work without looking like a room made of rubber.

A staff member is situated in the store holding up different promotional signs. These signs can be easily swapped out for different promotions, and linked to any external pages required.

As an extra subtle little thing – if you look closely at the counter you will see that it reflects the mouse along its curved surface. This again was created via the use of displacement maps.

When the user clicks on a category, the camera zooms in on the staff member, who holds up a board displaying all of the products. The products are displayed in a traditional paged grid system. Nothing too fancy going on here – but it does look pretty clean.

When a product is selected, the grid collapses down to a single line so that the details of the product can be displayed. This looks like a simple enough effect, but getting this grid to figure out how it should collapse and expand proved to be one of the most difficult tasks on this site.

The detail view of the product displayed the usual information you would expect. The cool, and possibly over the top, part of this page was that some of the products were shot in a 360 degree fashion, allowing the user to spin/rotate the product around so it could be seen from any side.

That about sums it up. I love it when I get to work on projects like this

You can check out the entire new Baker’s Delight website at http://www.bakersdelight.com.au/. You can also read about the project over at the Visual Jazz site.

Working at Visual Jazz does expose me to some interesting scenarios/ I mean, playing with dolls for a couple of weeks isn’t my usual idea of a good time, but this funky little microsite had some pretty cool features that had my brain ticking over the whole time.

Some interesting 3D modelling and animation coupled with my first attempt augmented reality in flash made for some puzzling times. Drench all that in a healthy dose of girly-ness and you get www.livinmyworld.com.au.

Read on to find out more some of the more nerdy details

The idea behind the Liv doll site was to invite visitors to try out some of the different clothing accessories on a 3D version of a doll. Once they have found a look that they are happy with they can use a webcam and augmented reality to take a photo of themselves posing with the doll. This photo can then be saved, printed or sent on to their friends.

My job as the ActionScripter was to take all the designs, models and animations and make it all work. Easy peasy… sort of.

The base of the site was pretty simple. It followed a basic page structure using on lots of flat colours, shading and bouncy transitions to help bring the site to life. Overall it was a very ‘happy’ site and I had a lot of fun putting it together.

The tricky stuff started with the 3D. Papervison was my weapon of choice. Mostly because I had used it before, but also because we hit some early snags with Away3D and I didn’t have time to try and resolve them.

Because we were allowing the user to change the hair, top and pants on the 3D model, each part had to be imported separately. The 3D guy had loads of fun generating the different clothes, animating them, and then splitting them up for me.

These split up files meant that I needed to create a way to manage the loading of models and the related textures. That was easy enough, but part way through the process we noticed that some of the model combinations resulted in clipping. This didn’t look very good and actually had an impact on the performance.

I discovered that if I applied an alpha channel to the offending model’s texture, the clipping went away and the performance improved (Sounds strange right? Adding transparency made it run better? Go figure). With this in mind I created a data management object which would load the required models and textures, then figure out what masking was required to make it all look good.

Sounds easy when I write it like that, but it actually got quite complex. I basically had to write a matrix that would look at what clothes you were matching up, load the required textures, then merge the alpha channel with the textures before finally applying it to the model.

Next big thing was the animation of the models. Not that playing the animation was hard, but keeping all the models in sync as they were swapped around was. The animation controls in PaperVision weren’t the greatest for what I needed to do so I ended up using the DAE MC2 classes. They allowed me to treat the animations a bit more like a MovieClip, so it was a lot easier to keep everything in sync.

The final big hurdle was the Augmented Reality (AR). For this I used the awesome FLAR ToolKit for this. Unfortunately, a lot of the docs were in Japanese, so I ended up hunting down a tutorial/example over at Mikko Haapoja’s Blog. This got me up and running in no time.

Out of the box it didn’t perform as well as I would have liked, so I spent a bit of time tweaking the code to make it run better. Nothing too spectacular, just simple things like shrinking the size of the webcam image to reduce the number of calculations required and only calculating ‘every other’ frame.

Another little tweak I did was to apply a basic ‘ease’ to the model position. This helped smooth out the little motions that the camera picked up and helped make AR feel much more responsive.

That’s about it.

Overall I am extremely happy with the site. The designers and 3D modellers I work with at Visual Jazz did an awesome job of building the assets and despite the technical difficulties I mentioned above, it all came together well in the end.

If you haven’t checked it out already, go have a look at it here. You can also read a bit about it on the VJ Site.

Colorado is tough at work and at play. Thats the idea behind this microsite that I helped build at Visual Jazz. The whole thing was built in flash and oozed manliness from start to finish.

It was my job to do all the flash programming to make this site come to life.

Read on to hear me ramble on a bit more about some of the details.

The main base for the site was split into two different sides. One side was the rough and tough ‘work’ side, full of rough, dark, industrial areas. The other side was the brighter ‘play’ side with a much more fun feel.

Different sections of the site were related to either work or play. When a section was navigated to the entire background would pan left or right using a pretty cool parallax effect, with all the elements moving at slightly different speeds. To help give a bit of atmosphere, I did some quick little animation effects. These included some random floating clouds the work their way across the screen, as well as a random flock of birds that can occasionally be seen flying in the background.

Page elements animated into place using quick, almost ‘bouncy’ motions, tweaked slightly to make the elements feel as though they had some weight to them. The panel that is used to display second level information is a very good example of this, as is falls into place like a heavy bit of steel.

I set up the base code for the buttons in such a way that the designers could easily create custom animation effects. Examples of these can be seen throughout the site, as every major button tends to have a unique animation applied.

One particular page of note was the accessories page which used a series of photographs to generate a 360 degree view of the vehicle. As the user drags the vehicle around, different features come into view, allowing more information to be displayed. I wish I could say that this was done using some fancy coding, but it is actually a carefully laid out timeline animation controlled via some code.

Full credit has to go to the designer for this site. The rough ‘manly’ feel of the site really worked well, and the elements he gave me to work with made my job a pleasure.

Although it was created a while ago, it is still a pretty cool site and can be checked out at http://www.holdencampaign.com.au/colorado/. You can also read about the project over at the Visual Jazz site.

Last year, Jetstar ran a photography competition that was open to both amateurs and professionals. There were 5 categories that people could enter, with the only requirement being that the photograph be taken in one of the destinations that Jestar flies to.

Overall the site was a big success and ended up getting over 35,000 entries.

The entire site was built in Flash and working at Visual Jazz, I was on the team that helped put it all together.

You can check out the site at http://www.jetstarphotocomp.com/ then read on here for a brief run through of what I did on it.

Overall the site wasn’t overly huge. There was only about 6 different sections to the site, but some of them were a little bit tricky due to the integration with the backend database.

The major part I worked on was the photo gallery, which ended up being one of the more complex parts of the site.

The main code for the gallery was based on TiltViewer. It did everything it was supposed to very well, but it had to be altered a fair bit to achieve the desired effect. It had to be set up to work with the custom CMS that had been developed in house, as well as display a custom ‘detail’ screen of the image.

It also needed to be able to support deep linking to particular photos via the use of SWFAddress, as well as the general filtering you would expect on a gallery of this type, including category and keyword.

On an nerdy note, I had to do some alterations in order to improve the performance, due to the fact that the images we were showing were a fair bit bigger then would normally be used. This included, strangely enough, limiting the amount of tilt that was used on the grid – I’m guessing that had something to do with the 3D engine?. The other thing, which made a bit more sense, was to reduce the complexity of the transitions used.

The other section that I worked on was the home page – it basically just showed the photos of the week, which were pulled from the database via the CMS. In relation to the gallery, it was not very hard at all

You can check out the site at http://www.jetstarphotocomp.com/. You can also read a bit about it over a the Visual Jazz Site.

Apart from the cool design, the best part of the site is the tiny little characters walking around the site – sitting, dancing, etc.

For those of you that don’t know, every employee at VJ is has a custom designed avatar created for use in their emails, business cards, presentations, etc. My little character is off the side here – A man in a gorilla suit working at a laptop.

The plan for the site is to eventually have everyone’s avatar appearing on the site randomly. You can identify each avatar by rolling your mouse over them – their name will appear above.

As an added bit of fun, you can throw characters into the air and see how far they travelled. For the record my best is about 2000m, but I have heard rumours of people breaking the 3000m mark.

My avatar recently made it onto the site, so check it out at http://www.visualjazz.com.au and see if you can find me.

One of the new updates is this new section dedicated to random, trivial stuff that spews out of my brain. I would post a link to it, but if you are reading this you are most likely already in the Ramblings section, and I wouldn’t want to create an infinite loop that could destroy the world.

Stay tuned for other random bits of information!

Recently I did some work on the a project that required me to use some Displacement Maps. I have never used them before, but after playing with them for a bit I soon realised something… they are very awesome.

They do take a little bit of getting used to, so to help with the experimentation I created this little app that makes it easy to test out different image and maps combinations.

The app lets you load in your own images (or use some of my defaults), adjust all the displacement settings and see the final result. It also generates ActionScript 3 code you will need to re-create the effect in your own project.

Check out DisplacementMap Tester

Now, I was going to attempt and explain what a Displacement Map is and how it all works, but I realised that there are already a bunch of resources out that that can do a better job than me. One in particular that I found quite helpful was this article written by Emanuele Feronato. Most of it is written in AS2, but the concepts are still the same.

Update

I recently created a quick AIR version of this tester so that you don’t need a net connection to test custom images. Its not anything fancy. Just a direct port of this web version, but with local file read access.

You can download the AIR version here: Displacement Map Tester (Air Verion).