class_6

La App Makers

Qué tal todos? Espero que estén muy bien para recibir este post, ya que ahora aumentaré un poquito la dificultad de todo esto.

Hoy les enseñaré a usar las Transformaciones de Posición básicas que trae por defecto el motor, y también, Transformaciones de Posición personalizadas en el código!.

A LA CARGA!!!


1. TRANSFORMACIONES DE POSICIÓN POR DEFECTO EN REN’PY

Las Transformaciones de Posición tienen como objetivo dentro del código, señalar la ubicación de ciertos objetos en la pantalla, tales como Sprites, otras imágenes o texto que queramos mostrar dentro del escenario de juego. Ren’Py dispone de Transformaciones de Posición por defecto en el código del mismo motor, por lo que si nuestras necesidades de ubicar objetos es minimalista, pues esto nos viene bastante bien.

1.1 QUÉ TRANSFORMACIONES DE POSICIÓN PUEDO USAR? :

Ren’Py dispone de ciertas transformaciones de posición por defecto, que nos sirven para poder fijar objetos en la pantalla, sin requerir mucha personalización. Estas transformaciones son las siguientes :

  • truecenter : Centro exacto de la pantalla.
  • center : Centro inferior de la pantalla.
  • left : Esquina inferior izquierda.
  • right : Esquina inferior derecha.
  • top : Centro superior de la pantalla.
  • topleft : Esquina superior izquierda.
  • topright : Esquina superior derecha.

Estas posiciones son en su mayoría, para alinear un objeto (Centrarlo respecto de un punto).
No hay problemas grandes al usarlas ya que como vienen predefinidas en el código del motor, solo basta con declarar el argumento de la posición deseada.

1.2 USANDO LAS TRANSFORMACIONES DE POSICIÓN POR DEFECTO :

Ha llegado el momento de utilizar las transformaciones de posición en nuestros scripts. Debes tener en cuenta que estas transformaciones solo se pueden usar en la capa de juego, esto significa que solo funcionan dentro de los diálogos al interior de un label.

[Screenshot Paso 1]

Paso 1 : Primero que todo, debemos tener una imagen que fijaremos dentro de la pantalla de juego. En este caso, ocupamos de ejemplo el Sprite sonriente de nuestra personaje “Kaori”, el cual será fijada en algún punto de la pantalla.

[Screenshot Paso 2]

Paso 2 : Por defecto, cuando no le decimos al código de dónde posicionar el objeto en la pantalla, lo ubica por defecto en center (Centro inferior de la pantalla), pero si le ordenamos al código de que “X” objeto se ubique en una “Y” posición, Ren’Py lo interpretará y lo ubicará en la posición que le ordenamos.

Para definir la posición de un objeto, debemos llamar al objeto en el código de los diálogos con show, más la etiqueta del objeto. Ahora para definir la ubicación, declararemos la posición de este modo :

at [argumento]

Desglosemos : at es la propiedad que toma el argumento de transformación en el código, y [argumento] es el nombre de la transformación (Los que puse en la lista del ítem anterior), que en este caso señala al código que “X” objeto se ubicará en una “Y” posición dentro de la pantalla.

Como ejemplo, haré que el Sprite de Kaori aparezca en el área Izquierda de la pantalla, por lo que debo llamar al Sprite, nombrar la propiedad de ubicación y agregar una disolución para que no aparezca de forma abrupta (Opcional) :

show kaori_sonriente_1 at left with dissolve

El cual, se nos verá así si arrancamos el juego :

Así de sencillo es definir la ubicación de un objeto en la pantalla!.

Espera, crees que esa lista de ubicaciones se queda corto para todo lo que quieres hacer en tu proyecto?. Si es así, te enseñaré a ocupar el ATL para definir tus propias posiciones en la pantalla, pero te advierto que esto tendrá un poco más de complejidad. Sigue leyendo!.


2. TRANSFORMACIONES DE POSICIÓN PERSONALIZADA MEDIANTE EL USO DEL “ATL”

Para introducirte en esto que es algo extremadamente nuevo para ti, ve poniendo un poco más de atención.

El “ATL” (Animation and Transformation Language) es el “Lenguaje” para animar objetos o hacer transformaciones personalizadas dentro del entorno de Ren’Py.
En la mayor cantidad de veces se concurre al ATL para poder satisfacer necesidades que nuestro propio juego nos exige, o bien, se pueden animar objetos para que el juego sea más pintoresco y así mismo, ofrecer una mejor experiencia de jugador.

Una de las tantas funciones del ATL, es el interpretar coordenadas, convirtiendo la pantalla en un plano cartesiano bidimensional.

Para describir coordenadas dentro de la pantalla, se utiliza el Eje X y el Eje Y de nuestra pantalla, de las cuales sus coordenadas se pueden expresar en Números Enteros (Ej.: 0, 1, 2, 3, etc.), o bien, Números de Punto Flotante (Ej.: 0.2, 0.6, 0.9, etc.).

#OffTopic : En lo personal, me agrada usar números de Punto Flotante para expresar coordenadas u otros parámetros numéricos. El uso de Números Enteros se usa cuando queremos determinar las coordenadas como pixeles.

A continuación, te pondré una imagen que asimilará una pantalla, solo que esta tendrá la interpretación como plano cartesiano, con Números de Punto Flotante :

Al expresar las coordenadas de nuestras pantallas en Números de Punto Flotante, los ejes se limitan a una longitud máxima de 1.0, su centro en 0.5 y su origen en 0.0.

Ahora, les mostraré un ejemplo de crear una Transformación de Posición personalizada en nuestro código!. Continúa leyendo para que te enteres de cómo se determinan coordenadas usando el ATL!.

[Screenshot Paso 1]

Paso 1 : Primero, debes mantener  todo ordenado. Crea un nuevo archivo con extensión .rpy que en este caso, será destinado exclusivamente para crear tus propias transformaciones!.

Ahora, comenzaremos a hacer maravillas para ubicar objetos. Si quieres definir una transformación con ATL, debes hacerla de la siguiente forma :

transform logotipo_centrado:

    xpos 0.5 ypos 0.5

Desglosado : transform es la propiedad que recoge y expresa una función (En este caso la función es una Transformación de Posición), y logotipo_centrado es la etiqueta con la que podemos llamar a esa transformación.

Luego de crear la transformación con las coordenadas deseadas, debes regresar al archivo de tu historia (script.rpy).

[Screenshot Paso 2]

Paso 2 : Esto va a tu propia elección según como quieras añadir objetos en tu pantalla de juego. Escoge una imagen que necesites agregar a tu pantalla de juego. Lo ideal es que esa imagen esté definida previamente para así ocupar solo su etiqueta.

Por ejemplo, tengo definida una imagen que es el logotipo de Ren’Py, y pues quiero agregarla en la pantalla de juego con las coordenadas que agregué usando el ATL (xpos 0.5 ypos 0.5). Entonces debemos llamar a la imagen con show, junto a la etiqueta de la imagen, y la propiedad at para llamar a la etiqueta de la transformación. Mira como se hace :

show logotipo_renpy at logotipo_centrado

Dentro del editor de texto, se verá así :

De la cual, al arrancar el juego se verá así :

Te diste cuenta que no quedó al centro de la pantalla?. Eso se debe a que xpos e ypos toman como referencia la esquina superior izquierda de tu imagen u objeto. Si quieres que esté completamente centrado, reemplaza el uso de “xpos / ypos” por “xalign / yalign,” que se escribiría así :

transform logotipo_centrado:

    xalign 0.5 yalign 0.5

Y entonces, la imagen ahora estará exactamente en el centro de la pantalla (El centro es X = 0.5 Y = 0.5) :

Excelente!!!. Has aprendido a ubicar objetos dentro de la pantalla con las Transformaciones de Posición por defecto y usando el Lenguaje de Animación y Transformación!!!.
En este punto ya tienes lo suficiente para avanzar un poco más en la creación de tu juego, así que sientete orgulloso(a) de ti mismo(a)!.


Bieeeen!. Declaro al post #6 oficialmente finalizado!!!.

Espero que hayas entendido el cómo ubicar objetos de las dos formas que te mostré. Si hay algo que no entendiste, no dudes en comunicarte conmigo!.

NOTA : Es posible que la App Makers no pueda redireccionar correctamente a un link, o puede que no esté preparado para descargar archivos. Intenta abrir los siguientes links en un navegador como Google Chrome.

Entra a la web de Ren’Py y descarga la última versión del motor!

También estoy desarrollando una Novela Visual!. Visita el blog de mi juego y entérate de mi bitácora de desarrollo!

Todavía tienes dudas?. Hablame al interno por Telegram!

Siguiente post?. Les enseñaré algo que convertirá tu juego, en algo más entretenido e interesante. Con esto me refiero a los Menús de Elección para que el jugador haga toma de decisiones dentro de la historia!!!. Me despido de todos ustedes. Piquen código!!!.


Navega entre los posts de este hilo!

<< Ir al Post #5 | Ir al Post #7 >>

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


ElectroBasicsYT – CharlieFuu69 Creations!

  • Tutorial
  • Programación | Programas, aplicaciones
2 Comentarios
  1. Daniel01
    Daniel01 2 años

    Se va agregando complejidad, detalle pero a la vez bien explicado.

    1+
    • ElectroBasicsYT Autor
      ElectroBasicsYT 2 años

      Eso es verdad ?, poco a poco hay que incrementar la dificultad. Bueno, después de todo, mientras más complejo se torne el código, más bonito se verá para el jugador ?.

      Saludos Dani!!! Gracias por comentar!!! ✌️✌️

      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