¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 Tutorial: HUD Personalizada el Dom Oct 30, 2016 8:30 am

Reputación del mensaje :100% (3 votos)

Faye Valentine

avatar

A Petición de: @Ledai

Nivel: bajo-medio



Introducción: oh yeah



Aquí estoy yo de nuevo, en forma de tutoriales. Se podría decir que estoy on fire.

La señorita @Ledai ha sugerido lo siguiente:

@Ledai escribió:[...]Cómo hacer una barra de vitalidad (o lo que sea) personalizada.
Por ejemplo, para aplicarla a un sistema de batalla hecho por enguine o etc.

Todo bien. Sucede que durante todo el tiempo que estuve haciendo los otros tutoriales antes de ponerme a hacer este, estuve pensando acerca del asunto. No quería hacer una HUD simplona, como con corazones o con números únicamente, quería hacer una barra de vida que tuviera animación al momento de decrecer. ¿Cómo podría hacer esto? Mi pensamiento instantáneamente fue "porcentajes". Ahora bien, cómo haría que esa barra de vida decreciese o aumentase según ese porcentaje. ¿Qué buena pregunta, no? Dejaré que la descubráis más adelante.



Paso 1: Creación de Gráficos



Crea el gráfico que usarás para tu barra. El diseño y tamaño es cosa tuya. El único requerimiento será el siguiente: tomarás el tamaño del gráfico y lo multiplicarás por 2, el valor que te de lo colocarás en la anchura del lienzo. Para esto puedes utilizar GIMP o Photoshop. Si utilizas Paint o cualquier otro editor de gráficos puedes crear una imagen vacía con la anchura que calculaste, y pegar la imagen allí. Eso sí, la imagen tiene que estar todo a la derecha, dejando así la mitad del espacio a la izquierda. Si vas a colocar la barra en la derecha, en vez, entonces colocala todo a la izquierda, dejando la mitad del espacio a la derecha.

Solo para que entendáis mejor, si vuestra imagen mide 120x20, el lienzo será de 240x20, así tu gráfico ocupará 120px y habrán 120px libres. Con eso me explico lo suficiente.



Paso 2: Configuración y Cálculo



Ahora es tiempo de matemáticas, pero no os preocupéis, no tendréis que hacer más nada que reemplazar valores, ya yo he escrito el código por vosotros.

Tendremos que saber primero los valores que tomaremos, los cuales tendrán que ser 2: el valor total/máximo, y el valor actual. Yo utilizaré como ejemplo la vida del actor 1.

Utilizaremos el siguiente código en un evento común, en proceso paralelo.

Código:
$game_variables[61] = $game_actors[1].hp
$game_variables[62] = $game_actors[1].mhp
$game_variables[63] = ($game_variables[61]*100) / ($game_variables[62]).round

Explicaré el código para el que ve puras letras chinas allí:

Variable 61 es igual a: vida actual del actor 1
Variable 62 es igual a: vida máxima del actor 1
Variable 63 es igual a: Variable 61 multiplicado por 100 y dividido por Variable 62, redondeado.

Ese cálculo que hicimos guardará el porcentaje actual (sin decimales) de la vida del actor número 1. Al estar en proceso paralelo se estará actualizando constantemente.

Código alternativo para los que no gustan de utilizar variables / tienen demasiadas variables en su juego (igual usaremos una):

Código:
a = $game_actors[1].hp
b = $game_actors[1].mhp
$game_variables[63] = (a*100) / (b).round

Se verá así entonces:


Ya tenemos nuestro porcentaje, ahora vamos a la parte divertida.

Primero, aseguraos de haber mostrado la imagen en el mapa con un comando de Show Picture | Mostrar Imagen. Ahora crearemos otro evento común con el siguiente código:

Código:
screen.pictures[ID].move(orígen, x, y, zoomX, zoomY, opacidad, mezcla, espera)

Cada valor significa:

@Faye Valentine escribió:
>Orígen: 0 = Arriba-Izquierda, 1 = Centrado
>X: Coordenada X
>Y: Coordenada Y
>Zoom X: Zoom horizontal. Default: 100
>Zoom Y: Zoom vertical. Default: 100
>Opacidad: Rango de 0-255
>Mezcla: 0 = Normal 1 = Añadir 2 = Multiplicar



Este código es es el comando Move Picture | Mover Imagen pero versión script. Lo hacemos así porque nuestro querido maker no posee la opción de manipular el zoom de una imagen según una variable. Ahora reemplazaremos valores, pero en el valor de Zoom X, lo que haremos en vez, será colocar la variable 63, o la que hayáis utilizado para guardar el resultado del porcentaje.

Por ejemplo:


Código:

screen.pictures[3].move(1, 0, 65, $game_variables[63], 100, 255, 0, 20)



Ahora tendremos nuestro segundo evento común así:

¿Por qué la segunda llamada a script? Más adelante veremos Ópalo Guiño


Procurad que el orígen sea centro y que coloquéis la X en 0 en caso de ser Ace, -mitad en caso de XP (si mi imagen mide 64, colocaremos la coordenada X en -32)

Y hemos terminado. ¡Hora de ver el resultado!




Bonus: Efecto de Arrastre



Podemos darle un efecto más elegante y moderno a nuestra HUD haciendo que tenga un efecto de arrastre. No sé como explicarlo en palabras, así que utilizaré la vieja regla de "una imagen vale más que mil palabras":


Esto se logra tomando el gráfico que hemos creado y pintándolo de un solo color sólido. El que vosotros queráis, pero se usa comunmente el rojo ya que representa algo "negativo", que en este caso será la vida sustrayéndose. Ahora solo llamaremos la imagen con las mismas coordenadas y valores que la de nuestra barra de vida, con la diferencia que tiene que ir debajo. Por tanto si nuestra imagen tenía de ID 5, por ejemplo, esta barra tendrá que tener ID 4.

Ahora simplemente cogemos el código que usamos más arriba para cambiar el tamaño de la barra y lo pegaremos en otro comando de llamar pictures, o lo colocaremos en la misma llamada, pero debajo. Da igual. Lo importante es cambiar el ID en el código para que sepa cual es cual. El siguiente paso es hacer que el valor de espera sea más alto que el de la barra de vida, así se tardará más en cambiar su tamaño y por tanto generará este efecto de arrastre.

Si jugáis con los valores de espera podéis hacer algo como esto:


La diferencia es que la barra de vida decrece instantáneamente, mientras que la barra de arrastre lo hace gradual, mientras que en la imagen que os mostré arriba ambas son graduales.



Bonus: Compatibilización con XP



Y como no, si aún hay muchos usuarios del XP y la señorita que pidió este tutorial utiliza XP, sería un poco tonto de mi parte no compatibilizar este tutorial con esa versión de antaño =)

Debo admitir que aquí sí fue un quebradero de cabeza, no porque no supiera cómo hacerlo sino que el XP tiene el gran defecto de tener una caja de Call Script | Llamar Script diminuta, lo que causa que la mayoría de las veces no puedas escribir un código de una línea entero, y se corte. Cuando se corta genera errores de sintaxis, y no funciona obviamente. Por tanto y cuanto tuve que darle mil vueltas al asunto hasta que finalmente logré una forma de poder hacerlo, y esa fue utilizando 'shortcuts' o atajos. Gracias a Wecoc por enseñarme qué eran los atajos, no sabía ni que existían.

El código para calcular el porcentaje será así:

Código:
a=$game_variables[1]
b=$game_variables[2]
$game_variables[3]=(a*100)/(b).round

Hago nota de que tenéis que otorgar el valor del HP y MHP a las variables X y Y (1 y 2 en mi caso) manualmente mediante un Operaciones de Variable.

El código para mover la imagen será así (atención: será super rebuscado):

Código:
a=0 # Espera
b=0 # Orígen
c=0 # X
d=0 # Y
e=100 # Zoom X
f=100 # Zoom Y
g=255 # Opacidad
h=0 # Mezcla
i=$game_screen.pictures[ID]
i.move(a,b,c,d,e,f,g,h)

@Faye Valentine escribió:
>Orígen: 0 = Arriba-Izquierda, 1 = Centrado
>X: Coordenada X
>Y: Coordenada Y
>Zoom X: Zoom horizontal. Default: 100
>Zoom Y: Zoom vertical. Default: 100
>Opacidad: Rango de 0-255
>Mezcla: 0 = Normal 1 = Añadir 2 = Multiplicar



Bonus: compatbilización Con MV



Y tras trastear un rato con el MV he podido hallar la manera de compatibilizar este tutorial con los métodos del MV, que ya sabéis que usa javascript y no RGSS.

Código para calcular el porcentaje:

Código:
$gameVariables.setValue(61, $gameVariables.value(61) * 100);
$gameVariables.setValue(63, $gameVariables.value(61) / $gameVariables.value(62));
Esto irá en un comando de Llamar Script. Recordad utilizar una operación de variables para darle el valor del HP actual, y otra para el HP máximo. Yo he utilizado la variable 61 para el HP actual, y la 62 para el máximo, mientras que el 63 será la que posea el valor del resultado final, que es el que utilizaremos.


Código para mover la imagen:

Código:
$gameScreen.movePicture(1, 1, 0, 65, $gameVariables.value(63), 100, 255, 0, 40)
(Esto también irá en un comando de Llamar script)



Créditos: no requeridos

*Este tutorial fue creado en RPG Maker VX Ace y compatibilizado para RMXP. Los códigos presentados no funcionarán en MV y en VX se tendría que hacer las pruebas necesarias.



Última edición por Faye Valentine el Lun Oct 31, 2016 7:37 pm, editado 1 vez

#2 Re: Tutorial: HUD Personalizada el Dom Oct 30, 2016 5:14 pm

Vala

avatar
Me encantó el tutorial, como siempre. Y creo que lo más llamativo es el efecto de "arrastre", como vos lo llamás. Es mucho más vistoso hacerlo así.
Como siempre, Faye, muchas gracias por compartirnos tus saberes Ópalo Contento

Saludos,
Vala.

#3 Re: Tutorial: HUD Personalizada el Dom Oct 30, 2016 6:49 pm

Reputación del mensaje :100% (1 voto)

Ledai

avatar
Wiii!!, Sí señor, Eso es un gran aporte!!!... Y lo mejor es que:

Ópalo Reputación XDDD




Entérate de todas las novedades

#4 Re: Tutorial: HUD Personalizada el Dom Oct 30, 2016 10:17 pm

Tomate

avatar
¡Wow! Sigo asombrado, siento que ya no tengo nuevas formas de darte las gracias, @Faye Valentine. No sé...aunque suene en plan cómico, creo que deberías construir un monumento a tu nombre. Ópalo Aplaudiendo

Te agradezco mucho el hecho de incluir el gif para ver el resultado y en movimiento...¡Qué buena barra personalizada! ¡Y ese efecto de arrastre quedó muy profesional. He quedado sorprendido con la cantidad de cosas que puedes lograr con el motor del Maker...¡Me imagino las genialidades que encontraremos en tu proyecto actual!

Entiendo perfectamente lo que has expuesto pero, no logro dejar de preguntarme si durante este lapso de tiempo te has puesto a aprender un poco de RGSS. Porque pienso, desde mi ignorancia, que sin esos pequeños códigos y "llamadas de script" sería imposible hacerlo ¿no?

¡Te debemos un monumento! Ópalo Reputación

#5 Re: Tutorial: HUD Personalizada el Lun Oct 31, 2016 7:45 pm

Faye Valentine

avatar
El tutorial se ha actualizado para añadir compatibilización con el RPG Maker MV



Muchas gracias a todos por vuestros comentarios y es un placer ayudarles.

@Tomate: no realmente. Es decir, no es que me he puesto a estudiar RGSS/Javascript como tal, pero sí me he puesto a aprender algunas cosillas básicas. Realmente lo que sé es solo útil en llamadas de scripts, al momento de escribir código real no sirven los métodos que llamo, al escribir código ya tienes que utilizar clases, superclases y todo lo que conlleva un lenguaje de programación.

Sin embargo sí que me he puesto a aprender trucos con el RGSS/Javascript para de tal manera acoplarlos con mis engines, que ya sabéis que la mezcla de engines y scripts es de lo mejor que hay. Personalización + Poder.

Y no serían imposibles algunas cosas, pero otras sí. Por ejemplo, la operación para sacar porcentajes la puedes hacer en el RPG Maker fácilmente, pero en el juego cuando evalúes el valor, te arrojará 0. ¿Por qué? Porque el RGSS no soporta decimales, entonces por un motivo que desconozco el valor se transformará en 0. Por eso en mi código, no sé si lo habéis notado, incluyo la función ".round", que redondea el número, haciendo que el maker entonces sí pueda reconocer su valor.

En el MV aún no he probado si esto sucede o no, al construirse con javascript. No debería ocurrir esto, pero de todas maneras resulta más comodo haciéndolo mediante scripts, que estar copiando y pegando comandos, cuando puedes escribir todo de un tirón.

Saludos.

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.