astralshift
patreon
Crafting Map Assets with Hika!
🕑 Added 2018-11-28 15:10:14 +0000 UTC Hi! I'm Hika, and I'm one of the many artists of Astral Shift! You'll see most of my work in Little Goody Two Shoes within the fields of background and map art, as well as in the animation shorts it'll feature.Today I want to give you a little insight on how we make map elements and the whole process involved in crafting the assets necessary to form a map! More specifically, we will be focusing on sketching, coloring and bump mapping.
STEP 0 - REFERENCE GATHERING
First, before we start with the actual process, it's necessary to have a good idea of what we are aiming for. In this case, we will be working on a set of chairs and a table for Elise's house which will be getting a ton of use throughout Little Goody Two Shoes.
Once we know exactly what we want to do, the next step is to gather references. Seeing as LGTS takes place in a very rustic and humble setting, it is essential to grasp the atmosphere we're aiming to create. Thus, we found the artistic direction behind the vintage essence of Disney's animations, some anime series from the 70s and 80s and Ghibli's films all shared very similar traits when it comes to background art, often featuring gouache (poster paint) as their source material and some smaller details done using pastels or even pencil.
Disney's Pinnochio, 1940.
Ghibli's Spirited Away, 2003.
Note that the subject of your project doesn't need to be portrayed when selecting references, by this I mean that even though we are drawing a set of chairs and a table there are a lot of objects and textures that share common attributes within the selected references.
Keeping all of these in mind, we should be able to move to our next and first step!
STEP 1 - SKETCHING
When we first start sketching, particularly within the game art context, there are several things that should be taken into consideration!
The first, and more crucial one, is the perspective. The object must not only accompany the map's perspective, but also properly accommodate the character's sprites especially when they will be interacting with it. In this case, both Elise and Rozenmarine will be using these chairs on an everyday basis, which means we need to make sure they are optimized for their needs!
To make sure we follow these rules, I asked Ichigo, our pixel artist, to come up with these sketches of Elise's sprite in its sitting position so that I had a definite idea of their size and position and could adjust how the chairs should work to go along with the sprites.
Keeping this in mind and taking close attention to the character's proportions, we can now move on to a more defined and clean sketch. It's very important that there is a definite and solid grid behind the sketch so that the assets work properly in context.
TIP! ☛ While sketching, it's always good to keep a close eye on how the objects work as a group and in relation to each other to create a sense of group and unify them equaly. Let's say even if the chairs are all different in shape there are elements that should be kept regarding their sizes; for example, the legs' height and back rests' general width. Not only does this optimize them for sprites, it also makes them relate to each other.
The next important sketch bit is definitly the cleanup. Following the direction of our first sketching phase, the cleaning up process is all about keeping the perfect balance between the game's perspective, the artistic intention (stylization) and, of course, the sorrounding objects.
Note that every single chair needs to be drawn even if it'll ultimately be covered by the table top in the final version of the map. This way, the chairs will be properly visible when pulled back by the characters whenever they want to take a seat, seeing as they are their own asset despite being included in a set in this particular case, and you'll be left with a clean resource that can be used in other maps. Nothing goes to waste!
STEP 2 : COLOR and RENDERING
The coloring and rendering processes are two of the most important within the creation of map assets.
As the Maps in LGTS make a great use of browns and woody tones, we have to make sure the assets themselves blend well enough, but also stand out at the same time so we dont end up with a big mess of textures and color.
The first step within this phase is definitely setting up basic contrasts and a defined color scheme. These will dictate what the final rendered product will look like, so even it being a preliminary step it needs to be taken seriously to ensure there is a sense of consistency throughout.
Given that we're using bump mapping for LGTS, it should be kept in mind that the assets need to be rendered in a more neutral way, which is to say you should avoid casting strong light sources onto the objects themselves so that the effects of the bump mapping are more readily visible and, of course, effective.
If a particular asset, let's say a chair, already has a strong sense of lighting and shading drawn onto it before being inserted into the map and subjected to the effects of bump mapping it may end up looking wonky, or even out of place. As seen below, the shaded areas are kept as simple as possible and there are no dramatic external light sources that could influence the map's lighting later on.
Quick Note:
To craft the assets in Little Goody Two Shoes, we make use of Kyle T Webster's Megapack for Photoshop! Not only do his brushes emulate traditional mediums in a very impressive way, they also help us achieve the aged and traditional feel of the cel animated series we take inspiration from.
Our saviour, the true and only, Oil Rich. 🙏
Next, it is time to add some details. This process can be very time consuming, but it's also the one what helps us convey the feelings of volume, depth and texture, which are all important concepts that make the assets come to life!
In this step, it's important to keep a close eye on those references we collected early on as they will aid us in solving problems such as how to convey a certain texture, or even how to stylize and simplify shapes and shades in order to achieve the desired look.
It's also important to keep in mind some story telling elements while crafting assets. Elise comes from a humble setting, so making the wood of the chairs and table too polished would, in a way, contradict what we've established and are trying to convey through her character.
Textures and contrast can add solid layers onto the storytelling, so why not make good use of them? It's all about credibility and consistency!
The table is crafted using the same principles and rules we have established for the chairs:
- Keeping in mind the perspective of the map and surrounding assets;
- Taking into account the proportions of the character's sprite;
- Creating a good balance between textures and color schemes;
- Taking your time with details to properly convey the sense of depth, texture and volume;
- Keeping the bump mapping effects in mind when coloring.
After a few adjustments and touch ups, like correcting some prespective inconsistencies and spacing things a little bit so the arrangement looks more natural, we are done crafting Elise's dinning spot!
Here's a small process gif of the journey thus far! It may seem complicated, but the most rewarding part is yet to come, so stay tuned!
STEP 3 - BUMP MAPPING
Bump mapping isn't always a necessary step and it may be confined to a small group of objects, especially in broader areas like exteriors. However, it is absolutely essential to convey the cozy, candle lit atmosphere of Elise's home during the evening and night time!
The way the shadows and the candle's wick play with eachother creates an enticing ambience that we surely could not miss out on for the night time in LGTS!
To achieve the desired effect, we make use of SpriteLamp, a software that allows game artists to produce bump maps in an intuitive and natural way, and also integrate them in software like Unity. This process is, however, quite tiresome and involves a lot of correcting and check ups.
Using only shades of gray, ranging from pure white to pitch black, we paint various lighting options for the same object (for demonstration purposes we merged the chairs and table all together).
In this case, the shading comes from all directions, given it's a round table the character sprite will be abel to go around, which calls for a top, bottom, left, right and even a center shading. These should all be crafted separately taking in account the light source direction as exemplified below.
After some trial and error to accommodate the kind of painting techniques we use in LGTS, we consider that a round soft brush works the best with the already textured assets!
After some tweaks and adjustments, we finally reach our final product: a fully textured and light source responsive asset! Cozy yet mysterious looking, isn't it?
I hope you enjoyed this insight on how the majority of our assets are crafted! It was super fun to put this together and break down our creative process for you guys. I hope it was helpful and may help you with your projects, or give you a better understanding of how time consuming coming up with something as simple as a table and four chairs can be!
Please look forward to our upcoming workshops on textures, scenery painting, CG backgrounds and much more!
Thank you for reading through! 😊
Comments
SpriteLamp merges all four images into one bump map texture by inferring it from the info about how the object would be lit when illuminated from an angle to create a convincing 3D-like illumination from a 2D image. It can also fill in for the angles that are missing in the four bump map images - the more "diagonal" angles in between the main four images - so that everything looks seamless!
EragonGreat
This is amazing, I am very impressed by the amount of detail that you devs are putting into this game. The bump mapping process looks tiresome. However, I am sure it is satisfying to see the lights work on the assets, it looks amazing! I have a question as well. Does the lighting shader/program switch between the four bump map images, based on the light source's position and the position of the bump mapped asset? Or were they all somehow smashed into one bump map texture and it just works? Thank you for sharing your working methods and experiences working on LGTS, truly inspiring and helpful!
