# Collaborative Game Studio Practice
# Poppy Wade (20029709)
# Individual Production log
## [Link to Group Portfolio ](https://docs.google.com/presentation/d/1bE3hadgUZbVs6LulYJNqnM4vqIhvChUUAmQcfDa3B4Q/edit?usp=sharing)
## [Original document with correct formatting, links and video ](https://hackmd.io/@mqfHQ7bvReiL--olJnOf-g/r1OfVH9qp)
## Introduction

### Learning outcomes of this project

* Express advanced critical and contextual understanding that situates their practice within wider professional and cultural frameworks
* Work collaboratively with peers in SODA or other national and international partners to create complex and exciting creative opportunities.
* Employ rigorous project management and organisational skills within a group context.
* Apply expanded interdisciplinary craft and technical skills to produce innovative creative outputs.

### Unit Brief: Create a body of work made in collaboration in the creative and digital. This project work may be driven by themes of shared interest, creative curiosity or technological methodologies.

**Team:** Cater, Felix, Rhys and myself
**Structure:** 2^1/2^D side scroller game
**What are we designing:** A side scroller game in the the theme of Macbeth that includes 3D backgrounds, 2 and 3D character art and supporting preproduction concepts and contextual references.
**Direction of my personal work**: Explore 2D artwork through the framwork of Macbeth, developing UI, character and environment art.

## Preproduction

### Exploring thematic and solidifying our concept

To kickstart the project, my team and I elected to use a collaborative whiteboard ([MiroBoard](https://miro.com/welcomeonboard/UzhrUFRINWFZUVZidWNoZFBMNWhseEJ0UHB1NkhCV3dvMDhKUGUwSUFpSDRNZmRoYnlpeUc1bjBmdE12aHRVdnwzNDU4NzY0NTQ1MjE4ODkwMjI2fDI=?share_link_id=414588465880)) to generate lots of ideas based on the thematics we had to choose form.

###### Original options for thematic

###### Idea Generation

Taking from everyone's contributions to the board, we found that we were most drawn to the thematic '**Macbeth court set in a brutalist housing estate**'

###### Mindmap of our initial ideas.

### Group Organisation

After establishing the concept, we began to assign team roles, and talk about our expectations for our final outcome.

We continued using miro as it was easily available for everyone and meant we could document our tasks and group meetings in a way that everybody could contribute their thoughts.


Working from Rhys's narrative, I went through the story and pulled elements that we coul develop in our work indiviually. After discussing everybodies preferences and aims for their personal work, I put together an asset list to delegate what we needed.
###### Asset List

###### Rhys' made the list official and added outcome requirements

Together, Rhys and I worked on a gantt chart as a tool to streamline our group workflow and help keep to a schedule. We also alloted time for tri-weekly reviews in order to keep track of progress.

###### Group Gantt chart

We chose to document our reviews on Miro as it meant everybody could add to the notes as we had the meeting. These reviews were helpful in assessing where everyone was in terms of their own work.

###### Reviews documented on Miro

Our week three review was especially helpful to me as I was having a lot of trouble engaging with the artstyle we had chosen. I had voiced in the early concept stages that I felt that the project was too simple, in style and theme, but I was out-ruled. However during this review, my teammates expressed that they were having similar issues with the 'Hollow Knight' style.

Due to this we pivoted the artstyle to be less simple, but we still intended to take inspiration from 'Hollow Knight' in terms of gameplay. This gave us more room stylistically to explore the mask and mystical themes.

### Developing a Style Guide

After the week three review, I made style guides to ensure everybody could be on the same page. This was incredibly helpful as it meant that we were all working from the same references and colour pallet. In my environment concept work, I used the colour pallete Rhys developed and tried to consider the character art he had made from the guide to create visual harmony.



---

### Research and context

#### Macbeth

Macbeth is a Shakespearean play about the mediaeval king of Scotland and his pursuit for power, ultimately leading to his demise. ‘The Scottish play' was first published in the 1600s, and has had many iterations over time. To explore how we can include its themes in our project, I looked at the different interpretations and productions of Macbeth that give the ancient story a fresh perspective.

#### Southwark's playhouse

The southwark playhouse’s production of Macbeth is said to be ‘Visceral, animalistic & strange’^1^ showing the company is on stage throughout, dressed in braces and sackcloth kilts and daubed with mud.
There are unsettling visuals, where the actors are seen moving as a group, twisting and grasping at things in the air around them. A haunted atmosphere surrounds the play from the start, encompassing the paranormal nature of the play itself.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ay9B7ceoL3E?si=IxekQgqm3glkF-3H" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


The visuals of the grotesque bodies moving as one are something I think could be very interesting to explore in terms of a boss fight creature. Another element of this production that stood out to me was the use of lighting. The cast of purple adds to the feeling of the supernatural, and it could be interesting to explore similar effects in our environment.

#### Character exploration

As a Shakespearean tragedy, one of the main themes of Macbeth is the psychological unravelling of the court and the danger of a blind pursuit of power.^4^ Our main visual reference Hollow Knight has a very simple art style, and I thought it would be a challenge to convey the complex symbolism of the entire play in simple formats, so instead I looked into characters in the play and explored symbolism associated with their main traits to create more conceptual designs.

#### Hollow Knight

"Hollow Knight" is a side scroller game made by Team Cherry. you play as a silent knight exploring a vast underground world called Hallownest. Fighting creatures, finding secrets, and facing tough bosses are the main play elements. With a beautiful art style and tricky gameplay, players developed a love for its challenging but fun gameplay and the amazing world it creates.

<iframe width="560" height="315" src="https://www.youtube.com/embed/UAO2urG23S4?si=ETcqY9SvbXbBdeqx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

In our project we hope to take inspiration from various elements of the game, such as its simplistic character design, gameplay and 21/2D background style. In my personal work I would like to expand on the simplicity in my own designs as I want to make sure it is unique and stands alone without being a direct copy of hollow knight .

### Early Art development - Divergent to convergent pipeline

My approach during the concept art stage was to use a **linear pipeline approach**, starting with a wide variety of ideas and designs, before finding the ones that resonate the most with my style and the needs of the game. This follows a a traditional, sequential progression of phases. this workflow is often seen in larger studios with more extensive budgets.

###### Rhys's Style Board

###### My own iterations based on Rhys's style board


###### Exploring non human designs

###### Venetian mask study

My aim during this stage was to explore a variety of different ideas, but I was having trouble finding a balance between my own personal style and the references my team agreed upon before I created an established style guide.

### Refocusing my frame of reference
To refocus my work, I decided to find some visual references of my own as a starting point to create some more cohesive character concepts.

###### Miro Board character concepts

###### Lady Macbeth's character traits


###### Moodboard based on character traits

#### The Royal Court - 1500s french reneeisance era fashion

The ‘royal court’ refers to the extended household of a monarch and can include thousands of individuals. While it is often explored throughout fantasy, royal courts have existed in europe for hundreds of years, the oldest record of a court in the UK dating back to the thirteenth century in Derbyshire.^2^ The size and purpose of a royal court was determined by power and alliances held by the ruler/person of importance.

Under the rule of Francis I in the 1500's, the costume of the royal court pivoted to luxury.its aim was to the beauty of the wearer with embroidery, rich fabrics and jewellery in an extravagant manner. ^3^ Long heavy cloaks and gowns were introduced, and the connections of the court were often symbolised through colours and patterns. Ladies in waiting for example often wore softer colours to symbolise their companionship to their queen. The cloak imagery is something my group chose to follow in the project to relate to our main game reference (Hollow Knight). Rather than focusing on the cloak motif in my own designs, I want to explore what elements could convey their role in court, hidden or otherwise.

###### Dress worn in the court of Louis XIV

###### Focused moodboard- Demure queen - spider mask

**'To Look like look like the innocent flower but be the serpent under it'**

To incorporate the mask motif that we had agreed on as a team, I chose to depict the Lady Macbeth character as a cunning shapeshifter, not only in her physical appearance but in her manipulation of others. Outwardly she presents as a quiet, demure queen type, but underneath she is a devious spider witch.

######
###### Basic colour block

###### shading process


###### Exploring shading in difference tones

## Production

### UI Development
UI elements I want to create:
* Title Screen
* Loading Screen
* Logo
* character selection

My approach to UI development was to aim for something simple and eye catching. Before sketching, I tried to itemise what elements of our game were most important to translate into the different elements while still maintaining a simple style. The main elements not only came from our source material (macbeth) but also from the established style guide that my teammate developed. The main elements I wanted to explore were:
* Crowns
* Rhys’ established colour pallet
* Daggers
* Masks
* Tarot cards

###### Moodboard based on main elements

#### Logo design


###### Coloured logo using Rhys' colour pallete

###### Tarot design coloured

I felt that the tarot card logo design was too intricate to use as the main game logo, and that it didn’t reflect the main themes of the game. I reviewed my designs with my teammates and they liked the idea of playing with tarot cards as a design element in the UI, perhaps as a character selection screen (which was suggested during the pitch) along with the possibility of exploring them via physical means.
###### Presentation feedback from [padlet](https://padlet.com/popzme5/macbeth-game-feedback-x61zuhlyjx5qgzdj)

From this feedback, I sent the frame I designed for the tarot logo over to Rhys (main character artist) who designed a metallic effect on top and placed his character into the frame. This gave me more of an idea of how I would like the character selection screen to look. Once the idle animation frames of the characters are complete I will be able to drop them into the selection screen.

###### Rhys' character art using my frame

good info for bibliog
https://www.sketch.com/blog/game-ui-design/

free vector assets that are cool for icons
https://www.sketch.com/blog/game-ui-design/

https://freepik.com/free-vector/esoteric-mystical-elements_8622797.htm#fromView=search&page=1&position=27&uuid=25ad92cf-ca32-46ad-92fb-1b1fdff73700

###### Rough draft for improved logo design

The original logos I had designed didn't feel enough like game logos to me so I went back to the start and sketched out a design using the name itself.
###### detailed name logo

After some feedback from our final week presentation, I was struggling to make a logo that fit in all of our themes, so I sent my work over to Rhys.

###### Rhys's final logo

### Loading screen

Based on my UI moodboard I made a rough draft of what I invisioned for the loading screen.

###### First draft

To help draw out the blood dripping into the water I watched a video of a water droplet into a pool. Then I took screenshots every few frames and lined them up next to my page.

###### Water droplet reference images

###### Frame timeline

I hand drew each frame following a basic animation workflow in which you duplicate the previous frame layer and match the layer visibility to it's corresponding frame in the timeline.

###### Final loading screen

### Environment Concept Art

One of the main aspects of our thematic is centered around Brutalism. It is characterised by it’s ‘emphasis on materials, textures and construction, producing highly expressive forms.’^5^ In contrast it is often used in game art settings to create a feeling of threat. It’s harsh and imposing forms, along with the use of concrete creates a feeling of powerlessness in the player, and has been used with other artistic styles throughout game history, to contrast in storytelling, or to help drive the themes of the game.

###### Barbican Centre and Estate - London

###### Example of brutalism in Manchester - Contact theatre


#### NaissanceE (2014)

A main reference of how brutalism has been used in a gameplay setting is NaissanceE (Limasse Five 2014).The shapes and forms, constructed from basic cubes and cylinders read as a character in of itself in the game. Simple shapes and basic monochrome allows players to input their own story upon the environment, allowing for a purely visual storytelling experience.

While ‘NaissanceE’’s environments seem harsh and unlivable, the artstyle has a ‘sketch-like beauty’^6^. Dan Solberg describes the game to be an exploration of the artist’s sketches, rather than mainly focused on storytelling and gameplay. In contrast to what we expect from brutalism, the artstyle is ‘impressionistic works, often culling as much from the stream of consciousness as the still life in front of you.’


I would like to explore these ideas in my own work, exploring how I can contrast the brutalistic style in a new way, as I feel brutalism alone is too simple and doesn't match my personal style. It also contrasts heavily with the mediaeval style of our characters and story, so to help the two make sense I would like to explore combining the old, often messy and unruly brickwork of mediaeval castles with the strident forms of brutalist builds.

#### Castle design process

To begin the environment design process I first explored thumbnails based on the moodboard I created. My goal was to blend the environments that castles are usually found in, along with the brickwork and ‘texture’ of them with the structures of brutalism.

###### Brutalist x Castle moodboard

###### Thumbnails

###### Photobash reference

###### First blockin (shapes and composition)

###### Adding detail and establishing foreground

At this point I wasn't happy with the cylindrical shaped tunnel as it didn't fit into the brutalism theme and the shape language of the castle. I also used a grid overlay to ensure the composition was visually pleasing by using the rule of thirds,

###### Rule of thirds grid

###### Final block composition

I wanted to push the proportions of the castle a little bit more so I narrowed the castle at the top to imply that it is taller and more imposing over the landscape- which was a key element mentioned in the style guide.

###### Castle with pushed proportions

###### Adding a moon for detail

###### Final sketch before painting

#### Colour pallete process

Using my art reference, as well as Rhys's character art and colour pallete I used the photoshop colour picker to develop a complimentary theme that would make the red in the character pop if it were to be placed in my environment. I chose blues and greens as they are complimentary to eachother.

###### Colours taken directly from Rhys's character

###### Character set against my environment pallete

###### First colour block
###### Adjusting smaller elements

Inspired by the use of purple light in the Southwark playhouse's 'Macbeth' and the mist referenced in the style guide, I wanted to make the scene feel more supernatural so I added red mist elements.

###### Supernatural mist

I began the painting process by working in sections split into foreground, midground and background layers.

###### Adding details in stages

###### Adjusting contrast

In game, the light arch is used as a 'scanner' to recognise anyone ready to enter the castle, and adds a debuff of lowered health to fight the final boss.

###### Arch detail

I found the green edge of cliff quite distracting to the overall piece so I changed the colour and repainted it to match the rest of the piece.

###### Green cliff before

###### Cliff after repainting

To incorporate the medieval castle theme from seen in the original Macbeth story, I tried to add a brick texture to the walls of the castle to push it away from being too futuristic

###### Castle brick detail

###### Final painting before additions

I felt like the entire piece felt very swampy and monotone, so I experimented with changing the colour of the sky to offset the greens and blues.

###### Sky colour options

###### Composition edits

The final detail to add was the red mist, which helped in breaking up the colours.

###### Final concept art piece

### Environment splash art

As I enjoyed the process of environment painting so much when creating the concept art for the castle, I wanted to incorporate the skills I had developed into my UI development. I chose to work on the title screen, following a similar process.

Due to the loading screen being very minimalistic, I first explored a minimalist style for the title screen, but ultimately I chose to pivot as I felt it was too vague.

###### Minimalist title screen

Using one of the castles from my thumbnails earlier, I put together a rough composition to begin sketching from, again using a grid to consider the rule of thirds. The concept includes the castle, logo and a sketch of the mask Rhys designed left abandoned in the river.

###### Refrerence photobash

Following the same workflow I used for the castle concept art, I blocked out the foreground, midground and background.

###### block and sketch
###### Reference board

###### Colour block including mountains to tie into Carter's environment art

To tie in the red mist from my concept art I overlayed a red glow coming from the moon.


When painting the environment, I made sure to hide the moon glow layer in order to make sure each element of the painting matched and made sense together. I wanted to have the option to take the red overlay away incase I didn't like it in the final product, but I periodically checked how it looked after I completed each section

###### Checking the painting against the red overlay


###### Finished painting, no red glow

###### Red overlay

###### Finished splash art with Rhys's logo

###### In-game selection screen

## Project Review

Overall, I feel that this project pushed me to explore aspects of concept art that I had little experience with prior, such as Environment art. Due to the strong foundations of contextual research in the beginning, using the original play as a jumping off point, it allowed us to focus on an innovative interpretation of a story that is hundreds of years old. In my personal project, I found that studying the source text, then translating metaphors into reference boards helped establish my Lady Macbeth character.

###### Spider metaphor

The collaboration between Rhys and I was very strong, and throughout all of my concept art and UI development I kept his main character design and colour palette in mind. We also kept great communication, meaning we were able to input suggestions to each other's work and add our own touches, such as Rhys adding a metallic overlay to my tarot card design. We had strong organisation as a team despite some teammates having limited communication with us, such as using gantt charts and asset lists to establish team mate roles and outputs.

###### Rhy's character with my tarot design, overlayed with gold

In terms of a final piece of collaborative work, I focused on creating the menu screen splash art, incorporating both elements of Rhy’s character and his revised logo. It was difficult to establish a vertical slice showing what the gameplay would look like due to a failure to communicate and share artwork development from the 3D environment artist. This meant the original plan of a 3D background with 2D characters wasn’t able to be developed. To expand on this project, I would try to develop my own 3D backgrounds in Unreal engine, to help visualise what our game would look like.

###### Collaborarive splash art

## Bibliography

1. Bolton, T. (2023) ‘Visceral, animalistic & strange’: MACBETH – Southwark Playhouse, My Theatre Mates. Available at: https://mytheatremates.com/macbeth-southwark-playhouse-tom/ (Accessed: February 20, 2024).
1. Evegilks, P. by (2022) Derbyshire’s Barmote Court – The oldest court in England, Buxton Museum and Art Gallery. Available at: https://buxtonmuseumandartgallery.wordpress.com/2022/11/19/derbyshires-barmote-court-the-oldest-court-in-england/ (Accessed: February 20, 2024).
1. La mode à la Cour de François Ier (no date) Commedesfrancais.com. Available at: https://commedesfrancais.com/gb/story/la-mode-de-la-renaissance (Accessed: February 20, 2024).
1. (No date) Org.uk. Available at: https://www.rsc.org.uk/shakespeare-learning-zone/macbeth/character/whoswhom (Accessed: February 20, 2024).
1Brutalism (n.d.) Architecture.com. Available at: https://www.architecture.com/explore-architecture/brutalism (Accessed: 22 March 2024).

5. Brutalism (n.d.) Architecture.com. Available at: https://www.architecture.com/explore-architecture/brutalism (Accessed: 22 March 2024).
6. Solberg, D. (2014) 'The beguiling, sketch-like beauty of NaissanceE', Kill Screen - Previously, 14 February. Available at: https://killscreen.com/previously/articles/beguiling-sketch-beauty-naissance/ (Accessed: 22 March 2024).