Module gamejs/display

Methods to create, access and manipulate the display Surface.

Flags

gamejs.display.setMode() understands three flags:

  • gamejs.display.FULLSCREEN
  • gamejs.display.DISABLE_SMOOTHING
  • gamejs.display.POINTERLOCK (implies FULLSCREEN)

// disable smoothing gamejs.display.setMode([800, 600], gamejs.display.DISABLESMOOTHING); // disable smoothing and fullscreen gamejs.display.setMode([800, 600], gamejs.display.DISABLESMOOTHING | gamejs.display.FULLSCREEN);

DOM node ids accessed by this module:

  • #gjs-canvas - the display surface
  • #gjs-loader - loading bar
  • #gjs-fullscreen-toggle a clickable element to enable fullscreen
  • #gjs-canvas-wrapper this wrapper is added when in fullscreen mode

Fullscreen mode

When setMode() is called with the fullscreen flag then the fullscreen mode can be enabled by the player by clicking on the DOM element with id "gjs-fullscreen-toggle". Browser security requires that a user enables fullscreen with a "gesture" (e.g., clicking a button) and we can not enable fullscreen in code.

Fullscreen mode can be exited by many keys, e.g., anything window manager related (ALT-TAB) or ESC. A lot of keys will trigger a browser information popup explaining how fullscreen mode can be exited.

The following keys are "whitelisted" in fullscreen mode and will not trigger such a browser popup:

  • left arrow, right arrow, up arrow, down arrow
  • space
  • shift, control, alt
  • page up, page down
  • home, end, tab, meta

Example

var display = gamejs.display.setMode([800, 600]);
// blit sunflower picture in top left corner of display
var sunflower = gamejs.image.load("images/sunflower");
display.blit(sunflower);

See

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Functions

Properties

DISABLE_SMOOTHING

Pass this flag to gamejs.display.setMode(resolution, flags) to disable pixel smoothing; this is, for example, useful for retro-style, low resolution graphics where you don't want the browser to smooth them when scaling & drawing.

FULLSCREEN

POINTERLOCK

getSurface ()

Drawing on the Surface returned by getSurface() will draw on the screen.

Returns

gamejs.Surface the display Surface

hasPointerLock ()

isFullscreen ()

setCaption (title, icon)

Set the Caption of the Display (document.title)

Parameters

String title the title of the app
gamejs.Image icon FIXME implement favicon support

setMode (dimensions, flags)

Set the width and height of the Display. Conviniently this will return the actual display Surface - the same as calling gamejs.display.getSurface() later on.

Parameters

Array dimensions [width, height] of the display surface
Number flags gamejs.display.DISABLE_SMOOTHING | gamejs.display.FULLSCREEN | gamejs.display.POINTERLOCK