webstieTestRepl.github.io/hellbladeVisuals.html at main · Najorae/webstieTestRepl.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
  <head>
    <title>Visuals Hellblade</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- link the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- link the webpage's JavaScript file -->
    <script src="/script.js" defer></script>
  </head>

  <body>
    <header>
      <div class="container">
        <img width="145" src="assets/NJ.gif" alt="A reocurring gif of my initials, NTK, with a red heard above and a black and blue audio wave below in a grey white-outlined circle. The circle slowly appears in a blue backgrounded square along with purple and pink hearts in each corner."/>
        <h3 class="textCenter" style="padding-left: 6%; text-shadow: 1px 1px white; font-size: 1.2em;">HELLBLADE</h3>
      </div>
    </header>

    <nav>
      <ul>
        <li>
          <a href="Video Games.html"> <-- Video Games</a>
        </li>
        <li>
          <a href="hellbladeIntro.html">Intro</a>
        </li>
        <li>
          <a href="hellbladeStory.html">Story</a>
        </li>
        <li>
          <a href="hellbladePsychosis.html">Psychosis</a>
        </li>
        <li>
          <a href="hellbladeCombat.html">Combat</a>
        </li>
        <li>
          <a href="hellbladeVisuals.html">Visuals</a>
        </li>
        <li>
          <a href="hellbladeMusic.html">Music</a>
        </li>
        <li>
          <a href="hellbladeFinal.html">Rating</a>
        </li>
      </ul>
    </nav>

    <main>
      <h1 class="textCenter" style="font-size: 25px; padding: 5px;">Visuals ~ Animation & Scenery</h1>
      <p>To create a world set in the time of Vikings and Celts, Ninja Theory’s Team did a lot of research on Nordic terrain. They first started with the size and scale of the map, with a goal in mind to create something massive and daunting to the player. The team scouted around locations, went to the Viking museum to gain inspiration, and put together many references and style sheets to organize their ideas. An example of how they incorporated their research was that they based the main island off of the hull of a Viking ship. Ninja Theory had limited staff to work on the world, so the theory was that with the right building part sections, materials, and props, they could find a way to populate large areas of the world quickly and easily while maintaining good quality. One of their visual leads, Dan, built a series of props in programs ZBrush, Maya, and photoshop. With the Unreal blueprint system, these props could be repositioned and reused in the game in different ways and environments. For the different environments themselves, Dan combined hand-drawn textures with photographs, material shaders, and model geometry so he could create and use textures across large areas of the environment with no loss of detail and no repeating patterns. The team also created a weather system to allow the game to blend between different weather types throughout the game. It includes rain, wind, lightning, fog, darkness, light, and more, and the geometry of each environment controls different variables such as where the leaves would blow. The visuals and world mainly have a dark fantasy theme to it, in which there are often bodies of the dead, spikes, caves, and fire. There are also many huts, rocks, trees, flowers, and bodies of water throughout the game. Illusions incorporate illuminating symbols and a good use of the space and environment to place these symbols or hidden faces.
      </p>

      <video controls style="width: 60%; padding-bottom:2px;" class="imgCenter">
        <source src="assets/Hellblade movie.m4v" alt="A video of parts of an illuminating symbol lining up once Senua is looking from the right perspective. Once they line up, a door is unlocked.">
      </video>

      <p>
        For the creation of cutscenes in Hellblade, the face, body, and voice were all captured at the same time with a technique called performance capture. To troubleshoot their budgeting issues, they prototyped homemade hardware and software. Much of their set up consisted of cheap wardrobe posts to hold cameras from IKEA and even cheaper LED lights from Amazon. As they didn’t have enough money to rent out a big enough space, they used their large meeting room to record. To capture full 3-D facial expressions, a Cara head rig with a camera attached was used. They then used photogrammetry to construct a face from a series of photographs from all angles. Along with a face scanner, they used a body scanner to make Senua feel as real as possible to the player. With all this technology, their development team was able to take scenes performed live by the actress, Melina Juergens, and render them in real-time to create in-game cutscenes. This involved Ninja Theory’s collaboration with Unreal Engine developers: Epic Games, the facial technology of 3Lateral, the live facial system of Cubic Motion. To get the details on Senua’s face, Melina was photographed under several lighting setups to create a skin shader that could react with light to simulate wrinkles, blood flow, peach fuzz, and sub-surface scattering. Her clothes were modeled and textured by artists and were detailed under physics that reacted to how Senua moved (for example wrinkling at her hip when she walked). The animation for Senua worked with the body-cam on Melinda to simulate different actions Senua would do such as walking, running, walking in deep or shallow water, walking through smoke and fire, walking in fear, walking across beams, etc. Lastly, to complete their animations, the team added different looping animations and coded them to play at random intervals so the same loop wasn’t played each time. This prevents it from looking too fake as people don’t walk exactly the same every time.
      </p>

      <div class="flex-container">
        <div class="flex-item">
          <img style="width:82%" class="imgCenter" src="assets/Hellblade Senua Mad.jpeg" alt="Senua glaring at the camera with the bottom part of her face exposed to light, the background dark.">
        </div>
        <div class="flex-item">
        <img style="width:82%" class="imgCenter" src="assets/Hellblade Scenery .jpeg" alt="Dark unrecognizable figures on the side with light in the background behind a cage hanging up high with wooden spears on the floor and in a structure up high.">
        </div>
      </div>

      <p>Altogether Hellblade’s visuals are very detailed down to small images and symbols on chains and the ripples of water droplets hitting the ground. I think the animation is very detailed as well, especially how the clothes move with Senua and how they narrowed down on different ways she would walk, how they simulated resistance, etc. I think their ability to create this new technology which allowed them to capture performance efficiently without using tons of money, is commendable. There are many interesting animations in Senua’s Sacrifice such as her seeing herself come out of the mirror to talk to herself before going through the mirror, one where she sees herself dying, and the death scenes from walking on a plank where she falls and the scene stops before she hits the ground, as we would in a dream. One thing I particularly like in the game is the ability to use a photo mode, in which the player can pause the game and look around at the setting. In photo mode, you can also change different effects including movement, framing, visibility, and you can take a screenshot of the game, (which is where the pictures I’m using come from). The visuals and performance, in general, are very well done however there are some hiccups in the graphics like you might walk through a wall for a bit, but this isn’t uncommon for games. This does become a problem, however, during battles since the player could get stuck behind fences, planks, and other obstacles in the environment that blocks your view and makes fighting, and most importantly winning, difficult. These graphic hiccups during fighting occur more frequently than other games I’ve played.
      </p>

      <div class="flex-container">
        <div class="flex-item">
          <img style="width: 82%;" class="imgCenter" src="assets/Hellblade Outlined.jpeg" alt="A photo mode from Hellblade in which objects are dark and outlined in bright white light. The scenery depicts Senua on a concerete bridge/road to Hela with bodies and spear-like objects juxtiposed about the room."/>
        </div>
        <div class="flex-item">
          <img style="width: 82%;" class="imgCenter" src="assets/Hellblade visual effects.jpeg" alt="Hellblade standing center with a melting, blurry background of stick-figures and a torch." />
        </div>
      </div>

      <h3 style="padding-top: 0px;">CITATIONS & RESOURCES:</h3>
      <p>Mead, Fran. “Ninja Theory Official Site.” Ninja Theory Ltd, <a href="https://ninjatheory.com/" target="_blank" rel="noopener" rel="norefer">ninjatheory.com.</a></p>

      <p>
        “Hellblade Development Diaries.” Edited by Melina Juergens, Youtube Playlist, Ninja Theory, 2017,
        <a href="https://www.youtube.com/playlist?list=PLbpkF8TRYizaT6GfMcKBG-RoUOQ6BJRXp" target="_blank" rel="noopener" rel="norefer">www.youtube.com/playlist?list=PLbpkF8TRYizaT6GfMcKBG.</a>
      </p>

      <p>
        “Professor Paul Fletcher (Hellblade Clinical Consultant) Keynote Address.” Performance by Paul Fletcher, Youtube.com, The International Games Summit, Oct. 2019,
        <a href="https://www.youtube.com/watch?v=BpRMwq4T9gU." target="_blank" rel="noopener" rel="norefer">www.youtube.com/watch?v=BpRMwq4T9gU.</a>
      </p>

      <p>
        “Hellblade: Senua's Psychosis | Mental Health Feature.” Youtube.com, Ninja Theory, Oct. 2018,
        <a href="https://www.youtube.com/watch?v=31PbCTS4Sq4." target="_blank" rel="noopener" rel="norefer">www.youtube.com/watch?v=31PbCTS4Sq4.</a>
      </p>

      <p>“Psychosis.” NHS Choices, NHS, Dec. 2019, <a href="https://www.nhs.uk/conditions/psychosis/." target="_blank" rel="noopener" rel="norefer">www.nhs.uk/conditions/psychosis/.</a></p>

      <p>Community Written. “Northmen.” Hellblade Wiki, <a href="https://thehellblade.fandom.com/wiki/Northmen." target="_blank" rel="noopener" rel="norefer">thehellblade.fandom.com/wiki/Northmen.3</a></p>

      <p>“Hellblade Official Site.” Hellblade, Ninja Theory, <a href="https://hellblade.com/" target="_blank" rel="noopener" rel="norefer">https://hellblade.com/</a></p>

      <p>Hellblade Soundtrack (headphones recommended for 3D sound): <a href="https://www.youtube.com/watch?v=-jZKRPcWLms." target="_blank" rel="noopener" rel="norefer">https://www.youtube.com/watch?v=-jZKRPcWLms.</a></p>

      <p>Hellblade Gallery: <a href="https://hellblade.com/gallery" target="_blank" rel="noopener" rel="norefer">https://www.hellblade.com/pictures/.</a></p>

      <p>Buy the game! <a href="https://hellblade.com/buy" target="_blank" rel="noopener" rel="norefer">https://www.hellblade.com/buy.</a></p>
    </main>
  </body>
</html>