Mundo Maker
¡Bienvenid@ a Mundo Maker!

¿Quieres aprender todo sobre el RPG Maker?



Regístrate y forma parte de Mundo Maker.
Conectarse

Recuperar mi contraseña

Temas importantes
----------------------------------------
Páginas con recursos RPG Maker
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
Afiliados
Estadísticas
Tenemos 3818 miembros registrados.
El último usuario registrado es Srand.

Nuestros miembros han publicado un total de 86253 mensajes en 12295 argumentos.

[Tutorial] Hablemos de la perspectiva axonométrica (completo)

Ver el tema anterior Ver el tema siguiente Ir abajo

[Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por Pokepik el Dom Jun 10, 2012 10:50 am

Cómo crear perspectiva axonométrica

Aunque no os lo creáis, a la hora de hacer characters, tilesets, etc. es importante tener en cuenta qué ángulo axonométrico le queremos dar a nuestro juego. Para quien no sepa qué es eso creo que le quedará mas claro con la siguiente imagen.



En esta representación hay un cubo creado en un tileset cualquiera. En el primer caso su ángulo de perspectiva axonométrica es 0. Es un error usar ángulo 0 en mapas de RPG, ya que si el ángulo es 0 quiere decir que la vista desde la que se ve el mapa está al mismo nivel que el horizonte. Esto solo es aplicable en mapas de plataformas, donde realmente, el suelo que está pisando el chara no se ve porque está al mismo nivel que el horizonte. En los otros casos, lo normal es que en los tiles de RPG maker se use perspectiva axonométrica de 30 o 45 grados.

Así, tal y como he dicho, este ángulo corresponde al ángulo desde el que miramos las cosas. Variará según desde qué altura imaginaria estemos mirando el mapa. Partiendo de la imagen anterior, supongamos que tenemos alas y, por aburrimiento o lo que sea, estamos mirando un cubo. Si nos ponemos a volar y ganamos altura y continuamos mirando el maldito cubo, cada vez se parecerá más al segundo dibujo, y luego al tercero, y podríamos ir subiendo mas hasta donde se rustió Ícaro.



A la hora de crear los recursos, se tiene en cuenta el ángulo que le queremos dar, pero se aplicará bastante a ojo, normalmente, porque sinó en los tiles largos tardaríamos siglos.
Pero si no conseguimos hacer cuadrar el ángulo de algo con el tileset o si queremos ser muy meticulosos con eso, necesitaremos usar un poco la geometría para lograr hacerlo bien. Es lo que se llama hacerlo "de manera mas profesional".

Empezaré explicando como dibujar un cubo con diferentes ángulos, en concreto 45 y 30.
Se parte de un cuadrado y a éste se le prolongan los vértices, con los grados asignados, haciendo una espécie de proyección. Luego, aplicándole de rotación el mismo ángulo, obtenemos el cubo con la perspectiva que queríamos. En este caso particualar, la altura de la parte relativa de la pared que se ve del cubo, y el suelo, son iguales (la línea está justo en medio) y cada parte corresponde a 3/4 de la del cuadro original.



Con otros ángulos de hace de la misma forma, por ejemplo con aproximadamente 30 grados, sería de esta forma.



Ejemplo de uso, con un árbol sencillo

Partimos de un árbol muy sencillo, que cualquiera puede hacer.



Dividiremos el árbol en cuadros y rectángulos apilados y a cada uno le haremos la proyección tal y como ya he explicado. En este caso, lo haremos con 45 grados.



Limpiamos las líneas creando los cubos resultantes. Ahora parecerá tridimensional.



Evidentemente, el árbol es mas bien cilíndrico, por eso en vez de hacerlo por cubos tal y como se ha hecho en el paso anterior, es mejor intentar hacerlo con elipses. Haremos una elipse para cada una de las partes horizontales (una por cubo). Para saber la altura que tiene que hacer prolongaremos una línea desde cada uno de los cantos que he marcado con una redonda roja. Esta parte es la mas complicada porque hay un lío de líneas impresionante, así que uno debe tener muy claro cual es cual.



Es hora de quitarle tantas líneas. Comparando con el del cubo, el del cilindro quedrá de esta forma:



Y ésta será nuestra base para el árbol. Ahora es cuestión de pixelarlo de forma que quede bien, añadiéndole detalles y haciéndolo a nuestro estilo. Pongo el link debajo por si no se ve del todo.


http://s15.postimage.org/d87no1qpn/tutooxo10.png

Y ya tenemos nuestro querido árbol listo para ponerlo en el tileset.

Espero que os haya servido de algo esta cosa. ¡Saludos!


Última edición por Pokepik el Miér Jun 27, 2012 5:40 pm, editado 2 veces
avatar
Pokepik
Principiante
Principiante

0/3

Créditos 2134

Gracias : 4

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por Ivans el Dom Jun 10, 2012 11:55 am

muy bueno, es la primera vez que veo un tutorial de este tipo, hay froma de hacerlo a la inversa? saber de que ángulo están vistos mis tilesets?
avatar
Ivans
Principiante
Principiante

0/3

Créditos 232

Gracias : 15

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por ichcanziho el Dom Jun 10, 2012 12:36 pm

Muy buen turotirial para la creacion de tile set, yo veo "mucho trabajo", pero abra personas a las que le sera mucho mas util tu aporte, y gracias por compartir tus conocimientos Very Happy
avatar
ichcanziho
Novato
Novato

0/3

Créditos 97

Gracias : 2

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por orochii el Dom Jun 10, 2012 1:44 pm

Psss Ichcanziho, pruébalo y verás que no es tan complicado. Aparte, después de un rato, quizá no se haga necesario hacer toda la conversión. Lo importante creo es tener ésto como una herramienta para cuando se compliquen las cosas, como con figuras más complejas (el árbol fue un excelente ejemplo C:!!).

Y Ppik, excelente tutorial, me gustaron mucho los ejemplos, como ya habré dicho en el parágrafo anterior xD. Es una buena forma de abordar el deformamiento de las perspectivas y de comprender la torta de carne vista desde otro ángulo. Cómo su exquisitez se... oh perdón, estoy hablando con el estómago x'D.

En fin, que buen tutorial, y creo que ahora lo intentaré C:!!!,
Orochii Zouveleki

PD.: Porque no se me había ocurrido x'D... seh, Orochii es... poco creativo en su forma de hacer cositas C'8.
avatar
orochii
Reportero

0/3

Créditos 7469

Gracias : 369

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por PROmaster el Dom Jun 10, 2012 1:57 pm


XD XD

PD: Buen post, conocía el tema de la vista axonométrica, lo dí una vez de pasada en una clase de dibujo en el instituto. Qué recuerdos XD
avatar
PROmaster
Principiante
Principiante

0/3

Créditos 324

Gracias : 0

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por Pokepik el Dom Jun 24, 2012 4:49 pm

Ivans: La verdad es que nunca me había preguntado eso XD Quizá si lo cubizas y sigues los pasos del tutorial al revés llegues a una aproximación del ángulo.

Qué es la proyección paralela

En una proyección paralela, por lo tanto sin puntos de fuga, los objetos que estan lejos tienen el mismo tamaño que los que estan cerca. Las líneas principales son paralelas al eje. Eso significa que la axonometría queda definida por los ángulos en la retícula. Jugando con esa base se pueden hacer diferentes perspectivas para los juegos, y de hecho la proyección paralela es la que usan casi el 100% de os juegos RPG.
Los tipos de perspectivas dentro de estas propiedades que considero mas importantes son cuatro. Hay alguna mas, pero muy inusual, e igualmente las que se usan casi siempre son las dos primeras:



1) Normal (2 ejes superpuestos). Es la que expliqué en la primera parte del tutorial. Puede ser axonométrica u oblícua. Los RPG maker usan ésta perspectiva, mas concretamente 3/4 RPG.

2) Isométrica. Es un caso especial de axonometría en el que el ángulo entre dos ejes es 120º. A nivel de píxel la isometría es simplificada a 2:1

3) Boktai. Es una variante de la isométrica en la que el ángulo es de 90º y no de 120º. A nivel de píxel es 1:1

4) Ultima VII. Es igual que la Boktai pero girada 45 grados. Se puede pasar de una a la otra rotando.



Igualmente, nos centraremos en las dos primeras perspectivas, ya que como he dicho las otras dos son mucho menos usadas.

La impresión de 3D en 3/4 RPG y isometría

La perspectiva isométrica da una impresión 3D mucho mas fuerte que la normal de RPG. Esto se debe a cuatro motivos.

1) En la isométrica puedes ver tres caras del cubo, no solo dos.



2) Para la siguiente razón imagina una vista lateral de un simple paisaje.



Imagina que lo estas mirando desde dos puntos, uno mas alto y otro mas bajo.



Toda la información es reunida en el foco tal y como muestran las líneas azul translúcido de la siguiente imagen. Y las rojas serían las axonométricas. Fijé su separación mediante algunos puntos de expresión al azar que son iguales en los mismos en los dos ángulos de visión.



En el del lado izquierdo el ángulo axonométrico es 45º, uno de los mas usados en RPG, llamado en él 3/4 RPG. En el del lado derecho el ángulo es mas o menos 35º, que es el ángulo de visión que tiene la isometría.

Como se puede apreciar con la línea amarilla la diferencia en la desviación entre el axonométrico y la visión real es mas grande en el 3/4 RPG y mas ajustada en el isométrico. Por eso el ángulo isométrico no se ve tan artificial cono en el normal 3/4 RPG.

3) Siguiendo el mismo ejemplo, en el isométrico el foco está mas bajo que en el 3/4 RPG, como ya he dicho. Es mas natural mirar un paisaje desde un ángulo bajo, hay que tener en cuenta que la estatura de un humano es de 1,8 m de media. Para el ejemplo del 3/4 RPG habría que estar encima de algo o tener alas.

4) La última razón es sobre qué ejercita tus ojos. Comparando las rejillas:



El de la izquierda es muy estático y usa ángulos rectos una y otra vez entre los ejes. El de la derecha es mas dinámico y interesante.



Pero un buen artista de 3/4 RPG sabe compensar esas 4 características con sus habilidades, para saber donde disimular o romper esas reglas de la cuadrícula. Los tiles isométricos son además mas difíciles de hacer a causa de su ángulo. Pero la mejor ventaja de la isometría son los sprites; "reflejando" cada lado en 3/4 RPG necesitas hacer 3 direcciones y en isometría solo 2.

Las conclusiones que se pueden sacar sobre esto son, que para economizar tiempo,
esfuerzo (¿y dinero?):

- Si creas un juego con muchos personajes mejor hazlo isométrico.
- Si creas un juego con un mundo muy ámplio mejor hazlo con 3/4 RPG


Es por esto que muchos RPGs usan 3/4 RPG axonométrico u oblícuo y en cambio muchos juegos tácticos usan isometría.

Cómo hacer 3/4 oblícuo

El oblícuo es como el axonométrico pero sin tener en cuenta el ángulo de visión. Es el que tiene una desviación mas grande y por lo tanto el que se ve mas artificial. Lo bueno es que es facil crear tiles así, especialmente en tamaños muy pequeños (por ejemplo de 8x8)



Y hasta aquí la segunda parte del tutorial. Muy pronto, la tercera. Comentad ni que sea para que no tenga que hacer doble post XD Esta parte ha sido bastante teórica, a partir de aquí ya viene una parte mas práctica.


Última edición por Pokepik el Miér Jun 27, 2012 5:39 pm, editado 1 vez
avatar
Pokepik
Principiante
Principiante

0/3

Créditos 2134

Gracias : 4

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por Wecoc el Mar Jun 26, 2012 2:08 am

Vaya, con esto estoy aprendiendo mucho, sigue así Pokepik xD
Había oído hablar del Boktai, pero el Ultima VII ya no.

Boktai:

Ultima VII:

Al normal de RPG hay la variante en la que el eje Z es paralelo al plano de visión, que son los juegos con vista totalmente aérea y que suelen tener movimientos de cámara mas basados en la rotación XY, y luego los que tienen el eje Y paralelo al plano de visión que serían los de plataformas... Supongo que siguen siendo de proyección paralela aunque no lo tengo tan claro porque tienen "profundidad", pero no punto de fuga.

avatar
Wecoc
Administrador
Administrador



Créditos 12104

Gracias : 522

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por orochii el Mar Jun 26, 2012 6:58 am

Sip Wecoc, siguen siendo proyección paralela. Si no lo fuera, habría una fuga en los objetos que están más hacia los bordes. No sé si alguien recordará el GTA2, que tenía vista aérea. En él, a pesar de que nunca se dejaba de ver desde esa perspectiva, los edificios y algunas que otras cosas sufrían una deformación (probablemente usaban un nivel de 3D muy básico, como cajas de leche x'D).


Un tema muy interesante Ppik C:!!, espero la siguiente parte (a pesar que sólo veo las imágenes x'D, pero es que... mi tieeempooooo >8'D...).

Salut,
Orochii Zouveleki
avatar
orochii
Reportero

0/3

Créditos 7469

Gracias : 369

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por Pokepik el Miér Jun 27, 2012 5:37 pm

Wecoc: Cierto, y posiblemente aún haya alguna otra posibilidad. Gracias por postearlo.

La manera facil y la manera difícil
El Cubo

Ya dije en la primera parte como se hace de manera lo más acurada posible la proyección para partiendo de una cara conseguir un cubo axonométrico.
Con la perspectiva oblícua es aún mas fácil porque no se tiene que aplicar rotación. Se aplica la proyección de los vértices el ángulo que sea. Como es Oblícuo 3/4 seran 45º.
Luego se traza la desviación esta vez paralela al eje Y del cubo y se dibuja allí el resultado. El ancho es el mismo que el del original.



Este es el método complicado, pero podemos hacer una aproximación mas sencilla de la siguiente manera:
Supongamos x = 32
1) Empezamos con una línea de longitud x en el plano X.
2) Dibujamos el eje Y de una longitud (3/4)x = 24 si lo queremos hacer axonométrico y x = 32 si lo queremos hacer oblícuo.
3) Acabamos de hacer el recuadro.
4) Dibujamos el eje Z de la misma longitud que Y, debajo.
5) Acabamos de hacer el recuadro.
6) Rellenamos y limpiamos las línas.


en la imagen el ejemplo es axonométrico

¿Mas sencillo no?
Aún así calcular eso cada vez puede ser pesado.
Por eso va bien tener tabulados los cuadros según qué tamaño de x tengan.


la imagen está a tamaño real así que la podéis usar de plantilla

Éste método no deja de ser muy acurado como el otro, y aprevecha mas el hecho de que conozcamos que para el 3/4 y = (3/4)x
Pero claro, para otros ángulos se necesitará el método complejo.


Es interesante mencionar que hay que tener en cuenta como se pone la sombra al cubo. Dependerá de qué queremos destacar y por supuesto sobretodo dependerá de desde donde viene la luz.
Como la mayoría de casos la lux vendrá de arriba (Z), si suponemos uno de esos casos y miramos el ejemplo siguiente veremos que el primer cubo parece mas bien un cubo mientra que el segundo parece mas una habitación interior. Si la luz viniera de frente (Y) la sensación que nos daría sería justo la contraria.



Así, hay que tener en cuenta desde el primer momento este factor.

¿Qué es mejor 16x16 o 32x32?

Es importante el tema de la resolución, y para centrarnos mas en el maker, 32x32 y 16x16. Claro está que 32x32 es 2 veces el tamaño de 16x16. Para el número de píxeles, 32x32 (=1024) es 4 veces 16x16 (=256)
Eso implica mas trabajo a la hora de hacer el tile, 32x32 requerirá mas detalle. Por otro lado claro, al aplicar mas detalle, se conseguirá mas realismo, pero teniendo en cuenta que estamos creando un juego tenemos que considerar que quizá nos interese algo mas estilizado, mas sencillo o mas naturalista antes que algo muy realista.
Hasta aquí estas características son muy evidentes pero hay otras que se nos suelen escapar y que quizá nos hagan plantear mas si es mejor tirar con los 16x16 de los 2k/3 o con los 32x32 de los XP/VX/Ace.
Los frames de animación. Para poder hacer una animación fluida y suave, que no se vea cortada, si tu resolución es el doble de grande necesitarás muchos mas frames. Gastarás mucho mas tiempo si haces recursos para 32x32 que para 16x16. En este sentido, 2k se lleva la palma.

El Cilindro

Como ya mostré en la primera parte del tuto, lo único que hay que hacer para hacer el cilindro es dibujar un cilindro en cada cuadrado de nuestro cubo.



Si lo que queremos es una columna lo único que tenemos que hacer es apilar nuestro cilindro, porque nuestro cilindro base tiene una altura Z de 24 y por ejemplo la típica del RTP es de 3 tiles, así que será de 24x3(=72)píxels de alto.



Para comprobar que esté bien podemos hacer una proyección de esta manera:



Luego para el cilindro se nos presenta el problema del foco de luz otra vez, pero mas complicado. Se puede elegir un foco frontal (no confundir con pillowshadow) u oblícuo. Depende de cada persona pero cada uno tiene diferentes ventajas que el otro no tiene.
Frontal:
- Es mas facil y rápido de crear
- Es mas simétrico así que se puede aplicar mirroring entre un lado y el otro.

Oblícuo:
- Da un efecto tridimensional mucho mas logrado.




Yo recomiendo el frontal porque igualmente se pueden conseguir buenos resultados con apariencia 3D con él. También se pueden combinar aunque no se suele hacer.
Hay que saber utilizar tus habilidades de pixelartista como ventaja propia a la hora de crear el recurso.


Al final el tutorial se quedó en solo tres partes, no tengo nada mas que explicar XD
avatar
Pokepik
Principiante
Principiante

0/3

Créditos 2134

Gracias : 4

Volver arriba Ir abajo

Re: [Tutorial] Hablemos de la perspectiva axonométrica (completo)

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


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