Mavdoc
(?)Developer
- Posted: Sat, 01 May 2010 03:30:02 +0000
Camera Setup
After creating all the 3D models needed for a given area, we can move on to setting up cameras for the environment and assets so we can render.
For the environments, areas are meshed together in a master file that contains several zones combined. This includes making sure all roads and landscape continue smoothly between areas, and the same ground textures are used and mapped so there is no seam. This file can become very large and sometimes cumbersome to work with. The example image below was captured in wireframe because my Maya program crashed several times trying to load all the textures at once! This is why the master files with connective zones are kept as small as possible. It makes the whole process of opening, saving and working with them much easier.
Full size
Next is to add a camera to view this new environment through. The game is rendered with an orthographic camera, which takes all depth and perspective out of the backgrounds and assets. You can see in the example image below of the Old Aqueduct what the area looks like with perspective built in and not. In the perspective image, things closer to the bottom of the screen (or closer to the camera) appear larger while further objects shrink in the distance.
Full size
The guide used that all levels are built off of is the template grid. Each of these boxes represents one 780 x 505 pixel room, and are also made in the same proportions. From a straight vertical orientation, this grid is pitched down at a 30 degree angle. This is the constant viewing angle of all rooms in zOMG!, except for one room instances and some other exceptions. The grid provides a reference layout in Maya to know exactly how each room will be framed. Geometry will be modified to adhere to this room grid.
This grid also acts as a snapping point for the camera. The center points shown in the grid over the Old Aqueduct in the example image are used to snap the camera to each room center. The camera will be zoomed in so the horizontal and vertical boundaries match the room grid size, thus giving a 780 x 505 pixel rendered room. The camera then is actually keyframe animated to each room position to allow for quick setup to render any given room, or to batch render all rooms.
The larger grid sections shown in the lower right of the entire area template grid are actually for Barton Town. Since the outdoor persistent areas in the game are scaled to 75% (your avatar is displayed at 75% of full size), and Barton is at 50% scale (your avatar is half of full size), to stay consistent Barton's rooms must take up more space in relation to neighboring areas. Look at it this way: the proportion of 50/75 (%) = 2/3. If you notice Barton's grid rooms, 2 Barton rooms equals 3 neighboring area rooms.
Full size
Setting up cameras for assets is similar, except no template grid is needed since room size is irrelevant. The example image with the mushroom house shows a camera angled at 30 degrees and the view it has of the asset. The red colored icons represent lights in the scene that will light up the subject for rendering. The long arrows is for a directional light, and the star shaped ones are for ambient lights. Generally, the lighting used in zOMG! is pretty bright and doesn't cast many harsh shadows, giving the game a more cartoony look. These lights are used for both environments and assets. Note that in the example mushroom house image, the lights and camera are positioned much closer to the subject than usual for clarity.
Full size
All the props for a given level are setup in an assets file. Here each prop is rotated or modified to create variants. These props can be anything from a large asset like the Blood Tree in Otami Ruins, to different individual tufts of grass. These are all shown and eventually rendered by the same 30 degree camera that is used for environments so they keep the same orientation.
Full size
Now that everything is all situated correctly for the game cameras, the steps of actually rendering these levels and assets then processing them in Photoshop comes next--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization
After creating all the 3D models needed for a given area, we can move on to setting up cameras for the environment and assets so we can render.
For the environments, areas are meshed together in a master file that contains several zones combined. This includes making sure all roads and landscape continue smoothly between areas, and the same ground textures are used and mapped so there is no seam. This file can become very large and sometimes cumbersome to work with. The example image below was captured in wireframe because my Maya program crashed several times trying to load all the textures at once! This is why the master files with connective zones are kept as small as possible. It makes the whole process of opening, saving and working with them much easier.
Full size
Next is to add a camera to view this new environment through. The game is rendered with an orthographic camera, which takes all depth and perspective out of the backgrounds and assets. You can see in the example image below of the Old Aqueduct what the area looks like with perspective built in and not. In the perspective image, things closer to the bottom of the screen (or closer to the camera) appear larger while further objects shrink in the distance.
Full size
The guide used that all levels are built off of is the template grid. Each of these boxes represents one 780 x 505 pixel room, and are also made in the same proportions. From a straight vertical orientation, this grid is pitched down at a 30 degree angle. This is the constant viewing angle of all rooms in zOMG!, except for one room instances and some other exceptions. The grid provides a reference layout in Maya to know exactly how each room will be framed. Geometry will be modified to adhere to this room grid.
This grid also acts as a snapping point for the camera. The center points shown in the grid over the Old Aqueduct in the example image are used to snap the camera to each room center. The camera will be zoomed in so the horizontal and vertical boundaries match the room grid size, thus giving a 780 x 505 pixel rendered room. The camera then is actually keyframe animated to each room position to allow for quick setup to render any given room, or to batch render all rooms.
The larger grid sections shown in the lower right of the entire area template grid are actually for Barton Town. Since the outdoor persistent areas in the game are scaled to 75% (your avatar is displayed at 75% of full size), and Barton is at 50% scale (your avatar is half of full size), to stay consistent Barton's rooms must take up more space in relation to neighboring areas. Look at it this way: the proportion of 50/75 (%) = 2/3. If you notice Barton's grid rooms, 2 Barton rooms equals 3 neighboring area rooms.
Full size
Setting up cameras for assets is similar, except no template grid is needed since room size is irrelevant. The example image with the mushroom house shows a camera angled at 30 degrees and the view it has of the asset. The red colored icons represent lights in the scene that will light up the subject for rendering. The long arrows is for a directional light, and the star shaped ones are for ambient lights. Generally, the lighting used in zOMG! is pretty bright and doesn't cast many harsh shadows, giving the game a more cartoony look. These lights are used for both environments and assets. Note that in the example mushroom house image, the lights and camera are positioned much closer to the subject than usual for clarity.
Full size
All the props for a given level are setup in an assets file. Here each prop is rotated or modified to create variants. These props can be anything from a large asset like the Blood Tree in Otami Ruins, to different individual tufts of grass. These are all shown and eventually rendered by the same 30 degree camera that is used for environments so they keep the same orientation.
Full size
Now that everything is all situated correctly for the game cameras, the steps of actually rendering these levels and assets then processing them in Photoshop comes next--
Previous topics:
Overview of Environment Art Pipeline
Concept to Flash Implementation
Prop Concepting
3D Model Creation
Asset Organization