1. Concept Art Mohammad Zikky, M.T

2. 2 Outline  The Pipeline  Concept Art(next)  2D Art  Animation, Tiles  3D Art  Modeling, Texturing, Lighting

3. 3 Why Not Just Prototype?  Even creating prototypes can be time consuming and expensive  Getting it right on the first try is unlikely  Revising instantiated work can be difficult Thus the need for some forethought! Art and organization by Paolo Piselli, http://www.paolopiselli.com

4. 4 What is a Better Way? Make decisions on paper, where changes and variations can be made quickly and easily.

5. 5 What is Concept Drawing? (1 of 2)  From illustration, but is a modern idea  Main goal to convey visual representation of a design, idea, and/or mood  Use in movies, comic books and computer games  Before it is put into the final product (or even prototype)

6. 6 What is Concept Drawing? (2 of 2) It is not a full design, blueprint or specification. It is a partial design that gives enough detail to imply a full design. IMPLIES ConceptImplementation Art and organization by Paolo Piselli, http://www.paolopiselli.com

7. 7 Who Is Involved? We can think of the process as a two-part system: The ARTIST generates drawings based on the given constraints. The BOSS supplies the constraints that the drawing needs to fill. Art and organization by Paolo Piselli, http://www.paolopiselli.com

8. IMGD 1001 8 The BOSS (1 of 3)  Takes part in a higher-level design process with goals of its own Attract web-visitors Sell more widgets Win an Oscar Art and organization by Paolo Piselli, http://www.paolopiselli.com

9. IMGD 1001 9 The BOSS (2 of 3)  Communicates constraints inherited from this higher- level process to the ARTIST We need a happy, purple dinosaur to sell more widgets! Happy Purple Dinosaur Art and organization by Paolo Piselli, http://www.paolopiselli.com

10. 10 The BOSS (3 of 3)  Evaluates the fitness of the ARTIST’s solutions based on various heuristics Market research says its good Wife likes it Magic 8-Ball says outlook not so good Art and organization by Paolo Piselli, http://www.paolopiselli.com

11. 11 The ARTIST (1 of 4)  Generates drawings based on the given constraints We need a happy, purple dinosaur to sell more widgets! Happy Purple Dinosaur Art and organization by Paolo Piselli, http://www.paolopiselli.com

12. 12 The ARTIST (2 of 4)  Has expert knowledge of drawing materials and techniques Art and organization by Paolo Piselli, http://www.paolopiselli.com

13. 13 The ARTIST (3 of 4)  Has aesthetic heuristics (acquired by studying style, design and master artwork) Art and organization by Paolo Piselli, http://www.paolopiselli.com

14. 14 The ARTIST (4 of 4)  May need to cache domain-specific knowledge (dinosaur anatomy, typical dress of a noblewoman in 13 th century England, etc.) Art and organization by Paolo Piselli, http://www.paolopiselli.com

15. 15 A Space of Ideas (1 of 3) There is a space of drawings that potentially satisfy some set of constraints (could be from cache) (Space of Evil Lizard- Monsters) Art and organization by Paolo Piselli, http://www.paolopiselli.com

16. 16 A Space of Ideas (2 of 3) The ARTIST is capable of generating drawings that represent regions of this space. (Remember that because a concept drawing is not a full design, there is some range of designs that each drawing represents) Art and organization by Paolo Piselli, http://www.paolopiselli.com

17. 17 A Space of Ideas (3 of 3) The BOSS provides the ARTIST with direction in searching this space for a solution that optimizes BOSS’s heuristics. My wife says it needs more armor! “Concepting” is like a “hill-climbing” search of the idea space! Art and organization by Paolo Piselli, http://www.paolopiselli.com

18. 18 Beginning with Thumbnails (1 of 3)  The exploration of possible solutions often begins with ARTIST generating rough drawings.  These rough drawings - called “thumbnails” – are often little more than suggestive scribbles.  Thumbnails can be generated very rapidly. This allows ARTIST to generate many points of search space at little cost. Art and organization by Paolo Piselli, http://www.paolopiselli.com

19. 19 Beginning with Thumbnails (2 of 3) But where does the artist come up with all these samples of search space? The ARTIST forms these partial solutions from domain experience and/or cached reference images! Art and organization by Paolo Piselli, http://www.paolopiselli.com

20. 20 Beginning with Thumbnails (3 of 3)  Thumbnails enable ARTIST and BOSS to quickly get their bearings and identify fruitful starting-points for exploration.  These rough drawings can quickly expose problems with the given constraints.  It doesn’t take highly detailed concepts to cull large portions of search space! I like the one with the sunglasses. Let’s see where we can go with that! Art and organization by Paolo Piselli, http://www.paolopiselli.com

21. IMGD 1001 21 Drawing the Concept (1 of 5)  There are many techniques for creating more detailed concepts (pencils, markers, watercolors, etc.)  In general, the drawing process is one of iterative refinement.  For example, when rendering a concept with markers, the ARTIST will begin by roughly sketching most of the detail with a light marker. Art and organization by Paolo Piselli, http://www.paolopiselli.com

22. IMGD 1001 22 Drawing the Concept (2 of 5)  Next, the ARTIST does some line selection.  In this stage, the ARTIST is choosing the best of the rough details for inclusion in the final concept.  The ARTIST may also be adding some lower-level details as well, now that the higher-level details are becoming more specific. Art and organization by Paolo Piselli, http://www.paolopiselli.com

23. IMGD 1001 23 Drawing the Concept (3 of 5)  Next, the ARTIST does some region coloring to separate the different elements of the drawing … Art and organization by Paolo Piselli, http://www.paolopiselli.com

24. IMGD 1001 24 Drawing the Concept (4 of 5) … and now a shading pass to reveal the 3D form of the concept … Art and organization by Paolo Piselli, http://www.paolopiselli.com

25. IMGD 1001 25 Drawing the Concept (5 of 5) … and finally a detail pass, picking out lines to reinforce and areas to highlight. This concept is finished … but wait! Art and organization by Paolo Piselli, http://www.paolopiselli.com

26. IMGD 1001 26 Back to Hill-Climbing! Very nice! But the Magic 8-Ball doesn’t like all those spots; and the VCs think it should have big, muscley arms! ! Art and organization by Paolo Piselli, http://www.paolopiselli.com

27. IMGD 1001 27 Questions and Discussion Art and organization by Paolo Piselli, http://www.paolopiselli.com

28. 2D and 3D Concept Design

29. Animation  Animation  produces the illusion of movement  Display a series of frames with small differences between them  Done in rapid succession, eye blends to get motion  Unit is Frames Per Second (fps). For video:  24-30 fps: full-motion (Game Maker does 30)  15 fps: full-motion approximation  7 fps: choppy  3 fps: very choppy  Less than 3 fps: slide show  (2D Sprites can get away with about ½ the above)  To do successfully, need to keenly observe, focus on differences in movement  Apply basic principles (next)

30. IMGD 1001 Key Frames  Images at extremes in movement  Most noticeable to observer  Ex: for flight wings up and wings down  Ex: for walking, right leg forward, leg together  The more the better?  Smoother, yes  But more time to develop (tradeoffs)  And more prone to errors, “bugs” that interfere with the animation Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman

31. IMGD 1001 In-Between Frames  Generated to get smooth motion between key- frames  Can be tedious and time consuming to make  Most software allows duplication Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman

32. IMGD 1001 Frame Animation Guidelines Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman (See GameMaker tutorial shooter for examples of Enemy Planes, Explosions) Faster motion needs fewer drawings. Slower motion needs more drawings.

33. IMGD 1001 Secondary Actions  Animation part that does not lead movement, but follows it  Add extra dimension of reality  Ex: Hair moving in wind  Ex: Cape billowing backward Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman

34. Steps in Creating Animation Sequences (1 of 3)  Conceptualize – have vision (in mind or on paper) of what animation will look like  Decide on object behavior 1. Animated once (no looping) 2. Animated continuously (using cycles) 3. 2 nd choice means must make last key frame blend with first  Choose an image size – will contain and constrain object  Test and experiment briefly to have plenty of room  Design key-frames - drawing the motion extremes  Use simple shapes to represent main actions  Ex: stick figures or basic shapes (circles, squares) Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman

35. Steps in Creating Animation Sequences (2 of 3)  Estimate the in-betweens  Think of how many you will need to complete the sequence smoothly  Be conservative. Easier to add additional transition frames than to remove them  Apply secondary enhancements  Embellish to look convincing and enticing  Exaggeration Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman

36. IMGD 1001 Steps in Creating Animation Sequences (3 of 3)  Test each movement  Can be done with ‘copy’ and ‘undo’ in tool  Others have animation rendering (ex- Game Maker)  Look for flaws (movement, discolored pixels …)  Repeat  Repeat for all animations Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman

37. IMGD 1001 Tiles  Needed for common backgrounds  Too hard to make every pixel different!  Exploration games (especially outdoors) make heavy use of these  Grass, trees, water, sand  Start with a grass tile to warm up So You Want to Be a Pixel Artist?, by Tsugumo

38. IMGD 1001 Grass is Green  Use a basic green square  But this looks unnatural  Like flat, shiny metal  No illusion of movement So You Want to Be a Pixel Artist?, by Tsugumo  Simply a Green Box (Ex: bkg_grass0 )

39. IMGD 1001 Grass has Variation  Can do a lot with simple enhancement of color shades So You Want to Be a Pixel Artist?, by Tsugumo (Ex: bkg_grass1 )

40. IMGD 1001 Make Variation More Random  Can use the “spray” tool So You Want to Be a Pixel Artist?, by Tsugumo (Ex: bkg_grass2 )

41. IMGD 1001 Make Look Random but with Control  Draw by hand for more control  4 pixel line strokes So You Want to Be a Pixel Artist?, by Tsugumo (Ex: bkg_grass3 )

42. IMGD 1001 The “Grid” (1 of 3)  Looks too much like tiles  “Large” blank is problem, so remove So You Want to Be a Pixel Artist?, by Tsugumo

43. IMGD 1001 The “Grid” (2 of 3)  Still, some “lines” are visible when repeated  Break up with more color So You Want to Be a Pixel Artist?, by Tsugumo

44. IMGD 1001 The “Grid” (3 of 3)  Much better! So You Want to Be a Pixel Artist?, by Tsugumo (Ex: bkg_grass4 )

45. IMGD 1001 Don’t Try This at Home  Don’t use same texture for all, else not much better than just colors So You Want to Be a Pixel Artist?, by Tsugumo

46. 3D Art IMGD 1001 46

47. IMGD 1001 47 Polygonal Modeling Basics: Primitives  Primitives are basic shapes  Most 3d packages have same primitives:  Sphere, Cube, Cylinder, Plane  Use for “broad strokes”  Concentrate on primitives within object  Ex: human body (ovals for shoulders, cylinders for legs, sphere for head…)  Components are parts that make up primitive  Ex: vertices, edges, triangles, faces, elements  Similar across all packages but terminology can vary  Transformation allows moving, rotating, scaling object or component

48. IMGD 1001 48 Polygonal Modeling Basics: Normals  Face normals are at right angle to polygon  Tell what direction if facing, how to render, how light will react  Viewed from other side, is invisible  Fine if on inside (say, of solid cube)  When debugging, pay attention to normals as well as polygons

49. IMGD 1001 49 Polygonal Modeling Basics: Backface Culling  Toggles display of faces that point away from view  When on, see through wireframe  When off, looks solid (not drawn)  Makes look less cluttered

50. IMGD 1001 50 Modeling Tools  Certain tools and techniques used 80-90% of the time  Line Tool:  Draw outline of object and extrude to get 3-d shape  Ex: profile of car. Use line tool. Then, extrude outward to get shape.  Extrude:  Take component (often face), duplicating it, pulling pushing or scaling to refine model  Ex: take cube. Extrude face outward and smaller  Cut:  Subdivides faces and adds new faces  Adjust:  The artistic part of modeling. Try to capture form, profile and character by moving vertices  “Vertex surgery”, part of the technical manipulation Based on Chapter 6.2, Introduction to Game Development

51. IMGD 1001 51 A Modeling Technique: Box Modeling  Done for character, but can apply to other things  General idea:  Start with box, cylinder or other primitive  Extrude, Cut, Adjust…  Get topology, proportions right  Once happy, refine until details complete

52. IMGD 1001 52 Box modeling: Quick Example  Reference  Box modeling: extrude, cut, adjust  Compare to reference  Shade Based on Chapter 6.2, Introduction to Game Development

53. IMGD 1001 53 Polygons and Limits  3d Software renders scene of polygons like game  But 3d software slow (Toy Story 1 frame / 15 hrs)  Game is real time (30 frames / second)  Need to limit polygons. How spent depends upon world size and where needed.  Ex: Medal of Honor versus Soul Caliber 2. MoH details spread across world, less on avatars. SC2 can have detailed avatars since only 2 in one ring.  Think of how many polygons each item needs. Estimates, educated guesses. Then, make pass. (Tools will often give count)  Used wisely, can make detailed scenes with few (Ex: 2.5, page 24)  Ch 6.2 assumes 4000 (typical for PS2 street fighting game or hero in 3 rd person action game) Based on Chapter 2, Creating the Art of the Game, by Matthew Omernick

54. IMGD 1001 54 Polygon Reduction (1 of 4)  Being able to model without wasting polygons important  takes practice  If a player will see face?  Ex: oil barrel as cylinder. Will see bottom? Nope, then delete.  Are all faces necessary? Looks great, yeah, but some can be removed.  Ex: 12-sided cylinder still looks “round” with 8 sides? Then do it.  (Example exercise p30-31) Based on Chapter 2, Creating the Art of the Game, by Matthew Omernick

55. IMGD 1001 55 Polygon Reduction (2 of 4)  Level-of-detail (LOD) meshes  Multiple versions of object, progressively lower levels  When far away, use low level  Assume more objects in Field of View  When close, use higher level  Assume fewer objects in Field of View

56. IMGD 1001 56 Polygon Reduction (3 of 4)  For entire level (ie- map with environment), entire polygon count matters  Impacts amount of memory needed  But only visible polygons rendered  Rest are “culled” and not computed Based on Chapter 6.2, Introduction to Game Development Images courtesy of WildTangent

57. IMGD 1001 57 Polygon Reduction (4 of 4)  With low polygon modeling, much of the detail is painted into the texture (next topic!) Images courtesy of WildTangent, model and texture by David Johnson. Based on Chapter 6.2, Introduction to Game Development

58. IMGD 1001 58 Texture  Shader – define surface property of object – how shiny, bumpy, how light effects  Texture – bitmap plugged into shader that defines image we want to appear on object Based on Chapter 6.4, Introduction to Game Development

59. IMGD 1001 59 Detail in Texture  Add depth, lines, etc. without polygons  Box is 12 polygons, bricks would take many more (Taken from http://www.mostert.org/3d/3dpdzscenem.html) Based on Chapter 6.4, Introduction to Game Development

60. IMGD 1001 60 Lighting  Can conjure feelings, emotions, even change what you are seeing  Reveal (or hide) depth  (Many books on traditional lighting)  AR/ID 3150. LIGHT, VISION AND UNDERSTANDING  Color, Mood Based on Chapter 6.6, Introduction to Game Development

61. IMGD 1001 61 The Role of Color RTX Red Rock http://www.informit.com/articles/article.asp?p=174370 Color indicates danger

62. IMGD 1001 62 The Role of Lighting Long shadows not only add to the atmosphere, but also help break up repetition http://www.informit.com/articles/article.asp?p=174370

63. IMGD 1001 63 Key light – main source. The Key light is placed next to the camera, about 35-45 degree angle to the subject. The angle is determined by what kind of mood that you want the scene to have. http://www.3dtotal.com/team/Tutorials/Jenns3pt_tut/3ptlighting.asp Lighting Setup (1 of 3)

64. IMGD 1001 64 Fill light – Brings out some details out of shadow. Place the Fill Light at a 90 degree angle from the Key Light, usually slightly higher or lower than the Key Light. http://www.3dtotal.com/team/Tutorials/Jenns3pt_tut/3ptlighting.asp Lighting Setup (2 of 3)

65. IMGD 1001 65 Backlight - Highlights edges, pulls away from background. Placed directly opposite the camera and behind the subject. http://www.3dtotal.com/team/Tutorials/Jenns3pt_tut/3ptlighting.asp Lighting Setup (3 of 3)

66. IMGD 1001 66 Working with 3D Lights  Directional Lights – used for sunlight or moonlight. Often as key light. Predictable.  Spot Lights – focus beam on single location. Great control.  Point Lights – single point in all directions. Light bulbs, candles, etc.  Ambient Lights – spread everywhere, equally. Uniform diffuse lights. Precise control over illumination. Based on Chapter 6.6, Introduction to Game Development

67. IMGD 1001 67 Example of Working with 3D Lights Ambient light Based on Chapter 6.6, Introduction to Game Development

68. IMGD 1001 68 Effective Lighting Practices (1 of 2) Pools of light – Don’t always try to light evenly. - Gives sense of mystery Pools of light in Indiana Jones: The Emperor's Tomb Based on Chapter 6.6, Introduction to Game Development

69. IMGD 1001 69 Effective Lighting Practices (2 of 2) Guide lights – - Use light to guide the player. - Helps highlight areas that are accessible and important to the objectives. Based on Chapter 6.6, Introduction to Game Development

70. IMGD 1001 70 Introduction to Transformations  A transformation changes an object's  Size (scaling)  Position (translation)  Orientation (rotation)  Transform object by applying sequence of matrix multiplications to object vertices

71. IMGD 1001 71 Hierarchical Transformations  Graphical scenes have object dependencies  Many small objects  Attributes (position, orientation, etc.) depend on each other base lower arm hammer A Robot Hammer!

72. IMGD 1001 72 Hierarchical Transformations  Object dependency description using tree structure Base Lower arm Upper arm Hammer Root node Leaf node Object position and orientation can be affected by its parent, grand-parent, grand-grand-parent, … nodes Hierarchical representation is known as Scene Graph

73. IMGD 1001 73 Hierarchical Transformations  Relative Transformations - Specify the transformation for each object relative to its parent Step 1: Translate the base (and its descendants) by (5, 0, 0); x z y x z y x z y

74. IMGD 1001 74 Hierarchical Transformations Step 2: Rotate the lower arm and (its descendants) relative to the base's local y axis by -90 degrees x z y x z y x z y

75. IMGD 1001 75 Hierarchical Transformations Base Lower arm Upper arm Hammer Rotate (-90) about its local y Translate (5, 0, 0) Apply all the way down Apply all the way down

76. IMGD 1001 76 Transformation uses Matrices  All transformations can be performed using matrix/vector multiplication  Allows pre-multiplication of all matrices  Note: point (x, y) needs to be represented as (x, y, 1), also called homogeneous coordinates

77. IMGD 1001 77 Point Representation  We use a column matrix (2x1 matrix) to represent a 2D point  General form of transformation of a point (x, y) to (x’, y’) can be written as: or

78. IMGD 1001 78 Translation  To reposition a point along a straight line  Given point (x, y) and translation distance (t x, t y )  The new point: (x’, y’) (x,y) (x’,y’) or where x’ = x + t x y’ = y + t y

79. IMGD 1001 79 3x3 2D Translation Matrix use 3x1 vector Note: it becomes a matrix-vector multiplication x’ = x + t x y’ = y + t y

80. IMGD 1001 80 Translation of Objects  How to translate an object with multiple vertices? Translate individual vertices

81. IMGD 1001 81 2D Scaling  Scale: Alter object size by scaling factor (Sx, Sy). i.e., x’ = x * Sx y’ = y * Sy (1,1) (2,2) Sx = 2, Sy = 2 (2,2) (4,4)

82. IMGD 1001 82 3x3 2D Scaling Matrix x’ = x * Sx y’ = y * Sy

83. IMGD 1001 83 2D Rotation  Default rotation center is origin (0,0) Rotate counter clockwise Rotate clockwise 

84. IMGD 1001 84 2D Rotation (cont.) (x,y)  Rotate about the origin by  (x’, y’) How to compute (x’, y’) ? x = r*cos() y = r*sin() (x,y) (x’,y’)   r x' = r*cos( +) y' = r*sin( +)

85. IMGD 1001 85 2D Rotation (cont.)  Using trigonometric identities (x,y) (x’,y’)   r x’ = x cos() – y sin() y’ = x sin() + y cos() Matrix form?

86. IMGD 1001 86 3x3 2D Rotation Matrix (x,y) (x’,y’)   r

87. IMGD 1001 87 2D Rotation  How to rotate an object with multiple vertices? Rotate individual Vertices 

88. IMGD 1001 88 Arbitrary Rotation Center  To rotate about arbitrary point P = (Px, Py) by :  Translate object by T(-Px, -Py) so that P coincides with origin  Rotate the object by R()  Translate object back: T(Px, Py)  In matrix form  T(Px,Py) R() T(-Px,-Py) * P  Similar for arbitrary scaling anchor

89. IMGD 1001 89 Composing Transformations  Composing transformations  Applying several transforms in succession to form one overall transformation  Example  M1 X M2 X M3 X P where M1, M2, M3 are transform matrices applied to P  Be careful with the order!  For example  Translate by (5, 0), then rotate 60 degrees is NOT same as  Rotate by 60 degrees, then translate by (5, 0)