Mavdoc
Rendering and Conversion
So we're finally ready to render out all these 3D models we've been working with.
The environments are pretty straightforward; using the cameras that were set up, each room is rendered out one by one. This is usually done as a batch process, so Maya will automatically render out and save each room according to the camera positions that were keyframe animated. As you can see in the example Barton Sewers, depending on the lighting settings used, the final render can look much different from how the 3D model looks in Maya.
Full size
Rendering takes into account the lights in a scene, how light bounces off surfaces, where shadows project, and calculates a smoother rendition of the models and textures. This process usually takes a good amount of time depending on the final image resolution set and complexity of the lights and render settings. While rendering, your computer will be pretty much unusable, because all its resources go into creating the render. All environments and assets are rendered as lossless pngs, then jpg compressed later in Flash.
The assets in zOMG! go through several more steps before they're ready to use in Flash. An asset's render will be created to double the needed resolution, then scaled down 50% in Photoshop. This is so they are able to hold onto more detail even at their reduced size. Afterward, the asset is converted to indexed color, or 4-bit 256 color. As you can see in the example image with an Otami Ruins plant, converting to indexed color changes any partially transparent pixels to full opaque. It also reduces the color palette to only 256 colors. Upon closer inspection, you can see different colored pixels stand out and gradients won't be as smooth.
Full size
The reason why assets get converted to indexed color is for the file size savings. For this plant, the file is reduced from 22k to only 6k-- almost a 4x reduction! For a game like zOMG! where fast level and asset downloads are key, this is an important way to keep download sizes in check.
After all the rendering is done, then it's time for getting needed environments and assets ready for night scenes. Everything in zOMG! that illuminates at night is actually hand painted after rendering, and has nothing to do with Maya 3D lights.
Using a corner of an Under Mountain room as an example, two different layers are painted on top in Photoshop to achieve the effect of lighting in the game. The first is the night mask, which is actually a duplicate of the render with a mask applied which hides the entire image. Between these layers is a blue tinted multiply layer that mimics the look of night in the game. Then using different sizes and opacity of brushes, the night mask image is colored back in on the mask at the points where light sources would cast.
Full size
Next the light overlay layer is created to bump the brightness or hot spots of the lights. It's a layer set to overlay blending that sits on top of everything else. Only the color white is used to paint with.
Once all these layers display together, it forms the final lighting effects you see in game. Each of these layers are actually saved out as different files and reassembled in Flash the same way they were created. I'll cover this process more when discussing the Flash end of things.
The only Photoshop work done on background renders short of lighting is just for minor touch ups as needed. Sometimes shadows render a little quirky or undesirable, or models come out a little too faceted (not rounded) looking. These issues are usually handled with the clone stamp tool or some really light painting.
From here on out we'll be working in Flash exclusively, starting with the Flash asset file for each level--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
Camera Setup
So we're finally ready to render out all these 3D models we've been working with.
The environments are pretty straightforward; using the cameras that were set up, each room is rendered out one by one. This is usually done as a batch process, so Maya will automatically render out and save each room according to the camera positions that were keyframe animated. As you can see in the example Barton Sewers, depending on the lighting settings used, the final render can look much different from how the 3D model looks in Maya.
Full size
Rendering takes into account the lights in a scene, how light bounces off surfaces, where shadows project, and calculates a smoother rendition of the models and textures. This process usually takes a good amount of time depending on the final image resolution set and complexity of the lights and render settings. While rendering, your computer will be pretty much unusable, because all its resources go into creating the render. All environments and assets are rendered as lossless pngs, then jpg compressed later in Flash.
The assets in zOMG! go through several more steps before they're ready to use in Flash. An asset's render will be created to double the needed resolution, then scaled down 50% in Photoshop. This is so they are able to hold onto more detail even at their reduced size. Afterward, the asset is converted to indexed color, or 4-bit 256 color. As you can see in the example image with an Otami Ruins plant, converting to indexed color changes any partially transparent pixels to full opaque. It also reduces the color palette to only 256 colors. Upon closer inspection, you can see different colored pixels stand out and gradients won't be as smooth.
Full size
The reason why assets get converted to indexed color is for the file size savings. For this plant, the file is reduced from 22k to only 6k-- almost a 4x reduction! For a game like zOMG! where fast level and asset downloads are key, this is an important way to keep download sizes in check.
After all the rendering is done, then it's time for getting needed environments and assets ready for night scenes. Everything in zOMG! that illuminates at night is actually hand painted after rendering, and has nothing to do with Maya 3D lights.
Using a corner of an Under Mountain room as an example, two different layers are painted on top in Photoshop to achieve the effect of lighting in the game. The first is the night mask, which is actually a duplicate of the render with a mask applied which hides the entire image. Between these layers is a blue tinted multiply layer that mimics the look of night in the game. Then using different sizes and opacity of brushes, the night mask image is colored back in on the mask at the points where light sources would cast.
Full size
Next the light overlay layer is created to bump the brightness or hot spots of the lights. It's a layer set to overlay blending that sits on top of everything else. Only the color white is used to paint with.
Once all these layers display together, it forms the final lighting effects you see in game. Each of these layers are actually saved out as different files and reassembled in Flash the same way they were created. I'll cover this process more when discussing the Flash end of things.
The only Photoshop work done on background renders short of lighting is just for minor touch ups as needed. Sometimes shadows render a little quirky or undesirable, or models come out a little too faceted (not rounded) looking. These issues are usually handled with the clone stamp tool or some really light painting.
From here on out we'll be working in Flash exclusively, starting with the Flash asset file for each level--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
Camera Setup
