1 / 0

Concept Art

Concept Art. Mohammad Zikky, M.T. Outline. The Pipeline Concept Art ( next ) 2D Art Animation, Tiles 3D Art Modeling, Texturing, Lighting. Why Not Just Prototype?. Even creating prototypes can be time consuming and expensive Getting it right on the first try is unlikely

brick
Download Presentation

Concept Art

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Concept Art

    Mohammad Zikky, M.T
  2. Outline The Pipeline Concept Art (next) 2D Art Animation, Tiles 3D Art Modeling, Texturing, Lighting
  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. What is a Better Way? Make decisions on paper, where changes and variations can be made quickly and easily.
  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. 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 Concept Implementation Art and organization by Paolo Piselli, http://www.paolopiselli.com
  7. Who Is Involved? We can think of the process as a two-part system: The BOSS supplies the constraints that the drawing needs to fill. The ARTIST generates drawings based on the given constraints. Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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 IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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 IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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. 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. The ARTIST (2 of 4) Has expert knowledge of drawing materials and techniques Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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. The ARTIST (4 of 4) May need to cache domain-specific knowledge (dinosaur anatomy, typical dress of a noblewoman in 13th century England, etc.) Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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. 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. 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. 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. 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. 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. 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. IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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. IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  23. Drawing the Concept (3 of 5) Next, the ARTIST does some region coloring to separate the different elements of the drawing … IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  24. Drawing the Concept (4 of 5) … and now a shading pass to reveal the 3D form of the concept … IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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! IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  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! ! IMGD 1001 Art and organization by Paolo Piselli, http://www.paolopiselli.com
  27. Questions and Discussion IMGD 1001 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. 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 IMGD 1001 Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman
  31. In-Between Frames Generated to get smooth motion between key-frames Can be tedious and time consuming to make Most software allows duplication IMGD 1001 Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman
  32. Frame Animation Guidelines Faster motion needs fewer drawings.  Slower motion needs more drawings. IMGD 1001 (See GameMaker tutorial shooter for examples of Enemy Planes, Explosions) Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman
  33. 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 IMGD 1001 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 Animated once (no looping) Animated continuously (using cycles) 2ndchoice 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. 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 IMGD 1001 Based on Chapter 9, Designing Arcade Computer Game Graphics, by Ari Feldman
  37. 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 IMGD 1001 So You Want to Be a Pixel Artist?, by Tsugumo
  38.  Simply a Green Box Grass is Green Use a basic green square But this looks unnatural Like flat, shiny metal No illusion of movement IMGD 1001 (Ex:bkg_grass0) So You Want to Be a Pixel Artist?, by Tsugumo
  39. Grass has Variation Can do a lot with simple enhancement of color shades IMGD 1001 (Ex:bkg_grass1) So You Want to Be a Pixel Artist?, by Tsugumo
  40. Make Variation More Random Can use the “spray” tool IMGD 1001 (Ex:bkg_grass2) So You Want to Be a Pixel Artist?, by Tsugumo
  41. Make Look Random but with Control Draw by hand for more control 4 pixel line strokes IMGD 1001 (Ex:bkg_grass3) So You Want to Be a Pixel Artist?, by Tsugumo
  42. The “Grid” (1 of 3) Looks too much like tiles “Large” blank is problem, so remove IMGD 1001 So You Want to Be a Pixel Artist?, by Tsugumo
  43. The “Grid” (2 of 3) Still, some “lines” are visible when repeated Break up with more color IMGD 1001 So You Want to Be a Pixel Artist?, by Tsugumo
  44. The “Grid” (3 of 3) Much better! IMGD 1001 (Ex:bkg_grass4) So You Want to Be a Pixel Artist?, by Tsugumo
  45. Don’t Try This at Home Don’t use same texture for all, else not much better than just colors IMGD 1001 So You Want to Be a Pixel Artist?, by Tsugumo
  46. 3D Art 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 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 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 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 IMGD 1001 Based on Chapter 6.2, Introduction to Game Development
  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 IMGD 1001
  52. Box modeling: Quick Example Reference Box modeling: extrude, cut, adjust Compare to reference Shade IMGD 1001 Based on Chapter 6.2, Introduction to Game Development
  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 3rd person action game) IMGD 1001 Based on Chapter 2, Creating the Art of the Game, by Matthew Omernick
  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) IMGD 1001 Based on Chapter 2, Creating the Art of the Game, by Matthew Omernick
  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 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 IMGD 1001 Images courtesy of WildTangent Based on Chapter 6.2, Introduction to Game Development
  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. IMGD 1001 Based on Chapter 6.2, Introduction to Game Development
  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 IMGD 1001 Based on Chapter 6.4, Introduction to Game Development
  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) IMGD 1001 Based on Chapter 6.4, Introduction to Game Development
  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 IMGD 1001 Based on Chapter 6.6, Introduction to Game Development
  61. The Role of Color RTX Red Rock Color indicates danger IMGD 1001 http://www.informit.com/articles/article.asp?p=174370
  62. The Role of Lighting Long shadows not only add to the atmosphere, but also help break up repetition IMGD 1001 http://www.informit.com/articles/article.asp?p=174370
  63. Lighting Setup (1 of 3) 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. IMGD 1001 http://www.3dtotal.com/team/Tutorials/Jenns3pt_tut/3ptlighting.asp
  64. Lighting Setup (2 of 3) 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. IMGD 1001 http://www.3dtotal.com/team/Tutorials/Jenns3pt_tut/3ptlighting.asp
  65. Lighting Setup (3 of 3) Backlight - Highlights edges, pulls away from background. Placed directly opposite the camera and behind the subject. IMGD 1001 http://www.3dtotal.com/team/Tutorials/Jenns3pt_tut/3ptlighting.asp
  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. IMGD 1001 Based on Chapter 6.6, Introduction to Game Development
  67. Example of Working with 3D Lights Ambient light IMGD 1001 Based on Chapter 6.6, Introduction to Game Development
  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 IMGD 1001 Based on Chapter 6.6, Introduction to Game Development
  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. IMGD 1001 Based on Chapter 6.6, Introduction to Game Development
  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 IMGD 1001
  71. Hierarchical Transformations Graphical scenes have object dependencies Many small objects Attributes (position, orientation, etc.) depend on each other hammer A Robot Hammer! lower arm base IMGD 1001
  72. Base Lower arm Upper arm Hammer Hierarchical Transformations Object dependency description using tree structure Root node Object position and orientation can be affected by its parent, grand-parent, grand-grand-parent, … nodes Hierarchical representation is known as Scene Graph Leaf node IMGD 1001
  73. y y y x x x z z z 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); IMGD 1001
  74. y y y x x z x z z Hierarchical Transformations Step 2: Rotate the lower arm and (its descendants) relative to the base's local y axis by -90 degrees IMGD 1001
  75. Translate (5, 0, 0) Base Lower arm Upper arm Hammer Hierarchical Transformations Rotate (-90) about its local y Apply all the way down Apply all the way down 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 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 IMGD 1001
  78. (x’,y’) (x,y) Translation To reposition a point along a straight line Given point (x, y) and translation distance (tx, ty) The new point: (x’, y’) x’ = x + tx y’ = y + ty or where IMGD 1001
  79. 3x3 2D Translation Matrix x’ = x + tx y’ = y + ty use 3x1 vector Note: it becomes a matrix-vector multiplication IMGD 1001
  80. Translation of Objects How to translate an object with multiple vertices? Translate individual vertices IMGD 1001
  81. 2D Scaling Scale: Alter object size by scaling factor (Sx, Sy). i.e., x’ = x * Sx y’ = y * Sy (4,4) Sx = 2, Sy = 2 (2,2) (2,2) (1,1) IMGD 1001
  82. 3x3 2D Scaling Matrix x’ = x * Sx y’ = y * Sy IMGD 1001
  83. q q 2D Rotation Default rotation center is origin (0,0) > 0 : Rotate counter clockwise < 0 : Rotate clockwise IMGD 1001
  84. (x’,y’) q r f (x,y) 2D Rotation (cont.) (x,y)  Rotate about the origin byq (x’, y’) How to compute (x’, y’) ? x = r*cos() y = r*sin() x' = r*cos( +) y' = r*sin( +) IMGD 1001
  85. (x’,y’) r q f (x,y) 2D Rotation (cont.) Using trigonometric identities x’ = x cos(q) – y sin(q)y’ = x sin(q) +y cos(q) Matrix form? IMGD 1001
  86. (x’,y’) r q f (x,y) 3x3 2D Rotation Matrix IMGD 1001
  87. q 2D Rotation How to rotate an object with multiple vertices? Rotate individual Vertices 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 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) IMGD 1001
More Related