Bunch* of useful debug tools for speeding up development process of Pixi.js** based applications. Written in TypeScript.
TypeScript JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
gulp/tasks
src
typings
.npmignore
LICENSE
README.md
gulpfile.js
package.json
tsconfig.json
tsd.json

README.md

FConsole

Bunch* of useful debug tools for speeding up development process of Pixi.js** based applications. Written in TypeScript.

Inspired by Flash-Console.

Use with Google Chrome for better experience and debug functionality.

Demo

Demo | Demo Source

Feedback

Features

Display List Inspector

Hierarchy

Display List Inspector - Hierarchy

How to:

  1. Open the console by inputting a password (default is `). In the demo the console is shown from the beginning.
  2. Click on the DL button.
  3. Move cursor over some visual elements.

Properties Editing

Display List Inspector - Editing

How to:

  1. Assing a capture key to the Display List popup (click to the Capture key button and press a key).
  2. Move cursor over some visual elements.
  3. Press the assinged key (see #1).
  4. Open Developer Tools Console in browser (Google Chrome Win: F12 or Ctrl + Shift + I, MacOS: CMD + Alt + I).
  5. Check the display list hierarchy in the console.
  6. Expand an object and change it's properties
  7. (Optional, Google Chrome) Store an object as a Global Variable from context menu (right click on the object)

Additional Information

Display List Inspector - Editing

How to:

  1. Click on the Additional Info button.
  2. Move cursor over some visual elements.
  3. Check the additional information next to the hierarchy visual elements.
  4. (Optional) Parameters shown in the additional info mode can be modified by changing the FC.config.displayListSettings.additionalInfoParams parameter.

Move Helper

Display List Inspector - Editing

How to:

  1. Click on the Move Helper button.
  2. Move cursor over some visual elements.
  3. Press the CTRL button.
  4. The text [MOVABLE] will be shown next to the current active movable object (if there is no [MOVABLE] text, it means that there is no selected objects).
  5. Press the arrow keys (← ↑ → ↓) to move the active movable object. Combine the SHIFT key and the arrow keys to move objects to the 10px in any direction.

Installation

FConsole can be installed with NPM:

$> npm install fconsole

Usage Example (TypeScript)

With native Pixi.js

import {EngineAdapter, PixiAdapter} from "fgraphics/dist/index";
import {FC} from "fconsole/dist/index";

// Native Pixi.js renderer
let renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);
// Native main container
let stage = new PIXI.Container();

// At the very beginning we need to instantiate a graphics adapter (in our case the Pixi.js adapter).
EngineAdapter.instance = new PixiAdapter({renderer: renderer, nativeStage: stage});
// Initialization of the console (should be initialized after initialization of the adapter)
FC.startInit(EngineAdapter.instance.createDisplayObjectContainerWrapper(stage));
// Optional (to make the console visible from the beginning)
FC.visible = true;

With the Graphics Adapter API

import {EngineAdapter, PixiAdapter, TickerEvent} from "fgraphics/dist/index";
import {FC} from "fconsole/dist/index";

// Initialization of the grpahics adapter (in our case the Pixi.js adapter)
EngineAdapter.instance = new PixiAdapter(
  {
    rendererSettings: {
      backgroundColor: 0xAAAAAA
    },
    rendererWidth: 800,
    rendererHeight: 600
  }
);
// Append the renderer canvas to the DOM
document.body.appendChild(EngineAdapter.instance.canvas);

// Render graphics by ticker events
EngineAdapter.instance.mainTicker.addEventListener(
  TickerEvent.TICK,
  () => {
    EngineAdapter.instance.renderGraphics();
  }
);

// Initialization of the console (should be initialized after initialization of the adapter)
FC.startInit(EngineAdapter.instance.stage);
// Optional (to make the console visible from the beginning)
FC.visible = true;

SystemJS config (example)

SystemJS.config(
  {
    transpiler: "typescript",
    packages: {
      "src": {defaultExtension: "ts"},
      "fcore": {defaultExtension: "js"},
      "fgraphics": {defaultExtension: "js"},
      "flibs": {defaultExtension: "js"},
      "fconsole": {defaultExtension: "js"},
      "eventemitter3": {defaultExtension: "js"}
    },
    map: {
      "fcore": "node_modules/fcore",
      "fgraphics": "node_modules/fgraphics",
      "flibs": "node_modules/flibs",
      "fconsole": "node_modules/fconsole",
      "eventemitter3": "node_modules/eventemitter3/index.js"
    }
  }
);

Notes

* Not all of the planned features are implemented yet, there are some enhancements to be done.

** At the current moment (up to the August 29, 2016) the console works only with Pixi.js library but the fgraphics lib was developed to be enhanced for supporting different game engines. The next major adapter which is planned to be implemented is the EaselJS adapter.