Title Screen Design Documentation - UQdeco2800/2021-studio-6 GitHub Wiki

Rationale

From a design perspective, it is imperative that within the first few seconds of starting a computer game players are transitioned from their 'real lives' to the world and story of the game. This is often done through opening cutscenes and title screens.

The design of our title screen hopes to achieve this by:

  • Representing the over-arching goal of the game to arrive at a glow on the horizon with a literal image of it.
  • Creating the dark, eerie and dirty atmosphere of a post-apocalyptic setting through motifs associated with genres such as steampunk and the goth subculture.

Inspiration

Return of the Obra Dinn

  • A demonstration of how pixels can be dithered with varying density to create shades of light and dark.
  • Symmetrical layout with a misty horizon over dark water. Interesting use of a silhouette for the ship.
  • Ripples are suggested in the moon's reflection.
  • Menu options are in the corners.

Spiritfarer

  • Similar to Return of the Obra Dinn, but with a light source offset to the left.
  • White logo on a dark blue sky contrasts well.
  • Menu options are centred.

Outer Wilds

  • The logo and menu options are to the side.
  • It allows the rest of the screen (now a contiguous section) to be occupied by artwork.

Software used to produce artwork

  • Blender is a free and open-source 3D modelling, texturing and compositing program.
  • Krita is a free and open-source raster graphics editor that supports keyframe-based animation.
  • Please contact @NightingaleUQ if you wish to access a copy of working files.

Procedural generation using Blender

It was decided that instead of manually drawing every pixel to model the horizon glow and sky, procedural generation be used. This was because:

  • Repeated textures can be generated based on parameters.
  • Small tweaks to colour and layout can be made without having to manually adjust every pixel. This resulted in faster iteration of ideas.

A simple scene consisting of what is essentially a spotlight shining on to a wall was used to fake a glow in the distant horizon.

Using Cycles, a physically-based ray tracer included with Blender, a scene was rendered using a low resolution and just one light sample to produce a pixelated image. After some parameter adjustment, a resolution of 160 x 90 was used. Early renders turned out as follows:

Colour discretisation

An issue became apparent: the gradual fade off of pixel colours is inconsistent with the pixel art philosophy that as few colours as possible should be used. During post-processing, a discretiser function was applied to the brightness value of each pixel.

Where:

  • v is the initial and final brightness value of a pixel, bounded between 0.0 and 1.0
  • n is the number of brightness steps in the final image
  • k is a constant used for pre-multiplying the brightness value

The node layout used is shown in the image below, with the original render shown in the left half and the result of this operation shown in the right half. Upon closer inspection, some dithering (like in Obra Dinn) is visible between the bands of light brightness.

More effects

A subtle reflection of the glow was added and discretised using the method described above.

A procedurally-generated texture was used to generate an image of swirling clouds. The bottom half consists of the raw texture and the top half shows the same texture discretised.

Initial animated title screen

The clouds were animated to move sideways and the glow noise randomised with each frame. The animation is 30 frames long and plays at 3 frames per seconds, looping.

Link to initial animation

Layout experimentation

An asymmetrical layout was suggested by @DancingBrian where the glow and menu options were moved to one side to make room for a foreground object like a lamp post.

Attempting this gave the following result. Here, I try an initial logo design where the letters are attracted to light, just like how some flying insections would behave.

Foreground

The foreground was manually painted using Krita, with the moss added later to give the impression of a dilapidated and decaying setting. In a three-frame loop, the letters of the logo jitter around and the lamp flame appears to flicker about in the wind.

A working animation

The foreground was composited over the background to produce this working animation.

Link to working animation