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


Like Tree6Gracias
  • 6 Post By JessWishes
 
 
Herramientas Desplegado
  #1  
25/03/2019
Predeterminado [Escuela]Base Scripting Essentials - Clase 5

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.

Imagen 01



Imagen 02



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.

Imagen 03



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.

Imagen 04



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.

Imagen 05



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.

Imagen 06




Imagen 07



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.

Imagen 08



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.

Imagen 09



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.

Imagen 10



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

Imagen 11



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.



Premios

 

Herramientas
Desplegado

Permisos para publicar mensajes
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los BB code están Activado
Los Emoticones están Activado
El código [IMG] está Activado
El Código HTML está Desactivado
Trackbacks are Activado
Pingbacks are Activado
Refbacks are Desactivado



Extra
Estilo clásico
La franja horaria es GMT +1. Ahora son las 07:50.