The Illusion of Depth/Distance Using Scale

Discussion in 'Javascript/Plugin Support' started by p0_boy, May 27, 2019.

  1. p0_boy

    p0_boy anti-kumbaya Veteran

    Messages:
    59
    Likes Received:
    26
    Location:
    quezon city
    First Language:
    English
    Primarily Uses:
    RMMV
    Howdy, folks-

    I started on a basic script which uses @Aramis-IX 's Sprite Zoom plugin to increase/decrease the player's size depending on where they are located on a map's Y axis to create the illusion of depth/distance.

    Rather than have it run as a parallel process, I tried adding an event listener (as per @Jonforum / @Kino 's tutorial):

    Code:
        scale_player = function(event){
            var gp_id = ($gamePlayer._realY + 1) / $dataMap.height;
            if ($gameVariables.value(10) != gp_id) {
                SpriteZoom.zoom(0,gp_id);
                $gamePlayer.setMoveSpeed(Math.round(($gamePlayer._realY + 1) * (6/$dataMap.height)));
                $gameVariables.setValue(10,gp_id);
            };
        };
       
        document.addEventListener('keydown', scale_player);
    
    The problem is, it seems to be a bit wonky- the Player continues moving for a few steps even after the up or down buttons are pressed, creating a disconnect between the controls and the actor.

    Is there a better way of going about accomplishing what I am trying to do?

    Also, any suggestions on how I can improve my equations so that the player is regular sized in the middle of the screen, supersized at the bottom of the screen, and tiny at the top?

    Thanks in advance for your help!
     
    Last edited: May 27, 2019
    #1
  2. Engr. Adiktuzmiko

    Engr. Adiktuzmiko Chemical Engineer, Game Developer, Using BlinkBoy' Veteran

    Messages:
    14,396
    Likes Received:
    2,812
    Location:
    Philippines
    First Language:
    Tagalog
    If you want as little disconnect as possible, you'd probably want to hook it into the update function of the Game_Map class instead of using an event listener for the keyboard press. It would be more resource costly though.

    Another thing is the fact that since your character is now smaller at the upper Y of the map, they will ofc look like they walk "more" because movement is still based on the 48x48 grid. You'd need an adjustable pixel movement plugin if you want the movement to scale to how "big" your player is.
     
    #2
    p0_boy likes this.
  3. p0_boy

    p0_boy anti-kumbaya Veteran

    Messages:
    59
    Likes Received:
    26
    Location:
    quezon city
    First Language:
    English
    Primarily Uses:
    RMMV
    Marming salamat ulit @Engr. Adiktuzmiko for pointing me in the right direction. I will look into Game_Map class. The resource drain won't be so bad because I only plan to use this scaling on one or two of the maps (à la Monkey Island).

    Also, I hadn't considered what the 48x48 tiles implied in this case- so it makes sense now. I am avoiding pixel movement because I think it might conflict with the Chrono ABS that I am using. Thanks for the insight though.
     
    #3
    Engr. Adiktuzmiko likes this.
  4. p0_boy

    p0_boy anti-kumbaya Veteran

    Messages:
    59
    Likes Received:
    26
    Location:
    quezon city
    First Language:
    English
    Primarily Uses:
    RMMV
    #4
  5. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,567
    Likes Received:
    1,321
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    try this , this bind the $gamePlayer scope and you will can compute the math in real time update.
    the update method you add everywhere you want ... it should be a proto
    Or if you prefer a global window elements, this doesn't mather;.

    Each frame the ticker will apply the math transform
    PHP:
        PIXI.ticker.shared.add(this.update$gamePlayer);

        
    update(delta){
              
    this.y;     // your math stuff
     
        
    };
     
    #5
  6. p0_boy

    p0_boy anti-kumbaya Veteran

    Messages:
    59
    Likes Received:
    26
    Location:
    quezon city
    First Language:
    English
    Primarily Uses:
    RMMV
    Thank you, @Jonforum !

    I am sorry for my ignorance... based on @Engr. Adiktuzmiko 's suggestion, I wrote the following:

    Code:
        scale_player = function(event){
            var gp_id = ($gamePlayer._realY + 1) / $dataMap.height;
            if ($gameVariables.value(10) != gp_id) {
                SpriteZoom.zoom(0,gp_id);
                $gamePlayer.setMoveSpeed(Math.round(($gamePlayer._realY + 1) * (6/$dataMap.height)));
                $gameVariables.setValue(10,gp_id);
            };
        };
            
        var SM_update = Scene_Map.prototype.update;
        Scene_Map.prototype.update = function() {
        
            SM_update.call(this);
        
            scale_player();
        
        };
    
    I am interested in your suggestion, but can you clarify where to place it? Do I put it in the Scene_Map.prototype.update?

    I am sorry if this is a dumb question- I only started writing JavaScript a little over a month ago and am still learning a lot.

    Thank you in advance!
     
    #6

Share This Page