MA Final Project Progress #1 | Reference & Blockout

I recently started development of my final project for my MA at SCAD. I am working on an environment for UE4 using some of my previous projects as inspiration. It has been an interesting process to figure out what it was going to be. I really love working with architectural elements and have done multiple projects with old neoclassical trains stations and wanted to do something within that styling but spice it up by placing it in space. Keeping it in that realm I am going with a Sci-Fi inspired Art Deco Bar & Lounge. 


Key References

I have been referencing the visual design of both Prey & Bioshock as resources for the visual style and art deco elements. My key reference is also from Bioshock using this wonderful book cover from Bioshock: Raptures by Craig Mullins.

X4aQ6fwABQPrX0fy_2ky6tIGTfvvDw7azYlL8QY5M34.jpg

I really love the sense of scale that is presented by this image. A Gala looking down onto the large city  below with massive windows holding back the ocean. It directly represents the power and wealth of these people. The amount of wealth required to build such a place, and its setting far above the city further infers the status of the people, making the rest of the city small in comparison. I want to try to emulate this feeling but in space instead of under water.

References & Mood Board

Block-Out

My take on the reference is to place them on a massive spaceship among the stars. This is the lounge at the center of the ship only for the ultra rich and owners of this vessel. It is a place to relax and get away and to be with nature in space. I really wanted to incorporate vegetation and specifically a tree to really show the wealth of the place. Growing trees in space seems like an incredible endeavor and only for those who have the money. I plan to incorporate additional vegetation and make it a small garden lounge. Below you can see my initial block-out so far.

Additionally, I wanted to connect this to my previous spaceship based on Chris Foss's Guild Tug. This is the fancy lounge at the center of the ship and by placing it at the center of the ship it also helps to further emphasize the scale of the scene. I really enjoy working with large scale environments and feel they can convey a lot of emotion and space. Taking what is a small lounge but placing it into an even larger environment helps to solidify the enormity of the spaceship and the wealth of the people who would have built it.

Clayton_A_TugboatCarrier_RenderUpdate.png

I will also be working on re-texturing the ship to more closely match the visual style of the interior once I have it more developed.

That is all I have to show thus far. I will be trying to post updates semi-regularly to show development over time. Next pass should include a lot more modeling work. Question, comments, and critiques are much appreciated. 

Stay tuned for more!

-Mitch

Procedural Animation: Kinetic Sculpture

Final Result

S18_V21_P2_ClaytonMitchel_KineticSculptureFinal1.png
S18_V21_P2_ClaytonMitchel_KineticSculptureFinal2.png

Statistics

Render Time: 10 mins | Resolution: 1280x720 | Pixel Samples: 3x3 | Min/Max Rays: 1/5 | # of lights: 2 spot, 1 Environment


Breakdown

My node network for the assembly and expression animation of my kinetic sculpture is on the right and below is the node network for the model of the frame of the kinetic sculpture.

AnimationNetwork.PNG

Expression Animation

On the right is a side view breakdown of the animation. The Cylinder rotates around the Cylinder pivot point causing an up and down motion.

Movement Breakdown

Movement Breakdown


I then created an add node with 3 points. Point 1 is where the pivot point of the grey bar is and Point 2 is the location where the line is tangent to the circle. Which is calculated within a wrangle node seen to the right. Then with the calculated angle  and position of Point 2 I inverse the height of Point3 for the other end of the bar. Then I applied the rotation that was calculated to the grey bar. More on how this is done can be found on Professor Deborah Fowler's website.

Find the location of the tagent point.

Find the location of the tagent point.


Lastly I need to setup of the cross shaped. Here I also used a wrangle node to calculate multiple angles using Pythagorean theorem and dot product. More on how this works can also be seen on Professor Deborah Fowler's website.

pointWrangle2.PNG

Reference

My project was based on Jennifer Townley's work Bussola.

Complex Scene: Perimeter Defence on Enceladus

Final Result

S18_V721_P1_ClaytonMitchel_PerimetetDefenceOnEnceladus_Final.jpg

Statistics

Render Time: 10 mins | Resolution: 1280x720 | Pixel Samples: 6x6 | Min/Max Rays: 1/9 | # of lights: 2


Concept

I based my concept heavily on various works of art painted by John Harris. He does a very good job of communicating scale in his paintings and that was something that I wanted to try to take on for myself.

The two main elements I used within my project were Height Fields and the Copy Stamp node. I first started by creating the terrain preset of Dunes. It starts with multiple height field patterns set to ramp and has the ramp remapping adjusted to look similar to a sand dune.

ramp.PNG

I then edited the initial settings of the preset dune to get to a look that was more like I wanted. Then I added my own height field pattern ramp to add a ridge that cross the image and merged it together through height field layer. I used the ridge for the basis of the placement of the towers.  I created the mountains in the background by creating two different height field patterns and combined them with the height field layer using difference. I then added more detail and positioned them into that place I wanted and merged it into the larger height field. Finally I finished it off with the erode node to get the final result.

This is the entirety of my Height Field Network.

This is the entirety of my Height Field Network.

Additionally I created a cop network to adjust the masks and layers created by the erode node to get the textures used in the final render.

Additionally I created a cop network to adjust the masks and layers created by the erode node to get the textures used in the final render.

Tower Copies Network

Tower Copies Network

I modeled three different tower like structures based on some of the original paintings by John Harris. Then I exported the final geometry and brought them into Substance Painter texture paint them. Once I had the final objects I created a curve that matched the ramp/ridge that I added to the height field. I re-sampled the curve to the desired number of points and then projected the curve on to the surface of the height field using a ray. Once I had that I used the projected curve to determine the location of the towers.

I also used the Copy Stamp to stamp a random rotation of roughly 40 degrees to make each towers not be perfectly placed along the lines. I also setup two separate copy stamps so that I could use the same curve but have them be spaced out based on a set parameter skipping every so many determined by said parameter.

Additionally I painted a small mask around some of the large towers on the height field and then scattered points on to it to create more smaller towers to help to add to the overall scale.

The scene is render with Houdini’s environment light, and Mantra Physically Based Renderer.

 


Reference Images: Paintings by John Harris

71redwtlTNL.jpg
330d9ca756118064c674208e5a677a89.jpg

Match to Live: Breakdown

Final Result


Object Modeling

I took a photo of the mug that I planned to use in the shot with with a high focal length of 165mm to have the least perspective possible. Then I brought the image into Maya and used it to to create a curve of the profile of the mug. I then revolved the curve to get the whole shape. Then I edited the surface to get a slightly more accurate shape and converted it to polygons. 

ModelingReference.png
mug2.PNG
mug.PNG

Photography

I initially took these 5 image sets but ran into problems with multiples of them not really having any color bounce on the ground surface. Additionally the mug wasn't large enough in frame. Because of this I took new photos and focused on color bounce.

CleanPlate720.jpg

Left was my final choice in image as it was large in screen and had an obvious color bounce of red in the mugs shadow. In addition to the clean plate there are 4 other images below that are used to help setup the camera and lighting.

Ball.jpg
Cube.jpg
Chrome.jpg
Twin.jpg

Camera Setup

CameraSetup2.PNG
CameraSetup1.PNG

I first set the focal length of the camera to the same as what I used to take the original picture. If you forget you can easily check by looking at properties of the image and then details. Then I used the Cube in order to find the right perspective and position of the camera in Maya.


Lighting Setup

After getting the camera setup you need to get the basics of the lighting setup. First thing I did was create a spotlight and use the cube and sphere (both matched to our pictures above) to create our key light. The cube and sphere are used to match the shadows in the picture to the shadows cast by your spot light.

Chrome_Cropped.jpg

Then I cropped the image with the chrome ball to the edges of our sphere. Then we can use this image as our dome light to work as a fill light for the scene. This pics up the general lighting of the environment as well as will help in the reflections of the object.

In order to set that up you need to create a sphere and then assign it a surface shader. In the Out Color of the surface shader we assign the cropped chrome ball. You then want to position the center of the stretched side of the texture in the middle of your camera.

Additionally, we want to use the original image as our ground plan in order to get the correct color and reflections onto the object.

We will want to create a new surface shader. In Out Color we want to right click file and choose to create as projection. then in the projection attributes change Proj Type to Perspective. Now under Camera Projection Attributes change the following. Link to Camera: Your Render Cam, Fit Type: Match Camera Resolution, Fit Fill: Fill.


Object Setup

TwinMug.PNG

Now that we have the lighiting and camera setup it should be easy to setup our object. I brought in my mug I modeled in the beginning and matched it into the position of the original and the twin mug that we are compositing in. The original mug will be used to make a mask layer later.


Render Passes

I used 7 different render layers. They are as follows: Beauty, Shadow Mask, Occlusion, Beauty Shadow, Original Mug Mask, Original Mug Reflection, Original Mug Reflection Mask.

Beauty.jpg

Beauty

This is just your mug as it is affected by all the light sources as well as the original mug.

Objects in layer: Original Mug, Twin Mug, Ground, Dome, Key Light

Primary Visibility On: Twin Mug

Primary Visibility Off: Ground, Dome, Original Mug

ShadowMask.jpg

Shadow Mask

For this layer we are creating the shadow mask. We want to create a aiShadowMatte for the ground.

Objects in layer: Twin Mug, Ground, Key Light

Primary Visibility On: Ground

Primary Visibility Off: Twin Mug

Beauty Shadow

This shadow is used to get some of the reelected color of the Twin mug into the shadow. Create a duplicate ground plane and set it to the color of the original ground surface.

Objects in layer: Dome, Ground Duplicate, Twin Mug, Key Light

Primary Visibility On: Ground Duplicate, Key Light

Primary Visibility Off: Twin Mug, Dome

Ambient Occlusion

We need to set the ground to an aiAmbientOcclusion material. In that material you need to adjust your spread and falloff as needed for your image. Also make the black color white and white color black as we are using this as a mask in the composite.

Objects in layer: Ground, Twin Mug

Primary Visibility On: Ground

Primary Visibility Off: Twin Mug

Mask.jpg

Original Mask

For this layer we want the original mug with a white surface shader so we can use this as a mask over the other layer.

Objects in layer: Original Mug

Primary Visibility On: Origianl Mug

Original Reflection

We need to assign the original mug to a new shader and set the IOR to 50 to create a mirror shader in order to get a reflection of the twin mug on the original mug.

Objects in layer: Ground, Twin Mug, Original Mug, Dome, Key Light

Primary Visibility On: Original Mug, Key light

Primary Visibility Off: Twin Mug, Ground, Dome,

Original Reflection Mask

We need to assign the twin mug a surface shader and set it to the color of the mug and set the original mug to the mirror shader again. this will show exclusivly where the twin mug shows up in the original mug.

Objects in layer: Original Mug, Twin Mug

Primary Visibility On: Original Mug

Primary Visibility Off: Twin Mug


Compositing

Now we have all of our render layers now we need to composite them all together to create the final image. Below is my composite tree I created in Nuke.


Final Result - Video

Everend: Designing the Experience

Level Design is a really important process in the development of a game. Without level design we would only have a pretty space to walk around in. It is much more than just drawing a map that looks cool. This isn’t solely the visual experience but is the way the map, puzzles, and visuals come together to create a cohesive picture. Level design is the process of creating the world that the player experiences. It takes a lot of work and iteration and as a team we have done much of that.

We start with discussing what game elements should be in each level. A list is created of all of the aspects that will make the level unique: the kinds of puzzles, what obstacles the player should come into contact with, as well as the visual aesthetic of each level. The visual aesthetic is extremely important. It tells us the basics of what we can and can’t do. For example, the water themed level should have a lot of puzzles that involve water and swimming, but should not include anything fire or lava related. This limits what we can do aesthetically and what we can do with puzzle design.

A very early example of going through each level and deciding the elements that will be included.

A very early example of going through each level and deciding the elements that will be included.

After the list of all of the elements that should be in each level is created, we begin drawing out maps. This allows us to think visually about the flow of the level design. Drawing out the maps helps us to begin designing the puzzles, thinking through the steps that make a puzzle fun but challenging. There needs to be a variety of puzzle difficulty. Some puzzles need to be difficult and others that the player can solve pretty easily. Additionally, we need to work on the flow and order of the game. Having important concepts introduced to the player in early levels is important so that he or she can successfully navigate more difficult levels later in the game. At the early stages there is no right or wrong design. Many of the best ideas come from the most random encounters.

Great ideas can come about at any time hence this napkin drawing.

Great ideas can come about at any time hence this napkin drawing.

Some early pencil level drawings of the water level.

Some early pencil level drawings of the water level.

Our team comes together after coming up with much of the level design to look at the positives and negatives of each other’s ideas. Working as a group really helps the overall decisions making. Everyone sees things differently which allows for a lot of unique and interesting discussions which lead to better design overall.

Updated water level design after team discussion.

Updated water level design after team discussion.

After we have a good idea for different puzzles we begin to build everything out in Unity. Gray boxing is the process of creating a level through the use of basic geometry. It lets us build prototypes of individual puzzles and whole levels that our team is able to play test. We want to make sure the gray box experience is what we want the actual experience to feel like. If a puzzle isn’t intuitive, fun, or working as intended, it will not work as fully functional play experience even if looks pretty. The gray box stage allows us to do lots of testing to refine our game before we start putting in tons of work to a level or area that might get cut from the final game.

At this point we go into each level and do a rough visual pass to make it feel similar to the rest of the game. The visual pass is the process of going through and replacing all of the gray boxes or in our case blue boxes with real assets that the art team has been working on.

water2.jpg
This is a great example of gray boxing and first pass on set dressing. You can see the drastic difference between each screenshot.

This is a great example of gray boxing and first pass on set dressing. You can see the drastic difference between each screenshot.

Top down view of the water level. Left: “Blue” Boxed. Right: First set dressing pass.

Top down view of the water level. Left: “Blue” Boxed. Right: First set dressing pass.

After the set dressing pass we push it on to our lighting guy to do an early lighting pass. The lighting pass is an early test of what the overall lighting of the game will look like. This allows the artist to have a better idea of what the space will look like while they do the final set dressing. Once the lighting pass is done we can go back into the space and really refine the visuals. We work to make each level feel unique but also have a cohesion across the game. This is when we introduce more of the individual models of specific pieces needed for each area. For us this includes owl statues, mushrooms, plants, and more.

Our most recent challenge for level design has been reworking our temple level. The temple level is a large temple created by the ancient owl civilization. It is supposed to be grand but dilapidated. It is introduced early in the game and is where you access other levels. It has been a challenge to design this place both visually and mechanically. Originally, this space was supposed to be its own completely contained level. Our project scope was too large for the amount of time we had and we had to make compromises. In order to keep the most important area of our game, without having to cut an entire space, we decided to do some massive changes to how temple level would work. Instead of being complete level it is now a hub space. This allows us to keep the space for use as the end level of the game without having to change much of the original design.

templenew2.jpg

Above is an early design for what the space was originally supposed to look like. Before the redesign you were supposed to do a small puzzle that returns you to an environment similar to each of the past levels you encountered and offers you a chance to further refine your understanding of the puzzle in each area. After completing all of them you would unlock the entrance to the temple.

everend_temple_1.jpg

Thanks for reading and I hoped you learned a lot about how we do our design. Also above is a sneak peak of what our temple hub might be looking like.

-Mitch Design Lead Strix Studio

Source: https://thatowldevblog.com/2016/03/08/designing-the-experience/

Everend: Crystal Cave

As you have seen with some of our art from previous blog posts, our game takes place in an elaborate cave system. One of the most important parts of building an environment is having good references. Luckily for us there is a wonderful cave close by. In order to get the best and most realistic depiction of what a cave may look like we went and visited Crystal Cave in Spring Valley, WI. We had all of our art team come to make sure they each person could experience it firsthand, and have good visual representation of the cave in their head. Along with the art team we had most of the design team and some of the programming team come as well to help them get an idea of what we are aiming for the future of the game.

This is a great example of the many areas that can be found within the cave.

This is a great example of the many areas that can be found within the cave.

Research is a really important part of game design. It helps to get a greater understanding of how these environments function in real life, as well as giving us visual references. Even if your environment doesn’t exist in reality, it’s still important to look at what does. This helps ground your creation in reality. Our cave isn’t photorealistic, but starting with real geology and cave structures was important to make sure we abstracted it in a way that was easy to believe.

An example of a really nice texture resource.

An example of a really nice texture resource.

This is an example of a paint over that was done for one of the small areas.

This is an example of a paint over that was done for one of the small areas.

While at Crystal Cave we took numerous reference photos both to use as examples of how to build our environments but also as texture references. The cave itself is quite large with 3 different levels of elevation and is very winding, switching from very tight spaces to larger areas that are roughly 600 sq feet. The deepest part of the cave is roughly 75 feet underground. This is actually not that large, especially in comparison to the gigantic Han Son Doong cave system, which was an original inspiration.

There is a lot of variety in the looks of the rocks.

There is a lot of variety in the looks of the rocks.

Another example of variety in rocks.

Another example of variety in rocks.

We made sure to take lots of photos from the the perspective of an owl, trying to get low to the ground instead of from the height of a human. There are ton of wonderful small little spaces within the cave, each with uniquely formed structures. The most notable feature is that these tight spaces are filled with lots of mini stalactites and stalagmites.

There are tons of areas just like this spread through out the cave.

There are tons of areas just like this spread through out the cave.

While there we were able to get some really great panoramic pictures in the cave, as well as full HDR images. These images may eventually be able to use for lighting in the game. We would be using these HDR image as skyboxes. These skyboxes are large images that use the color information to light the scene as if it was the actually sky/ceiling.

An example of a Skybox to be used in game, this is a full 360 view of the wedding chamber in Crystal Cave.

An example of a Skybox to be used in game, this is a full 360 view of the wedding chamber in Crystal Cave.

While there we also ran into many small bats, as it’s getting closer to winter and they are coming to the cave to hibernate. We have bats in the game too, so it was helpful to be able to observe their behavior (even if they were fairly still most of the time).

Its very tiny but you can just barely see the bat in the center.

Its very tiny but you can just barely see the bat in the center.

Our last task was to do some sound recording to absorb the feel of the cave. There is a real good sense of ambiance which we will use to help the creation of future music.

Hue holding the mic for recording and trying to stay absolutely still.

Hue holding the mic for recording and trying to stay absolutely still.

Phoenix and Megan holding the cords to keep them off the wet floor and also trying to be super quiet.

Phoenix and Megan holding the cords to keep them off the wet floor and also trying to be super quiet.

Overall Crystal Cave was the a really great experience and we got lots of very useful references that we will be using heavily in future development. I also want to thank Crystal Cave for giving us time in the cave, If you want to see more from Crystal Cave you can check them out at acoolcave.com 

-Mitch, Strix Studio Design Lead