Mavdoc
Local Assets and FX
The other important thing that needs to be done on the stage is the creation of local assets. These are also assets that you can Z-sort with, but they are actually made from the background rooms itself.
Local assets are created by taking one of the 780 x 505 pixel rooms, putting it into a movie clip, then doing a "break apart" on the image. This essentially turns a graphic made out of pixels into a complete vector shape that you can cut and edit. You aren't able to distort, squash or stretch the image, just decide how much of this image you will display, similar to masking.
After an image is broken apart, then you will need to trace the silhouette of the object you'd like to extract from the image, delete the excess, then make it into its own asset. The Sealab Compound example illustrates this technique. This can be a painstaking process, as each point is plotted by hand with the pen tool at a high zoom level to match up with the desired object boundary. Since the original background graphic is in pixels, and you're tracing the shape with vector lines, it's not possible to cutout these objects perfectly. This is shown in the example zoomed in pipe section. If the cutout shapes are as clean and accurate as possible though, when viewed at normal 100% scale like you would in-game, this slight discrepancy is unnoticeable. Each of these local assets have their own reference point that needs to be set so they display correctly. As you can see, the majority of the Sealab Compound is actually comprised of local assets.
Full size
Local assets exist in just about every level to varying degrees. The image below shows examples of what was actually cutout and made into local assets throughout the game. Extra assets like plants and creatures can also be added to these to cut down on individual Z-sorting objects.
Full size
Many times, creating local assets that "work" (doesn't clip avatar/monster/ring FX unnaturally) is quite challenging and a puzzle in itself. A local asset can only be as large as the starting background room image too. So if a feature extends through two or more rooms, several local assets need to be made with breaks between them. A lot of time is spent beforehand just planning how cuts will be made and where reference points will be positioned so that the experience of interacting with them is seamless. This is factored in even as early as the concept phase, which might determine how an environment is designed so local assets will work. To display correctly, the collapsed building shown from Undersea Ledge actually contains 10 different local assets for example.
The main reason local assets are created is for shorter load times. If an entire separate image was made for the lighthouse, aqueduct or bridge railings for instance, all the space that exists below those objects on the background rooms are basically wasted because you'll never see it. Rendering these features out with the background rooms and cutting them as local assets later also allow them to feel more blended or native to the area since they receive all the lighting and shadows of nearby terrain.
Sometimes added to these local assets directly, or else on their own, are the painted lighting FX created earlier. All the elements that contain the lighting are comprised into a rather large set of movie clips setup in a hierarchy, with special tags and blending modes given to certain ones so that they illuminate at night correctly.
One of the next steps in creating a level is to add various special FX throughout the area to give it more movement and life. This might include the swirling gusts of wind blowing leaves in Dead Man's Pass, the billowing smoke coming from Barton's Chat Bar, or the glow of energy coming from the Null Chamber crystal.
But by far, the most prevalent environment FX in zOMG! is water. Whether it is displayed flowing, splashing, falling, receding, dripping, churning or rippling, there is an animation (or more) that portrays that motion. The water FX example shows most if not all of the different water animations that are used in-game. These animations are typically anywhere between 20 and 90 unique frames that loop so the motion is seamless. The very talented artist kirbyUFO that made many of the ring animations also created water and other general environment FX that are used in all existing and new areas created.
Full size
Through different techniques like masking, setting alpha, transforming/skewing and adjusting the overlay blending mode, these animations can be reused all throughout the world to give motion to different water sources that exist. The Under Mountain cave formation asset shown illustrates how these different water animations can be used. For this asset, 5 different types of the existing water FX that kirbyUFO created were used, and through masking, blending and transforming, they helped give the illusion of flowing and standing water to a static image.
Full size
Continuing on next time, we'll cover more types of animated objects that get placed in the game--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
Camera Setup
Rendering and Conversion
Flash Asset File
Flash Level Rooms and Props
The other important thing that needs to be done on the stage is the creation of local assets. These are also assets that you can Z-sort with, but they are actually made from the background rooms itself.
Local assets are created by taking one of the 780 x 505 pixel rooms, putting it into a movie clip, then doing a "break apart" on the image. This essentially turns a graphic made out of pixels into a complete vector shape that you can cut and edit. You aren't able to distort, squash or stretch the image, just decide how much of this image you will display, similar to masking.
After an image is broken apart, then you will need to trace the silhouette of the object you'd like to extract from the image, delete the excess, then make it into its own asset. The Sealab Compound example illustrates this technique. This can be a painstaking process, as each point is plotted by hand with the pen tool at a high zoom level to match up with the desired object boundary. Since the original background graphic is in pixels, and you're tracing the shape with vector lines, it's not possible to cutout these objects perfectly. This is shown in the example zoomed in pipe section. If the cutout shapes are as clean and accurate as possible though, when viewed at normal 100% scale like you would in-game, this slight discrepancy is unnoticeable. Each of these local assets have their own reference point that needs to be set so they display correctly. As you can see, the majority of the Sealab Compound is actually comprised of local assets.
Full size
Local assets exist in just about every level to varying degrees. The image below shows examples of what was actually cutout and made into local assets throughout the game. Extra assets like plants and creatures can also be added to these to cut down on individual Z-sorting objects.
Full size
Many times, creating local assets that "work" (doesn't clip avatar/monster/ring FX unnaturally) is quite challenging and a puzzle in itself. A local asset can only be as large as the starting background room image too. So if a feature extends through two or more rooms, several local assets need to be made with breaks between them. A lot of time is spent beforehand just planning how cuts will be made and where reference points will be positioned so that the experience of interacting with them is seamless. This is factored in even as early as the concept phase, which might determine how an environment is designed so local assets will work. To display correctly, the collapsed building shown from Undersea Ledge actually contains 10 different local assets for example.
The main reason local assets are created is for shorter load times. If an entire separate image was made for the lighthouse, aqueduct or bridge railings for instance, all the space that exists below those objects on the background rooms are basically wasted because you'll never see it. Rendering these features out with the background rooms and cutting them as local assets later also allow them to feel more blended or native to the area since they receive all the lighting and shadows of nearby terrain.
Sometimes added to these local assets directly, or else on their own, are the painted lighting FX created earlier. All the elements that contain the lighting are comprised into a rather large set of movie clips setup in a hierarchy, with special tags and blending modes given to certain ones so that they illuminate at night correctly.
One of the next steps in creating a level is to add various special FX throughout the area to give it more movement and life. This might include the swirling gusts of wind blowing leaves in Dead Man's Pass, the billowing smoke coming from Barton's Chat Bar, or the glow of energy coming from the Null Chamber crystal.
But by far, the most prevalent environment FX in zOMG! is water. Whether it is displayed flowing, splashing, falling, receding, dripping, churning or rippling, there is an animation (or more) that portrays that motion. The water FX example shows most if not all of the different water animations that are used in-game. These animations are typically anywhere between 20 and 90 unique frames that loop so the motion is seamless. The very talented artist kirbyUFO that made many of the ring animations also created water and other general environment FX that are used in all existing and new areas created.
Full size
Through different techniques like masking, setting alpha, transforming/skewing and adjusting the overlay blending mode, these animations can be reused all throughout the world to give motion to different water sources that exist. The Under Mountain cave formation asset shown illustrates how these different water animations can be used. For this asset, 5 different types of the existing water FX that kirbyUFO created were used, and through masking, blending and transforming, they helped give the illusion of flowing and standing water to a static image.
Full size
Continuing on next time, we'll cover more types of animated objects that get placed in the game--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
Camera Setup
Rendering and Conversion
Flash Asset File
Flash Level Rooms and Props
