For this week regarding the development of Prescription Grade Spooks, we were tasked with improving the quality of the finished full game. For me, I have already completed two assets for the game. I hope to include at least two or three more depending on the time scale. I have considered cutting some planned assets from the game, like the wheelchair asset I was going to make. That would give me the time to focus on the remaining assets to be included in the game. This week saw me focus specifically on the screen divider asset. Little did I know how much time it would consume me before I would eventually texture it. Here is the timeline of the development of said asset.
Making the Asset
I started off with a cylinder polygon and scaled it down, increasing the ends to make it look like a pole of some sorts. This will be the basis of the edge of the screen divider and where the cloth material of the asset will be attached to. It should look something like this.
I created a new cylinder polygon about the same size and rotated it 90 degrees. Both of the cylinders have one end cap so that it would be easier to bridge the top together.
I went ahead and mirror the curved polygon to make it something like this. This will form the borders of the screen divider.
My next step was to make the divider itself, so I fitted a rectangle polygon between the borders, making sure it’s perfectly aligned and no clipping would occur.
This step was a little tricky to pull off since this was my first time making a curtain. I originally wanted the curtain to be attached to a top polygon, which is what the image shows. I basically clicked on the cylinder and increased the subdivisions height for the vertices to be attached to. I then created a passive collider for the mesh for it to react with the sheet, which I created an nCloth for. I then selected the vertices for the sheet that intersects with the cylinder and multi-selected that along with the nCloth’ed mesh and headed to nConstraint and clicked Point to Surface which allows the cloth to be firmly attached to the polygon above it.
I tested this method out with the sheet and found that it was a little wonky in relation to the mesh, as I wanted the sheet to be equal on both sides instead of using a plane which shows the other side completely black. So therefore, I used a cube polygon and scaled it down carefully to the right rectangular shape where it would most definitely resemble a sheet. This is an image of the example of the bad geometry when going about doing this.
After manually fixing the bad geometry, I had to figure out if the top attachment will work within the screen divider and I had second thoughts on the whole method of doing it this way, so I basically started again and making sure that I follow the steps again, but this time I wanted it to be attached from either width, both right and left sides in laymen’s terms. Here is an image of the method I used.
I spent a little time fiddling with the shape of the nCloth, trying to get the right shape of the mesh and the image below is what I’ve settled with. I’ve used animation for this so just like with the pillow in the last asset, I freezed the transformations to keep the shape as it is while the animation was still running.
I then fitted the newly-created nCloth carefully within the borders of the screen divider, making sure the outside doesn’t show the cloth sticking out and keeping firmly within the borders as I want it to be. I also added another cylinder polygon above and below the cloth to make the divider much nicer.
Now it’s time to make the bottom half of the asset. I isolated the new polygon which was a taurus and selected face mode. These will act as the wheels of the asset as if someone was moving the asset, the wheels would push it along.
Anyway, I went into face mode and deleted the inner faces of the taurus polygon, leaving something like this as the exterior of the wheel.
I then created another cylinder polygon and ensured that I scaled it to a comfortable size and adequate enough to be fitted within the taurs to make a functioning wheel, like in the image below.
Now is the time to make the supports and bolts that wields the wheel with the rest of the asset. To do this, I wanted to create a shape that I haven’t attempted before, but knew how to mold it into the shape I wanted it. I got a cube polygon and scaled it down, making sure I create the edge loops on the top and sides of the edges to create more faces before I can select the un-modified faces and delete them to make some kind of cover for the top half of the wheel, complete with the bolts that would connect the cover to the wheel. So something like this.
The next thing to do was make the pole that would be mirrored to make the remaining half of the movable supports. I applied the same methods as before to make the 90 degree pole and scaled the end forward to make it longer. For the bottom of the pole on the other end, I extruded the end faces and scaled it outward to make a smooth transition to the wheel cover. Here is what the image below shows.
A quick mirror for the created mesh and I have the perfect wheeled supports of the divider. Placing it below the actual divider allowed me to tweak the scale of the supports to fit the desired outcome before connecting the two together.
This was really as simple as it needed to get. I basically stuck a cylinder above the middle of the supports and combined them to make an even better version. With that, I ensured I would align the supports perfectly with the bottom of the screen divider, like so.
Now it was the matter of duplicating the first divider into four different dividers, along with the wheeled supports I made earlier to make this stunning asset even more stunning.
And for the final part of the modeling, I wanted to finish it off with some bolt fixing between each of the dividers to keep them together. I went with two bolts on each Y axis – one at the top and one at the bottom to keep the dividers firm with each other. All I needed for the bolts was a rectangle polygon and align them within the two divider borders, changing the vertex when I felt that the bolt wasn’t fixated enough. I made sure to repeat the process for the other divider borders to keep the consitency moving along.
Next was probably what was the hardest part about developing the asset, and that was UV’ing all of the shells that came about while I was making it. I original wanted the side of the cloth to have it’s own shell, but that would require more time than it should’ve needed to, so I scrapped that, you can see where I wanted the shell as the seams separate the side and front of the cloth.
The real issue with UV’ing such a complex asset like this is that the screen divider cloth would have unnecessary diagonal seams running down the UV shell and that would look ugly when bringing it into Substance. You can notice the problem with the cloth of the right compared to the left one, which has virtually no seams in the middle.
I attempted to utilize the UV fix as much as I could with the cloth, manually fixing the seams on one before duplicating it, but what about the seams on the side of the cloth next to the screen border? After about enough messing around to try and apply a fix to it, I could’ve just saved alot of time by just unfolding the polygon to get a better UV shape, like so.
To get the absolute best outcome, I made sure I unfolded the cloth polygons again to get this shape where the problem with clipped UV shells instantaneously goes away. I ensured that this is the shape that would be applied to the remaining three before I was satisfied with the UV sheet.
Upon laying the sheet out in a comfortable way, I was basically finished with the modelling and exported an FBX of the asset ready to be textured in Substance Painter.
Substance Painter
Just like with the other two assets, the ambient occlusion also had to be included in the texture channels before I baked them for the shadows to look as detailed as can be.
Once that was out of the way, I began by applying a fabric type texture to the main screen divider cloth polygons to make them seem accurate to the reference images I have used. I had to scale the fabric and its rotation to get what was satisfactory.
One thing that I forgot to mention was all of that hassle trying to UV the asset in the right way could have been more avoidable with just exporting the one dividers and its wheel supports as an FBX and then duplicating it once textured and applied in Maya, so that’s exactly what I did. Bear in mind that I had to start reapplying the textures again, but that wouldn’t take as much time as it needed to. I’ve also applied a steel texture to the borders of the divider and its wheel supports and gave the bolts a nice grey colour, making sure to tweak the shade to make it stand out from the standard grey polygons of Maya.
One thing you also notice in the above image is that the wheel interior has some sort of aluminum texture to distinguish itself from the asset and to make the wheels stand out more. The same is also said for the wheel cover that connects said wheel to the screen divider.
When I was satisfied with the divider’s textures, I went ahead and exported them and made sure I would include the ambient occlusion output map into the templates like so. Now it’s time to plugin in these textures into Maya once they were saved in the sourceimages folder.
Bringing It into Maya
I began by assigning the whole asset to the standard shader tool like last time for the textures to show.
Just as with any other asset, I started from the top with BaseColour and worked my way down to the Normal map under the Geometry tab, ensuring I select the Colour Space to Raw for all of them except the first map plugin. The Normal map had the addition for it to be used as a Tangent Space Normal, which I selected for consistency on top of the requirements and for the asset to be presented properly.
And again with the Ambient Occlusion map, I headed straight into the hypershader and made sure I could see the nodes of the different maps that have been applied above. I dragged and dropped the AO map into the hypershader and created an AiMultiply node for the conversion to take place, which would give shadows more detail as with the other assets. Keep in mind that some of the texture maps would be missing due to them messing up the asset’s appearance once attached too, so I just left them out to give a cleaner and more realistic asset appearance. This is what the hypershader would look like once all of the changes have been applied.
Upon finishing the AO plugin method and setting up the cameras and lighting equipment for the render, I checked to see which technique I would use. What I went with was kind of a clamshell look or a key and fill to eliminate any shadows that creeped up on the front side of the asset. Apart from the creases on the cloth, no other shadows can be noticeable on the image below, giving the appearance that it’s still in use.
Evaluation
This was by far the most complex asset out of the four planned for the game, with the use of nCloth and wheels to accommodate the asset’s appreciated look. If I could further develop my skills for next time with a similar looking asset or something that requires a duplication or the same appeared polygons continuously, kind of like what was being shown here, I would maybe create one example and attempt to make a flawless effort on that example, then export it to texture, bring it back, apply the textures, then duplicate the mesh so that I could be saving a ton of time doing it separately. That will be my main lesson for next time, as I’ve spent the most amount of time on this asset.
How the rest of the team are doing
This was the last week leading up to the Easter Break, so we had plenty of time to get the work that we needed to accomplish in this week before we can take a break. Max is still polishing the code for the Beta version in a few weeks and Kameron and Ben have been busy with their own assets which are planned to be in the game, which they have assigned on the asset list. I’ve also uploaded the Maya files to the Teams folder in addition to the FBX files so it’s there when Max needs to put them into the game.
Leave a Reply