Game Research

In this documentation, we take a step further into the music creation for the Role-Playing Game (RPG) Mechanical Saga: Life’s Ultimate Gamble and its adaptive elements. After exploring dynamic implementation techniques in the previous semester, we now apply and tailor them to best serve the gameplay experience. Firstly it is crucial to understand the game’s concept and how it is played, which will be analyzed in this paper. After understanding the game, there is a better foundation on how to go about the music, what qualities it should have, also having in mind that it should ideally sound cohesive throughout the game, maintaining a sense of unity between different scenes.

What is the game about?

 “Mechanical God Saga”is a video game that places a strong emphasis on storytelling, exploration and impactful consequences ofplayer choices. It blends key elements of both Japanese and WesternRPG’s, aiming to revolutionize both genres and craft an immersive experience.

The narrative seeks to explore the themes of totalitarianism, genetic mutation, and the clash between humanity and altered beings in a post-apocalyptic society. It delves into the nature of power, the impact of historical cataclysms, and the potential for coexistence amid oppression and prejudice.

Centuries after a devastating nuclear event, the remnants of humanity are trapped in a totalitarian society that has emerged from the ruins of their former civilization. Genetic mutations, stemming from the nuclear disaster and historical experiments, have given some insects and animals extraordinary abilities, enabling them to coexist with humans as equals.

Among humans, a specific gene continues to manifest, resulting in physical deformities such as wings or scarred skin, which society deems as demonic. This has led to persecution by the God Emperor, who seeks to enslave or exterminate these individuals as a religious campaign.

Amid this turmoil, a mysterious entity known as „The Mechanical God“ observes the unfolding events, while its presence and connection to the nuclear catastrophe remain enigmatic.

The narrative raises critical questions:

  • What drives the God Emperor’s genocidal obsession?
  • Can humans and these so-called demons ever achieve peaceful coexistence, or will one group always dominate the other?
  • What dark secrets link the Mechanical God to the origins of the nuclear disaster and the current societal conflicts?

Through these inquiries, the story examines the possibility of overcoming deeply ingrained prejudices and the quest for truth in a world scarred by its past.

What is the goal of the gameplay?

As a Role-Playing Game, there is a significant emphasis on battles and the evolution of playable characters. The player is encouraged to continually enhance the fighting abilities of the characters, whether by exploring various scenarios to find better items and equipment or by manipulating the flow of battle to maximize gained experience.

Gameplay also serves the narrative (and vice versa) in the sense that the player will constantly have to make decisions, sometimes in dialogues but often in actions during battles, affecting how the game world reacts to the characters. Therefore, on the journey to becoming increasingly capable in battles, the player will inevitably have to decide what kind of character they are building and what actions they are willing to take to accumulate more power. These decisions will be, but not limited to, based on moral and interpersonal dilemmas, prompting the player to seek a balance between the moral compass envisioned for the main character and their insatiable quest for power: essential to overcome and surpass the challenges presented by the narrative.

How is it played?

There are different ways of interacting with the game:

  • Exploration

The player will physically navigate the character through a series of interconnected scenarios filled with secrets and hidden optional paths. For players who prefer a more straightforward experience, there will be a linear path available to follow from beginning to end. However, players that take the time to explore and carefully consider clues presented through dialogue and visual context will be rewarded with unique items and abilities that, when used strategically, can significantly alter their gameplay experience. 

  • Dialogue and Decisions

Throughout the game, the player will encounter numerous opportunities to interact with other characters and the world by choosing from multiple options. These choices not only affect the overall narrative but also have an impact on how characters and the world react to the player. For example, consistently exhibiting aggressive behavior toward a faction will lead its members to share that information and respond with displeasure. This principle applies equally to villagers, city residents, and even allies.

  • Battles

The game features a complex and challenging battle system. Battles occur in turns, with each character performing their action in sequence.

Unlike other games with more traditional turn-based systems, where battle interaction is limited to choosing options from a menu, in Mechanical God Saga, the player has the possibility to perform a sequence of inputs to maximize damage to the enemy. Similarly, when under attack, the player, by pressing the defense button at the exact moment the enemy attack hits, can defend themselves, reducing damage by 50%. Thus, actions in battle are interactive and dynamic.

When attacking, the player accumulates a combo counter. By successfully defending enemy attacks in their entirety, they can maintain the combo from turn to turn, increasing it each time. Increasing the combo also proportionally increases the damage the player inflicts on enemies. Consequently, by increasing the damage done with each action, the player also proportionally increases the experience points earned when executing their turn. In this way, the defense mechanism is not only suitable for reducing received damage but also for increasing the maximum potential damage to be dealt and for gaining experience points more quickly, efficiently, and intelligently.

This combo counter is retained from battle to battle. This requires the player to always be attentive and carefully execute their actions, even when facing weaker enemies on the path to a challenging enemy, as maintaining this combo can be the difference between victory and defeat.

Types of Interactions

After finalizing the compositional idea, I attempted to compile a list of all the signal processing types and audio effects that I intend to use in my piece. To practice with fixed elements, the aim was to control the parameters rather than randomize them, so that I can bring the project closer to what I expected and make it executable as well. In other words, I determined which aspects should be under my control and which should not.

Throughout the semester, I experimented with these different types of interactions to explore my sound possibilities and predict how they would affect the sounds of the violin.

  • Multiple Loops (evolving musical patterns) On/Off through monitor?
    On/Off via Sensors? It needs more precise and complicated patches, and the patches should track unnormal gesture and not the way I usually play with violin
  • Audio Signal Processing Pitch shifting
    Time stretching Amplitude/Dynamic Reverb/Delay Timbre
  • Microsoft Word – Exposé II.docx
  • Chorus: to create a thicker sound by duplicating the signal and slightly varying the pitch and timing
  • Sound Synthesis Variations Additive synthesis
    FM (frequency modulation) synthesis Granular synthesis
  • Granular Synthesis
    Grain size:
    shorter grains noisier and more textural, longer grains are more faithful to the recorded sounds of the buffer Grain Density: higher density sounds thicker and more continuous, lower density scattered texture and more noticeable individual grains Grain shape (windowing function): the envelope applied to each grain to shape its amplitude over time, currently I am using the Hamming window Grain position (start time): the start pointing of each grain within the original audio sample Grain playback direction: forward or backward!
    Grain spatialization: just have an idea that the grains move around the listeners from everywhere like a rain!
    Grain sequencing: different order of the grains’ playback for more chaotic textures Randomize the parameters: Which is not my goal, but it’s also another possibility!
  • Spatialization The goal is to begin with headphones that track movements and initially use a binaural mix. Additionally, I plan to explore spatialization, utilizing various IEM plugins, including those designed for granular purposes.

#10 Findings

For this project, I wanted to explore the usage of plants in Blender and I went into the project thinking that I will be using the GScatter addon. After a bit of working with it, I found out that this addon was way more complicated than just using the built-in features in Blender called Geometry Nodes.

I also wanted to create a day and night cycle animation and I also thought this would be very complicated by using light animation, but then I also found out that Blender has a built-in sun position animation addon, which creates the whole animation with a few settings.

Another thing I learned during this Project was, that the addons used in a Blender File are not saved to the .blend file, but need to be activated again on each PC before rendering. I made the mistake of not activating the addons before rendering and ending up with 18 animations with no day/night cycle. So as a reminder to everyone – Don´t forget to activate your addons!

To conclude, I found out that Blender has a lot of built-in addons and functions, for which I thought I would be using external addons or do it manually.

#09 Animation

I started by using the After Effects template provided to create the animation. To organize the project, I made sub-compositions for each part of the animation. Then, I imported the PNG files needed to build the animations.

Each animation included six different camera renderings. This meant that each main composition contained six sub-compositions, one for each camera angle. After setting up all these elements, I rendered the animation to see how it looked.

When I reviewed the animation, I noticed it was too bright. To correct this, I used Premiere Pro to adjust the colors and make the animation look better. After applying these color corrections, I rendered the final version of the animation.

#08 Rendering

After the final setup of my cameras I went to the next step, which was setting up the right render properties. For the first preview images I rendered the animation with a low number samples (64). With this I could check if everything is set up right for the animation. The render engine I used was Cycles.

Fo the final animation I used 2048 samples. I rendered the animation in PNGs, which would be later be but together in After Effect. For each camera I used different resolutions, for the main one I used 1248x624px, for the side panels 104x312px and for the bottom panel 832x208px. Each rendering had 240 frames.

In total I had to make 18 different renders, for each camera set up one.

#07 Setting Up Cameras

Since I knew the animation was going to be used on a stage, split over six screens, I created six different camera positions for each animation. I made three different animations, therefore I placed 18 different cameras.

The first animation should give an overview over the whole scene. So I set the main camera centered in the front of the scene. The bottom camera I placed at the bottom of the scene close to the plants to set the focus on these. The two left and two right cameras were placed to showcase the arcs of the building, giving depth to the animation.

The second animation was set to see the scene from the top. The main camera in this setting was placed on top of the figure. The bottom camera was placed to showcase the ceiling and plants from above. The outer left and right set the focus on the stairs, and the inner left and right to showcase the ceiling with plants.

The third animation was to show the top view from different close-up positions, to put the plants and pedestal into focus. The main camera was placed facing down on the pedestal to show the sky animation in the mirror texture of the pedestal. The bottom camera was placed facing down on the plants to show the shadow movement between them. The same was done with the two left and two right cameras., the inner ones showing the pedestal and the outer ones showing the plants.

Survey

To finalise my research, I conducted a short interview with a person to get another perspective on the topic.

The interviewee, after telling me that she is familiar with images generated by artificial intelligence, said that it is mainly those involving nature or landscapes that are very realistic and that she is therefore often unable to distinguish them. 

As a designer she has mixed feelings because on the one hand, she thinks AI is a very useful tool that can speed up the work; on the other hand she thinks it is ethically wrong for designers and artists in general. 

When I showed her the images I generated using AI, she said that she thought it was normal to get these results because they are based on statistics. At the same time she also acknowledged that they were very stereotypical images.

In conclusion, she stated that she is not sure whether the images generated by artificial intelligence reproduce stereotypes because they are based on statistics and information that people give. However, she then reflected on the fact that society is biased and therefore these images are nothing but a consequence of society itself.

Final Prototype Video

My final prototype is a basic MVP of the map I’m designing. It is live on vanlifezone.com/map and contains some basic layers and designs that I’ve integrated.

As it is with most projects when you don’t know much about the topic in the beginning, this was no easy feat and it took a lot of learning along the way. Mapping is so much more complicated than I’ve ever anticipated: Some things that you’d think are tricky are just a few lines of code away, while other things, like displaying icons on the map, require a week of research and coding (and arguing with ChatGPT) to get right. Nevertheless, I’m still super interested in continuing the development of this map, as it combines creativity, data, and coding – a combination I’m passionate about.

Mobile Optimization for Maps

An important aspect I have to consider when designing maps for people on the road is the optimization for mobile devices. Van lifers are often off the grid with no cellular connection, or bad cell service and more often than not the usage of a mobile phone is more convenient for using the map, rather than accessing it through a desktop device.

This brings three key considerations to the table which have to be addressed. The first two are technical aspects that will have to be solved with good caching policies and offline functionality. However, since I am mainly focusing on the design of the map, I will omit these considerations for my current research.

I started by researching the current state of popular mapping tools, and how they handle mobile screen sizes and interactions.

Google maps, the most popular map app, is overly complicated and cluttered (which is typical of Google). I found that a design like this can be too confusing and overwhelming when creating a specialized map app. Apple Maps on the other hand, does a good job at reducing the visible functionality to a usable minimum – maybe too much for a specialized map, though. Lastly, a competitors app does show a good mean between the two, offering relevant information for the typical user of its service, while also keeping the map unobstructed. But there still are some things that could be improved on, like the non-automatic search functionality and the inconsistent design across the interface.

One thing all maps have in common is the detail view for locations. They utilize the bottom sheet, a common design element in mobile apps, to display detailed information about a location. The benefit of this is that the user can easily drag it down to have an unobstructed view of the map, without losing the context they were in. Seeing as the most popular mapping apps use this precedent, I’ve decided to also go with this practice in my design.

I placed the search bar and layer selection functionality at the top so users have an unobstructed view of the map while navigating. When clicking on a location, the bottom sheet comes up with information about the location. It can then be dragged down to have a split view of the map and the location information, while still keeping buttons in view.


https://www.statista.com/statistics/865413/most-popular-us-mapping-apps-ranked-by-audience

https://www.statista.com/statistics/1186009/data-use-leading-us-navigation-apps

Thinking in Components

In this blog post, I’d like to touch on a general web design practice, that shows it’s important in map design as well. Building a complex map like Vanlifezone’s requires a framework to build with. Although technically possible with vanilla HTML, CSS, and JavaScript, a framework like NextJS takes care of a lot of pain points, like SEO, caching, server-side rendering and client-side loading.

NextJS, the framework I’m building the map with, is based on React, a JavaScript library for building user interfaces. React is built around the concept of components, which can be thought of as reusable pieces of code. Using components, complex user interfaces can be broken down into smaller, more manageable parts.

Similarly, when designing a more complex interface, components should be used for reusability across different areas of the UI. For me, it was important that these components reflect the same code-based React components in the repository. This insures that I can design the UI the same way I code the map.

One such example is the location popup card, which shows more detailed information about a location after it is clicked on. Without user testing, I can only make informed assumptions and heuristic evaluations for deciding what type of information to display on this popup. But having been on vanlife adventures myself, I have a decent grasp on what info is necessary during these types of travels.

Of course I also want to keep the goals of Vanlifezone.com in mind, both for building a community of active users and financing the project. Because of this, we have decided that businesses can pay to have their business displayed more prominently on the map, and also have additional information in their popup.

Below is a first version of how this popup looks like – it includes:

  • Icon/profile picture for the location type
  • Name of the location
  • Location type
  • A list of features and/or amenities
  • Descriptive text
  • One or multiple relevant pictures
  • Source (User, OSM, etc.) and verification status (Paid partner, verified by community, unverified)
  • A row of buttons for routing to, sharing, or viewing the location in more detail

I am writing this blog post a few weeks after this design has been made, and already there are some considerations for information that might be important to include. During early user testing it was pointed out that pricing information and availability (relating to camp sites) is valuable and often tricky to find, due to seasonal pricing. The amenity could also have better visualizations of the availability of amenities, and contact information could also be useful to include in the popup. This led to a newer version of this popup (still excluding pricing and availability information). Note that the buttons at the bottom are also variable, depending on what information is available.

Of course, this is only the start. As more testing is done, I will have to adapt the design and functionality of this and other components.