Welcome to Gaia! ::

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.

User Image

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.

User Image

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.

User Image

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.

User 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
Kats Kokeshi Doll's avatar

8,700 Points
  • Team Jacob 100
  • Conversationalist 100
  • Clambake 200
Kirby did a fantastic job on the water, I've always loved how it looked. o3o
Lei_Trigar's avatar

Noble Survivor

Awesomeness!

and yeah i loved the waterfalls
Kats Kokeshi Doll
Kirby did a fantastic job on the water, I've always loved how it looked. o3o
This. 3nodding

That outline-ing seem mindnumbing and painful D:
DrQuint's avatar

Girl-Crazy Ladykiller

Water = static pictures.

Well I didn't I bother to check yet?
Druddigon's avatar

14,650 Points
  • Partygoer 500
  • Vicious Spirit 250
  • Restorative Spirit 250
Love the water effect o3o very nice.
Toxic_Trumpeter's avatar

Omnipresent Sophomore

11,500 Points
  • Partygoer 500
  • Marathon 300
  • Millionaire 200
Koleda's avatar

Magical Cleric

Awesome.
I love the water effects. c:
Queen Cherry Fluff's avatar

7,350 Points
  • Generous 100
  • Signature Look 250
  • Friendly 100
*Stares in awe like a monkey to fire* O:
Clear Rainx-'s avatar

Shy Streaker

Wow. Very interesting.
That's so cool! o_o
gataka's avatar

Familiar Lunatic

This particular episode makes me feel the weight of all the work needed more than the ones before. It may just be because it's the tenth one. D:

I'm going to take a shower in the Waterworks.
ShadowFlame1721's avatar

O.G. Entrepreneur

Looks great as usual Mav. ninja
Looks really great.
You devs do a great job making the game wonderful.
-xcottoncandayx-'s avatar

Unbeatable Noob

10,150 Points
  • Partygoer 500
  • V-Day 2011 Event 100
  • Friendly 100

Looks cool! -thumbs up-

Quick Reply

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