Welcome to Gaia! ::

Animation, Collision and Switches

Now that we have all the props and local assets created for a level, we have spots to place all those animated critters that are sprinkled throughout the levels to give them added life. The image below shows the majority of creatures that populate the zOMG! areas. For their creation, we had the awesome artists pepper-tea and reapersun creating the vector art and then animating them respectively. By placing them in trees, water, perched or crawling on walls and elsewhere, they add a lot of character to the world.

User Image

Full size

The last type of animations to address are for objects in the world. These are usually turned into switches, which I will cover below. The example image shows the animation for the Sealab Compound door. Animating in Flash looks similar to this whether it's a monster, ring, environment creature or FX. I'll cover some of the basics from the elements shown.

User Image

Full size

On the left, different objects are on their own layer, and sometimes grouped into folders for organization. Some are put into "masks" so that you can define how much of the original object actually displays. The bubble layers are actually FX that are triggered to play at certain times, like when the two door sections first release and separate.

Running along the top is the timeline in frames. So given the speed the game runs at, 16 of these tick marks will be traveled every second if the animation is playing at full speed.

The "s0" type labels represent the current "state" of the object. For a simple door, state 0 might be closed, and state 1 is open. Labels reading "t0-1" and the like are transition labels, meaning it's the animation that will play as an object moves from state 0 to state 1.

The little dots that exist throughout the window are called "keyframes". These are different points in time that represent the current visual state of the object.

The arrows in the blue field are called "Tweens". There are two types: Motion and Shape Tweens. We pretty much only use Motion Tweens, which are basically areas where Flash automatically transitions between the visuals of two adjoining keyframes. So if you have an object on the left side of the screen for the first keyframe, and off to the right for the second, Flash will slide the object between these two points over the number of frames that the Tween exists. This also works for things like rotation, scale, alpha or tint.

Next we can move on to the collision layer for the level. The Dead Man's Pass example illustrates this. All the areas players can't walk is covered by a hand drawn vector shape made similar to local assets. It'll get a special attribute tag applied to it so the game recognizes this as collision and not just vector graphics. The collision applied to separate props get added to the collision layer to form all non-traversable areas in the game.

User Image

Full size

Another game element that needs to be addressed are switches. These are for areas or objects that need to be interactive, or clickable. Some of the more common examples are doors (as shown below), ladders, levers, or anything that you can click on to get a reaction, like a water well or the Wish Tree. When you mouse over any switch in the game, an animated set of gears lets you know that you can interact with this object. A vector object is created in the shape where these gears will display if moused over, and then given a special tag so the game script can recognize it and know what to do when the player clicks.

User Image

Full size

Somewhat similar to switches are portals, which can be seen in the Village Greens screenshot. When you hover your pointer over this green shape, a multi-directional icon will display to let you know you're at the edge of a zone, and clicking will move you to the next one. The blue dot shown is called a target. This is the spot where your avatar will be standing when you come from Bill's Ranch and into Village Greens on the road shown in the image. Each of these objects have a name and attribute tied to it so they know which area to load when activated.

User Image

Full size

We're getting close to the end! Only a handful more things need to be addressed before we're ready to actually try playing the level. Next it's time to wrap up the whole process--

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

Local Assets and FX
ShadowFlame1721's avatar

O.G. Entrepreneur

I haven't even seen some of those animals. xD

Have to pay more attention. ninja

I've never seen DMP that way. Looks really cool.

I pretty much understand the portal thing. Thanks for the report again Mav. smile
Valheita's avatar

Vicious Nerd

10,500 Points
  • Timid 100
  • Nerd 50
  • Battle: Mage 100
So for collision, the game is given a vector shape, the checks whether the player is trying to move into the shape?
Your Bani's avatar

4,900 Points
  • Citizen 200
  • Megathread 100
  • Invisibility 100
Woah out of that whole list of animals I've seen all except for that weird green eye'd thing o.o
Sensual Soul's avatar

9,250 Points
  • Hive Mind 200
  • Elocutionist 200
  • Conversationalist 100
Yay another great post! Thank you so much Mav!! heart
Gonna have to try and spot all of these creatures. <3

And the insight on how things work is very interesting. Thank you for making these "behind the scenes" topics.
Quite interesting, as always smile
_Asyra_Itari_'s avatar

6,050 Points
  • Object of Affection 150
  • Forum Sophomore 300
  • Money Never Sleeps 200
i haven't seen the green thing either o.o a mass of green bubbles with an eye....O_O"

thanks for the post mav! biggrin
Bladeglory's avatar

Shy Werewolf

User Image The Way of the Sword User Image
~~~0==}|3ladeglory~~~

*runs off to test that area in DMP*
Best course I've ever taken, Professor Mavdoc!
Lux Fortuna's avatar

Ruthless Genius

9,800 Points
  • Tycoon 200
  • Somebody Likes You 100
  • Invisibility 100
cool story bro
Myrielle's avatar

Perfect Saint

Interesting.
Valheita
So for collision, the game is given a vector shape, the checks whether the player is trying to move into the shape?


Right, and the game will try to keep you out of it. Those are the areas where your mouse pointer will turn into a red circle with a cross through it.
gataka's avatar

Familiar Lunatic

*O*
zOMGOMGOMG...

Best one yet!

@Bladeglory: YAR. EXACTLY.
Valheita's avatar

Vicious Nerd

10,500 Points
  • Timid 100
  • Nerd 50
  • Battle: Mage 100
Mavdoc
Valheita
So for collision, the game is given a vector shape, the checks whether the player is trying to move into the shape?


Right, and the game will try to keep you out of it. Those are the areas where your mouse pointer will turn into a red circle with a cross through it.
Aha, that's been puzzling me for awhile :3

Quick Reply

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