Experiences In Creating The Lacuna Expanse Game Art – SESSION 2
( Autodesk 3dsmax and Adobe Photoshop)
I hope you enjoyed the prior session of the Lacuna Expanse artwork tutorial. In this 2nd installment I will be discussing the experiences of taking a raw 3d render into photoshop and creating the finished detailed planetary tiles, with variations. I will also be discussing the ground base creation along with a bunch of quick notes at the end.
This set of articles is meant to educate on the processes with tips and general information rather than being a complete tutorial from start to finish with creating a certain object. If you would like a dedicated tutorial for a certain object or item in this session set please contact me or Instatuts.
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!
Please take some time to check out the game. It can be played for free at www.lacunaexpanse.com
Author: Ryan W. Knope
Ryan W. Knope is a freelance 3D / 2D Artist / Consultant with 13 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 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 and Adobe Photoshop CS4
- Difficulty: Medium To Difficult (Prior Knowledge Of Software Interface Is A Plus.)
Detailed Land Mass Tiles: Variation In Levels
With the game play in mind, I needed each of the detailed land mass tiles to include about 10 variations or more per PSD file. So, creating extra brushed metal structures, vegetation and add-ons to the buildings became important.
As I built each piece, I had to count the variations and additions that were possible. Otherwise as a player upgraded their buildings, they would not differentiate from level to level. I also had hopes that these level variations would intrigue the player enough for them to try to get to the next level to see the upgraded building.
Step 1 – Taking The Render From 3dsmax
In the last session we left off with rendering the main building mass. Since the tile size is 450px, 450px, I usually zoomed to that size in 3dsmax or rendered a bit larger, scaling down inside Photoshop.
Save out the render as a .png, without the ground, as long as the shadows are easy to replicate. Otherwise, render with the ground plane (Apply a material to it as medium gray.) and delete outside the shadow area in Photoshop.
You can also set up a matte shadow material inside 3dsmax and apply it to the ground plane. Utilizing a matte shadow material would keep the shadow in the rendering and make the ground plane transparent. This is a good option, but I will not cover it in this article.
You can see below that I deleted the ground mass outside of the shadow area.
(Note, different buildings are used in certain steps, but the end result is the same.)
Step 2 – Detailed Building Part 1 – Land Base
Adding the base is important because it grounds the building a bit more. It also adds a bit more detail in comparison to the building sitting on the land mass alone.
In Photoshop, I blended three detailed ground layers to match the building. For some of the building tiles I used up to 5 different types and colors. I also tried to use ground colors that matched the building type and style. For example, I used dirt around the "Development Ministry", not green grass.
You want to blend them nicely together using layer masks. This allows you to edit the blending more later without having to bring in the image once again. Quick edits can be made much faster.
Step 3 – Detailed Building Part 2 – Trees and Vegetation
Now we need to begin placing tree’s and vegetation. With the tree’s, I used my library of pre-rendered top view elements. You have a few options with this, you could purchase a top view tree library, find tree’s on google and mask them out, or find 3D tree’s and render them out in the view desired.
If you render the tree’s, save the image as a .png or .tga. These formats includes the alpha or transparency. NOTE: Personally I have found that .png works the best for me when saving out of 3dsmax. There seems to be less of a halo when compared to saving as .tga.
We need to create the shadows once the tree’s are brought in. I created the tree shadows by adding a "Drop Shadow" layer effect. I visually matched the shadows from the building structures. When creating the shadows for the tree’s, keep in mind that the tree’s may be shorter than the buildings. This means the shadow that is thrown will be smaller in distance.
Another thing to think about is shadow color. Depending on the lighting system you use to render the buildings, the shadows might have a blue, yellow or black tint. Make sure the shadows added in Photoshop match this.
Step 4 – Detailed Building Part 3 – Out Buildings and Mechanics
For many of the detailed planetary tiles, I added small out buildings and mechanical details that could be turned on or off depending on the building level. This added to the variation between levels, giving new details to each building as they were built and then upgraded throughout play.
Some of the mechanics and out buildings were created in 3dsmax as simple boxes or eaved structures with a metal material applied. Other items were found in random photographs via google and other texture sites.
In theory you could use elements from an aerial photograph as well.
Step 5 – Detailed Building Part 4 – Overlays
Various buildings throughout the game include overlays to add to the details. This is a fantastic way to add a ton of quick details. This can turn an average building into one with a very detailed look.
I started by finding structural bracing, mechanical images and night shots of buildings with the lights on. The sources are not limited to this, you can actually use anything you desire. Be creative.
Next I placed the images inside the psd and deformed them to match the building angles using the "Transform" tool and "Distort". I blended them with the eraser tool once they were in position. You can also use layer masks.
Then I scrolled down the blending mode list to find a mode that worked well. In this situation "Soft Light" and "Color Dodge" worked best. Play around with the blending modes and take note of how different colors, saturation levels and contrast play a part.
Light glows can also be added in the same way. Many great images can be found at CGTextures.
Step 6 – Bring In A Ground Backdrop – Testing With Lands
Now that all of the building details and surrounding elements are added, it is time to test the tile with several backgrounds along with black and white. This is the final check.
First, I made sure to check for hard edges, where I missed with the eraser or layer mask. Often these are hard to see with a textured background, so I also checked with a white background and then again with a black background. This problem occurs most when you are using layer blending modes other than normal. Make sure to check well, because it can be a little embarrassing if you send a gnarly tile to your boss.
Also check for elements that have moved, shadows in the wrong direction and tree’s that are intersecting with building elements the wrong way.
Once I was happy with the result, I sent the tile off for approval.
Step 7 – Creating The Tilable Planetary Grounds 1
There are a lot of ways to create tiling images. You can create them in Adobe Photoshop or you can use an application to automatically create the tile.
I began by creating them in Adobe Photoshop, but they had a bit of a tiled appearance still and did not match the quality I was looking for. With this in mind I began asking some of my friends in the industry and checking the web for an application that would create a better tileable ground.
In my discussions Luxology Imagesynth was mentioned. I checked out the web site and did some reading. This, I quickly discovered would be the solution! So, I went and purchased it for $100 and it was well worth it. An hour later I had all of the games planetary land masses finished.
This application can be ran as either a plugin for Photoshop or as a standalone program.
I will not go into detail on how to use Imagesynth. There are many detailed written tutorials and videos online.
Step 8 – Creating The Tilable Planetary Grounds 2
I found most of the initial ground images at www.cgtextures.com They have a fantastic library to chose from if you go to the "ground" section. They also have just about every other type of image or texture.
Below you can see the product of using imagesynth. This is actually 9 of the tiles placed together to show the minimal visual tiling. I created over 20 land tiles in a little over an hour with this process.
Step 9 – Creating The Tilable Planetary Grounds 3
This step is a wish list item I have and is great in artistic theory and creation, although I don’t know how well technically it will work inside a browser based game, such as Lacuna Expanse. I don’t know because I am not a programmer. I assume it would add more to the load time and stress of the server.
To add a more detailed basic ground variation, in theory you could add a 2nd ground "Layer" that loads above the ground base that we created above. Even better would be 2 or 3 that load at random. These would be .png images with transparency. The point of these layers would be to add variation of color and texture to the planetary surface.
This could be done artistically by bringing in other ground types that were previously created. In Adobe Photoshop you could erase areas of the secondary ground, blending them with the lower ground type, thus creating the variation. Once blended to the bottom ground image, only the blended layer would be saved as a .png.
These layers would then load at random within the game. If the use of several .png images within the same layer is possible, then the game map could be very detail oriented and realistic.
Great Race / Ancient Structures – Overview
The "Great Race and Ancient Structures" were created with almost all of the same principles in mind as the "Modern Technical" tiles that we just went over. There are 2 major differences between both.
1) Old style textures were used for the great race, instead of the futuristic metal and glass.
2) The 3dsmax greeble plugin was not used for any of the great race buildings.
The structures themselves remained very basic inside of 3dsmax. The most detailed structure was a set of towers I created after watching Lord Of The Rings many years ago.
Most of these structures began with primitives and a little bit of edit poly. A lot of them included spectral or fire special effects. These effects were all created in Adobe Photoshop by bringing in images of lightning, fire and even water refracting. These images were then deformed and masked out to the areas that I desired. Next I went through the layer blending modes finding ones that fit nicely with a supernatural effect.
Modern Farming Tiles – Overview
Below you can see the overall process of creating the farming tiles. All of the items were quite basic in nature, defining a much more complex complete image. The 3D design in this tile only consumed about 8 minutes of my time. Super basic structures were used and then modified and combined in Photoshop.
The wood decking and wood boxes were created in Photoshop using textures of planking from www.cgtextures.com
Many aerial photographs were used during the creation of this type of tile.
I did a lot of painting shadows and highlights in a top layer.
One thing I kept in mind with the farming tiles… all of the buildings and elements are at a super low elevation when compared to any of the modern buildings. This made shadow creation a breeze. With the structures being so short, they would be created inside of Photoshop easily. With that in mind, drop shadows worked perfect.
Conclusion Of The Tile Creation Process
Once the process was identified, it made creating hundreds of pieces very easy, fast and high quality. Identifying a standard process early in the game can be extremely beneficial!
The goal is to find a way to create buildings that are similar enough in process, but different enough in viewing that the player can distinguish between the types quickly.
Some Quick Notes:
• Utilize Google images to find suitable overlays and images.
• Define a process that encompasses most of the artwork creation.
• Research workflow’s that other artists use.
• Define a style and stick to it. There needs to be a level of cohesion.
• For 2D games, use Photoshop to add details. It can be quicker than creating them in 3D.
• If a commercial plugin will yield quicker results within budget, do not be afraid to use it.
This closes up the writings of this session. I hope that you enjoyed this article on the Lacuna Expanse game artwork. It has been a lot of fun writing it.
In the next session we will continue the discussion with a quick segment on space ships and then move on to discussing the "Natural Formed" tiles. The creation of the "Naturally Formed Tiles" included a lot of Pixologic Zbrush use. I will be covering the tools in zbrush and the process of getting the models into 3dsmax for rendering, along with finishing the tiles.
Thank you once again for checking this out. See you next time!