George O'Keeffe
MA Game Art at
Art Bible:
Starting a new project is always really challenging, and the Hotel Morpheus project was no different. In an attempt to solidify our concept and to ensure we stuck to them, the first part of the project was to create what is known in the industry as an "Art Bible", which is basically a series of mood boards that set the tone for the entire project to come, and set our exactly what you plan on doing. This process is incredibly challenging, but equally useful, as it prevents you from straying too far from your original concept, as well reminding you what you have yet to do.
My original idea was to create a very typical hotel corridor, with dull artificial lights and repetitive patterns, and doors on either side. One of those doors would be open, and inside would be an old 1970s style hotel room that had been completely abandoned and run-down.
I wanted the room to be a battle between the man-made built environment (the hotel room and the furniture), and the natural world, where the nature had the ability to reclaim the room. The walls would be mouldy and covered in ivy. The glass in the window would be broken, with an old creepy tree would have started to crawl its way into the room through the opening. There would be cracks in the floor where vegetation would now peer through. The remnants of the 1970s hotel (old tv set, bed etc) would be aged and damaged. The only light to enter the room would be from behind the player (from the corridor), and odd rays of natural light poking through the branches in the old tree.
Coming up with the concept was the easy part. The hard part was trying to present the ideas in a clear and concise way, translating what was in my head for the world to see. I started out by creating a really rough concept sketch in an attempt to set the mood that I was trying to portray. I then followed this sketch with a word cloud and a series of photos, again setting the mood and tone of the eventual scene.
Then I broke the scene down a bit further, stating the variety of assets that would populate the scene. The first category of asset that would be visible in the scene were the remnants of the original 1970s hotel room assets, like a bed, television set etc. The second category were what I called "Abandoned Assets", which was basically any items that would have populated the area over time, like broken bottles, bricks, paint flakes etc. Finally, the last group of assets would be the natural assets, the ones that were reclaiming the hotel, like moss, mold and ivy.
Next, I went on to do a quick sketch where I broke down the rough proportions and layout of my scene, including all of the major assets that would populate it.
This breakdown of assets proved to be very useful when it finally came around to modelling them. Not only did it remind me what type of assets I was trying to create, but it also gave a rough idea of where in the scene these items would go. The end result would be a little different, but the overall idea was there.
In the art bible I also set out the colour palette I was hoping to use, which also proved to be a really useful page that I referred to whenever texturing my assets. I went for a dull and desaturated tone in an attempt to emphasise the age in the scene.
The creation of an art bible is something I had never done before, but something I really wish I had heard of in my architecture degree. At first I thought it was just so we could get our concept across to our classmates and to our tutor Simon, but it turned out to be far more useful to me than I ever imagined it could be, and it ended up being a tool that I constantly referred to throughout the rest of the process. It helped keep me on track, and the resulting scene is definitely better as a result. I plan on including an art bible in every project to come as a result!
Project Timeline:
Project 1 -
Hotel Morpheus
A mobile environment in the style of an abandoned 1970s hotel being reclaimed by nature.
Block Out Phase:
The next major part of the process of creating this scene was the original block-out phase. This was the process of converting the concept that I created in the Art Bible into a proportional model in Maya. The forms are designed to be rough, and the aim was to simply figure out proportions and to decide if the objects I wanted to create would fit comfortably in the environment. While this process may seem arbitrary, it is actually a really important and useful technique. I found that it further solidified the idea that I proposed in the concept, while also forcing you to ask questions about the scene itself. The proportions that I proposed in my art bible turned out to be a little too compact, so in this block out phase I decided to extend the room slightly and create a more architecturally accurate hotel room. My degree in architecture was obviously quite helpful in this process, and the resulting image again became a tool that I constantly referred to throughout the rest of the design process. I tried creating a series of two-dimensional sketches and floor plans, but having a proportionally accurate 3d environment is definitely the most useful option, and you can examine the scene from every angle. I found it particularly useful to place the camera at eye level in Maya so that I could really see the rooms proportions before. Next time I would probably include the blockout phase in the latter part of my Art Bible project, as it was a really useful way of examining the scene concept further.
Modelling & Texturing:
The next part of my design process was easily my favourite, the modelling, UV-ing and texturing of all of the assets that populate my scene. This is where the concept sketches and reference images really come into play, and where you can really start to see the idea grow and come to life. While this process was really enjoyable and really interesting, it did come with its fair share of problems and complications, particularly because this was my first time ever using any of these programs. Also, the fact that we were modelling for a mobile platform meant that all of the assets had to be as low-poly as possible, which is always challenging.
Every asset was inspired by reference imagery found online or in magazines. It was then modelled in Maya using all of the tips and tricks we had been learning in class. The next step was to UV the model, which turned out to be far more time consuming and difficult that I had presumed it would be. The last part of this process was the texturing of the assets, which I mainly did in Photoshop and Quixel's nDo2. Finally, all of the assets I created were brought into Unity to test the result of the texturing process.
1 - Wallpaper
In my original concept I wanted the wallpaper to be old and tattered, with some panels of wallpaper slipping now the wall, or peeling. Originally I thought this effect would be really difficult to pull off, as it would need quite a lot of polygons to get a convincing peeling affect. In actuality however, the process was incredibly easy and not as costly as I originally anticipated. To pull off an accurate peeling affect I used a series of bend deformers in Maya to create realistic curvature. Nonlinear bend deformers are something that was introduced in class on our second week, where a virtual curve is added to your model, and the curvature of this curve can be dynamically adjusted to create the desired effect. This was really efficient when modelling my wallpaper, as I could dynamically change the amount of peeling really easily.
I originally implemented these wallpaper elements into my blockout scene, and then re-created them to fit into my final scene. Because I used bend deformers, the UV process was incredibly easy, as each wallpaper panel was just a small variation on the original wall panel. This also meant I could use one material on all of the wall panels, despite the fact that they were all original meshes.
After talking to Simon in class, I decided to combine the wall panels with the floor and ceiling panels, and create a series of modular elements that could be duplicated really easily to create a room. This also allowed me to use just one material on the walls, floor and ceiling, which is a lot more efficient in engine. Below is the UV set that I created, along with one of the final wall panels. I also used a normal map on my walls, which is a really interesting way of faking detail in geometry so they will look three-dimensional without all the added geometry.
2 - Ceiling
In my art bible you can see that I put quite a lot of emphasis on the ceiling of my room, as I thought that the peeling of the ceiling paint was a really evocative portrayal of the passing of time and emphasised the abandoned aspect of the entire room. I researched the way that paint peels over time, and tried to replicate that on the ceiling of my room. Originally I tried to create this peeling in a modular fashion, like that of the walls, but because I wanted there to be a lot of variation it didn't make sense to make them modular, and instead I created one singular mesh that covered the entire ceiling.
I modelled the ceiling paint in Maya, and used nCloth physics to simulate the peeling over time. Basically, I added gravity to the object while constraining the edges, and I examined how the strands of paint fell. This nCloth technique is a technique that Alex Williams described in our animation workshop, and was definitely the best way to produce a realistic gravity simulation. However, I experienced a strange issue here when I exported the mesh to Unity. Even after freezing transformations and deleting the history associated with the model in Maya, the ceiling would revert back to its default state, without the simulation applied. I asked Joa (a Microsoft Studios technical artist who was in with us for the week) how I could import the finalised simulation to Unity, and he deciphered that it was an error with the .fbx format, and recommended exporting the mesh as an .obj file instead, which indeed solved the problem. Looking back now I would probably see if there was a way of capturing the nCloth animation created in Maya and try to import that animation into Unity, as it would look like the ceiling paint was swaying in the wind.
Now that the main shell of the room has been blocked out, it was time to get started on the internal assets that will give life to the scene itself. I started by modelling a pillow that would sit on an exposed mattress in the room. To get the original shape of the pillow I again used an nCloth simulation that inflated a regular subdivided cube, which I discovered on a tutorial I found on YouTube ( Maya Pillow Tutorial ). I then went through a series of iterations of the pillow where I reduced the polygon count significantly so as to optimise it for the game.
I also wanted to emphasise the age on the pillow by creating a tear on the surface of the pillow where some of the inner lining would peak out. I used an alpha channel to create transparency along the tear to heighten the effect of the tear without adding any extra geometry. Supposedly transparency is quite an expensive thing, but it would be cheaper than attempting to create the same effect using geometry, so I stuck with the transparency option. I did, however, use the "cutout" transparency mode in Unity as it is the most efficient. Cutout is an one of 4 rendering modes available in unity ( Official Unity Docs ) and is supposedly the cheapest to run in game. It also added a rougher look to the edge of the tear, which added to the aesthetic.
3 - Pillows
4 - Bed and Bedside locker
After a lot of researching online, I found an old IKEA catalogue from 1973, and I decided to copy the bed and the bedside locker from it. I then decided to expose the structure below the mattress to give it more realism, which I then damaged to highlight the decomposition of the hotel room.
6 - 1970s TV Set
5 - Mattress
The mattress above was a really interesting design to model. To save on geometry, I decided to crete the indentations of the mattress using only a normal and albedo map, which created a really nice and relatively cheap 3D effect. I also added some grain to the normal to give the effect of a fabric material. Like discussed previously the normal allows you to fake geometry and simulate a 3d effect without adding any extra geometry.
I used nDo to create the normal map for this object.
7 - Other & Debris
8 - Windows
I originally decided to create the windows in my room as single sliding sash windows, and knew I wanted the window panes to be shattered and broken. After creating the windows however, it was suggested to me that I should expand the windows more to allow even more natural light to fill the environment. Luckily, this was relatively easy to fix, as I could just duplicate the sash window on the other side and fill in the gaps. After widening the windows the room is bathed in more light, as well as allowing for even more variety of broken glass. This new window design went against the idea in my Art Bible, but it was essential in getting the correct feel inside my hotel room.
I decided to model the cracks in the glass using geometry this time, instead of transparency. This looks great, even at an angle, as the glass is not just a single plane, but it is incredibly heavy and dense because of the amount of polygons needed to create that shape. Looking back now I would probably not model these elements, and try to recreate a similar effect with transparency, because the density of polygons at the windows reduces the frame rate by a noticeable amount when running on the tablet.
9 - Ivy
The last important object in the scene is the ivy creeper that is climbing its way through the window frame. This was a really important party of my scene, and so I was willing to give it a lot of polygons in order to get a specific look.
When creating this ivy plant, I realised just how difficult it is to recreate natural elements, particularly in a mobile environment, because you have so little flexibility. Not only did this mesh require a lot of polygons to get the desired look, but it also consists of a lot of transparency overlapping each other, and a normal map. We learned in class the drawbacks of transparency, the main one being that when there is a transparent material, that entire material needs to be rendered in engine, and then, depending on whether it is seen or not the objects behind it will also have to be rendered. This is a serious issue when modelling vegetation as it means that a single pixel behind the ivy may need to be rendered multiple times depending on the amount of leaves that obscure it. This was really optimistic for a mobile environment, and the result is what you might expect. The frame rate dips slightly as the ivy plant enters the field of view, but luckily it is still very playable.
Again here I used "cutout" transparency in Unity as it is the cheapest, but it also gives a really nice rough edge look, that really heightens the appearance of the laves.
In hindsight, I would probably attempt to model some of the ivy polygonally and assess which approach is more expensive. I presumed that using transparency would be the cheapest, but as I now know, it may not be.
I then decided to design the wall panels in a series of modular elements that coincided with the seams in the wallpaper, meaning that all of the wall elements could be duplicated and rotated to create the entire room enclosure. I then created a series of overlays that would mask any repetition and create a more unique feel to each wallpaper element.
Assembling in Unity:
Throughout the modelling process I brought the models into Unity to see how they looked, particularly when it came to creating metal and roughness maps (because Maya uses specularity as opposed to metalness). As soon as I had enough assets modelled, however, I decided to assemble them in Unity. I did spend a lot of time going back and forth between programs to ensure that everything looked its best in engine.
Assembling in Unity was a really cool and interesting task, but it definitely came with it's fair share of issues. The first issue I encountered was definitely the lighting tools in Unity. While the pre-installed lighting tools in Unity are incredibly beautiful, I found them very difficult to control. The main issue was that shadows often tended to be really ugly or rough, even though the objects had a lightmap UV and the resolution of my lightmap was 1024x1024 which is relatively generous for a mobile game. It just required a lot of adjusting and tweaking to get it looking right. Sometimes light seeps through the seams in a model, even though there is no possible way for light to penetrate. To combat this I created a giant light-blocking mesh around my scene with openings only where windows were. This looks funny from the outside, but inside it is not noticeable at all, and it does fix the lighting issues.
Another thing that seriously affected the representation of light in my scene was whether an item was static or not. Only static objects can receive baked shadows in Unity, but for some reason sometimes Unity would not change the state to static, even though the option box was checked. This meant that sometimes an object wouldn't receive shadows, and the object had to be deleted and re-imported. This just seems to be an issue within Unity and is really easy to fix, but it took me quite some time to figure out what was actually happening in the first place.
Another issue I faced in Unity was that some of the image effects that I wanted to use can be really costly,costly. In fact, I originally used the
default image effect in unity to create sun beams, which gave a really nice appearance, but when I tried to run it on the tablet it started to cause framerate issues. To combat this I used polygon planes with transparency instead, which Simon provided. This was significantly cheaper to run on the tablet, and while it may not look as good it is very close, and it was definitely an appropriate compromise.
Exporting to the Tablet:
One of the coolest experiences of this whole process was being able to see my game running on a tablet. It was so nice to be able to run around inside our own environments and experience them like they would in a real game. But again, like everything else, exporting to the tablet brought along its own issues that needed solving. The first of which was pretty much unsolvable for me, and that is the default Standard Asset control scheme is really really difficult to control, and really compromises the playing experience. I tried going to the Unity Asset Store and downloading a dual stick controller asset, but I couldn't implement it to my scene without a serious knowledge of code. I asked Joa for help, but in the end I just decided to use the standard Unity controller because I would have wasted a lot of valuable time trying to implement the controller.
The second issue I experienced was that in some high-poly areas of the room the framerate lowers a little. This could easily be fixed by reducing the number of polygons in some of the higher poly assets, like the ivy and the window shutters, but I unfortunately ran out of time. I did however introduce a really interesting game design technique to attempt to tackle the issue, known as "occlusion culling". Basically, when running a game that has no culling methods involved, every single asset in the scene is rendered in realtime, which is obviously really expensive. Occlusion culling is a technique where only the assets directly in front of the camera and not obscured by any other object are rendered, with everything else occluded. This meant that the framerate only dipped when the high poly models were on screen, meaning the rest of the scene ran much more efficiently. The video below shows a brief explanation of Occlusion Culling in my scene, where the right screen shows what the player is seeing, and the window on the left shows what assets are being rendered.
If I had time I would attempt to create LODs, or Levels of Detail for the high poly objects, which is a technique where high poly assets are simplified the farther the camera is from the object, meaning the high poly mesh would only be rendered when the player was really close to the object. This approach (which we learned on Week 4 Day 3 More Info). This effect may not even work in this scenario however, as the player is never very far from the high-poly assets.
The Presentation:
Standing up in front of your peers and presenting your idea is always nerve-wracking, but luckily that is one thing that I have done a lot in my architecture degree, and while I definitely wouldn't say I am good at it, I am certainly a bit better than I used to be. On the final day of the project we had to present our game (along with the mood board) to Simon, Joacim (Joa) and the rest of our classmates.
The presentation went very well, but there was some very useful feedback that I will implement when I get the chance. It was suggested that I could introduce more rubbish piles and debris throughout the scene to populate it more, and to add some more overlays to the floor as it seemed a bit too perfect in places. Joa recommended that I attempt to tell a story through the project, for example if it was used for antisocial activities during its deterioration. Simon mentioned that the hole in the wall was a little too perfect, and that i should roughen it up a little more. Finally, it was noted that the door handles I created are slightly too large, and slightly too gold. These are luckily all quite easy to fix, and I will definitely adjust them when I have time.
Conclusion:
Overall this was an amazing project to work on. Not only was it incredibly interesting and fun, but it also put all the skills we learned in class to the test. I cant believe that I learned how to create a scene like this is only 6 weeks! My favourite part of the whole process has to be the modelling and texturing process. Even with the mobile restrictions, it was incredibly interesting and challenging to decide where to add and remove detail.
The only aspect of the whole process that I didn't enjoy was the lighting inside of Unity. The real-time lighting in Unity is a dream, but when it comes to baking lighting it was so difficult to get the look just right. Also, the fact that Unity is sort of tailored towards scripting and coding meant that a lot of the features that it has were locked from non-coders like me.
But overall I really enjoyed the whole process. More importantly, I now have a game scene running on my own mobile phone which I will be able to bring into interviews and demonstrate my work in person. This is obviously a real advantage when applying for a job as I will be able to start a discussion about my scene, and demonstrate that I have not only a knowledge for game art, but also a simple understanding of how games are made and run.
More Info:
Throughout the year I also produced a daily blog online where I explored all of the tools we used in class, as well as documenting the particular assets I model and the issued I faced. If you need any more information on anything I discuss above feel free to read through it:
Week 1 Day 1 - INTRO TO GAME ART
Week 1 Day 3 - 1950S SWEET SHOP
Week 1 Day 4 - MOBILE MODELLING
Week 1 Day 5 and weekend - NURBS AND CURVES
Week 2 Day 2 - MODULAR MODELLING
Week 2 Day 4 - TILING TEXTURES
Week 2 Day 5 and weekend.- BLAST DOOR MODELLING
Week 3 Day 1 - UV-ING IN REVERSE
Week 3 Day 3 - INTRO TO MATERIALS
Week 3 Day 5 and weekend. - IS THAT NORMAL?
Week 4 Day 5 and weekend. - UNITY MATERIALS
Week 5 Day 1 - LIGHTING IN UNITY
Week 5 Day 3 - EXPORTING TO THE GALAXY TAB
Week 5 Day 4 - INTRO TO MUDBOX
Week 5 Day 5 and weekend. - ANIMATION WITH ALEX WILLIAMS
Week 6 Day 1 - INTRO TO SCRIPTING IN UNITY
