Una función muy solicitada es la posibilidad de cambiar la pantalla de carga de Construct 2. Esto se puede hacer usando un loader layout, que es un layout especial que se muestra mientras el proyecto aún se está cargando.
Posibilidades creativas
Algunas ideas sobre los beneficios de tener tu propia pantalla de carga:
- Puedes diseñar la barra de progreso con el mismo estilo gráfico que el resto de tu juego. De esta forma, el jugador se integra más en el "look" del juego desde que empieza.
- La pantalla de carga puede ser diseñada como la pantalla principal, por lo que el jugador nota que ya está a punto de jugar.
- También puedes incluir información como instrucciones y controles en la pantalla de carga, para que el jugador lea algo útil mientras espera. (De todas formas, no te olvides de incluir instrucciones en el juego principal, por si la carga es muy rápida).
- Incluso puedes incluir un mini-juego o una pequeña sección del juego actual, para que el jugador esté entretenido mientras espera. Procura incluir el menor número de objetos posible en el loader layout, para que no tarde mucho en cargar.
Como se carga un proyecto
Antes de crear un loader layout, hay que entender como se carga un proyecto en Construct 2. Son cuatro fases:
1. Se descarga la página en HTML y el Javascript. Mientras no se descarga el juego de Construct 2, no se muestra nada.
2. Una vez que se descarga el Javascript (suele ser rápido, porque el código es pequeño), aparece el loader por defecto. Normalmente verás el logo de HTML 5 con una barra de progreso azul. Se muestra mientras el loader layout se está cargando. El estilo gráfico del loader por defecto también se puede cambiar en las Propiedades del proyecto (ver más adelante).
3. El resto del proyecto se carga mientras se ve el loader layout.
4. Por último, el juego se carga completamente y está listo para jugar.
En los pasos 2 y 3 sólo se descargan imágenes. Toda la lógica Javascript se descarga en el paso 1 y el sonido entra en vivo cuando el juego ha comenzado. Para ampliar información sobre como se reproduce el sonido en vivo, consulta Sonido en el manual. Por tanto, lo único que se carga mientras se muestra la barra de progreso son las imágenes de los Sprites, fondos y demás.
Esto significa que todo lo que necesitas para aumentar la velocidad de carga del juego es optimizar tus imágenes, creándolas lo más pequeñas posibles sin que pierdan calidad. Para ampliar información y leer consejos sobre como reducir el tamaño final del proyecto, consultas las entradas del blog Compresión de imágenes en Construct 2 y Bajo el capó: hojas de sprite en Construct 2.
Como crear un loader layout
Busca estos dos ajustes en las Propiedades de proyecto: Use loader layout y Loader style.
Loader style cambia el aspecto del cargador predeterminado. Consulta más abajo Cambiando el loader predeterminado para ampliar la información.
Use loader layout permite el uso de un loader layout. Por defecto está deshabilitado y tienes que activarlo en los proyectos donde lo uses. Una vez activado, el primer layout se convertirá en el loader layout. Marca la opción First layout para asegurarte que es el primero en aparecer (sino Construct 2 puede seleccionar uno diferente).
Mostrar el progreso de carga
La expresión de sistema loadingprogress devuelve un número entre 0 y 1 con el progreso de carga del proyecto. Por ejemplo, si está a la mitad de la carga, mostrará 0.5. Puedes usar esta expresión para mostrar el progreso en el loader layout.
Por ejemplo, para mostrar el porcentaje como texto, puedes configurar un objeto texto como:
round(loadingprogress [] 100) & "%"*
Así multiplicas el progreso por 100 para mostrar el porcentaje cargado, redondeas el resultado y le añades el símbolo de porcentaje, mostrando el texto "50%".
Los objetos Tiled backgrounds también resultan efectivos para crear barras de progreso. Por ejemplo, si tienes uno con un ancho de 500 pixeles cuando está completo, en cada tick puedes indicar la anchura:
500 [] loadingprogress*
Esto hará que la barra de carga irá mostrando el ancho total de 500 pixeles en relación al porcentaje cargado en cada momento.
Es básico mostrar el estado cargado en cada momento. Sino, los usuarios con conexiones lentas pueden frustarse porque no saben cuanto les queda para poder jugar, cerrando el juego antes de empezar. Sería un lástima que se desconectaran a poco de terminar la carga porque no se muestra el estado de carga.
Además del indicador, puedes usar otra animaciones o efectos, como spinners, relojes y demás.
Consideraciones
Recuerda que cada objeto imagen del loader layout tiene que descargarse del todo antes de poder mostrarse. Si pones tu objeto Player con 10 animaciones en este layout, todas las animaciones se tienen que cargar antes de pasar del loader predeterminado al personalizado. Si sólo quieres mostrar un icono del Player, crea un objeto separado con sólo una imagen, sin animaciones.
Estudia con cuidado cada objeto que colocas en el loader layout, así como las animaciones. ¿Son todas necesarias? Sólo los objetos con imágenes retardan la carga, así que piensa con cuidado cada Sprite y Tiled Background que uses, especialmente los que tengan animaciones largas. Necesitas que se cargue todo lo más rápido posible.
Limitaciones
Limitaciones en el uso de loader layouts:
1. Los loaders layouts no se muestran cuando se publica como app nativa en móviles (por ejemplo, vía PhoneGap, CocoonJS and appMobi). Esto es así porque toda la aplicación se descarga de una vez. Como todos los archivos están disponibles al momento, no se necesita descargar nada más. Para estas plataformas, probablemente deberías optar por una pantalla splash personalizada.
2. Los loader layouts sólo se muestran la primera vez que el juego se descarga desde la web. Ya que Construct 2 guarda los juegos en el disco para permitir que funcionen sin conexión, la segunda vez que el jugador entra se carga al momento. Aunque actualices tu juego, se cargará al momento. El juego empieza de forma normal, pero la actualización empieza en segundo plano. Puedes usar el Objeto Browser para detectar cuando hay actualizaciones y avisar al usuario para que recargue la página cuando estén listas. Para ampliar información, consulta el tutorial Juegos sin conexión en Construct 2 y la sección Actualizaciones más abajo.
3. En los loaders layouts, no puedes crear objetos que no estén en el propio layout o cambiar a otro layout hasta el final de la carga. Obviamente esto es así porque el resto del proyecto aún no se cargó.
4. El loader por defecto se muestra mientras el loader layout personalizado está cargando.
Carga completa
Cuando la carga finaliza, loadingprogress es igual a 1. Además, se ejecuta el trigger de sistema On loader layout complete (en la categoría Star & end). Puedes usar esto para mostrar un botón 'Jugar', que aparezca el menú principal o que empiece el juego.
Cambiando el loader predeterminado
El Loader style cambia el loader por defecto del proyecto. Este se muestra cuando está cargando el loader layout o la barra de progreso cuando no se usa otro. Los cuatro estilo son:
Progress bar & logo (por defecto): muestra un logo y una barra de progreso azul. Puedes cambiar el logo sobreescribiendo logo.png en la carpeta creada al exportar el proyecto. Procura que la imagen sea lo más pequeña posible para que se muestre rápido - el logo HTML5 sólo ocupa 1Kb! La barra de progreso se ajusta a la anchura de logo.png y se sitúa a 12px por debajo.
Progress bar only: lo mismo que el anterior, pero logo.png no se carga ni se muestra.
Percentage text: en vez de la barra de progreso, se muestra un texto en gris indicando el porcentaje cargado.
Nothing (no recomendado): se muestra una pantalla en negro mientras carga. No se recomienda aunque se use un loader layout, porque los usuarios con conexiones lentas no verán nada mientras este último se carga. Se recomienda al menos usar Percentage text.
Actualizaciones
Como se comentó antes, el loader layout sólo se ve en la primera carga. Si actualizas el juego, la próxima vez que se juegue empezará al momento y se actualizará en segundo plano, como se describe en el tutorial Juegos sin conexión en Construct 2.
Puedes detectar que esto está ocurriendo usando estas condiciones en el Objeto browser:
Is downloading update (Se está descargando una actualización): true cuando el juego se está ejecutando, pero has subido una nueva versión y el navegador la está descargando en segundo plano.
On uptade ready (Actualización lista): se ejecuta cuando finaliza la descarga de la actualización. La nueva versión no se verá hasta que la página se recargue, por lo que deberás avisar al usuario o usar la acción Reload del objeto Browser.
Además, mientras Is downloading update sea true, loadingprogress también se ajusta con el progreso de la descarga de la actualización.
Usando estas características puedes reusar tu loader layout como un layout de actualización. No obstante, cuando finalice de actualizar, no olvides recargar (reload) antes de empezar el juego. Otra manera de actualizar, es no usar estos eventos y dejar que la actualización se produzca de forma automática y sin que el jugador se entere.
Conclusión
Diseñar un loader layout es muy importante para generar una buena impresión desde el momento que el juego se empieza a cargar. Recuerda: muestra siempre algún tipo de progreso del estado de carga e intenta usar el mínimo número de imágenes en el propio cargador.