Character Design for Animation and Games

1. Character Design for Animation and Games Week 5a: Unwrapping a Maya 3D Model Multiple Texture Maps: Bump, Opacity, Specular

2. Critique: 2D Concepts and 3D Models 2D Criteria: Kids Media • How well does each character communicate their role in the story? • How well does each character express the forms, lines, and color qualities of the referenced children’s media artists? Limited 3D: Discuss Organic Modeling considerations: Even Tessellation, Quads, and Smooth Edge Loops.

3. Character Modeling Support Teacher demonstration of detail-cutting and hair modeling. Make progress, and help your neighbor! By next class you want the rough form complete, and try to start the clothing, hair and face details. HAIR combines overall shape (think sculpted mashed potatoes) and Opacity Maps on Shells (curved planes).

4. Multiple Texture Maps: Bump A BUMP MAP is a grayscale image to fake small details: pitting, gutters, scratches, seams, stitches, etc. The rendering engine interprets white as pushed out and black as pushed in, withdynamic highlights and shadows relative to the light source to show these details. In the AiStandardSurfaceshader, find Bump under the Geometryrolldown. There are multiple “CHANNELS” in a 3D texture which can contain specific image “MAPS” designed to enhance the way a surface responds to light, and supplement the color details we paint.

5. Multiple Texture Maps: Opacity An OPACITY MAP is another way to add detail. White is interpreted as visible, black invisible, and gray semi-visible in the Transparency channel (also under Geometry: must also select the mesh and in the Attribute Editor turn off Arnold > Opaque), creating holes in the mesh. This is very useful for painting hair strands on bangs or ponytails or any other bits sticking out of the silhouette. Opacity maps are also good for spider webs, torn cloth, intricate metalwork, glass, etc.

6. Multiple Texture Maps: Specular AMBIENT OCCLUSION is the shadows in the creases and folds of skin and cloth that help the model feel much more believable; that it is part of a real system of light. The SPECULAR MAP is a grayscale image that manages the highlights on the surface. White is interpreted as bright, gray as dull, black as non-reflective

7. Multiple Texture Maps: Glow A GLOW MAP is a grayscale image that creates the appearance of a light source on the surface of your model. In a standard glow, white is interpreted as receiving no shadows (flat and bright) and black receives normal shadows. An enhanced glow can have a Bloom effect where the glow blurs beyond the borders of the shape, and also can actually serve as a light source, illuminating surfaces around it.

8. Multiple Texture Maps: Color The COLOR MAP, also called Diffuse or Albedo, is a powerful way to communicate detail if painted with the same lavish care we use in 2D concepts.When combined with specular, bump , and opacity maps, the surface starts to feel like it is part of a genuine place and time.

9. EXERCISE 1a: Multiple Materials: PNGs Make a Photoshop file: 2048x2048, 72ppi. Add 4 layers and paint 4 texture maps: 1. Color: Fill the base with a solid color, and quickly paint blobs in “color” layer above. 2. Specular: Fill with black, [Cmd]+leftClick the color layer and fill with white. 3. Bump: Fill gray, draw black and white shapes. 4. Opacity: Fill white, paint top row black to look like broken shapes. Export each layer as a PNG named cylinder_maptype

10. EXERCISE 1b: Multiple Materials: Cylinder 1. Create a cylinder, height = 10. 2. Open UV > UV Editor. This opens the 2D editor for the selected 3D model. By default, this cylinder has 3 parts in the UV map: the rectangular body and top and bottom circles. IMPORTANT: Hit [6] on your keyboard so that any textures on the model are visible.

11. EXERCISE 1c: Multiple Materials: Revise UVs Hit [w] for Move Tool, then RightClickHold for selection modes. Use “UVs” (not Vertices) to transform. Select a full piece: DoubleClick one UV to select the entire “Shell.” 1. Move [W] and Shrink [R] the top circle into the upper right corner. 2. Move the bottom circle outside of the 0-to-1 staging square. 3. Hit [R] to Scale/expand the rectangular body to fit just inside the entire UV square. It is Ok to scale non-uniformly in this case, but normally we are careful to maintain proportions.

12. EXERCISE 1d: Multiple Materials: Hypershade Network Open the Windows > Rendering Editors > Hypershade. From the left list create a new AiStandardSurface material. Middle Mouse drag onto your cylinder. In the top Materials bar RightClick Hold the AiStandardSurface and choose “Graph Network.” Select the AiStandardSurface in the work area and find our 4 texture channels in the right-hand Properties Editor (Opacity and Bump are under Geometry. To reduce bump see bump strength node). Click the checker icon beside each to add File nodes, select each File node to add your texture PNGs. Add in this order to observe the results of each on the model: (1) Bump, (2) Opacity, (3) Specular Weight, (4) Color

13. EXERCISE 2e: Multiple Materials: Example NOTE: this slide uses an old Blinn material, but the network should look the same on an AiStandard Surface

14. Character Unwrapping We will explore the six steps of Character Texturing next class, but you can try the critical UNWRAPPING stage right away: Select polygons in a Cylindrical or Planar arrangement, and apply the correct UV Map (usually Cylindrical). Hit the red T to transform the gizmo for better projection (move, rotate, and scale), for square/even checkers.TUTORIAL: http://bit.ly/29ye4hE

15. Homework #9: Revise Rough and Details • Progress and Revise your final project 3D Character Model towards a full form with detailed features: clothing, hair, and face. • Optionally, start your UVW Unwrap! • Post progress screenshots [Cmd]+[Shift]+[4] to Piazza hw9 by noon Thursday.

16. Post-Class Viewing: Game Characters Oddworld, Cuphead, and Shadow of the Colossus

17. Post-Class Viewing: Game:Shadow of the Colossus

18. Post-Class Viewing: Game: Oddworld

19. Post-Class Viewing: Game: Cuphead