class_20-f2fe314c

La App Makers

Estimados y estimadas, sean todos bienvenidos al majestuoso Post #20 del hilo “Programando Juegos VN con Ren’Py!”.
El día de hoy, a pedido de algunas personas, les enseñaré a hacer un Verificador de Actualizaciones Online para un juego Ren’Py. Ve encendiendo la tostadora para empezar a picar código como si no hubiera mañana xD.
¡Vamos, vamos, vamos!


STATUS CHECK : Todo el contenido de este post ha sido verificado, y es compatible con la última versión emitida de Ren’Py.


1. INTRODUCCIÓN AL VERIFICADOR DE ACTUALIZACIONES

[SCREENSHOT : Ventana de alerta de actualización en “ElectroBasics Electronic Quiz!”, juego aún en desarrollo]

Cuando lanzamos un juego, vamos  introduciendo características a medida que pasa el tiempo. La mejor forma de que los jugadores saquen provecho de las nuevas características de un juego, es haciéndole saber al jugador de que hay una actualización disponible.
En este post nosotros crearemos un pequeño sistema que verifique si el juego está actualizado, y en el caso de no estarlo, pues lanzar una pantalla de alerta al jugador para que lo actualice.
¿Cómo haremos que el jugador se entere de una actualización? Simple. El método que utilizaremos en este post consistirá en conectar el juego a Internet y enviar una solicitud web hacia un servidor donde un archivo de control le dirá al juego si está actualizado o no, aunque debemos cumplir ciertos requisitos para crear esta característica.

Condiciones de funcionamiento de Requests en general :

  • Protocolo/Rango de solicitud : En está oportunidad necesitamos un servidor que pueda operar con solicitudes de rango HTTP o HTTPS. Si el servidor no dispone de certificados de seguridad, intenta escribir las URLs solo como HTTP.
  • Servidor propio : Debemos tener un servidor/host web en el que podamos alojar archivos. Las nubes de almacenamiento como MEGA o Mediafire NO NOS SERVIRÁ para lo que pretendemos hacer, puesto que necesitamos obtener una respuesta limpia del cuerpo del archivo de control, un requisito que estas nubes no cumplen en lo absoluto.

No te desanimes. Si no tienes para costear un servidor propio, hay hosting gratuitos que funcionan bien para lo que queremos hacer. En mi caso ocupo a 000Webhost y funciona de p*ta madre xD.

Itinerario de este post :

  • [JSON] Uso de los archivos JSON como controlador de versiones.
  • [Python] Crear el verificador de actualizaciones.
  • [Ren’Py] Crear la UI de alerta de actualizaciones.

1. CREANDO EL CONTROLADOR DE VERSIONES : ¿QUÉ ES UN JSON?

Antes de enseñarles a crear el verificador de actualizaciones, debemos empezar por lo fundamental: ¿Qué es JSON?

JSON es la sigla que proviene del inglés “JavaScript Object Notation”, y es un tipo de lenguaje de marcado que ha sido calificado como uno de los medios más sencillos para intercambiar información entre dos puntos, y precisamente para eso lo necesitamos en este post, para intercambiar información entre el servidor y el juego.
El archivo a crear, comúnmente posee la extensión .json y este archivo será en definitiva, el que alojaremos en el servidor para controlar la versión del juego.


1.1 ESTRUCTURA DE LOS JSON :

El lenguaje de marcado JSON consiste básicamente en dos elementos de estructura: el nombre/palabra clave y un valor.
Esto puede ser leído como si fuera un diccionario. Hazte la idea de que tenemos a un concepto y su definición respectiva. Así es JSON, solo que a diferencia de un diccionario real, el concepto lo creamos nosotros, y su definición también. Mira el ejemplo a continuación :

[SCREENSHOT : Código de ejemplo de un JSON señalando los colores como palabra clave, y el hexadecimal correspondiente como su valor]

#OffTopic : Si viste algo fuera de lo común, solo no digas nada xD. Primero mira el tutorial y luego tratamos con esos detalles raros jsjsjs.

Esto ya lo aplicamos en el «Post #14» donde les presenté por primera vez las solicitudes web en Ren’Py. De hecho ocuparemos el mismo método de esa vez, pero eso dejémoslo para más adelante.


1.2 HACIENDO NUESTRO ARCHIVO DE CONTROL DE VERSIONES :

Repito nuevamente. Este archivo será el que alojaremos en el servidor. No estará vinculado precisamente a los Assets del juego.

Tomando en cuenta el sub-item anterior, haremos un código aún más básico para controlar las versiones de nuestro juego. Este constará de un solo nombre o palabra clave, y un solo valor que en este caso, será un número escrito como cadena de texto (String). Mira a continuación :

[SCREENSHOT : Código de ejemplo para el archivo JSON de control de versiones.]

En este caso, el nombre o palabra clave será “game_version”, y el valor será una cadena de texto con la versión actual del juego. Lógicamente cuando pongamos a disposición una nueva versión, vamos a ir aumentando la versión del juego en la cadena de texto del JSON, y también en el código del juego.

NOTA : Las versiones de un juego Ren’Py se manejan desde el script options.rpy de tu proyecto, en una variable llamada config.version

Concluyendo con el asunto de los JSON, debes crear un archivo de texto vacío en tu editor, agregar el código anterior y guardar el archivo con el nombre que quieras, siempre y cuando le agregues la extensión .json.
Posteriormente, este archivo debes subirlo a tu servidor/host y comprobar que se puede acceder a el mediante su URL.

Sin más que decir, vamos a la parte donde picaremos código en nuestro juego. Si, ya hicimos lo que va en el lado del servidor así que ahora crearemos lo necesario para que el juego sea un cliente que haga solicitudes al servidor. ¡Vamos para allá!


2. LOS MÓDULOS “REQUESTS” Y “JSON” SE UNEN A LA FIESTA PARA CREAR EL CLIENTE!!!

Ahora nos trasladaremos hacia nuestro juego, pues en esta parte nos toca codificar el fragmento que contactará al servidor para verificar si hay una versión nueva.

En Python existen algunos módulos que pueden ejecutar solicitudes web hacia alguna URL como por ejemplo “urllib”, que por cierto, es un módulo estándar de Python.

En esta oportunidad no haremos uso de ese módulo, sino que usaremos un módulo que se llama “Requests”, ya que es bastante elegante y tiene una estructura bastante sencilla para ejecutar solicitudes de distinto tipo, ya sea GET, POST, HEAD, SESSION, entre otros.
Para empezar, necesitamos descargarlo y colocarlo correctamente dentro del juego, así que vamos con el paso a paso (aunque ya lo he explicado numerosas veces en este hilo xD).


2.1 DESCARGA E INSTALACIÓN DE “REQUESTS” EN EL JUEGO :

Si en tu caso ya tenías el módulo Requests en las carpetas de tu juego, puedes ir de inmediato al sub-ítem 2.2 y continuar de inmediato con la codificación, de lo contrario, sigue leyendo por favor :3

NOTA : A partir de la versión v7.4.0 de Ren’Py, ya no será necesario hacer la instalación manual del módulo “Requests”, puesto que fue incluido en el motor como un módulo por defecto. Basta que hagas la importación en el código y ya :3

  • Paso 1 : Descarga del módulo “Requests”

Este módulo no pertenece a la librería estándar de Python, por lo que necesitamos descargarlo de forma externa.
Para ahorrarnos la pereza de usar el famoso “pip install” y buscar como desquiciado mental el módulo y sus dependencias adicionales, en las siguientes URLs podrás descargarlo todo con su equipamiento necesario :

Usa cualquiera de los dos. La versión v2.25.1 es la más reciente del módulo y aún incluye soporte para Python v2.7


  • Paso 2 : Colocación del módulo en las carpetas

[SCREENSHOT : Módulo Requests y módulos complementarios en la carpeta “python-packages”]

Como ya lo he explicado en otras oportunidades, debemos crear una carpeta llamada “python-packages” en el interior de la carpeta “game” de nuestro proyecto. Cuando hagas la carpeta, entra a ella y desempaqueta todas las carpetas que contiene el archivo ZIP que descargaste. Debería quedar exactamente igual que en el Screenshot.
Una vez terminado este paso, estarás listo o lista para emplear el módulo en el código del juego :3
Vamos al siguiente sub-ítem para continuar con la fiesta xD.


2.2 CODIFICAR LA PETICIÓN/SOLICITUD WEB :

En este punto estamos en la parte deliciosa del tutorial donde escribiremos código en Python, el punto en que crearemos el código que se encargará de ejecutar las solicitudes y gestionar la respuesta enviada desde el servidor al juego. Para lograr esto, ocuparemos dos módulos, el módulo “Requests” para generar las solicitudes web, y “JSON” para gestionar la respuesta del servidor que, en este caso, es el archivo JSON que hicimos en el ítem 1.
Mira el código a continuación y luego lo desglosaremos para entenderlo :

[SCREENSHOTS : Código que verifica actualizaciones respecto de un JSON alojado en un servidor]

Creo que dada las condiciones actuales de mi editor de texto, poco van a poner atención en esta parte del tutorial, pero igual les explicaré de qué va el código xD. Empecemos a desglosarlo para comprender como funciona.

  • init python [Bloque] : Como hemos tratado en numerosas oportunidades, el bloque init python sirve para incrustar código escrito netamente en Python. La declaración init hace de que este bloque de código Python se inicialice cuando el juego está arrancando.
  • default Update_Beacon [Variable por defecto] : Esta es una declaración de Ren’Py donde declaramos a una variable llamada Update_Beacon, la cual por defecto tendrá el valor lógico False.
  • def Update_Checker(url) [Función de Python] : Esta función recibe como único argumento una string con la URL del archivo JSON en tu servidor, y cumple la función (valga la redundancia) de ejecutar una solicitud web hacia la url. Debe ser llamada en el arranque, así ejecuta la comprobación de actualización mientras el juego aún se esté iniciando.
  • global [Palabra clave] : Esta palabra clave convierte a una variable como una variable que se puede modificar fuera del alcance actual del código. En este caso, la variable se actualizará tanto para la función como también para todo el código del juego.
  • try, except [Bloques] : Este par de palabras claves hace de que este código sea a prueba de errores. Si ocurre un error en la ejecución de la solicitud web, en el procesamiento del JSON, o simplemente el jugador tiene problemas de conexión a internet, el código podrá manipular el error sin interrumpir el funcionamiento normal del juego.
  • requests.get() [Método] : Este método ejecuta una solicitud web de tipo GET, utilizando en este caso dos argumentos. El primer argumento corresponde a una string con la URL hacia donde apunta la solicitud, y el segundo argumento corresponde al tiempo de espera total que tendrá la solicitud web, en segundos. Si el tiempo de espera se agota, o si el servidor retorna una respuesta de error como los errores 404 o 500, el código seguirá su camino por el bloque except.
  • json.loads() [Método] : Este método recibe como argumento un objeto JSON en formato de texto, que en este caso, corresponde a la respuesta recibida desde la solicitud web.
  • if json_digest[“game_version”] == config.version [Condicional] : Esta condicional compara los valores recibidos desde el servidor con el valor que arroja la variable config.version. Esta última contiene la versión de tu juego, y se ajusta en el archivo “options.rpy” de tu proyecto. Si el objeto “game_version” posee un valor distinto de config.version, querrá decir que hay una actualización disponible.
  • persistent.Update_Beacon [Variable] : Estas variables indicarán al juego si el servidor tiene una versión distinta a la del juego, es decir, cuando sea True, querrá decir que hay una actualización disponible para descargar.

Bien. Eso sería todo por el lado de Python, pues nuestro verificador de actualizaciones está terminado :3
Ahora nos iremos hacia el lado de Ren’Py para crear la UI de alerta de actualización, pues, no queremos un código que funcione a medias, ¿verdad?
¡Vamos al siguiente y penúltimo ítem de este tutorial!


3. PREPARACIÓN DEL JUEGO PARA DETECTAR ACTUALIZACIONES

¡Excelente! Ya estamos en la parte más light de este tutorial, pero digamos las cosas como son: el código para ejecutar las solicitudes igual es facil xD, pero volviendo al contexto, en esta parte nos encargaremos de crear una ventana de alerta que le diga al jugador que hay una actualización disponible del juego, junto con botones para que el jugador pueda interactuar con la ventana.


3.1 DISEÑO BÁSICO DE LA VENTANA DE ALERTA (UI) :

Para crear la ventana de alerta, haremos uso del “Lenguaje de Pantallas”, bastante hablado en los últimos 5 o 6 posts de este hilo (la verdad ya se me olvidó xD).
El código a continuación crea una ventana de alerta con dos botones para elegir la acción a ejecutar. Míralo con detenimiento y luego desglosamos cada parte clave como siempre :

[SCREENSHOT : Código que muestra la ventana de alerta.]

Ahora, vamos a ver para qué sirve cada elemento dentro de ese código :

  • frame [Bloque] : Este tipo de bloques dibuja un recuadro en la pantalla en base a una imagen en la ruta /gui/frame.png de tu proyecto. Puedes determinar cuán grande debe ser respecto de los pixeles de ancho (xsize o xmaximum) y de largo (ysize o ymaximum).
  • xsize, ysize [Propiedades de Estilos] : Estas propiedades definen las dimensiones de un objeto, tomando en cuenta al eje X y al eje Y de tu pantalla. El valor comúnmente dado es un número entero que representa la cantidad de pixeles de longitud.
  • OpenURL() [Acción] : Esta acción recibe como argumento, una string con una URL que se abrirá en el navegador de tu dispositivo. La idea de este botón, es que el jugador acceda al blog de tu juego, o a la tienda donde lo tienes publicado.
    En este caso, si el jugador presiona en “Descargar Actualización”, abrirá la URL del Gameblog de mi proyecto aún en desarrollo : https://eeqproject.blogspot.com/.
  • Hide() [Acción] : Esta acción oculta una screen. En este caso, recibe como argumento una string el nombre de la screen a ocultar.
  • MainMenu() [Acción] : Esta acción hace de que el jugador regrese al menú principal del juego. El argumento de palabra clave confirm se establece en False para que no muestre la ventana diciendo “¿Estás seguro de regresar al menú principal”

3.2 USANDO LA SCREEN Y EL APARTADO “SPLASHSCREEN” DE REN’PY :

En el sub-ítem anterior hicimos la UI de la ventana de alerta, pero nuestro juego aún no sabe qué hacer cuando detecte una nueva actualización.
Generalmente los juegos te avisan que hay una nueva actualización cuando está arrancando. Es así como en esta oportunidad haremos uso del label splashscreen.
Ren’Py considera al label splashscreen como parte de su funcionamiento natural (así como el label start), y su utilidad va desde hacer pantallas de bienvenida antes de mostrar el menú principal, hasta lo que estamos haciendo ahora. En conclusión, todo lo que esté dentro del label splashscreen se mostrará antes que aparezca el menú principal en el arranque del juego.

Con todo lo dicho, ¡pues pondremos en práctica el uso de ese label para mostrar la ventana de alerta de actualizaciones! Mira a continuación cómo deberías hacer el código :

[SCREENSHOT : Código que muestra la ventana de alerta, respecto de la variable “persistent.Update_Beacon”]

El código que viste, evalúa si existe una actualización disponible justo después de arrancar, y justo antes de mostrar el menú principal del juego.
Para entender como funciona, vamos a desglosarlo :

  • if persistent.Update_Beacon [Condicional] : Esta condicional evalúa a la variable persistente Update_Beacon. Esta variable es actualizada dentro de la función de Python que hicimos para verificar las versiones del juego. Entonces, si Update_Beacon se actualiza como True, el juego mostrará en el arranque a la ventana de alerta, de lo contrario, se dirige inmediatamente al menú principal.
  • call screen Update_Alert [Expresión de llamada] : Esto llama a la screen en el caso de que eventualmente, se haya detectado una versión distinta a la del juego.

Finalmente con todo lo anterior entendido, podemos proceder a hacer las pruebas en tiempo real con el JSON en el servidor. ¡Vamos al siguiente, el último, y más delicioso ítem de este post!

Si, ahora los ítems tienen sabor :V


4. TESTEANDO EL FUNCIONAMIENTO DEL DETECTOR DE ACTUALIZACIONES

Esta parte sin duda será la más placentera, pues aquí veremos si el desmadre que hicimos allá atrás realmente funciona jsjsj.
Una vez que tengas todo listo en el juego y en el servidor, vamos a comprobar el funcionamiento del detector de actualizaciones.


  • Test 1 : La versión del juego es igual a la del servidor (El juego está al día)

Como lo dijimos más atrás, consideramos como versión del juego el valor proporcionado en config.version, que puede ser encontrado en el archivo “options.rpy” de tu proyecto.
Para comprobar que el juego no tenga falsos positivos de actualización, debemos comprobar que el valor en config.version sea exactamente igual a la que escribimos en el JSON alojado en el servidor.

En el juego, debemos tener ajustado a config.version como :

Y en el servidor, a la palabra clave “game_version” debemos fijar el mismo valor :

Al arrancar el juego solo debería mostrar el menú principal :

Si lo anterior sucedió en el juego, quiere decir que el código está trabajando sin falsos positivos, y aplicado en la vida real, querrá decir que el juego está al día.


  • Test 2 : La versión del juego es distinta a la del servidor (Actualización disponible)

Ahora haremos una prueba en el caso eventual de que estamos informando desde el servidor que hay una actualización disponible para el jugador.

En el juego, por ejemplo tenemos ajustado a config.version como :

Y en el servidor ya subimos el valor de “game_version”, puesto que hay una actualización disponible :

Al arrancar el juego, mostrará la alerta antes de mostrar el menú principal :

Si lo anterior ocurrió de la misma forma, entonces ya tenemos al código completamente funcional para nuestro juego.

Si el jugador tiene problemas de conexión, o simplemente no está conectado a ninguna red, el juego seguirá funcionando con normalidad, ya que el verificador está preparado para manejar esos errores eventuales.

NO OLVIDAR : En cada actualización que distribuyas a tus jugadores, debes ir actualizando el valor de config.version, de otro modo a los jugadores les vivirá saltando esta ventana de alerta xD.

El código de este tutorial lo puedes encontrar en mi repositorio de GitHub! Accede directamente al código desde el siguiente link :


Con todo esto dicho, clavamos la bandera en este punto señalando que el post está llegando a su fín. No olvides que si tienes dudas, no dudes ni por un segundo en consultarme :3

NOTA 1 : Ahora si. para saciar las dudas sobre las condiciones de mi editor de texto, el personaje del fondo en cuestión es Dia Kurosawa, miembro de la unidad “Aqours” en “Love Live! Sunshine!!”. En realidad poco y nada se ve, pero si a alguien le sirve esa información, pues excelente xD.

NOTA 2 : Puedes customizar el fondo a tu elección utilizando la extensión “editor-background” de Atom, el cual puedes descargar desde los ajustes del editor.


Mira el código de los posts anteriores en mi repositorio de GitHub!

Eres nuevo? Descarga el motor Ren’Py para que comiences a hacer tu propia Visual Novel!

  • Visita la web oficial de Ren’Py Presionando Aquí!
  • Link para copiar : https://renpy.org/

No has entendido algo sobre este post u otros de este mismo hilo? No dudes en comunicarte conmigo! Contactame mediante los comentarios o en mi Telegram personal!


Ahora, ¿qué habrá para el siguiente post? Hmm… ¡Ya sé! Profundizaremos algo que solo lo pasé como una pincelada. ¿Recuerdan que en el «Post #13» les enseñaba a como compilar un juego Ren’Py para Windows, Linux y Android? Pues en el siguiente post les enseñaré a empaquetar los Assets de juegos Ren’Py en paquetes RPA, para así evitar que los archivos estén a la deriva, y a la vista de los jugadores. Esto involucra en especial a las compilaciones de PC, ya que generalmente Ren’Py genera un comprimido ZIP con los recursos de Ren’Py, más los Assets de tu juego.

Nos vemos en la siguiente entrega, y si no nos vemos, pues vayamos al oculista joder >:V

¡Adiós a todos! Ah, y por favor, no me jodan por el background de mi editor, ¿vale? xD


Navega entre los posts de este hilo!

<< Ir al Post #19 | Ir al Post #21 >>

<< Eres nuevo? Click aquí para ir al Post #1 >>


CharlieFuu69 Creations! – ElectroBasicsYT

  • Tutorial
  • Programación | Programas, aplicaciones | Otros
6 Comentarios
  1. peter
    peter 1 año

    Excelente amigo

    1+
  2. Juanjo
    Juanjo 1 año

    Esta funcionalidad es muy util Charlie. Saludos

    1+
  3. ElectroBasicsYT Autor

    Gracias por el comentario Juanjo!! ^w^

    0
  4. MRX_
    MRX_ 1 año

    Excelente. Muy detallado.👍👍💯💯

    1+
  5. Avatar
    alejandro_lovera 10 meses

    Recupere mi cuenta, está parte de mi vida se llama felicidad

    1+

Contesta

CONTACTANOS

Esta es su red social de tecnología para compartir tus ideas y proyectos .Puedes enviarnos un correo si tienes dudas.Nos vemos

Enviando

Nuevo informe

Cerrar

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?

Create Account