# Project Journal ## Table of Contents 1. [Introduction](#introduction) 2. [Group Roles and Responsibilities](#group-roles-and-responsibilities) 3. [Methodology](#methodology) 4. [3D Environment Design](#3d-environment-design) 5. [Visual FX](#visual-fx) 6. [Title Screen Developments (Unused)](#title-screen-developments) 7. [Progress Log](#progress-log) 8. [Final Output](#final-output) 9. [Reflections](#reflections) ## 1. Introduction <a name="introduction"></a> Our project is a 2D story platformer which reimagines the tale of Macbeth. It aims to present Shakespeare's classic narrative within a distinctive setting that combines brutalist architectural themes with a mountain environment. Our game will aim to immerse players in a dark and atmospheric story which would use the visual style of brutalism to enhance the storytelling. The project encompasses various aspects of game development, including character design, level design, narrative creation, and visual effects. My primary responsibility within the team is to design the 3D environments and the title screen, ensuring these elements align with the overall artistic vision and contribute to an immersive player experience. ## 1.5 What is 'Brutalism' Brutalism is an architectural style that emerged in the mid-20th century, characterized by its stark, rugged, and bold aesthetic. It became particularly popular from the 1950s to the 1970s. The term "brutalism" is derived from the French word "béton brut," meaning "raw concrete," which refers to the material often used in brutalist buildings. ### Key Characteristics --- ### Materiality - Exposed Concrete: The most defining feature of brutalist architecture is the extensive use of raw, unfinished concrete. This gives buildings a solid, monolithic appearance. - Other Materials: While concrete is dominant, brutalism also uses brick, glass, steel, and rough-hewn stone. ### Form and Structure - Geometric Shapes: Brutalist buildings often feature strong geometric shapes and repetitive modular elements. - Monolithic Appearance: The buildings tend to look massive and fortress-like, with a sense of solidity and permanence. ### Functionality and Honesty - Functional Design: Brutalist architecture emphasizes functionality. The design often reflects the building's purpose and the arrangement of its interior spaces. - Honesty in Construction: The construction techniques and materials are left exposed and unadorned, conveying a sense of honesty and integrity. ### Social and Urban Context - Public and Institutional Use - Many brutalist buildings were constructed for public or institutional use, including government buildings, universities, and social housing. - Urban Integration: Brutalist architects aimed to integrate their buildings into the urban environment, often creating multi-use spaces that served the community. ### Historical Context Brutalism arose in the post-World War II era, a time when there was a need for affordable and efficient housing and public buildings due to widespread destruction and urban renewal. The style was influenced by modernist principles and was seen as a reaction against the decorative elements of earlier architectural styles. Architects like 'Le Corbusier', who emphasized functionalism and the use of concrete, were significant influences. ![Untitled(22)](https://hackmd.io/_uploads/BJOEozxdA.png) ## 2. Group Roles and Responsibilities <a name="group-roles-and-responsibilities"></a> 1. My Role - create assets for the environment(s), implement assets to create scenes, bring together group work visually, manage tasks among the group, provide post-processing to final output. ## 3. Methodology <a name="methodology"></a> - Modeling Assets in Maya: I will begin by designing and modeling all necessary 3D environment assets using Autodesk Maya. This includes creating detailed models of landscapes, structures, and other environmental elements that reflect the game's brutalist aesthetic. Each model will be meticulously crafted to ensure it aligns with the overall visual style and narrative themes of the game. - UV Mapping in Maya: Once the models are complete, I will proceed with UV mapping them in Maya. This process involves creating a UV layout that optimizes the space and allows for efficient and high-quality texturing. Proper UV mapping is crucial to ensure that textures are applied seamlessly and without distortion. - Texturing in Adobe Substance Painter: After UV mapping, I will import the models into Adobe Substance Painter for texturing. Using this tool, I will create efficient and high quality textures that enhance the visual appeal of the models. I will focus on creating textures that align with the game's themes. - Composing the Scene in Unity: Once the assets are textured, I will import them into Unity to compose the final scenes. This involves placing the models within the game environment, setting up lighting, and adding any necessary post-effects. I will ensure that the scenes are visually immersive, with elements working together to support the game's narrative and aesthetic. ## 4. 3D Environment Design <a name="3d-environment-design"></a> ### Conceptualization ![Untitled(9)](https://hackmd.io/_uploads/r1EINKYvA.png) The bold shapes are at the heart of brutalist architecture. The sharp angles, stark lines, and geometric forms featured in the moodboard are not merely design choices but statements of intent. They defy the conventional expectations of beauty and embrace a functional aesthetic that is both honest and unapologetic. These shapes create a visual language that speaks of strength and permanence. In my replication, I want to harness this language, ensuring that each form is as much about function as it is about form. The interplay of light and shadow on these bold shapes will be crucial in maintaining the dramatic and assertive character that brutalism embodies. ![Untitled(10)](https://hackmd.io/_uploads/HkiXSYYPA.png) While I feel that this mock-up has harnessed some core philosophies of 'brutalism' with the large/bold geometry and imposing background elements , I feel that it is missing the sharp edges that are so familiar to the architectural style. The scale of the scene is a success however I feel that it is too organic for the outcome I am pursuing. ## 5. Visual FX <a name="visual-fx"></a> ### Conceptualization To enhance the visual dynamism of my project, I plan to integrate three specific visual effects: smoke, a boss spawn effect, and a slashing effect for the character. Each effect will add a unique element to the scenes, elevating the overall aesthetic and immersive quality of the experience. ### Smoke VFX The introduction of smoke VFX will add depth and atmosphere to the scenes. I envision using smoke to create a sense of mystery and tension, enhancing the visual storytelling. I plan to mix the colours around to experiment with how different visuals impact the scene. ### Boss Spawn Effect: Beam of Light For the boss spawn effect, I aim to create a dramatic and visually striking beam of light. This effect will symbolize the arrival of a powerful entity, enhancing the anticipation and intensity of the moment. The beam will originate from the sky or ground, depending on the scene, and will include dynamic lighting and particle effects to simulate energy and power. ### Character Slashing Effect I aim to produce a slashing effect that could be used by the character for combat / abilities . If the concept of the game were to be progressed , this effect could be used for things such as breaking through walls etc. I will likely create an outward expanding arc with an emission effect applied. --- ### Smoke ![Untitled(11)](https://hackmd.io/_uploads/BkBqPtFvA.png) I begun the development of the smoke plume VFX with a simple collection of Iso Spheres which I merged and deformed the mesh. I used the emitter nodes present in UE5 to add properties like ; spawn rates , mesh renderer and velocity. To progress this I will be adding : - Colour gradients - Decay simulators - Emission - Size curves ![Untitled(12)](https://hackmd.io/_uploads/ByLpPYKDC.png) ![Untitled(13)](https://hackmd.io/_uploads/r1BuuFKvR.png) https://youtu.be/_JMGCfwCsEw --- ### Boss Spawn Beam ![Untitled(15)](https://hackmd.io/_uploads/BJBqtttwR.png) I started off with a scaled up cylinder that had a non-uniform mesh scale modifier. I added properties such as emission to this and adjusted the modifiers curve so that the beam would seem to fluctuate throughout it's life cycle. This would serve as the centre of the effect where the energy is ocncentrated and gives me something to build off of. --- ![Untitled(14)](https://hackmd.io/_uploads/rJ7BYKYD0.png) I then added a surrounding cylinder accompanied by different emissions ( range of brightnesses ) in order to add depth to the effect. At this point I had a cylinder inside and one outside that fluctuated in scale and then dissapeared. To add further detail to this I also included layers on top of the outer beam which show as the non-uniform effects running from the bottom to the top of the beam and also duplicated this and heavily increased the upwards velocity and scale to create the seperate fragments of light shooting up around the beam. ![image](https://hackmd.io/_uploads/ry2sYttwA.png) https://youtu.be/XSWHFD4yhZQ --- ### Slash effect ![orb](https://hackmd.io/_uploads/B1Szv8JuR.png) I originally wanted the slashing effect to be one that encompassed the player , so I created an orb with smooth and deformation modifiers which gave me the orb which had mostly dissolved, I then applied a simple deform along the Z axis to create the spinning orb look , this was accompanied by a rotating animation and an emission node. This however did not fit with the theme of the 2D game so I will look to create an alternative. --- ![Untitled(16)](https://hackmd.io/_uploads/H1OzwU1uC.png) I feel that this outcome was more succesful for the game as it is shown on a 2D viewpoint , I made use of many similar techniques as the last design however I simply applied these to a plane rather than a sphere and then I proceeded to manually edit and delete a number of faces to achieve the desried look ## 6. Title Screen Developments (Unused) <a name="#title-screen-developments"></a> ### Conceptualisation 1. Rotating 3D Crown: The crown, intricately designed with a brutalist aesthetic, will slowly rotate in the center of the screen. Its detailed textures and realistic reflections will capture the player's attention and convey a sense of power and opulence. 2. Background: The background will be dark and minimalist, ensuring that the focus remains on the crown. Subtle animations, such as faint, drifting particles or soft lighting changes, will enhance the atmosphere without distracting from the main visual. 3. Title and Menu Options: The game title will be displayed prominently above or below the crown, using a font that complements the game's theme. Menu options, such as "Start Game," "Options," and "Exit," will be neatly arranged, ensuring easy navigation. ![Untitled(17)](https://hackmd.io/_uploads/SJG8TUkd0.png) --- https://youtu.be/s4OwamSOAeI --- ### Themes and Symbolism 1. Royalty and Status: The crown symbolizes authority and dominance, directly referencing the themes of royalty and the quest for power that are central to the game's storyline. 2. Greed and Ambition: The opulence of the crown also represents the greed and ambition that drive the characters in the game. Its continuous rotation suggests the endless cycle of desire and the pursuit of status. 3. Brutalist Aesthetic: The design of the crown, with its harsh lines and solid structure, reflects the brutalist architecture theme present throughout the game, reinforcing the overall visual cohesion. --- ## 7. Progress Log <a name="progress-log"></a> ![Untitled(4)](https://hackmd.io/_uploads/rkt0UwfSR.png) ![Untitled(3)](https://hackmd.io/_uploads/SyAS8vzr0.png) These are two scene experiments that I will not be taking forward through the project. I felt they did not match the brutalist theme as well as they should. However, I will be making use of assets from the first scene as I feel the pillars and gates I created would work well elsewhere. ### Scene Development ### Scene 1 ![Untitled(8)](https://hackmd.io/_uploads/BJlfnDGHA.png) Scene 1 is the start of the game , a vast landscape accompanied by an out of place brutalist structure toward it's end . I tried to work with depth and simplistic shapes that conveyed the style while still retaining their organic look as natural structures. I plan to add the smoke VFX to the scene , adding depth and detail and also plan on doing something new for the skybox myself. --- ### Scene 2 ![Untitled(18)](https://hackmd.io/_uploads/B1kKxPyOR.png) For scene 2 I wanted to really play on perspective and a building of layers to communicate the style of brutalism . I focused on repetition by creating some basic shapes and layering them one on top of the other while scattering the geometry further into the background. I wanted this scene to be a juxtaposition of scene 1 in that the foreground is very similar but as you go further into the back of the scene, the brutalist style becomes more and more apparent. I played with lighting in order to higlhight different faces of each piece of geometry and really add to the chaos as different directional lights conflict with each other. --- ### Scene 3 ![Untitled(19)](https://hackmd.io/_uploads/B1Htgwkd0.png) Scene 3 is the boss fight room , I wanted to keep that feeling of a level which reaches far into the background so I created large imposing pillars which will run the length of the environment. I used UE5 water effects on top of a material I pulled from 'UE5 Megascans' to create a wet floor look. I am currently debating what to do with the rocks and geometry as I have started creating a shader for the skybox and I am using it as a placeholder for what I want as crystals in the scene. ## Material Creation and Sourcing ### Crystal Attempt ![Untitled](https://hackmd.io/_uploads/Sy1C4PzS0.png) I have been experimenting with this shader which makes use of 'Parallax Occlusion Mapping' to create the illusion of depth in the product. I attempted to utilise pre-exisiting normal maps of crystals along with masks/multipliers to achieve this effect however it is not providing the outcome I had hoped for. --- ### Improved Shader I decided to revisit the shader with a different goal in mind, I wanted to focus more on the VFX of the material rather than the actual textures themselves. I created multiple layers of emission/glow on the inner and outer of the shader which required the implimentation of many gradients and maths nodes (multiply/add/divide). I then used the starter content provided by UE5 (Simple noise textures) and projected them inside of the shader . After apllying emissions and rotations I created what looks like a orbiting cloud visual inside of the shader which would work amazingly as a skybox. To add to this, I included another noise texture and scaled it so that it appeared as small specs along the shader, after applying an emission to these they worked well as small yet bright stars throughout the product. ![Untitled(1)](https://hackmd.io/_uploads/BJlXSwGBA.png) ![Untitled(2)](https://hackmd.io/_uploads/B1L_rDGrA.png) The shader works for both a skybox and as the texture for crystals , I simply need to alter the colour values inside the shader graph to change the look to fit the needs of either different crystals or the skybox. I decided the skybox should include different shades of dark red/lighter purple throughout all of the scenes as it matches well with the dark reds included in our theme while also complimenting the theme of magic included in the story. ## 8. Final Output <a name="final-output"></a> Outline the next steps in the project timeline. What tasks need to be completed next? Any adjustments to the methodology or goals? ### Scene 2 ![Untitled(5)](https://hackmd.io/_uploads/r1w8vDMrA.png) ### Scene 1 ![Untitled(6)](https://hackmd.io/_uploads/HkixtDGrR.png) ### Scene 3 ![Untitled(20)](https://hackmd.io/_uploads/SJrhtPyu0.png) ### Full ![Untitled(24)](https://hackmd.io/_uploads/HksLj6-d0.png) ### Group Presentation Link https://docs.google.com/presentation/d/1bE3hadgUZbVs6LulYJNqnM4vqIhvChUUAmQcfDa3B4Q/edit?usp=sharing Link above to the group presentation for 'Zeal' ## 9. Reflections <a name="reflections"></a> ### Design and Style - Brutalist Influence: Choosing brutalist architecture as a guiding aesthetic was a bold and effective decision. Brutalism, with its raw materials, stark geometric shapes, and no-frills approach, translates well into a 3D environment that maintains a strong visual identity even when viewed from a 2D perspective. This choice not only gives the game a unique visual appeal but also ensures the environments are cohesive and impactful. - Modular Designs: Employing modular designs was a strategic approach to environment creation. This method allowed for efficient asset reuse, ensuring consistency across different scenes while saving time and resources. Modular components can be rearranged and reused to create varied environments without compromising the overall aesthetic, which is particularly beneficial in game development. ### Technical Execution - 3D to 2D Perspective: Successfully creating 3D environments that function well from a 2D perspective was a challenging feat. It required careful consideration of camera angles, depth perception, and the interaction between different elements. - Visual FX and Shaders: The creation of multiple successful shaders and VFX helped to increase the quality of the concept drastically. They played a crucial role in setting the tone and mood of the scenes . The shaders used for the skybox and crystals added a layer of depth to the magical/fantastical themes present in the story while also improving the players visual experience in the game. ### Possible Improvements - While the group was able to reach their individual goals effectivley, maintaining roles they felt comfortable in, it may have been beneficial to discuss alternative talents that group members could make use of in order to contribute to the project. I felt that I would have benefitted massivley from a colleague helping me with the 3D aspects of the game ... We may have been able to create some more in-depth textures for the game assets, something I felt I wasn't capable of in the given time frame while also handling all the scene creation + VFX creation . I was originally contributing the title screen as well, however my team was able to cover that which I very much appreciated. ## References Reference list#SOSBRUTALISM. (2017). #SOSBrutalism. [online] Available at: https://www.sosbrutalism.org/cms/15802395.Anon, (n.d.). Docomomo International – Architecture Archive. [online] Available at: https://docomomo.com [Accessed 13 Jul. 2024].Pinterest (2024). Pinterest (United Kingdom). [online] Pinterest. Available at: https://www.pinterest.co.uk.The (2020). Macbeth - A Complete Analysis (Shakespeare’s Works Explained). YouTube. Available at: https://www.youtube.com/watch?v=AiOloUR4tZw [Accessed 22 Aug. 2022].UNF Games (2023). Learn how to make VFX Materials for beginners inside Unreal Engine 5.2 ! [online] YouTube. Available at: https://www.youtube.com/watch?v=IucqtUj-fqE [Accessed 13 Jul. 2024].Waldek, S. (2018). See Le Corbusier’s Complete Works. [online] Architectural Digest. Available at: https://www.architecturaldigest.com/story/le-corbusier-the-built-work-book.www.unrealengine.com. (n.d.). Megascans. [online] Available at: https://www.unrealengine.com/marketplace/en-US/content-cat/assets/megascans?count=20&sortBy=effectiveDate&sortDir=DESC&start=0.