B. Structure and gameplay

The first step in advancing the design of the game was for me to decide how I wanted it to play. Milosz and I met with our tutor James to discuss possible genres for the game and receive critique on our ideas. When first coming up with the game idea in semester 1 I envisioned it as a puzzle platformer, but after careful consideration we determined this would be a huge task because the atmosphere I was aiming for was too realistic for floating platforms, and otherwise I would have to allow for platforms and ledges to match up across the vastly different architectural styles of the two cities. Additionally, I wasn’t interested in a parkour style of progression through the cities.

Another genre we considered was point-and-click puzzle game, such as those by Amanita Design, as their visual style really appeals to me and I thought it would allow me to create the perfect atmosphere for the cities, utilising 2D artwork in the level designs. However, James suggested we didn’t limit ourselves to the constraints of a point-and-click, and Milosz’s skills lie in 3D modelling, so we would have had to design a 3.5D point-and-click puzzle game, designed in a 3D space but played in a 2D format. At that point I realised the appeal of the genre was no longer there for me if it lacked the illustrated environments.

In order to really settle on an appropriate genre, James asked me to reflect on what the key experience I wanted to create with my game was. I decided that it was simply for the player to feel like the two groups in the game have become so far divided that they are actually missing part of what makes them a fully functioning society, and it then became clear that my game’s mechanics would need to reflect this message. We settled on the idea of a puzzle game that makes use of the world switching mechanic, and Milosz went away to brainstorm some puzzle ideas whilst I produced concept art to help settle on a visual style for the game.

However, as Milosz’s skills lie in more technical areas, he was unable to come up with any compelling mechanics so I then took on this role instead, resulting in us losing a bit of time. This was partly an oversight on my part because I should have really confirmed that my partner was confident handling this task before we allocated it. If I could redo this project, I’d have taken on puzzle design from the start and stayed true to what I know our individual skills are, me in design and Milosz in development, because we had limited time for this project and should not have taken that chance.


The game structure that we settled on was 5 enclosed locations, each with their own puzzle within that must be completed before progressing to the next area. I decided to go with bespoke puzzles for each location because this would allow me to get creative and have fun designing each and every individual one, and this concept of unique puzzles instead of one recurring puzzle mechanic is an element of Amanita Design’s games that I really enjoy. Together, we brainstormed ideas for the locations and starting points for the puzzles, which I then went away and developed further. The 5 locations we initially planned were:

  1. City gates leading to a marketplace
  2. Street lined with shops
  3. Park
  4. Residential area
  5. Temple/Church

These locations changed with time. I realised that a street lined with shops was a relatively mundane location that didn’t offer much in the way of puzzle opportunities. A park is a place that would only appear in the yellow city, and I couldn’t think of what it could be in the blue city. The blue city, although set in Industrial Revolution England, would not have a church because there would be no place for a seemingly functionless building.

As I developed the puzzles, I realised that the order of the locations needed to be changed too, so that there was a steady incline of difficulty. I also had to cut out 1 location due to time constraints, as I underestimated how long it would take me to design the puzzles. I wished I had started to design the puzzles earlier so we could have one more location in the game, however after actually playtesting it, the 4 locations we ended up with seem substantial enough for a full game because they are quite complex. The final order in which you visit each location is as follows:

  1. City gates leading to residential area
  2. Marketplace
  3. Gardens
  4. Temple

There is more information on why I decided on each of these locations in the puzzles blog posts.

K. Dialogue

Click here to access my document containing the dialogue for the game.

When writing the dialogue for the game, it was important to give the characters lots of personality and life because the visual design of the people is very simplistic- they are faceless and have a plain white sphere for a head. If the dialogue of the NPCs was boring, the entire game would lack energy. It was also important for me to give all of the green people differing personalities so that they actually felt like different characters, seeing as they would all be wearing the same green cloak. I wanted to give the impression that all the green people in the city were banding together to help the player. I decided to use a recurring nickname for the protagonist to give the player a greater sense of identification with their avatar. The green people refer to the player as ‘spacefarer’.

In addition to all the dialogue which is core to the story and gameplay (ie. that of the green people and the yellow and blue people in the residential area puzzle), I wrote some extra ambient dialogue for yellow and blue NPCs to say as the player approaches them. The idea of this was to inject some life into the game world and make it feel more bustling, as a city should be, whilst reinforcing the core values of the yellow and blue people. Unfortunately, due to time restraints, we were not able to implement this extra dialogue before hand-in, but if I was to redo this project I would get the dialogue completed earlier to allow for this. I really think it would have had a hugely positive effect on the atmosphere of the game and made it feel more complete.

Another dialogue feature we were unable to implement is the layout in which I wrote the dialogue to be displayed. In many dialogue-led video games, there are breaks and pauses in the dialogue that is displayed in the text box to make it seem less like prose and mimic natural speech patterns more closely. Another benefit of this is that the player has to press the continue button/key more often, making them feel more engaged in the conversation with the NPC. Instead, our dialogue appears in the text boxes as a solid block of text, which is less dynamic and also presents the possibility that the player might accidentally press the continue button/key and skip through the entire section of dialogue. It wasn’t possible to implement this feature because my partner Milosz who was handling the technical development of the game had other priorities, and again I should have managed my time better so that I could bring this idea forward earlier on.

My original script contained the use of the term ‘square head’ to refer to the player character due to his cube shaped head, but after play-testing my tutor informed me this is actually racist slur for a German person so I edited it out and replaced it with comments about the player character being short. I wanted to include some harmless quips to give the green people some cheekiness and personality to make them likeable characters rather just static, lifeless guides and so that they weren’t boring in comparison to the expressive yellow people, who are supposed to be the lesser group. For future reference I should look up any made up terms I may want to use to make sure they don’t already exist as something offensive in real life.

 

 

Introduction to this project

The blog posts in this section cover my contribution to the final major project which I worked on with my classmate Milosz. Each blog post refers to a specific aspect of the game’s design. They have been continuously updated and reflected upon in order to be as thorough and comprehensible as possible. My work is split across these blog posts, my USB and my scrapbook, all of which I have submitted. There is a total of 12 posts including this one in this blog section, and the others are titled A. to K. The actual game is included in Milosz’ submission.

I decided to work with my classmate Milosz on this project as I have design skills and he has technical skills. We took on the roles of designer and coder/modeller respectively in order to work effectively together, and as such, we settled on producing my game design, The City within a City (working title), which later became The Veiled Cities. I already wrote the narrative for the game in semester 1, so please refer to my blog section called Games Development 2 (ARTD3043) to read on the background of the game idea, in particular the blog post called ’07 The City within a City’ for the narrative.

Milosz and I communicated in person, over online messaging, voice calls and screen shares in order to work effectively and ensure we understood each other’s visions for the project. We sent files back and forth via a personal Google Drive and collaborated on the Unity project so that we could see each other’s changes with comments. We worked very effectively together as a partnership and I feel really proud of our accomplishment in this project.

H. Puzzle work flow diagrams

After a tutorial session with Adam, we agreed that in order for my puzzles to be usable for Milosz to code, I had to create puzzle work flow diagrams showing them broken down into tiny tasks. This was also an opportunity to help Milosz understand the puzzles better. I initially made the diagrams in draw.io, but I didn’t find the software very intuitive so I reproduced them on paper and I found this much clearer and easier to view.

Some of the puzzles didn’t translate perfectly into work flow diagram format because some elements of the puzzles don’t have to be done in any particular order, however I tried my best to describe in text how each puzzle works.

This slideshow requires JavaScript.

J. Level design

For Milosz to create the final game world, I blocked them out roughly in Unity using cubes. It took a few iterations because I began by making them quite small and claustrophobic to mimic the atmosphere I had wanted for the two cities and I was also wary of making them too big and providing huge unplayable spaces with nothing puzzle-related in them, but Milosz reminded me that if we wanted to use interesting camera angles we would have to open out the spaces a bit more, so I did. I referred to my concept art of each location to make these areas.

image1(1)image2(1)

The objects I coloured red are related to the puzzle. White objects represent decorative models like trees, plant pots, doors, stalls, etc. The city seems relatively small, but due to the locations being spacious, it feels larger and full of life in-game.

I. Assets

An important task for our project was to make lists of all the assets needed for the game so that we could create them to the specification without missing any. I compiled lists of all the 3D assets and 3D animations for Milosz to make, and all the 2D assets for me to make.

List of 3D assets:

This slideshow requires JavaScript.

List of 3D animations:

This slideshow requires JavaScript.

List of 2D assets:

This slideshow requires JavaScript.


Unfortunately, the only 2D assets I was able to make are the tiles in the temple puzzle, as those were imperative to the puzzle. I’d have loved to have started on them earlier along in the development so that I could make the inventory icons because I think it would have made the game feel even more finished. In particular, I wish I had made time to do the constellation drawings and the star maps in the residential area puzzle because I feel that was a really clear and important demonstration of how objects are seen differently in each city, and also would have added some charm having the little Ursa Major bear and Sagittarius illustrations in the game. I think my 2D digital art style would have looked really nice in-game too as it matches the low-poly cel-shaded effect of the 3D world. In place of inventory icons, Milosz used text labels for each of the items to let the player know they had something in their inventory.

The 2D assets I made for the temple puzzle tiles are below. If I had made the rest of the assets I planned to, they’d all have been in this style. I chose to make the tiles in the yellow city be illustrations (featuring the outfits I designed in my concept art) and the tiles in the blue city be plain text (using the font that matches our title screen) because this demonstrates each of the cities very well- the yellow people celebrate art and creativity whereas the blue people prefer simplicity and practicality. I used my colour palette in these assets for a consistent branding style. We later changed the ‘LOOK AFTER YOURSELF’ tile to ‘PROTECT YOURSELF’ after some feedback from play-testing sessions because people were struggling to figure out the puzzle solution.

G. Puzzle- Temple

The temple is the final location of the game. It was originally going to be a church in the blue world, however I was finding it really difficult to think of puzzle ideas for a church location. It also didn’t make sense for the blue people to have a seemingly functionless building like a church in their city, so I changed it to a museum/library area because they worship knowledge and it fitted better. This change helped me come up with a compelling puzzle design for this area.


image1(2)

Upon entering the temple, there are 6 display tables- 3 along the left wall and 3 along the right wall- with objects on them. In the centre of the room there are 6 tiles in a row, and in the yellow city there is a bird statue either side of these tiles, or a lectern either side in the blue city. One of the bird statues holds the yellow fragment of the sacred holy text, and the opposite lectern holds the blue fragment.

The tiles each represent one of the commandments of the green people. In the yellow city, you can only see 3 of them- those that make up the yellow ideology. They are ‘SHARE’, ‘PLAY’ and ‘EXPRESS YOURSELF’. In the blue city, you see the other 3 tiles- those that make up the blue ideology: ‘WORK HARD’, ‘SEEK KNOWLEDGE’ and ‘PROTECT YOURSELF’. The 6 objects correspond to these tiles, and the solution of the puzzle is to place the correct object on the empty tile in the opposite city. When you place the right object on the right tile, it turns green and you can’t interact with it anymore.

What makes this puzzle complex is that each item transforms into something else depending on what city you are in, meaning that there are actually 12 objects in total and 6 of them are irrelevant to the puzzle. You have to guess which of the 12 objects accurately represents each tile and place it in the empty space in the other city.

The solution is:

  • Journal/book > empty tile in the yellow city for ‘SEEK KNOWLEDGE’
  • Promise rings/pocket watch > empty tile in the blue city for ‘SHARE’
  • Doll/medical model > empty tile in the blue city for ‘PLAY’
  • Hairbrush/scrubbing brush > empty tile in the yellow city for ‘WORK HARD’
  • Vase/bucket > empty tile in the blue city for ‘EXPRESS YOURSELF’
  • Hand jewellery/protective glove > empty tile in the yellow world for ‘PROTECT YOURSELF’

After all the tiles have turned green, the two statues will move together along the tiles and the fragments will become one again, beating the game.


Just like with the gardens puzzle, the floor layout of this area is important to understand the puzzle, so I sketched a floormap to show the layout. This puzzle is the only one that takes place inside a building, so this is an internal floormap, and my concept art of the temple is my reference for designing the exterior of the location.

image2(2).jpeg


Originally the ‘PROTECT YOURSELF’ tile was ‘LOOK AFTER YOURSELF’ but after play-testing sessions Milosz discovered that people were getting confused and thinking the hairbrush corresponded to this tile. I changed it so that it was more clear that the protective glove was meant to go on this tile.


After the final puzzle, I wanted there to be a montage of every location being fully green as the population’s original colours have been restored, but creating different 3D models for the entire game world just for a short video would be too much work and wasn’t plausible within the time constraints. Therefore, I designed a simpler ending for the game. After solving the puzzle, the fragments reunite and then the screen fades into black and then out to show the temple all green, with green people surrounding the player. They praise you for reuniting the people, and ask you to come with them after they have built their spaceship to escape to another planet.

F. Puzzle- Gardens

I decided to create a location which was a decorative temple gardens area in the yellow city, and a productive farm in the blue city. Originally this location was called ‘park’.

Since the gardens puzzle is the penultimate puzzle right before the temple, I wanted the solution to be fairly complex to build up the difficulty as the game progresses. This puzzle uses a lot of objects and interactions. An upturned cart blocks the bridge to the next location.


image1(1)

  1. In the yellow city, walk over to the wild songbird to scare it into the big tree. The wild songbird is a messenger pigeon in the blue city, so it isn’t scared of you approaching it (since pigeons are city birds and very used to human interaction). The bird will fly into a clump of leaves, moving it and revealing a long branch with the green person of this area sitting on it. He says his part of the story.
  2. By the river, there is a snipping crab in the yellow city, which is a pair of scissors in the blue city. Pick up the pair of scissors.
  3. There are some decorative trees in the yellow city which are fruit trees tied to growing poles by rope in the blue city. Snip the rope off the fruit trees with the scissors.
  4. Go over to the upturned cart and attach the rope to it in either city.
  5. Throw the rope over the long branch in the yellow city.
  6. Go over to the mule in the blue city, which is a pony in the yellow city. Attach the rope to its saddle and it will pull the cart off the bridge and into the air, utilising the pully-like system you have created.

The location of all the parts to this puzzle is very important for the logic of the puzzle. The mule is positioned at such an angle that you cannot bypass throwing the rope over the tree, because it would just pull the cart into the walls of the bridge. I produced a quick sketch of the layout of the area to help Milosz understand the puzzle.

image2(1)

E. Puzzle- Residential area

The residential area was originally going to be the penultimate location of the game, however when I designed the puzzle it turned out to be rather simple so I moved it to the first location. The reason I planned this to be the penultimate location is because I thought the indirect interactions between the yellow and blue people in this puzzle set the mood for finishing the game and reuniting the groups nicely, because it shows that they are almost on the same page (both admire the stars), but not quite there. I thought this would spur the player on to want to reunite the people and create a really intense and emotional mood. However, it works pretty well as the first puzzle of the game too, because it demonstrates to the player straight away how the two groups simply cannot see each other, despite sitting on the same roof right next to each other.


image5

The player must first find the green person in this area. They are on a balcony, accessed via an alley behind the houses. They tell their part of the story and then go inside the house, bringing out a ladder and throwing it down for the player to use to access the roof of the building, comprising of two semi-detached houses. One house belongs to a yellow person and in the yellow city the roof is scattered with plant pots, one of the rooftop access hatches is open and a yellow person is sat on the ground looking up at the stars and drawing. The other house belongs to a blue person and in the blue city the roof has technical equipment on it, the other rooftop access hatch is open, and a blue person is looking at the sky through a telescope. In the blue city the blue person’s telescope blocks your access to the ladder into the next area, but in the yellow city the telescope is an easel.

You must first speak to the blue person, who reveals that he is tracking the meteor that is on its way towards the planet but he wishes he had a way of knowing its coordinates. Then, you must switch to the yellow city and talk to the yellow person who is drawing. He says he sees animals and magical creatures in the sky, and gives you some of his drawings. In the yellow world they appear to be sketches of a bear and a centaur (his view of the constellations Ursa Major and Sagittarius) and in the blue city they look like a map of the stars. Giving them to the blue person delights him and he goes back into his house via the hatch to study them, taking his telescope (and consequently, the easel) with him, clearing your access to the ladder into the next area.

 

D. Puzzle- Marketplace

Originally, the marketplace puzzle was going to be the first area the player visits, however after designing it I decided it was too complex to be the introductory puzzle, so the marketplace became puzzle number 2, after the much simpler residential area puzzle.

To make sure that the player discovers all the green people in the game and learns the backstory from them without bypassing them all, I decided to design the puzzles so that the green person of each area is directly involved in the puzzle, ie. the green person will enable them to complete the puzzle in some way. For example, in the marketplace puzzle, the player must first find the green person who will tell their piece of the backstory and then give them a spanner which they need to undo the control panel on the well in the blue city. The green people are located in the same place in both cities, because they see both cities.


image6.jpeg

Upon entering the marketplace, an iron gate blocks the archway out of the area in the blue city which is mirrored in the yellow city by a water feature- a heavy stream of water flowing down across the archway (which I’m calling a water gate). On the side of the well in the blue world there is a control panel with a metal cover fastened by a bolt, which is mirrored in the yellow world by a mosaic with a wooden cover that features a keyhole (both appear like boxes that open to reveal their insides). Using the spanner on the control panel in the blue city will open it.

Within is a pipe system with valves on each segment of pipe. Selecting a valve once will rotate it (and the tile of mosaic that corresponds to it in the yellow city) by 90 degrees. The aim is to switch between the two cities, referring to the mosaic to see which valves need turning, to uncover the bird image in the mosaic. When the bird image is revealed, the valves have been turned in the correct combination and the water flow in the city is successfully diverted from the fountain and water gate in the yellow city and the well in the blue city to the hydro-power-activated iron gate in the blue city. This raises the gate in the blue city and turns off the water gate in the yellow city, allowing the player to progress to the next area!


The wooden mosaic box in the yellow city has a keyhole to trick the player into thinking they might need to find a key. No such key exists, and they actually have to find a spanner to open the box from the blue city. This adds another layer of complexity and mystery to the puzzle.

I was inspired by the hacking mechanic in Bioshock for the valve part of this puzzle. Whilst hacking a device in Bioshock, you see a liquid-like substance (I think it’s actually meant to be electric current) passing through valves, and you have to turn them all to match up so the current is directed from the start point to the end point to successfully hack the device.