Image is dragging

Discussion in 'Javascript/Plugin Support' started by FriedTM, Aug 22, 2019.

  1. FriedTM

    FriedTM Warper Member

    Messages:
    4
    Likes Received:
    1
    First Language:
    english
    Primarily Uses:
    RMMV
    I am using a plugin that I have made which is creating and drawing images where I need them. However when the character moves the images drag compared to the map. I believe this has to do with update order but I am uncertain how to restructure the code to fix that.
    Code:
    //Get relevant tiles from map data
    function parseTileData() {
        var tileWidth = $gameMap.tileWidth();
        var tileHeight = $gameMap.tileHeight();
        var iteration = 2;
        var tone = [-68, -68, 0, 68];
        var log = 0;
        $gameScreen.clearPictures();
        $gameScreen.showPicture(1, "_$Light 2", 2, (($gamePlayer._realX-$gameMap.displayX() - 8)*48)+Graphics.width/2, (($gamePlayer._realY-$gameMap.displayY() - 6)*48)+Graphics.height/2, 300, 300, 100, 1);
        //console.log("gamePlayer.X: " + $gamePlayer._realX + " $gameMap.displayX(): " + $gameMap.displayX() + " $gameVariables.value(0003): " + $gameVariables.value(0003));
        for(var y = Math.floor($gameMap.displayY())+5; y < Math.floor($gameMap.displayY())+15; y++) {
            for (var x = Math.round($gameMap.displayX())-3; x < Math.round($gameMap.displayX())+17; x++) {
                if ($gameMap.terrainTag(x, y) == 1) {
                    if(y == Math.floor($gameMap.displayY())+5 && $gameMap.displayY()-Math.floor($gameMap.displayY()) != 0)
                    {
                        $gameScreen.showPicture(iteration, "!$Light", 0, (x*48)-(($gameMap.displayX() * 48))+4, (y*48)-(($gameMap.displayY() * 48)), 100, 100, 255*(1+(Math.floor($gameMap.displayY())-$gameMap.displayY())), 0);
                        
                    }
                    else
                    {
                        $gameScreen.showPicture(iteration, "!$Light", 0, (x*48)-(($gameMap.displayX() * 48))+4, (y*48)-(($gameMap.displayY() * 48)), 100, 100, 255, 0);
                    }
                    
                    $gameScreen.tintPicture(iteration, tone, 0);
                    
                    iteration++;
                }
            }
        }
    }
    upload_2019-8-21_21-19-21.png
     
    Last edited: Aug 22, 2019
    #1
  2. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    Please use the CODE tags when sharing code, so that it is readable.

    upload_2019-8-21_23-0-0.png

    Small feedbacks:

    1.) You should remove the leading zeros on your numbers such as 0003. It probably works fine either way, but better to do:
    Code:
    $gameVariables.value(3)
    2.) You're only passing 1 argument to Math.floor here:
    Code:
    (1+(Math.floor($gameMap.displayY())-$gameMap.displayY())), 0);
    3.) Double parenthesis aren't necessary here. Actually because of order of operations, single parenthesis aren't necessary either but you may prefer to keep those.
    Code:
    (x*48)-(($gameMap.displayX() * 48))+4
    For your actual question:
    My guess is that it's because this function is running in a parallel event. A parallel event runs every frame which is 60x per second. The function is erasing and drawing pictures 60x per second, which is a lot of work. Is it necessary to update so often?
     
    #2
    FriedTM likes this.
  3. FriedTM

    FriedTM Warper Member

    Messages:
    4
    Likes Received:
    1
    First Language:
    english
    Primarily Uses:
    RMMV
    ok so yeah what this does is overlays pictures and is used for lighting. I am trying to affix images to the map using this. I know there are plugins out there but it does not help me learn and it is harder to work with as I need to be able to edit there tone and alpha channel. This basically needs to be always running in the background on certain maps. would it be possible to restructure the plugin so it takes in a plugin command to start running and is always running when that command is active? I want it to be part of the main logic loop basically.

    as for the extra code I am used to c++ and c# I am struggling with js. Math.floor does not need a second value I tested it, it does fine with its default. the extra parenthesis as far as I can tell because JS does not use order of operations but a first come first serve. Maybe I am wrong though. finally yeah Ideally this would run with the main game logic loop.

    it actually all works perfectly right now and the effect is quite striking but if I cant fix the images dragging I am going to be dead in the water

    here is a link to a drive so you can see the game in action and the problem
    https://drive.google.com/drive/folders/1X-4Y65DCstTz0OHVh5sHJEJAS16cfcsg?usp=sharing
    Please excuse the s*** posting nature of the demo I promise that is only for testing. just walk through the door on the first level and you will get to the meat and potatoes
     
    Last edited: Aug 22, 2019
    #3
  4. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    That's my mistake, sorry about that. I completely misinterpreted what you were doing, you are correct (I was thinking Math.min in my head somehow). I think the displayY returns a pixel value so you don't need to floor it but it wouldn't hurt anything, besides maybe adding clutter to the code.

    JS would not be a legitimate programming language if it didn't use order of operations haha. It's exactly the same order of operations syntax as C++ and C#
    Code:
    1 + 2 * 3 // returns 7 not 9
    For your real question, I can't take a look at that demo at the moment but hopefully someone else can take a look at it.

    It could be due to what you're thinking, maybe the order of what things happen in the update loop causes it, so the picture might be 1 frame behind everything else if it requests drawing the picture and then it gets drawn in the next frame. The main update loop code can be found in rpg_scenes.js at Scene_Map.prototype.update, though you'll see that it also calls the base/parent function too and you might have to look at those to learn more.
     
    #4
  5. Restart

    Restart Veteran Veteran

    Messages:
    203
    Likes Received:
    133
    First Language:
    English
    Primarily Uses:
    RMMV
    How much dragging is happening? Is it just one pixel?
     
    #5
  6. FriedTM

    FriedTM Warper Member

    Messages:
    4
    Likes Received:
    1
    First Language:
    english
    Primarily Uses:
    RMMV
    yes I managed to make it better by adding this logic
    Code:
    function parseTileData() {
        //var tileWidth = $gameMap.tileWidth();
        //var tileHeight = $gameMap.tileHeight();
        var iteration = 2;
        var tone = [-68, -68, 0, 68];
        //var log = 0;
        var xOffset = 0;
        var yOffset = 0;
        $gameScreen.clearPictures();
        $gameScreen.showPicture(1, "_$Light 2", 2, (($gamePlayer._realX-$gameMap.displayX() - 8)*48)+Graphics.width/2, (($gamePlayer._realY-$gameMap.displayY() - 6)*48)+Graphics.height/2, 300, 300, 100, 1);
        if($gamePlayer._realX < $gamePlayer.x)
        {
            //console.log("right");
            xOffset = -2;
        }
               
        if($gamePlayer._realX > $gamePlayer.x)
        {
            //console.log("left");
            xOffset = 2;
        }
               
        if($gamePlayer._realY < $gamePlayer.y)
        {
            yOffset = -2;
        }
       
        if($gamePlayer._realY > $gamePlayer.y)
        {
            yOffset = 2;
        }
       
        for(var y = Math.floor($gameMap.displayY())+5; y < Math.floor($gameMap.displayY())+15; y++) {
            for (var x = Math.round($gameMap.displayX())-3; x < Math.round($gameMap.displayX())+17; x++) {
                if ($gameMap.terrainTag(x, y) == 1) {
                   
                   
                   
                    if(y == Math.floor($gameMap.displayY())+5 && $gameMap.displayY()-Math.floor($gameMap.displayY()) != 0)
                    {
                        $gameScreen.showPicture(iteration, "!$Light", 0, (x*48)-(($gameMap.displayX() * 48))+xOffset + 4, (y*48)-(($gameMap.displayY() * 48)) + yOffset, 100, 100, 255*(1+(Math.floor($gameMap.displayY())-$gameMap.displayY())), 0);
                    }
                    else
                    {
                        $gameScreen.showPicture(iteration, "!$Light", 0, (x*48)-(($gameMap.displayX() * 48))+xOffset + 4, (y*48)-(($gameMap.displayY() * 48)) + yOffset, 100, 100, 255, 0);
                    }
                   
                    $gameScreen.tintPicture(iteration, tone, 0);
                   
                    iteration++;
                }
            }
        }
    }

    but now it is really jumpy and jerky
     
    #6
  7. Restart

    Restart Veteran Veteran

    Messages:
    203
    Likes Received:
    133
    First Language:
    English
    Primarily Uses:
    RMMV
    If the difference is within 1 pixel, then what you've got going is usually called 'jitter'. Subpixels aren't getting mapped to whole pixel values in a consistent way.

    Try replacing your floor() statements with ceil() or round() instead.
     
    #7
    Aloe Guvner likes this.
  8. FriedTM

    FriedTM Warper Member

    Messages:
    4
    Likes Received:
    1
    First Language:
    english
    Primarily Uses:
    RMMV
    ok I solved the issue posting my fix here
    Code:
    function parseTileData() {
    
       var iteration = 2;
       var tone = [-68, -68, 0, 68];
       $gameScreen.clearPictures();
       $gameScreen.showPicture(1, "_$Light 2", 2, (($gamePlayer._realX-$gameMap.displayX() - 8)*48)+Graphics.width/2, (($gamePlayer._realY-$gameMap.displayY() - 6)*48)+Graphics.height/2, 300, 300, 100, 1);   
       for(var y = Math.floor($gameMap.displayY())+5; y < Math.floor($gameMap.displayY())+15; y++) {
           for (var x = Math.round($gameMap.displayX())-3; x < Math.round($gameMap.displayX())+17; x++) {
               if ($gameMap.terrainTag(x, y) == 1) {
                   
                   
                   
                   if(y == Math.floor($gameMap.displayY())+5 && $gameMap.displayY()-Math.floor($gameMap.displayY()) != 0)
                   {
                       $gameScreen.showPicture(iteration, "[FIX]$Light", 0, (x*48)+ 4, (y*48), 100, 100, 255*(1+(Math.floor($gameMap.displayY())-$gameMap.displayY())), 0);
                   }
                   else
                   {
                       $gameScreen.showPicture(iteration, "[FIX]$Light", 0, (x*48) + 4, (y*48), 100, 100, 255, 0);
                   }
                   
                   $gameScreen.tintPicture(iteration, tone, 0);
                   
                   iteration++;
               }
           }
       }
    }
    
    and then use this plugin which is awesome
    https://github.com/rafaelalmeidatk/JGSS/blob/master/TTK_FixPicture.js
     
    #8
    Aloe Guvner likes this.

Share This Page