How to move bitmap over frames?

Discussion in 'Javascript/Plugin Support' started by Levolpehh, Mar 25, 2019.

  1. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    Hello for a script I'm working on, I'm trying to move an element to the middle of the screen. I've managed to do that, however now I'd like to move over a duration instead of just instantly zooming to the destination. I'm still learning code so not entirely sure how to solve this problem.

    My current code is as follows;

    Code:
        for (var i = 0; i < Skills.length; i++) {
            var a = 762;
            var b = currentButtonX;
            var c = a - b;
    
            Skills[i].Object.x = Number(Skills[i].Object.x) + c;
            Skills[i].X = Number(Skills[i].X) + c;
        };
    
        for (var i = 0; i < Skills.length; i++) {
            var a = Graphics.height / 2;
            var b = currentButtonY;
            var c = a - b;
    
            Skills[i].Object.y = Number(Skills[i].Object.y) + c;
            Skills[i].Y = Number(Skills[i].Y) + c;
        };
    Skills.[]Object is the sprite/bitmap that is being moved, currentButtonX/Y is the current location of the bitmap.
    Let's say for example I wanted to move the bitmap 200 pixels up over a 60 frame duration. How would I achieve this?
     
    Last edited: Mar 25, 2019
    #1
  2. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Code:
    var temp = 0;
    var func = setInterval (function () {
    skills[i].Object.y -= 200/60;
    temp++;
    if (temp >= 60) clearInterval(func);
    }, 1000/60); 
    
    This is one way.
    Another way is using prototypes of Game_Picture, which already have a method move, in which case you'd just call that.
     
    #2
    Levolpehh likes this.
  3. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    I did look at Game Picture actually.. is that compatible with Sprites though? I'll try with the code you've given me first :)
     
    Last edited: Mar 25, 2019
    #3
  4. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Not exactly. Nevertheless, do you even need these things to be sprites?
    As for the code, don't forget it probably needs to be reworked, since I don't know how your code is exactly structured... And because setInterval loses object context.
     
    #4
    Levolpehh likes this.
  5. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    Yea the objects/bitmaps are all Sprite Buttons. Tried playing around with that code to no avail. I'll work on it again in the morning.. thanks!

    Question though, what is the 1000/60 at the end of the code?
     
    #5
  6. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    You should have said these are buttons to begin with, that would make it simpler :p Anyway, it has an easy solution:
    Code:
    function Sprite_MovableButton () {
    this.initialize.apply (this, arguments);
    }
    
    Sprite_MovableButton.prototype = Object.create (Sprite_Button);
    Sprite_MovableButton.prototype.constructor = Sprite_MovableButton;
    
    Sprite_MovableButton.prototype.initialize = function () {
    Sprite_Button.prototype.call(this);
    this._originX = 0;
    this._originY = 0;
    this._targetX = 0;
    this._targetY = 0;
    this._moveDuration = 0;
    }
    
    Sprite_MovableButton.prototype.move = function (x, y, duration) {
    this._originX = this.x;
    this._originY = this.y;
    this._moveDuration = duration;
    this._targetX = x;
    this._targetY = y;
    }
    
    Sprite_MovableButton.prototype.update = function () {
    Sprite_Button.prototype.update.call(this);
    if (this._moveDuration > 0) {
    this._moveDuration--;
    if (this._moveDuration == 0 {
    this.x = this._targetX;
    this.y = this._targetY;
    }else {
    this.x += (this._targetX - this._originX) / this._moveDuration;
    this.y += (this._targetY - this._originY) / this._moveDuration;
    }
    }
    }
    
    Instead of making these buttons a Sprite_Button, install this as a plugin and make them a Sprite_MovableButton instead.
    Then whenever you need to move them, just use
    buttonYouWantToMove.move (x, y, duration)
    where:
    x is the new x coordinate.
    y is the new y coordinate
    duration is duration of the moving in frames (60 frames = 1 second)
    And the plugin takes care of the movement.
    If you want to move it 200 pixels up in 1 second, the call would look like this:
    Code:
    button.move (button.x, button.y - 200, 60);
    
    setInterval will fire after a certain amount of milliseconds has passed. So to make it fire at 60 fps we need to set the interval to 1000/60.
     
    #6
    Levolpehh likes this.
  7. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    Aha sorry I didn't think it was an important piece of information :hswt:

    Anyway, your script works.. kinda. I had to add some stuff but it will move.. however it just keeps sliding then suddenly clips back. This may be my fault somewhere honestly. Seems to also need a fail-safe so that you cant press more inputs while it's sliding, but that shouldn't be difficult.

    I'll keep playing with it till you can get back to me :kaocry:

    for some more information..

    Code:
        for (var i = 0; i < Skills.length; i++) {
            var xa = 762;
            var xb = currentButtonX;
            var xc = xa - xb;
            var tox = Number(Skills[i].Object.x) + xc;
    
            var ya = Graphics.height / 2;
            var yb = currentButtonY;
            var yc = ya - yb;
            var toy = Number(Skills[i].Object.y) + yc;
    
            var dura = 60;
    
            Skills[i].Object.move(tox, toy, dura);
            Skills[i].X = Number(Skills[i].X) + xc;
            Skills[i].Y = Number(Skills[i].Y) + yc;
    is how I'm handling the slide now and this is what it looks like in practice.
    https://media.giphy.com/media/wJD3ukqspYlt5kR0Js/giphy.gif
     
    Last edited: Mar 26, 2019
    #7
  8. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Fixed, that was my bad. Typed it on a mobile during night shift, so didn't test it :D
    Code:
    function Sprite_MovableButton () {
        this.initialize.apply (this, arguments);
        }
        
        Sprite_MovableButton.prototype = Object.create (Sprite_Button.prototype);
        Sprite_MovableButton.prototype.constructor = Sprite_MovableButton;
        
        Sprite_MovableButton.prototype.initialize = function () {
        Sprite_Button.prototype.initialize.call(this);
        this._originX = 0;
        this._originY = 0;
        this._targetX = 0;
        this._targetY = 0;
        this._moveDuration = 0;
        }
        
        Sprite_MovableButton.prototype.move = function (x, y, duration) {
        this._originX = this.x;
        this._originY = this.y;
        this._moveDuration = duration;
        this._timeRemaining = duration;
        this._targetX = x;
        this._targetY = y;
        console.log (this._targetX - this._originX);
        console.log (this._targetY - this._originY);
        }
        
        Sprite_MovableButton.prototype.update = function () {
        Sprite_Button.prototype.update.call(this);
        if (this._timeRemaining > 0) {
        this._timeRemaining--;
        if (this._timeRemaining == 0) {
        this.x = this._targetX;
        this.y = this._targetY;
        }else {
        this.x += (this._targetX - this._originX) / this._moveDuration;
        this.y += (this._targetY - this._originY) / this._moveDuration;
        }
        }
        }
     
    #8
    Levolpehh likes this.
  9. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks again Poryg! <3
     
    #9
  10. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    @Poryg I'm thinking of switching my code from Sprite Buttons to Pixi Sprites (Interactive) would the code you gave me prior still work, or is there a better way of doing it with Pixi Sprites instead? Cause I know Pixi has a ticker, so I imagine can likely use that.

    Also how do I update a pixi sprite to a different image? currently just doing the ImageManager call but doesnt seem to work for Pixi Sprites. (edit: nvm figured this part out, gonna fiddle with the movement now)
     
    Last edited: Mar 28, 2019
    #10
  11. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Reworking the things to work with PIXI ticker is a bit tedious. Not to mention...
    PIXI ticker is no different from RequestAnimationFrame apart from few extra lines of code that PIXI has defined for them. And it's pointless to have both PIXI ticker and MV ticker active.
    As for switching your code to Sprite_Buttons to PIXI.Sprites, well, that's more tedious than it may seem at first as well.

    The code I have provided should work without issues. However, there are a couple of things that will not work with PIXI.Sprites out of the box. One of them is ImageManager stuff. Unlike the MV Sprite, PIXI.Sprites don't have any predefined methods how to handle MV's bitmaps.
    You need to create a new PIXI texture and assign that to the sprite.
    BTW., PIXI.Interactive doesn't work natively in MV engine.
     
    #11
  12. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    So I've found out lol. Spent the last hour trying to get it to work to no avail :hswt: I recall seeing your video regarding Interactive, how'd you get it to work? I tried the last 3 functions at the end of your video/description but didnt work
     
    Last edited: Mar 28, 2019
    #12
  13. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Yup, you can find the code in the description of the video. The reason why interactive doesn't work by default is, therr is a canvas layer above the lower layer. In this layer there's video and errors rendered. So it is necessary to remove all pointer events on the upper layer.
     
    #13
  14. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    I think there may have been a typo with your code, as it kinda just breaks everything and wont even launch the game. Or it's just outdated perhaps. Think I found a fix by adding:

    Code:
    var _Alias_Graphics_createModeBox = Graphics.prototype._createModeBox;
    Graphics.prototype._createModeBox = function () {
        _Alias_Graphics_createModeBox.call(this);
        this._modeBox.scale.pointerEvents = "none";
    //     this._modeBox.style.pointerEvents = "none"; doesnt work either (this was the original line in the video)
    }
    
    var _Alias_Graphics_updateVideo = Graphics.prototype._updateVideo;
    Graphics.prototype._updateVideo = function () {
        _Alias_Graphics_updateVideo.call(this);
        this._video.style.pointerEvents = "none";
    }
    
    var _Alias_Graphics_updateUpperCanvas = Graphics.prototype._updateUpperCanvas;
    Graphics.prototype._updateUpperCanvas = function () {
        _Alias_Graphics_updateUpperCanvas.call(this);
        this._upperCanvas.style.pointerEvents = "none";
    }
    This stops the crashing but doesnt actually enable the clicking.
     
    Last edited: Mar 28, 2019
    #14
  15. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Yeah, missing underscore. Description fixed :D (had I had a comment on the video, I'd fix it earlier... But nobody cared ;_;)
     
    #15
  16. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    Still crashes. I tried modifying it to what I posted in my last comment. This prevents crashes but still doesn't actually enable. :kaoswt2:
     
    #16
  17. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    I think I know where the problem is...

    The extra .prototype things :D The style line was correct, but prototypes were extra. (Graphics is a static class if I remember correctly)
     
    #17
  18. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    If I remove the prototypes it just flat out crashes.
    alright got it working. Interactive still doesn't work though -n-

    I think I'm just missing a component. Right now I've just copied over https://pixijs.io/examples/#/basics/click.js most of these to try to get it to work, to no avail.
     
    Last edited: Mar 28, 2019
    #18
  19. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,779
    Likes Received:
    9,450
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    I see. I'll take a look when I get home. Right now I can't do too much about it.

    EDIT: Typos fixed, code tested. Works now for me.
    Code:
    Alias_Graphics_createModeBox = Graphics._createModeBox;
    Graphics._createModeBox = function () {
    Alias_Graphics_createModeBox.call(this);
    this._modeBox.style.pointerEvents = "none";
    }
    
    Alias_Graphics_updateVideo = Graphics._updateVideo;
    Graphics._updateVideo = function () {
    Alias_Graphics_updateVideo.call(this);
    this._video.style.pointerEvents = "none";
    }
    
    Alias_Graphics_updateUpperCanvas = Graphics._updateUpperCanvas;
    Graphics._updateUpperCanvas = function () {
    Alias_Graphics_updateUpperCanvas.call(this);
    this._upperCanvas.style.pointerEvents = "none";
    }
     
    Last edited: Mar 28, 2019
    #19
    Levolpehh likes this.
  20. Levolpehh

    Levolpehh Veteran Veteran

    Messages:
    87
    Likes Received:
    62
    First Language:
    English
    Primarily Uses:
    RMMV
    Okay thank you.. I must be missing an element somewhere else when trying to create the sprite or stage.
    I have:

    Code:
        var app = new PIXI.Application();
        var renderer = PIXI.autoDetectRenderer();
        var stage = new PIXI.Container();
        PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
        //document.body.appendChild(app.view);
        //document.body.appendChild(renderer.view);
    
        var texture = 'img/Board/Buttons/selector.png';
        // this gets updated later to another image
    
        Skills[index].Object = PIXI.Sprite.fromImage(texture);
        var sprite = Skills[index].Object
        sprite.anchor.set(0.5)
        sprite.x = Skills[index].X;
        sprite.y = Skills[index].Y;
    
        sprite.interactive = true;
        sprite.buttonMode = true;
        sprite.on('pointerdown', onClick);
    
        //this.addChild(sprite);
        stage.addChild(sprite);
        //app.stage.addChild(sprite);
    
        function onClick() {
            alert("Hello")
        }
    I've checked how it's called here > http://scottmcdonnell.github.io/pix...=demos&f=interactivity.js&title=Interactivity and here > https://pixijs.io/examples/#/basics/click.js but neither are working. .n.

    is it different for menu based scenes perhaps? I've tried using this.addChild(sprite), stage.addChild(Sprite) and app.stage.addChild(sprite) and none of the above worked. I've tried all kinds of combinations of turning on and off some off these lines. this.addChild(sprite) adds it normally however the interactive functionality is still not working. The others just don't appear at all.
     
    Last edited: Mar 29, 2019
    #20

Share This Page