Image transitions

[FriKitty]

Hello! I finally got something to ask (lol). I asked somewhere else too, but I want to try to get as much help as possible x') So let me copy:

My JS knowledge is basic and my plugin making experience is also that, so please be patient.

I am trying to make transitions in game (when starting a new game, when loading, when going to title, when entering battle and leaving battle... basically scene transitions) work with images. In my specific case I have 3 images, one that covers the whole screen with dots, one with bigger dots, and a third one that is just black.

This works fine in a common event for, say, map transfers.
>Show image #1 transition1.png
>Wait X frames
>Erase image #1
>Show image #1 transition2.png...

I know the battle intro is a different thing, which is why I use a plugin to replace it with a common event (SRD_CEBattleIntro). However, by default, when the battle actually starts, there is a fadeout, and when it ends there is another fadein-fadeout to go to the map scene. I want to modify those very fadeins-fadeouts.

But well, by default it obviously doesn't use a multiple-image approach (there is no need for it to do so). I also don't truly understand how it 100% works. This is the function, so you have it at hand:

Code:

Scene_Base.prototype.startFadeOut = function(duration, white) {
    this.createFadeSprite(white);
    this._fadeSign = -1;
    this._fadeDuration = duration || 30;
    this._fadeSprite.opacity = 0;
};

(And a similar one for FadeIn)

Anyway. Anytime this is used, duration is set as fadeSpeed(), which returns 24 by default. I made it 1 so the transitions were instant, and that works, again, up to a certain point. All my map transfers can use evented show image commands, but I can't do it with transitions between scenes. Could someone guide me a little?

I know how to load images with ImageManager.reservePicture(), as I've managed to draw busts to my menus with a custom function (that uses this.contents.blt()). But that was a static image in a menu. I have no idea how to show more than one, in sucession, after waiting frames, and make it an animation.

I can also figure how to set up plugin parameters that reserve the images that will be used, so other than that, can someone think of a way of showing images in sucession with frame waits in between?

Sorry if it's not that simple to implement, as again, I'm not great at code. But I figured I could ask before giving up and using a plan B. Thank you!

[FriKitty]

Ok, the classic happened... I found the solution after getting some pointers from someone else, so this post became pointless x'D
Should this be closed? I don't know what's the usual practice here.

In any case, and if you're curious, this is the explanation of what I did, which is a little silly, but works. Now I have to work on improving it, and making it dynamic if possible:

---

Because this is how I set up the timing in my common events, I changed fadeSpeed() to 21 (7 + 7 + 7), and modified slowFadeSpeed() so it was the same as fadeSpeed. (It is inconvenient for me to have different fade speeds, unless I want to assign more pictures to that).

Then I changed createFadeSprite() to this:

Code:

Scene_Base.prototype.createFadeSprite = function() {
    this.spriteTrans1 = new Sprite();
    this.spriteTrans1.bitmap = ImageManager.reservePicture("tranneg1");
    this.addChild(this.spriteTrans1);
    this.spriteTrans2 = new Sprite();
    this.spriteTrans2.bitmap = ImageManager.reservePicture("tranneg2");
    this.addChild(this.spriteTrans2)
    this.spriteTrans3 = new Sprite();
    this.spriteTrans3.bitmap = ImageManager.reservePicture("tranneg3");
    this.addChild(this.spriteTrans3)
};

Which is very redundant and stupid x') But that's what I have to work on, lol. It creates 3 sprites and adds them to the scene.

Then, in startFadeIn() and startFadeOut() I deleted the this._fadeSprite.opacity = 0; since it was already unused. I added my this.spriteTrans1 to 3 accordingly (set to 0 opacity), and the timing was precisely in updateFade():

Code:

Scene_Base.prototype.updateFade = function() {
    if (this._fadeDuration > 0) {
        if (this._fadeSign > 0) {
            //esto es fadein (venir de negro)
            if(this._fadeDuration >14){
                this.spriteTrans3.opacity = 255;
            }
            if(this._fadeDuration <= 14 && this._fadeDuration > 7){
                this.spriteTrans3.opacity = 0;
                this.spriteTrans2.opacity = 255;
            }
            if(this._fadeDuration <= 7){
                this.spriteTrans2.opacity = 0;
                this.spriteTrans1.opacity = 255;
            }
           
        } //esto de abajo es el fadeout (irse a negro)
        else {
            if(this._fadeDuration > 14){
                this.spriteTrans1.opacity = 255;
            }
            if(this._fadeDuration <= 14 && this._fadeDuration >7){
                this.spriteTrans1.opacity = 0;
                this.spriteTrans2.opacity = 255;
            }
            if(this._fadeDuration <= 7){
                this.spriteTrans2.opacity = 0;
                this.spriteTrans3.opacity = 255;
            }

        }
       
        this._fadeDuration--;
    }
    if(this._fadeDuration <= 0 && this.spriteTrans1){
        this.spriteTrans1.opacity = 0;
    }
};

Which again, is very stupid. Because it only works properly if fadeSpeed is 21.
I also had to additionally set this.spriteTrans1.opacity to 0 when the transition is done, or else it would still be visible in the screen. Since the opacity doesn't change gradually like in the default functions, I guess I have to do that...

---

[DerVVulfman]

Ok, the classic happened... I found the solution after getting some pointers from someone else, so this post became pointless x'D
Should this be closed? I don't know what's the usual practice here.

I guess, as you had success, this 'can' be closed. It is glad to hear you found a solution. And no, it is not pointless. In all things where we ask questions, we endeavor to learn. Who's to say you won't become an excellent coder from what lessons you are learning?

And remember one of Murphy's Law: If its stupid, and it works... its not stupid. He wrote a FEW of these laws.

It can be re-opened by your request, of course.