Welcome to Gaia! ::

Flash Asset File

Now we're all set to begin working in Flash, but before we can start on an actual level file, we need to create the Flash assets file for that level. This will basically contain all the assets that exist in a given level that you can walk in front or behind, or what we call Z-sorting. This refers to the Z-axis or depth. X and Y denotes horizontal and vertical in a 2D space, but when working in a 3D space, there is the added dimension of depth. What we use to determine Z-depth is the reference point of an object. This is one of the most fundamental aspects of zOMG!, and is used to determine how levels are designed, how objects are oriented, and how all these elements will ultimately display.

Each separate object in Flash has its own reference point. This is the point that lets the game figure out what displays "on top". The reference point is positioned on an object right at the spot vertically where another object would be behind it if its reference point was any higher. So an object with a lower reference point will always display on top of objects with a higher reference point. This is how the programming code inside the game knows where everything exists, and how it should be displayed. The location of the reference point horizontally actually doesn't matter at all to the game. Regardless, it is usually placed on objects at the center horizontally or another clear location for ease of use for the person working with it.

User Image

Full size

Fun fact: the Final Fantasy X Rikku avatar was actually one I grabbed off the forums many years ago right after I started at Gaia to help as an avatar scale reference. Over the years, she has been used countless times for all sorts of mock ups, layouts and presentations. She also exists in our archived file directories and in several Flash level files as reference. I still use her in my work flow to this day! blaugh

For objects that have a basically round base shape like the Sakura tree in the example, the reference point is positioned in the center of where this base would exist when it touches the ground, even if this base isn't clearly visible. For objects that have more square bases like the stone lantern, the ideal spot for the reference point is horizontally in line with the side corners of the object. On both sides, this is the spot where an avatar would appear behind the lantern if their reference point was any higher. Although these corners don't always have to be perfectly lined up like the lantern (and usually isn't), it does create the most accurate Z-sorting possible. Assets usually aren't rendered in this orientation just for aesthetic reasons.

The previously rendered and processed png images for the assets are then brought into a new Flash asset file. To work with objects in Flash, they are put into a "movie clip". Think of this as basically an empty container that is used to hold the png. Movie clips can also be nested within other movie clips to form parent/child relationships. zOMG! has a very specific structure that assets and environments in general must possess for the game to recognize them and handle each element correctly.

In the palm tree example, the tree trunk is placed in a movie clip called "gb_palmtrunk_03a". Then this is placed into a "t" movie clip file standing for tint. At this level in the hierarchy, subtle color tints are given to create varieties. This would include making leaves look redder, or making the flowers sitting in the shade under the leaves darker from shadow. Each different color variety is given its own number (t01, t02, t03 etc).

User Image

Full size

Next in the movie clip chain is the "v" or variant. This is where different varieties of the entire asset itself along with other pieces are added. Depending on the asset, this movie clip will also be put into another parent movie clip that is the asset at its highest level. In the example, "gb_palmtree_03_v02" is the second variant created of this particular palm tree, and is made up of the trunk, leaves, and other plant movie clips. Variant "v03" might have bluer leaves with yellow flowers and coconuts below the tree, and variant "v04" could have deep green leaves with more grass and ferns below it etc. Movie clips named "v00" are the assets with no tint changes from the original pngs.

All these pngs and movie clips are filed into folders for organization within the Flash assets file as shown in the library dialog box image.

The large Otami Ruins tree example shows a multitude of movie clips selected showing how each one Z-sorts with each other. Inside the parent movie clip of an asset, elements can be sorted or put into layers however they need to. The entire parent movie clip itself will then Z-sort as one depending on where its reference point is located.

User Image

Full size

The three sets of jungle leaves of the left side of the Otami Ruins tree example shows the only pngs used to populate all the leaves of this type throughout the entire jungle. By using a small, medium and large arrangement of these leaves, and using Flash to scale, rotate and flip these assets, it's possible to create many different groupings that all look unique even though they really only consist of three small elements.

This can be seen better in the Otami Ruins stone torch example image. This shows an asset in the game broken down into its core png elements that comprise it. As you can see in the plants and base of the stone torch itself, each of these pieces have their own shadow. This gives assets a more realistic and "grounded" feel even though it may be too subtle to see unless you're looking for it.

User Image

Full size

Lastly, the pink (actually it's low opacity red) shape is the collision. Collision is placed in areas where players can't walk through, like walls, off the edges of cliffs, or in this case, a solid stone torch. This is not a png, but a vector shape created in Flash. Vector graphics are mathematically generated shapes created by plotted points. Since they aren't made of pixels, they can be scaled up or down as much as needed, and they will never degrade in quality. This is how all ring effects are displayed in game for instance.

Some of the last things to do is to add attribute tags to different assets. Collision is given a tag that allows the game to know it needs to get added to the collision in the rest of the level. I'll cover level collision later. The shadows of objects like the Sakura tree canopy is tagged so that the game knows to use the shadow color to darken the avatar as if they were in shade. When you're walking under a tree or other large object that casts a shadow, the shadow is constantly getting point sampled right where your reference point exists to determine how much to shade you. The different elements of lights and flames are given special attributes too so they are able to negate the effects of night time tinting, plus they illuminate your character in the same way that shadows darken you.

Okay, now that we have the level asset file in order, we can start bringing these asset movie clips and the background rooms over to the level file itself. This is where I'll pick up next time--

Previous topics:
Overview of Environment Art Pipeline

Concept to Flash Implementation

Prop Concepting

3D Model Creation

Asset Organization

Camera Setup

Rendering and Conversion
Interesting o:
That's some cool stuff... far more complex than I originally thought for just graphics~
Very interesting
DrQuint's avatar

Girl-Crazy Ladykiller

So apparently, individual features compose bigger features...

I'm so totally going to be on the lookout for the same leaf on different plants in Otami now. Damn it!

Also, I've got a question. Is it possible to get a picture of a boss lair with the pink collision set as visible over the rest of the assets?
Asking out of pure curiosity of how Hive would look.
Fawking awesome.
Emyre's avatar

Noble Hero

17,700 Points
  • Battle: Mage 100
  • Beta Treasure Hunter 0
  • Millionaire 200

              Very interesting, especially with the shading.
              I was wondering how that worked.

Very impressive. You guys are amazing.

One question: How much, if at all, larger are vector images over, say, PNG's?
Waldo McFish's avatar

5,950 Points
  • Citizen 200
  • Forum Sophomore 300
  • Person of Interest 200
wow that's incredible! I never really thought about all of that flash stuff and what it takes to put these elements together.
Valheita's avatar

Vicious Nerd

10,700 Points
  • Timid 100
  • Nerd 50
  • Battle: Mage 100
*eagerly awaits the collision lecture*
Secks Shae's avatar

Dangerous Elocutionist

6,750 Points
  • Forum Sophomore 300
  • Citizen 200
  • Brandisher 100
This is very insightful, I'd love to get my hands on some of the programs you guys use. I'l have to ask my boss if he has any copies or knows of similar programs.
gataka's avatar

Familiar Lunatic

Whoa man, sweet stuff. I'll need to read that a few more times.
There are way more assets than I thought.
Very impressive. You guys are amazing.

One question: How much, if at all, larger are vector images over, say, PNG's?
Vector images are usually smaller than raster images, essentially because they only need to remember a number of mathematical equations instead of the value of every pixel in the image.
Very Interesting. I never thought that would be so complicated.
God I love these posts crying
So apparently, individual features compose bigger features...

I'm so totally going to be on the lookout for the same leaf on different plants in Otami now. Damn it!

Also, I've got a question. Is it possible to get a picture of a boss lair with the pink collision set as visible over the rest of the assets?
Asking out of pure curiosity of how Hive would look.

Sure thing, here it is: biggrin

Hive World collision

The vector collision gets calculated into these square shapes in game, so this image shows exactly what the collision actually looks like in the hive.

Quick Reply

Manage Your Items
Other Stuff
Get GCash
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games