apex-app

For creating interactive apps using *pixi.js*.

Usage no npm install needed!

<script type="module">
  import apexApp from 'https://cdn.skypack.dev/apex-app';
</script>

README

apex-app

For creating interactive apps using pixi.js.

Example App

Particle Sandbox
URL: http://particlesandbox.com
GitHub: https://github.com/apexearth/particle-sandbox
App Class: https://github.com/apexearth/particle-sandbox/blob/develop/app/ParticleSandbox.js#L25

Basic Usage

  1. Create an App.
  2. Add AppObjects to it.
  3. Create a renderer for the App.
  4. The renderer starts the update & draw loop, rendering the App.
const {
   App,
   AppObject,
   createRenderer,
   PIXI,
   setting,
   properties,
   property
} = require('apex-app')

// Extend App
// Initialize with a single AppObject drawn as a white square.
class Game extends App {
   constructor() {
       super()
       let obj = new AppObject({parent: this})
       obj.graphics.beginFill(0xffffff, 1)
       obj.graphics.drawRect(0, 0, 10, 10)
       obj.graphics.endFill()
       this.add(obj)
   }
}

// Create renderer and attach canvas to `document.body`.
createRenderer(new Game(), {
   rendererOptions: {
       backgroundColor: 0x333333
   }
})

App

The core app containing the update loop.

Kind: global class

new App(options)

Param Description
options The options to use in the App.

app.type : string

The object type. ("app")

Kind: instance property of App

app.objects : Array.<AppObject>

The AppObjects added to the App.

Kind: instance property of App

app.view

View options.

Kind: instance property of App

app.position ⇒ App.container.position | Object

This position {x, y} of the App view.

Kind: instance property of App

app.scale ⇒ App.container.scale | Object

The scale {x, y} of the App view.

Kind: instance property of App

app.targetScale ⇒ Object

The target scale {x, y} of the App view. (zoom target)

Kind: instance property of App

app.screenWidth ⇒ Number

The width of the window.

Kind: instance property of App

app.screenHeight ⇒ Number

The height of the window.

Kind: instance property of App

app.paused ⇒ boolean

Get the app paused value.

Kind: instance property of App

app.paused

Set the app paused value.

Kind: instance property of App

Param Type
val boolean

app.zoom

Get the zoom value.

Kind: instance property of App

app.zoom

Set the zoom value.

Kind: instance property of App

Param
val

app.centerOn(object)

Center on an object in the App.

Kind: instance method of App

Param
object

app.togglePause()

Toggle app paused value.

Kind: instance method of App

app.pauseRendering()

Pause rendering of the app.

Kind: instance method of App

app.resumeRendering()

Resume rendering of the app.

Kind: instance method of App

app.kill()

Kill the app renderer.

Kind: instance method of App

app.translatePosition(position) ⇒ Object

Translate a position from the window into the app.

Kind: instance method of App

Param
position

app.update(seconds)

The main update loop of the app, which is triggered by the renderer.

Kind: instance method of App

Param Type
seconds Number

app.previewObject(object) ⇒ AppObject

Add an AppObject to the view, but not the game loop.

Kind: instance method of App
Returns: AppObject - - (object)

Param Type
object AppObject

app.cancelPreview(object) ⇒ AppObject

Remove an AppObject from the view which was added with .previewObject()

Kind: instance method of App
Returns: AppObject - - (object)

Param Type
object AppObject

app.removeObjects(objects)

Remove an array of AppObjects.

Kind: instance method of App

Param Type Description
objects Array.<AppObject> An array of AppObjects to remove from the App.

app.contains(object) ⇒ boolean

Check if the App contains an AppObject.

Kind: instance method of App

Param Type Description
object AppObject The AppObject to check.

app.add(object) ⇒ AppObject

Add an AppObject to the App.

Kind: instance method of App

Param Type Description
object AppObject The AppObject to add.

app.remove(object) ⇒ AppObject

Remove an AppObject from the App.

Kind: instance method of App

Param Type Description
object AppObject The AppObject to remove.

app.addFx(object)

Add an AppObject to the FX layer.

Kind: instance method of App

Param Type Description
object AppObject The FX object to add.

app.removeFx(object)

Remove an AppObject from the FX layer.

Kind: instance method of App

Param Type Description
object AppObject The FX object to remove.

app.updateZoom(seconds)

Update the App scale and position based on the targetScale (zoom).

Kind: instance method of App

Param Type Description
seconds Number The amount of time passed since the last update.

app.selectObject(object, additive)

Select an AppObject.

Kind: instance method of App

Param Type Default Description
object AppObject The object to select.
additive boolean false Whether to add to the current selections, instead of replacing them.

app.select(left, top, right, bottom, additive)

Select all objects within the given coordinates.

Kind: instance method of App

Param Type Default Description
left number The left coordinate. (x1)
top number The top coordinate. (y1)
right number The right coordinate. (x2)
bottom number The bottom coordinate. (y2)
additive boolean false Whether to add to the current selections, instead of replacing them.

app.selectAll()

Select all objects within the app.

Kind: instance method of App

app.deselectAll()

Deselect all selected objects.

Kind: instance method of App

app.removeSelected()

Remove all selected objects.

Kind: instance method of App

App.defaultOptions ⇒ Object

The default options which are used in an App.

Kind: static property of App

AppObject

AppObjects which are added to the App.

Kind: global class

new AppObject(app, parent, player, position, scale, pivot, rotation, momentum, dampening)

Instantiate a new AppObject.

Param Type Description
app App The App the AppObject belongs to.
parent App | AppObject The parent of the AppObject.
player object The player who owns the AppObject.
position object The position {x, y} of the AppObject.
scale object The scale {x, y} of the AppObject.
pivot object The pivot point {x, y} for rotation of the AppObject.
rotation object The rotation of the AppObject.
momentum object The movement speed of the AppObject.
dampening object The amount that momentum and rotation decreases over time.

appObject.select()

Select this AppObject.

Kind: instance method of AppObject

appObject.deselect()

Deselect this AppObject

Kind: instance method of AppObject

appObject.selectionHitTest()

Check if provided coordinates are cause for the selection of this AppObject

Kind: instance method of AppObject

appObject.beforeUpdate(seconds)

The update operation to occur before all normal update operations within the App.

Kind: instance method of AppObject

Param Type Description
seconds number The number of seconds since the last update.

appObject.update(seconds)

The update operation for the main loop of the App.

Kind: instance method of AppObject

Param Type Description
seconds number The number of seconds since the last update.

appObject.afterUpdate(seconds)

The update operation to occur after all normal update operations within the App.

Kind: instance method of AppObject

Param Type Description
seconds number The number of seconds since the last update.

appObject.updateMovement(seconds)

Update movement based on momentum.

Kind: instance method of AppObject

Param Type Description
seconds number The number of seconds since the last update.

appObject.updateDampening(seconds)

Update movement dampening, causing the AppObject to slow down.

Kind: instance method of AppObject

Param Type Description
seconds number The number of seconds since the last update.

appObject.draw()

Update the visual appearance of the AppObject.

Kind: instance method of AppObject