Massiva3d is written to take a lot of the headaches out of creating your own 3d MMO system.  Unfortunately, 3d is difficult, especially in Flash.  So, if you are just learning Away3d or Papervision this might be an intermediate to advanced level tutorial.  This is also written specifically for the Developers that are going to build their own world.  I will be writing more tutorials in the future on how the 3d assets should be made/implemented, but for now, I’m just trying to lay out enough to get you started.

What you will need

  1. An Influxis hosting account (any size will do).
  2. You will need Flash CS4 to open the FLAs.  The reason for that is Massiva3d uses the Flash10 branch of Away3d.
  3. If you have 3d Studio Max you will need this: http://drawlogic.com/2007/07/30/as3-geom-class-exporter-for-3ds-max-for-pv3d-sandy-and-away3d/
  4. If you don’t have 3d Studio Max you will need this:  http://www.blender.org/ (or a script for your favorite 3d  that will export your model to .AS3)
  5. Once you have Blender installed, you’ll need this:  http://www.rozengain.com/blog/2008/01/02/export-your-blender-objects-straight-to-away3d-papervision3d-and-sandy/ This will allow you to export your model directly to AS3 code that you will import into either your AvatarAssets or CityAssets.fla.  I suggest using this way as opposed to importing a DAE/Collada file due to how much XML is needed to be parsed in Collada files.  They are bloated and slow.

(I’m currently creating an Air App that will allow you to convert your .OBJs/3dsMax/DAE to AS3, so soon you will not need Blender specifically).

The Asset Workflow

There are 4 swfs (AvatarAssets.swf, CityAssets.swf, ExternalAssets.swf, Massiva3d.swf) and 2 XML files (Massiva.xml, Settings.xml) that makeup Massiva3d.  Here is a brief explanation of each file:

  • AvatarAssets – This is the file that you will output with your Animated Avatars and your Avatar Skins/Materials.  The Avatar Assets were seperated from the city assets for loading purposes.  This will also include the 2d version of all of your Avatars.
  • CityAssets – This is the file that you will output with your City/Environment 3d Assets/Materials in.  Your CityAssets will be loaded in the background while the user is selecting/personalizing their Avatar (thus making a shorter load process for your App).
  • ExternalAssets – This is the file that includes all of the art assets for the app.  I have included everything you need in the FLA, so just restyle the assets to your liking and output the SWF.  All of your changes will be seen instantly.
  • Massiva3d.swf – This is the engine (you may want to wrap this in a preloader depending on how many Avatar/City assets you will be loading).
  • Settings.xml – this is the file that includes your RTMP path.
  • Massiva.xml – this is the file that points to all of your AvatarAssets/CityAssets.  The City Assets will be able to be positioned via this file as well.

AvatarAssets.swf/FLA

Please open the AvatarAssets.fla in Flash CS4, and go to the library.  There you will see all how I setup all of the Skins/Materials for the 3d avatars and all of the 2d assets for each different avatar (all of the .PNG files are for the Billboarded version of the avatar).

If you open Massiva.xml and scroll down to the area that has these lines:

<male avatar = “src.ExternalAni” 2d = “Man2d”/>
<male avatar = “src.ExternalAni2″ 2d = “Man3d”/>
<male avatar = “src.ExternalAni3″ 2d = “Man4d”/>
<male avatar = “src.ExternalAni4″ 2d = “Man1d”/>

<female avatar = “src.ExternalAni5″ 2d = “Woman1″/>
<female avatar = “src.ExternalAni6″ 2d = “Woman2″/>
<female avatar = “src.ExternalAni7″ 2d = “Woman3″/>
<female avatar = “src.ExternalAni8″ 2d = “Woman4″/>

Notice that the 2d = “Woman1″ is pointing to the Linkage that I setup for the Woman1.png in the AvatarAssets.fla.  That is how you set up the Billboarded version of your avatar.

Now please open the AvatarAssets.as file found in the src folder, and you will notice a bunch of imports and some public vars.  What I am doing with this, is allowing the files to be pointed to and instantiated by the Massiva3d.swf via the XML (<female avatar = “src.ExternalAni8″).

Now the hard part.  If you haven’t created an animated 3d asset with Away3d there is a good tutorial on how to do that here: http://away3d.com/tutorials/tutorial-how-to-use-the-animator-class.  I’ve also included my own Avatar files that you may use in your own App.  If you do decide to create your own Animated Avatars I have created the ExternalAni.as files as a template for you to use.  I have setup the Avatar files to assign their own Material inside the ExternalAni.as Files.

For the moment the Animator that you create has to be named ani, and only 2 AnimationSequences are seen by Massiva3d.  Idle and Walk (Idle will be played when your avatar is not moving, and walk of course will be played as your Avatar is walking).

Massiva3d creates 2 avatars for you once your assets are loaded.  It instanciates your 3d Animated Avatar, and it creates a Sprite2d out of the .PNG file that you include in your AvatarAssets library.  Why it does this is it loads the 2 versions into a Level of detail object.  Why I’ve set that up is, if the avatar is far away from the user the Level Of Detail Object will switch out the 3d Avatar to the Sprite2d (which frees up all of those used Tris, and doesn’t bog down the client’s system).

This also leads to one of Massiva’s most powerful features: Proximity based billboarding.  What this does, is if the Frames Per Second of the client drops too low Massiva will start to switch out the Avatars from 3d to 2d based on Proximity to the User’s Avatar.  This system will basically keep swapping out the 3d avatars to 2d Avatars until the system is at a level that is can handle it.  I set this up due to the natural tendancy for users to cluster close together.  This would kill the flash player usually, think of 15 Avatars at 300-500 triangles a piece all clustering together.  Depending on the system, flash is able to deal with 1500-2000 tris in such an environment (I say that due to the camera movement, and the lack of static assets).

*Note:  when creating 3d Avatars for Massiva3d (or Flash 3d in general) you really REALLY need to take into account how many Polys/Tris you are alloted for each Avatar.  I suggest less then 500 tris per avatar (yep, that’s 250 Polygons), you might be able to get away with more, but it’s going to be a CPU hog.*

CityAssets.swf/FLA

This is pretty much setup the same way as the AvatarAssets.fla was setup.  I just want to go over a little of the XML in Massiva.xml and how it correlates to CityAssets.

<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>
<world ground = “CG”/>

The world is made up 9 planes.  And each of these planes are assigned their material in order via the materials stored with linkages in the CityAssets.swf library.

<city building = “src.CityBlock1″ x = “-30000″ y = “0″ z = “30000″ scale = “1200″ material = “City1″ 2d=”no”/>
<city building = “src.LowPolyMountain” x = “-60000″ y = “0″ z = “60000″ scale = “5000″ material = “LPM” 2d=”no”/>

These lines should be pretty self-explanitory.  I will explain the 2d property next.

<city building = “” x = “1000″ y = “350″ z = “5000″ scale = “2″ material = “Tr” 2d=”yes”/>

This is a cool feature that is in Massiva3d.  If you keep the building property blank, and you set 2d to “yes” this will create a Sprite2d asset for you.  That line is creating a tree.  Sprite 2ds are great for anything that you don’t want to waste Polys on.  Background assets like, Trees, Flowers, Mountains, Clouds, would all look great using this technique.

Another cool feature of Massiva3d is that any of the 3d City Assets will have a rudimentary Collision Detection in place.  Unfortunately the 2d assets have no collision detection at the moment.  I will be implementing Jiblib’s collision dectection shortly.

External Assets

This FLA includes all of the artwork that implements the User Interface.  Since this is a beta release there is very little built in to move around the assets at the moment.  I will be rolling out advanced controls over the placement shortly.

That concludes the overview for Massiva3d.  If you have any questions or any requests please feel free to e-mail:

massiva3d (at) influxis (d0t) com


One Response to “Massiva3d Tutorial Version 1 (the basics)”

  1. Kristi Kendall

    Substantially, the article is really the sweetest on this deserving topic. I agree with your conclusions and will thirstily look forward to your incoming updates. Saying thanks will not just be sufficient, for the phenomenal clarity in your writing. I will at once grab your rss feed to stay informed of any updates. Admirable work and much success in your business dealings!

    Reply

Leave a Reply

Current day month ye@r *