-Rob Galanakis
Founder, tech-artists.org

Drew Sikora

Executive Producer, GameDev.net

This is an affiliate program banner - registering for design3 will also help benefit GameDev.net!

Figure 1: The Characterization Tool makes defining bones in Maya easy.

Figure 2: Maya 2012's new Interactive Split Tool lets you make precise cuts on the surface of a mesh object.

Figure 3: Mudbox 2012 allows you to create and use custom stencils while painting and sculpting.

Figure 4: Using Softimage's ICE interface lets you automatically create and texture polygons to fill out a scene.

Figure 1: Adobe Color Lava is a simple app that lets you mix colors on your
tablet device and transmit the mixed colors back to Photoshop.

Figure 2: Custom portfolios are easily created using the wizard located in Acrobat X Pro.

Figure 3: Combining video and audio into a single track makes them much easier to work with.

Figure 4: InDesign documents can be overlaid with interactive elements that are active when viewed on a mobile device.

• Modeling
  
• UV Unwrapping
  
• Texturing
  
• Rigging
  
• Water &Smoke Simulations
  
• Skinning
  
• Animating
  
• Rendering
  
• Particle Simulations
  
• Non-Linear Editing
  
• Compositing
  

This is an affiliate program banner - registering for design3 will also help benefit GameDev.net!

Figure 1: The default Rock Falcon character is easily lip
-synched using the new Automatic Lip-Synching Tool.

Figure 2: The Viewport and Render Slate options let you place scene
data within the viewport or on the rendered frame.

Figure 3: ICE trees allow you to program the behavior
of scene objects without having to work in code.

Figure 4: Flat lights add ambient lighting effects to the scene.

Figure 1: The default Rock Falcon character is easily lip
-synched using the new Automatic Lip-Synching Tool.

Figure 2: The Viewport and Render Slate options let you place scene
data within the viewport or on the rendered frame.

Figure 3: ICE trees allow you to program the behavior
of scene objects without having to work in code.

Figure 4: Flat lights add ambient lighting effects to the scene.

Figure 1: Using the Nitrous display drivers, you can switch to stylized rendering options like Colored Ink and Pencil.

Figure 2: The destruction of this brick wall uses the MassFX simulation system to animate the brick's movements.

Figure 3: Substance textures are only a fraction of the size of normal bitmap textures

Figure 4: The iray renderer progressively improves the result given the amount of time

New Product Features

Figure 1: Single step interoperability allows a complex dataset to be instantly loaded into another Autodesk product with a single command.

Figure 2: Physics in both 3ds Max 2012 and Maya 2012 now use NVIDIA's PhysX engine.

Technology Preview of Project Skyline

Figure 3: As the character is moved in the game engine, each animation is displayed within a timeline interface in Maya.

Figure 4: Technical artists can use a Maya tool to define the interactions of the character in the game engine.

Summary

10.1. Importing 3D Using 3DVIA

Fig 10.1

Fig 10.2


Fig 10.3


Fig 10.4 Open “skyscraper.psd.”

10.2. Creating the Layout

Fig 10.7

Fig 10.8

Fig 10.9

Fig 10.10

Fig 10.11

Fig 10.12

Fig 10.13

Fig 10.14

Fig 10.15 Place “concrete.jpg” into a new layer.

Fig 10.16


Fig 10.17

Fig 10.18


Fig 10.19

Fig 10.20 Change the blend modes of the vector shapes to Overlay.


Fig 10.21 Apply dirt to the road.

Fig 10.24

Fig 10.25

Fig 10.26


Fig 10.27 Apply additional texture to road.

Fig 10.28

10.3. Texturing the Walls of the Buildings

Fig 10.29

Fig 10.30


Fig 10.31 Add “wall texture 004. jpg” to enhance image.

Fig 10.32


Fig 10.33

10.4. Lighting the 3D model

Fig 10.34

Fig 10.35

Fig 10.36

Fig 10.37

10.5. Adding the Wet Look to the Street

Fig 10.38

Fig 10.39

Fig 10.40


Fig 10.41

10.6. Adding Localized Bump and Reflective Characteristics

Fig 10.44

Fig 10.45


Fig 10.46

10.7. Adding Depth of Field and the Splash

Fig 10.47


Fig 10.48

Fig 10.53


Fig 10.54

Fig 10.55

Fig 10.56

Fig 10.57

Fig 10.58

With a little more enhancements to the headlights as well as a light spill onto the street (separate layer set to Overlay with white added to the street), Figure 10.59 shows the final render.

I really do hope that you enjoyed this chapter. For more information on myself and my art please go to www.chromeallusion.com

Fig 10.59

The Development Dream Team

Capturing the Fighter's Nuance

Setting the Ambiance

Landing a Punch--Creating Fighter Interactions

Conclusion

The EA Tiburon Studio, based in Orlando, is no stranger to player vs. player interaction. As the studio behind the Madden juggernaut, the Fight Night series and several more sports-related titles, they essentially wrote the book on interactions between game characters. Their latest release has pushed the authenticity of character interactions and deformations closer to real life than ever before.

Mixed Martial Arts (MMA) is a brutal, bloody sport that requires close contact between fighters with muscles and sinew only hidden by an occasional tattoo. Capturing the full effects of the body's deformation to a hit or a kick is essential to the realism of the sport and the studio has revealed some interesting facts about their knowledge in creating such realism.

The Development Dream Team

The EA Tiburon team responsible for the MMA title was refreshingly open about their processes and techniques and the interview questions shed some light on this tricky endeavor. The responsible party includes Rob Hyder, the Lead Producer; Simon Sherr, Animation Director; Volga Aksoy, Graphics Engineer; Rob Williams, Gameplay Engineer; and Jerry Phaneuf, Art Director.

Game development for the MMA title started back in 2007 with a team of five or six putting together basic game functionality, designs and an animation prototype. From here the team grew steadily and the entire project was completed in just over two and half years.

The key to completing this game in a relatively short timeframe was that the team had access to a lot of technology that was created for the other EA Tiburon released games. This allowed them to focus on making a great game without having to build everything from scratch. The team harvested animation, rendering, sound, AI, speech, load/save and online pieces, which put them ahead of schedule.

A good example of this was the animation system. Rob Hyder mentioned, "Our animation system allows animators and designers to create base gameplay without the need of an engineer. Adding new punches, adding ground positions, changing timing windows, changing damage or reaction severity; all of this can be done independent of any coding. This gives us much faster iteration times, and it allows our engineers to focus on other more difficult problems like physics/animation interaction or putting in online features like Live Broadcast."

Capturing the Fighter's Nuance

Each MMA fighter has a unique look and style and capturing these is paramount to the game experience. The polygon budget for a single fighter (including shorts and gloves) was roughly 40,000 triangles with the head having 8500 and the body around 11,000.

The various texture channels also added to the realism of the fighters. Each fighter had 1024x1024 textures for the albedo (diffuse), regular normal, flexed normal, specular mask (with specular cosine power as a separate channel), sweat breakup normal, damage and blood zones, reflection cube map and ambient occlusion texture channels. They also included several runtime-generated textures like SSAO (Screen Space Ambient Occlusion), SSS (Sub-Surface Scattering) and shadow maps, which contributed to the final look of the fighter.

A good example of how textures were used to create realism was in creating the sweat trails. These sweat trails (Figure 2) were created using a specular mask that is ramped up over the duration of the fight. It is combined with a sweat normal texture that starts to blend in over the regular normal map when sampling the reflection cube map. There were also sweat particles that spawn from predetermined points to fall to the ground.

Tattoos (Figure 3) and scars are another common defining element of many fighters. Volga describes how these were baked into the diffuse texture, "When a fighter is being loaded into memory, the necessary tattoo images are also pulled into memory as well and baked into the albedo (diffuse) texture of the fighter using a ’UV translation’ mesh, so that the tattoo image can be warped properly to match the UV layout of the required zone on the fighter body or face. Once the tattoo is baked into the texture and DXT compressed at runtime, the pre-loaded tattoo image is unloaded from memory as it won’t be used anymore."

Clothes, unlike tattoos, are standalone meshes with their own textures and shaders. They are skinned to the same joints as the fighter they are fit to. As part of the Create-A-Fighter feature, any logos that are added to a fighter's shorts are baked into the texture at load time. This prevents having to load the logo textures while rendering. To make sure that the body does show through the clothes, a z-bias was added to the shader that renders the clothes.

The hair was modeled using a "hair cap" to define the base color and scalp volume; "hair cards," which contained the alpha to coverage polygons, were used to create the semi-transparent hair. The team was fortunate that there weren't any really long hair models, so physics wasn't an issue.

To capture the fighter's motions, each fighter was recorded performing a base set of motions along with any fighter-specific strikes using a portable XSens MVN motion capture suit. These recording sessions took place at the studio in Vancouver and also at Orlando's Florida Interactive Entertainment Academy (FIEA) facility.

The motion capture data was used as a starting point. The data was loaded into MotionBuilder and heavily keyframed to match the gameplay requirements and visuals. All fighters share the same source animations, but the procedural animation system lets the team tune the visuals in real-time giving each fighter a unique look and feel.

During the motion capture sessions and as the game development progressed, the team had the chance to interact with the various MMA fighters. Rob Hyder describes this, "One of the best parts of this project was the time we got to spend with the fighters. These are great folks, very humble, very real, and often times funny, insightful, and wise. There were some worries about whether these guys were going to be cool to work with. My team actually used this concern that I had about one of the fighters, Jason’Mayhem’ Miller, to play a prank on me. Jokes aside though, Mayhem is a really cool guy and our team loves working with him and the rest of the fighters in our game."

Setting the Ambiance

The fight audience was pulled from the Fight Night crowd and retrofitted for this game. It consists of 10 basic animations that are offset and spaced apart. Simon says, "The key is avoiding large repetitive motions that would pull the eye away from the fighters and/or animations."

The venue lighting is supplied using light maps that are stored as 8-bit RGBE textures and all specular surfaces had environment maps applied with normal maps to break up the highlights.

Lighting the fighters was accomplished using a relatively dim directional light coupled with the surrounding ambient light that is emulated through the environment maps. For subtle lighting across the fighter's face, Volga said, "we also used a novel SSAO (Screen Space Ambient Occlusion) technique as well as SSS (Sub-Surface Scattering in UV space) that is specifically tuned to work for all of the different skin tones we have in the game. As for specular highlights, we used the Kelemen-Szirmay-Kalos model for the directional light as well as using reflection cube maps to capture the subtle breakup of the reflections over the skin during the sweat buildup."

To animate the ring ropes, collision discs are placed along the length of the ropes whose extents are compared to the skinned limits of the fighter mesh and the results are fed to the ring ropes vertex shader.

The sound effects were created by an Academy award-winning sound designer. Rob Hyder describes how some of the Foley sounds were obtained, "I believe that one of the most successful was a large beef roast that he purchased and then proceeded to punch and hit with various implements until he got the sounds he wanted."

Landing a Punch--Creating Fighter Interactions

Regardless of how realistic the fighters look, it is the interaction between the fighters that has a greater impact on the realism of the fight. The team made heavy use of motion blends for procedural animation tuning to create the fighter interactions. Simon describes this system, "We have a system that allows us to layer, override, and subtract or add animation to any part of the body at any time (similar to Photoshop layers). We also have several tools for controlling the visuals of blending animations and make heavy use of those tools on MMA."

Contact between the fighters was created using a non-uniform player scaling system, a relative IK system and a series of what the team called "touch tags." These touch tags used the HumanIK feature included in MotionBuilder to adjust the animation in and out of a specified target.

The HumanIK feature in MotionBuilder was also used to define foot positions and prevented the foot from slipping as the body moved. It was also used to retarget animations to various skeletons and to maintain contact with opponents. Finally, the feature was used to track the fighter's head, which the team referred to as "head tracking with attitude."

The MMA team tried to avoid the use of any physics-based system when animating the interactions between the fighters. Simon mentioned, "we felt that it was important to maintain that visual ideal of “intention” in our actors on screen, so we use Fight Night physics to clean up interpenetrations, but we use other procedural animations systems, which are very often "informed" and driven but not posed by physics simulation. The idea was to give the artists control over the characters’ posing while allowing physical simulation to often drive the animation decision tree."

To create the effect of an impact on a fighter's face during the slow-motion replays, a cloth simulation was used. This worked by having the artists paint a mask over the face vertices that indicates which vertices to include in the cloth simulation. During the simulation, the direction and force of the punch was fed into the simulation as an extra force.

Particle systems were used to trigger blood spray, sweat cloud spray, spit spray, dripping blood from gaping wounds, and ambient sweat dripping. The blood, sweat and spit used a high perparticle cohesion value to create a "stringy" effect as they travel through the air.

The MMA team spent a lot of time researching skin rendering. This is apparent in the damage model that was developed for MMA including how cuts break and develop further by bleeding and running. The face also becomes deformed to accommodate swelling.

Another trick that added to the realism of the fight was to allow the blood to transfer to the opponent's body and to the canvas. To get blood on the mat, the team simply renders a special pass of the particle system into a texture that is only sampled at runtime. After a few seconds, the blood particle starts to fade out, but its position is rendered onto the mat's blood texture where it persists throughout the match.

Concerning the game's AI system, Rob Williams describes the team's four AI goals, "First, don’t be a sap. The computer does not take any action taken by the opponent as a cue to do a negatively predictable behavior. Second, be yourself. A certain level of predictable behavior must be built-in, at least enough so a fighter performs in a way that agrees with their real-life counterparts. One fighter may prefer or be more skilled at stand-up striking, while another may prefer or be more skilled in the ground game. Third, mix it up. Within the constraints of behaving as the real-life fighter, unpredictability can be done by collecting the preferred actions of the fighter and choosing one at random, with actions more greatly preferred by the particular fighter given greater likelihood of being selected. Finally, live and learn. In all situations the computer observes which fight tactics yield positive results for the computer, and which behaviors yield negative results, just as a human fighter does in a real match."

Conclusion

EA Sports new MMA game has been called "the most-realistic fighting game ever." With advanced tools and skilled artists, the results are dramatic. The effort put forth by this team has added realism not only to the character's look, but also to how they interact with other fighters and with the environment. Certainly the team has pushed the envelope. For MMA fans and gamers that enjoy realistic fighting games, this is definitely one to check out.

Kelly L. Murdock works as a freelance consultant and author. He has written extensively on 3D graphics including the 3ds Max Bible and many other titles.

Online and MMO games have very specific requirements when it comes to world design. Because multiple players need to interact in the same environment, this requires large environments instead of designing distinct game "levels". Supporting such large environments introduces many new technical and design challenges for run-time technology in game engines.

Screenshot of Arcania using the Vision Engine

A standard method for handling this challenge is loading all of the assets at start-up. But this does not scale to larger game worlds because of issues like loading times, memory footprint and the need for cooperative editing.

This article will cover ways to get around this challenge by using the art tools in your game engine.

Improving Streaming with Art Tools

Cooperative Editing – Art tools should allow for cooperative editing so that multiple people can work on the same world at the same time. To avoid conflicts, your team can store each scene as multi-layered files. These layers can be locked and edited independently, allowing different people to work on the same scene at the same time and synchronize the files with network shares or revision control tools.

Get Rid of Monolithic Files – The second art tool requirement is to make the world data stream-able. This means no monolithic files. Large files should be broken up into separate files for easier editing and streaming. This will also make it possible to load or unload specific parts of the world faster.

Recycle Meshes - The art tools must also support the re-use of mesh instances. Re-using meshes between object instances reduces your memory overhead and the amount of data you need to stream. Game engines such as the Vision Engine have modified its exporters to export large scenes as separate meshes and detect shared instances.

vForge - the Vision Engine’s terrain editor

Resource Management – Tools need to be able to determine all of the resources needed by a scene. In this example below, the scene depends on a mesh. This mesh in turn depends on shaders and textures.

Resource management in the Vision Engine

Some game engines have a built-in resource management system that can see and report on dependencies. With these resource management tools, it’s possible to calculate and store all the resource dependencies of the world when baking the data so that you know exactly which resources need to be loaded and which order to load them in. Without this information, there is no way of knowing that a mesh needs a specific shader texture before the mesh is loaded.

Data Grouping - The fifth tool requirement is grouping data so that it is suitable for editing, baking and streaming. Some game engines (e.g. the HeroEngine, BigWorld and the Vision Engine) automatically split the terrain into a 2D grid of sectors. Each terrain sector is a data group that’s more manageable to edit, bake and stream.

The whole terrain can require a few 100MB of memory. To improve streaming, you should only keep the relevant sectors in memory and use lower detail approximation geometry for distant sectors. In addition, your game engine editor should support real-time terrain editing and painting. It should have cooperative editing with automatically locking of sectors. And, it should ensure continuities when editing the border between sectors.

Object instances (like meshes and entities) can be grouped spatially into zones and layers by level designers. A good example of a zone is a village or a building. In the example below, each zone generates a separate scene file that can be streamed in as the player approaches.

Example of zone organization

This allows you to spawn or destroy groups of related objects. If the player is within the Loaded Distance then the game engine will force all resources to be loaded. The Cache In area is where the zone starts loading its resources in the background. If the player leaves the Cache Out, the zone will be unloaded by the game.

Example of zone loading at run-time

These five requirements will greatly improve the speed at which data is streamed as players venture through your immense online world.

Video Demonstration

You can find the complete source code (for XNA Game Studio 3.0) for this article and 3ds Max files here

W,S,A,D to move the camera, click and drag mouse middle button to rotate the camera

Part 1: Create 3D models and their light maps

Step1: (file: Content\step1, original material.max)

Add Target Directional Light

Shadows:

• Lenable Shadows [V] on
• select "Ray Traced Shadows" or "Shadow Map"

Step 2: (file: Content\step2,render t texture.max)

Selected Box and Cylinder

Rendering -> Render to Texture

Output Page:

• push “Add” button and select ”LightingMap” in Add Texture Elements

  

• set Target Map Slot as “Self-Illumination”

  

• click the radio of “Output Into Source“

  

• Object==>set “Use Automatic Unwrap“
• set Channel as2

Delete the ”Target Directional Light”

The light map will be generated and assigned automatically in the “Self-Illumination” map

Push F9 or click “Quick Render”, the shadow will appear on Box01 and Cylinder01

Step3: (file: Content\step3,use shader.max)

Select the Shader of "Content\LightMapEffect.fx"

Assign the Diffuse Map and its Light Map and Select the Technique as "Technique1"

Push F3 to show the Box01

Push F9 or click “Quick Render”, the shadow will appear on Box01 and Cylinder01(the scene without light object)

Step4: Export 3D Models with Panda plug-in

At last, you can export the model using the Panda plug-in; the second texture coordinate will be written into the FVFData block in the .X file. Remember to enable the "Include .fx file" and "Include .fx parameters" options.

Step5: Show the light map result

If you want to see the light map in 3ds max with sharp shadow, you must re-assign the new materials (with DirectX Shader – LightMap) to Box01 and Cyliner01.

Open Material Editor and click the new material slot

DirectX Manager page:

• Select LightMap and enable “Enable Plugin Material”

• BaseTexture: RedB.jpg [V]
• Mapping channel=1
• light map: Box01LightMap.tga [V]
• Mapping channel=2

Part 2: XNA Project (LightMapWindows)

Step 1

• Load model and measure its size
• Add camera (reference Book: Learning XNA 3.0 chapter11 Flying Camera)

namespace LightMapWindows
{
 /// 
 /// This is the main type for your game
 /// 
 public class LightMap : Microsoft.Xna.Framework.Game
 {
  GraphicsDeviceManager graphics;
  SpriteBatch spriteBatch;
  
  //add
  ContentManager content;
  BasicModel basicModel;
  Camera camera;
  
  public LightMap()
  {
   graphics = new GraphicsDeviceManager(this);
   Content.RootDirectory = "Content";
  
   //
   content = new ContentManager(Services);
   content.RootDirectory = "Content";
  
   IsMouseVisible = true;
  }
  
  protected override void LoadContent()
  {
   // Create a new SpriteBatch, which can be used to draw textures.
   spriteBatch = new SpriteBatch(GraphicsDevice);
  
   // TODO: use this.Content to load your game content here
   camera = new Camera(this);
   Components.Add(camera);
   
   basicModel = new BasicModel();
   basicModel.LoadModel(content, @"pillar");
   basicModel.MeasureModel();
   
   camera.SetSpeed(basicModel.GetModelRadius() / 100.0f);
   
   float modelRadius = basicModel.GetModelRadius();
   Vector3 modelCenter = basicModel.GetModelCenter();
   Vector3 eyePosition = modelCenter;
   
   eyePosition.Z += modelRadius * 2;
   eyePosition.Y += modelRadius;
   
   float aspectRatio = (float)window.ClientBounds.Width / (float)window.ClientBounds.Height;
   
   float nearClip = modelRadius / 100;
   float farClip = modelRadius * 100;
   
   camera.SetCamera(eyePosition, modelCenter, Vector3.Up);
   camera.SetFOV(MathHelper.PiOver4, aspectRatio, nearClip, farClip);   
  }

Step 2

• Render model with its effect instance

  protected override void Draw(GameTime gameTime)
  {
   GraphicsDevice.Clear(Color.CornflowerBlue);
   
   // TODO: Add your drawing code here
   
   basicModel.DrawLightMap(camera);
   //basicModel.Draw(camera);//basic effect
   
   base.Draw(gameTime);
  }
 
namespace AkBasicModel
{
    class BasicModel
    {

......

  public void DrawLightMap(Camera camera)
  {
   //Set transfroms
   Matrix[] transforms = new Matrix[m_model.Bones.Count];
   m_model.CopyAbsoluteBoneTransformsTo(transforms);

   //Loop through meshes and their effects 
   foreach (ModelMesh mesh in m_model.Meshes)
   {
    foreach (Effect effect in mesh.Effects)
    {
     //Set Effect parameters
     effect.CurrentTechnique = effect.Techniques["Technique1"];
     effect.Begin();
     effect.Parameters["World"].SetValue(GetWorld() * transforms[mesh.ParentBone.Index]);
     effect.Parameters["View"].SetValue(camera.view);
     effect.Parameters["Projection"].SetValue(camera.projection);
     effect.End();
    }
    //Draw
    mesh.Draw();
   }
  }

Further Reference

What is a particle explosion effect? When most people see a particle explosion effect in a video game, often times they believe that what they’re seeing is a simulation - some sort of next-generation fluid mechanics, calculated in real-time by a high-powered video card. However, what they’re actually seeing in an explosion effect could be compared to throwing a bunch of photos of flames, sparks and clouds at a movie camera.

Whether you’re an experienced video game developer or an avid player interested in game mechanics, we've broken down the process of developing an in-game particle effect into the following bite sized steps.

NOTE: Many images link to videos.

Intro to Sprites and Emitters

How to Create Sprites

Step 2:
Using your game engine software, create a sprite emitter, which will generate sprites, or particles. These particles will appear as plain squares until the image texture is applied. Figure 2 shows the beginning of a mist particle effect before the actual image has been applied to the sprites. This may not look much like mist at first, but these squares are what the Effects Artist is usually working with behind the scenes. In this case, the sprites all line up to face the camera so you can never see them edge on.

Step 3:
Apply the mist image, or texture, to the individual particle sprites. In figure 3, you can see how one texture or a series of textures is applied to the sprites.

Figure 4 shows the sprites with the mist texture applied and the image transparency turned on. The transparency is added to the mist texture in Adobe Photoshop using the image’s Alpha Channel. The yellow wireframe box and arrows in the middle represent the emitter, which is the point of origin and the control mechanism for a single set of sprites. All sprites generated by a single emitter use the same texture and move in roughly the same way.

Step 4:
To create movement in the sprites, go into the sprite emitter settings and determine the timing, motion, scale, and orientation of the sprites. A sprite emitter can be set to send sprites in a wide range of directions from 0-360 degrees, much like a lawn sprinkler. In most effects, the Effects Artist uses the motion of overlapping sprites to try to hide the fact that they are using individual sprites. As you can see in Figure 4, this gives the overall effect a more natural feel. Note that color and transparency can also be controlled.

Figure 5 shows how some of these settings can be adjusted. Motion controls that were used to make the sprites move like mist can be adjusted to make them behave like a fountain. Sprites can also have a constant downward acceleration based on in-game “gravity.” The sprites in Figure 5 are moving in only one direction, while being pulled by gravity. They also increase in size over their lifetime.

Putting the Sprites in Motion

In the previous section, we created a mist effect using a single emitter. But effects are often made with several emitters that play on top of each other, each with different textures, motions and timing. To make the Explosion Effect we’ll first need to make each emitter and then put all of the emitters together into one effect.

Figure 6 shows a collection of sprite emitters without their textures, each generating sprites of different sizes and moving at different angles and speeds. All the emitters combine to make a single explosion effect. Each type of sprite is sent from its own emitter, flying out from the center of the explosion effect, and in most cases growing larger and fading out over time.

How to Create the Explosion Effect

Step 1:
Create the Flame/Smoke Emitter. This emitter should generate sprites that grow almost instantly at first, then drift apart with a slow rotation. The gravity setting on this emitter should be a negative value, but close to zero, so the smoke will slowly rise over time, instead of falling. The color should start out bright yellow/orange and change to black quickly as the flame turns to smoke. Apply the smoke textures shown in the upper left of Figure 7. The overall lifespan of the sprites should be roughly .5 seconds.

Step 2:
Create the Flash Emitter. This emitter uses the star-shaped textures shown in the upper right corner of Figure 7 and should grow almost instantly and fade just as quickly. It should be bright yellow- almost white and should last about .2 seconds. It’s possible to get by with just the Flash and Flame/Smoke Emitters, if you want to keep the overall effect simple.

Step 3:
Create the Flying Sparks Emitter. This emitter should be long and thin. Instead of facing the camera, the sprites should be oriented along the direction of travel, to look like lines radiating from a central point. Use the texture at the bottom right corner of Figure 7 and adjust the color, like most of the other emitters, so it looks gold. The speed should be around 10 meters per second. The lifetime can vary from .5 seconds to 1.5 seconds, depending on how far you want the sparks to travel from the explosion.

Step 4:
Create the Smoke Trails Emitter. Like the Flying Sparks emitter, the Smoke Trails Emitter should be long and thin and be oriented along a path radiating from the center. But unlike the Flying Sparks, which move away from the middle at a fast speed, the Smoke Trails sprites should move slowly, and grow quickly from the center of the overall effect by changing the scale over time. The lifetime should be about .4 seconds. Use the textures from the bottom left of Figure 7.

Step 5:
Create the Round Sparks Emitter. This emitter is similar to the Flame/Smoke Emitter and once again, the sprites fall up instead of down by using a negative number in the gravity setting (-0.2). The sprites from this emitter should drift apart slightly as they rise. Use the snow-like texture shown in the bottom middle of Figure 7.

Step 6:
Create the Debris Emitter. These fast moving sprites should fly out from the center of the overall emitter. If possible, aim for the camera for dramatic impact. The color should start out bright orange, to look like reflected light from the explosion, then fade to a neutral gray as the explosion dims. The sprites from this emitter should hang around longer than the others, with a lifetime of about 1.5 seconds. The speed should be around 10 meters per second. Set the emitter’s gravity to about .7 so the sprites look like they’re falling slower than normal, and use the chunky textures shown in the middle of Figure 7.

Step 7:
Create the Shockwave Emitter. This emitter consists of only one sprite that lies parallel to the ground. The sprite should grow quickly from the center and fade out just as quickly. It’s best when this sprite is kept very subtle and transparent. Use the ring-like texture from Figure 7.

Step 8:
Put all the Individual Emitters Together to Make the Particle Explosion Effect.

Watch a Demo Video

What Comes Next

Please note: All effects and images shown in this article were created using Vicious Engine 2, developed by Vicious Cycle Software. You can use other game engines on the market to create the same effect.

General Recommendations for Game Art Creation

• Once you have the specifications from the game studio, read them attentively and carefully thinking over all points. Ask questions if something is not clear, because even the smallest misunderstanding may lead to problems later on. If problems are addressed until later in the project, the fixes become more difficult. When working on your model, check it against the specification periodically so as not to miss some important stage or requirement. Think over the way you are going to create your asset before starting the work so you don’t end up having to redo a significant volume of work due to using the wrong approach.
• If you are provided with a certain pipeline for the asset’s creation, don't ignore it, especially when completing the first set of models. As you continue, it's possible that you'll invent a better way to get the same result, but trying to find a better way when working on the first models usually leads to a significant volume of fixes and extra work.
• When working on models and textures remember that there’s a good chance you will not get your work approved the first time. It's also likely that you or somebody else will need to change or fix your model or texture. Therefore it is important that you create both model and texture so they can be easily modified. In terms of modeling, this means using proper geometry, a minimal amount of UV seams (and in the least noticeable places), the absence of UV stretches, and a uniform scale on UVs. For textures, it means creating a properly structured PSD file.
• Check the model twice after you are done. First, check it against the client's technical requirements, and then check for typical technical mistakes (such as unwelded vertices, wrong units, incorrect object names, pivot placements, etc.). If your client provided you examples of the desired quality, then check your model against the example provided. Even if the asset looks very nice, if it doesn’t fit the style, then it could be rejected.
• Learn from your mistakes. Make proper conclusions from client's feedback and apply it to future models as well so you don't make the same mistakes again.

Modeling Requirements

• References: This is one to watch! Clients do not always provide high quality references. If you are worried about your model being rejected because you don’t have enough good references, spend some time looking for extra references. Look for additional hi-res blueprints, more detailed images or photos, descriptions of how this object is utilized in real life. You can also request that the client provide additional references.
• Polycount and level of details: Spend your polycount budget thoroughly. Allocate more polys for large details and fewer polys for those areas that are small and less noticeable. Don't model those details that can be done better with texture and normal maps, such as small bolts. If you see that the provided polycount budget is so small that you can’t manage to dedicate enough polys to large details then model using the needed polygons and then you can always optimize your model later. Use 5-6 sided cylinders for thin details, 8-sided cylinders for medium details, and more than 8 for large details. If you are supposed to make LODs for the asset use multiples of 4 (8, 12, 16, 20, etc) - this lets you remove each 2nd edge at least twice.
• Smoothing: It's imperative to adjust the smoothing on your models. In most cases you can use auto smoothing and fix it where needed. Always review your model after you use auto smooth because you may get undesired effects in some places. Also, check that you don't use more smoothing groups than are needed. Try to get by with 3 unique smoothing groups, but don't use 5 or more.
• File: Check to ensure you don't have any extra objects in the file.
• Units: Check to ensure units in the scene correspond correctly to the provided requirements. If you are not provided with any specific requirements on units - use meters and make all assets match a natural scale, i.e. a normal human is 1.8 meters high, etc.
• Object scale: If the requirements don’t include a blueprint with dimensions of the asset provided, use real world objects as a guide. Check to ensure your model is proportional.
• Proportions: Both during and after modeling check proportions of separate parts with the references. It happens sometimes that the geometry is right, but the proportions are wrong.
• Pivots: If there are no requirements for the asset concerning pivots, set them as shown in Figure 1, for buildings and characters:
  
  Figure 1: An example of default pivot placement in 3DS Max

  If your asset contains rotating parts (wheels, doors, etc) – ensure that pivot points are set properly at the rotation center or the hinge center on the model.

• Object location: Unless otherwise specified, the asset should be located in the center of the scene. If it is symmetrical, it should be absolutely symmetrical related to the axis of symmetry. If there are no reasons to make different mappings for symmetric parts then UVs for symmetric parts should also be identical.
• Geometry: Check to ensure all vertices are welded and that there are no double edges or polys.
• Naming: Objects should be named as specified in the requirements. If this is not specified, create convenient names and follow some consistent logic when naming the meshes. Do not name your assets generically like "building", "house", etc. as it's very easy to get duplicate names this way. If you have a reference, you can name your assets the same as the reference provided. For instance, if you are going to model the King Tiger tank, the main mesh could be named kingtiger and objects such as wheels and turrets could be kingtiger_wheel and kingtiger_turret. To mark left and right use “_l” (left) and “_r” (right), as shown in Figure 2.
  
  Figure 2: Naming conventions should be consistent
• Hierarchy: If nothing is specified, create a hierarchy based on the most probable supposed usage and animation of parts of your mesh. For instance, if is the requirements specify to separate the tank into a main body, wheels, turret and gun, then it's obvious that wheels and turret will be parented to the main body and the gun will be parented to the turret.
• Topology: Check to ensure meshes with complex shapes have correct topology. To ensure this, shapes should be represented correctly, and there should be no smoothing issues. When working on characters, be attentive to joints and the face.
• File Format: Deliver your model exactly in the format that is specified in the requirements. This means that if you are asked to deliver your models in Maya7, you should deliver an .mb file that can be opened in Maya7.
• Materials (shaders): Unless otherwise specified, name materials the same as the file such as kingtiger. If you have several textures use a multi-sub-object material, not many different standard materials. Remove any extra materials that you've got after modeling, and exporting.

• Normal maps allow you to make beveled edges, but it's still better to make edge bevels by geometry if polycount allows. Note: To avoid bugs when making edge bevels with a normal map you should separate the UVs on the edge and move them to get some space between them, otherwise you'll get a very thin but noticeable artifact on the edge. This happens because a normal map has different colors for different polys at the same edge that are blended when being mipmapped.
• Normal maps plus darkened textures represent concavities.
• Normal maps are good for small surface details such as bolts and rivets.
• Normal maps are good for representing narrow and deep seams between the details. These seams look almost perfect, but they are not as good for convex details.
• e. Normal maps don’t work as well for large, prominent details. The problem is that if you make large prominent details with normal maps, they will be more or less okay when viewed in front or at some angle, but will become absolutely flat when viewed from the side.
• Normal maps are not very good for smoothing the geometry.

UV Mapping Recommendations

When mapping the game models, the most important thing is to thoroughly use UV space:

• Most mapping details should have the same scale, though you can scale up small parts that need a lot of details (for instance, small wheels on a cart), and scale down large details that are hardly visible or have a smooth surface, such as bottom and back polys, thin wires, etc. It's not desirable to scale the UVs more than twice as this will cause the differences in resolutions will become too obvious. Moreover, if you scale something more than twice, then the UVs are packed badly and there is too much free space on the UVs and you should consider rearranging the UVs.
• Remember that most textures will be mipmapped and you should leave at least 4 pixels between your UV parts, or, if possible, 6-8 pixels. You can easily check the distance between your UV parts by making the UV snapshot and viewing it in ACDSEE or Photoshop.
• Position map parts that will have the same or similar color close to each other. This also relates to the parts of the same detail. It's causes trouble when the top of a small bolt, for instance, is mapped to one corner of the UV quad and to the side to the opposite corner.
• If you are using an alpha channel for transparency, leave at least 10 pixels around the parts that will use the alpha channel to avoid issues with mipmapping.
• Place the UV seams in the least noticeable places.
• Minimize stretching. Avoid stretching UVs where details with the regular form (bolts, for instance) or text is located.
• Mirror the UVs only in such places where it is not going to look too obvious. Fold all cylindrical and symmetric details.
• Map to the same UV space those details that use the same texture and don't have any specific details such as wires, pipes, etc.
• Avoid hidden "wasted space" on UVs. Wasted space appears when some detail is located on top of another one on a mesh, but is mapped to separate space on UVs, as shown in Figure 3 below.
  
  Figure 3: To avoid issues with texturing, scale down a bit the UVs for the part located on top of another one.
• When mapping the cylindrical details, keep in mind which texture is going to be used for this part of the model. If the texture includes some concentric circles or some ornamental design, then never map it using planar mapping, as this will cause the concentric circles to look pixelated. You can minimize this effect, but you'll be never able to remove it. It'll also be hard to paint the ornament or locate the small details properly. See Figure 4 below for the correct option.
  
  Figure 4: Correct cylindrical mapping.
• Don’t try to fill the UV quad. If optimized, UVs fit into the rectangle (half of UV quad) instead of the quad.
• When working on UV mapping, check the references periodically to see which details are going to be painted on the surface. By checking you can be certain to not map the same surfaces to different UV space and vice versa. Be careful to not map unique textures to the same place.
• Tile long details, such as wires, pipes, etc.

Recommendations on Texturing

• Be attentive to the style. Check if your work is looking similar to the samples provided by the client.
• Check UVs before you start texturing so that you don't have to remap the model after you've completed a significant amount of texturing work. If you don't like anything about the model or UVs, inform your client or ask if you can fix it yourself.
• Realize that in some cases it is not possible to change the UVs (for instance, if you are given a model that has already got several texture sets and you are working on variations).
• Remember again that clients do not always provide high quality references. To avoid your model looking poor due to lack of details caused by bad quality references spend some time looking for extra references or ask your client to provide additional ones.
• Think over the best way to texture your model. Sometimes it's better to start with a normal map, sometimes with color, and sometimes with an ambient occlusion map.
• Structure your PSD file so that anybody can easily understand it. Do this by using layer sets, clipping masks and smart objects. Name each layer so that it's clear what they contain. Use the English language.
• Name textures properly. If a texture name is not specified in the requirements, then name it the same as the object. If you need to specify separate color, normal and specular textures (and you don't have any specs) add _clr (for color), _nm (for normal map), _spec (for specular).
• Save your textures to 24 bits TGA if there should be no alpha channel and to 32 bits if there is an alpha channel.
• Be careful with the scale of small parts and surface detail maps. If the surface texture is too big, it won't look natural. The same relates to small details, such as bolts and seams, if they are too big the object looks cartoony.
• Dirty objects and dirty textures are not the same. Paint dirt thoroughly. Don't think that the more dirt there is in your texture, the better it is.
• Check to ensure your texture is neither blurry, nor too sharp.
• Use good photos for your textures. I recommend using textures from http://cgtextures.com/.
• Check to ensure you don't use compressed JPEGs. Compressed JPEGs will cause your texture to look badly whatever you do. Figure 5 shows how a compressed JPEG appears (look at that "quads" - good quality textures do not have such):
  
  Figure 5: Avoid low quality JPEGs.
• If your texture should have plenty of details, but the resolution is low and it's hard for you to paint all the details, try painting a higher res texture. Then, after working at a higher resolution, scale it down and check to see if the target resolution looks correct.
• Don't leave visible seams on a texture, and check to ensure everything tiles properly.

Conclusion

Introduction

Hi, my name is Bulatov Evgeni, I'm an artist at the game development studio Extreme Developers. In this lesson I'll show you my way of creating fire in the particles editor Magic Particles. Particles are an integral part of computer graphics. Cinema, TV, and video games are using them to create impressive effects. Magic Particles is a powerful and handy tool for creating special effects that we've chosen over several other editors. I'll try to give you some basic ideas concerning fire creation (backed by definite directions), so that you could go further in this area by yourself. The particles are not limited to the fire only, there is a whole world of wonderful effects. In the included lesson data there is a Magic Particles emitter file, particles textures and an avi video file with a fire animation.

Part 1: Texture Creation

Particle textures are very important for creating nice looking fire. Experimenting with them you would get a different fire effect every time.

Magic Particles can read the PSD file format and even its alpha-channel (for transparency), but for creating fire we will use a special blend mode (it's called Screen in Photoshop), so alpha-channel is not needed.

With this blend mode the black color is completely transparent while other colors lighten the picture under them. To create fire particles I painted textures 256x256 on a black background. Later you could resize them smaller, but it's easier to draw them when they are big. Here is what I got:

I used a thin brush with soft edges and then used the Smudge Tool, duplicating layers when necessary and using Gaussian Blur.

Part 2: Particles Editor

After the textures are ready it's time to use the particles editor.

Run Magic Particles. At the top you can see the button panel, hit the "create emitter" button and after that "create particle type inside Emitter".

In the preview window you'll see something gray and odd looking. In its center there is an emitter's icon in a square frame. Drag the emitter to the bottom edge of the screen and deselect the "show emitter" and "show clip area" check boxes on the bottom panel.

To load the textures drag the files onto the texture preview window (or use the load texture button, you can select multiple files in an open file dialog window).

Now go to the Color tab and check the Intense box (it's a special blend mode for luminous particles, corresponding the Photoshop screen blend mode). Now click the gray rectangle at the bottom, you'll put a marker there. This way you'll specify the particles color during their lifespan.

Adjust the color as following:

The final marker must be black, so that the particles are faded in the end (this is why we are using the Intense blend features). This is the color of the flame.

Now each particle's texture is changing in consecutive order. But we didn't make an animation, so we do not need this. Go to the Texture tab and enter zero in the Change frame texture speed. Also check the Random texture starting frame. Now each particle has a random texture not changing during its lifespan.

Now all we have to do is to adjust the particles motion and you'll get a real fire! But first change the Visibility range (at the bottom panel) to 9% start and 95% end range visibility. This way the program doesn't show the start and the end of the effect if you don't need them.

Fire always goes up with a constant speed, emitting tongues of flames of different length. As it goes up it gets thinner and finally fades. Now step by step we'll set the particles motion according to this model.

Let's start with the emitter. Click on the emitter in the Emitter tree (on the left) and in the top diagram change the point emitter type to the line type.

The particles will emit from this line. It has two parameters, the blue graph - the incline degree, the green one is the line length. The default parameters of 0 degrees and 100 length suit the fire nicely.

Now let's change the angle of emitting the particles. Next diagram is the Emission direction, degrees. Set the values 36º and 144º so that the particles go up.

Now it doesn't resemble fire very much. Switch to the Particles and hit the Diagram Settings button.

Here are various parameters of particles. As all the parameters are in one place it is very convenient to adjust them in this window. Such parameters as Life, Number, Size, Velocity are interdependent. For instance the high value of Velocity will increase the motion speed of particles and at the same time will make flame longer. But decreasing the Life parameter could shorten the fire size.

Adjust the parameters as you like or take mine:

Looks like a good flame thrower, not too bad, but we'd really like a nice small campfire. Actually, as I was tuning the particles I adjusted both the graphs and the Minimums and Maximums in this window, until I got the result I needed.

Let's adjust the diagrams. Now the fire looks too dense, the flame is too bright. Find the diagram Visibility over life (factor) and decrease it to 35.

Now we are going to set the particles motion. The flame must go up but now it's thrown sideways. It happens because of the wide angle of emitter direction. When making fire I wanted the flames first to go sideways and then go upward. Like this:

Now the flame goes sideways and we want to direct it upward. We can do this using the Weight parameter, setting its value to a negative number. The particles will "float" upward.

In Magic Particles there are two types of graphs. The ordinary (gray icons) and the Factors (red icons). The usual graphs adjust the particles properties during the effect's lifespan (X axis is the effect's lifespan). But factors change the particles during the lifespan of the particle (X axis is the particle's lifespan).

With the help of the factor graphs I made it so that the particle motion is determined by the Velocity in the beginning and by the Weight later on. It looks like this:

This way I've got the desired fire motion.

As the real flame is first wider and then gets thinner in the upper position I adjusted the diagram Size over life (factor) like this:

You can watch the movement of only one particle if you check Single particle in the Number of emitted particles diagram. It is helpful when there are too many particles making it difficult to understand their motion.

Now the flame is still rather intense and high. Decrease its height and imitate its fluctuations. This is what I've got after adjusting Life of particle and Number of emitted particles diagrams:

The interesting thing about the diagrams with two lines is that they allow you to get the random values in the interval between the green and the blue lines. This means that each created particle will get the different parameter's value.

Not a bad result, but to make the fire more vivid I made the particles spin. The diagram Spin of particle is set from 0 to 100, and the diagram pin over life (factor) is made fading to eliminate the unnatural spin at the top.

This is my result: (gif animation)

You can add some sparkles to the fire by creating a new particle type inside the emitter, and also some smoke.

For sparkles, paint a white dot or a stroke on a black background and use the Intense parameter. For smoke you'll have to experiment with textures. As smoke doesn't shine, turn the Intense off and set a blue tint in the color settings.

This is my simple way of creating fire in particle editors. If you download the file with the example and the textures you'll be able to see my fire version in Magic Particles.

Part 3: Export and integration into a game

After the fire has been created it has to be integrated into a game. The simplest way in this case is to render the fire to a frame-by-frame animation and looping it after that. Then you'll be able to play this animation as sprites in any place within the game.

Unfortunately the nature of such editors doesn't allow you to make an infinite loop process. We'll have to cheat :) But first we have to get the sequence of frames. There is nothing difficult about it, have a look at the export window of Magic Particles:

Choose the frame size, usually multiple of power of 2 (for example 128, 256, 512), file type (any graphic format except lossy compression, alpha-channel not needed) and hit Export.

You'll get too many frames, so you'll need to select a small section, 1-3 seconds long. It'll be quite enough.

To create a smooth transition I used Adobe After Effects. Not going into detail I'll just show you a couple of snapshots:

I imported the frame sequence into After Effects and copied the animation as a second layer. After that I "cut" the tracks in the middle and moved them so that one track ended in the place of the cut and the other began. I shortened the composition time to make the tracks overlap. And then I adjusted the opacity of the upper layer so that it changed from 0% to 100% from A to B.

After this operation the transition becomes almost unnoticeable. We only have to render the composition into a frame sequence and see how it works in the game.

Another way to export fire into a game is to use a developer version of the program Magic Particles (Dev). This version has an API to export the special effects into the game engine at a level of processing particles. The example API use you can download here.

Conclusion

Experimenting with your results you can make the fire as fierce as a forest fire or calm as a gas stove fire. You can make it brighter, dimmer, quicker or slower. Real fire is sometimes very different and having toyed with the parameters you can make it the way you wish.

In conclusion I would like to thank Yasha a.k.a Snork, Alexei a.k.a. Odin_KG and Masha Zaitseva for the help in the lesson creation.

Ask your questions and put you comments.
With best wishes Evgeni Vendigo Bulatov.

The translation from Russian by Grigori Bulatov, with additional clean-up by Drew Sikora. Please put any comments concerning the quality of translation.

Often, you can find a way to generate good art without having to create it from scratch. Mason McCuskey offers some excellent suggestions for sources of game art in his article "Creating Good Game Art When You're Not An Artist".

But sometimes, you just have to create your art from scratch. Budgetary restrictions or game contest rules, or simply a tight deadline for a prototype might require you to set down the figurative slide-rule and pick up a paintbrush.

But I can't draw...really.. I mean, look at this:

If that's what your programmer art looks like, this article is for you.

I thought I'd share a set of tips for making better programmer art. These tips are intended to be useful to anyone, regardless of artistic ability or experience. While tips like "practice sketching everyday" or "visit an art museum" might be useful for the aspiring game artist, this document is meant for the non-artist, how to trick people into thinking that you--the left-brained, code-writing, math-loving programmer--have some artistic ability. In addition, none (mostly) of these tips require "practice", because, while practice is useful and even essential to being a true artist, it always seems like the your deadline is coming up with the sunrise and you just need some damn sprites.

Some of this is aimed at Photoshop users, because that's what I know, but the same concepts apply to any paint program, and there are equivalent operations to everything I mention here in the Gimp, and probably in whatever package you use.

This is also aimed at participants in LudumDare or similar contests where you try to create a game from scratch in 48-hours. My compo games tend to fare well in the graphics category (alas, killer gameplay continues to elude me), even though I don't consider myself a particularly good game artist. Many of these example come from my LD entries, and much of this experience is stuff I learned by doing these contests and being forced to generate art with an insane deadline. Moreover, they should be valuable to anyone trying to produce quality art (or some approximation thereof) with a short schedule or limited budget.

Tip #1: Start with a Color Palette

The is the most common mistake I see, and the easiest to avoid. The default palette for most paint programs hearkens back to the DOS days (can you find the connection between the colors in this palette and the four-bit binary numbers from 00 to 15? Of course you can. If you couldn't figure that out, you'd be a real artist.)

By palette, I don't mean a 16 or 256 color palette from the VGA days. I simply mean a coordinated color scheme for your game. If you start with a well chosen palette first thing, your scribbles will appear aesthetically pleasing and even intentionally "graphic designy" rather than "crap".

But where do I find a palette? I can't even coordinate colors when I dress myself in the morning!

Well, a little color theory goes a long way, and if you spend fifteen minutes googling "color theory" or "colour theory", which is the inferior British version of the theory, you'll be ahead of the game. But if you don't have time for that, here's a few things that work wonders:

1. Use a photographic image. Think about the theme or setting of your game, and find an image that reminds you of it. If you're making an abstract game, consider theming it, but you can just find any image you like. Then, when making your game art, NEVER use the color chooser, instead ONLY sample colors from your palette image with the eyedropper tool. With a little luck, your game will pick up the "mood" of this image.
   
2. Use a palette from a real artist. There are sites listed below that have great pre-built palettes to start with. Start with one of these, and use the colors in your game. With this approach, you'll often need more than the 5 or so colors you get in the palette.
   
3. Resist the urge to free-pick from the color chooser, instead, make new colors by combining ones from your palette. For example, draw atop the palette with a semi-transparent brush.
   

This example uses a "monochromatic" palette, all the colors are different shades of a very similar hue, other color schemes have more variety but what's important is that the colors all work together well.

Resources:

• Adobe's Kuler Site
• ColourLovers
• MultiColr from idee labs
  This awesome site is the best of both worlds: make a palette and get a bunch of photos that go with it. Just pick a few colors you like, then pick an image that looks good, then color-pick from it. Done!

Tip #2: Hide your shame with a clever theme

I can't draw!

Maybe, you're just too cool to draw. Maybe it's intentional. That's it. Instead of making good art, choose a theme that requires bad art. It worked for "SketchFighter" and "Crayon Physics"

     

Or use what you've got available. Just got some crap on your desk? You could have made one of the most popular games of all time, Desktop Tower Defense.

People are starting to catch on to this trick, but it's got a few years of life left in it. Be creative... maybe your characters are all gingerbread cookies, and you can literally bake them up. Or some kind of zombie bacon attacking your kitchen. Or even a furry chest in need of a shave.

Tip #3: Simple Shapes and Silhouettes

Circle, Square, Triangle, Rhombus, Trapezoid, Parallelogram, etc.. You know how to compute their area exactly, but do you know how to draw them badly? Sketch a couple of shapes freehand, and then add eyes (for a character) or wheels (for a vehicle) or whatever. They'll probably come out wobbly and goofy, not very precise at all.

Depending on how much coffee you've had already, they might be a completely different shape. That's ok! That's good, in fact, as the imperfections and variations create "personality" and make them come alive. Don't use the "shape tools" in your drawing program, it is the destroyer of sprite's souls. By making their forms distinct, you make it easy for the player to differentiate between them visually.

"Smiles" from Sykhronics is a great example of this. Distinct shape and color help you immediately recognise the shapes. You could probably still play the game on a two-color iPhone.

Look at the silhouettes of the shapes. You can use "threshold" or select the outside, invert it, and fill on a new layer, to see this directly. Can you tell what they are just by their outline? Can you tell them apart at least?

This is even more important in 3D. Assign a solid black material and view the model on a white background (or vice versa). Zoom out until it's as big as you expect it to be on the screen during normal gameplay. Does it read?

Resources:

This is explained way more eloquently in this blog post:
Good Design lies in the foundation

Tip #4: Draw more than you need

For the next few tips, we'll develop a sprite for a hypothetical platformer. Let's say we need an enemy, something you can't jump on top of without taking damage. My first though was some kind of spikey turtle (real original, huh?).

The first mistake a programmer will make is to think that his or her ugly sprite will get better by just continuing to work on it. It won't! If it starts out bad, it stays bad. So instead of pixel-pushing for an hour, just sketch a bunch of and only detail the one you like the best.

I started sketching some random enemies, not putting to much detail or thought into them. You can do this quickly and just abandon anything that's not working. I didn't like my turtle at all (he looks kind of like a vampire ferret that someone set on fire). I decided I liked the lobster guy the best, because of his interesting shape, clear silhoutte, and I think he's kind of a unique enemy.

Tip #5: Work at higher resolution

For sprite art, I work at 10x the resolution I need. So if I am making a 64x64 sprite, I work using at least 640x640. Sometimes, a rather ugly character at hi-res becomes a pretty good sprite. Even for backgrounds and logos and stuff, I try to work at 2-3 times the target resolution. If you are careful about the edges when downsampling (see next tip) you can get lots of detail with crisp edges.

For the lobster guy, I took the original sketch and traced over an outline. I typed "lobster" into Google Images and that gave me the idea to make him blue instead of red, and gave me some ideas for more details. Then I colored him in on a different layer below the outline, so I didn't have to worry about messing up my outline. Once he was filled in with solid colors, I set "lock alpha" on and just added some shading.

Don't lose sight of the fact that you're going to downres the heck out of him. You can get caught up in drawing all kinds of fine detail, but it will all get turned to mush in the next step. It's always a good idea to zoom out to get an idea of what the finished product will look like (or just check the Navigator window).

He's still kind of sloppy and not very detailed but next we're going to downsample him and that will hide all of that. Well, mostly.

Tip #6: Watch your Edges

Photoshop (and other paint programs) tries to helpfully blend everything together, giving you nice, smooth antialiased edges. Which is great, except when you want a crisp edge for your 1-bit alpha. Photoshop has ruined many a 3D tree-billboard and beautiful 2D sprite edge with it's overzealous edge mushing. Here's my workflow for making sprites into game-ready images. I should make this an action or a script, someday, but it's pretty simple:

Step 1: Isolate the hi-res version on a transparent background

Step 2: Downsample to target resolution

Here's he's (just about) 64x64, still against a transparent background.

Step 3: Make a crispy edge

Here's how to get the edges right:

1. Magic Wand the transparent parts. Important: Set a very low "tolerance" value and most importantly, make sure "anti-alias" is set to OFF.
2. Invert the selection (CTRL-SHIFT-I). It should be about a pixel or so bigger than the subject.
3. Make a new layer underneath the subject, and fill the selection with solid black (or your outline color).
4. If you're game engine wants a color-key background like in this example, add it now as a solid layer below. If you're using transparency, just leave the transparent background as-is.

Step 4: Clean up the pixels

Only now do you start messing with individual pixels. Your outline will probably be a little chunky, use the pencil tool to clean it up, and also add detail to the parts of the sprite that got a little blurred in the downsampling. Here, I just cleaned up the face, the tail, and the antennae.

The point is the most time-consuming way to paint a sprite is one pixel at a time. So you want to put off on this step until as late as possible.

Done: The final enemy sprite

Here's the final sprite at regular and 2x size. It's not perfect, and it's certainly not going to get me a job at Square or anything, but it turned out all right for programmer art.

Tip #7: Create Variations

You might want twenty monsters or spaceships for your game. Great! But you only have so much time. If you create one or two monster-spaceships that you like, you can make variations of them. Change the color. Many of the creatures in "Diablo" were just other creatures with different colors. Same deal with Pac-Man. Or you can change the scale, cut and paste parts. Instead of a meatasaur, vegisaur and a monkisaur, create a whole genus of related meatsaurs with slighty different features. You can turn out five or ten variations in the time it takes to do one new creature.

With the hue/saturation tool, I made a red version of the and erased his antennae. Then I added wings to get a completely different enemy. An added bonus of this technique is that it will make all your enemies look stylisticly similar, so your levels look more consistent, almost as if you planned it that way.

Tip #8: Avoid Animation

• Use a theme that doesn't need it. Spaceships don't need much animation. Vechicles don't really, and you can fake wheels moving. If you can come up with a concept that doesn't need animation, you're much better off. And you'll save yourself some coding time, too.
• If you must, start with simple cheats. Just flip an overhead sprite of a character horizontally and you've got a 2-frame run cycle. You can get away with amazingly few frames, look at sprite rips from old gameboy and NES games to see just how few. Final Fantasy Sprites
• Use templates. Don't steal a sprite rip, but steal the poses from it. For this sprite, I found an example of a sprite from Mega-Man, and drew a new sprite, but used the same poses.
  

  

• Rotoscoping: it's not just for singing orcs anymore. Many digital cameras have a "burst" mode, or you can film a short video and extract the frames. Film yourself doing a few simple actions, extract the frame and start tracing. Recognize this? Warning: this can turn into a time sink if you're not careful, so don't get carried away filming stuff. It's just a guide.

Tip #9: Skyboxen

Making a 3D game?

Implementing a simple skybox is not very hard to do. But in terms of visual bang-for-the-buck, they can't be beat. The skybox does the important job of FILLING THE SCREEN WITH SOMETHING.

I say "skybox" here but this could be any type of panoramic background, from a cube-mapped skybox, to a panoramic image on a sphere or hemisphere, to a simple background image for a 2Dish game.

But where do I get a nice skybox image?

1. Wait until sunset or a nice cloud formation wanders by, go outside (or get up to your roof) and take some photos. Obviously, this is weather dependent, you don't get brilliant sunsets everyday (unless you live in Florida), but you can post-process the heck out of whatever you shoot. Just to illustrate, the day after I wrote this, I took these pictures on the way home from the supermarket. This was a little unusual, where I live is not known for gorgeous sunsets like this, but even on a normal day you'll get something.
   
   ps. They're a bit blurry, but I've included links to the full-res versions, so if you want to use them for something go ahead, use without any restrictions.
2. Paint it yourself! Here's a quick tutorial I whipped up on painting skies:
   

   Compare how much better Zillagame (my first ludumdare entry ever!) looks. On the left, no skybox (and an alpha sorting bug), and on the right with the skybox we just made.

   
3. If this isn't for a contest, there are tons of free or reasonably priced skybox images online.
   • 1000 skies
     
   • Just google for "Free HDR Skies". You don't need HDR for game purposes but that makes it easier to find. Or search for "Sky Pano" or "sunset" on flickr (but check the license before you use any of these).

Also, keep in mind that the sky is the major light source for the outside world. This goes hand in hand with the "color palette" tip above. Use colors from the skybox when making your level and setting up your lighting.

Of course, your game doesn't have to take place at sunset. Unless it's a racing game, I think there's some sort of law requiring that. A clear midday sky, a photoshopped alien landscape, whatever is most appropriate for the setting of your level.

Tip #10: Bake in lighting

This works for a level or a character. It might not be "correct", especially when you mix it with runtime lighting, but it looks good. If you texture your level/character without overlapping anywhere, you can do this without writing an extra line of code by baking light and combining it directly into your color texture map, and if you take a bit of time to handle multiple UV sets you can get full-on lightmapping in your game.

In my 48 hour game, "Bugzapper", all the lighting on the structure is baked into the texture. In fact, I ran out of time to even paint the diffuse texture. The light direction is totally wrong with respect to the skybox, but most people won't notice that, anyways.

Here's instructions on how to use Blender to bake. Maya and others have similar fuctions. Don't worry about baking all the fancy amboccl/normal map stuff, if you're not writing a real game. Just bake EVERYTHING in ("aka full render bake") to the base texture and then use no lighting or very simple lighting in your game.
Baking Lighting with Blender
Here's another example of using this on a terrain in blender to make it look good:
Blender terrain baking

One word of warning, don't try to figure this out during a contest. Try it out beforehand to get the process down first, you can waste a lot of time figuring out how to do this, but once you have it, it can take 15-20 minutes during a contest and make a huge difference.

Also, wait until you are sure you are final with your model's textures before doing this. You can't unbake, and you don't want to have to do this twice.

Tip #11: Get a Tablet

When a lot of people I know first buy a tablet, they take a while to get used to it. Here's some tips to help make the most of a tablet

• In the control panel, crank up the pressure sensitivity towards firm. You want to have to really mash down on it to get full pressure. By default, the pressure is way too loose and you end up losing most of the control
• Drawing with a sheet of blank paper totally changes the feel. Different types of paper -- copy paper, magazine pages, construction paper, etc -- can totally change the feel. Experiment.
• Practice. I know I said none of these tips require practice, but I lied. Try these exercises:
  • In Photoshop, make 10 squares in a row and fill them with greyscale from 0% (black) to 100% (white). Beneath them, make 10 empty squares. Try to shade the squares below to match the guide squares (if you squint your eyes at them). Try this with different brushes, practice the pressure sensetivity.
  • Try handwriting something, like the alphabet or copy a passage of text. Start out very large, with huge letters, and get progressively smaller. This will both get your hand used to the tablet, and your eyes used to looking at the screen while you are drawing somewhere else.

Also, in this day of touch-screen interfaces, having a tablet can be a cheap way to prototype touch-style gameplay (though without the multitouch). It's not exactly the same but it's a lot closer than using a mouse.

Additional Resources

• Color Theory
• Texturing Tutorial
• Ludumdare 48-hour Contest
• Tile Studio Art Tutorial

In 2006, Insomniac Games delivered an impressive release for Playstation 3 consoles. Resistance: Fall of Man successfully transported players to a grim apocalyptic environment. Set in Europe in 1951, players battled alien beasts known as Chimera in a survival effort. The first-person shooter garnered a number of awards and sold more than 2.7 million copies worldwide.

Recently, Insomniac Games released a sequel named Resistance 2. The new version expands upon the previous version and allows players to roam the wastelands once again. This new version is set in the United States. Single player mode lets you play as Sergeant Nathan Hale, who is not only battling the aliens, but he is also infected with a virus that threatens to turn him into a Chimera.

Along with the stand-alone single player mode, Resistance 2 also offers an 8-player online cooperative mode that lets a team of players work together to fight the aliens. There is also a 60-player online competitive multiplayer mode that you can access.

First impressions of the game’s graphics are outstanding. The artists at Insomniac have out-done themselves with a ghastly array of alien beasts created using Maya. Using normal maps and other cutting-edge techniques, the visuals help drive the story home. Equal to the visual imagery are the articulated motions of the various characters made possible by MotionBuilder.

The Tools

The Autodesk people put me in touch with the artist team at Insomniac and I was able to learn about how they used the Autodesk tools to create this incredible environment and its other-worldly inhabitants.

I spoke in-depth with Samuel Sharit, senior character artist, at Insomniac Games about and how the Autodesk tools fit into their unique pipeline. Samuel was responsible for creating many of the creatures found in Resistance 2 including the 300 ft. tall Leviathan beasts.

The Insomniac artistic team used Autodesk’s Maya coupled with MotionBuilder to bring these creatures to life. Altogether the team has roughly 50 Maya seats which are spread out between the artistic and programming teams.

The team also uses a proprietary game engine that was also used to create other hits such as the first Resistance game and the popular Ratchet and Clank games.

When production of Resistance 2 started, the entire team was using Maya 8.5, but halfway through the production cycle, the team was upgraded to Maya 2008. I asked Samuel about the affect of upgrading software midway through production and he said the transition didn’t cause any delays or issues. Of the new features in Maya 2008, Samuel remarked that the ability to preview using the Active Smooth mode was a huge time-saver.

Resistance 2 is a trademark of Sony Computer Entertainment America Inc. Developed by Insomniac Games. ©2008 Sony Computer Entertainment America Inc.

The Pipeline

Insomniac Games uses an original art pipeline for getting assets into the game. The big picture of the pipeline is that the artist moves models to a technical artist and then on to the animator.

The artist team at Insomniac altered its pipeline flow for Resistance 2. The first step of the process was to rough and form the models. During this step, the modelers quickly created rough geometry with a rough rig. The goal of these roughs was to create something quick without any details. The roughs only needed to show the most basic shape of the character. These rough models were then handed over to the gameplay group who used the model to test out the game engine. The results were then used to create the game’s AI.

The roughs typically involved about a half a day of modeling time per character. Using these quick techniques, Samuel was able to complete most of the roughs used in the game in about a month.

After a valid gameplay test, the working model dimensions were passed back to the artists who would start the final pass. Most final pass models would be complete with models and textures in about 3 weeks per character. Some creatures, such as the large Leviathan, took around 6 weeks. There were 6 character artists working simultaneously on the project.

Because of the advanced next-generation consoles, the team didn’t need to prepare a separate set of assets for creating the game cinematics. All cut scenes were created using game assets, but high and low-res models of each character were created in order to produce normal maps.

All the modeling was completed using Maya, which worked extremely well with their pipeline. Samuel was actually a Max user, but found it more convenient to use Maya with their pipeline. It took him about 2 months to become comfortable with Maya.

Textures and normal maps were created using ZBrush and Photoshop was used for final touch-up work and for any texture tweaking that was required.

Resistance 2 is a trademark of Sony Computer Entertainment America Inc. Developed by Insomniac Games. ©2008 Sony Computer Entertainment America Inc.

The animation team used a mixture of motion capture and hand keying. The animator’s used motion capture for most of the human action, but most of the facial animations are hand-keyed. The Hybrid and Grim alien’s actions were also motion captured, but the Spinners and most of the bosses were hand-keyed. Insomniac used two different motion capture studios including Sony San Diego and the House of Moves. The team found that the experience at Sony San Diego was more personable.

The animation team found that using MotionBuilder was a huge time-saver. “By switching to MotionBuilder, the technical artists were able to work with multiple rigs at once,” said Samuel. This enabled technical artists to verify the model’s motions in real-time instead of one at a time.

Of all the characters, the humans posed some of the greatest challenges. In particular, the lip-synching took some time to get right. It was accomplished using a bone-based system along with some blend shapes.

Summary

Overall, the game graphics speak for themselves. With skill and the right tools, the results are outstanding. The Insomniac artistic team has effectively integrated Maya and MotionBuilder into their production pipeline enabling them to quickly and efficiently produce the needed assets.

Resistance 2 is out now and available for Playstation 3 consoles. You can learn more about Autodesk’s suite of tools at www.autodesk.com and about Insomniac Games at www.insomniacgames.com.

Kelly L. Murdock is the president of Tulip Multimedia, a design firm specializing in 3d graphics. He’s written extensively on 3d graphics including books on 3ds max, Maya, LightWave and Poser.

Go outside and look at the air around you. Can you see it? Most of us grow up thinking that air is invisible, but it isn’t. In fact, air is one of the most important cues we use to judge the depth in an image we’re looking at.

Look at this photo I took from a hotel room window in Los Angeles. The colors of the buildings and cars that are closer to the camera are vivid and high-contrast. However, the buildings, trees, and hills in the background have a smoky appearance, losing their color and definition.

These images of Sabino Canyon in Tucson, AZ, show a similar effect. Objects close to the camera show a full range of colors and light and dark values, while the mountains in the background are hazy with less difference between shadows and highlights. Also notice that the way you can tell which mountains are closer to you and which are further is by noticing how hazy they are.

Atmospheric perspective is caused by the fact that the space surrounding the solid objects that we see isn’t empty. Light scatters around between air, water, smoke, dust, and pollution molecules, partially obscuring the objects that they are in front of. The further away an object is from the viewer, the more obscure it becomes. Eventually, especially on foggy days, entire buildings and mountains can become completely invisible!

Visually, there are three primary effects caused by atmospheric perspective:

1. The further away an object is, the closer its color will match the color of the sky.
2. As an object moves further from the viewer, the contrast between its highlights and shadows will decrease.
3. The colors of objects that are closer to the viewer will be more saturated (less gray) than the colors of objects that are far away.

Creating Perspective with Layers

Let’s use a scene with Buck from Cash Cow as an example. Right now this document has three layers: A solid sky color, an image of Buck, and some tall grass so that we don’t have to worry about the ground.

Now let’s make few duplicates of Buck, resizing each one so we have a whole field of Bucks. Be sure to keep each copy of Buck on it’s own layer.

Now comes a slightly tedious part: I’m going to make several copies of the sky layer, one for each copy of Buck. Then I’ll arrange each copy of the sky in front of it’s corresponding Buck layer.

Next, we’ll arrange the layer clipping masks so that each duplicate sky layer affects only its corresponding Buck image. You can do this by clicking on each sky layer, and then choosing Layer->Create Clipping Mask. This will cause the sky layer to be clipped by the image of Buck that it’s in front of. You still won’t be able to see anything, because each image of Buck is obscured by its clipped sky layer.

Now comes the fun part. For each copy of the sky, adjust the layer transparency so that the copies corresponding to closer images of Buck are more transparent than the copies that are further away.

And there you have it, totally adjustable atmospheric perspective. Just by changing the sky color, transparency levels, and overall coloration of the scene, you can create limitless atmospheric effects.

Here’s the same grassy field in thick fog:

And the scene at sunset:

Note that on this one, I had to adjust the color balance of the scene to account for the warmer lighting.

Applying Perspective to the Ground Plane

The last example deliberately left out an important aspect of most images: the ground plane. Since the ground plane recedes into the distance, we cannot simply blend it with a solid color to achieve natural atmospheric perspective.

Let’s take a look at another example. This time we have a sand-colored checkerboard desert floor, some sand dunes, and some cacti.

First, using the same steps as before, let’s use layers of sky color to blend the dunes and cacti:

This is already looking much nicer. The dunes are pushed toward the horizon, and the closer cactus is brought forward. However, we still need to bring the ground itself into perspective. We can do this with a simple variation of the same technique.

First, make a new layer in front of the ground layer. Fill this layer with a gradient that starts with a fully opaque sky color on top and ends with a fully transparent sky color on bottom:

NOw use Layer->Create Clipping mask to limit the effects of this layer to the ground plane.

Now the transparency of the gradient needs to be adjusted to be consistent with the thickness of the atmosphere in the rest of the image:

There we go! We’ve made a nice, dusty, desert scene.

Atmospheric Perspective in Games

The use of atmospheric perspective is absolutely vital in games. Since our eyes are naturally drawn to high-contrast objects with bright colors, game developers can use the desaturating effects of atmospheric perspective to draw the player’s attention to vital onscreen elements.

Atmospheric perspective is especially important in 2D games. 2D games can’t make use of geometric perspective, and so they rely heavily on the use of color choice to help players interpret the contents of the screen.

This screenshot of Super Mario World 2: Yoshi’s Island is a perfect example. Notice how objects in the foreground have bright colors and black outlines. The hills and clouds in the background are rendered in subdued pastel tones. The falling Chomp in the foreground is made of pure black and pure white, while the Chomps waiting in the background are made of grayed, cool, tones. All these elements help the player quickly assess what’s happening in the game.

Conclusion

Atmospheric perspective is an important but often overlooked method of creating depth in images. Virtually any time that objects are placed more than a few meters apart, atmospheric perspective comes into play. Luckily, unlike geometric perspective, atmospheric perspective is relatively easy to implement, especially with digital tools like Photoshop.

So next time you're making a picture, don't forget the air!