LureasLun Feb 11, 2013 4:52 am
Usuario Nv3
Bienvenido a mi primer tutorial en este foro!
La finalidad de este tutorial es que aprendamos a construir y utilizar un "Parallax". Debemos Tener claro que hablamos de parallax refiriendonos a una imagen que insertaremos en nuestro proyecto y que utilizaremos como escenario.
En primer lugar procederemos a insertar el siguiente script en el editor de script de RpgMakerVX.
- Spoiler:
- Código:
#==============================================================================
# Sprite_Picture
#==============================================================================
class Sprite_Picture < Sprite
#--------------------------------------------------------------------------
# Update (Overwrite)
#--------------------------------------------------------------------------
def update
super
if @picture_name != @picture.name
@picture_name = @picture.name
if @picture_name != ""
self.bitmap = Cache.picture(@picture_name)
end
end
if @picture_name == ""
self.visible = false
else
fixed = @picture_name.include?("[FIXED]") ? true : false
self.visible = true
if @picture.origin == 0
self.ox = 0
self.oy = 0
else
self.ox = self.bitmap.width / 2
self.oy = self.bitmap.height / 2
end
self.x = @picture.x
self.y = @picture.y
# added
self.x += (self.ox - ($game_map.display_x / 8)) if fixed
self.y += (self.oy - ($game_map.display_y / 8)) if fixed
self.z = 50 + @picture.number
self.zoom_x = @picture.zoom_x / 100.0
self.zoom_y = @picture.zoom_y / 100.0
self.opacity = @picture.opacity
self.blend_type = @picture.blend_type
self.angle = @picture.angle
self.tone = @picture.tone
end
end
end
Nota: el script debe encontrarse por encima de "Main" como muestro a continuacion en la siguiente imagen.
Lo segundo sera crear un nuevo mapa en nuestro proyecto de las dimensiones que necesitemos, yo utilizare las predeterminadas que es de 17x13 Tiles por lo tanto recuerden que deben sustituir estas medidas por las que necesiten en su caso.
Teniendo lo anterior ya podemos proceder a crear nuestro mapa con nuestro editor preferido, yo utilizo Photoshop porque es con el que mas me familiarizo pero vosotros podeis tirar del que mas comodidad os proporcione a la hora de hacer recortes.
- Spoiler:
- Truco/Recomendacion (Photoshop): este nos proporciona un apartado de reglas, guias y cuadriculas para poder trabajar con mayor precision y que nosotros utilizaremos ademas para agilizar o reducir el trabajo. Si ya sabes como configurar estas caracteristicas del programa no es necesario que sigas leyendo este spoiler.
Para configurar este aspecto debemos ir a la barra de herramientas superior dirigirnos a "Edicion >Preferencias > Guias, Cuadros y Sectores".
Se nos abrira una nueva ventana con cuatro aspectos editables que son los siguientes, guias, guias inteligentes, cuadricula y sectores. Nosotros solo vamos a modificar el aspecto de la cuadricula.
A continuacion dejo una imagen señalando los aspectos a modificar para que veais como deberia estar configurado.
Recuerda aceptar y listo ya tenemos nuestro editor preparado para ponerno manos a la obra y por si no se sabe presionando CTRL+H activamos y desactivamos la cuadricula.
Procedemos a crear una nueva imagen de las mismas dimensiones que la de nuestro mapa creado para el proyecto pero como las medidas utilizadas por RpgMakerVX son distintas a las utilizadas en los editores de imagenes deberemos hacer una conversion de Tiles a Pixeles teniendo en cuenta que 1 Tiles = 32 Pixeles por lo tanto deberemos multiplicar el numero de Tiles utilizados para el Ancho por las dimensiones en pixeles de su unidad, que es 32, y lo mismo para la Altura. Por ejemplo el mapa que yo he creado era de 17 de alto por 13 de ancho por lo que la operacion matematica sera:
Anchura ( 17 x 32 ) = 544 px. <-- (Obtenemos las dimensiones en pixeles de la altura).
Altura ( 13 x 32 ) = 416 px. <-- (Obtenemos las dimensiones en pixeles de la anchura).
Altura ( 13 x 32 ) = 416 px. <-- (Obtenemos las dimensiones en pixeles de la anchura).
Por lo que mi nueva imagen tendra unas dimensiones de 544 x 416.
Una vez tenemos nuestro lienzo totalmente en blanco podremos ponernos a trabajar teniendo en cuenta que podemos utilizar cuantas capas deseemos para llevar a cabo nuestra obra maestra pero sin olvidar que RpgMakerVX nos permitira combinar solo 2 imagenes para construir un escenario, una que utilizaras como base o suelo y otra que estara por encima del jugador y que servira para objetos por los que el jugador ha de pasar por detras o debajo (casas, arboles, puentes, columnas etc...) por lo que no olvides organizar las capas de la mejor manera posible y si eres de los que tiran de muchas capas no olvides crear grupos y ponerle nombres a tus capas para que el trabajo no se te haga muy pesado.
No voy a poner paso por paso como voy colocando los objetos en el lienzo porque no lo veo necesario, en definitiva si habeis seguido mis consejos lo que deberiais tener como resultado son dos capas que funcionaran como dos imagenes distintas que se entrelazaran para formar un mismo escenarion.
Llegados hasta aqui solo nos queda guardar cada capa como una imagen, desactivando primero la visualizacion de la otra.
Comenzaremos por la imagen que se utilizara para los objetos que estaran por debajo del jugador y la guardamos en la carpeta "Parallaxes" de nuestro proyecto, yo suelo crear una especie de puzzle para evitar paranoias raras en el proyecto y asi es como me ha quedado.
Y Hacemos lo mismo con la imagen que utilizaremos para los objetos que estaran por encima del jugador y la guardamos en la carpeta "Picture" de nuestro proyecto, en este caso al nombre de la imagen deberemos añadirle la siguiente etiqueta " [FIXED] " de manera que quede asi, "[FIXED]Nombreimagen.png", porque aqui es cuando el script entra en juego, al reconocer la etiqueta [FIXED] en nuestra imagen activara una serie de parametros que inmovilizaran la imagen superior y la mantendran paralela a la capa inferior al jugador. Deberia quedarnos lo siguiente.
Una vez tenemos las dos imagenes nos cambiamos de programa y volvemos a nuestro proyecto, nos dirigimos a las propiedades de nuestro mapa y dentro de la nueva ventana que se nos abre buscamos la opcion "Graficos de panorama", buscamos y seleccionamos nuestra primera imagen, la capa del suelo y tildamos la opcion "Mostrar en el editor de mapas"
Ya casi terminando creamos un nuevo evento en cualquier parte del mapa tildando proceso en paralelo como opcion de detonante.
A continuacion en el guion del contenido del evento añadimos una nueva linea de comando ordenando que se muestre una imagen en el mapa y dejamos la siguiente configuracion.
Acto seguido añadimos otra linea de comando y le ordenaremos la accion de Borrar evento para evitar retrasos y otros problemas a la hora de mostrar la imagen. Esta accion tambien se encuentra en la segunda pestaña de comandos.
Aplicamos y aceptamos, ya tenemos todo configurado para que las dos imagenes se combinen pero nos falta una ultima cosa y es otorgarle permisos al jugador para que se pueda mover con cierta libertad por nuestro Parallax. Para hacer lo siguiente necesitamos dirigirnos a la barra de herramientas superior del programa y clicar en el icono de edicion de permisos
Utilzando la pestaña del "TileE" desplazamos el navegador hasta llegar a la parte inferior y modificamos dos "Tiles" al azar cosa de que uno sirva para bloquear el paso al personaje y otro para otorgarselo.
- Spoiler:
- Truco (Permisos): Si estas utilizando o quieres utilizar los mismos Tiles que uso yo para organizar la libertad con la que el jugador puede desplazarse en el Parallax a continuacion dejo una plantilla que utilizo para facilitar mas el trabajo.
Recomiendo utilizar una plantilla para facilitar el trabajo, es cuetion de dirigirnos a la carpeta System, del directorio donde esta instalado el programa e intercambiar el TileE por la plantilla que en mi caso la llamo "Tile9" .
Volviendo a nuestro querido RpgMaker y ya con nuestra plantilla instalada como TileE llego la hora de dibujar las zonas por las que nuestro querido heroe se movera en nuestro nuevo y casi recien estrenado Parallax
Hecho lo anterior nos dirigimos de nuevo a la carpeta System del directorio donde se encuentra instalado el programa y revertimos el anterior paso, intercambiar el TileE por la plantilla o Tile9, mas que nada para que no se queden esas dichosas y malditas "X" por todo el mapa.
Y para finalizar, mi enhorabuena por haber llegado hasta este punto y no haber muerto en el intento, a continuacion si todo ha salido bien deberiais tener un resultado parecido al del video.
Espero que os haya gustado mi primer tutorial para el foro, he intentado resumir y hacerlo lo mas sencillo posible para que los recien iniciados puedan familiarizarse bien con esta tecnica llamada "Parallax Mapping", que no te sepa a poco porque en RpgMakerVX hay mas posibilidad aun con respecto a este sistema de mapeo, que encantado os enseñare en un futuro no muy lejano.
Última edición por Lureas el Lun Feb 11, 2013 5:09 am, editado 1 vez