Campscapade
Role: Level Design and Cinematics
Location: University of South Wales
Team Size: 4
Degree: Masters
Duration: 5 months
​
Link to the Game: Campscapade
Project Synopsis​
​
Camscapade is going to be a stylized and cutesy game. Having only experience with realistic levels and the level of detail, it takes to build something like that was a challenge. But this time, since it is stylized and takes place in a summer camp that has casual stealth and various points of interest within a single enclosed space which is the campground, I think it would be a little challenging to design a space that is both restricted and feels open space at the same time.
​
The summer camp takes place deep in a forest and is fun to explore and gather data on. Through this project, I am trying to learn the following:
​
-
Make sure that the original idea of campscapade - the humour and the story are portrayed well enough for players to enjoy.
-
I need to find a way to keep the level restrictive but, at the same time, make it feel exploratory.
Background
You play as Rusty the Fox, causing absolute mayhem wherever possible. But beware of the counsellors roaming the grounds and will catch you, especially beware of the camp's leading counsellor Rory who will hound you if you cause too much chaos.
Paper Prototyping and white boxing
I started with designing a map and creating points of interest. I was heavily inspired by Fear Street Part 2, which takes place in a summer camp with quite a few places to explore. As you can see, this was the initial idea - the design was quite big, and I was advised to make the level slightly smaller. I also went through several iterations of the level where my team and I were constantly playtesting and trying to find out what we could add or remove from the several iterations of the level. Due to the module requirements, we were instructed to work on one level and perfect it as much as possible rather than make multiple levels.
Game Structure
Figure 1: The first image is about how the game would start and how the first escape begins.
Rusty is accompanied by his new friend Shelley the Turtle. The items and the tricks he can learn from the different campers and how players can put it to practical use.
The different campers and how players can put it to practical use.
Figure 2: This part of the image shows the map design for one of the quests we planned to have. I will explain the plan and why we did not proceed with it later in the slides.
Figure 3: This pyramid structure was then designed to prioritise the different skills the player learns and how to use them when the situation approaches consecutively. This is also where the map design changed again, and the stage and pavilion were added.
Figure 4: This was another plan on how the mechanics would play out in the level and how the training level would be planned completely differently. We also talked about how interactions would work and how dialogues would play out if dialogues were there. These structures consumed some time of the week as I was busy preparing the level according to these changes, and then, as a team, we would conclude that the structure did not feel right.
Level Design
For several weeks I created different versions of the same level as I iterated or integrated things into the level. As you can see below, I went through many iterations and tried to find the perfect balance for this level.
​
As you can see, this was the initial concept map of the level I wanted. However, after creating the white boxing, I was advised to make it smaller and more compact. So I pushed forward with the idea and tried to make different versions and activities in one map.
​
The aim of the game was quite simple. Rusty is a mischievous little introverted fox sent to summer camp to make friends; instead, he causes havoc and mayhem and tries to get sent home. Looking at this from a gameplay and level design aspect, I had to create a fun and engaging experience within the enclosed level for players to cause enough mayhem. The team and I devised various ideas for causing mischief as I implemented the enemy AI and the quest-required items in the level.
​
Since I created many versions of the level, I was stumped by a question,” How would players even know what to do? So I decided to make a training level to lay out the mechanics sequentially. By doing so, I was able to work out and find out that I needed an ingenious way to tell the players what they needed to do when they were on the level. I was inspired heavily by Fear Street 2, which takes place in a summer camp, and by watching that movie, I was able to formulate a plan and see what important buildings I needed to have to get started and work my way from there.
A lot of the areas were made up as well, like the little farming area and the little church, which are inspired by Christian Church Camps that I have seen from a vlog which I will link below:
​
Water sources were very important as most camps had them so kids could learn about water-related activities like swimming, fishing, canoeing, etc., so having water was a must-have. As seen from the video, I also placed various activity points that players could learn and possibly meet new campers and learn about new tricks and ways of escaping camps or could be offered a bunch of quests. Some of the activities I placed were the following:
​
1. Archery Range
2. Water body for various activities like swimming, fishing, canoeing etc.
3. A greenhouse area for learning how to grow fruits and vegetables and how to forage.
4. A zip-lining trail by the river.
​
When I started building the level, I wanted Rusty’s model in the engine to check some of the measurements compared to the Unreal engine mannequin as it is an adult-size model compared to Rusty, who is a child and therefore, everything around him would be massive and I wanted to see if it was right. I quickly texted Jess, who had the base model ready, uploaded it to Mixamo, and did the animation blueprints for it to move around.
Level Design References
For several weeks I created different versions of the same level as I iterated or integrated things into the level. As you can see below, I went through many iterations and tried to find the perfect balance for this level.
​
As you can see, this was the initial concept map of the level I wanted. However, after creating the white boxing, I was advised to make it smaller and more compact. So I pushed forward with the idea and tried to make different versions and activities in one map.
Procedural Foliage
​
Since the summer camp is taking place in the forest, I wanted the land to be filled with foliage of different flowers and plants. I was inspired by the Legend of Zelda and how famous they are for optimizing their foliage. I was watching some videos explaining how developers optimize the grass foliage and make it so that there is smooth movement on the screen.
Links to some of the videos I watched:
1. How this game renders millions of blades of grass
2.How grass works in Ghost of Tsushima
3.Advanced Graphics Summit: Procedural Grass in 'Ghost of Tsushima’
​
I learned that there are two important things that highly optimize the grass optimization and those are Distance Culling and Frustum Culling.
Culling refers to a technique that disqualifies any sort of object that does not make it to the final image that player sees on screen. Using this information, I wanted to create optimized foliage that only renders when the player is going to look at it.
​
Since the summer camp is taking place in the forest, I wanted the land to be filled with foliage of different flowers and plants. I was inspired by the Legend of Zelda and how famous they are for optimizing their foliage. I was watching some videos explaining how developers optimize the grass foliage and make it so that there is smooth movement on the screen.
(Eric Wohllaib, n.d)
Since the summer camp is in the forest, I wanted the land to be filled with foliage of different flowers and plants. I was inspired by the Legend of Zelda and how famous they are for optimizing their foliage. I was watching some videos explaining how developers optimize the grass foliage and make it so that there is smooth movement on the screen.
After learning about the shadow culling, I then went back to my foliage settings and reduced the distance the foliage can spawn in.I tried multiple different ways to optimize the FPS Spikes like switching off shadows, stop wind physics on some of the trees and grass, increasing LOD’s etc.
​
Links to some of the videos I watched:
1. How this game renders millions of blades of grass
2.How grass works in Ghost of Tsushima
3.Advanced Graphics Summit: Procedural Grass in 'Ghost of Tsushima’
I learned that two important things highly optimize grass optimization, and those are Distance Culling and Frustum Culling.
Culling refers to a technique that disqualifies any object that does not make it to the final image that player sees on screen. Using this information, I wanted to create optimized foliage that only renders when the player is going to look at it.
I think for this project since Culling is going to be heavily important it is crucial for me to understand the terms and the processes for how to optimize foliage and make sure I can optimize it greatly for this game to operate on lower rigs.
Graphics Programmer Eric Wohllaib- Procedural Grass in 'Ghost of Tsushima’
They rendered their fields by generating individual blades of grass on the GPU that could each have their own procedural appearance and animation. That is how Ghost of Tsushima rendered acres on acres of grass within reasonable memory.
Changing the max cull distance to 8000 gives it an appearance like this
Frustum Culling can be defined as “objects of the scene are tested for intersection with the view frustum pyramid. This test can be conservative which means that it is acceptable to have some objects being reported visible even if they are not.”
Distance Culling on the other hand gives you the flexibility of how far you can view the foliage from where the player stands.
Other additional reading material I examined:
​
1.Use Fix and optimize foliage in unreal
2.how grass is made in video games
3.Cull Distance Volume UE Documentation
​
I used these documents to get a better understanding as well as observe how other games have optimized foliage in their games.
Save hours! Procedural Foliage in Unreal Engine 5 - Photoreal Landscape Tutorial
The grass in my level went through several iterations as well and finally, since I did not want to keep perfecting how the grass was being procedurally generated, I decided to use this pack’s grass into my level which was optimized for most part. I added some quick changes to the grass, and it was ready to be used in the game.
Level Design References
For several weeks I created different versions of the same level as I iterated or integrated things into the level. As you can see below, I went through many iterations and tried to find the perfect balance for this level.
​
As you can see, this was the initial concept map of the level I wanted. However, after creating the white boxing, I was advised to make it smaller and more compact. So I pushed forward with the idea and tried to make different versions and activities in one map.
​
Another type of reference I investigated the different type of wood cabins situated in the summer camps. They still have them today as a lot of vlogs done on YouTube by people now still use the old structures that are in place in these summer camps .
An observation I made while recording these reference images is that when it comes to cabins and mess halls, kids are always together in small enclosed spaces. Naturally when you are in small spaces with a lot of people you are bound to make conversations with them which forces them to bond and share stories and adventures with one another.
Living in closed quarters also forces people to look out and care for one another. I have gathered this information based off my teammates, friends and families' stories which helped me analyse the true reasoning behind these forced close quarters.
​
On the other hand, it is not necessary that bonds and friendships will always be formed but instead, a lot of mishaps and accidents could occur as well. Perhaps naughty kids being up to no good can cause distress and distrust among the group.
This is why, making Rusty a naughty character is important as there are a lot of opportunities that can occur for his character to do and be punished and try to be sent home.
Some YouTube Summer Camp References-
1.https://youtu.be/X7Q4M1kgE-Q
2.https://youtu.be/XiIvOjG06U8
​
Watching these Summer Camp videos gave me a lot of ideas about the design of the camps, their bunk beds, the halls and activities they have and overall, what makes summer camp so fun and exciting for kids.
This is the mess hall I designed for one of the quests we were going to originally have: https://youtu.be/EGgokPgrUU0
Optimization- Lights, Foliage, Shadows Issues and Fixes
​
I had to optimize the GPU because the game performance was dropping; I could see which game element impacted the most by identifying the issue through the command console. After taking note to see which element is taking more resources, I did the following to increase performance:
​
-
I went on to the foliage and other meshes with a high vertice count. I made additional LODs to an object, so the further the player is away, the more it will reduce the overall vertices of the model rendering a lower-quality mesh but more performance gain.
-
I hand-painted the foliage onto the surface of the landscape, but since many foliage meshes cast shadows, each model was straining the performance of each shadow generated. To combat this issue, I decided to remove all shadows from the foliage because this was the biggest factor of FPS drop, so afterwards, when I tested the game again, it ran smoothly.
Removing Wind Physics
​
The foliage had wind physics and could move in a certain direction from where the wind pointer was facing; I removed the ability from the wind physics to communicate to the foliage, thus preventing movement overall and increasing performance.
Updating Engine
​
Using the latest technology of Unreal Engine Nanite, we decided to implement it within our game as it can render thousands of vertices on screen. Still, there was an issue using an older engine version as Nanite was not functioning with that version. Updating the engine and testing the FPS again made the performance smoother and better.
​
I ran into some issues regarding some FPS drops as you can see on the screenshots I had taken. I looked into the problem and realized that it was the foliage and a lot of different plants foliage spawning in the scene that makes the FPS drop like crazy. So I looked it up and found some great solutions on UE5 forum pages: UE5 Forum- https://forums.unrealengine.com/t/ue5-scalability-settings/235643/4
Errors that appeared after building lights and solutions ​
This happened due to many layers being painted on top of each other, and to resolve this issue, this is the solution I got: Unreal Engine 5 - Virtual Shadow Map Performance (Explained)
Then I ran into my usual lighting not being built error, so to fi that I looked and used this too, but it did not work that well: FIX Unbuilt Object Warning Message in UNREAL ENGINE – DumpUnbuiltLightInteractions
This happened due to many layers being painted on top of each other, and to resolve this issue, this is the solution I got: Unreal Engine 5 - Virtual Shadow Map Performance (Explained)
Then I ran into my usual lighting not being built error, so to fi that I looked and used this too, but it did not work that well: FIX Unbuilt Object Warning Message in UNREAL ENGINE – DumpUnbuiltLightInteractions
​
​
​
Comic Style Cinematics
​
For the game, we wanted some opening cinematics to inform the player of what was happening. So when we were at a team meeting one day, and Jessica (the artist) was showing us a rough concept art of one of her character sketches, I noticed her annotation handwriting on the side, and that gave me the idea to ask her to help me with the cinematics using her childish handwriting and drawings which was perfect as it resembles a little kid’s handwriting. It also reminded me of Wimpy Kid, a Series I used to read that had drawings and sketches that made the book even funnier. So, Jess and I decided to jump on a call later and draw out the storyboard. We wanted Rusty to be a character that did not want to be at summer camp but at the same time we wanted him to be able charm his way out of trouble or just in general be a very sly fox as is his nature.
​
​
Some notable characters like I depicted in the slide before were Louise Belcher from Bob’s Burgers, Wednesday Addams or even Rodrick Heffley from the diaries of a wimpy kid.These characters all have strengths and a mean streak, but they also have a protective / caring side to them.
So, keeping that in mind I decided to create a scene for Rusty where he is sitting in the camp and sees a couple of kids bullying a smaller kid and he tries to save him but at the same he knows he needs to cover his own hide as well.
With the story board out of the way I wanted it to be exaggerated movements, actual animation of someone drawing out like the one on the left.
​
https://miro.com/app/board/uXjVMZvfCFM=/?moveToWidget=3458764559058880168&cot=10
