Phaser3_GUI_Inspector (PGInspector.js)

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

SCREENSHOT)

EXAMPLE)\     NODE_JS) - it has a 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)
        }
    );
}

        or

// 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
    }
}

    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

<img src="https://github.com/SilverTree7622/Phaser3_GUI_Inspector/raw/1.2.1/zReadmeSrc/v120/cmdsCapture.gif" width="70%">

    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)

<img src="https://github.com/SilverTree7622/Phaser3_GUI_Inspector/raw/1.2.1/zReadmeSrc/v120/pointerModeCapture.gif" width="70%">

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

<img src="https://github.com/SilverTree7622/Phaser3_GUI_Inspector/raw/1.2.1/zReadmeSrc/v120/camerDebugCapture.gif" width="70%">

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

<img src="https://github.com/SilverTree7622/Phaser3_GUI_Inspector/raw/1.2.1/zReadmeSrc/v120/followingCapture.gif" width="70%">

        - 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)

<img src="https://github.com/SilverTree7622/Phaser3_GUI_Inspector/raw/1.2.1/zReadmeSrc/v120/showcase1.gif" width="70%">

    - test same thing in mini game

<img src="https://github.com/SilverTree7622/Phaser3_GUI_Inspector/raw/1.2.1/zReadmeSrc/v120/inGameTestCapture.gif" width="70%">