Friday, December 18, 2009

"On Screen."

So I was experimenting with ways of showing 'video' or some sort of interface on a screen and I threw a quick model and some textures together.
Again, we're using Away3D in Flash here; and I'm using ColladaMax 3.05C to export my .DAE Animations.

Using the CustomAnimation Class from a previous post, I have my SkinAnimation divided up into 2 segments: 1) A static "up" position where the video monitor starts out. And then 2) a "drop" animation that brings the monitor down and 'activates' it.


In my 3DS Max file, I have a very simple object that is composed of 3 floating monitors and a keyboard connected by some dangling cables to nothingness. The object was unwrapped and I did a simple diffuse+occ render just to create a texture map that had shading. (First mat in the slots)

I then used a default, Standard material in max and took the diffuse up to a bright green color (third mat in the slots). The only other thing you need to make sure to do is NAME THE MATERIALS. The texture map has the name 'CompFrame' and the green material has the name 'GreenScreen'.

I then used another slot to create a Multi/Sub-Object Material. When you click on a material sphere, you should see a button that says 'Standard'. Click the button and the Material Library will pop open. Choose Multi/Sub-Object from the list.

Once you have the Multi/Sub-Object Material created, you will have a number of different slots, numbered 1-10 by default, available for materials. Drag and drop instances of your texture map and the green screen into the respective 1 and 2 slots.  You can delete the rest.  Then assign this material to your model.

NOTE:  For the screens to show the proper resolution of whatever you plan to map to them, they need to be unwrapped to the maximum extents of your texture map. Therefore, when you assign the texture map to them, the texturemap itself should be seen on the screen. See the pic for reference to what I mean.




Once you assign the Multi/Sub-Object material to your model, one of two things will happen. 1) it will either look exactly the same as before. or 2) It will be randomly ladened with green polygons. The safest thing to do before re-IDing your polygons, is to go into Edit Poly --> Element, select the entire element, and then Set ID to 1 (or your texture map ID).

Then, you can switch over to the Polygon sub-object selection mode, click on the polygon (or collection of polys) that will be the screen, and set ID to 2 (or your GreenScreen ID). Pic for Ref.  Once you set the ID to 2, the selected area should then switch from having the texturemap to having a green screen, like in the first pic at the top. Once you're set, export your DAE and then hop over into Flash.

So in Flash, we just have a couple of things to import. The .DAE and the texture map. We're not doing anything special here, so just use Collada.load() or Collada.parse() as you normally would. My setup looks like this:

[Embed(source="/models/CompTest.DAE", mimeType="application/octet-stream")]
private var EmbeddedModel :Class;
[Embed(source="/models/images/ComputerFrame.jpg")]
private var mat :Class; 
private var model :ObjectContainer3D;  // for the model itself 
private var materialArray :Array; // for all of the material assets that may be included.

Normal setup for the Away3D Stuffs. I like to keep things separated into 'init' calls, so my constructor does very little, then I have an init function that will fire initEngine, initMaterials, initEmbeddedObjects, initListeners, then do anything else I need it to do.
 
so, in what I will presume is like your initMaterials function, you will want to have something like:
 
private function initMaterials():void{ 
  var mc:MovieClip = new MovieClip(); 
  mc.addChild(new ColorTest());  // ColorTest is the linkage from the Library.
  var mm:MovieMaterial = new MovieMaterial(mc);
  materialArray = [Cast.material(mat), Cast.material(mm)]; //Our embedded texture + library texture
} 

So, pretty much all of this is key. First, we're making an arbitrary MovieClip (which could probably also be a Sprite, but ey) and then we're adding a child to it: new ColorTest().  This ColorTest is the name of the linkage Class of a MovieClip in my Library.  It's nothing more than a movieclip that changes colors every 10 frames for 50 frames, then loops. It's just a quick example. ;) 
 
So, we're then creating a MovieMaterial using the mc MovieClip we created, then casting that to a material in our materialArray.
 
Now, setting up the object:
 
private function initEmbeddedObjects():void { 
  model = Collada.parse(EmbeddedModel, {scaling:1, material:materialArray[0]}) as ObjectContainer3D; 
  modelContainer.addChild(model);

  model.materialLibrary.getMaterial("GreenScreen").material = materialArray[1];
  var skinAnim:SkinAnimation = (model.animationLibrary["default"] as AnimationData).animation as SkinAnimation;

  ViewAnim = new CustomAnimation(skinAnim);
    ViewAnim.addAnimationSequence("up",0,1,false);
    ViewAnim.addAnimationSequence("drop",1,60,false);

  model.addOnMouseDown(onClickModel);
  ready = true;
}

 
So a key line in the last piece of code is this:
model.materialLibrary.getMaterial("GreenScreen").material = materialArray[1]; 
 
This tells Away3D to find the material that has the name 'GreenScreen' that we assigned in 3DS Max and replace it with the material that we cast in the materialArray's 1 index; which was the MovieMaterial that we created.
 
So I can use that line of code anywhere, now, in the rest of my code to change what material is set on the screen.  In the preview, you'll notice that if you click on the computer to turn it off, it sets to its "off" position and the screens are black.  Click it again, the computer will drop down and the screens will turn on.

Friday, December 4, 2009

CustomAnimation Class Preview

I've made significant progress on the Augmented Reality game I've been working on, and it is now in a Beta Testing phase on the big screen here in the office!

Decided while I had a free moment, I'd upload the character I created for the game in a model viewer to show how the CustomAnimation Class works.  This is a single .DAE weighing in at around 400k. There are 5 different animation sets on the 3DS Max timeline. 0-25 is the walkcycle, 26-27 is idle, 28-38 is a jump, 39-50 is the landing, and 51-70 is a generic 'working' animation (typing on keys.. ish.)

Clicking the model in the model viewer will call the .nextSequence() command from the CustomAnimation Class. But each Sequence can also be called independently with .playSequence(name).