[Help] Loading Screen animation extension

Oscar92player

Veteran
Veteran
Joined
Jul 26, 2012
Messages
501
Reaction score
220
First Language
Spanish
Primarily Uses
RMMV
Hello, everyone.

Recently, I wanted my game to have an animated Loading Screen, like in 'Kingdom Hearts' games when you enter another map, or in the recently released 'Birth by Sleep -A Fragmentary Passage-', when starting a new game, or loading a saved file.

  • When entering a map, the game shows this load animated icon on the right side of the screen:
LoadingScree_002.png
  • When starting a new game or load a saved file, the loading looks this way, with a loading bar:
LoadingScree_001.png
  • In this video you can see both, loading icon and loading bar, in action (minute 0:48):

I've found one plugin that works the first way as intended, made by @Iavra :
HTML:
/*:
 * @plugindesc v0.03 Allows the usage of an animated imagestrip for the loading screen, instead of a static image.
 * <Iavra Loading>
 * @author Iavra
 *
 * @param Image
 * @desc Path to the image file to be used, relative to the project root.
 * @default img/system/Loading.png
 *
 * @param Background
 * @desc Optional background image to be displayed behind the loading image.
 * @default
 *
 * @param Frames
 * @desc Number of frames to be used. If this number is greater than 1, the image is split vertically.
 * @default 1
 *
 * @param Interval
 * @desc Delay (in frames), before switching to the next image frame. Set to 0 to disable interval behaviour.
 * @default 60
 *
 * @param X
 * @desc The loading image's x coordinate. Negative values start on the right. Set to a non-integer to center.
 * @default center
 *
 * @param Y
 * @desc The loading image's y coordinate. Negative values start at the bottom. Set to a non-integer to center.
 * @default center
 *
 * @help
 * Use the plugin parameter "Image" to specify the image file to be used. It may be treated as a horizontal imagestrip
 * by setting the "Frames" parameter to the number of frames.
 *
 * The optional "Background" parameter can be used to display another, static image behind the (possibly animated)
 * loading image. It will automatically be scaled to fit the screen.
 *
 * The "Interval" parameter can be used to set the number of frames to wait, before switching to the next image frame.
 *
 * Use the "X" and "Y" parameter to specify the image's position, anchored on its upper left corner. Negative values
 * will start the right/bottom side of the screen, instead of the left/top side. A value of 0 or -0 can be used to snap
 * the image to the corresponding side. Giving a non-integer value will center the image.
 */

(function($, undefined) {
    "use strict";

    var _params = $plugins.filter(function(p) { return p.description.contains('<Iavra Loading>'); })[0].parameters;
    var _param_image = _params['Image'];
    var _param_background = _params['Background'];
    var _param_frames = Math.max(1, _params['Frames']|0);
    var _param_interval = Math.max(0, _params['Interval']|0);

    /**
     * Basic helper function to extend objects. Mainly used for inheritance and other prototype-related operations.
     */
    $._extend || ($._extend = function(b, e) { for(var k in e) { b[k] = e[k]; } return b; });

    /**
     * Some variables used to cache stuff and calculate the current image state.
     */
    var _x = _params['X'], _y = _params['Y'], _cx = _x != (_x|0), _cy = _y != (_y|0), _w, _h, _t = 0, _r = false;

    /**
     * Loads the background image, if any.
     */
    var loadBackground = function(src) {
        if(!src) { return; }
        Graphics._loadingBack = new Image();
        Graphics._loadingBack.src = src;
    };

    /**
     * Loads the loading image, if any, splits it into frames and caches some values to be used during rendering.
     */
    var loadImage = function(src) {
        if(!src) { return; }
        var img = new Image();
        img.src = src;
        img.onload = function(img) { _w = img.width / _param_frames, _h = img.height, _r = true; }.bind(null, img);
        img.onerror = function() { throw new Error("Error loading '" + src + "'."); };
        Graphics._loadingImage = img;
    };

    /**
     * Draws the background image, if any.
     */
    var drawBackground = function(context, img) {
        if(img) { context.drawImage(img, 0, 0, Graphics.width, Graphics.height); }
    };

    /**
     * Calculates the image offset and current frame and draws it onto the screen.
     */
    var drawImage = function(context, img) {
        if(img && _r) {
            var dx = _cx ? (Graphics.width - _w) / 2 : (1/_x < 0 ? Graphics.width - _w -_x : _x);
            var dy = _cy ? (Graphics.height - _h) / 2 : (1/_y < 0 ? Graphics.height - _h - _y : _y);
            var f = _param_interval ? (_t++ / _param_interval % _param_frames)|0 : 0;
            context.drawImage(img, _w * f, 0, _w, _h, dx, dy, _w, _h);
        }
    };

    //=============================================================================
    // Graphics
    //=============================================================================

    var alias_graphics_startLoading = Graphics.startLoading;

    $._extend(Graphics, {

        /**
         * When starting to load, also reset the timer, which is used to determine the currently shown image frame.
         */
        startLoading: function() {
            alias_graphics_startLoading.call(this);
            _t = 0;
        },

        /**
         * Ignore the default parameter passed to this function and load both of our images.
         */
        setLoadingImage: function() {
            loadBackground(_param_background);
            loadImage(_param_image);
        },

        /**
         * Delegate to our drawing functions to update the loading screen.
         */
        _paintUpperCanvas: function() {
            this._clearUpperCanvas();
            if(this._loadingCount >= 20) {
                var context = this._upperCanvas.getContext('2d');
                context.save();
                context.globalAlpha = ((this._loadingCount - 20) / 30).clamp(0, 1);
                drawBackground(context, this._loadingBack);
                drawImage(context, this._loadingImage);
                context.restore();
            }
        }

    });

})(this.IAVRA || (this.IAVRA = {}));
Here's a video showing the animation of the loading screen (using a plugin to make an endless loading time to test the animation):

It works fine and I can make animated icons, but the problem is that the loading screens in my game are too short, and in some cases, there is some lag when starting showing the pictures that makes the animation.

My idea here, is to extend the functionality of the plugin, and make the Loading screen not only showing when needed but when calling it with a Plugin Command, and for a fixed time. Also, other thing I would like to add, is a custom loading bar made with pictures when starting a new game or loading a save file.

So the things I would like to add to this plugin are:
  • The default loading functionality for transferring maps with my characters:
This is something I don't want to change, because the main functions of the loading screen works as intended in this situations. No need to increase the time of this load screen​
  • A Plugin command to call the Loading Screen for a fixed time:
This is needed in case I would like to make a transition before begining a cutscene, or when transferring to a map that has a lot of elements to load (like the Worldmap). Also, it has the aesthetical application of showing the animated icon on the loading screen, and make the user thinks that something is going to happen in the game that needs more time to load.​
  • The addition of a Loading bar made with pictures when starting a new game or loading a save file, with a smooth fade in at the end. I would like this to be done in Plugin parameters, Plugin command and a fixed time too:
This has both, aesthetical and technical applications. The aesthetical one is to make a "charismatic" loading screen that shows a bar that warns the player how long the loading time will be; the technical one, is to make sure the game loads all the resources when starting the new game or loading a save file, and making a smoothing fade in so the map does not appear suddenly.​
  • Also, and if it's possible, I would like to "fix" the lag that comes up at the start of the loading screen:
That says everything. Lag in MV it's something annoying, and if this can be fixed with the loading images, it could be awesome.
I don't know if some of this things can be possible, but since RPG Maker MV has some optimization problems, I would like to have at least a "charismatic" loading screens for my project.

NOTE: Please, avoid to recommend this plugin, or this other one, since there are fake loading screens and only works with loading and saving scene.

Hope you can help me with this! :kaopride:
 
Last edited:

Ryzler

Princess in Distress
Veteran
Joined
Dec 15, 2016
Messages
84
Reaction score
128
First Language
English
Primarily Uses
RMMV
So you want to add in more loading screens and increase loading times on purpose?

Forgive if I seem entirely perplexed by this but shouldn't loading be fast, easy, and get in the player's way as a little as possible? Having special loading screens and animations and designs is great. It can help to give your game its own identity and sense of style. But purposefully making more loading screens and making the loading screens longer just gets in the way of gameplay.

Also the lag from the loading screen is probably from having to load your loading screen... Simpler or less complex animations may serve well.
 

Oscar92player

Veteran
Veteran
Joined
Jul 26, 2012
Messages
501
Reaction score
220
First Language
Spanish
Primarily Uses
RMMV
So you want to add in more loading screens and increase loading times on purpose?

Forgive if I seem entirely perplexed by this but shouldn't loading be fast, easy, and get in the player's way as a little as possible? Having special loading screens and animations and designs is great. It can help to give your game its own identity and sense of style. But purposefully making more loading screens and making the loading screens longer just gets in the way of gameplay.

Also the lag from the loading screen is probably from having to load your loading screen... Simpler or less complex animations may serve well.
Increasing the loading times is not only an aesthetical feature I would like to add in my game, and I know the loading times should be non-existent in a 2D game like this, but unfortunatelly, MV is not very well optimized and sometimes I need more time between some transitions to help the game load all the resources.

However, this does not mean I would like to increase the loading times in all the moments the game needs to load something. As I explained in the main post, I would like to make them more "charismatic", adding animations, and loading bars, and also, I would like to increase the loading times when, for example, an important cutscene is about to happen, or at the start of a new game/load a save file. Is aesthetical in some way, but needed by other way, so the game can take it's time to fully load the resources that are about to show, like music or images.

I noticed too, when loading a save file, or starting a new game, RPG Maker MV doesn't have a smooth transition, and it's because of a the frame drops the engine suffers when entering a map for the first time. So, when loading a saved file, or starting a new game, I would like to give some time to the engine so it can load all the resources before the user begins play.

I need to update the main post to explain in more details why I need this kind of feature, but the reason is that, if MV needs to use a loading screen by default when loading some resources, I would like to make them more interesting and less ugly.

Here is a video from my project using the animated loading screen (with a plugin that makes an endless loading, so I can test the animation correctly):
 
Last edited:

Ryzler

Princess in Distress
Veteran
Joined
Dec 15, 2016
Messages
84
Reaction score
128
First Language
English
Primarily Uses
RMMV
As I said: Custom loading screens are great. But make them too fancy and that just adds to the loading time. Simple, but still interesting, is the best way to go. Small animations or pretty artwork instead of something complex. Every extra animation and loading bar and picture has to be loaded and does increase loading times...

It's your game, so if you want to then go ahead. But adding in extra loading screens will not decrease other loading times, you're just wasting time to stop everything and process a new loading screen. If anything you increase the total amount of time spent on loading.

Due to the poor optimisation it may help you to check this out: http://yanfly.moe/2017/09/13/yanflys-desktop-optimized-version-update-rpg-maker-mv-1-5-1/
 

Oscar92player

Veteran
Veteran
Joined
Jul 26, 2012
Messages
501
Reaction score
220
First Language
Spanish
Primarily Uses
RMMV
As I said: Custom loading screens are great. But make them too fancy and that just adds to the loading time. Simple, but still interesting, is the best way to go. Small animations or pretty artwork instead of something complex. Every extra animation and loading bar and picture has to be loaded and does increase loading times...

It's your game, so if you want to then go ahead. But adding in extra loading screens will not decrease other loading times, you're just wasting time to stop everything and process a new loading screen. If anything you increase the total amount of time spent on loading.

Due to the poor optimisation it may help you to check this out: http://yanfly.moe/2017/09/13/yanflys-desktop-optimized-version-update-rpg-maker-mv-1-5-1/
Tried that update and in fact, I'm using it with my project, and sorry to say that even with that MV is not able to load things correctly or get rid of the frame dropping. Also, Yanfly's update, and the official updates adds a bug with PIXI that was solved in 1.3.0 with the Change Tileset command.

But returning to the main thread, no matter what, I would like to add those loading screens.
 

Ryzler

Princess in Distress
Veteran
Joined
Dec 15, 2016
Messages
84
Reaction score
128
First Language
English
Primarily Uses
RMMV
If you must, then go ahead. It is your game.

There should be a plugin command to call the loading screen or maybe to tell the game to reload the map. But for that loading plugin you're using then either @Iavra can help you or you could ask Iavra very nicely to update the plugin so that it is capable of what you want? But I know they're busy or something and you may have to wait for them if you want much help with this
 

Oscar92player

Veteran
Veteran
Joined
Jul 26, 2012
Messages
501
Reaction score
220
First Language
Spanish
Primarily Uses
RMMV
If you must, then go ahead. It is your game.

There should be a plugin command to call the loading screen or maybe to tell the game to reload the map. But for that loading plugin you're using then either @Iavra can help you or you could ask Iavra very nicely to update the plugin so that it is capable of what you want? But I know they're busy or something and you may have to wait for them if you want much help with this
As I know, Iavra is not connected since April, and the latest posts from October 2016, so I don't know if he can help me with this at this moment. That is the reason I asked in this forum, so anyone can help with this questions and requests I have about his plugin.

There should be a plugin command to call the loading screen or maybe to tell the game to reload the map
The best option could be calling the loading screen, instead of reload the map (since reloading I think it can be done by transferring the player to the same position in that map).
 

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

Latest Threads

Latest Posts

Latest Profile Posts

What is your favourite rpg maker plugin?
Hopefully this gets fixed before release..
Where's this sudden heatwave come from? It's not even sunny, it's just hot. Hate it!
I'm slightly disappointed that the MZ codebase still uses core.js, managers.js, objects.js, scenes.js, sprites.js and windows.js instead of core/Bitmap.js, core/Graphics.js, managers/AudioManager.js, managers/DataManager.js, etc...
just a few more hours until the toughest, most pressure 72 hours of my life, wish me luck guys

Forum statistics

Threads
100,565
Messages
977,269
Members
132,148
Latest member
jcamp10565
Top