Registrarse

[RPG - Scripting] [Escuela]Base Scripting Essentials - Clase 5

Estado
Cerrado para nuevas respuestas.

Jessie

What goes around, comes around

Clase 5 : Viewport y Overlay


Objetivo​

En esta clase se enseñará la importancia de un Viewport y de un Overlay durante la creación de interfaces. Además, se verá la manera correcta de crearlos, manipularlos y en un momento dado, ser eliminados.

Introducción​

En las últimas cuatro clases hemos visto como crear y manipular instancias, variables, y textos, esto nos será útil ya que a partir de esta clase aprenderemos a crear una interfaz simples.

5.1 Viewport​

Un Viewport es una ventana gráfica que ayuda a mantener los objetos visibles en orden. Rpg Maker XP y Essentials trabajan con el class Viewport, el cual permite mostrar imágenes y textos dentro de cierta porción de la pantalla sin tener que interferir con los demás elementos existentes.
Para crear un nuevo Viewport, primero se necesita definir una variable e iniciar el class Viewport en ella. Al tratarse de interfaces, es recomendable mantener el Viewport dentro de una variable global de instancia, aunque igualmente puede ser definida en una variable local sin problema. Luego de iniciar el Viewport, se necesita definir el valor del eje Z, normalmente las interfaces suelen usar el valor 99999 para el eje Z. Cuando se crean dos o más Viewports con el mismo valor en sus ejes Z, se dará prioridad según el orden en que fueron creados.



En el ejemplo anterior se ha creado dos Viewports, el primero inicia en el punto 0,0 y tiene el mismo tamaño de la pantalla del juego 512,384 (La imagen azul), mientras que el segundo inicia en el punto 50,50 y tenía el tamaño de 50,50 (La imagen amarilla). Al crear un Viewport, todos los elementos relacionados con este solo podrán ser visibles dentro de su mismo rango de visión, en el ejemplo anterior, si se define una imagen dentro del segundo Viewport, esta imagen solo será visible si se encuentra ubicada dentro del rango de este Viewport.

En Rpg Maker XP se tiene definido el module Graphics, el cual ayuda a definir y modificar varios aspectos gráficos en el sistema. Al momento de crear un nuevo Viewport, nos podemos basar en los métodos width y height para definir el ancho y largo del Viewport, para que este sea igual que el tamaño de la pantalla.

5.2 Métodos para Viewport​

El class Viewport, al igual que otros class definidos por el RGSS o dentro del Editor de Scripts del Rpg Maker XP, cuenta con varios métodos que ayudan a modificar su contenido.


5.3 Overlay​

Los Overlays, al igual que los Viewport, ayudan a definir elementos dentro de cierto rango de la pantalla, pero a diferencia del Viewport, los Overlays pueden ser definidos usando bitmaps así que no se requiere una dependencia al class Viewport.

Para poder demostrar la manera en que un Overlay funciona, usaremos el class BitmapSprite, el cual ayuda a crear y colocar una imagen en la pantalla. En clases futuras veremos un poco más a fondo el class BitmapSprite junto con otros class especializados para la creación de bitmaps.


5.4 Utilidad del Overlay​

De la misma manera en que el Viewport ayuda a mantener el orden entre varios elementos en la pantalla, el Overlay es útil para colocar elementos dentro del bitmap en el que lo hemos definido.

Para poder manipular el Overlay es importante tener en cuenta que lo que manejaremos será el bitmap que lo conforma, así que es necesario usar el método bitmap en el class BitmapSprite para agregar, editar y/o eliminar los elementos que se necesiten.


Una de las principales utilidades de un Overlay, es que se pueden añadir textos e imágenes a este. En Essentials, existen decenas de funciones definidas que ayudan a facilitar esto, agregando el texto bajo diferentes circunstancias, pero nos centraremos en las principales por ahora. Para añadir texto a un Overlay, se pueden usar una de las siguientes dos funciones, drawTextEx o drawFormattedTextEx.



Para añadir un texto al Overlay a partir de un Array, el cual contenga toda la información de los textos que se desean agregar, se puede utilizar la función pbDrawTextPositions.


En la pantalla del juego, así se vería el método anterior. El recuadro azul es el espacio que ocupa el Viewport en la pantalla y sobre ese Viewport, se encuentra definido el Overlay que contiene los textos.


En el ejemplo anterior, además de agregar un overlay para añadir textos, también se ha agregado un Viewport, para definir un color de fondo para la pantalla. Al usar el método tone en el Viewport, este tono tendrá una transparencia predefinida, para crear un fondo con un color solido, se usa el método color en lugar del método tone.


Para añadir imágenes a un Overlay, se puede usar la función pbDrawImagePositions, la cual cargará la o las imágenes requeridas y las añadirá sobre el Overlay.


En el ejemplo anterior, podemos ver como ambas imágenes serán mostradas dentro del rango del Overlay.


Para poder crear una interfaz simple, será necesario añadir ambos, textos e Imágenes. En la siguiente clase veremos como agregar diferentes tipos de bitmaps que no dependan de un Overlay.


Tarea de la clase 5​

Durante esta clase vimos como crear y usar tanto un Viewport como un Overlay.

Con el propósito de reforzar lo aprendido, se deberá realizar lo siguiente :

  • Crear una interfaz simple, usando uno o más Viewport, uno o más Overlay y usar ese Overlay para añadir textos e imágenes.

Esta Tarea se entregará desde discord, ya sea por el canal #tareas en el servidor CreadoresEssentials o mediante un mensaje privado.
Pueden usar capturas de pantalla para mostrar el código que han creado o mediante un archivo de texto con el código, además de una captura de pantalla con la interfaz simple que han creado. Todos los archivos deberán ser enviados juntos en un archivo .rar para poder facilitar su manejo.
Tienen como plazo límite el día Jueves 28 de marzo antes de que la siguiente clase sea publicada.

 
Estado
Cerrado para nuevas respuestas.
Arriba