Registrarse

[RPGXP] Fondos Animados (En movimiento)

Jessie

What goes around, comes around




Fondos Animados (En movimiento)






Introducción





¿Alguna vez han deseado colocar un gráfico de fondo en movimiento para sus interfaces, en lugar de una sola imagen estática aburrida?

Pues existe una manera sencilla de hacerlo, sin tener que agregar algún script o lista de utilidades adicional a su proyecto. El RGSS o Ruby Game Script System, trae ya definido una instancia llamada Plane (class), gracias a esta instancia es posible crear fondos usando únicamente una pequeña imagen como patrón.

Teniendo esto en cuenta, podemos aprovechar y brindar una función secundaría, la cual será hacer que nuestro gráfico de fondo obtenga el efecto de movimiento, ya sea hacía los lados o en diagonal.



Proceso






Para comenzar, lo primero que se necesita es llamar la instancia Plane(class), y esto lo hacemos de manera sencilla.

Código:
# Iniciamos la instancia dentro de la variable [B]bg[/B] y definimos el bitmap
bg = Plane.new
bg.bitmap = Bitmap.new("Graphics/Pictures/bg01")


De esta manera la instancia será iniciada y guardada en la variable llamada bg para poder manipularla luego.


Ahora, debido a que esta instancia solo requiere de un pequeño bitmap para ser usado como patrón, entonces será fácil usar algo sencillo como por ejemplo el siguiente patrón.




Lo que sucederá, es que nuestra imagen será colocada en la pantalla de manera continua, cubriendo todo el largo y el ancho de la pantalla. Así que se terminará viendo de esta manera.




La clase Plane(class), creará un patrón por toda la pantalla a partir del gráfico brindado. En el ejemplo vemos que un gráfico tamaño 48x48 será usado como patrón base.
Luego, al ser creado, se colocará por toda la pantalla, formando así un diseño con este mismo patrón.


Ahora para darle el efecto de movimiento, lo que tenemos que hacer es modificar los valores de las coordenadas de origen del bitmap, de ese modo al actualizar la información se dará la sensación de movimiento.

El método ox corresponde a la coordenada de origen x del gráfico, mientras el método oy corresponde a la coordenada de origen y del gráfico.

Para actualizar la información, es necesario realizar los cambios durante un ciclo o mediante un update del sistema actual.

Código:
bg = Plane.new
bg.bitmap = Bitmap.new("Graphics/Pictures/bg01")

# Inicia el ciclo
loop do
  bg.ox+=1
  bg.oy+=1

  Graphics.update
  Input.update
end


Al modificar las coordenadas de origen, se dará el efecto de movimiento, en este caso será en diagonal hacía arriba. Para cambiar la dirección en la cual el gráfico se moverá, solamente cambiamos la magnitud de las coordenadas de origen o simplemente modificar una coordenada en lugar de ambas.

Dentro del ciclo se colocará la acción o acciones que se deban realizar en la interface actual, por ejemplo seleccionar opciones en un menú.

En el ejemplo anterior, el fondo se vería así.




Hay que tener en cuenta que al momento de pausarse o romperse el ciclo, la animación se detendrá.



Conclusión





Ahora como han visto, es posible crear fondo animados sin ningún problema. Usando una instancia propia del RGSS.
Aunque el uso más común es para crear patrones a partir de pequeños gráficos, también es posible usar gráficos más grandes y nuestro amigo Plane se encargará de crear el efecto de movimiento, es solo cuestión de ser creativos.

Es algo simple, pero seguro dará más vida a las interfaces que usen para sus proyectos.

Saludos

 
Última edición:
Woah, si hubiera sabido esto en mis épocas de RPG Making... recuerdo que buscaba mucho cómo hacer algo así pero no encontraba (o tal vez no busqué lo suficiente)
¡Genial aporte, gracias!
 

GaboExtreme

El Ayudante Infinito
Excelente aporte es muy entretenido y epico en una batalla o solo por decoración felicidades gran aporte.
 

Jessie

What goes around, comes around
He editado el primer post para que sea más fácil de entender,.
Aunque es algo realmente sencillo, si tienen dudas acerca del tutorial, intentaré responderlas lo más claro posible.

Saludos.
 

Jessie

What goes around, comes around
No es cuestión de instalar algo.
La instancia Plane, ayuda a crear efectos para las imágenes de fondo, dependiendo el código que estés creando dependerá en donde lo coloques. por ejemplo si deseas hacer una interface simple, solo lo colocas al inicio y durante el loop principal usas los métodos ox/oy para mantener la animación constante.

Una interface simple :

Código:
class Mi_Pantalla

 def initialize
   bg = PLane.new
   bg.bitmap = Bitmap.new("Graphics/Pictures/triadbg")
  
  loop do 
      bg.ox+= 1
      bg.oy+=1
      if Input.trigger?(Input::C)
         #Cerrar pantalla al oprimir C
         bg.dispose
         break
      end
     Graphics.update
     Input.update
   end
end

end
Solo llamas está pantalla desde un cuadro de script o desde otra función o desde donde lo requieras.

Código:
Mi_Pantalla.new
Aunque por comodidad, se suele llamar dentro de una variable, aunque en este ejemplo especifico no es necesario.

Código:
var = Mi_Pantalla.new

De eso se trata el tutorial, sobre como muchos suelen pasar por alto la funcionalidad de esta instancia, y terminan con interfaces con fondos estáticos.
Así que para usarlo, primero debes pensar en donde lo necesitas colocar para que exista ese efecto de movimiento continuo.

Saludos.
 
Última edición:
Arriba