Pre-release
AdventureJS Docs Downloads Bundler Devlog Score: 0 Moves: 0
Tutorial offering an overview of Displays & Layouts in AdventureJS. tutorial, custom, UI, graphical user interface

Display & Layouts:UI Overview

The AdventureJS display is deeply configurable. A number of built-in methods give authors easy ways to configure display options, and authors who wish to delve deeper will find even more granular control.

Displays

The AdventureJS game display can be configured using CSS, and offers a number of easy preset options to start with. Presets include three main flavors in several sizes. [More info...]

  • Box displays have a set width and height and won't expand beyond those dimensions, though they are responsive and will shrink with the browser window if necessary.
  • Page displays have a set width and won't expand beyond that width, and expand to fill the full height of the browser window.
  • Full display expands to fill the full width and height of the browser window no matter what size.

Layouts

Layouts are how regions are arranged in the display. By regions, [More info...]

  • Header lies above* the input/output area.
  • Left lies to the left* of the input/output area.
  • Right lies to the right* of the input/output area.
  • Footer lies below* the input/output area.

* Caveat: these region positions are default placements, but they can be moved around according to custom grid settings. [More info...]

Regions

Regions are the cells of the layout grid that act as placeholders for widgets. Regions are empty by default and have no width or height until they receive a widget.

Widgets

Widgets are secondary output panels that can show specific text and images, like a compass rose or a picture of the current room or a list of available verbs. The layout grid has pre-defined regions for widgets, which can be organized in rows and columns around the main output.

  • Compass widgets can show a large version of the miniature compass rose that appears in the statusbar. Compasses automatically update to show exits from the current room. [More info...]
  • Description widgets can show the description of the last object examined by the player. [More info...]
  • Exits widgets can show a list of exits from the current room. [More info...]
  • Room widgets can show the current room's description, to give the player a persistent view of the room description. [More info...]
  • Image widgets can show an image of the current room. [More info...]
  • Inventory widgets can show a list of the player's current inventory. Inventory objects can be set to show icons instead of text. [More info...]
  • Object widgets can show a list of objects in the current room. Objects can be set to show icons instead of text. [More info...]
  • Verb widgets can show a list of verbs specified by the author. Clicking a verb will paste that verb to the input field. Verbs can be set to show icons instead of text. [More info...]

Custom CSS

The display of layouts and widgets is controlled by CSS properties in adventurejs.css, which can be overridden with custom CSS. [More info...]

Images

Adding images to a game requires setting up an image lookup. [More info...] Images can be displayed in several ways.

  • A RoomImageWidget can display an image associated with the current room. [More info...]
  • A VerbListWidget can display icons representing the verbs in the list. [More info...]
  • An InventoryListWidget or ObjectListWidget can display icons representing the objects in the list. [More info...]
  • @TODO Images can also be displayed inline in the game output window.