Creating an Interactive Birthday Card

Sabbatical Project # 3 – “Happy Birthday from The Ceramics Studio!”

In sticking to my theme, I again chose The Ceramics Studio business for the making of my interactive birthday card. In the end, I made a total of three “sort of” games.  [links provided at the bottom of this page]

THE PROCESS:   The mascot, “Coyote Clay” was illustrated by me on a wall in the studio. Later, I redid the studio mascot in Adobe Photoshop™ and Adobe Illustrator™ so that it could be used on the business cards, banners and other marketing materials.

Original mural on the wall at the studio

Original mural on the wall at the studio

 

b-card Black bkgrnd

Business card showing the mascot

image016

The Ceramics Studio staff working a summer street festival with banner (picturing the mascot) showing in background

When the studio started a birthday club, I thought it would be fun to have the kids receive an email birthday card from the mascot, “Coyote Clay” wishing them a happy birthday. The project has three phases:

Phase 1: Build the character, texture and rig it

Phase 2: Animate the character

Phase 3: Format for the following presentations:
pppPart A. an interactive birthday card with 2D animated sprites generated from 3D files
p  p Part B. a 3D real-time interactive character

Steps in Phase 1: Build the coyote character

 image017  image018
Step 1: Box-modeled in 3D Studio Max™ (4360 triangles “tri’s”)
Step 2: Unwrapped models in 3D Studio Max™  coyote-head  COYOTE-BODY-TEMPLATE2
Step 3: Imported the models into Mudbox™ and sculpted them. The sculpting stage is to create an ambient/occlusion and normal/bump map. (2.6 million tri’s)  image021  image022
Step 4: Digitally painted and composited photographs in the making of the diffuse and specular maps using Mudbox™ and Adobe Photoshop™.  image023  image024
image025

Click on image to enlarge

Click on image to enlarge

Click on image to enlarge

Step 5: Extract the normal and ambient/occlusion (AO) maps out of Mudbox™.

Step 6: Export the paint layers for the specular and diffuse maps out of Mudbox™.

Step 7: Composited the AO map onto the diffuse map to make one map. This is accomplished by pasting the AO file into the diffuse file, turning the AO map layer into a Multiplier-type layer and then merging the two.

Step 8: Applied all the maps onto the model in 3D Studio Max™.

Final model

Final model [click on image to enlarge]

Steps in Phase 2: Animate the character

Step 9: Created a CAT™ rig to fit my coyote mesh and attached it using the Skin Modifier.

Step 10: Followed the “principles of animation” in the creation of my animation, while at the same time, made each action begin and end with a neutral pose so that I could connect the actions together in numerous ways, using user-activated triggers.

image028

Interface for interactive birthday card

Steps in Phase 3 (Part A): Formatting for an interactive birthday card with 2D animated sprites generated from 3D files

These rendered frames will be used for animated sprites in the 2D interactive birthday card. [Click on image to see animated loops]

Step 11: Set-up advanced GI lighting with VRay™ rendering engine.
Step 12: Rendered out the animation as a sequenced 32-bit PNG so that I could have my character free-floating (or separate from it’s background) in the game engine.
Step 13: Create a sprite sheet using Sprite Packer. (Reduces file size by organizing all the sprites into one file)
Step 14: Import the animated sprites into a Unity Project.

Step 15: Designed and produced the user interface.

Step 16: Added in all of the user-activated triggers.

Step 17: Save out the interactive project.

Step 18: Create an email that allows the receiver of the e-card to access it with ease.

 Steps in Phase 3 (Part B): Formatting for a 3D Real-time interactive experience

Step 19: Use the Autodesk Material Converter™ to switch out all of the Mental Ray shaders into Standard shaders. GI shaders, like Mental Ray™, are not compatible in the real-time 3D game engine.

Step 20: Deleted the lights and cameras and dragged and dropped the materials and max files into the assets directory of my Unity Project.

Step 21: Added in all of the user-activated triggers.

Step 22: Exported the final interactive “game” and embedded it in my web blog.

unity interface-coyote

Model shown inside the Unity™ game engine

TO VIEW THE “GAMES” BELOW, YOU MUST VIEW VIA FIREFOX BROWSER 120px-Firefox-os_logo-wordmark_RGB_nopad_25%25 AND YOU WILL THEN BE PROMPTED TO DOWNLOAD THE UNITY PLAYER.

  Game #1: unity

jumpin'-Coyote

Click on image to play game!

Game #2: unity

Untitled-1

Click on image to play game!

Game #3:gamesalad

screen-shot_1

Click on image to play game!

I spent a couple of weeks learning GameSalad . Below, I present my game that I managed to create with it. To summarize my experience I’d say that this “visual scripting” software for making games made it possible to create interactivity but the windows version is so buggy that I was unable to complete my simple “hidden objects” type game. In the end, I think it shows promise.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s