Animated sprites in main menu

[J0pac]

Hello I've been playing around with moghunter Monogatari main menu plugin for a few couple of days.
I've mostly managed to tweak It to work as I've planned.

Spoiler

Unfortunately my small and limited knowledge of programing is not enough for the next step.
So once you select skill,equip or status, menu changes to this:

Spoiler

You need to select the character for which you want to open certain submenu(skills,equip or status).

Now, what I'd like to implement is to have those sprites animated as you scroll through them.
So in the above picture your cursor or whatever it is, is currently on first actor.I'd like that sprite to be animated until you press an arrow key and switch to another actor.

This is the part where sprite pictures are loaded!?

Spoiler

Scene_Menu.prototype.loadBitmapsMain = function() {
    this._facesBitmaps = []
    for (var i = 0; i < $gameParty.members().length; i++) {
         this._facesBitmaps[i] = ImageManager.loadMenusFaces2("Actor_" + $gameParty.members()[i]._actorId);
    };
    this._comBitmaps = []
    this._comList = this._commandWindow._list;
    for (var i = 0; i < this._comList.length; i++) {
         this._comBitmaps[i] = ImageManager.loadMenusMainCommands(this._comList[i].name);
    };
    this._arrowImg = ImageManager.loadMenusMain("FaceArrow");
    this._goldImg = ImageManager.loadMenusMain("GoldNumber");
};

And this is the part with all the other effect that affect those sprites while selected:

Spoiler

//==============================
// * update Selection
//==============================
Scene_Menu.prototype.updateSelection = function() {
    if (this._statusWindow.active) {
        this._selField.opacity += 15;
        if (this._selField.x > 0) {this._selField.x -= 4
            if (this._selField.x < 0) {this._selField.x = 0};
        };
    } else {
        if (this._selField.x < 50) {this._selField.x += 4
            if (this._selField.x > 50) {this._selField.x = 50};
        };       
        this._selField.opacity -= 15;
    }
    for (var i = 0; i < this._selection.length; i++) {
         if (this._statusWindow._index < this._selMax) {
             var nindex = 0
             if (i > this._selMax) {
                 this._selection[i].vsb = false;
             } else {
                 this._selection[i].vsb = true;
             };
         } else {
             var ni = this._statusWindow._index - this._selMax
             var nindex = ((4 + this._facesBitmaps[i].width) * (ni));
             if (i < ni || i > ni + this._selMax) {
                 this._selection[i].vsb = false;
             } else {this._selection[i].vsb = true;
             }
         };
         if (i === this._statusWindow._index) {
             this._selection[i].opacity += 15;
             if (this._selzoom[i] === 0) {
                 this._selection[i].scale.x += 0.015;
                 if (this._selection[i].scale.x > 1.30) {
                     this._selection[i].scale.x = 1.30;
                     this._selzoom[i] = 1;
                 };
             } else {
                 this._selection[i].scale.x -= 0.015;
                 if (this._selection[i].scale.x < 1.00) {
                     this._selection[i].scale.x = 1.00;
                     this._selzoom[i] = 0;
                 };                 
             };
         } else {
            if (!this._selection[i].vsb) {
               this._selection[i].opacity -= 15;
            } else if (this._selection[i].vsb) {
               if (this._selection[i].opacity < 160) {this._selection[i].opacity += 15;
                   if (this._selection[i].opacity > 160) {this._selection[i].opacity = 160};
               };
               if (this._selection[i].opacity > 160) {this._selection[i].opacity -= 15;
                   if (this._selection[i].opacity < 160) {this._selection[i].opacity = 160};
               };               
            } else {
                if (this._selection[i].opacity > 160) {this._selection[i].opacity -= 10
                if (this._selection[i].opacity < 160) {this._selection[i].opacity = 160};
                };
            };
            this._selzoom[i] = 0;
            this._selection[i].scale.x -= 0.01;
            if (this._selection[i].scale.x < 1.00) {this._selection[i].scale.x = 1.00}                     
         }
         var nx = this._selectionPos[i][0] - nindex;
         var ny = this._selectionPos[i][1];
         this._selection[i].x = this.commandMoveTo(this._selection[i].x,nx);
         this._selection[i].y = this.commandMoveTo(this._selection[i].y,ny);           
         this._selection[i].scale.y = this._selection[i].scale.x;
    };
    this.updateArrow();
};

I thought of something like this:

Spoiler

for (var i = 0; i < $gameParty.members().length; i++) {
        
        for(var j = 0;j < 3;j++) {
         this._facesBitmaps[i] = ImageManager.loadMenusFaces2("Actor_" + $gameParty.members()[i]._actorId + "_" + j);
        };
    };

Tho this doesn't seem to work, as "this._facesBitmaps" is used for preloading the images, so that you have graphics once you open the menu?
Anyway I hope this isn't too hard to pull off, and that there is someone who can help me.
What I can offer in return are maps. You can find my workshop here on forum.I'm currently full but I'll definitely find time for your map

Also I'd include the whole plugin here but I'm not sure if that's allowed.You can find the whole plugin here.You only need "MOG_SceneMenu.js "

Thx for checking this thread and pls help me

 

[gstv87]

generically speaking:
the selected sprite is always sprite_sheet[pose][frame_index] ....right?
on each frame update, you just make it go ((frame_index += 1) % maxframes)

I don't recall the MV structure of sprites, but the logic stands: you're bringing the character sprite from some sprite sheet.
to do that, you need a coordinate index pointing up to the array that is, essentially, the sprite sheet.
update that index as the screen updates, and you'll bring up the other frames in the same sub-group of frames there in the sprite sheet.

somewhere down the code, there has to be an instruction to bring up the actor's mini, at frame 0.
it's showing up on the final product, so it has to be done already.
work around that call to frame 0, and make it bring up the other frames in the sequence.

 

[J0pac]

The thing is the plugin is not using sprites.It uses pictures so I don't think there are any instructions to bring it at frame 0.There's a sprite on that picture, sorry I wasn't clear enough.
Esentaly sprites are pictures but I don't think plugin is build up to display sprites(animated pictures).

I know very little about this, so I could be wrong and please correct me If I'm wrong.

 

[gstv87]

this._facesBitmaps[i] = ImageManager.loadMenusFaces2("Actor_" + $gameParty.members()[i]._actorId);

I believe you need to look into loadMenusFaces2.
Look out for instructions that define rectangles.
I'm not that much into JS either, but this is basic programming logic:
you're bringing an image from a file -> where within that file, exactly?
something is telling that function where to define the crop area to pull the result out.

 

[J0pac]

Well as far as I know, that line is for preloading face images so that there are graphics once you open the menu.
And animations have to be set up somewhere below this, while certain element is selected:

for (var i = 0; i < this._selection.length; i++)

Spoiler

//==============================
// * update Selection
//==============================
Scene_Menu.prototype.updateSelection = function() {
    if (this._statusWindow.active) {
        this._selField.opacity += 15;
        if (this._selField.x > 0) {this._selField.x -= 4
            if (this._selField.x < 0) {this._selField.x = 0};
        };
    } else {
        if (this._selField.x < 50) {this._selField.x += 4
            if (this._selField.x > 50) {this._selField.x = 50};
        };     
        this._selField.opacity -= 15;
    }
    for (var i = 0; i < this._selection.length; i++) {
         if (this._statusWindow._index < this._selMax) {
             var nindex = 0
             if (i > this._selMax) {
                 this._selection[i].vsb = false;
             } else {
                 this._selection[i].vsb = true;
             };
         } else {
             var ni = this._statusWindow._index - this._selMax
             var nindex = ((4 + this._facesBitmaps[i].width) * (ni));
             if (i < ni || i > ni + this._selMax) {
                 this._selection[i].vsb = false;
             } else {this._selection[i].vsb = true;
             }
         };
         if (i === this._statusWindow._index) {
             this._selection[i].opacity += 15;
             if (this._selzoom[i] === 0) {
                 this._selection[i].scale.x += 0.015;
                 if (this._selection[i].scale.x > 1.30) {
                     this._selection[i].scale.x = 1.30;
                     this._selzoom[i] = 1;
                 };
             } else {
                 this._selection[i].scale.x -= 0.015;
                 if (this._selection[i].scale.x < 1.00) {
                     this._selection[i].scale.x = 1.00;
                     this._selzoom[i] = 0;
                 };               
             };
         } else {
            if (!this._selection[i].vsb) {
               this._selection[i].opacity -= 15;
            } else if (this._selection[i].vsb) {
               if (this._selection[i].opacity < 160) {this._selection[i].opacity += 15;
                   if (this._selection[i].opacity > 160) {this._selection[i].opacity = 160};
               };
               if (this._selection[i].opacity > 160) {this._selection[i].opacity -= 15;
                   if (this._selection[i].opacity < 160) {this._selection[i].opacity = 160};
               };             
            } else {
                if (this._selection[i].opacity > 160) {this._selection[i].opacity -= 10
                if (this._selection[i].opacity < 160) {this._selection[i].opacity = 160};
                };
            };
            this._selzoom[i] = 0;
            this._selection[i].scale.x -= 0.01;
            if (this._selection[i].scale.x < 1.00) {this._selection[i].scale.x = 1.00}                   
         }
         var nx = this._selectionPos[i][0] - nindex;
         var ny = this._selectionPos[i][1];
         this._selection[i].x = this.commandMoveTo(this._selection[i].x,nx);
         this._selection[i].y = this.commandMoveTo(this._selection[i].y,ny);         
         this._selection[i].scale.y = this._selection[i].scale.x;
    };
    this.updateArrow();
};

So I've got new idea to try something like this:

this._facesBitmaps = []
    this._facesBitmaps2 = []
    this._facesBitmaps3 = []
    for (var i = 0; i < $gameParty.members().length; i++) {
        this._facesBitmaps[i] = ImageManager.loadMenusFaces2("Actor_" + $gameParty.members()[i]._actorId);
        this._facesBitmaps2[i] = ImageManager.loadMenusFaces2("Actor_" + $gameParty.members()[i]._actorId + "_1");
        this._facesBitmaps3[i] = ImageManager.loadMenusFaces2("Actor_" + $gameParty.members()[i]._actorId + "_2");

Hopefully syntax is alright,that's what bothers me for the most part.
Anyway I would load all three pictures of animation into three different variables/rows or what ever they are.(this._facesBitmaps,this._facesBitmaps2,this._facesBitmaps3)
By default only this._facesBitmaps is displayed.

this._selection[i] = new Sprite(this._facesBitmaps[i]);

So every selectable element will have an image .
Now, somewhere in "* update Selection" I'd change this._selection into those 2 +1(first one) image. (this._facesBitmaps2,this._facesBitmaps3,this._facesBitmaps) and this would loop for duration that element is selected.

for (var i = 0; i < this._selection.length; i++)

You can see that in that part moghunter applies various effects on selectables,such as scale image and change transparency.If I could change those pictures I could get animation.


You think this might work?
I don't even know if javascript can make animations by changing pictures XD