phaser3_gui_inspector

    1.2.1 • Public • Published

    Phaser3_GUI_Inspector (PGInspector.js)

    GitHub issues GitHub license 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

    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

        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

    Install

    npm i phaser3_gui_inspector

    DownloadsWeekly Downloads

    46

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    118 MB

    Total Files

    53

    Last publish

    Collaborators

    • fluxhunter