The Illusion of Depth/Distance Using Scale

[p0_boy]

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):

    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!

 

[Engr. Adiktuzmiko]

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.

 

[p0_boy]

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.

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.

 

[p0_boy]

Woo- @Engr. Adiktuzmiko works beautifully, thank you!!

 

[Jonforum]

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

    PIXI.ticker.shared.add(this.update, $gamePlayer);

    update(delta){
          this.y;     // your math stuff
 
    };

 

[p0_boy]

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

    PIXI.ticker.shared.add(this.update, $gamePlayer);

    update(delta){
          this.y;     // your math stuff
 
    };

Thank you, @Jonforum !

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

    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!