RPG Maker Forums

// ┌□-□───────────-RMMV PICTURES DEBUG TOOL-──────────────┐
// □ Version-0.9.3 alpha release
// □ Free for commercial and non commercial use.
// └──────────────────────□□□□□□□□□───────────────────────┘
/*:
 * @plugindesc AWSOME picture debuger for make a awsome game
 * @author jonforum || djmisterjon
 *
 * @param mouseButton
 * @desc set the default buton to debug (recomended middle)
 * 1:'left' 2:'middle' 3:'rigth'
 * @default 2
 *
 * @param lineSize
 * @desc the line size: number
 * @default 3
 *
 * @param pointSize
 * @desc The size and border for Squares : [x,y,b]
 * to use circle, add a radius at end [x,y,b,r]
 * @default [12,12,3]
 *
 * @param pointStyles
 * @desc the color for square, inside and border : [cIn,cOut]
 * use Hex without '#'
 * @default 'FFFF00','FF0000'
 *
 *
 * @param capturePictureBy
 * @desc theif old button over a picture, move this picture
 *clipboard use the fileName of the picture your are working
 *  'clipboard'  'click' 'none'
 * @default 'click'
 *
 * @param capturePictureLots
 * @desc if true, it will capture all pictures below the mouse
 * not work with clipboard
 * @default false
 *
 * @param clownGhostPictures
 * @desc move the original picture , or make a clown with alpha
 * [true,alpha]    alpha are between 0.1 and 1
 * @default [true,0.5]
 *
 * @param PixiLimiteSprites
 * @desc set the limite of sprites on map, before clear painting
 * @default 24
 *
 * @param clipBoardData
 * @desc set the formula you when automaticly copy in
 * possibility are: 'origin' 'end' 'dist' or 'full'
 * @default full
 *
 * @param psychedelicMode
 * @desc lines not clear() on update, so you can do..you can do...?
 *  nothing! is for fun! also test performance GPU&CPU!
 * @default false
 *
 * @param pixiResolution
 * @desc you have a cheap gpu, you can reduce de quantifier
 *  this afect only the PIXI , set to 0.1 to 1
 * @default 1
 *
* @param showGridDebug
 * @desc show a grid over all scenes for debug
 * set true of false
 * @default true
 *
* @param gridSetup
 * @desc set the color,borderSize and alpha for grid
 * ["colorBorder",border,alphaBorder]
 * @default ["ffffff",2,0.1]
 * @help
 *
* @param whellRotation
 * @desc set the angle when you use the whell to
 * make the picture rotation. Is fixed to Anchor
 * @default 15
 * @help
 * ┌□-─-HELP ABOUT DEBUG PICTURE-───────┐
 *    https://goo.gl/XnRuFG
 * └─────□□□□□□□□□────────┘
ABOUT THIS AWSOME PLUGIN:↓ ?
Here is an exceptional plugin for all developer who develops a project based on an picture and pixi sprite engine.
I lose more than 5 minutes to position some of my picture in my game engine, so I decided to remedy the situation.
This plugin allows you with the mouse to move images and get all the information to position it.
You can easily position && move an image and get the nessesary information in order to avoid lots trying and mistake, when you try positioning you sprites.
It also take all adding in child picture container.
It is exclusively a great tool to work, it can generate problems in the game, but the idea is to be able to activate it when necessaire, for avoid math calculation and save time.

please lets me know if you have BUGS!?
HOW IT USE:↓↓↓↓↓↓ ?
At the base I designed them to work in javascript only and for my game engine, but I adapt them for all people, so now, it has parameters.
here the basic step feature:
Click on a picture with you middle(recomended) mouse button and hold it.
Move you mouse with the picture where you need
release middle button
take information from console, title bar or in the clipBoard (CTRL+V) in your plugin or the sofware engine.
FEATURES: ↓↓↓↓↓↓?
more info go here
https://goo.gl/XnRuFG
 */
var jonLPictureDebuger = jonLPictureDebuger || {};
(function($) {
    // ┌□-□─────────────-PluginManager-───────────────┐
    // □ parameter
    // └──────────────────□□□□□□□□□───────────────────┘
    var param = PluginManager.parameters('jonLPictureDebuger');
    var pixiLimit = Number(param.PixiLimiteSprites);
    var lineSize = Number(param.lineSize);
    var sqSize = JSON.parse(param.pointSize);
    var sqColor = param.pointStyles.match(/\w+/gi);
    var lsdMode = JSON.parse(param.psychedelicMode);
    var pinMode = param.capturePictureBy;
    var clipboardNeed =  param.clipBoardData;
    var showGridDebug =  JSON.parse(param.showGridDebug);
    var gridSetup =  JSON.parse(param.gridSetup);
    var mouseButton = Number(param.mouseButton);
    var whellRotation = Number(param.whellRotation);
 
    // ┌□-□───────────────────-CONSOLELOGCSS-─────────────────────┐
    // □ consCss1[0] □ consCss1[1] □ consCss1[2] □ consCss1[3]
    // └─────────────────────────□□□□□□□□□────────────────────────┘
    var consCss1 = [
    ['background: linear-gradient(#008000, #004000)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ['background: linear-gradient(#c91919, #6d0c0c)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ['background: linear-gradient(#ffa500 , #6B4500)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ['background: linear-gradient(#404040 , #191919)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ];
    // ┌□-□─────────────-VARIABLESCOPE-───────────────┐
    // □ jonLPictureDebuger
    // └──────────────────□□□□□□□□□───────────────────┘
    var scenes, pixiLine, isOlding, SCM, pixiShapeScene;
    var dataXY = {},docuTxtData = [],fixXYline = [],endFixdata = [],distanceData = [],grabList = [],txtAboutHolding = '',
        originClick = '',dataGlobalName = '',dataGlobalID = 0;
    // ┌□-jonLPictureDebuger-□─────────────────────────-MOUSEEVENT-───────────────────────────────────┐
    // □ _onMouseDown □ _onMouseMove □ _onMouseUp □ _UpdatePinGrabPicture □ _onWheel □ _onMouseDown
    // └────────────────────────────────────────────────□□□□□□□□□─────────────────────────────────────┘
    $._onMouseDown = function(event) { //_active
        if(event.which!==mouseButton){return false;}
        SCM = SceneManager._scene;
        if (SCM.constructor.name !== 'Scene_Map' || !SCM._active) {return false};
        pixiShapeScene = pixiShapeScene || SceneManager._scene._pixishapeDebug;
        if (pixiShapeScene.children.length > pixiLimit) { pixiShapeScene.removeChildren()};
        var x = Graphics.pageToCanvasX(event.pageX);
        var y = Graphics.pageToCanvasY(event.pageY);
        fixXYline = [x, y]; // for draw line follow
        // check grabPicture  + //data txt setup
        dataXY = {}; docuTxtData = []; dataXY.oX = x, dataXY.oY = y;
        var origin = [];
        if (!isOlding) {
            dataGlobalID =0;
            grabList = this._iniGrabPicture(x, y, grabList);
            var grabListFix = grabList.valueOf();
            txtAboutHolding = grabListFix.length && '░ID:'+dataGlobalID+' ' + grabListFix[0]._name + '░' || '';
            if(grabListFix[0]._parentSpinePID){ // si a un parent (spine)
                var idSpine = grabListFix[0]._parentSpinePID;
                origin = grabListFix.length && $gameScreen._pictures[idSpine]._x, $gameScreen._pictures[idSpine]._y;
            }else{
                origin = grabListFix.length && [grabListFix[0]._x, grabListFix[0]._y];
            }
          
            // if click picture fix the pointer,
            fixXYline = origin || fixXYline;
            originClick = ' ░Origin:► '+'oX:' + fixXYline[0] + ' oY: ' + fixXYline[1] + ' ░'
            docuTxtData.push(txtAboutHolding, originClick);
            document.title = docuTxtData;
            //pixi setup
            var square = new PIXI.Graphics();
            square.beginFill('0x' + sqColor[0]); square.lineStyle(sqSize[2], '0x' + sqColor[1]);
            sqSize.length < 4 && square.drawRect(fixXYline[0], fixXYline[1], sqSize[0], sqSize[1]) || square.drawCircle(fixXYline[0], fixXYline[1], sqSize[3])
            pixiShapeScene.addChild(square);
            pixiLine = new PIXI.Graphics();
            pixiLine.lineStyle(lineSize, 0xffffff).moveTo(fixXYline[0], fixXYline[1]).lineTo(fixXYline[0], fixXYline[1]);
            pixiShapeScene.addChild(pixiLine);
            isOlding = true;
        };
    };

    $._onMouseMove = function(event) {
        if(event.which!==mouseButton){return false;}
        SCM = SceneManager._scene;
        if (!isOlding || SCM.constructor.name !== 'Scene_Map' || !SCM._active) {return false};
        var x = Graphics.pageToCanvasX(event.pageX);
        var y = Graphics.pageToCanvasY(event.pageY);
        if (isOlding) {
            lsdMode || pixiLine.clear();
            var color = lsdMode && '0x' + Math.floor(Math.random() * 16777215).toString(16) || 0xffffff;
            pixiLine.lineStyle(lineSize, color).moveTo(fixXYline[0], fixXYline[1]).lineTo(x, y);
            if (grabList) {this._UpdatePinGrabPicture(grabList, x, y)};}
            else {isOlding = true};
        document.title = docuTxtData + ' x»' + x + ' y»' + y;
    };

    $._onMouseUp = function(event) {
        if(event.which!==mouseButton){return false;}
        SCM = SceneManager._scene;
        if (!SCM._active || SCM.constructor.name !== 'Scene_Map') {return false;};
        pixiShapeScene = pixiShapeScene || SceneManager._scene._pixishapeDebug;
        var x = Graphics.pageToCanvasX(event.pageX);
        var y = Graphics.pageToCanvasY(event.pageY);
        endFixdata = [x,y];
        var square = new PIXI.Graphics();
        square.beginFill('0x' + sqColor[0]); square.lineStyle(sqSize[2], '0x' + sqColor[1]);
        sqSize.length < 4 && square.drawRect(x, y, sqSize[0], sqSize[1]) || square.drawCircle(x, y, sqSize[3])
        pixiShapeScene.addChild(square);
        var endDataXy = ' ░End:► '+'eX:' + endFixdata[0] + ' eY: ' + endFixdata[1] + ' ░'
        distanceData = [endFixdata[0]-fixXYline[0],endFixdata[1]-fixXYline[1]];
        var enddataResult = ' ((( X℅ '+distanceData[0]+' Y℅ '+distanceData[1]+' )))';
        docuTxtData.push(endDataXy,enddataResult);
        document.title = docuTxtData;
        consoleDebugColoration();
        // console Log coloration
        isOlding = false;
    };
    // besoin de spliter chaque sprite dans des petit container
    $._UpdatePinGrabPicture = function(grabList, X, Y) {
         if(grabList[0]._parentSpinePID){ // si a un parent (spine)
                var idSpine = grabList[0]._parentSpinePID;
                X = X-$gameScreen._pictures[idSpine]._x;
                Y = Y-$gameScreen._pictures[idSpine]._y;
         }
        for (var i = grabList.length; i--;) { grabList[i]._x = grabList[i] && X, grabList[i]._y = grabList[i] && Y };
    };

    $._iniGrabPicture = function(x, y, grabList) { //spritePicture.isCursorOnPicture()  getBounds();
        if (!pinMode || pinMode === 'none') {return false; }
        var picTriged = SceneManager._scene._spriteset._pictureContainer.children.filter(function(pic) { return (pic.getBounds().contains(x, y)) });
        grabList = [];
        for (var i = picTriged.length; i--;) {
            var id = picTriged[i]._pictureId; dataGlobalID = id;
            var picScreen = $gameScreen._pictures[id];
            var asOwnChild = picTriged[i].children.length;
            var isPixiTextChild = asOwnChild && picTriged[i].children[asOwnChild - 1];
            var ispixitxt = isPixiTextChild && isPixiTextChild.constructor.name === 'Text' || false;
            var w = ispixitxt && isPixiTextChild.width || picTriged[i].width;
            var h = ispixitxt && isPixiTextChild.height || picTriged[i].height;
            dataGlobalName = picScreen._name;
            var origin = picScreen._origin;
            if (Array.isArray(origin)) { var ox = (w * origin[0]), oy = (h * origin[1]); }
            else { var ox = (w * origin) / 2, oy = (h * origin) / 2; };
            picScreen._pictureId = picTriged[i]._pictureId;
            grabList.push(picScreen);
            if (ispixitxt || !asOwnChild) {
                var square2 = new PIXI.Graphics();
                square2.alpha = 0.35;
                var color = '0x' + Math.floor(Math.random() * 16777215).toString(16) || 0xffffff;
                square2.beginFill(color);
                square2.drawRect(0 - ox, 0 - oy, w, h);
                picTriged[i].addChild(square2);
                var square3 = new PIXI.Graphics();
                square3.alpha = 1;
                square3.fillAlpha = 0
                square3.lineStyle(4, 0x000000);
                square3.drawRect(0 - ox, 0 - oy, w, h);
                picTriged[i].addChild(square3);
            };
            break; // if not lot pictures // TODO:
        };
        return grabList;
    };
    $._onWheel = function(event) { // TODO:
        console.log('event: ', event);
        var whellY = event.wheelDeltaY;
        if(dataGlobalID){
            var picWhell = $gameScreen._pictures[dataGlobalID];
            picWhell._angle+=(whellY>0)&&whellRotation||-whellRotation;
        }else{
            var xZ = Graphics.pageToCanvasX(event.pageX);
            var yZ = Graphics.pageToCanvasY(event.pageY);
            console.log('>>>ZoomTo<<<', xZ,yZ);
            $gameScreen._zoomX =xZ;$gameScreen._zoomY =yZ;
            $gameScreen._zoomScale+=(whellY>0)&&(whellRotation/100)||-(whellRotation/100);
        }
    }



    // ┌□-□────────────-FUNCTION-───────────────┐
    // □ consoleDebugColoration
    // └────────────────□□□□□□□□□───────────────┘
    var consoleDebugColoration = function(){
      console.log('%c RESULT FROM:'+dataGlobalName,consCss1[3],' PID:'+dataGlobalID);
      console.log('%cOriginXY:',consCss1[0],String(fixXYline));
      console.log('%cEndPointXY:',consCss1[1],String(endFixdata));
      console.log('%cResultDistance:',consCss1[2],String(distanceData));
      if(clipboardNeed==='origin'){//'origin' 'end' 'dist' or 'full'
        require('nw.gui').Clipboard.get().set(String(fixXYline)); // this will send to clipboard
      }else if(clipboardNeed==='end'){
        require('nw.gui').Clipboard.get().set(String(endFixdata)); // this will send to clipboard
      }else if(clipboardNeed==='dist'){
        require('nw.gui').Clipboard.get().set(String(distanceData)); // this will send to clipboard
      }else if(clipboardNeed==='full'){
        require('nw.gui').Clipboard.get().set(String(['o:'+fixXYline,' e:'+endFixdata,' d:'+distanceData]));
      };
    };

// ┌□-Scene_Map-□────────────-PROTOTYPE-─────────────────┐
// □ newPixiPictureDebug □ BuildGridMapping □ updateMain
// └──────────────────────────□□□□□□□□□──────────────────┘
_Pixidebug_createDisplayObjects = Scene_Map.prototype.createDisplayObjects;
Scene_Map.prototype.createDisplayObjects = function() {
    _Pixidebug_createDisplayObjects.call(this);
    this.newPixiPictureDebug();
    if(showGridDebug){this.BuildGridMapping();}
 
};

Scene_Map.prototype.newPixiPictureDebug = function() {
    this._PixiPictureDebug = new Sprite();
    this._spriteset.addChild(this._PixiPictureDebug);
    this._pixishapeDebug = new Sprite();
    this._spriteset.addChild(this._pixishapeDebug);
    this._pixiGridMapping = new Sprite();
    this._spriteset.addChild(this._pixiGridMapping);

};
if(showGridDebug){
    Scene_Map.prototype.BuildGridMapping = function() {
        var PixiGrid = this._pixiGridMapping, x = 0, y = 0;
        this.gridW = $gameMap.tileWidth()*$gameMap.width();
        this.gridH = $gameMap.tileHeight()*$gameMap.height();
        var length = $gameMap.height();
        var w = this.gridW,h = $gameMap.tileHeight();
        for(var i = 0;i<length;i++){
            var inGrid = new PIXI.Graphics();
            inGrid.alpha = gridSetup[2]; inGrid.fillAlpha = 0;
            inGrid.lineStyle(gridSetup[1], '0x'+gridSetup[0]);
            inGrid.drawRect(x, y+(i*h), w, h);
            PixiGrid.addChild(inGrid);
        };
        var length = $gameMap.width();
        var w = $gameMap.tileWidth(),h = this.gridH;
        for(var i = 0;i<length;i++){
            var inGrid = new PIXI.Graphics();
            inGrid.alpha = gridSetup[2]; inGrid.fillAlpha = 0;
            inGrid.lineStyle(gridSetup[1], '0x'+gridSetup[0]);
            inGrid.drawRect(x+(i*w), y, w, h);
            PixiGrid.addChild(inGrid);
        };
    };
};
if(showGridDebug){
    alias_PixiJonDebuger_Scene_Map_updateMain = Scene_Map.prototype.updateMain;
    Scene_Map.prototype.updateMain = function() {
        alias_PixiJonDebuger_Scene_Map_updateMain.call(this);
            this._pixiGridMapping.x=-($gameMap._displayX*$gameMap.tileWidth());
            this._pixiGridMapping.y=-($gameMap._displayY*$gameMap.tileHeight());
    };
};


// ┌□-document-□────────────-LISTERNER-─────────────────┐
// □ mousedown □ mouseup □ mousemove □ wheel
// └─────────────────────────□□□□□□□□□──────────────────┘
    document.addEventListener('mousedown', $._onMouseDown.bind($));
    document.addEventListener('mouseup', $._onMouseUp.bind($));
    document.addEventListener('mousemove', $._onMouseMove.bind($));
    document.addEventListener('wheel', $._onWheel.bind($));
})(jonLPictureDebuger);