☯◦ MASTER PICTURES DEBUG TOOL ◦☯ 2017-07-12||v.0.9.3

Discussion in 'JS Plugin Releases (RMMV)' started by Jonforum, Jul 3, 2017.

  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    asegvsegg43y6.jpg
    ABOUT THIS AWSOME PLUGIN: ?
    [lastUpdate][alpha][v.0.9.3] (2017-07-12)
    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: ?
    @param mouseButton

    what button use for debug.Depending on how you work.
    I recommend 'middle', but it's not everybody who has a mouse with center button.
    for logiteque mouse, be shure you have not assigne custom middle button to your mouse.
    or select the software, and set a custom preset for when your game are focus.
    *The setup as a number : 1:'left' 2:'middle' 3:'rigth'
    @param lineSize
    is the size of the line draw when you hold the mouse button and move it.
    @param pointSize
    is the size of origin point and the end point.
    w: width, h: Height, b: borderSize ,(r: radius)
    to make square, is [w,h,b]
    to make circle, is [w,h,b,r]
    @param pointStyles
    is the color for point (square or circle) in hex
    you have the fill color and the border color
    juste remove the # befor the hex color
    link: http://www.color-hex.com/color-palettes/popular.php
    ex: ffe0bd d39f56
    @param capturePictureBy
    the setup for how capture picture.
    For now is only by click, but you will can choose by filename.
    So example, make a copy of the file name with CTRL+C,.
    And after, no matter where you will click, it will be this picture that will be capture.
    This mode avoids capturing pictures, that are hover, the desired picture.
    @param capturePictureLots
    Captures the first image under the mouse, or all pictures under the mouse.
    This allows to move, if necessary, a batch of pictures that are connected.
    @param clownGhostPictures
    I am working on for now, the idea is to create a transparent image clones, while not altering the original image when you click && move.
    To get a better idea of the design result before and after
    @param PixiLimiteSprites
    all element are create with pixi, and pixi use GPU, so if you have cheap gpu.
    you can reduce the maximum of element can be show befor reset and clean.
    @param clipBoardData
    this cool feature can be allow the final result (auto copy) in the clipboard.
    Is for save time, and past in you javascript, or in the sofware rmmv engine.
    is the result copy to memory after click, simply use CTRL+V after click to paste where you whant.
    'origin' you get copy of the origin XY point after click.
    'end' you get copy of the end XY point after click
    'dist' you get copy of the math result between the origin and end point after click.
    'full' you get all math in the memory, origin+end+dist
    @param pixiResolution
    if you whant a lot of element and you have cheap GPU.
    You can set the PIXI engine resolution, this will after all you game.
    This is not the resolution of you game window but it how the engine make pixel.
    for half result you can set to 0.5;
    @param showGridDebug [v.0.9.1]
    allow to show a grid, it will hover everything, even the pictures.
    Set to true or false, is will add grid update to
    Scene_Map.prototype.updateMain
    it's bind to the map, it does not move with the screen.:D
    View attachment 68005
    @param gridSetup[v.0.9.1]
    set the color for grid ,borderSize and alpha.
    use a array like thats. Alpha are 0.1 to 1;
    ["colorBorder",border, alphaBorder]
    @param whellRotation[v.0.9.2]
    set the rotation Angle when you use your mouse Wheel
    recommande 15, is by %360.
    Is fixed to Anchor so you can easy see animation and if
    you set correctly the pivot point to your pictures.
    Usefull if you work with animation and picture spine
    and to Anticipate a possible animation

    [​IMG]
    @param psychedelicMode
    why not, see the ending video
    You can also use to test some performance of you game engine.
    Or if you find another utility, tell me !

    +++mouse Scroll ZoomIn||Out[v.0.9.3]
    if not picture select, use mouse scroll to zoom in or Zoom Out
    is for picture Pixel Placement, or see how your pictures will work outside Camera Limit.
    [​IMG]
    +++Minorfix: picture Child Spine parent[v.0.9.3]
    if you assigne a parent picture to a picture. (spine)
    It will take the parent spine position and not the current picture child position
    COMPATIBILITY NOTE: ↓↓↓↓↓↓?
    Any plugin that destroys or modifies the origin of the location of the sprites and children.
    I added compatibility with pixi.text,in pictureContainer, so you can add pixi text class in original child sprites.
    also like in the video.

    LISENCE: ↓↓↓↓↓↓?
    credit me as djmisterjon or jonforum , thanks

    CREDIT ORIGINAL TRACK: ↓↓↓↓↓↓?
    My inspiration and delirium for editing are inspired by these original track.

    SNIPET CODE: ↓↓↓↓↓↓?
    PHP:
    // ┌□-□───────────-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 scenespixiLineisOldingSCMpixiShapeScene;
        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 
    Graphics.pageToCanvasX(event.pageX);
            var 
    Graphics.pageToCanvasY(event.pageY);
            
    fixXYline = [xy]; // for draw line follow
            // check grabPicture  + //data txt setup
            
    dataXY = {}; docuTxtData = []; dataXY.oX xdataXY.oY y;
            var 
    origin = [];
            if (!
    isOlding) {
                
    dataGlobalID =0;
                
    grabList this._iniGrabPicture(xygrabList);
                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]._xgrabListFix[0]._y];
                }
              
                
    // if click picture fix the pointer,
                
    fixXYline origin || fixXYline;
                
    originClick ' ░Origin:► '+'oX:' fixXYline[0] + ' oY: ' fixXYline[1] + ' ░'
                
    docuTxtData.push(txtAboutHoldingoriginClick);
                
    document.title docuTxtData;
                
    //pixi setup
                
    var square = new PIXI.Graphics();
                
    square.beginFill('0x' sqColor[0]); square.lineStyle(sqSize[2], '0x' sqColor[1]);
                
    sqSize.length && 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(lineSize0xffffff).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 
    Graphics.pageToCanvasX(event.pageX);
            var 
    Graphics.pageToCanvasY(event.pageY);
            if (
    isOlding) {
                
    lsdMode || pixiLine.clear();
                var 
    color lsdMode && '0x' Math.floor(Math.random() * 16777215).toString(16) || 0xffffff;
                
    pixiLine.lineStyle(lineSizecolor).moveTo(fixXYline[0], fixXYline[1]).lineTo(xy);
                if (
    grabList) {this._UpdatePinGrabPicture(grabListxy)};}
                else {
    isOlding true};
            
    document.title docuTxtData ' 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 
    Graphics.pageToCanvasX(event.pageX);
            var 
    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 && square.drawRect(xysqSize[0], sqSize[1]) || square.drawCircle(xysqSize[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(grabListXY) {
             if(
    grabList[0]._parentSpinePID){ // si a un parent (spine)
                    
    var idSpine grabList[0]._parentSpinePID;
                    
    X-$gameScreen._pictures[idSpine]._x;
                    
    Y-$gameScreen._pictures[idSpine]._y;
             }
            for (var 
    grabList.lengthi--;) { grabList[i]._x grabList[i] && XgrabList[i]._y grabList[i] && };
        };

        $.
    _iniGrabPicture = function(xygrabList) { //spritePicture.isCursorOnPicture()  getBounds();
            
    if (!pinMode || pinMode === 'none') {return false; }
            var 
    picTriged SceneManager._scene._spriteset._pictureContainer.children.filter(function(pic) { return (pic.getBounds().contains(xy)) });
            
    grabList = [];
            for (var 
    picTriged.lengthi--;) {
                var 
    id picTriged[i]._pictureIddataGlobalID 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 
    ispixitxt && isPixiTextChild.width || picTriged[i].width;
                var 
    ispixitxt && isPixiTextChild.height || picTriged[i].height;
                
    dataGlobalName picScreen._name;
                var 
    origin picScreen._origin;
                if (Array.
    isArray(origin)) { var ox = (origin[0]), oy = (origin[1]); }
                else { var 
    ox = (origin) / 2oy = (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(oxoywh);
                    
    picTriged[i].addChild(square2);
                    var 
    square3 = new PIXI.Graphics();
                    
    square3.alpha 1;
                    
    square3.fillAlpha 0
                    square3
    .lineStyle(40x000000);
                    
    square3.drawRect(oxoywh);
                    
    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._pixiGridMapping00;
            
    this.gridW $gameMap.tileWidth()*$gameMap.width();
            
    this.gridH $gameMap.tileHeight()*$gameMap.height();
            var 
    length $gameMap.height();
            var 
    this.gridW,$gameMap.tileHeight();
            for(var 
    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(xy+(i*h), wh);
                
    PixiGrid.addChild(inGrid);
            };
            var 
    length $gameMap.width();
            var 
    $gameMap.tileWidth(),this.gridH;
            for(var 
    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), ywh);
                
    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);
     

    Attached Files:

    Last edited: Jul 13, 2017
    #1
  2. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    I thought it was missing a feature
    You can now enable a debug grid.
    This grid is attached to the scene map.

    It is therefore by hover everything, even the pictures.
    It is relative to the width of your map.
    So it's bind to the map, it does not move with the screen.

    you can set color, borderSize and Alpha, see para
    @param showGridDebug
    aevaefve444.jpg
     
    Last edited: Jul 6, 2017
    #2
    Black Mamba likes this.
  3. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    adding whellRotation[v.0.9.2]
    click on picture, and use mouse whell to Provide an animation and pivot .
    It show you if you have set correcly the anchor pivot to your picture.
    Usefull if you work with animation and picture spine
    and to Anticipate a possible animation


    [​IMG]
    note:
    if you whant ONLY you can add more powerfull pivot for your picture by array

    replace original pivot from rmmv to thats.
    PHP:
    Sprite_Picture.prototype.updateOrigin = function() {
        var 
    picture this.picture();
        var 
    picture.origin();
        if (
    o  === 0) {
            
    this.anchor.0;
            
    this.anchor.0;
        } else if(
    === 1) {
            
    this.anchor.0.5;
            
    this.anchor.0.5;
        }else {
            
    this.anchor.o[0];
            
    this.anchor.o[1];
        }
    };
    this alow you to use
    $gameScreen.showPicture with array like thats
    [0.45,0.3] , to place pivot Anchor With more precision!
     
    Last edited: Jul 8, 2017
    #3
  4. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    add feature for pixel placement and see outCamera your picture .
    now you can use mouse scroll for zoom in or out for debug position
    +++mouse Scroll ZoomIn||Out[v.0.9.3]
    [​IMG]
    and
    +++Minorfix: picture Child Spine parent[v.0.9.3]

    this feature is a fix if you use a spine system with your picture
     
    #4
    matthew30903 likes this.
  5. Skunk

    Skunk Melody Master Veteran

    Messages:
    1,063
    Likes Received:
    373
    Location:
    The Island
    First Language:
    English/Slavic
    Primarily Uses:
    RMMV
    Wow, I'm really surprised that this hasn't gotten a review yet.
    NICE work!
    I am going to try to implement this into a future project :)
     
    #5
  6. Arise

    Arise Veteran Veteran

    Messages:
    130
    Likes Received:
    17
    I get an exception if I move a picture and then I click outside of it, on the map.
     
    #6
  7. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    hello, I move to a project with Spine 2D.
    I can not anymore experiment or evaluate errors with this project.
    If you have an error, give me the log, I will take a look inside.
     
    #7
  8. Black Mamba

    Black Mamba Veteran Veteran

    Messages:
    235
    Likes Received:
    70
    First Language:
    pt-br
    So i can make a custom menu with it?
     
    #8
  9. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    yes , it a debugger tool for made easier the work with pixijs and rmmv.
    And specially for manage picture system from rmmv and console.

    So it good for custom picture menu, of other picture features.

    Not tested on the rmmv v1.6>
     
    #9
    Black Mamba likes this.
  10. blade911

    blade911 Veteran Veteran

    Messages:
    41
    Likes Received:
    6
    First Language:
    English
    This looks very cool, is this a replacement for show picture?
     
    #10
  11. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,541
    Likes Received:
    1,276
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    show picture is a command script in rmmv
    the plugin just add tool to manage sprites in the core.
    So nop, it not a replacement
     
    #11

Share This Page