Display

Drawing to the display (canvas) happens in this class, with some of it being farmed out to sub-classes

Author
  • Mark Mayes / mm-dev
License
  • GPL-3.0-only
Source

Methods

(static) createCanvas()

Source
Create the main canvas element and add it to the DOM

Display.canvas contains everything we see on-screen.

(static) drawAddedLayers(_x, _y, _obstacle)

Source
Some obstacles have special added details eg:
  • Hats
  • Lines of detail
Parameters
Name Type Description
_x number

X coordinate of the obstacle
_y number

Y coordinate of the obstacle
_obstacle object

The obstacle to be drawn on top of

(static) drawBackground()

Source
The solid fill background colour

(static) drawBackgroundFade()

Source
Fade out part of the background
  • Used to dim the inside of the pipe to suggest the glass material is absorbing light from things behind it
  • As each level has a different combination of colours for the background fill and background obstacles, the level config contains a bgFadeAlpha variable to tweak the opacity of this fade

(static) drawBackgroundObstacles()

Source
Background obstacles
  • Are below and do not interact with the player
  • Conceptually are on the bottom layer

(static) drawFloatingObstacles()

Source
Floating obstacles
  • Are above and do not interact with the player
  • Conceptually are on the top layer

(static) drawForegroundObstacles()

Source
Foreground obstacles
  • Can interact with the player by being collected or causing health damage
  • Conceptually are on the middle layer

(static) drawFullscreenToggle()

Source
The enter/exit fullscreen toggle icon

(static) drawObstacle(_obstacle)

Source
Draw an individual obstacle

Decide what kind of primitive shape this obstacle is and farm out the drawing of it to the Shape class.

  • Although obstacles have their own pos.x/pos.y properties, sometimes they are drawn offset to suggest depth/parallax
  • So displayX and displayY are calculated here, and may not be the same as the pos properties
Parameters
Name Type Description
_obstacle object

The obstacle to be drawn

(static) drawSoundToggle()

Source
The sound on/off toggle icon

(static) drawTitle()

Source
Draw the Pipe Dream title image on the intro page

(static) flashIsOff(_secsOn, _secsOff) → {boolean}

Source
For flashing items, decide whether on this frame the item should be 'off' (hidden) rather than an 'on' (displayed)

As the display is redrawn for every frame, if we want an item to periodically flash we need a way of calculating when to show it and when to hide it.

  • The frame rate may be inconsistent, so it makes sense to specify the period of the on/off cycle using seconds
  • InternalTimer.currentFps can be used to roughly convert seconds to frames
  • InternalTimer.frameCount is a simple counter of how many frames have been drawn
Parameters
Name Type Description
_secsOn number

How many seconds or fractions of a second the 'on' part of the flash cycle should last
_secsOff number

As above but for the 'off' part of the cycle
Returns
  boolean

Whether the item should be 'flashed off'. or hidden during this frame

(static) init()

Source
Various initialisation jobs
  • Create and store a reference to the main game canvas
  • Initialise some other companion classes

(static) setBackgroundColor(_hexColor)

Source
Update the background colour
  • For the game itself
  • For faded backgrounds underneath eg text and the health meter
  • For other overlays used eg in
Parameters
Name Type Description
_hexColor number

The new colour

(static) setupForLevel()

Source
Update some level-specific details
  • Custom colours
  • Instruction text if this is the first screen
  • Which obstacles to show on the level intro screen

(static) swapContext(_data)

Source
Swap to a different canvas context
  • Used eg by OverlayText to temporarily swap to its own special canvas
  • While swapped, all canvas operations such as in Text or other classes will be performed on the swapped canvas
  • Can be used to set back to the default canvas
Parameters
Name Type Description
_data object

[TODO:description]

Name Type Attributes Description
backToDefault boolean optional

If true, context is switched back to the standard context and any transforms are restored
contextToSwapTo CanvasRenderingContext2D optional

The context to swap to

(static) update()

Source
The main update function
  • Called once per frame
  • Manages all updates to the screen (Display.canvas), including the game itself and the UI
  • Decides what to show/hide depending on the current state of the game

(static) updateLayout()

Source
Make sure sizes for everything are matched to the current viewport dimensions

Most of the work is done by calling similar methods in other classes.