Experiences In Creating The Lacuna Expanse Game Art – SESSION 3
( Autodesk 3dsmax, Pixologic Zbrush and Adobe Photoshop)
Welcome to the third session of Lacuna Expanse Game Art. In this session we will go over the creation of the new web site mural (background). This is a change from the original plan for this session, although with the spur of the moment decision to budget for a mural design similar to the "Blizzard" sites, I think it is appropriate to do the same here with discussing it. The process was a fast moving machine with a short deadline. I created the mural in under 72 hours from start to finish. The web interface took a bit longer.
The game is now released for play and has been a success thus far. There are well over a thousand people playing at the point of releasing this article. The IPhone App has also been released!
A Tournament server has also been released. New features and enhancements are constantly being added… this is quite the game to play for free.
Author: Ryan W. Knope
Ryan W. Knope is a freelance 3D / 2D Artist / Consultant with 14 years experience in the 3D and 2D industry. His main artistic love lies with interior and exterior rendering although he takes on just about every type of graphics work. Ryan is also the architectural / interior rendering voice for 3D Artist Magazine’s Question and Answer Panel along with being the Art Director for Lacuna Expanse. He lives with his wife Krista, in sunny Denver, Colorado.
- Programs: Autodesk 3dsmax 2010, Pixologic Zbrush 4.0 and Adobe Photoshop CS4
- Difficulty: Medium To Difficult (Prior Knowledge Of Software Interface Is Needed.)
Seed Planted – The Backstory
About a month ago JT sent me an email giving me a try with creating a new web site design. It included a background mural and a web design much like the "Blizzard" sites. This was both exciting and daunting. I was a bit nervous, but ofcourse I said yes.
This especially made me nervous because the company was looking at different options with web graphics which kept coming up a bit short when the votes occurred between the owners and staff.
All in all this actually was a dream project. I just wish I had more time with it. With more time it would be spectacular, but it still went very well and all parties seemed to be happy.
I do plan on continuing the mural when I get some free time. You can see the finished pre-deployment below.
Step 1 – Conceptual Ideas
When it came to conceptual ideas it was both simple and complex. I was told that it needed a punch, something that grabbed people, made them sign up and hopefully it would be "Blizzard Quality Artwork".
With these comments in mind, I looked at all of the Blizzard sites for hours, contemplating design elements, talking to friends about ideas trying to figure out regions of space, land and ships.
Finally, I began sketching and sketching, although the ideas were very raw, they gave me the base I needed. These sketches conveyed the idea and helped me plan, but looked crappy as an art piece, so I tossed them at the end of the project.
Try to sketch out your ideas. It makes it much easier to organize things in your head. I am a very good "Inside my head visualizer" and sketching absolutely helps me every time. The main idea was to create a web site like the one below, but in a really fast pipeline.
Step 2 – The Starting Point Of Creation
With any image, the starting point can often be the most difficult part. This sounds a bit cliche, but I find this even more the case with a mural type image. If it is a vertical mural, then I find that starting with the ground or bottom is easier, as it provides a point of reference with the rest of the image.
This took some time to figure out. I started with the top, outer space area and shortly I was drawing blanks on the shading and visual process of blending down to the land.
Soon after I built my ground base and it was much easier to visualize how it needed to proceed and the entire process flowed very quickly.
Step 3 – Box Modeling The Ground Base
For starters, I created a heavily segmented plane in 3dsmax. Next I defined a rough view and created a camera. Setting up the basic view helped me determine rough camera angle content and creation.
OVERVIEW OF THE 3DSMAX SCULPTING PROCESS:
• Create a Plane primitive.
Add an "Edit Poly" Modifier.
• Turn on "Soft Selection" and set it to your desired falloff.
• Begin pushing and pulling to start the land definition.
• Add a "Turbosmooth" modifier to see heightened smoothing.
• Continue pushing, pulling, extruding, chamfering and beveling.
The next step was to export the model for ZBrush import. For this I simply exported as a .obj. My model upon export was 12,880 faces. This gave enough definition to know what I was going after inside Zbrush.
Step 4 – Detailing The Ground Base In Zbrush
Now, I imported my .OBJ file, placed it into the scene and pressed "T" to make it an editable object. At this point the sculpting began. I used various brushes and laid in details at various brush sizes. Use alphas to add more specific details and texture to the object. Test out different brushes with various alphas. You can get some interesting results that way. Also vary your brush size and intensity of the brush.
Once I was finished adding the details, I then used the "Decimate" plugin to bring the poly count down because my model was now 6.5 million polygons and I knew that I would possibly have other land models, spaceships, buildings and more. I used Decimate to bring it down to about 2 million poly’s, keeping quite a bit of the detail.
The last step in Zbrush was to export the mesh. Export it in whatever you feel comfortable with, but I used .OBJ once more. There is also GOZ which can export directly into 3dsmax, Maya and more in an automated way. This is nice because it brings the model directly into 3dsmax for you.
Step 5 – Defining The Lighting Scheme
The lighting in the main scene was very simple. I used "MR Sun / Sky" only. Then I set up my Exposure control as "MR Photographic, Clear Sky Daytime".
OVERVIEW OF THE LIGHTING STEPS:
• Start up 3dsmax.
• Change the renderer to Mental Ray.
• Import the base object. Place is correctly and set up the correct camera position.
• Drag out a "Daylight System" from the "Systems" menu.
• Change the system to "MR Sun / Sky".
• Set the Exposure Control.
• Test different times of day / sun angles.
• If the render is too dark then lower the "Exposure Value". I went from 15 to 13.
Upon testing, I added in a second instance of my base object, transformed it and tested a few more times. This second object added some needed variation and details. I also created another ground plane that had many segments and a noise modifier applied. This object went off into the horizon, adding much more depth.
Step 6 – Applying The Base Materials
For the ground materials I used a dirt texture map. This was added to both "Diffuse" and "Bump" slots of a "Arch & Design" Material. Then I added a "Reflectivity" of .5 and a "Glossiness" of .4. In this case, the bump helped to diffuse the reflections enough to make it less apparent.
This reflection also helped to bring in the sky materials. In my opinion this helps to add some depth and realism. Next I added box UVW mapping from the modify panel and scaled it accordingly.
The materials over all for this project were very simple. No need to complicate things when 3/4 of the work was Photoshop.
You can use "Displacement" and more detailed textures maps if you prefer.
I chose not to unwrap my model, but by unwrapping you could paint very detailed texture maps for all ground elements. You could then utilize the unwrapped coordinates for all of your image maps, creating very realistic surfacing.
Step 7 – Two Worlds, Working Simultaneously
At this point I began working in both 3dsmax and Photoshop at the same time because of the quick deadline. I have several computers in my office. If you only have 1 then it will be difficult to work this way as rendering usually takes most of the cpu power.
The ground base was where I wanted it placed and it was time to plan where to begin putting the city elements. I knew that I wanted them in the foreground, so the background areas of the land mass was open season to adding fires, farms and other interesting elements.
As long as you keep the same lighting and rendering scheme, the items added later will match. Layer masks may need to be added later for some elements as new buildings and objects come in.
If time is short, try to split the creation process so that you can work while you render (If you have more than 1 machine). Working on it this way saved me tons of time and kept the creative juices flowing.
HOW I WORK SIMULTANEOUSLY:
• Create and render the ground base.
• Work on distant Photoshop elements while placing buildings in 3dsmax.
• Render the new base with the city models while adding the sky, clouds, fire, smoke and hues in PS.
• Add in the new city base and continue placing ground overlays next to the buildings
• Edits to buildings can be made inside 3dsmax, resulting in minor adjustments in PS layer masks.
Step 8 – The City In 3dsmax
Models from inside the game were used for the 3D city parts. Minor edits were made and more detailed textures applied. Model edits included beveling and detaching window areas, transforming and duplicating parts along with more detailed materials / textures.
While placing the objects into position I showed only the land mass and the object to be placed. This makes it easier to see object interaction.
I used "Self-Illuminated" Arch & Design materials for the windows. I also made sure that these materials had "Visible In Reflections" and "Illuminates The Scene (When Using FG)" turned on.
Step 9 – The City In Photoshop
Once the 3D portion of the city was rendered and brought into Photoshop I began adding overlays to give the feelings of farms and small buildings. I also used this method for making the appearance of roadways. This helped fill the void between the massive in-game buildings and created a more realistic sense of what was going on.
I also added in orange, yellow and blue hues to give a more dramatic effect to the lighting scenario. I always use the dodge tool a lot as well to lighten up certain facades of buildings and ground areas.
LIST OF PHOTOSHOP EDIT ITEMS:
• Road / City Elements: Find photos that work with your camera angle. Test blending modes and mask.
• Paint in Hues on new, upper layers to create a better sense of mood.
• Add various "light Sparkles" via city images. Test blending modes and use a layer mask.
• Add trees and forests, test blending modes and use layer masks.
• Use the Dodge and Burn tools. Try to accentuate the lighting and lack there of.
• Blend the bottoms of buildings with the ground area. Check out the sharp edges.
You can go as far with this as time permits. I often find myself lost in this, and the next step as long as I am allowed time wise. Set aside time for contemplation. Look and think, take a break and do it again.
Step 10 – Ground Based Effects – Coloring
For the non city Photoshop work, many items were added. I was able to build up details quickly along with adjusting the overall hues of the lower area to give it more feeling and drama. Keep in mind what elements are adding light. Think about how much drama you want to convey. Nothing adds drama like lighting and hue shifts!
LIST OF PHOTOSHOP EDIT ITEMS:
• Clouds: Mask out and blend visually with a layer mask. Check blending modes
• Planet: Use a layer mask and play with blending modes. Sometimes they can create a nice glow..
• Smoke: Set blending mode to screen. Other blending modes often work. Go through the list.
• Fire: I painted in the fire and used a "Screen" blending mode.
• Painted Hues: All over the image I painted various oranges, yellows and blues. Test blending mode.
• Painted Fog: As the distance grows particulates add a haze, paint this in and lower layer opacity.
• Distant Faded Mountains: Use a layer mask and decrease opacity. I used "Soft Light" as blending mode.
• Painted Shadows: Shadows were painted and the burn tool was used. (Shadows = New Layer)
• Painted Highlights: Highlights were painted and the dodge tool was used.
Step 11 – Sky To Space
Creating the sky / space was a very quick process that lasted only minutes. When blending the sky up to outer space, I decided to use orange, purple and blue hues. I did not need to blend the center together perfectly because it would be covered up with the web interface.
The stars were added using a texture map of fireworks from cgtextures.com.
SKY / SPACE PROCESS
• Add the star background.
• In a new layer above the stars paint in hues. (I used 1 layer per color for ease of editing later)
• Test blending modes for hue layers. (Overlay worked best for me.)
• If the falloff on the painted hues is not enough, use some blur.
Step 12 – Adding In The Ships
The ships were already created for in-game use, so the models were already textured and ready to go. First I had to decide which ships to use. Once that was decided, then I simply imported them into my 3dsmax scene file and did "Region Renders". This allowed me to render out only the sections with the ships.
If the file becomes too heavy, you can delete the rest of your objects, keeping the MR Sun / Sky. Keeping the same lighting rig will make all of the items match in lighting. Otherwise shadows will be in the wrong places and it will present a problem later on.
Once rendered, I saved them as a .png with an alpha channel.
TIP: Sometimes there are slight white edges around the objects. To combat against this I rendered the spaceships at double size, then in Photoshop I made a selection and decreased it by 1 pixel and pressed delete. This removed the white edge. Then I sized the space ship renders to the size of my working file and placed them.
Step 13 – Conclusion
In this session we went over the initial concept and the talks of how the beginning came about. We also covered creation elements for the lower half of the mural rendering.
• Plan the object layout even if you are not good at drawing or sketching.
• Find a starting point that works for you. Test both upper and lower if you can’t decide.
• Build whatever base you decide to start with. Keep in mind ease of creation.
• Do not detail the base until you are satisfied with the pre-viz.
• Don’t over complicate if you decide to use Photoshop or Post for most detailing.
• Render out an "Ambient Occlusion" pass in 3dsmax to accentuate shadows.
• Keep in mind thedensity of the 3dsmax scene. You don’t want rendering problems later.
• If time is short, work in both Photoshop and 3D simultaneously if you have acces to multi-machines.
• Utilizing photos of cities at night can save a huge amount of detailing time.
• Test blending modes of each PS element that you are adding. Sometimes it will surprise you.
• Paint in shadows to accentuate the depth. Most of the time game murals are not about reality.
• Contrasting colors and light / dark are your friends, it brings out the mood more.
• Think about what color combinations accentuate the "Urgency of the situation" inside the image.