sábado, 9 de abril de 2016

Hierarchy o Jerarquia en Spriter

Hola a todos, en esta ocasión nos toca ver la jerarquía que maneja Spriter, aquí nosotros podemos ver como se va entrelazando todo lo que vamos haciendo, por ejemplo la asignación de imágenes a los huesos o los propios huesos, aquí podemos renombrar o también indicarle que imagen corresponde a un hueso en especifico, como se menciona la jerarquía es ver quien esta arriba del todo y a que grupo corresponde, sin mas empezamos.

1.- La jerarquía se encuentra en la misma posición que el Z - Order, aquí podemos ver los sprites, huesos y asignaciones que vamos haciendo, por ejemplo pondré 2 de las imágenes de mi personaje y visualizare la jerarquía, de momento no veré su utilidad solo que están colocados aquí.




2.- Podemos ver mejor al realizar un esqueleto por ejemplo creare uno para la cabeza y el cuerpo y podre ver que los huesos dependen uno de otro.



3.- Podemos renombrar los huesos aquí para tener un mejor orden de lo que vamos haciendo por ejemplo.



4.- Podemos asignar aquí que imagen queremos que corresponda a el hueso, por ejemplo moveré la cabeza al hueso cabeza para asignarlo, puedo comprobar que lo hizo al rotar mi hueso asignado.




5.- Así existe otra forma de asignar las imágenes a nuestros huesos, ademas la ventaja es que tenemos un orden especifico y ademas la conexión de los huesos es la misma incluso mejor, es como te vayas acomodando a usar el programa, si intentas asignarlo con B, podrás ver en la jerarquía que hace lo mismo, listo eso es todo por este tutorial.

Practica cada vez lo harás mejor, recordar que puedes ayudar al sitio dándole clic a la publicidad ya que así me ayudas por el esfuerzo y me entra motivación para seguir avanzando con el sitio, saludos.



Asignando Huesos a las Imagenes en Spriter

Hola a todos, en el anterior tutoral aprendimos a realizar los esqueletos y crear huesos, ahora en este ejemplo aprenderemos asignar los esqueletos a nuestras imágenes, sin mas comenzamos.

1.- Primero tendremos que mandar las imágenes que utilizaremos, para este ejemplo utilizare 3, la cabeza, cuello y cuerpo, puedes poner todas las imágenes e ir probando con lo que vayas aprendiendo, bien entonces lo coloco en el canvas.




2.- Establecemos nuestros puntos de pivote para cada imagen.

3.- Ahora unimos las partes, recuerda que si no están bien unidas las imágenes podemos usar el Z - Order para colocarlas bien.



4.- Ahora a crear los huesos, sabes que el personaje lo componen 3 imágenes, entonces pondremos 3 huesos, recuerda que el principal que moverá todo el cuerpo es la columna, encontraras situaciones que no necesariamente sea así pero en esta ocasión si, entonces empezaremos del cuerpo y seguido del cuello, antes que coloquemos los huesos para que no se nos muevan las imágenes siempre le podemos poner una restricción para que no se muevan a la hora de poner nuestros huesos para ello en la parte de arriba hay un botón que dice Lock Sprites le damos ahí para que no se muevan, recuerda quitarlo cuando termines.




5.- Siempre probamos que hayamos hecho bien los huesos rotando individualmente para que la conexión sea correcta.



6.- Le damos Ctrl + Z para dejarlo como estaba, ahora si viene la parte de asignación de los huesos a las imágenes, primero necesitamos seleccionar el hueso, empezaremos con el hueso del cuerpo, lo selecciono hasta ponerlo en color naranja, luego le daré la tecla "B" sin soltar, esto hará que la imagen se haga transparente, una vez que mantengamos presionado B, con el clic izquierdo seleccionamos la imagen para asignarlo, podemos ver que se selecciono porque recupera el color original mientras las demás se mantienen transparentes, cuando lo asignemos soltamos B, probamos rotando el hueso para ver si quedo bien.




7.- Haremos lo mismo con el cuello y con la cabeza, tendremos que seleccionar el hueso que corresponde al cuello y asignarlo como explico en el paso 6, lo mismo para la cabeza con el hueso superior, va a ver ocasiones que deberás asignar 2 imágenes o mas, ejemplo, que cuando asignes el hueso de la cabeza, este contenga cabello y un sombrero ahí tendrás que seleccionar 3 imágenes al mismo hueso.




8.- Ahora si rotamos individualmente para ver nuestro resultado, listo eso es todo para este tutorial.



Practica mucho, cada vez lo harás mejor, recuerda que puedes ayudar al sitio dando clic en la publicidad, ya que con eso me veo recompensado por el esfuerzo de crear los tutoriales y motiva a seguir adelante, saludos.



Creando Huesos en Spriter

Hola a todos, en esta ocasión nos toca la parte de la creación de huesos, esta parte es una de las mas importantes después de la animación también, pero aquí sera la parte que definirá si hicimos un buen trabajo a la hora de ya hacer nuestra animación porque si no creamos bien nuestros huesos no podremos animar correctamente, seguiremos este orden para que entendamos bien el tutorial, primero enseñare la creación de los huesos, las teclas que usaremos para crear un hueso, como trabajar con huesos independientes de los demás y por ultimo crearemos un esqueleto completo que dependa de los demás huesos sin mas empezamos.

1.- Primero que nada empezaremos con la creación de huesos, para poder crear un hueso nos situaremos en el canvas y con las teclas ALT + Clic Izquierdo podremos agregar un hueso, probamos para salir de dudas.



2.- Como vemos nos ha creado un hueso, recordar que cuando lo seleccionamos cambia a un color naraja esto sera de ayuda cuando creemos demás huesos,  la parte de abajo o triangular es el origen, es donde el hueso tiene su punto de rotación, la parte de la punta sera el destino o limite hasta donde llegaremos, es una forma de analizar los conceptos de huesos no es necesariamente es asi, pero sirve para entender mejor, puedes tener un concepto que mejor se adapte.

3.- Bueno ahora pasaremos a la parte de trabajar con huesos independientes, es un concepto que me he inventado pero tiene sentido, me paso en varias ocasiones una situación en donde cree esqueletos pero no quería trabajar con huesos unidos, es decir, que dependieran de otro para moverse, tal ves en alguna situación te pase por eso lo explico aquí, crearemos dos huesos, pero lo haremos de la siguiente manera, crearemos un hueso y lo deseleccionamos es decir que quede de color gris y ahora si crearemos inmediatamente otro, si lo hacemos así podemos rotar y mover los huesos independientemente cada uno de ellos.



4.- Tal ves la explicación anterior te confundió pero es aquí donde cobra sentido lo que mencione anteriormente, ahora borraremos los huesos creados y lo haremos de la manera tradicional, crea un hueso y sin deseleccionar, es decir, que tenga el color anaranjado en la parte de arriba crea otro, veras que crea una conexión, algo así como una linea que los une, si intentas mover el primer hueso que creaste veras inmediatamente que el anterior se mueve también, si lo rotas el primero, rotara el de arriba, pero si rotas o mueves el de arriba lo hará independientemente, prueba para que lo entiendas mejor, esto se conoce como emparentamiento padre e hijo, que uno depende de otro.



5.- Para terminar y espero logres entender los conceptos anteriores nos toca crear un esqueleto completo que dependa para el movimiento, recuerda que del numero de imágenes que corresponda a nuestro personaje tendrá de huesos si así lo deseas o puedes limitar los huesos dependiendo hasta donde quieres animar, eso lo entenderás con la experiencia que vayas teniendo en el programa, borramos y empezaremos asi crearemos tres huesos verticales empezando por la espalda hasta llegar a la cabeza, primero crearemos el hueso principal donde dependerán los otros 2 así como muestro en la imagen.



6.- Aquí hemos creado la columna, el hueso de abajo es el mas importante si lo movemos, movemos los demás recordar eso siempre, probar siempre que lo estemos haciendo bien, rotare cada una para ilustrar como.




7.- Ahora crearemos un brazo, lo haremos así, 3 huesos, el hombro, el brazo y la mano, tendremos que seleccionar el segundo hueso para que dependan de el, así como lo muestro.



8.- Si roto el segundo hueso de mi columna se moverá el brazo completo junto con la cabeza de igual forma y si roto el hueso mayor moveré todo el esqueleto.



9.- Así crearemos el otro brazo, ahora para crear la parte de la pierna le daremos al hueso mayor seleccionándolo y de ahí creando muslo, rodilla y pie de igual forma.



10.- Rotamos los huesos para probar si lo hicimos bien.



11.- Terminaremos creando todo el esqueleto, siempre que dependan bien los huesos con respecto al cuerpo puedes fijarte por las lineas que los unen, listo ahora puedes crear esqueletos, el siguiente paso sera asignar los esqueletos a las imágenes .



Practica mucho cada vez lo harás mejor, recuerda que puedes ayudar dándole clic a la publicidad, con esto me motiva para seguir adelante con los tutoriales, saludos.