How to move bitmap over frames?

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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.
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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.
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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?
 

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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);
Question though, what is the 1000/60 at the end of the code?
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.
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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;
    }
    }
    }
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
First Language
English
Primarily Uses
RMMV
Thanks again Poryg! <3
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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.
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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.
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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 ;_;)
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:
 

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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)
 

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,062
Reaction score
10,362
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:

Levolpehh

Veteran
Veteran
Joined
Nov 17, 2018
Messages
87
Reaction score
74
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/pixi-examples/index.html?s=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:

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

i don't even know why i bother. Trying to to a simple candle light to flicker. Hour later no progress.
My greatest challenge right now is less of the workload but more of the language barrier which I definitely need a local proofreader (without translation) for. I'm wondering if this is even a legit position for freelancing.
So, the other day i come across to became closer to other developers and realiza im not even a novice. i am lower than thrash rigth now, worse than people that don´t know anything about this things cause i used to think i knew. good news is; today thrash, tommorrow, maybe not so much, and someday, i´ll be a god?
Ahh, end of the day stinky feet, fresh out of the boots. Smells like a job well done. Seriously, I have to rinse my feet when I get home, or it's not fair to my wife.
Stream will be live shortly with some pixel art! Feel free to drop by!

Forum statistics

Threads
97,833
Messages
947,229
Members
129,049
Latest member
Terrbox
Top