Module: ui

Manages texture data as it relates to loading and laying out assets.
- Asset, projection and scale aware convenience extensions of Pixi display object classes. Relies on exported PSD data.
- Recieves PSD json data used to layout visuals in the app
- Handles initial loading of assets through `PIXI.Loader.shared`, including images, spritesheets, webfonts and audio.
- Webfont loading requires this js script: `<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>`.
- If web font loading is not required remove the above Google webfont script.
Source:

Members

(inner) spritesheetSuffix

Register a file base name suffix to be appended to spritsheet loads.
- To be called before storymode#createApp
Source:

(inner, readonly) txInfo :number

Contains all text data.
Type:
  • number
Source:
Example
const boxArtW = ui.txInfo[this.psdID + '/' + 'box'].width;

Methods

(static) crispTextMode(enableopt)

Control the aliasing of text fields added via `displayObject.fromTx(...)` and `displayObject.addArt(...)`.
- Will default to `false` if not called.
- If set to true then text fields added by the platform will have `texture.baseTexture.scaleMode` set to `PIXI.SCALE_MODES.NEAREST`
Parameters:
Name Type Attributes Default Description
enable boolean <optional>
 false
Source:

(static) isSpritesheetLoaded(spritesheetBasename) → {boolean}

Checks if sprite sheet is loaded and ready to use.
Parameters:
Name Type Description
spritesheetBasename string Spritesheet name without extension.
Source:
Returns:
isLoaded
Type
boolean

(static) mapWebfontIDToLocalFontFamily(webfontID, localFontFamily)

Maps a web font identifier to a local CSS defined font family.
- For `local` webfont sources only.
- To be called before storymode#createApp
- This method is for certain font and weight combinations to be directed to a local font family.
- Note: Webfonts may need to be present in HTML for the webfont load to trigger correctly.
Parameters:
Name Type Description
webfontID string The webfont identifier in the format `%webfontFontName%:%numericFontWeight%`. Eg. `Montserrat:400`
localFontFamily string The CSS font family. Eg. `MyCustomMontserrat`.
Source:
Example
ui.mapWebfontIDToLocalFontFamily('Montserrat:400','MyCustomMontserrat');

(static) onLoaderQueue(callback)

Make a single callback immediately before app assets are loaded.
- Manually queue any additional assets to be loaded.
- Needs to be called before storymode#createApp
Parameters:
Name Type Description
callback function
Source:
Example
ui.onLoaderQueue((loader)=>{
   loader.add('my_bmp_font', 'fonts/mybmp.fnt');
 })

(static) purgeOnDemand(spritesheetBasenames)

Removes spritesheet and associated textures and base textures from memory.
Parameters:
Name Type Description
spritesheetBasenames string | Array Spritesheet name without extension, or array of spritesheet base names.
Source:

(static) queueOnDemandLoad(spritesheetBasenames, loadCallback)

Queue a single spritesheet or multiple spritesheets to be loaded with an `onComplete` callback.
- Designed to be called multiple times without causing any issues.
- Any existing on-demand load callbacks will be overwritten with the current callback.
- If the spritesheets are already loaded the callback will be fired immediately.
Parameters:
Name Type Description
spritesheetBasenames string | Array Spritesheet name without extension, or array of spritesheet base names.
loadCallback function `Oncomplete` callback.
Source:

(static) registerFonts(webfonts)

Optionally configure webfonts to be used within the app. Google Fonts is the only supported webfont provider.
- To be called before storymode#createApp
- This method is optional, if the font family is not configured the platform will attempt to automatically load the Google Fonts referenced in the PSDs. This assumes the font name is identical between Google Fonts and the Photoshop output.
- Font styles will be loaded automatically based on those defined in the PSDs and optional *additionalStyles* properties.
Parameters:
Name Type Description
webfonts Object.<string, module:ui#WebFontProps> The fonts to preload, with top level key of a unique class name to reference the font, eg `heading`, `serif`, `button` etc.
Source:
Example
ui.registerFonts({
   standard: {psdFontNames: ['Montserrat'], googleFontName: 'Montserrat', additionalStyles:['bold italic','thin','italic'], fallbacks:['sans-serif']}
 });

(static) registerOnDemandLoadMode(…spritesheetBasename)

Disable autoloading the given spritesheet at startup.
- To be called before storymode#createApp.
Parameters:
Name Type Attributes Description
spritesheetBasename string <repeatable>
 Spritesheet name without extension.
Source:
Example
// On startup:
ui.registerOnDemandLoadMode('lazy')

// In scene:

onDidArrive(fromModal){

  super.onDidArrive(fromModal);

  ui.queueOnDemandLoad('lazy', function(){ // Will fire instantly if already loaded,
    // Add lazy loaded sprites...
  })

}

onWillExit(fromModal){

  super.onWillExit(fromModal){;

  ui.removeOnDemandListeners(); // Prevent lost callbacks

}

(static) removeOnDemandListeners()

Remove all listeners to the shared loader.
Source:

(inner) registerChildTxNameGlobsForTx(txNameGlobs, txPath)

Set the `txNameGlobs` supplied to a specific texture when `addArt()` is called within a `fromTx()` call.
Parameters:
Name Type Description
txNameGlobs Array Array of texture names or wildcard pattern to include and/or exclude. Eg. `*_tx_suffix`, `!tf_match*`, `tx_prefix_*`
txPath string Texture path.
Source:
Example
ui.registerChildTxNameGlobsForTx(['!_*'], 'mypsd.psd/my_btn');

(inner) registerClassForTx(class, textureNameGlob) → {FontStyleComponents}

Associates a class with a text name or pattern.
- Display Objects will automatically be created with the supplied class rather than the default display object class.
Parameters:
Name Type Description
class Class
textureNameGlob string Texture name or pattern to associate with the class. Only prefix patterns are supported.
Source:
Returns:
fontStyleComponents
Type
FontStyleComponents
Example
ui.registerClassForTx(Button, 'mypsd.psd/my_btn'); // A specific texture.
ui.registerClassForTx(Button, '*'+'/my_btn'); // Any texture with the name `my_btn` across all PSDs.
ui.registerClassForTx(Button, '*'+'/*_btn'); // Any instances with suffix `_btn` across all PSDs.

(inner) registerPsdInfo(documentContent)

Pass the exported PSD JSON data to the `ui` class.
- To be called before storymode#createApp
Parameters:
Name Type Description
documentContent Array.<Object> Each entry in the array represents the content of a PSD's .json.
Source:
Example
ui.registerPsdInfo(utils.requireAll(require.context('./ui', false, /.json$/)))

(inner) registerSpritesheetPath(relativePathopt)

Register the path to sprite sheet assets.
- To be called before storymode#createApp
Parameters:
Name Type Attributes Default Description
relativePath string <optional>
 'img/' web path to sprite sheet directory from app root.
Source:

(inner) setWebfontFallbacks(_webfontFallbacks)

Set fallback fonts for when webfonts fails to load.
Parameters:
Name Type Description
_webfontFallbacks Array Defaults to ['sans-serif'].
Source:

(inner) setWebFontSource(webfontSourceopt)

Set how webfonts are to be loaded.
Parameters:
Name Type Attributes Default Description
webfontSource 'google' | 'local' <optional>
 'google' 'google' will load the font from Google Fonts, 'local' will wait for the locally CSS loaded webfont to be ready.
Source:

Type Definitions

WebFontProps

Type:
  • Object
Properties:
Name Type Description
psdFontNames Array.<string> A list of PSD font names to target. (eg. `Montserrat`)
googleFontName string The corresponding Google Font name. (eg. `Montserrat`)
additionalStyles Array.<string> Any additional styles to load in the format as outputted in PSD data. Eg. `['bold italic','thin','italic','900','900 italic']`. This is not usually required as the platform will load all styles referenced in the PSD data.
fallbacks Array.<string> A list of fallback fonts to be queued. Eg. `['sans-serif']`
Source: