iwmlib

Class: PIXIApp

PIXIApp

The class PixiApp extends the class PIXI.Application by several functions and makes meaningful pre-assumptions.

new PIXIApp (opts)

app.js:90

Creates an instance of a PixiApp.

Name Type Default Description
opts object {} optional

An options object. The following options can be set:

Name Type Default Description
width number optional

The width of the renderer. If no set, the application will run in fullscreen.
height number optional

The height of the renderer. If no set, the application will run in fullscreen.
view HTMLElement optional

The canvas HTML element. If not set, a render-element is added inside the body.
transparent boolean true optional

Should the render view be transparent?
antialias boolean true optional

Sets antialias (only applicable in chrome at the moment).
resolution number window.devicePixelRatio | 1 optional

The resolution / device pixel ratio of the renderer, retina would be 2.
autoResize boolean true optional

Should the canvas-element be resized automatically if the resolution was set?
backgroundColor number 0x282828 optional

The color of the background.
theme string | Theme dark optional

The name of the theme (dark, light, red) or a Theme object to use for styling.
fpsLogging boolean false optional

If set to true, the current frames per second are displayed in the upper left corner.
progress object {} optional

Can be used to add options to the progress bar. See class Progress for more informations.
forceCanvas boolean false optional

Prevents selection of WebGL renderer, even if such is present.
roundPixels boolean true optional

Align PIXI.DisplayObject coordinates to screen resolution.
monkeyPatchMapping boolean true optional

Monkey patch for canvas fullscreen support on large displays.
adaptive boolean true optional

Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
See:
Example
// Create the app
const app = new PIXIApp({
    view: canvas,
    width: 450,
    height: 150,
    fpsLogging: true,
    theme: 'light',
    transparent: false
}).setup().run()

Extends

  • PIXI.Application

Members

center object readonly

Returns the center of the renderer as an object with the keys x and y.

size object readonly

Returns the size of the renderer as an object with the keys width and height.

Methods

addFpsDisplay ()PIXIApp

app.js:293

Adds the display of the frames per second to the renderer in the upper left corner.

Returns:
Type Description
PIXIApp
  • Returns the PIXIApp for chaining.

checkOrientation (event)

app.js:227

Checks orientation and adapts view size if necessary. Implements a handler for the orientationchange event.

Name Type Description
event event optional

orientationchange event

convertPointFromNodeToPage (displayObject, x, y)Point

app.js:707

Supports the page as a global coordinate system and converts local DisplayObject coordinates to browser page coordinates.

Name Type Description
displayObject DisplayObject

The PIXI displayObject.
x number

The x coordinate.
y number

The y coordinate.
Returns:
Type Description
Point Returns a DOM Point.

convertPointFromPageToNode (displayObject, x, y)PIXI.Point

app.js:687

Supports the page as a global coordinate system and converts browser page coordinates to local DisplayObject coordinates.

Name Type Description
displayObject DisplayObject

The PIXI displayObject.
x number

The x coordinate.
y number

The y coordinate.
Returns:
Type Description
PIXI.Point Returns a PIXI.Point.

draw ()

app.js:265

Draws the display tree of the app. Typically this can be delegated to the layout method.

expandRenderer (expand)boolean

app.js:407

Expand the renderer step-wise on resize.

Name Type Default Description
expand number 256 optional

The amount of additional space for the renderer [px].
Returns:
Type Description
boolean true if the renderer was resized.

layout (width, height)

app.js:258

Called after a resize. Empty method but can be overwritten to adapt their layout to the new app size.

Name Type Description
width number optional

The width of the app.
height number optional

The height of the app.

loadSprites (resources, loaded, opts)PIXIApp

app.js:485

Loads sprites, e.g. images into the PIXI TextureCache.

Name Type Default Description
resources string | Array.<string>

A String or an Array of urls to the images to load.
loaded function null optional

A callback which is executed after all resources has been loaded. Receives one paramter, a Map of sprites where the key is the path of the image which was loaded and the value is the PIXI.Sprite object.
opts object optional

An options object for more specific parameters.

Name Type Default Description
resolutionDependent boolean true optional

Should the sprites be loaded dependent of the renderer resolution?
progress boolean false optional

Should a progress bar display the loading status?
Returns:
Type Description
PIXIApp The PIXIApp object for chaining.

loadTextures (resources, loaded, opts)PIXIApp

app.js:522

Loads textures, e.g. images into the PIXI TextureCache.

Name Type Default Description
resources string | Array.<string>

A String or an Array of urls to the images to load.
loaded function null optional

A callback which is executed after all resources has been loaded. Receives one paramter, a Map of textures where the key is the path of the image which was loaded and the value is the PIXI.Texture object.
opts object optional

An options object for more specific parameters.

Name Type Default Description
resolutionDependent boolean true optional

Should the textures be loaded dependent of the renderer resolution?
progress boolean false optional

Should a progress bar display the loading status?
Returns:
Type Description
PIXIApp The PIXIApp object for chaining.

message (opts)Message

app.js:463

Opens a new Message object binded to this app.

Name Type Description
opts object optional

An options object for the Message object.
Returns:
Type Description
Message Returns the Message object.
app.js:448

Opens a new Modal object binded to this app.

Name Type Description
opts object optional

An options object for the Modal object.
Returns:
Type Description
Modal Returns the Modal object.

mutate (mutation, opts)Promise

app.js:621

Mutate the GraphQL endpoint.

Name Type Default Description
mutation string optional

The GraphQL mutation string.
opts object {} optional

An options object. The following options can be set: http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate
Returns:
Type Description
Promise Returns a Promise which is either resolved with the resulting data or rejected with an error.

orientation ()boolean

app.js:217

Tests whether the width is larger than the height of the application.

Returns:
Type Description
boolean Returns true if app is in landscape mode.

orientationChanged (force)

app.js:245

Called if checkOrientation detects an orientation change event.

Name Type Default Description
force boolean false optional

Called if checkOrientation detects an orientation change event.

progress (value)PIXIApp | Progress

app.js:431

Set the loading progress of the application. If called for the first time, display the progress bar.

Name Type Description
value number optional

Should be a value between 0 and 100. If 100, the progress bar will disappear.
Returns:
Type Description
PIXIApp | Progress The PixiApp object for chaining or the Progress object when the method was called without a parameter.

query (query, opts)Promise

app.js:590

Queries the GraphQL endpoint.

Name Type Default Description
query string optional

The GraphQL query string.
opts object {} optional

An options object. The following options can be set: http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query
Returns:
Type Description
Promise Returns a Promise which is either resolved with the resulting data or rejected with an error.

resize (event, opts)PIXIApp

app.js:329

Resizes the renderer to fit into the window or given width and height.

Name Type Default Description
event object optional

The event.
opts object {} optional

The event.

Name Type Default Description
width number window.innerWidth optional

The width of the app to resize to.
height number window.innerHeight optional

The height of the app to resize to.
Returns:
Type Description
PIXIApp
  • Returns the PIXIApp for chaining.

setup ()PIXIApp

app.js:167

Extra setup method to construct complex scenes, etc... Overwrite this method if you need additonal views and components.

Returns:
Type Description
PIXIApp A reference to the PIXIApp for chaining.

subscribe (subscription, opts)Promise

app.js:652

Subscribe the GraphQL endpoint.

Name Type Default Description
subscription string optional

The GraphQL subscription.
opts object {} optional

An options object. The following options can be set: http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query
Returns:
Type Description
Promise Returns a Promise which is either resolved with the resulting data or rejected with an error.