Skip to main content Link Menu Expand (external link) Document Search Copy Copied
Table of contents
  1. Direction
  2. ๐Ÿช˜ Art Pillars ๐Ÿช˜
    1. ๐Ÿ—๏ธ Hyper Accessible
    2. ๐Ÿ”ฅ Destruction
    3. ๐Ÿ“ Low Fidelity
    4. ๐Ÿฒ Fantastical
  3. ๐Ÿ‘‰ Direction ๐Ÿ‘‰
    1. ๐Ÿ‘‰ Voxel based models
    2. ๐Ÿ‘‰ Isometric View
    3. ๐Ÿ‘‰ Flat World
    4. ๐Ÿ‘‰ Desaturated colors and highlighted elements
    5. ๐Ÿ‘‰ Flat Colors with gradients
    6. ๐Ÿ‘‰ Soft lighting and shadows
    7. ๐Ÿ‘‰ Stylized Textures
    8. ๐Ÿ‘‰ Character limbs arenโ€™t attached
  4. Color Pallette
  5. Concept Art
  6. Animation Samples
  7. Character Designs
  8. UI Mockups

Direction

The art direction should be familiar to the target audience, which play games such as Minecraft, Roblox, and Fortnite. These games tend to have vibrant, low-fidelity, and/or voxel art styles.

๐Ÿช˜ Art Pillars ๐Ÿช˜

These pillars help drive decisions and direction in all aspects of the art for Void Survivors.

๐Ÿ—๏ธ Hyper Accessible

Void Survivors should support as many people as possible, on as many devices as possible, in as many situations as possible.

๐Ÿ”“ Accessible graphics that are clear and understandable at a glance.
๐Ÿ”“ Low hardware requirements (Older phones, laptops, โ€ฆ).
๐Ÿ”“ Consideration for individuals with visual impairments.
๐Ÿ”“ Low download requirements for low bandwidth tolerance.
๐Ÿ”“ Streamable assets for downloading on demand.
๐Ÿ”“ The graphics should be appropriate for players PG+.

๐Ÿ”ฅ Destruction

Void Survivors has a primary player motivation for destruction, ie explosions, flashy visual effects, objects being smashed apart, and general mayhem.

๐ŸŽ† All objects should be destructible and breakable, in a performant manner.
๐ŸŽ† Particle effects and other VFX should be highly leveraged.

๐Ÿ“ Low Fidelity

The simulation of Void Survivors is lower fidelity than many action titles, specifically by using simpler physics๐ŸŽพ (collision and resolution) and artificial intelligence๐Ÿง  than most action titles. This is to allow performant computation on low-end hardware and allows for large swarms of enemies and players in a single team.

The art style should reinforce this this. As detailed in the โ€˜Kingdoms and Castlesโ€™ postmortem, players expect higher fidelity simulation the higher fidelity the graphics are. Kingdoms and Castles chose a very low-fidelity art style to match their low-fidelity simulation, and received critical and commercial success.

Kingdoms and castles Kingdoms and castles postmortem (GDC Vault): https://www.gdcvault.com/play/1025678/-Kingdoms-and-Castles

๐Ÿฒ Fantastical

Void Survivors is set in an environment that is whimsical and light hearted. It avoids heavy themes, horror elements, and realism. Players should get a sense of wonder and delight in the environment and elements within Void Survivors. The combat will be highly stylized and not use gore, blood, or any other violent themes.

๐Ÿงš Effects should be comical and highly animated.
๐Ÿงš Themes should be vibrant.
๐Ÿงš Invaders should be based in fantasy and myth.


๐Ÿ‘‰ Direction ๐Ÿ‘‰

To reinforce the art pillars, these sections define more specific direction to be followed in the construction of the art for Void Survivors.

๐Ÿ‘‰ Voxel based models

Voxel based models are highly compressible compared to typical triangle based meshes, allowing for a huge amount of content to be transmitted to clients with a small amount of bandwidth.

Voxel models are easily procedurally destructible compared to typical triangle based meshes. This is achieved simply by adding force to the cubes in the voxel mesh allowing for explosions and other effects - compared to a typical triangle based mesh destruction system that requires definition of fragments which has a production and asset size overhead.

Voxel based models are low fidelity, reinforcing the low fidelity nature of the simulation.

The following reference images demonstrate voxel based meshes in games.

1
Source: Stone Hearth (https://store.steampowered.com/app/253250/Stonehearth/) 1
Source: Stone Hearth (https://store.steampowered.com/app/253250/Stonehearth/) 1
Source: Minecraft (https://www.minecraft.net/en-us) 1
Source: Minecraft (https://www.minecraft.net/en-us)

๐Ÿ‘‰ Isometric View

Having an isometric view allows for higher device accessibility and control scheme, as well as performance optimizations.

The isometric view provides simplicity when panning and zooming a camera, allowing for a simple control scheme.

The isometric view is great at providing perspective of relative sizes of elements, and is used frequently outside of games for visualization purposes which makes it more accessible to players without much experience in games.

Having a fixed isometric view, opposed to a perspective camera, allows for optimizing the rendering pipeline which will make it more performant on lower end devices. Further, isometric views require less graphical computation, compared to that of a perspective based renderer due to orthographic projections being the default projection of renderers.

The following reference images demonstrate the isometric viewpoint.

1
Source: Team Porcupine (https://github.com/TeamPorcupine/ProjectPorcupine/issues/1081) 1
Source: Wakfu (https://mmorpg.gg/best-isometric-mmos/) 1
Source: Unity (https://docs.unity3d.com/Manual/Quickstart2DPerspective.html)

๐Ÿ‘‰ Flat World

Having a flat world, with no terrain altitude, allows for simpler controls and world generation.

A flat world is very simple to procedurally generate, compared to that of a world with different levels of terrain which requires mountains, rivers, and lakes. This reduces the production cost to develop the world.

A flat world makes Void Survivors far more accessible from a control scheme standpoint, requiring only panning and zooming to be able to interact effectively. In a non-flat world, rotating is required as objects may be obscured by terrain, eg an object hiding behind a mountain.

The following reference images demonstrate flat worlds.

1
Source: Kingdoms and castles (https://www.gdcvault.com/play/1025678/-Kingdoms-and-Castles) 1
Source: Age of Empires (https://www.gdcvault.com/play/1025678/-Kingdoms-and-Castles) 1
Source: The Fertile Crescent (https://docs.unity3d.com/Manual/Quickstart2DPerspective.html)

๐Ÿ‘‰ Desaturated colors and highlighted elements

There will be a large number of players and invaders on screen at once and itโ€™s important to remove cluttering from the screen.

To achieve this, damaging elements and elements that players should focus on (eg players that are dangerously close to being defeated when playing the healer class) should be highlighted and pop out of the background.

There are damaging elements in Void Survivors that should be clear to the player, so they can avoid damage and live as long as their skill allows them to, and provide them a high sense of locus of control.

The following reference images demonstrate desaturated colors of elements except for a few key elements that should draw the players attention.

1
Source: Deaths Door (https://store.steampowered.com/app/894020/Deaths_Door/) 1
Source: Deaths Door (https://store.steampowered.com/app/894020/Deaths_Door/) 1
Source: Tunic (https://steamcommunity.com/app/553420) 1
Source: Hades (https://store.steampowered.com/app/1145360/Hades/) 1
Source: Enter the gungeon (https://store.steampowered.com/app/311690/Enter_the_Gungeon/) 1
Source: Hades (https://store.steampowered.com/app/1145360/Hades/)

๐Ÿ‘‰ Flat Colors with gradients

To minimize on the assets required to play Void Survivors, textural elements should be used sparingly. Instead,flat colors and gradients, which can be encoded in a very small amount of mathematical code, should be used.

Flat colors offer visual simplicity which reduces the noise that textural elements can create on small screens.

Flat colors make it easier to customize for visual impairments, and preferences can be provided to players (eg changing damaging elements from a red color to a playerโ€™s preferred color).

The following reference images demonstrate games that use flat colors with gradients and sparingly use textual elements.

1
Source: Deaths Door (https://store.steampowered.com/app/894020/Deaths_Door/) 1
Source: Cube World (https://store.steampowered.com/app/1128000/Cube_World/) 1
Source: Cube World (https://store.steampowered.com/app/1128000/Cube_World/) 1
Source: Stone Hearth (https://store.steampowered.com/app/253250/Stonehearth/) 1
Source: Tunic (https://steamcommunity.com/app/553420) 1
Source: Tunic (https://steamcommunity.com/app/553420) 1
Source: Calder Moore - Artstation (https://www.artstation.com/caldermoore/prints?print_type=art_poster) 1
Source: Minecraft Dungeons (https://store.steampowered.com/app/1672970/Minecraft_Dungeons/) 1
Source: Minecraft Dungeons (https://store.steampowered.com/app/1672970/Minecraft_Dungeons/) 1
Source: Unrailed (https://store.steampowered.com/app/1016920/Unrailed/) 1
Source: Calder Moore - Artstation (https://www.artstation.com/caldermoore/prints?print_type=art_poster) 1
Source: Stone Hearth (https://store.steampowered.com/app/253250/Stonehearth/)

๐Ÿ‘‰ Soft lighting and shadows

Void Survivors is set in a fantasy environment that is whimsical and light hearted. To reinforce this, soft lighting and shadows should be used as opposed to realistic simulation of lighting and shadows.

The following reference images demonstrate soft lighting and shadows.

1
Source: Deaths Door (https://store.steampowered.com/app/894020/Deaths_Door/) 1
Source: Deaths Door (https://store.steampowered.com/app/894020/Deaths_Door/) 1
Source: Hades (https://store.steampowered.com/app/1145360/Hades/) 1
Source: Tunic (https://steamcommunity.com/app/553420) 1 Source: Tunic (https://steamcommunity.com/app/553420)

๐Ÿ‘‰ Stylized Textures

Void Survivors is set in a fantasy environment that is whimsical and light hearted. To reinforce this, stylized and handpainted textures should be used opposed to realistic textures.

The following reference images demonstrate stylized handpainted textures and elements.

1
Source: Andrii Tuzenko - Artstation (https://www.artstation.com/andrii_tuzenko) 1
Source: Andrii Tuzenko - Artstation (https://www.artstation.com/andrii_tuzenko) 1 Source: Sephiroth Art - Artstation (https://www.artstation.com/sephirothart)

๐Ÿ‘‰ Character limbs arenโ€™t attached

Having characters limbs (hands, feet) not be attached to their torso allows for a far simpler key-frame animation system which is computationally less expensive, easier to produce assets for, and requires less bandwidth to transmit animated assets.

The following reference images demonstrate models without their limbs attached.

1
Source: Stone Hearth (https://store.steampowered.com/app/253250/Stonehearth/)


Color Pallette

To be completed by the Art Director in the Pre-Production phase. See Development Plan for more info.


Concept Art

To be completed by the Art Director in the Pre-Production phase. See Development Plan for more info.


Animation Samples

To be completed by the Art Director in the Pre-Production phase. See Development Plan for more info.


Character Designs

To be completed by the Art Director in the Pre-Production phase. See Development Plan for more info.


UI Mockups

To be completed by the Art Director in the Pre-Production phase. See Development Plan for more info.


Copyright © 2023 James Knight ABN: 98540683630