Vertical Slice: Building a Medieval City
Events
Subscribe:  iCal  |  Google Calendar
Cologne DE   19, Aug — 21, Aug
Cologne DE   22, Aug — 26, Aug
Seattle US   28, Aug — 30, Aug
Atlanta US   30, Aug — 4, Sep
SEATTLE US   31, Aug — 4, Sep
Latest comments
by mafhfuz@7cgi
2 hours ago

You have done an outstanding job. Greetings to Toivo Glumov and Natalie Kayurova.

It'd be great to see some kind of tutorial with tips how you made it.

by Atakan Gürkan
1 days ago

How can you make planets? Is it hard

Vertical Slice: Building a Medieval City
1 February, 2018
Environment Art
Environment Design
Gameplay

We’ve talked with an amazing team of young developers, who are trying to create a sprawling virtual city, filled with building characters and details.

Introduction 

Our team consists of 4 team members:

Nazir Joshua Khusal (Myself): Art Director / Lead Environment Artist

Georgia Jeffries: Lead Character Artist

Benjamin Lane: Lead Prop Artist / Environment Artist

Adelaide Coldham: Lead Animator

We all study at the University Of Hertfordshire, England, in our third year of a three year course studying a Bachelors Games Art. This is our first project where all four of us are working together. Our prior experience of game development comes from our three years studying at the university, as well as each of us going to a college before university studying various forms of art.

About the Project 

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

My name is Nazir Joshua Khusal, and I am the art director and lead environment artist within this project. My art director role includes constructing the art direction of the project, organising workloads, creating production pipelines as well as shaping the overall look and feel of the game.

As well as art director, I am also the lead environment artist on the project, working alongside Benjamin Lane to produce high quality, realistic environments based on our vision to create and tell a story through our artwork. 

Our main goal within this project was to create artwork in motion, to create a vibrant, living city that sits on an island in the middle of a rapid flowing river. Pushing for a sense of atmosphere, colour, aesthetically beautiful, real world authentic visuals, to that of the 15th century Byzantine empire. We want to create a new, yet authentic world that puts the player in the heart of a town in motion. Through the moving characters, the scale of the buildings, the interesting props and the quirky architecture we want to create artwork that tells a story as a living medieval town.

The story of the project is as follows:

The Island town is stuck between two warring armies. The town is very crucial for trade and diplomacy, so the surrounding countries treat it as neutral ground. Now a war has begun, both armies need to use the town to get across to the other side to invade, but the Lords of the city are worried about the damage either army passing through would cause, and in turn has restricted access into the town for anyone without specific permission (traders, important/wealthy people, etc). The inhabitants of the town are getting agitated by the threat of either army and many refugees are finding their way to the bridge only to find that they cannot pass to escape their plight. The tension between the rich and poor gets to breaking point and the poor in the town and refugees unable to afford the substantial toll to cross has started a resistance to take the bridge under their control. The nobles are aware of this issue and have been hiring many mercenaries to help discipline the resistance to little success. They have now ordered the help of (PLAYER CHARACTER) to help them, a highly successful and famous mercenary. The player will make his way through the town, towards the Lords house, that sits at the edge of the town.

Georgia Jeffries (Lead Character Artist)

The most important element for me when it comes to the project as a whole is that our environment is populated. We really wanted the scene to feel alive with a vast amount of different people going about their lives and this is what I always keep in mind when creating the characters and when I am coming up with designs to keep them all looking unique and each telling their own story. 

Once I have a substantial pool of character assets for the modular characters, I will focus my attention to the main playable character. This will not be modular and will have a significantly higher polycount as it will be in the forefront of gameplay.

Adelaide Coldham (Lead Animator)

My main focus on this project was trying to make the area feel like a working, living town. Having a variety of animations for all of the different citizens populating the scene, helps bring the world to life, both contributing to the mood and atmosphere of the game and also adding interest and believability to the world in which it’s set.

My main challenge here was figuring out how to differentiate between the different classes of citizens. This game is all about contention between the upper and lower classes and it’s important to get that across in how the people act. For example, a noble would perhaps walk quickly down the street, simultaneously trying to avoid eye contact with the peasantry whilst maintaining some sort of superiority to them. Whereas a poorer character might shuffle slowly, in a tired manner, reluctant to get to their destination, be it a taxing job they have to maintain to live or home to tell their families that yet again there isn’t enough money to buy food. Coming up with stories for all of the citizens is a difficult task, especially in our given time frame and so of course each person won’t have a unique set of animations, but the idea is to be able contrast their situations in a general manner to hint at the story of the place as the player passes by.

The most challenging aspect of this project is maintaining a balance between, quantity of animations and the quality in the short timeframe. To populate an entire town there needs to be a large enough variety of animation so that repetition isn’t too obvious and there are enough interesting things happening to draw the player’s attention and keep the city feeling realistic. Ideally everyone would be doing something slightly different, but this just isn’t feasible in most instances. However, considering the time we have to complete this project, I have to make decisions on which animations are more important, so I have time to still produce work of a high quality. For example, in an ideal world, I would like to say have 5 different walk cycles for both male and female citizens to really emphasize the variety. However, implementing something more noticeable like a begging animation would be a higher priority as in the end it would add more to the project than another walk cycle.

Benjamin Lane (Lead Prop/ Environment Artist)

My name is Ben Lane and I am the second environment artist for the project, I am responsible for some hero assets and have recently started constructing buildings. For this project we wanted to make a more unique medieval setting, so we decided to set our world in Croatia as the architecture is very unique and distinct there. The project is simple, but very ambitious in terms of the amount artwork we are aiming for as we are constructing an entire civilization built on an island so there is a lot of consideration regarding the overall aesthetic and ensuring everything stays cohesive and believable.

A couple of assets that I have worked on so far include a bronze statue found in the market square and a well that is placed across the city. Both assets were made with Maya and ZBrush then textured in Substance Painter.

Recently I have moved onto making modular buildings, the first pack that I have made is meant to look slightly wealthier and elaborate than the buildings in the high street. (See answers 5 below for workflow and renders)

Blockout

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

To first start creating the town, the first step for me was to gather as much reference as possible. We therefore organised a trip to Dubrovnik in Croatia.

From this trip I gathered texture reference, modelling reference and explored and learnt about Byzantine architecture. I also explored all of Dubrovnik to learn and understand the way in which the town was constructed and laid out, as well as the general atmosphere of the area. I was looking to capture the city in as many photographs and experiences as possible in the one week that we visited, to allow me to translate everything that I had learnt into the environments of the town we are constructing.

I was then able to start to concept an idea for my own town layout, using the things I had learnt in the research trip, I concepted 5 primary areas of interest that are key to the medieval city that we wanted, this includes; The Gatehouse, a wealthy Area, a peasant Area, a market square and finally the Lords Residence. From this, I then came up with a rough layout of where each of these elements will be placed, considering the mid-day lighting we wanted to go for, I carefully positioned each environment onto a map, to allow the level to be well lit. I then wrote up a document to hand over to a freelance concept artist who drew the final town layout.

Now that I had a town layout, I built some basic primitives and imported them into UE4 to start blocking out the entire town. The main aspect of doing the block out in such a way for me was for two main reasons. Firstly, scale. I wanted to make sure the scale of the town felt right, as if it were authentic 15th century Byzantine buildings, as well as making the world feel as if it were inhabited by real people. Second was composition. By doing a block out, I can see the forms and silhouettes of buildings very quickly, allowing me to see areas of interest, as well as areas that are not so interesting, helping me reflect that in the way in which I model it.

A notable example of this, is when I blocked out my gatehouse it looked like this:

I straight away noticed that the form and silhouette were just not up to the grand architecture that the rest of the town has, and doesn’t mark as a fitting symbol as the entrance to the town. I therefore was able to make those adjustments into a more detailed block out as seen here:

Then finally modelling the final environment (WIP as of 28/12/2017)

About Modular Packs

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

Since I wanted to create a relatively large town, we knew from the outset that the buildings would need to be built with modularity in mind, this means that I wanted each parts of the buildings to be deconstructed, so they can be re constructed in a unique way and still make a complete building, allowing me to make multiple different looking buildings, using the same pack of assets, all of which snap to a grid to create a full watertight, game ready asset.

The first part for me was to split the buildings into sections, such as “windows” “doors” “trims” and “roofs” Each of these assets would share dimensions in their respective category, or would share its dimensions with other categories to allow them to be swapped out, without any sizing issues. For Example, a window section would be 200 x 600, therefore all window varieties would have to be those exact same dimensions, however, I also made the door variety’s those dimensions as well, allowing me to swap out doors with a variety of windows and vice versa. This process was done with every section of all the variations of the assets to, with dimension parameters being shared with other assets that I would know I would want to swap out to create different unique buildings.   

Below you can see the assets that make up the vast majority of the buildings within the game world. In total, we will have 6 modular asset packs, which can work alongside each other, that will populate the world. As of 28/12/2017 we have completed 3 modular kits within the game. 

To keep the game world created by myself and Benjamin Lane consistent, we developed strict rules that we must stick to when creating the buildings. One of the most important rules was that every building must have a “tier” system, by which every floor in a building must be wider than the previous floor. This is what gives the building its unique look and style, creating quirky looking architecture, similar to that of medieval Tudor architecture.

Another import rule we had was that every building had to have light coloured bricks, with a bright baked orange roof. This gives the town its distinct appearance that mimics that of the Byzantine empire. We went with these colour schemes as it compliments the lush green of the surrounding hills, as well as the blue of the sky and the water below, creating a sandwich effect around the 2 bright colours that are visible on screen. This combination of colours gives the world a very vibrant look and feel.

Other smaller rules, such as the use of green window shutters, roofing structure/placement and tarps were also enforced.

I started by modelling the buildings, using modelling reference I had gathered on our research trip. I first modelled a high poly in Maya, then took it into ZBrush to add further details, to break down and add age to the asset. I then brought the asset back into Maya and re-topologized them, then finally baking the high poly onto the low poly in Substance Painter.

By doing this I have around 30 assets for this particular building pack, that can be re used to make small buildings, large buildings, buildings with multiple levels, as well as quirky buildings where the top is wider than the bottom, as well as allowing me to push the silhouettes and forms to their maximum to get an original look and feel that hasn’t been seen before.

The small decorative elements such as the chimneys and dormer windows are based off real world examples found in Dubrovnik today however their style dates back the 15th century. By having multiple different variants, we can place them around the rooftops of the scene to further make each of the buildings unique, as well as enhance the silhouette of the buildings.

Benjamin Lane (Lead Prop/ Environment Artist)

For the different modular packs, we used a lot of primary reference to keep everything looking cohesive using both Croatian and Tudor architecture as our main influences. We worked off the grid to ensure everything snapped together correctly and used the first building pack as a starting point for the proportion. The different elements such as the window shutters, chimneys, and rooftop pieces are all constructed in a way so that we could reuse them across the different building packs, as we can reuse these assets across each building pack this really helps connect the whole environment together and helps in selling the idea that these structures belong in the same town.

Creating the buildings

Benjamin Lane (Lead Prop/ Environment Artist)

For this building we wanted to make it a bit more elaborate to sell the idea of a social hierarchy in the town; having more affluent looking structures really helps enforce this idea.

A large amount of the features found in the structure are sourced from two different cathedrals in Croatia, this helped with keeping the forms looking a bit more elaborate and detailed while also keeping the structure looking cohesive with the rest of the architecture in the environment

The workflow is similar for each pack, to start I gathered a variety of primary and secondary reference and picked out the features (such as windows, trim pieces, and pillars) that I believed would work well together. I then constructed a quick block out of each section in Maya and moved around the different sections until I was happy with the general form of the architecture.

To ensure that each pack would work well together, I used the first modular pack as a starting point for my proportions, this not only made the construction process faster but also led to everything looking more cohesive in the end.

Once I was happy with the form, I proceeded to divide each section and plan out how I was going to separate the different texture sets. After I had everything planned I started to model each section working closely to my reference and adding any details (such as pillars, window panels and details to the trim sections) to keep the structure looking uniform.

Once I had finished the lowpoly in Maya I brought everything into ZBrush to add some noise and damage details. And when this was finished I brought everything into a substance painter project to start baking and texturing.

I made a variety of materials using Bit2map (the brick texture) as well as Substance Designer (the roof texture) to ensure the textures worked well with what was already in the environment.

For this building I really wanted to make the textures as seamless as possible, this is easy in areas where the seam is hidden by geometry (such as a pillar like in the third tier) but more difficult in areas that are completely visible (like the second tier) so to ensure the texture is seamless in the substance project I imported two sections of the building and used the projection feature in substance to paint the material directly over the seam. As I had two rows of the structure this also let me see how well the textures worked when repeated next to each other. 

I started by texturing the second tier as it is composed of most of the elements found in the structure (brick, windows panes, and pillars). By starting with this section, I could create my colour palette and easily proceed to texturing the other areas once I was happy with this one. When the whole building was textured I added some hand painted normal details and created a dirt material which was applied across the structure using a combination of smart masks and hand painting.

The corner sections were modeled after I had finished texturing the building faces. To make these pieces I took the models from each section and modified them using Booleans in Maya to form a corner. This allowed me to keep the UVs of the original mesh, so these corner sections remain seamless with the rest of the trims and reuse the same material.

I prevised all my textures in Marmoset and once I was happy with everything I started to import everything into the UE project.

 

Systems development

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

One of the main systems I have developed was the pavement generator, it allows me to create sweeping pavements through the game world. I also built some functionality into the options to toggle the visibility of the sidewalks as well as allowing me the bank the pavement left or right to further give height variation in the level. I created the system in UE4 blueprints. It works by taking in 2 mesh inputs that I have modelled and textured, (pathway & sidewalk) and then allows me to use a spline to generate a pavement along a specified path.

The advantages of crafting a system such as this in engine, rather than modelling it traditionally and importing it, is that It allows me to fully control and make changes in real time based on the parameters I have set. This system helps in creating a sweeping pathway through the narrow streets in the town. Due to the large height differences in specific areas of the map, being able to control a pavement in such a way is an incredibly powerful tool to be able to use. As well as this, I can duplicate the system, replace the mesh and materials in the set parameters, and then use it to create the waves that go around the island using the same technique, expanding its functionality beyond that of just using it to create a pavement.

Here you can see the pavement system in action, used to create a flowing, sweeping pavement, that has to ability to curve, giving it a rougher and more interesting look than just a straight pavement.

I have also created a parallax window material that I apply to the windows to create a fake interior. The material works by taking in an image input parameter, and then offsetting it based on exposed variable parameters, depending on where the camera is, therefore simulating a parallax effect that would be seen in real life. There are also options within the material that I have built, that can overlay, grunge and pattern toggles to further add details to the windows. It is also possible to have emissive elements within the material based on a defined alpha mask, to simulate lights/candles within the building. The system is still not perfect, however as the project moves forward we are constantly adding to it and finding new ways to improve the way in which it functions.

Adelaide Coldham (Lead Animator)

Alongside the modular characters, we had to ensure each different citizen shared the same rig. This enables them to share animations and no matter how many characters the character artist makes, it will not change the amount of work or the number of animations I have to produce. This makes the project almost infinitely adjustable in that I can continue to add animations while she can continue adding characters for as long as we have time. Aside from that, I have had to also look into techniques for setting up basic AI in order for the town’s citizens to move around as the player walks through. This was particularly challenging for me as I have never really had an affinity for blueprints and so had to spend a lot of time looking up tutorials online. After coming up with a few different possible techniques, including using target points to dictate a path through the city, I decided that the simplest way to get the effect we wanted was to have the character choose a random location within a certain radius, move there then pause before repeating. I set up the blueprints like this:

With some tweaking and fixes, I managed to get it working fairly quickly. It was very basic, collisions between multiple characters caused it to glitch and sometimes they would get clumped up together or stuck on some of the environment. It will take a bit more work to get this up to standard but for now it’s on the right track. Alongside the AI blueprint, setting up the animation blueprint was a new experience too. I wanted characters to do multiple different things as the player passes such as pausing by a stand as they walk through the market to browse and maybe buy some goods. Using the blendSpace1D node I have set up transitions, so characters will be able to go between standing, walking and any other amount of animations smoothly. The same technique will be used when work on the main player character begins as he will have unique animations once he is rigged.

Working with textures

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

The textures in the project are incredibly important in making the city seem as realistic and authentic as possible. I spent a lot of time refining my texture process pipeline to create a process that will give the best results for the project.

I first started by taking close up texture photos on our research trip, with a high quality DSLR camera. I then take the .raw photograph into Photoshop and clean up the image, this includes removing highlights, removing shadows, colour correcting the image for neutral lighting and as well as removing artefacts such as plants and wires. I will then cut a square from the image and save the image out.

I then import the image into Algorithmics’ bitmap2material software. Using the parameters, I make the image into a tillable texture, as well as creating the normal, roughness, metallic, ambient occlusion and diffuse maps, to create a fully PBR game ready tillable material that is ready to be used as a foundation base material on the assets. 

I then import these maps into substance painter and designer, and apply them to my models, giving me a highly realistic, photoreal texture. I then repeat the process for decals, such as rust, dripping dirt and weathering, and overly them on top of the brick texture to give the asset some wear and tear as well as to show its age.

To avoid tiling seams between the assets, I use a projection technique where I line the projection brush, loaded with the brick PBR material, in the corner of the model, with active symmetry enabled, and start projecting the texture onto the mesh, I will then use various parts of the texture to fill in the middle section, seamlessly blending in either side of the mesh. By doing to every model, I was able to duplicate my mesh, mix it with other variants, without seeing any visible seams in engine.

To break up the repeating pattern, I created a brick trim of “seemingly” random bricks to place around the building, give the buildings a rougher and used look, as well as being able to break up the silhouette.

Due to the lack of colour and material variety, and to give the buildings a unique look, I also created a height based vertex painter material, which can blend between 4 varied materials that I can paint directly on my mesh in UE4. The system is fully parametrized, allowing me to adjust the materials that I want to vertex paint over the mesh. It also takes a height input, allowing me to create dirt/moss that builds up from the cracks first, giving me a more realistic look in engine.

Georgia Jeffries (Lead Character Artist)

I like to texture in Substance Painter, it works well for game assets, and has features such as smart materials and smart masks as well as the Substance Share library that allow me to speed up the workflow if needed while still getting unique results. For the modular characters, I texture each asset in a separate Substance file while pre-vising them in UE4 as a whole to make sure assets are working well together. Photo reference is also very helpful and these can be stenciled on to create detailed textures fast.

For heads, I use an eye material from the Substance Share website by Ken Jiang (https://share.allegorithmic.com/libraries/328). For the skin, I start with a base skin material and add detail to that instead of using photo textures. 

For the hair, I used XGen within Maya to generate the textures using the Arnold renderer. This resulted in more realistic looking hair, while still keeping the polycount down with the use of planes.

To make the most of the UV space, I overlapped the UVs of each plane in order to maximise the amount of detail in every strand of hair. Although these characters will be viewed from a distance, details like this can make a huge improvement.

 

I make sure to start with some surface texture in Zbrush, many different layers help to get more detail into the materials and this is a good base to have once the low poly is baked. The next level is detail is added in the texturing process. I will always make sure when UVing I have laid them out in such a way so that the sewing and seams of clothing or any patterns are flowing in a believable direction.

An important element I kept in mind when creating the characters was the style. Although we are going for realism, the characters have got a slightly stylised look to them. This was to avoid them looking too realistic which causes audiences to see issues, this can happen with characters with photo textures on the face. I also added sightly more ambient occlusion to the characters than would normally be there to really bring out the details in model as they will be seen from far away and this can lose lots of detail as well as the 20k tri limit we have set for the NPCs due to the amount of them we want on screen at once.

 

I have created all the clothing in Marvelous Designer. Because we are working with the 15th century in mind, there is a lot of cloth in the outfits, and I wanted this to look as realistic as I could. This software cuts the time spent sculpting down immensely and keeps all the models to the same level of detail.

Lighting

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

Since we are relatively early in development, I haven’t had the chance to get a proper lighting set up. The lighting that I have used is baked lighting. I want to aim for as realistic to a summer mid-day, hot atmosphere. I therefore only used one primary light (The Sun) as well as various secondary light sources for smaller objects such as fires/torches/windows. I have also used a lot of volumetric effects, such as using the volumetric fog options in the sky light as well as the exponential height fog actor in UE4. I have also made a volumetric material, that I can apply to any mesh (usually a sphere) to create the illusion of lights having a faint aura, which helps sell the believability of the light source.

What can be a time saver 

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

The key for me to be able to re-use assets within the game is through the use of parameters. I have tried to parametrise as much as possible throughout the entire process. From my substance designer graphs, UE4 materials, blueprints and consistency in the models, I can have assets which look bland on their own, however by utilising the parameters it transforms the model into one that is unique and interesting to look at. As I move forward in our development process, I am still working on further utilising and using the parameters I have built into the assets.

Georgia Jeffries (Lead Character Artist)

 

For the NPC characters, I split up the models into bodies, heads, and hair. This meant creating them as separate assets with their own UV space and textures, and putting the different combinations together in a single Maya file which are then rigged by an auto-rigger created by Matt Jenkins. Using this method instead of a UE4 blueprint allows me to not only have many more character variations for the amount of assets created but also be able to slightly edit the geometry of each character combination to avoid any clipping issues that can occur with modular characters.

We really wanted the area to feel populated with people living in very close proximity to one another, with a visible class structure and considering we only have myself as the only character artist, a modular system was a must to achieve what we wanted in the timeframe we have.

When starting the project, I created a base male and female body which I have been working with throughout the project. This means that when creating each character body, I am able to use the same base within Marvelous Designer which again speeds up the workflow. This method also helps speed up the rigging process, as the same rig can be used on each of the characters.

Nazir Joshua Khusal (Art Director / Lead Environment Artist)

This project was entirely created to give us the best chance of finding employment once we graduate from university. We have until May 1st 2018 to complete the project, however after its completion we don’t plan to take the project further, we are using it as a platform to showcase and develop our skills as we prepare to enter the industry.

Joshua Khusal, Art Director.

Interview conducted by Kirill Tokarev.

Leave a Reply

Be the First to Comment!

avatar
wpDiscuz