Interacting with Objects
Starting week 20, I thought it would be a good idea to start on the blueprints for interacting with objects that I haven't done yet. Also since there is still some small amount of time before deadline, the sooner I create this, the more time I have to de-bug or search for help.
Within my scene I have three objects that I want to be interactive. The samovar, the radio and finally the map. The map is quite large and can be understood from a distance, however with the radio, there are a lot of small details so being able to pick these objects up and inspect them gives more reason as to why they should have large texture sheets and high tri budget. I've already talked about this topic in particular on my 17th Week entry.
I aim to create something similar to Resident Evil 7 or Skyrim, where objects can have a description, and can be rotated and zoomed in.
There are quite a few tutorials on youtube on how to create this. I found watching multiple tutorials and making a sort of frankenstein blueprint from those tutorials and my own ideas.
The tutorials that I combined to make my own are from Matt Parkin's Video for the general blueprint. Titanic Games's Video for including depth of field blur. And Ryan Laley's Video on adding floating text. I also would watch short videos or reading up on the unreal engine documentation to further understand smaller aspects of the blueprint.
First thing to do on the list, is create the UI that appears when an object is picked up. This is a fairly simple process.
I found a font that is free for personal use. Which can be found here. This is just to add a bit of flavour to the UI and make it a little less dull. The type writing font fits in well with the old apocalypse aesthetic. But isn't too distracting.
To make the text easier to read, I added some black gradient images that I created in Photoshop. Which looks better than just a solid black square.
To make sure that the UI can be referenced within the blueprint it's important that the Is Variable is checked.
Now lets have a quick look into the blueprint. This is within the first person character blueprint, and I've circled everything that I have added.
From pressing the input action to inspect (which is the e key) goes into a flip flop. The flip flop switches between two states, A which is the graph to inspect and B which does not inspect (returning from inspection). From pressing it goes into a line trace by channel, which is shooting a beam out from the first person character by a certain value that I've made a variable called trace length, but it can be a static value of any unit desired.
This line trace checks if it has hit an object, and I have specified if it hits the static mesh in the inspectable object blueprint.
From here we cast to the inspectable object blueprint which then sets the the whole thing in motion.
Now we need to get a few things such as the object's rotation and location. From that I also set a variable called Is inspecting? If Is Inspecting is true then disable movement for the character. If its false then it continues the normal movement mode.
From disabling the movement we then go into a Timeline node which allows for a smooth transition to the inspection mode. This is also where I can state how long it takes for the object to move from its original position to in front of the character.
From the Timeline node, I get the object location, and the inspection location. (Where the object is originally, and where the object will be when inspecting) The location is set as a collision within the first person character view port. This collision is then used as a variable so that it can be properly referenced within the blueprint. The Timeline then basically lerps the two different locations, making it appear that the object moves to a different location.
Now the final part of this section of the blue print is the post processing settings. To make the background blury during inspecting, get a make post processing settings node. I then expose the paramaters that I want to change. Whats good to keep in mind that this is a new post processor and does not affect the original. Using the Timeline as the alpha to lerp the post processing settings, we can now get the blur coming in at the same rate as the object moves.
Using the variable I created before called Trace Length, which is as the name implies, the length of the trace that gets shout out. We use that to lerp a distance infront of the character that it is the focal region. I put it as 150 units away from the camera, so the object won't get cut off with blur.
I also set a false state that makes it so when the inspection is finished the post process settings get set back to its original settings. Which disables the blur.
Now here is the zooming feature. I started out trying all sorts of things such as creating a new function etc, but anything I tried to make didn't seem to work at all. I knew the separate blocks that would be needed to make this zoom in, but I couldn't get it to work together. I reached out to one of my peers Sophie to get some technical help. From talking with her and showing what I have, we came up with a solution.
Using the mouse wheel axis we can get a constant value, by multiplying this we can then control how many steps/units each mouse scroll has. One scroll turns into 5 units. From here we multiply it with the forward vector of the camera.
This is then added with the object location and is set as the new object location. Additionally this gets added into the above section to update the object location, so that the animation can play back from the new location rather going from the current location, to the inspection location to the original blueprint location. (2 steps instead of 3)
This zoom in feature would not have been possible if it weren't for the help of Sophie. And to that I give my thanks.
Now we need to display the Inspection Interface that I created (The UI widget). On event begin play we create the Inspection Widget from the player controller. From there I can set the item's title and the items description. The state is set as if we are indeed in the inspecting state then this hud will be displayed. And if we are not inspecting then it will remove the widget.
I also wanted to add an option to hide the item text and hud elements, so that the player can fully explore the object without any distractions. I created another button mapping and called it Hide Text which is set to the F key.
When pressed it sets the visibility to hidden and when its released it becomes visible. It might be annoying to have to hold down the key, however if the player forgets what key they pressed to hide the hud, they might not know that pressing the key again will make it visible. If you want to go between two different states and make a toggle instead, then use a flip flop from the input action.
Now to make the object rotatable, we go to the mouse input section that was already within the blueprint. I add two different functions that control the roll and yaw of the rotation. If we are in the inspecting state then the mouse input will be used for rotation, and when we are not inspecting it is set back to normal.
Here is what the function looks like. Its practically the same for both functions with just a change into either the roll or yaw.
One small part that I wanted to change was the visibility of the gun and first person character. I don't really have any replacement so I thought it would be aesthetically better if the default gun and character model is disabled, so that it doesn't distract or take away from the environment.
Originally I tried deleting certain parts however this messed up my whole blueprint. I wasn't really able to recover the ue4 file, and I had to merge all of my assets into an older version of the file. I was really panicking when this happened, and this set me back by a whole day. I had to re-create the blue print from the beginning again just to get it working.
On the second round instead of deleting anything I just set the visibility to hidden and un-linked the spawn projectile and gun parts of the blue print. Nothing is removed and can be undone easily. I also made sure to have newer back ups so I don't have to go to drastic measures again.
Now I want to show the features in use. From pulling out the blue print, I'm able to change the item description and the title. This allows me to add flavour text or narrative details that is easier to convey in words.
From the blueprint I can go to the static mesh in the default scene root, and change the object. This allows me to have any object in the scene be an intractable object, I also set the light maps of the object to be forced as the static version instead of dynamic, this is because the dynamic doesn't properly fit into the environment's static lighting. If I had been using dynamic lights, then I would have kept the light maps to be dynamic.
If you find that the inspection is not working you need to make sure that the object has proper collision for this to work. The line trace will only set the inspection state if it has actually hit the static mesh, if the mesh does not have collisions then it cannot get hit.
Here is what it looks like so far on another object.
One extra piece that I added to this blue print is a question mark hovering above the object. This is to show that the object is intractable. I tried looking into having the object be highlighted, but this would mean having to do large changes to my master material. I opted for this question mark instead as its as effective and much more cost efficient.
Within the blueprint add a text render component. From there we can set the text, I put it as a simple ? as anything more would be too much.
Then going into the event graph of the blue print, we set the distance that the text is visible and also change the rotation depending on the player character's location. This is so that the question mark is always facing the character.
I also set the distance of the visibility to be more than 200 units. This is so that the question mark is viewable from a distance, but as the player gets closer and picks up the object, the question mark dispersal. Since it would be fairly annoying for a floating question mark to be hovering above the object whilst inspecting.
Finally here is a gif showing off what the inspection looks like. I'm actually quite proud of the results. And doesn't look half bad!
After working on the blueprint I felt like it was safe to say that the dynamic element of my FMP has been checked off. I had finished the blueprint halfway into week 20, from that point I started a mad dash to make sure that everything in the scene is textured.
There is quite a lot of assets that I made but I will talk about a select few. I also should mention what I had to take out. To make sure that I can meet the final deadline, I would have to make some cuts. I found that I wouldn't have time to make all the fabric related objects in the concept, the cobweb and the floor clutter and any extra clutter.
I also cut out creating a sleeping bag and backpack, as they are both essentially hero assets and would require too much time. Additionally I wouldn't have time to make any decals that could add extra details, and also edge damage decals.
It should also be understandable that none of the stretch goals will be achievable.
However after saying all this, it does not mean that I can't carry on working on this after the hand in. I plan to continue this project until completion, I might as well complete something that I started.
Production
Going back to the mattress that I attempted before. I thought that a quicker and easier way to make the mattress is to just model a base high poly in 3dsmax and then bring it into ZBrush to sculpt on. This result may not be as detailed or accurate, but it works for what I want to create. I also have to consider how important this asset is, since this is literally just a background element it won't have too much attention.
Here is what the high poly looks like, I created the hard ring around the edge by selecting the faces of the highpoly, detaching them and using the edge selection from the faces to create a shape which is a spline.
Since I wanted to model this fully, I thought going for a simple shape would make the process quicker. So here is the references I used that help me inform my decision.
Here is what the asset looks like within painter. I added a very simple dirt and painted moss on top. There's also quite a few layers of alternate colours to add a sense of variety in the texture.
Next I want to talk about the briefcase. I wanted something really old, reminiscent of the soviet era that this location would have been before the apocalypse.
The high poly was a fairly quick and simple process. A lot of the objects descend from simple cubes and splines. I made sure to seperate the meshes by distance so that during the bake there wouldn't be any overlap in the AO. I also used baking by mesh name as well just to make sure.
These little screws were the cause of a crash to my software. It lead to me losing a couple hours of work. I made sure to try and save as often as possible. But I keep forgetting that the auto saves do not work for me. I have no idea as to why this is.
And here is what the low poly looks like! I have a piece of advice for anyone creating low poly meshes. Usually in the process you would create a high poly first, and then delete all the support loops to get the low poly. However there is an extra step that needs to be made, which is making sure that the lowpoly sits correctly on the highpoly. To make sure of a good bake this can require some more support loops.
But a useful tool is the conform brush in 3ds Max. Using the high poly as the target, the low poly will be properly aligned with the high poly. Just because you've removed the high poly's support loops, doesn't mean the low poly is finished.
And instead of showing how it looks in Painter, I thought it would be better to show what it looks like within unreal. It can be difficult to see all the details because of the shadows. I made sure to have the material definitions between the leather and metal be proper. Also from looking at the reference, the majority of the metal on the front of the suit case is either covered in dirt or has rusted from old age.
The boxes within the scene were first made roughly in 3ds Max, and then brought into ZBrush to be crumpled and pinched. For the majority of the creases I would use the dam standard brush and the standard brush with a custom alpha I created, this alpha makes the standard brush similar to the dam standard but just a larger and softer version.
I had a good amount of references to help inform the sculpting process. Especially how the box crumples and gets the micro creases. I should also probably mention that I sourced all of my images from google images.
Since the topology has been deformed quite drastically, I had to resort to re-topping ontop of them similar to how a character artist would retop. It's a fairly slow process of extruding edges and one by one creating the whole model. I did this manually because I know that I would get the best results doing so, I have tested using ZRemesher and ProOptimise in the past with the Table Cloth, but I ended up just retopping anyway. You can read about that in Week's 15-16 Entry.
I should also mention that I was unable to re-top some of the corners of the boxes, as there was a lot of clipping and weird topology. Because of this I opted for this object to be a two sided translucent material, which is similar to realistic paper and cardboard.
And here is what it looks like in engine. The boxes look really bare and clean, but this is because I don't have time to create some mold and water damage decals. I would have also been able to put on labels and prints to the sides of the cardboard to add more variety. But again, I don't have the time to do this unfortunately.
I wanted to get working on the corner adding the decorative pieces that adds a bit more visual interest to the scene that isn't so repetitive. I searched for Bronze Russian Orthodox Icons on google and was able to find three good references. I believe the depictions are of St Mary and Baby Christ on the left, St Mary and Jesus and John the baptist in the middle, and finally St George on the right. Again all these images were sourced from Google Images.
Since these bronze sculptures are quite simple I thought it would also be best to keep my own sculptures simple. Since I'll be using this high poly as height information for curvature and ambient occlusion, I don't need to create a perfect copy. Also these are quite small in the scene which means I shouldn't spend too much time on them.
When texturing I made sure to add a lot of variation in colour. I also made the majority of the texture to be quite rough. I thought that if left alone for a long time they would slowly lose their polish, and with the addition of patina there would be a change of colour and roughness. Although I made sure that the parts that stick out the most from the surface, would have a slight shininess due to any sort of handling these would have.
And finally here is what it looks like within the game, its fairly dark at the moment, but once the lighting quality has changed to production it should lighten this corner up a bit.
Another detail I want to quickly go over is using textures made in Photoshop in Painter. With both my table cloth and paintings in the scene, wanted to give a floral pattern. This is achievable with substance designer, however the time it takes to build up each shape and set their positions is too long. Doing this in Photoshop instead leads to a more static result, but was far quicker and easier to do. I would look at my references of table cloth designs and draw my own versions.
In Photoshop I would make sure that the drawing tiles properly, so that there aren't any clipping issues. Also I created the designs as grey scale, since I can add and control the distribution of colour using levels within painter. Below is one of the designs I created as an example.
Bringing it into Substance Painter, I would first start with a base layer that is black. The levels are controlled to be the darkest value before. Making it so the whole outline of the design is black.
I then add a green colour on top, and because of the black base it appears as if the design is outlined in black. As you can see highlighted, each part of the design that has a different gray scale value is visible in the spikes of the levels.
I then add more colour variation using a random grunge map in painter, using the grunge map I can control where the new colour is distributed.
And finally is the highlights, the levels are limited to the brightest part of the design so that it only affects the lighter grey scale values.
I repeated this process for the rest of the texturing of the table cloth. I also re-used this vine texture in two of my paintings.
For the Virgin Mary painting I used the vines as an accent detail. Not being the focus but filling in otherwise empty space. With a lot of the Russian Orthodox paintings, there are a lot of decorative floral accents either in the borders or surrounding the subject. Additionally I edited the image a fair bit to change it for a different purpose. Firstly I painted a metal map for all of the gold accents. A lot of old traditional paintings would use gold or other expensive paints for important religious symbols. I also added some aging to the painting, with areas that have become withered and bleached from extended exposure.
Below are the images that I either used in texturing or as reference for creating the textures. I sourced all of these images from google images.
For the third painting and the photo's hanging on the wall, I used my own photographs that I took from years ago. With most things, If I am able to take my own photographs and use them, I will make sure I use them instead.
One of the last few things that I added to my scene was dust particles. I wanted to have something in my scene that wasn't static, and thankful these dust particles full filled that.
These particles are limited to a very small area.
In real life, you will only see dust particles when there are light rays coming through a window that highlights them. And so in my scene I tried to replicate that. I couldn't justify having these particles everywhere, since the large room has a large opening to the sky and having great ventilation.
However, the small corridor is a much more enclosed space, which makes it an area where dust is much more likely to propagate. Another reason as to why I limited the location of the dust, is that if the dust particles propagated the whole corridor it would lead to the player getting distracted.
Presentation
At this point in the project (halfway through week 21) I've finished texturing all of the assets within the scene. And now I can focus on presentation. Since I have worked on lighting a while ago, at that time I started preparing my camera positions. Since most of the shot locations were figured out beforehand, I didn't need a lot of time to think about what I needed to do.
After baking the lighting on production quality, I was able to freely take my high quality screenshots.
I also worked on creating my asset zoo that showcases and presents the assets of the scene in a thorough process. I grouped the assets together with specific attributes. Assets that have their own unique textures are one group. Another group of assets are ones that use tiling textures and have weighted vertex normals. Etc etc. I also grouped them depending on size as well, since it would be difficult to see a small drinking glass next to a large tree. For anyone who is exploring this level, I added text next to these grouping so that its clear and understandable of what the assets exactly are.
Below are the images of the asset zoo.
Apart from the static meshes, I prepared tables presenting additional parts of the playable level such as the blue prints, the particle effects and sound cues.
The two different sound cues were sourced from a website called freesound which is a website that people can share royalty free sounds or music.
The first sound is to add ambiance into the scene and is a recording of birds chirping. I wanted to give a sense of there is more outside of the house, and that its within a living world. You can hear/find the sound by clicking on this link.
The second sound is a radio static noise. This sound is positioned to be in front of the radio, to give the player a sense of it being functional. However since there is a telephone connected to the radio, the static noise would be fairly quiet compared to a speaker. You can hear/find the sound by clicking on this link.
When the executable of the game is played there is a short video file that plays before starting. This is essentially a load screen, and displays the controls of the game. Originally I had set the controls as a hud element which would display when the player character walks into the collision. However I had an issue where I couldn't have the player already in the collision to display the hud immediately. And it also felt really clunky to have the controls display when you walk to a certain part of the level, I feel like it takes away from the immersion.
So having this load screen allowed me to completely circumvent that issue. I created all the elements of the image within Photoshop, and it's a really simple design, but I feel like it gets the job done.
One last thing I want to touch on is creating the fly through video. The whole process within UE4 was quite simple and easy. This isn't my first time creating a fly through so it didn't take long to set up the cameras and get the shots.
However I had a problem where I couldn't render the movie out at a good quality. There would also be the problem of the movie having a stuttering effect where the video would freeze lag on multiple frames and then play again. I've looked for any solution to my problem, I even tried rendering it out as an image sequence, but even that didn't solve the issue.
The problem that I had was a hardware one. My computer is about more than 6 years old, and it had mid level specs when I bought it. Its inevitable that it would become too old to handle large tasks. However this hadn't been an issue for the majority of my three years at university. Since I had been able to use the university's computers instead. Because I don't have access to a good computer, it makes certain tasks such as rendering or having large software files (such as in painter) become an impossible thing to do. And it makes me much more aware of how old this computer is, when I'm not even able to render out a 30 second compressed 720p quality video, that doesn't have issues.
The only reason that I'm able to have a 1080p video, is because a friend of mine, Litha, offered to render the movie out on her computer. Thanks to her I was able to have a decent quality video to edit.
In my second year of university, I had listened to a song called "Intro" on the soundtrack Minecraft Volume Beta. When I listened to it I could imagine using this for an important video, and I wanted to use this as part of my fly through. The song is special to me, and I hope that it helps set a good mood for the 30 second video.
Conclusion
I feel that a conclusion is probably the best way to end this blog post. This project took a long time to get to this point. Its somewhat unreal thinking that this had all started back in January.
I want to talk about what has gone well and what looks good first. I feel that a lot of my materials look great, and have been properly showcased by a good lighting pass. I feel that the materials look crisp and detailed close up, and warm and not as noticeably repeating from far away. This comes from spending a decent amount of time creating materials in Substance Designer.
I also really like how my foliage looks, the detail that can be seen from close up is really impeccable. I sometimes forget that I actually made them, and they could probably stand up well by being presented separate. They also look great next to the warmer colours of the wood and clay materials.
I feel that the composition serves its purpose for the scene, and effectively gets across where the player area is whilst also directing the player where to go. This is supported strongly by the lighting.
I feel that the dark corridor does serve a good purpose of separating the player from the large room, and that the experience of the whole room opening up from the small claustrophobic corridor gives a big impact when playing the level.
I also think that the materials and assets in the scene don't look too repetitive, it could just be that there aren't enough objects cluttering the scene. But each asset looks unique and different in their own right.
And lastly I'm really happy with how the object inspection turned out. I had been really scared to do blueprint work in this project, as I feel like I still don't have a great understanding of blue prints. But the object inspection looks and feels pretty good. There are some minor problems I have with it, but I don't have a good enough understanding of blueprints to be able to fix it, and I feel like its alright with how it is.
Now I want to go over some of the things that I would have done If I had more time.
Firstly, I would have created all of the fabric assets that were apparent in the concept. I didn't have a lot of time to simulate a bunch of different fabric patterns in Marvelous Designer, I think the only fabric asset I have in the scene is the table cloth.
Secondly, I would have spent more time on the floor. The floor is just a simple vertex painting between three different textures with more moss appearing on each successive texture. But in the concept there's all sorts of branches, rocks, puddles and more. Again I couldn't create all those additional things due to time constraints.
Third, I would have created a lot of decals to fill the scene with extra details. Decals such as edge damage for the mid poly assts, or scratches/splinters in the wood logs. The cardboard boxes would have also used a lot decals to be more believable, such as mold or water damage.
Fourth, I would have made all the foliage within the scene sway in the wind to make it more alive.
And I think the final thing I would have liked to have done, are all my stretch goals. Creating a small area outside of the cabin with trees and bushes, would have bumped up the quality of the scene even more.
Looking at this project realistically, I think I set too high of a goal in the beginning of the project. I feel as though it might have been better to condense the environment to an even smaller area than what was in the concept. I feel like its easy to just say "oh its just a room and a corridor", but the amount of level of detail the concept has is way too much. At least too much for this time frame. I feel like at this point of the project I'm really close to where I want it to be, but its just not there yet. However I do think that it is still a complete environment. Everything within it is textured, there are dynamic elements such as dust, and some of the objects are intractable. From the small amount of things within the scene I believe I have been able to convey the narrative as well.
However just because I'm handing this project in, doesn't mean that I can't stop working on this for my own portfolio afterwards. I plan to continue this project, and also continue this blog even after I finish university. I hope that this piece can eventually become the work that helps me get a job within the games industry.
Thank you for reading. These three years have been a journey, and all of the people I have met and become friends with on the way have become an important part of my experience.
Here's to a new chapter!
No comments:
Post a Comment