THE MAKING OF
AN IMMERSIVE, MYSTICAL, FIRST PERSON MAZE GAME
by
Laura Bretman 1
Objectives 2
» Look at the way different types of narratives are imagined (what softwares and styles do they use) and explore the use of new technologies in relation to older narratives » Create a unique fantasy narrative experience of your own; whether through literary illustration, game design, motion graphics etc » Create a body of work around this idea; a fully immersive world with coherent details and many different kinds of visuals » Research and understand the market for fantasy narratives in relation to the market chosen (i.e current games, films, books etc) and related areas
» Run a blog with regular posts documenting progress and linking to online sources (vimeo etc) » Interactive mock up to see how the final project would function, whether that is a website, game demo or printed books etc » Plan of action as to how the project would be released for purchase or available to the public » A coherent identity for the project that can be translated into many different means including marketing and social media » Evidence of an understanding of the current market and competitors related to your chosen products
Deliverables
» A sketchbook or workbook showing progress of notes, concept sketches, development work etc (this book)
3
4
Concept Development.......................................................................10 Character Design......................................................................................22 Typeface Tests & App Logo Design......................................36 Game Trailers...............................................................................................42 Game Functions........................................................................................50 Poster Design..............................................................................................56 Alternate Game Levels.......................................................................62 3D Printing......................................................................................................68 Merchandise, Website + Mock-ups........................................72 Evaluation.......................................................................................................80
Contents
Inspiration & Influences.......................................................................6
5
Inspiration & Influences
6
Drawing inspiration from both films and games that shaped my childhood as well as my later life, I found there were many useful influences I could use to find the right aesthetic for my game.
Above: still from Jim Henson’s “Labyrinth” 1986 Left: promo photo from Guillermo Del Toro’s “Pan’s Labyrinth” 2006
7
Above: still from “Harry Potter and the Goblet of Fire” 2005
8
Left: still from “Alice in Wonderland“ 1951
Inspiration From Games Above: Monument Valley Top Right: Darklings Right: Limbo
9
Concept Development
10
The first step in creating a game is the concept - this is where I began. I didn’t have a preconditioned idea of what I wanted my game to be, probably because my original Final Major Project idea was an illustrated book, however I did have a few rough ideas for different genre possibilities that would allow me to come up with a relevant and unique concept.
11
I quickly decided that I would like to develop the idea of calling the game “Mith� and basing it around a maze/ puzzle game of some kind. I definitely aim to use personal influences from the films and games that inspire me, and hopefully people will recognise that in the style and be drawn to it. An integral part of creating this game will be coherency between all aspects of the game; both in style and theme. Trying to visualise what I imagined was a difficult task in this case, as the functionality of designing a game was something I have little experience in - because of this I wanted to start in the most basic way, with sketches and notes explaining what things might look like and how they might work.
12
13
This Page: Developing how the maze levels will function together in 3D space
14
Page Across: First experiment in Cinema 4D using an extruded maze pattern
15
This Page: developing ideas
16
Page Across: mock ups of app homepage ideas
17
In terms of functionality, I had originally aimed to create 5-10 different levels but it was suggested to me that for the purpose of this project I demonstrate how only three will look (aiming to make each one unique). It would take me far too long to create each maze pattern myself and so I began using “mazegenerator.net� which allows you to create mazes using square, hexagonal, circular or triangular units with varying levels of difficulty. After saving these images I was able to convert them into paths suitable for extruding in Cinema 4D - I found this to be the simplest and most effective way of making mazes, using textures and lighting to make them look more realistic.
Across: first full design of a maze level
18
19
An Overview of The Concept
You play as Lux, who is ideally a genderless character with no obvious age, representing the inner psyche. Due to having such a wild imagination and growing up surrounded by stories of Labyrinth’s and Mazes - Lux has become lost inside “his” own subconscious (I have struggled to find a way to phrase this without using gendered words, meaning the character may become male) and has to solve “his” way through the mazes to “wake up” or “find the light” (the light will be a smaller orb of light at the center of each maze) Lux is made of light, a manifestation of the purity of the inner psyche -almost childlike and innocent. The maze “orb” featured in the mock up home screens will feature as
20
a “world” for the levels to function in. This world, both aesthetically and metaphorically is supposed to represent the mind. The levels will unfold from inside the orb and as you solve each one you will return to the home screen to see the light from inside the orb growing stronger. The main selling point of this game is that it will be be extremely immersive, ideally using a first person character view. Because of this, the player will feel as if they are solving the mazes themselves & hopefully experience a feeling of slight disorientation. After thinking about the functionality of the game it might be more practical to feature the option of both first and third person view, as well as an aerial view of the maze which the player
can use if they begin to get stuck in solving the level. The maze itself will be quite dark, but as Lux moves through in the right direction, the path will begin to glow (this part of the functionality is still being developed). Navigating the maze will either be done using a directional pad on screen or simply with directional swipes. There is a time limit on each maze because Lux’s light will fade. Lux uses the remaining light “he” has to help solve the mazes - a bar will be displayed on screen to show how much Lux has left. This light will recharge over time once used up, but quite slowly. The light can be used for “hints” or “cheats” which will show which
way to go, as well as this the light will be used to fight enemies. The enemies will be representatives of shadows or “nightmares” - trying to stop Lux from solving the mazes and returning to the waking world. Lux can shoot balls of light at the enemies to send them away but if they reach you before this, they will take a large percentage of the light Lux has, and you will need to wait for it to recharge. There will also ideally be short animations to transition between parts of the game, for example; Lux advancing through one maze (the orb will raise him up to the light), failing a maze (he will fall into darkness and fade) and a final one in which you see Lux awaken.
21
Character Design
22
ABOVE: first set of rough main character designs
23
Developing a characters design in both Photoshop and Illustrator, simplifying as much as possible to create the right kind of aesthetic. It was clear that both of these designs are far too complicated for a functioning app game character, as well as not translating well to the 3D maze designs I had been working on. 24
I realised that to create a coherent look to my game, I would probably need to stick to one software (post production photoshop not included). I had no experience in creating characters using Cinema 4D and had to start from the bottom, using simple polygons to build up a structure close enough to what I wanted.
Because of the themes I’ve decided to use, I began researching names related to; awakening, the subconscious, light/ darkness and memory. Many of these words are Latin in origin, making them slightly more recognisable to English speaking people (lux/ lumos/light for example).
The name “Lux” seemed to be a favourite amongst people I asked, the latin word for “light”, which I think fits in well with the themes. This also was a settling point in the use of two contrasting textures for my game - dark, mossy stone and bright, white light (the working maze example a few pages back is already working with this aesthetic style). 25
Above is the first character I created in Cinema 4D - it was obvious from the very beginning that clothing would not be an option for this character, as the flowing fabric look I wanted probably wouldn’t be achievable or at the very least would take a long time to render. I began working with simple polygons and developed a few different ideas - the designs on the page over show the development process. I used the bottom right image to show to my family, friends and peers to ask their
26
opinion on which character was best. Almost everyone said they liked the look of the third character, I believe this is because it was more fluid and had a slightly more child like appearance. This was the design I chose to further develop. I’m still not sure if or how I’m going to animate the character to move around the maze (e.g will he walk or float?) but I thought it might be useful to have a oneobject sculpted version of the character as well as one made from simple polygons.
27
This Page: test renders of a sculpted Lux character Page Across: finished sculpted Lux character under blue ambient light
28
29
30
31
Previous pages: stills from an animation showing what happens when you lose the game or if the character dies This Page: stills from an animation of the character waking up, to be used as an intro to the game itself
32
Enemy Concept + Design Method Designing the enemy was a very simple process for me; as the game centres around the idea of light vs dark and the main character Lux represents the light, it made sense for the enemies to be dark, shadowy creatures. It was also important to me at this part of the design process to keep things as simple as possible, for fear that things were starting to look too cluttered. Because of this I used Lux as a base for creating the characters shape, distorting the features and swapping the textures placed on the body and eyes. Because they manifest as darker versions of Lux, it further inforces the idea that what Lux is actually battling is himself and his own subconscious. Creating a dark creature within the dark setting meant I had to use a glow effect both within the eyes of the creature and around the edges. There is a similarity in appearances between the maze itself and the shadow creatures, which hopefully adds another level of coherency to the design and theme of the game.
33
This Page: enemy design + render of how the character dies (using a melt deformer Page Across: still from an animation showing the enemy die
34
35
Typeface Tests & App Logo Design 36
Using feedback as well as my own instinct, I decided to go with the use of #1; “EryxFreeForm� for the title and header sections and will either continue that use through smaller pieces of text
or will incorporate the use of Faraco Hand or Raleway (this is my standard goto font for body text as it is a clear, thin bodied sans-serif font) for smaller pieces of text and on-screen instructions. 37
Above: working ideas
38
Across: final chosen app logo design:
“MiTH” App Store/Play Store Logo Design
39
In-Game Textures
40
The previous page shows the textures used in the game, most of which are very simply made using glow effects or online sourced imagery. Above is an example of how the MiTH Icon would look amongst other games in the App Store.
For Earth Day, the App Store featured games to "celebrate the earth", not many of which were particularly "Earth Day" related, but all had a green or blue colour scheme which my App Logo and game itself fit into really well. This example shows the high market demand for games of this nature. 41
Game Trailers
42
43
For the teaser trailers, the main purpose is to peak people’s interest and create an atmosphere which gives people an idea of how the game will look and feel. The first teaser trailer (screen-shots of which can be seen on the previous page) didn’t seem to be very effective. I think this was due to some unprofessional editing tactics, lack of content and too much description provided in captions. For the second teaser trailer, I focussed more on creating the atmosphere, using alternate angles of the character as well as character movement and some sound effects which I created myself using an online music softtware called AudioSauna which allows you to mix synth tracks and save files.
Previous Page: screen-shots from the first teaser trailer mockup https://vimeo.com/161067357 Across: screen-shots from the second edit teaser trailer https://vimeo.com/161215343
44
45
46
With no background in creating music or using digital software such as AudioSauna the process was of course a challenge but the interface was very easy to use and it was really just a matter of creating the right patterns. The song I created is 2 minutes and 55 seconds in length, meaning I have plenty of material to use for a full length trailer. Also sourcing spoken word whisper sounds from Looperman.com, this further enhances the dream like atmosphere of the game. Although the track is in no way perfect, the rhythm in places is a bit off and the sound effects are not of the highest quality, through creating my own music I was able to visualise the exact kind of ambient state I wanted and enhance the visuals to create a truly captivating and slightly spooky feel to the trailer and the game itself.
Previous Page: screen-shots of the online AudioSauna software in use
47
In some senses, the final game trailer is the most important aspect of this project - it will be used to advertise the game and will be what most people remember of the graphics and game mechanics. I decided not to use the hand asset to move the character as it distracted from the game itself, and instead opted for a simple directional swipe graphic. Featuring both on-screen visuals and fully immersive animations, the trailer is intended to both captivate the audience but make clear the style and functionality of game-play without being too complex. For this reason, I omitted the on-screen logos in the animations such as the menu button and life bar, to allow the viewer to focus on the visuals of the gameplay itself and the design of the characters and maze.
Page Across: screen-shots from the final game trailer https://vimeo.com/164392581
48
49
Game Functions
50
Although this project is intended to be the concept and design work for a game, I still wanted to work out some of the functions and demonstrate how the gameplay would look. These are rouch sketches for how the onscreen functions would work, including how you move the character, switch views, enter the menu and keep track of your life bar.
51
This Page: In-game mock ups of how the buttons feature on screen Page Across: button icon design
52
The icons for on-screen functions needed to be really simple so that the appearance of them didn’t interfere with the aesthetics of the game itself. I wanted them to be fairly obvious and representative of what each one does, while styling them in a similar way to other aspects of the game;
being white with an outer glow means they will always be visible on the dark background setting. The placement of the icons on screen may not be perfect but for the purposes of this project and to get a rough idea of how the game will work, I have decided to leave them as they are. 53
This Page: level opening test from Cinema 4D Page Across: App opening phone mock ups
54
55
Poster Design
56
For the graduate exhibition, a minimum of three A1 prints are to be displayed, the first two of which I easily decided on - a shot of the main character Lux and one showing Lux entering the maze. After rendering images through Cinema 4D at the right resolution, some post-editing was needed to create the right ambient effect. The glow effect on the character doesn't always render properly in stills and so adding a glow in photoshop was an easy solution to this. For the maze shot it was also necessary to add in another copy of the background image as the lighting used in C4D creates a fog and made it slightly too transparent. Using layers to create more depth in the background, brighter fog around the character and centre orb,
adding fireflies and small amounts of text as well as changing the colour tone took the images from flat and uninteresting to professional looking game posters with appropriate depth and an ability to draw in the viewer. After researching game posters and film posters in relation to the chosen field (sci-fi, fantasy etc), I decided to keep the text minimal so as not to give too much away. I settled on using a date far enough in advance to create suspense but not so far that people will forget to keep up to date with progress. Using the tagline and game logo on different posters further enhances the "teaser trailer" aspect of conveying the mood and feel of the game without showing too much of the content.
Following pages: progression from Cinema 4D render to Illustrator exports of Lux character poster, maze entry poster and home screen orb poster
57
58
59
60
61
Alternate Game Levels 62
The original intent of this project was to create several different levels to demonstrate the gameplay. However, due to the unforeseen complexity of creating each maze, I was only able to create one that funtions, at least for the purposes of game trailers and rendered videos. However, to aid the reception of the game concept and project content I have created two alternate levels to demonstrate how they might look. The only real differences in the levels are the colours and textures, lighting and maze shape which may not be enough to hold people's interest beyond more than three levels but for the purposes of this project it demonstrates the endless possibilities in level creation using this premise.
Following pages: concept stills of alternate maze levels
63
64
65
66
67
3D Printing
68
I originally wanted to get vinyl toys or plushie dolls made of my character and possibly the enemies as well, but having only one made wasn’t a possibility (most companies required a minimum order of 100) and so the 3D printing facilities at university seemed like a good compromise. The first one was just a test to make sure it would print correctly (during this test the support systems for the arms didn’t work, causing them to come out in strange layers and without a smooth exterior). After the second test collapsed, it became clear that the only way to print the character would be lying down. Because the head is detached from the body, some postprint structure work would be necessary anyway (e.g. wire through the body holding the head in place) so printing the character lying down didn't create too much extra work in terms of adding the base. Of course I would have loved to have a glowing version of my character but for the purposes of this project I think the 3D printed version still adds a really great aspect.
69
This Page: 3D print test of Lux + failed print of Lux Page Across: final 3D printed Lux
70
71
Merchandise Website + Mock-ups 72
Left: examples of the Monument Valley plushie dolls
As Monument Valley was such a successful game, I have taken inspiration from the release and advertisement of it. One element of the game which I loved was that you could buy poster prints, t shirts, plushie dolls and all other kinds of merchandise that brought the game to life. Because of this, I really wanted
to have a go at making a plushie doll of my main character as well as some other merchandise. Most things are just going to be mock ups as the production costs would be far too high for one off pieces like this. However, I really enjoyed the process of making a Lux doll and think it makes a great addition to this body of work.
73
The making of the plushie doll was quite a simple process; I used white felt, toy stuffing and black buttons for the eyes and roughly cut the shape out of the felt based on the 3D character design. I decided to sacrifice the design element of the detached head as it was in no way possible for this toy, but as it is the head never stands up rigidly and this seems to convey the same kind of character personality. The plushie is in no way perfect, but it adds a playful element to the 74
project as well as showing what kind of merchandise could be easily produced to help the advertisement and sale of the game were it to be completed and released. The finished product can be seen on the page across, photographed simply with light behind to convey the glowing effect from the game. It cost about ÂŁ15 to produce and took roughly 3 hours. It would be sold through the MiTH Game website store for roughly ÂŁ25 to gain an adequate profit.
75
Above is a screen shot of the bigcartel shop I started for the MiTH merchandise. I wanted to keep it very simple for now with only one poster, one t-shirt and the plushie doll. This site can be accessed through the main promo website; www.labretgraphics.co.uk/mithgame. 76
Although there is very little on the website other than the trailer and a few images, I think it is plenty to peak people's interest and serves as an appropriate platform for the game trailer itself.
Above is a screen shot of the website home page. Everything about this game concept including the website is designed to immerse the viewer or player in the surroundings and ideas.
Beginning the website by asking the viewer a question and having them answer it to find out more about the game is one way of personalising the ideas and captivating people's interest. 77
ABOVE: mock up to show the game posters in a london tube setting
78
Above: mock up to show one of the alternate levels gameplay
79
Evaluation
Methodoligies
Production
As the concept for an app game rather than a prototype, the structure of promoting and advertising was crucial to the project. The main artifacts my work focussed on were the posters, game trailer, website, merchandise and game identity (logo, sound, ambient effect).
Only having been introduced to Cinema 4D in October of 2015, there was a limit to my ability to create the game I had imagined. However, through rendering several stills and applying post-render editing techniques in photoshop as well as managing to capture some motion graphics of the game, a style and gameplay feel has been developed.
My aim was really to create something unique and memorable, unlike any other game I know of. The end products of this are successful in creating a unique game experience but my skill level in the production methods slightly let down the artistic vision of the game.
80
I researched extensively into the current games market and App Games available of this nature but I did not come across one that had this immersive and slightly sinister element. My hope is that games developers would see the potential in the idea I have created and overlook my slightly amateur visualisations, as I am confident the concept of the game is much stronger than the production.
Dissemination & Consumption The main artifacts promoting my game concept are the trailer, posters and website. The posters could be displayed in any number of places; tube stations, bus stops, shops, magazines, online etc which would lead people to look up the website and view the trailer. The date featured in the poster creates more suspense in the release and explains the lack of game content suggesting it is still in production, as well as becoming available just before Christmas which could encourage people to keep an eye out for it and purchase it for someone as a gift. Social media accounts such as facebook, instagram and twitter
seemed slightly obsolete in the dissemination of this product because of its nature. In general, new phone or tablet games seem to reach people through word of mouth, posters, trailers and web sources. Adverts featured in the App Store or Play Store can boost sales but social media seems to have less of an effect on smaller games. However, if the game were to be fully completed and released social media elements could play a more important role, As well as this, paid advertisements on certain websites and online sources would be a great way of generating a customer base.
81
Evaluation continued
This module has been one of the most enjoyable for me throughout the entire degree. Being able to choose my subject matter entirely and work on something that truly inspires me has been a great experience. Only beginning to use Cinema 4D towards the end of the degree caused some challenges, as coming to terms with the software while trying to finish important deadlines was not the most ideal situation. However, Cinema 4D has now become one of my most often used tools in creating design work and I am now quite comfortable producing all kinds of graphics using the software. Although I would have loved to see a functioning version of my game, even in development stages, I
82
understand that my role as a graphic designer does not necessarily need to come to play in the functionality design. That being said, learning about game development using software such as Unity is something I will definitely pursue in future. Game design and concept art has always been a passion of mine, both to look at and to create. Were it not for the opportunities this project presented me with, I don't think I would have the level of confidence in relation to those subject areas as I have now. I stated from the beginning of this project that the intention was to create an "immersive, mystical, first person maze game" and although viewers will not be able to play a functioning version of the game, I believe the trailers and development work create
an immersive world in which the viewer can fully experience the depth of the mazes and spooky atmosphere of the game. As well as developing skills in Cinema 4D, this project has greatly helped with my ability in both After Effects and InDesign. Using skills learnt in the Professional Presentation module of third year, second semester also benefited the project as I was able to create a small promo website and create better layouts for poster prints and on-screen graphics. Despite this being the last piece of work I will produce in an educational environment, I think my process of learning about graphic design and concept art is just at it's beginning. There are many things I hope to
improve upon over the years such as higher quality graphics in Cinema 4D, better and more seamless editing skills in After Effects and to become more comfortable using different tools in InDesign. If there was one thing I could improve upon with this project it would be developing a more polished final look to some of my work, although I recognise the development in my skills in just these few short months, I hope people enjoy looking at this work as much as I have enjoyed creating it. I believe it showcases my personal style and influences extremely well and can hopefully be the starting point for a new artistic journey of my own, into the creative industries surrounding concept art and special effects.
83
Bibliography 84
Films
Labyrinth. United Kingdom and United States: Jim Henson, Dennis Lee, 1986. DVD. Pan's Labyrinth. Spain: Guillermo Del Toro, 2006. DVD. Harry Potter And The Goblet Of Fire. United Kingdom: Mike Newell, 2005. DVD. Alice In Wonderland. United States: Walt Disney, 1951. DVD. Websites
"Monument Valley: An Ios And Android Game By Ustwo". Monumentvalleygame.com. N.p., 2016. Web. 1 March. 2016. "Darklings". Welcome to MildMania. http://mildmania.com/darklings/ N.p., 2016. Web. 1 March 2016.
"LIMBO". Playdead.com. N.p., 2016. Web. 1 March 2016. "Audiosauna - Free Music Software - Make Music Online". Audiosauna.com. N.p., 2016. Web. 2 Apr. 2016. "Download Whisper Acapellas, Vocals Samples, Sounds, Rap, Singing, Songs". Looperman. N.p., 2016. Web. 2 Apr. 2016. Books Nielsen, Dorte and Hartmann, Kiki. (2010) Inspired: How creative people think, work and find inspiration. BIS Publishers. Solarski, Chris. (2012) Drawing Basics And Video Game Art. Watson-Guptill Publishers. Rogers, Scott. (2014) Level Up! The Guide to Great Video Game Design. John Wiley & Sons publishers.