Mavdoc
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.
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).
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.
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.
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
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.
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).
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.
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.
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
