Mundo Maker
¡Bienvenid@ a Mundo Maker!

¿Quieres aprender todo sobre el RPG Maker?



Regístrate y forma parte de Mundo Maker.

[Ayuda] [MV] Extender funcionalidad de Pantalla de Carga animada

Ver el tema anterior Ver el tema siguiente Ir abajo

RMMV [Ayuda] [MV] Extender funcionalidad de Pantalla de Carga animada

Mensaje por Oscar92player el 2017-09-22, 22:34

¡Hola a todos!

Recientemente, quise que mi proyecto tuviese pantallas de carga animadas, como en los juegos de 'Kingdom Hearts' cuando te transportabas de un mapa a otro, o como las de 'Birth by Sleep -A Fragmentary Passage-' cuando empezabas una Nueva partida o Cargabas un archivo guardado.


  • Cuando te transportabas de un mapa a otro, un icono animado como éste, aparecía en el lado inferior derecho de la pantalla dando vueltas:




  • Cuando empezabas una Nueva partida o Cargabas un archivo guardado, aparecía una barra de carga:




  • En este vídeo podés ver ambos, el icono animado, y la barra de carga, en acción (en el minuto 0:48):



El caso, es que encontré un plugin hecho por Iavra que resolvía la parte del icono animado:
Código:
/*:
 * @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 = {}));

Aquí tenéis un vídeo de cómo queda el icono animado (usando además un código que haga que la pantalla de carga sea infinita para poder testear la animación correctamente):


El plugin funciona a la perfección, y puedo hacer uso del icono animado como quería. Sin embargo, los tiempos de carga son tan fugaces que apenas da tiempo a verlos.

Mi idea es extender la funcionalidad de este plugin, y hacer no sólo que las pantallas de carga se muestren sólo cuando sea necesario, sino poder llamarlas con un Comando de plugin y que duren un tiempo determinado. Además, me gustaría poder añadir también una barra de carga hecha por imágenes en los casos en que se inicie una Nueva partida o se Cargue un archivo guardado.

Así que resumiendo, las cosas que me gustaría añadir serían las siguientes (con las explicaciones de por qué y qué funcionalidad tendrían):

  • La funcionalidad por defecto de las pantallas de carga cuando transporto a mis personajes:
    Esto es algo que me gustaría mantener por defecto, ya que las pantallas de carga en los transportes entre mapas funcionan como deben y no merece la pena extender los tiempos de carga más de lo necesario.
  • Un Comando de plugin para llamar a la Pantalla de carga durante un tiempo establecido:
    Esto sería necesario en caso de que quisiera llamar a una pantalla de carga antes de empezar una escena cinemática o transportarme a un mapa grande con muchos elementos (como los Mapamundis). Tiene el efecto estético de hacer pensar al jugador que algo va a pasar, y que por eso el juego necesita más tiempo de carga en estos casos.
  • La adición de una Barra de carga hecha por imágenes cuando empiezas una Nueva partida o Cargas un archivo guardado, con una transición suave al final. También me gustaría que hubiera Parámetros en el plugin para editar las imágenes que usaría, el tiempo que tardaría en cargar, y un Comando de plugin para especificar la aparición de esta pantalla de carga en mitad del juego, y por un tiempo definido:
    Esta parte tendría tanto aplicaciones estéticas como técnicas. La estética sería para hacer una pantalla de carga más bonita a la vista del usuario, y que mostrara una barra de carga que advirtiese de cuánto tiempo le quedaría al juego por cargar; la aplicación técnica sería para asegurar que el juego, al empezar una partida, o cargar un archivo guardado, cargase bien todos los recursos gráficos y sonoros, así como añadir una transición suave para que el mapa y los personajes no aparezcan tan de repente (un gran fallo del MV que aún no han reparado).


No sabría deciros si estas cosas serían posibles, teniendo en cuenta además que RPG Maker MV no está tan bien recibido en estos foros, pero al menos me gustaría pensar que habría posibilidades de extender este plugin un poco más de lo que ya tiene.

Como referencia, están este plugin de SoulXRegalia, y éste otro de MogHunter, que usan falsas pantallas de carga para Cargar o Guardar archivos de partida.

¡Espero que podáis ayudarme con esto!
¡Saludos!
avatar
Oscar92player
Principiante
Principiante

0/3

Créditos 352

Gracias : 40

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


Permisos de este foro:
No puedes responder a temas en este foro.