In this 3rd post on the Collaboration Unit, I am explaining the development process of the Turkish coffee experience game: Paranormal Coffee.
DEVELOPMENT:
After talking to the tutors, I decided to start the development of the game by creating the coffee cup in 3D. Alan helped me to find a suitable coffee cup and tweak the values on Sketch Up. I was going to create the cup and then create several round strips which would later be placed inside the 3D cup in Unity. The strips would ideally be textured with coffee remains, but for the start, I drew random lines on the strips in Adobe Illustrator and then imported the images to Sketch Up and rounded them cylindrically, by wrapping them around a 3D cylinder and reversing the values of the cylinder. The intention was that, the stripe objects placed and layered inside the 3D cup would create patterns similar to the original Turkish coffee remains when their rotation, colour and alpha level (transparency) are changed.
I worked on this idea for a day and a half. I was not satisfied by how the patterns appeared for several reasons:
1-I foresaw that changing the rotation, colour and transparency of the stripes were not enough to create the feeling of the coffee remains. Even though some variety of patterns was created by the layered stripes, the look of the inside the cup was not going to be unique each time the player looked inside. At that time, I believed one of the points I needed to hit was creating a unique experience for every player, just like the physical experience did.
2- The 3D art I was trying to create was low poly and it needed much more work to look good, such as application of lighting and texturing. I did not know anything about creating 3D objects and environments by modelling. I would need to take time to learn modelling, which meant sacrificing from other aspects of the project. I did not trust myself enough to go thorough with the 3D version of the game idea.
3- I could not see a way, which looked nice and made sense, of implementing the symbols that would appear on the surface of the inside the cup. The symbols would be spawned as additional cylindrical strips, layered on the pattern strips, but because it is 3D space the player would have to rotate the cup to be able to see the symbols, and since the space inside the cup was not curved unlike a real coffee cup, the player would have to rotate the cup close to 90 degrees to be able to see the symbols clearly. I other concern was making these symbols clickable within a concave 3D space.
I decided to go back to my original idea, which was in 2D. I started developing this idea by attempting to create the unrolled cup. The steps were similar to the 3D version. I created several strips which had different patterns on them. I made it so that the colour and transparency level of the strips changed in order to create a texture similar to the coffee remains. I was going to make the pattern on the stripe appear gradually as the player swipe the coffee circle through, revealing the spawned symbols. The coffee inside the coffee circle would decrease (changing sprites) as the circle moves across the stripe. I worked on this idea for one and a half days as well. Within that period, I was being told by the classmates that it was hard to grasp the idea from the display of an unrolled cup. I would need a very clear cup unrolling animation in 2D, for the player to understand the situation. I was suggested to have a top down view to the coffee cup.
I had a meeting with Beliz, and told her about my attempts and the comments I received from my mentor, the tutors and classmates. Beliz preferred me to proceed with the top down view of the coffee cup for the scene in which the fortune symbols appear. On the other hand she still wanted to see a normal view of the cup in the coffee preparation and drinking part.
Here is are the images from a presentation I prepared for explaining my idea to Beliz:
I restarted creating the fortune scene, this time by having a top down cup image. I image traced real photos of coffee remains and created a base patten for the inside-cup surface. I hand drew symbols with a custom brush with a stroke similar to the coffee remains. I placed these symbols on my base pattern and tried to disguise them by tweaking their values and positions. I wanted the player to look for a familiar shape within the given pattern, just like in a hidden object game, and click on the shape when they realise the hidden image, then the symbol would shine and reveal the fortune note. I had several problems with this system of hiding shapes:
1- Since I would position the symbols in manually so that they can be disguised by the pattern on the base, the symbols would have pre-assigned locations, meaning the symbol would always appear in the same place. If the player played the game several times, they would not know where to look for the symbols.
2- I was not able to change the base pattern since the symbols would have a pre-assigned position to be disguised. This was contradicting with my aim of trying to create a unique, personalised experience. I was not happy with the situation that the player would see the same pattern each time they played the game.
3- It was very challenging trying to disguise the shapes manually. Either they were being too hidden or they were being too obvious.
Meanwhile, I started creating the coffee drinking and delight eating scene. I was aiming for keeping things very simple in this scene and focus my energy on the fortune scene. I created a scene with coffee and delights, the art style was flat without perspective. I animated the cup by using the Unity Animator. This was my first time using the Animator in a game. The scene was an interactive animation, where you click and move the game objects. I also learned making particle systems through this scene and created some powder particles for the delights.
I have prepared a presentation for Beliz by taking screenshots of the scene I created in Unity. Beliz could try to playable version in Unity, but this presentation served her to explain the idea to her boss.
Beliz liked the style of this scene, but I was not satisfied and concerned on the player not being able to see the coffee at all because of the flat view. I also received feedback from David to change the perspective of this scene by updating the art assets and utilising an angled coffee cup to see the coffee inside.
Around that time (mid-February), the mobile game Florence was released. Jai told me to check it out. It is an interactive story by Mountains studio (2018). It used very simple game mechanics for telling the narrative and making statements. I played the game and decided to create my coffee drinking and delight eating scene similar to the eating-drinking parts of Florence. I took the breakfast scene as a benchmark and recreated the scene of enjoying coffee and delights.
I thought Florence was a good example of Procedural Rhetoric, "the art of persuasion through rule-based representations and interactions rather than the spoken word, writing, images or moving images" (Bogost, 2010). Florence is an immersive experience, which persuades the player through processes as the textbook Persuasive Games suggested games to do. The player is put in a position to live through a relationship with ups and downs, and experience the emotional process by the game mechanics. Consequently, it made sense for me to design the game in such a way that would allow the player to experience the Turkish coffee procedurally along with its prevalent fortune telling custom.
I created the images in Adobe Illustrator by modifying the royalty-free vector assets I found online. Since I am not good at drawing art by hand, I merged a few assets together by cutting out some bits and adding in other features, in order to obtain the art assets I needed for the game. In the new scene of enjoying coffee, I did not use the Unity Animator. I mimicked the simple animation in the breakfast scene of Florence by code. When the coffee cup is clicked, the cup jiggles slightly and the coffee amount changes (sprite change). When a delight is clicked it also jiggles slightly and the sprite changes to a bitten delight image. When the delight is eaten completely, a particle system is activated and there is puff effect. After the coffee is finished, the player is guided by circular particle systems to close the cup with the saucer and flip the cup over. Since I had changed to an angled perspective, I was not able to use the Unity Animator anymore to close the saucer and flip the cup. I would have to have some art prepared for 2D animation. Instead, I simply changed the coffee cup image by deactivating and activating game objects and adding a jiggle effect on click. After the cup is settled upside down, the cup is opened up (change of game object) and a particle system is activated. This is the magic effect that I created; there are noisy particles emitting with trails and flying away dramatically. After the magic effect, a transparent star shape spawns and grows in the middle of the screen, and this is how the enjoy coffee scene ends. The player is transferred to the fortune scene.
Utilising the sensual descriptions in the tasting notes of Özerlat in the game was one of our initial ideas with Beliz. I made sure that the description text appear within the scene as the player drinks the coffee and eats delights. I was hoping to create the mouth watering affect with the help of sound effects and tasting notes.
A screenshot from an earlier stage of the new enjoying coffee scene:
After reaching to a certain level with the enjoy coffee scene, I decided to refocus on the fortune scene. I aimed at creating a better system for the player to discover the symbols. Having prepared images for demonstrating the coffee pattern was not working well enough for the game, so I kept researching for ways of making digital coffee patterns. I came across Random Walk Simulator GIF, the simulator "calculates the estimated probability of ending within a bordered area of the initial point after a given number of steps" (Ginsburg, 2018). From my perspective, there was a dot moving to random directions in a 2 dimensional space, while leaving its trail behind and the pattern it created looked like the coffee remains.
A random walk is a mathematical object, known as a stochastic or random process, that describes a path that consists of a succession of random steps on some mathematical space such as the integers. (Wikipedia, 2018)
I research for a way to create Random Walk in Unity 2D. I even found the C# function for creating Random Walk, but it was applied in Grasshopper for Rhinoceros (Siedler, 2017). I was planning to find a way to covert it to Unity C#, and then I was hoping to be able to tell the random walking object to detect the symbols that spawn and walk on them.
I talked to the tutors, and I was told that most probably I would not be able to create the effect I wanted with a Random Walk, and advised to try out creating the pattern by a particle system, which would burst once (in start) and stay as it is the whole scene. Alan showed me how to use a variety of images within one particle system by dividing one sprite. I created coffee ground stains in Illustrator, and then built a particle which emitted these stains. The particle system created a different pattern each time, which was something that I was aiming for.
I prepared new symbols by tracing the silhouettes of images. There images would be spawned on top of the pattern created by the particle system. My aim was still hiding the symbols interlaid with in the pattern. In order to disguise these familiar shapes, I tried to create them in a similar art style with the pattern and tried giving them a look of a stain. In order to prevent the shapes to be fully overcasted by the particle system, I iterated several version of symbols. Every symbol had a unique white stain at their background, so that they would look natural as if they were a part of the pattern and at the same time, they would not get lost within the pattern.
A screenshots of particle system iterations for generating coffee patterns, the owl and bat symbols are visible:
The symbols are spawned by a script within a certain area. Each time, 3 symbols in a list of prefabs are spawned randomly. In order to prevent the symbols from overlapping each other, each spawn occurs in a certain angle within a unit circle. The spawned symbol is destroyed so that it cannot be spawned twice in a game.
At that point, I had a unique pattern generator and spawning symbols which were poorly disguised. I was not satisfied by the looks of the pattern. I played with the values of the particle system, changed every possible aspect that I could think of to make the particles look better, and hide the symbols in a more elegant way. The pattern did not look like the physical coffee ground remains, it was too messy and did not look pretty. I received feedback from the classmates that it looked disappointing, especially considering the fact that the player would transfer to this scene after seeing the magic effect at the previous scene. I thought one of the reasons that it felt odd was that there was no movement in this scene. When there were no effects and no animation in the scene, it did not look magical.
I came across a scientific article which explains the behaviour of coffee particles and why the coffee stains look as they do. In theory it was possible to create digitally coffee particles and make them behave just like the physical particles. I decided to give it a go. I was going to work on it for a day and if I had any progress, I was going to allow myself to keep working on it the second day.
In summary, the article explains that there are circular and oval coffee particles. The circular particles behave just like Tetris, filling the blanks as they fall on top of each other. Meanwhile, the oval particles of coffee behave differently, they behave like sticky Tetris. The oval particles stick each other, when they touch. This behaviour allows for the unique patterns to shape up (Bhatia, 2013).
I needed hundreds or thousands of mini game objects, and they had to be spawned and fall on top of each other in order for them to create patterns by sticking to each other. It seemed logical to use the particle system again, for this one. I created the particles and added them colliders. I was planning to write a script for the particles, so that they would behave in the desired way. Working on this system required a lot of patience, because it was too heavy for the computer to run all the changes and little tweaks I was making on the system. As I worked on it, I realised that adding a behaviour script to the particles was not going to be possible, because the computer had to detect thousands of collisions and freeze the position of the colliding particles. However, I also realised that this system had more potential then the previous one. It looked more "magical" and prettier. It was not looking just like coffee, but at this point I was ready to trade accuracy with good looks, it was getting very close to the deadline of the project.
I decided to modify this system to work with the spawning symbols. Since the particles had collider effect, I placed outlined images with holes and 2D polygon colliders on their route. I was hoping them to fill the outlined shapes. I worked on this idea for a while, but no matter what feature I changed the shapes were never filled properly, so I decided to have the particles surround the shapes. Even though the particles cannot surround the shapes perfectly, the player can see that there is a shaped being revealed, because the particles colliding to the symbol create gaps within the pattern. When player clicks on the empty silhouette, the image of symbol appears gradually, and announces the fortune note.
The player still did not have choice on their fortune, unlike my original idea. I was presenting the illusion of choice to the player by having them choosing and eating 3 delights out of 21. My mentor made me realise that I could still give the player a choice to have an effect on their fortune. I changed it so that the 2 of 3 symbols that were not clicked on would be destroyed, so the player only gets to reveal 1 of 3, and receives only 1 fortune note, which feels more elegant. Revealing 3 notes was overwhelming and confusing for such a short game experience. This mechanic also allows the returning players to wait for a bit for the particles to reveal some of the symbol so that they could try guessing the outcome and changing the course of their fortune.
NAME:
I decided to name the game Paranormal Coffee, because the Turkish coffee experience is ritualistic, exotic and very different compared to the western coffee experience. I wanted to point out that this is an 'out of this world' experience and an uncommon journey. Since this is a game, a leisure time activity, I did not want it to be serious. I wanted to include some playful appeal and silliness to it, so I added the magical effects, bright colours and dramatic sound effects and orientalist music.
TESTING:
I did not have the chance to conduct a proper game testing for this project, because I was not able to finish making a playable version before the deadline. During development I asked for opinions regularly and tested the pieces of the game with classmates. My goal is to test in class on the submission day (Thursday) and at least include some testing notes to the development report as points of improvement.
COMMENTS:
I was frustrated with attempting to create digital coffee patterns, but as a positive side effect I have developed by Unity skills and become more comfortable with the interface. I had the chance to work with Unity Animator and particle systems. I learned about including text in a game, using coroutines and spawning game objects. I have also become much more comfortable with Adobe Illustrator.
Through this project, I had the chance to gain some experience in creating a game based on a client brief. My collaborator, Beliz, supervised me through the design process and gave me regular feedback during the development phase. Her contributions kept me on the right track and prevented me to drift too far away from the initial brief. If this project was not a collaboration and I did not committed to an ultimate goal, I might have given up trying to make a digital coffee experience and produce a game only inspired by the Turkish coffee. The most challenging part of the collaboration for me was handling the pressure of being responsible for creating something for someone else, in this case a company. If I create a game by myself and it fails to entertain people, that is my problem. However I just realised through this project that having people expect something of you which only depends on you but no one else is a heavy situation, and I was not even getting paid for this project. I try to image if this was a paid service, I would be feeling much more pressure for creating something noteworthy. Luckily, Beliz and the company (her boss) have given me enough freedom to create an artefact within my skills.
Collaborating with a client was pragmatic, but during the development phase I wished I had collaborated with a visual artist, such as an illustrator, animator or a graphic designer. This would help me focus more on the game design and implementation instead of spending so much time on generating art, and I would be less worried about the looks of the game since it would be taken care of by the visual artist.
A book I read recently has enlightened me on design thinking and making games. The book is called Simplicity by Edward de Bono, and it argues that simplicity is very valuable and there is no justification for things being complex when they could be simple. There are few principles from the book that I have been reminding myself daily. I do not think that I can completely achieve to put them on practice, but I will keep on trying.
1- "Not everything that is there really needs to be there."
2- "In order to create something simple. You need to understand the matter. Be clear about what you are trying to do and about its values."
3- "You cannot design something well and simple right away. You need to think, design alternatives and possibilities, think more then choose between them."
This project led me to appreciate simplicity, and made me realise that systems that look and feel simple have probably so much work and thought process behind them. In order to reach more elegant solutions, I had to iterate many times and in each iteration I had to take out the previous version and the pieces taken out were not included to the game. My end product contains very little content, but it has taken me a relatively long and painful process to get to this point.
References:
Bhatia, A. (2013). The Universal laws behind growth patterns, or what Tetris can teach us about coffee stains. [online] Aatishb.com. Available at: https://aatishb.com/2013/03/02/the-universal-laws-behind-growth-patterns-or-what-tetris-can-teach-us-about-coffee-stains/ [Accessed 6 Mar. 2018].
Bogost, I. (2010). Persuasive Games. Cambridge, Mass.: MIT Press Ltd.
Ginsburg, J. (2018). Random Walk Simulator. [online] Itsof.me. Available at: http://itsof.me/qmas/deliverables/01-random_walk/ [Accessed 21 Feb. 2018].
Mountains 2018, Florence, video game, iOS, Annapurna Interactive.
Siedler, P. (2017). Random walk 2D [4 choices]. [online] BRTC: bumpy road to code. Available at: https://bumpyroadtocode.com/2017/03/31/random-walk-2d-4-choices/ [Accessed 21 Feb. 2018].
Wikipedia, the free encyclopedia. (2018). Random walk. [online] Available at: https://en.wikipedia.org/wiki/Random_walk [Accessed 21 Feb. 2018].