Siemens

CityGuard

Inspired by games such as 'Micro Macro' this is an online wuddonit game where the player has to explore a city following hints and clues in order to solve cybersecurity incidents. My role was to help Czesnek, the design studio in charge of the project, set up the process and workflow for the development of this kind of storytelling-driven interactive projects and solve the arising production and technical challenges.

LINKS
TEAM
  • PROJECT OWNER
  • Andreas Eberharter
  • FRONTEND & INTEGRATION
  • Cesar Ferreira
TECHNOLOGIES
  • Javascript
  • OpenSeadragon
  • Paper.js
  • React
  • libvips

A whole game world city had to be created and brought to life with progressive levels of detail. The strategy that proved the most efficient was a hybrid approach that combined generative tools with a traditional vector illustration process.

Solution

The tools were designed to augment existing vector editing software by encoding Siemens' style guide and design constraints in them and provide easy and seamless importing with copy-paste. Built on top of Paper.js an isometric vector drawing library was designed in order to enable the quick prototyping and implementation of specific tools. The result is a compreensive suite of tools that address different creative and production needs.

Tools

Some of the tools have a more generic purpose and are intended for the generation of building blocks to be used in the construction of buildings and other assets.

Generators

Another class of tools developed could fall in the category of generators. They output fully formed assets and their purpose is to provide the controls for generating variations and allow for creative control over distribution and composition.