Planning
Now that we have made all our prototypes and talked about our games as a group, we have come to a unanimous decision to choose the dog prototype over the other two prototypes. We have decided to turn that into the full game, as we all think that we all have the most ideas for this prototype, which makes it the perfect fit for us.
The roles I have taken in the creation of this game is UI and UX designer and also the level designer. I will be working with Andrada on the environment, as she has collected some asset packs related to town areas previously. The plan we agreed upon is that I am designing the layout of the level, and she will be using my blockout as a guide to place the assets she acquired.
Level Design
When starting to create a level for any game, it is important to understand the scale of the map. This is crucial because it helps you understand how big the character is proportionally compared to the rest of the world. The level for our game needs a sweet spot between too small and too large so that the player can explore without being overwhelmed with content.
Our group had a discussion and concluded that a map that takes 30 seconds to run from one end to another would be a good start to the level. To do this, Ryan, who is in charge of coding the game, will program my player character to move exactly how he has programmed the movement mechanics of the dog. This will mean that I can use a stop watch to get the perfect size for the level.
I will use a level blockout material that I retrieved from my Level Design module, and I will also be creating instances of that material throughout with different colours. This makes sure that when I send the finished blockout to Andrada, she will know what the objects I place are.
In the photo above, the big green base takes 30 seconds to run through, making it the size we agreed on. I also added a road leading to a tunnel that runs through the map. The tunnel is made from geometry brushes. I took a large grey cube, then used a cylinder with a small amount of sides to make it quite angled. I made sure the cylinder was in the subtraction setting, so it cut unwanted parts of the cube out, and turned it into the curve you see in the photo. After that, I put a black wall behind to act as a void. In the full game, the player won’t be able to interact with the tunnel, they are both just used as decoration in the level.
In the photo you can see the default unreal character model and the block next to him is to set the height of the dog model that Ryan has. This means that I can understand how large each item in the world would be in comparison to the dog, so that all the buildings and objects in the level will all look consistent.
Next, I will create a basic scale of the houses. I want to create different house types, so I am going to create the size for a bungalow first. To do this, I will place the player model next to a block and manipulate it to be a size I am happy with. After that, I will double its height to create an extra floor to turn it into the size I want for a house.
Above is a photo of the house and bungalow. I think the size of these worked well for the scale I was going for, and when I ran it by my other team members, they all agreed. Next I will start placing different housing areas around the map along with some roads to connect everything together. The roads would additionally act as subtle bread-crumbing for the player by giving guidance on how the player can navigate the level.
First, I will start putting down the roads first because it means that I can create the housing plots along the roads, which will guide the player around the map.
This is the layout of the roads in the map. I want to add a variety of places I could put houses, and want to include a cul-de-sac area, as you can see on the right-hand side of the photo. I feel like it fit well with the town based level, and it additionally is a dead end for the player which also means we can hide items around that location as secrets for the player to find. Furthermore, I have left some areas I can put trees in and make some forest area that you can explore. I know I want to make it a small town residential area, so I first want to add in a children’s play park near a housing area that the dog could interact with. I also think the idea of a graveyard would be good to hide some secrets for players to find in there, so I got started on those first.
I first made the graveyard, and began putting down headstones evenly. I made sure that the headstones were about half the height of a human, as they would be in real life. Additionally, I laid down the character model to make sure there was a human gap between them to make sure that they were realistically separated. This also means that there’s space for the dog to walk through the graveyard. There is additionally one large tombstone I included towards the back of the graveyard. This is included to grab the player’s attention. This is an affordance, as the player immediately knows it’s important, and they can interact with it somehow. In this game’s case, the player would understand that they are able to dig there to find a secret or an item to collect.
The idea of a play area came from my experiences as a child. After primary school on the way to my house there was a play park I loved to spend my time in. I have many memories of dogs being in that park and running around, seemingly enjoying the park just as much as the kids. And I felt it would be a fitting addition to the level for players to mess around in and have some fun. The floor of the park is black, and the reason for that is that in many parks, they have rubber flooring which aims to soften the blow if someone falls on it.
The walls of the park are a bright colour, which is common for parks. They further add to the “kiddy” theme that parks are known for.
I threw together a mock-up of a slide that could be in the park. This was just to get across to Andrada what this area’s intended purpose is for. When Andrada is given the level, she will search for assets of children’s play area items such as swings, slides, climbing frames and roundabouts.
This slide is made from of some cylinder geometry brushes and a square brush that I have manipulated to resemble a slope.
The colour is a bright red to fit with the “kiddy” colour scheme mentioned previously. The plan for the park is to use a variety of vibrant colours to further add to the “kiddy” theme of the park.
I now need to start adding houses along the roads to start filling out the map some more, so I am taking the previously made house blocks and I will be dotting them around the map.
This is the placement I ended up with for the houses. The ones near the park are all 2 stories, while the cul-de-sac area is all bungalows. I felt like this was a fitting amount of houses, as I didn’t want to overload the player and fill the whole map with random homes. The houses have fences that the dog can get into by jumping or crawling, and these could also contain little secrets the player could find.
These fences are created with the geometry brushes too, and I just took the basic squares then manipulated them to be thin and fairly tall but still short enough for the dog to get in.
I have left areas that I can add other interesting buildings into the environment. I was thinking of adding a few fields that will be hidden away with trees. This is common in games, as players are used to searching areas for collectibles. It encourages the curiosity of the player and rewards them for it. I was also wanting the opinions of the other team members for what I could add.
This is the message I sent:
I decided to add in some trees while I waited for any other ideas. I will also add some secret areas within the forested areas. I made the trees by using geometry brushes. All I used to create the basic shape is a thin long cylinder as the tree trunk, then a cone as the bulk of the tree. Once I had created one, I duplicated it by holding down Alt and dragging the to make bundles of trees, as seen in the photo. These will represent areas filled with trees, and will be transformed into more realistic foliage in the full game using an asset pack Andrada has.
However, the more trees I duplicate, the less responsive my Unreal Engine is gets, and I get a very long loading bar. This is slowing down my productivity as I am now waiting minutes for trees to load in. I took a screenshot of the loading bar. I assume this is related to the amount of geometry brushes, since it keeps getting worse the more I have, so I searched for what might help in this situation.
After a quick google search, I found out that I can convert my geometry brush items into static meshes, which are more optimized for the engine. The way to do this is by going into the component editor while the geometry brushes you want to combine are selected, then go to the brush settings and clicking “create static mesh” and creating a suitable name so both Andrada and I know what the items are.
This ended up fixing this issue, which is great and will help me a lot when creating levels in the future, so it was very valuable to run into this hurdle and overcome it.
This is where I ended up placing the trees on the map. The gaps in the trees are places that secret items may be located. I wanted to add secret items into the map to give more reason for the player to explore and run around. If there were no gaps in the trees, then it would have been a missed opportunity. Additionally, many games contain hidden items in forested areas. Some games that immediately come to mind include The Legend of Zelda, and NieR: Automata. Therefore, by including hidden items in these areas, that is an affordance built up by more experienced gamers.
Other than the patches of grass with secrets, I placed some more trees around the houses and also around the edge of the map. This will in turn make the map look a lot nicer and hide the world border some more as to not break the player’s immersion.
Some areas were left blank because I plan to add in some other buildings there, this means we get a good balance of buildings and greenery. I was thinking of adding a row of shops along the left side of the map, to create a small town feel. I also thought that some shops could be interesting for the player to interact with. Two other building ideas I thought of were a dog kennel or dog rescue homes and a police station or a pest control building, as someone would need to chase you down, and they would need somewhere to spawn from.
This is where I have put the row of shops. The shops are larger than houses, as they are in real life, but not by much. This is because I didn’t want them looking unnatural and towering over the player. The way the shops are placed is very similar to the high street at the town centre I grew up with. Next, I’m going to create a building for the spot in the bottom right of the map near the housing area, and one for the space next to the tunnel.
These are the other two buildings I added to the level. The one on the left is the largest building on the map. This is because it will be turned into an Animal Centre, which will have a lot of interactivity since you will be playing as a dog. We will add kennels, other dogs and other animal related items here.
The building seen on the right is a police station or a pest control building, where the people chasing after you will come from and try to take you in. The whole idea of the game revolves around this explorable area and getting chased by people trying to take you back in, so having a designated place for them to take you to is important. Additionally, this building is in the middle of the road that connects the shopping areas and the house areas. This adds some risk and challenge for the player, as it is naturally one of the areas you need to be careful in.
Now that these have been placed in the map, I want something to add to the houses at the end of the cul-de-sac. At the moment, the road just leads to nowhere, but I want to add a detached garage for the houses on each side.
As you can see in the photo above, I included a detached garage on both of the dead ends in the cul-de-sac. The inspiration behind adding these was that in some areas around where I grew up, quite a few housing estates had these detached garages. I think that the inclusion of the garages adds more to the whole housing area look, and makes it feel more authentic. It could also be a good opportunity to hide items in for the player to find.
To further add to the authenticity of the town feel, I need to add in some paths and pavements for houses and to connect the park to a path and make it feel more like a town. To do this, I am going to add some light grey geometry brush blocks along the side of some of the roads.
This is how the roads look with the new paths running alongside them. I think it looks very authentic, and adds to the level as a whole. The paths additionally act as breadcrumbs for the player, indicating where they can go on the map. Most of the areas are connected through the roads and paths, so it will help the player navigate the level. The houses still aren’t connected to the paths, so that will be my next task.
These are some photos now that all the paths have been connected to houses. On the left, you can see that I have opted to go for a large driveway for the corner houses. I feel like this makes them look more authentic. On the right photo, I have also attached the path from the houses to the park to make it easily accessible.
These are all the materials I organized for Andrada to understand what different objects were. As I mentioned previously, all the materials are instances of “M_LayoutMat”, and I just changed the colours and the names to suit the item they were representing.
This is the final level I have created, and will send to Andrada. I will use WinRAR to make it a zip file and send it to her over Google Drive so that she can use it to replace with her assets. I got it sent off to her in decent time, although there were some delays from internet issues and going to see family over Easter, but I got it all sent off and sorted for the Easter deadline.
Overall, I am quite happy with how the layout turned out. I think it incorporates many fun elements for a player, and keeps a very nice small town aesthetic.
UI and UX Design
To create the mock-ups of the UI, I will be using a program called Adobe XD. This is because it is what we are taught to use in my UI and UX module, and has many tools to help me create the design I want.
I had already created a mock-up of the game’s HUD for when we did the presentation. This is that HUD:
I think that HUD was quite good, however it needs some tweaking because as a team we have got other ideas for how we want it to be. Firstly, in the bottom left corner we now only want 3 skills instead of 4, so I want to remove the diamond on the bottom, as we all agreed that would look the most visually appealing. Then, for the top left of the screen, I will be swapping out the health bar and replacing it with a bar called “Heat”. This mechanic acts somewhat similarly to Grand Theft Auto’s wanted system, and the more you get, the harder it is to shake off the people chasing after you. The last thing I will be altering is the date and time area. Caitlin, who is doing the art for the game, designed a circular day night icon we all liked, which will work similarly to one of the clocks from Minecraft. We also felt this fit the theme of the game. This is because the dog wouldn’t be able to read time, but would instead know it based on how bright or dark it is outside.
In the top left corner, I created a bone icon to represent how that bar would look. Caitlin will be drawing 5 bone icons that would be where the heat bar is. These will change with colour depending on the level the player is at.
The circular date and time in the top right corner went through some trial and error to get it a perfect size. I didn’t want it to be too large to get in the player’s way, but it needed to be big enough to understand from a quick glance. In the end I think I found that balance quite well as the final product will be quite readable while still not getting in the player’s way.
Now, I will create the layout of the main menu and the options menu. The idea I have for this menu is that on the right side of the screen will be Apollo sat in his bed, and the menu would be on the left side. This means that you will get to see the dog rest in the bed before you start the game. Another reason I want it to be like this is because we could transition from the menu to the game seamlessly. The idea was that when the play button is pressed, the camera can move behind Apollo, immediately giving player control.
These are the menus I came up with. As you can see, I kept the menus on the left of the screen, saving the right part for Apollo. The UI is designed to be simple and clean and easy to use. It only takes one button press to get into the game, which means the user isn’t navigating menus, and can hop straight into the action. The Tails of Apollo text will be replaced with the logo that Caitlin creates, and the fonts for the buttons and options will be in a font similar to it. Andrada made a list of fonts that would be considered. Our group decided we quite liked Lily Script One, so that font will be in the final game.
As for the options screen, it is also designed to be simplistic and easy to use. A difficulty option is being considered for the game, so I added one of those in too. However, I don’t know if that will be in the final game. The plan we had for difficulty would be that for higher difficulties, the heat level will rise faster to make it harder for the player.
The next thing I want to do is to create the design for the skill tree. Yet again, I had already created a mock-up for the skill tree when we did the presentation, but I want to drastically change it. Caitlin and I want to theme the skill tree around the Corvus constellation, which is associated with the Greek God Apollo, which ties into the name we have given to the dog. This change means I have to completely rethink how I could set out the skill tree.
This is the first attempt at the constellation skill tree I created. The background is a photo of a nebula. I have put a black background behind it and turned the opacity down to make it more subtle. This means that it isn’t bright and in your face. The nebula was chosen to further push the space and constellation aesthetic I wanted for the menu. Each block you click on would lead to a set of upgrades. They will be organized based on the type of upgrade. The bottom right block is the abilities, then the other ones are passive upgrades like stamina and heat.
I asked Caitlin to design the icons with something that indicates what upgrade type they were. This is important for UX as it tells the user exactly what that upgrade is for. What she ended up going with is a coloured border for the icons she’s made, and they are colour coded too. For example, green is for stamina. With this in mind, I want to make a change to this skill tree to incorporate that colour coordination.
This is the new and improved skill tree. I added the colours to each of the points, and I have also turned each point into starts to better fit with the theme. I now need to make new screens for each of these points. On top of that, I also asked Caitlin how many icons were in each and designed it around her numbers.
These are the sub menus to the main constellation. The one with four diamonds in it is for the skills on the main HUD, which is why I chose the same design for in the skill tree. It helps the player understand what this part of the skill tree is for, and helps to differentiate it from the other passive upgrades.
The choice to use a triangle shape for the other parts is because if you combine all of them together, it would create a star which also fits with the constellation theme. It also lays them out in a clear way for the player to understand.
I have included a video recorded from Adobe XD which showcases the way the skill tree menu is interacted with. I showed this to the group, and they were all happy with the idea and how it was organized, which was brilliant.
Furthermore, I think it was a good choice to go with the constellation theme. I feel like it goes a long way in adding a bit of charm into navigating the menus. Overall I am extremely happy with how the menus turned out, and I believe I’ve balanced usability and style quite well as it is clean and very usable, but also sticks to a nice aesthetic.
I exported all of my work from Adobe XD and sent them to our discord, so Ryan could use them to include it into the game.
This is the final level I have created, and will send to Andrada. I will use WinRAR to make it a zip file and send it to her over Google Drive so that she can use it to replace with her assets. I got it sent off to her in decent time, although there were some delays from internet issues and going to see family over Easter, but I got it all sent off and sorted for the Easter deadline.
Overall, I am quite happy with how the layout turned out. I think it incorporates many fun elements for a player, and keeps a very nice small town aesthetic. I am very happy with the layout of the UI and the skill tree, I think that it is very effective and fits with the theme we wanted for it.