Phaser3_GUI_Inspector (PGInspector.js)

GitHub All Releases jsDelivr npm

WARNING)\ This is the only for phaser3 framework

DESCRIPTION)\ I just inspired by babylon.js inspector\ This is a just custom dat.GUI, which works as Phaser3 inspector of each display list stuffs \ Also you can use this as debug displayed game objects

SUPPORT)\

SCREENSHOT)

EXAMPLE)\ NODE_JS) - it has an issue so not recommended right now

npm install phaser3_gui_inspector --save-dev
npm i phaser3_gui_inspector --save-dev

// set in javascript file
import PhaserGUIAction from 'phaser3_gui_inspector';

IN_HTML_URL) - prefer this method to test

// latest version
<script src="https://cdn.jsdelivr.net/gh/SilverTree7622/Phaser3_GUI_Inspector@latest/dist/PGInspector.js"></script>
// previous version
<script src="https://cdn.jsdelivr.net/gh/SilverTree7622/Phaser3_GUI_Inspector@1.1.1/dist/PGInspector.js"></script>

IN_JS)

function create() {
    /*
    * your any codes
    */

    // should call this function at the end of Phaser.Scene create function
    // below method is gonna apply with default detailed setting
    PhaserGUIAction(this);

    // or

    // add some custom config object
    // first index is Phaser.Scene, second is config object
    PhaserGUIAction(
        this,
        {
            alpha: 0.6, // 0.0 ~ 1.0 (any value, you can change it in GUI)
            right: 100, // any value
            top: 50 // any value
            side: true // boolean (default is true)
        }
    );
}

// your custom Phaser.Scene class
class MainScene extends Phaser.Scene {
    preload() {
        /*
        * your any codes
        */
    }
    create() {
        /*
        * your any codes
        */

        PhaserGUIAction(this); // also config object one works
    }
}

ONE_JS_FILE_SOLUTION) : No any setting. Just one JS file solution (Don't need to touch html or else)

// on the top of the one JS file
// these delare stuffs role is importing PGInspector.js via direct URL

const PGIurl = 'https://cdn.jsdelivr.net/gh/SilverTree7622/Phaser3_GUI_Inspector@latest/dist/PGInspector.js'; 
const PGIele = document.createElement('script');
PGIele.src = PGIurl;
document.head.appendChild(PGIele);

/*
* your any codes
*/

// in Phaser Scene create function
function create() {
    /*
    * your any codes
    */

    // use function at the end of the Phaser create function
    PhaserGUIAction(this);
}

IN_DEVTOOLS)\ It has some info in console way

USAGE)\ mouse command : \ (SHIFT + F) or (SHIFT + LEFT CLICK) is the most important & basic command for controlling Game Objects\ This makes Game Object 'Focus' which twinkles with RED BOUND\ The others is on the command list like below

You can find command list in the Side GUI (init option 'side' should be true)

WARNING)\ - You can find specific Game Object via opening DISPLAY_LIST\ but i recommend to use command because performance optimization is based on the command actions

VERSION)\ PREVIOUS_UPDATE) https://github.com/SilverTree7622/Phaser3_GUI_Inspector/tree/master/zUpdate

1.2.0)\ - Add Pointer Mode for ease (Move, Scale, Angle, None)\ Related Commands are (SHIFT + Q, W, E, R) for changing Pointer Mode & control with (SHIFT + LEFT CLICK)

- Add Camera Move & Zoom\ Related Commands are (SHIFT + RIGHT CLICK) & (SHIFT + MOUSE SCROLL) & (SHIFT + S)

- Add Following Focused Game Object\ Related Commands (SHIIFT + A) following or stop toggling when focused

- Improve performance via partially hide

- Add Focus on/off toggle in detail

- Add Focus Game Object visible toggle\ Related Commands (SHIIFT + V) when focused

- Add Focus Game Object's detail\ Related Commands (SHIIFT + D) when focused

- Add Main Camera Blue Boundary only when move, zoom or following active

- Add Default Zoom function which is just same as (SHIFT + S)

SHOWCASE)\ - mix with focused(SHIFT + F) + following(SHIFT + A) + Pointer Move Mode(SHIFT + Q)

- test same thing in mini game

SilverTree7622 / Phaser3_GUI_Inspector

readme

Phaser3_GUI_Inspector (PGInspector.js)