Skip to content
Martin Kelm edited this page Jul 25, 2013 · 8 revisions

This article is about the user interface of the game. It uses a tiny default HTML with CSS to set up a blank screen for a pixi.js 2D WebGL/Canvas graphics renderer which contains interaction elements.
The display logic is written in JavaScript. JQuery is being used to add hotkey features.

Start screen

Contains a logo, with background, a menu / game title text and a start / quit button currently.

Planet map screen

The planet map works like a Google Map. The planets are on a layer which is move-able by using the mouse or control buttons with four directions. The map contains a grid for planets and planets can have connection lines in two different colors. The color depends on the connection type, expansion or trade connection. The zoom level of the map can be changed in round about 5-10 steps. A click on a planet opens a planet menu, another item in the menu can open a full planet detail view which replaces the planet map.

Planet detail view

The view contains a planet in full size on the screen ...