ig.

UIOverlay

new UIOverlay()

UI Element for overlaying areas. Tip: Impact++ UIElements are meant to be used for simple user interfaces. If you need something complex, it is recommended that you use the DOM!

Author:
  • Collin Hover - collinhover.com
Source:
Example 
// we can use a dark overlay to dim the screen when we pause the game
dimmer = ig.game.spawnEntity(ig.UIOverlay, 0, 0, {
     // set its layer to ui so it doesn't get paused
     layerName: 'ui',
     fillStyle: '#000000',
     // start its alpha at 0
     alpha: 0
     // ui elements have a default position of top left
});
// alternatively, we can use a textured animation to fill overlay
dimmer = ig.game.spawnEntity(ig.UIOverlay, 0, 0, {
     // animation sheet with single tile for texture
     animSheet: new ig.AnimationSheet( "media/overlay_texture.png", 32, 32 ),
     // automatically make tile into idle animation
     animSettings: true,
     // tile the animation across the overlay to fill the overlay
     textured: true,
     ...previous settings...
});
// then we fade it in to 75% alpha
dimmer.fadeTo(0.75);
// the above methods can be mixed and matched as needed
// overlays can also create text
// it just requires the text settings to be set
overlay.textSettings = {};
// we can set the text content in several ways
overlay.text = "Hello World";
overlay.message = "Hello World";
overlay.textSettings.text = "Hello World";
// the last of these is the ideal way
// but the overlay will try to correct your mistake
// if you use either of the first two ways
// you can also set the font
// in this case, we'll set it to the main font
// defined by the path in the config (ig.CONFIG.FONT.MAIN_NAME)
overlay.textSettings.font = ig.Font.FONTS.MAIN;
// all the settings in the overlay's text settings
// correspond to properties of the UI text class

Members

alpha

Overlays should be slightly transparent.

Source:

b :Number

Fill blue value from 0 to 1.
- overriden by all other fill properties

Source:

cornerRadius :Number

Corner radius, i.e. roundness of box corners

Default Value:
  • 0
Source:

cornerRadiusAsPct :Boolean

Whether to treat corner radius as a percentage of size between 0 and 1.

Default Value:
  • false
Source:

cover :Boolean

Whether radial gradient should cover, i.e. use max dimension, or contain, i.e. use min dimension.
- does nothing to linear gradients

Default Value:
  • false
Source:

fill :ig.ImageDrawing

Overlay fill.
- created on init

Source:

fillColors :Array

List of string fill colors for gradient.
- overrides r,g,b properties when present IMPORTANT: this property determines whether to fill as a gradient or not.

Default Value:
  • null
Source:

filled :Boolean

Whether fill overlay with a color, pattern, etc.

Default Value:
  • true
Source:

fillStyle :String

Fill style (color, pattern, etc).
- overrides all other fill properties when present

Source:

g :Number

Fill green value from 0 to 1.
- overriden by all other fill properties

Source:

gradientHorizontal :Boolean

Whether linear gradient should be horizontal or vertical.
- does nothing to radial gradients

Default Value:
  • false
Source:

gradientRadial :Boolean

Whether to fill gradient as a radial or linear.

Default Value:
  • false
Source:

ignoreSystemScale

Overlays should match system scale, not UI scale.

Default Value:
  • false
Source:

layerName

Overlays should be in overlay layer.

Default Value:
  • overlay
Source:

message :ig.UIText

Text to show with overlay.
- created on init
- requires ig.UIOverlay#textSettings

Default Value:
  • null
Source:

messageEntity :ig.EntityExtended

Message entity class.

Source:

pixelPerfect :Boolean

Whether overlay should be filled pixel perfectly. IMPORTANT: when true, only the r, g, b, and alpha properties are used to fill!

Source:

r :Number

Fill red value from 0 to 1.
- overriden by all other fill properties

Source:

scaleMax

Overlays should have entity max/min scaling.

Default Value:
  • ig.CONFIG.ENTITY.SCALE_MAX
Source:

scaleMin

Overlays should have entity max/min scaling.

Default Value:
  • ig.CONFIG.ENTITY.SCALE_MIN
Source:

scaleOfSystemScale :Number

Overlay should match entity scale of system scale.

Default Value:
  • ig.CONFIG.ENTITY.SCALE_OF_SYSTEM_SCALE
Source:

sizeAsPct :Boolean

Whether to treat size as a percentage of screen size in values from 0 to 1.

Default Value:
  • true
Source:

sizePct

Percentage of screen size to be converted to ig.EntityExtended#size in values from 0 to 1.

Default Value:
  • 100%
Source:

textMoveToSettings :Object

Settings object for message move to when overlay is moving to.

Source:

textSettings :Object

Settings object for message.

Default Value:
  • null
Source:

zIndex

Overlays should be behind anything else on same layer.

Source:

Methods

cleanup()

Source:

draw()

Draws ui element fill first if present, and animation last.

Source:

getFillStyle() → {*}

Calculates fill style.

Source:
Returns:
{ * } fill style

moveTo()

Source:

moveToStop()

Source:

pause()

Source:

ready()

Source:

rebuild()

Source:

refill(width, height)

Refreshes fill.

Parameters:
Name Type Argument Default Description
width Number <optional>
 sizeDraw.x width to fill
height Number <optional>
 sizeDraw.y height to fill
Source:

resetExtras()

Source:

resize()

Source:

unpause()

Source:

update()

Source: