Exploring Stylized Art: A Case Study of World of Warcraft
Exploring Stylized Art: A Case Study of World of Warcraft Amy-Louise Gowland, BA Computer Games Art, P4039865. Contemporary Studies in Games, GAV3009-N.
ABSTRACT
2. THE FIVE STYLISTIC PRINCIPLES
Exploring the art style of World of Warcraft to broaden understanding of the principles and processes considered, when creating stylistic games art. Research has been conducted via the analysis of resources created by industry experts, and through the recreation of an existing in-game prop. This research defines the style into five principles which inform a texturing method, and provide insight into potential issues encountered. This is of importance for the Games Practical Project, where an environment scene will be created in the World of Warcraft style.
World of Warcraft’s stylistic art style can be defined by five key principles: context, texture, colour, animation, and shape language.
KEYWORDS: Games, Games Art, Texturing, World of Warcraft, 3D, Rendering, Props, Assets, Process, Fundamentals.
1. INTRODUCTION Blizzard’s catalogue of games spans several genres, each with a unique flair and polish, that fans have associated with the company. Blizzard believes that to make a lasting game, you need to create an ageless art style. The company pushes the visuals as much as it possibly can to tell the stories and support the gameplay. (Blizzard Art Philosophy, 2015). This study aims to deconstruct the essence of the World of Warcraft art style by identifying the core principles and processes considered, when working with the style. A variety of material has been explored to determine the creative-process behind this stylism. With this in consideration an in-game prop was recreated to solidify an understanding of the findings. My motive for this project is to inform my own process for the Games Practical Project, where a stylistic environment based on the World of Warcraft universe, will be created. The paper is organised as follows: Section 2 explores related work and identifies principles of the style. Section 3 discusses a texturing process. This is sampled in Section 4, where the full process is documented. The paper concludes in Section 5.
2.1. CONTEXT World of Warcraft is set in the fictional world of Azeroth, containing a wide variety of continents; each with their own cultures and unique landscapes. ‘Before we can create any art, we have to ask two questions. Who? And where?’ (Chang et al, 2017). Context helps to define the characters who inhabit the spaces, and allows the designs that occupy the world to feel as if they are grounded in reality. This creates a feeling of believability. An ending zone in the raid Siege of Orgrimmar (Figure 1.) shows an effective use of context. Vergne (2013) details in her interview that the team ‘tried to represent the orc culture. It’s a very aggressive culture that uses primarily metal and wood to create their buildings’. This was achieved through the addition of chains, spikes, horns and lava (Figure 2.), to help communicate the aggressiveness of the characters who inhabit the space.
Figure 1. Siege of Orgrimmar, (Vergne, F. 2013)
Amy-Louise Gowland | 1
Exploring Stylized Art: A Case Study of World of Warcraft environment design and explains that stylized games generally have a colourful palette. However, as it must be ensured that there isn’t too much saturation or brightness. Colour in a scene should be well-balanced (Figure 4.), to maintain the stylized feel, help sell a consistent mood, and ensure that the player can read all visual information easily. Figure 2. Iron Horde Culture Kit (Vetter, W. 2013)
2.2. TEXTURE Textures in World of Warcraft have a stylistic, handpainted feel. Setting the tone of a scene, or providing context or narrative; regarding the type of area the player is exploring. For upcoming area Kul Tiras, dungeon artist Jessica Clarke explained that the types of materials used are important to communicate a certain feel for a scene. She explained that the team achieved a sea weathered vibe with textures (Figure 3.) ‘painted … in a rough way’ by adding rust and splinters (Chang et al, 2017).
Figure 4. Tomb of Sargeras Colours (Vergne, F. 2017)
2.4. ANIMATION ‘Moving elements can be powerful to create your story’ (Tokarev, 2017). Having elements of movement in environments helps to convince the player of a living world. A mailbox asset (Figure 5.) features a bouncing envelope on a spring. This is effective in notifying the player that this prop is something important, and communicates contextual information about the culture of the characters who built it.
Figure 3. Sea-weathered Materials (Clarke, J. 2017)
2.3. COLOUR According to Wallace (2016, p.28), ‘The blizzard aesthetic is very pumped up and colourful’. Colour used as a visual cue, communicates a great deal of information to players. It highlights areas of importance, and determines mood, among others. The informative Art of Diablo 3 presentation (Lichtner, 2012) detailed that colour was tied to certain events in the story. Helping the player visualise a clear connection between what’s happening on their screen and in the whole environment. There are however, considerations to be mindful of, Tokarev’s (2017) article discussed strings of
Figure 5. Bobbing Entertainment 2017)
envelope
on
mailbox asset
(Blizzard
When adding animated elements, it must be considered that the human eye is drawn to movement. Vergne details that ‘too much movement in your environment…might actually be killing the effect you intended’ (Tokarev, 2017). To prevent this, it is best to reserve most animated assets to points of interest.
Amy-Louise Gowland | 2
Exploring Stylized Art: A Case Study of World of Warcraft
2.5. SHAPE LANGUAGE Much like colour and animation, shape language is another tool utilised to communicate information to a player. All art in game has a strong silhouette - which creates instantly recognisable environments and characters. For example, Vergne explains that ‘the pandaren are funny round and joyful, while the demons from the Legion are scary imposing and sharp.’ (Tokarev, 2017) (Figure 6.).
Figure 7. Using ZBrush materials as a texture basis (Vergne, F. 2014).
Figure 6. Round friendly pandarens in comparison to sharp, imposing demons. (Blizzard Entertainment, 2017).
This principle was heavily considered in the making of the film (Warcraft, 2016), to ensure the film world was consistent with the games. For example, monumental buildings in the game are instantly recognisable based on their silhouettes. This is evident according to Wallace (2016, p.44). who described the kinds of iconic things a player might recognise in the film, like the main gate in Stormwind or the shape of the cathedral.
3. ATTEMPTING A TEXTURE Textures are at the forefront of the stylistic art style. Fanny Vergne, a senior 3D artist at Blizzard; created two resources that detail a technique where textural information can be rendered using a sculpt, to establish a composite texture. Vergne creates several renders in ZBrush (Pixologic, 2015) (Figure 7.) and uses the high poly to generate ambient occlusion, normal and height maps. (Hawkins, 2014). These images are composited in Photoshop (Adobe, 2017) to generate a base, by layering and editing layer type to generate the desired result.
Figure 8. Composite texture with baked maps. (Vergne, F. 2014).
She further refines the composite texture (Figure 8.) by expertly painting over the base, adding colour variations, highlights and shadows, and brush marks. Vergne’s full process can be found in Vertex 2 magazine (Hawkins, 2014, p. 268-281).
4. PROP CREATION ‘World of Warcraft features a vast number of props. The main job of props is to make the world feel more lived in, and to tell a story about the people there’ (Chang et al, 2017). To broaden my understanding of creating effective textures. I planned to recreate an existing prop, the gnome mailbox. This was achieved with the consideration of fundamentals and pipelines investigated.
Amy-Louise Gowland | 3
Exploring Stylized Art: A Case Study of World of Warcraft
4.1. THE FIRST STEPS ‘It is important to take some time to collect references about mood or ideas, technically and artistically.’ (Tokarev, 2017). Screenshots were taken in World of Warcraft (Figure 9.) as a reference point.
Figure 11. Arranging UV shells within the editor in 3DSMax. (Gowland, A. 2017).
Figure 9. In-game screenshots of Tinker Town mailbox. (Blizzard Entertainment 2017).
The base mesh was constructed in 3DSMax 2016 (Autodesk, 2016) (Figure 10.). It was important to retain the original shapes and silhouette, as according to Tokarev’s article (2017) shape language helps to represent the lore of an area and its inhabitants. Extra geometry was added, as this asset would not be restricted by engine requirements.
Figure 12. From left to right, base mesh, unwrapped, support loops. (Gowland, A. 2017).
4.2. SCULPTING & BAKING
Figure 13. Adding bolts and surface wear. (Gowland, A. 2017). Figure 10. Constructing the base mesh in 3DSMax. (Gowland, A. 2017).
Half of the prop was modelled and unwrapped (Figure 11.), with a symmetry modifier applied to mirror the shells. Support loops were added around the edges, to ensure the mesh would later subdivide as intended when sculpted (Figure 12.). The model was exported as an .fbx to ZBrush, where extra detail would be added.
High poly sculpts allow for a variety of information to be baked to a map, for use in texturing. Michael’s Orb Brush Pack by the senior environment artist (Vicente, 2015), allows stylistic dents and damages to be added. This was used in co-ordination with the IMM_ModelKit brush to add bolts and seams (Figure 13. Figure 14.).
Amy-Louise Gowland | 4
Exploring Stylized Art: A Case Study of World of Warcraft
Figure 14. The insert mesh menu options. (Gowland, A. 2017).
The sculpted mesh was exported as an .fbx, to bake the high poly information onto the low poly mesh using Marmoset Toolbag 3 (Marmoset LLC, 2017) (Figure 15. ;Figure 16.). During this process height, curvature, ambient occlusion and normal maps were created (Figure 17.). These were used to construct the base texture according to Vergne’s process. (Hawkins, 2014; Vergne, 2016).
Figure 17. Height, curvature, ambient occlusion and normal maps. (Gowland, A. 2017).
4.3. CREATING THE TEMPLATE The asset was imported into Substance Painter (allegorithmic, 2017) to create a texturing template. This was achieved by adding a fill of chosen base colour to each section, resulting in an outline of where to paint; when used in combination with the UV template (Figure 18.). A cog motif and key hole was also added to the mail box door, using an alpha to paint height information. Base colour from Substance Painter along with the baked maps were combined in Photoshop, forming the initial foundation of texturing (Figure 19.).
Figure 15. Assigning the high and low poly mesh to be baked in Marmoset Toolbag 3. (Gowland, A. 2017).
Figure 2. Applying base colour in Substance Painter. (Gowland, A. 2017). Figure 16. Base mesh on left, baked mesh on right. (Gowland, A. 2017).
Amy-Louise Gowland | 5
Exploring Stylized Art: A Case Study of World of Warcraft
4.4. TEXTURING
Extra detail in a colour layer was painted in using soft round and speckled brushes, set to lighten or darken to add elements of depth (Figure 21.). The sculpt in ZBrush already provided all lighting information needed. This method took a very short period of time, and produced quick effective results (Figure 22.), in comparison to previous techniques used.
Figure 39. Combining the maps in Photoshop. (Gowland, A. 2017).
Appendix A shows images from each step of the following process. First different channels (R, G, B) of the normal map were overlayed as a soft light, to add varying degrees of lighting. Height and Curvature was applied as an overlay layer, with ambient occlusion as a multiply. This was according to Vergne’s technique (Hawkins, 2014, p. 277) where the ambient occlusion map is coloured by adding a ‘hue/saturation’ layer modifier. To conclude this section of texturing, a white edge highlight, generated in Substance Painter was overlayed to create an illusion of wear (Figure 20.). Figure 4. Finished, refined texture. (Gowland, A. 2017).
Figure 22. From left to right, base colour, applied maps, refined texture. (Gowland, A. 2017).
4.5. ANIMATION & RENDER
Figure 20. Finished result of the combined, overlayed baked maps. (Gowland, A. 2017).
According to Lichtner (2012) dynamic animations are one of four key Blizzard art philosophies. This animation is 120 frames long, and contains 4 keyframes where the envelope moves by 10 degrees in each direction (Figure 23.). This was created using the Auto Key feature. To make the animation loop, the last frame was deleted on export.
Amy-Louise Gowland | 6
Exploring Stylized Art: A Case Study of World of Warcraft
Figure 23. Creating the key frames for the envelope animation. (Gowland, A. 2017).
Vergne explains that lighting for stylized environments should maintain a middle ground between being too realistic or cartoony (Tokarev, 2017). A lighting set up (Figure 24.) with contrasting cool and warm colours, was created in Marmoset Toolbag to ensure the prop was evenly lit and maintain a stylized feel. A white rim light illuminated the back edges, with a light blue key light used to contrast against the warmer tones in the gold texture. The fill light leaned towards a warmer tone. Appendix B includes a link to a video of the final prop, alongside renders, and project files.
Figure 24. Creating the light setup for the final render in Marmoset Toolbag. (Gowland, A. 2017).
Figure 25. Finished gnome mailbox asset, rendered within Marmoset Toolbag 3. (Gowland, A. 2017).
4.6. DISCUSSION This process informed by Vergne's techniques (Hawkins, 2014; Vergne, 2016) produces effective textures, that when personally practiced further would result in sophisticated output for the Games Practical Project. Results of the process (Figure 25.) have provided an enhanced understanding of the types of pipeline, utilised by experts in industry. Overlaying a variety of baked maps allowed a quick composite base to be established, particularly when used in co-ordination with colour layers, and emphasising pre-existing light and shadows. Personal future work would benefit from a closer study of exisiting materials both in-game and in the real world. Using reference from both of these sources would benefit the finished result by informing the painting process. Overall, the results of this process are satisfactory, and have provided an improved and informed understanding of how texturing could be approached in the Games Practical Project.
Amy-Louise Gowland | 7
Exploring Stylized Art: A Case Study of World of Warcraft
5. CONCLUSION This project aimed to expand personal understanding of principles and processes considered when adhering to a stylistic art style, to inform my workflow for the upcoming Games Practical Project. The paper defined the style into five core principles: context, texture, colour, animation, and shape language. Explored a potential texturing workflow informed by Vergne's techniques, and documented the process of re-creating and texturing an asset from the game. Defining the principles has provided a foundation that when used for the Games Practical Project, will assist the creation of an environment; which will successfully adhere to the art style. Constructing a base using information from the high poly and a selection of ZBrush materials, resulted in an effective composite texture. This will inform the future texturing pipeline by allowing focus to be shifted to the hand-painted elements. The process has allowed me to try elements of software that I have not used before. My new understanding of Marmoset Toolbag 3's baker and ZBrush's insert mesh brushes have been beneficial.
Troubleshooting issues during prop creation; has enhanced comprehension of how to prevent such issues from occurring in future works. It has identified a need for personal improvement in UV unwrapping, as the shells taken forward should not have been as fragmented - it should also be ensured that there are no overlapping UV's. When exporting from ZBrush the prop had too many subtools, and a very dense mesh; resulting in long export times. This can be prevented by combining tools and reducing geometry. Whilst the creation of the composite texture was effective, the finished painted result (Figure 26.) appears flat in comparison to World of Warcraft’s textures. Future considerations for the later project involve gathering material reference from both the game and real world, to inform the texture painting. Exploring the software 3DCoat could be beneficial to my workflow, as being able to paint directly on the mesh - amongst other features would contribute to a quicker process. Finally, revisiting fundamental 3D skills such as UV unwrapping, would be of benefit to all personal future 3D work.
Figure 26. Turnaround final render of mailbox. (Gowland, A. 2017).
Amy-Louise Gowland | 8
Exploring Stylized Art: A Case Study of World of Warcraft
APPENDIX A – TEXTURE CREATION
Normal Channel
Height
Ambient Occlusion
Curvature
Normal
Edge Highlight
Amy-Louise Gowland | 9
Exploring Stylized Art: A Case Study of World of Warcraft
APPENDIX B – PROJECT FILES & RENDERS Folder containing the animated mesh, texture files including the Photoshop document, sculpted high poly ZBrush tool, Marmoset Toolbag 3 scene, finalised image render, and turntable video. Project file download, available here: https://www.dropbox.com/s/m08ec9jzw3lapjp/GOWLAND_AMY_Gnome_Mailbox.zip?dl=0 Video available for viewing here: https://youtu.be/HUdt1psiswU
Screenshot of project file folder.
Screenshot of video.
Amy-Louise Gowland | 10
Exploring Stylized Art: A Case Study of World of Warcraft
APPENDIX C – RESEARCH EXPLANATION This 29-page document is a selection of research and corresponding annotation, for my own purpose of analysis for the assessment. It is not a definitive list of all reference used. Available here: https://www.dropbox.com/s/wwj03d8hci755an/Research_Explanation.pdf?dl=0
Amy-Louise Gowland | 11
Exploring Stylized Art: A Case Study of World of Warcraft
REFERENCES (INCLUDING IMAGES) Adobe (2017) Adobe Photoshop CS6 (13.0) [Computer program]. Available at: https://helpx.adobe.com/uk/creative-suite/kb/cs5product-downloads.html (Downloaded: 21 May 2015). allegorithmic (2017) Substance Painter (2017.4) [Computer program]. Available at: https://www.allegorithmic.com/buy/download (Downloaded: 1 November 2017). Autodesk (2016) 3ds Max (2016) [Computer program]. Available at: https://www.autodesk.co.uk/products/3dsmax/overview (Downloaded: 19 December 2016). Blizzard Art Philosophy (2015) Available at: https://80.lv/articles/blizzard-art-philosophy-indiablo-iii/ (Accessed: 5 January 2018). Blizzard Entertainment. (2004) World of Warcraft. [Video game]. Blizzard Entertainment. Chang et al. (2017) The Art of World of Warcraft [Presentation]. Available at: https://blizzcon.com/enus/watch?v=516b9cd-00d46abbc50 (Accessed: 21 December 2017). Hawkins, R. (2014) Texturing – Using ZBrush for stylized textures, Vertex, 2, p. 268-281. Available at: https://gumroad.com/l/SpXd (Accessed: 21 December 2017). Lichtner, C. (2012) The Art of Diablo 3 [PowerPoint presentation]. Available at: http://gdcvault.com/play/1015306/The-Art-of-Diablo (Accessed: 4 October 2017).
Vicente, M. (2015) Orb Brush Pack. Available at: https://www.artstation.com/artwork/9kwVo (Accessed: 5 January 2018). Vergne, F. (2016) Fanny Vergne on Gumroad. [Tutorial]. Available at: https://gumroad.com/fannyvergne/ Wallace, D. (2016) Warcraft: behind the dark portal. London: Titan Books. Warcraft (2016) Directed by Duncan Jones [Film]. Universal City, California: Universal Pictures.
IMAGES Figure 1: Vergne, F. (2013) Siege of Orgrimmar [Image]. Available at: https://s.blogcdn.com/wow.joystiq.com/media/2013/ 09/prisonfanny580.jpg (Accessed: 5 January 2018). Figure 2: Vetter, W. (2013). Iron Horde Culture Kit [Image]. Available at: http://bit.ly/2CwlTPo (Accessed: 5 January 2018). Figure 3: Clarke, J. (2017) Sea-weathered Materials [Image]. Available at: https://blizzardwatch.com/gallery/blizzcon-2017-artwarcraft-gallery/?slide_pos=81 (Accessed: 5 January 2018). Figure 4: Vergne, F. (2017) Tomb of Sargeras Colours [Image]. Available at: https://www.artstation.com/artwork/zqQLw (Accessed: 5 January 2018). Figure 5: Blizzard Entertainment. (2017). Bobbing envelope on mailbox asset [Image]. Blizzard Entertainment, World of Warcraft.
Marmoset LLC (2017) Marmoset Toolbag 3 (v3.03) [Computer program]. Available at: http://store.steampowered.com/app/550060/Marmo set_Toolbag_3/ (Downloaded: 8 September 2017).
Figure 6: Blizzard Entertainment. (2017). Round friendly pandarens in comparison to sharp, imposing demons [Image]. Blizzard Entertainment, World of Warcraft.
Pixologic (2015) ZBrush (4R7) [Computer program]. Available at: http://pixologic.com/zbrush/downloadcenter/ (Downloaded: 23 October 2016).
Figure 7: Vergne, F. (2014). Using ZBrush materials as a texture basis [Image]. Vertex 2, p.275. Available at: https://gumroad.com/l/SpXd (Accessed: 4 October 2017).
Tokarev, K. (2017) The Strings of Environment Design. Available at: https://80.lv/articles/the-strings-ofenvironment-design/ (Accessed: 4 October 2017).
Figure 8: Vergne, F. (2014). Composite texture with baked maps [Image]. Vertex 2, p.279. Available at: https://gumroad.com/l/SpXd
Amy-Louise Gowland | 12
Exploring Stylized Art: A Case Study of World of Warcraft Figure 9: Blizzard Entertainment. (2017). In-game screenshots of Tinker Town mailbox [Image]. Blizzard Entertainment, World of Warcraft. Figure 10-26: Author’s own.
BIBLIOGRAPHY Beck, J. (2009) From the Ashes of Mythos: The Art of Torchlight. Available at: https://www.gamasutra.com/view/feature/4123/fro m_the_ashes_of_mythos_the_art_.php?page=1 (Accessed: 4 October 2017). Blizzard Entertainment. (2013) World of Warcraft tribute. Thornhill, Ontario: Udon. Blizzard Entertainment. (2016) Overwatch. [Video game]. Blizzard Entertainment. Collin Gilbert. (2016) World of Warcraft: Level Design Panel. Available at: https://www.youtube.com/watch?v=eYDd3T_s1zo&a b_channel=CollinGilbert (Accessed: 4 October 2017). GamerHubTV. (2013) Artist Chris Metzen Explores The Art Of Blizzard Book And Art Exhibition. Available at: https://www.youtube.com/watch?v=8xUqgMsXPIw& ab_channel=GamerHubTV(Accessed: 4 October 2017). Gonzalez, G. (2017) ArtStation - Gabe Gonzalez. Available at: https://www.artstation.com/meldyran (Accessed: 4 October 2017). Habezai-Fekri, J. (2017) Low Poly Scenes With Blender. Available at: https://80.lv/articles/low-poly-sceneswith-blender/ (Accessed: 4 October 2017). Koepp, T. (2015) ArtStation - Stylized Dungeon Environment, Tobias Koepp. Available at: https://www.artstation.com/artwork/OD9Gg (Accessed: 4 October 2017). Koepp, T. (2017) ArtStation - Tobias Koepp. Available at: https://www.artstation.com/tobiaskoepp (Accessed: 4 October 2017).
https://www.artstation.com/artwork/K2LbW (Accessed: 4 October 2017). Runic Games. (2012) Torchlight II. [Video game]. Runic Games. Siino, B. (2017) Unreal Engine 4 Stylized Rendering Workflow. Available at: https://80.lv/articles/unrealengine-4-stylized-rendering-workflow/ (Accessed: 4 October 2017). SoMuchMass. (2013) BlizzCon 2013 - Art of World of Warcraft Panel (Full). Available at: https://www.youtube.com/watch?v=Ppr7L5aP26w&a b_channel=SoMuchMass (Accessed: 4 October 2017). Stadick, S. (2017) Stylized Material Production for Games. Available at: https://80.lv/articles/stylizedmaterial-production-for-games/ (Accessed: 4 October 2017). Thompson, B. (2014) The Art of Hearthstone: Playing the Cards You're Dealt [PowerPoint presentation]. Available at: http://www.gdcvault.com/play/1020615/The-Art-ofHearthstone-Playing (Accessed: 4 October 2017). Tinari, M. (2015) ArtStation - Torchlight 2, Matthew Tinari. Available at: https://www.artstation.com/artwork/wrvkw (Accessed: 4 October 2017). Vergne, F. (2017) ArtStation - Fanny Vergne. Available at: https://www.artstation.com/faf (Accessed: 4 October 2017). Warner, A. (2017) ArtStation - Ashleigh Warner. Available at: https://www.artstation.com/ashdoodles (Accessed: 4 October 2017). Zhang, P. (2017) ArtStation - Phillip Zhang. Available at: https://www.artstation.com/phillipzhang (Accessed: 4 October 2017).
Mitchell, J. (2008) Stylization with a Purpose: The Illustrative World of TEAM FORTRESS 2 [PowerPoint presentation]. Available at: http://www.gdcvault.com/play/279/Stylization-witha-Purpose-The (Accessed: 4 October 2017). Rogic, D. (2016) ArtStation - 3D Viking House, Denis Rogic. Available at: Amy-Louise Gowland | 13