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.

Z - Order Spriter

Hola a todos, en esta ocasión nos tocara revisar la parte del Z - Order, podemos entender este concepto como cuando trabajamos por capas, es decir si anteriormente trabajaste con GIMP o Photoshop u otro similar sabrás lo de trabajar con capas, lo mismo pasa en Spriter cuando nosotros trabajamos con las imágenes y mas si trabajamos en unir partes de estas, nos daremos cuenta tarde que temprano que las imágenes se enciman o simplemente no encajan bien a la hora de trabajar con ellas, para esto necesitaremos acomodarlas, en Spriter existe el Z - Order que nos ayudara a acomodar bien nuestra imagen, sin mas empezamos.

1.- Para este tutorial tendremos que cargar imágenes de nuestro proyecto, en mi caso solo introduciré 2 objetos que serán el cuerpo y cabeza de mi personaje para enseñar el Z - Order, puedes introducir todas las imágenes para diseñar completamente el cuerpo y asi practicar y aprender mejor los conceptos.

 

2.- Bien ahora intentamos colocar nuestras imágenes para poder representar al personaje completamente, como mencione anteriormente nos toparemos con la siguiente situación, que nuestras imágenes no queden bien a la primera que lo coloquemos, que uno quede detrás de otro cuando queremos que sea lo contrario.

3.- En la parte izquierda del programa se encuentra las pestañas de jerarquía y Z - Order le daremos en la de Z - Order, aquí podemos ver nuestras imágenes colocadas en un orden ascendente.

4.- Aquí solo lo que tenemos que hacer es mover de lugar nuestras imágenes para poder componer y tenga una mejor vista, lo podemos hacer es seleccionar la que se encuentra debajo del todo y subirlo seleccionándolo con el mouse, ya con esto corregiremos ese problema, probar con todas las imágenes hasta tener la imagen como queramos, listo eso seria todo para este ejemplo.

Practica mucho para hacerlo mejor cada vez, recuerda puedes apoyar al sitio dándole clic a la publicidad para tener una motivación de recompensa por los tutoriales, eso ayuda para seguir con el entusiasmo de que se hacen las cosas bien, recomienda estos tutoriales a amigos, saludos.

Propiedas de Objetos, Rotar, Mover, Escalar en Spriter

Hola a todos, en esta ocasión veremos los movimientos básicos de transformación de un objeto, como lo es escalar, mover y rotar, de hecho a estas alturas puede resultar obvio pero siempre es necesario conocer un poco de esto sin mas empezamos.

1.- Primero debemos colocar la imagen del personaje que utilizaremos en el canvas.

2.- Le daremos clic para que nos muestre la siguiente lineas punteadas, aquí podemos ver en los extremos de nuestra imagen que vienen unos cuadros blancos, esos cuadros blancos nos sirven para escalar nuestra imagen, probar para practicar un poco eso, bien también podemos observar que existe un punto rojo en la imagen, ese punto rojo es el punto de pivote que es donde colocamos para poder realizar una rotación a partir de ese punto, si le damos clic y movemos podemos asignarlo en donde queramos, también fuera de nuestra imagen podemos ver un un circulo de color blanco, si nos acercamos con el mouse podemos ver que nos aparece una flecha que nos indica que podemos rotar, probar para practicar, básicamente eso son una forma sencilla para empezar a usar nuestra imagen.

3.- Existe también un cuadro de información denominado Propiedades de Objetos, ahí en ese cuadro podremos manejar también las transformaciones de la imagen pero con números mas concretos, en la primera parte controlamos el desplazamiento en X y Y como también su escala en esas coordenadas, seguido de el angulo de rotación del objeto que podemos indicarlo, también existe un botón en forma de rueda que hace la misma acción para rotar la imagen, ya de ultimo podemos manejar la transparencia de nuestra imagen con el alpha bajándolo y subiéndolo, probar para poder tener la idea, bien y listo con eso podemos manejar las transformaciones de nuestro objeto.

Practica mucho para poder hacerlo mejor cada vez, puedes apoyar al sitio dándole clic a la publicidad para poder seguir creando tutoriales con la motivación de que el trabajo que se hace es recompensado también, gracias por el apoyo y saludos.

Pivotes en Spriter

Hola a todos, seguiremos con la continuación de lo básico de Spriter, para esta ocasión nos tocara ver los pivotes que son una parte muy importante a la hora de crear nuestras animaciones ya que dependera de como se coloquen estos puntos para una mejor movilidad, bien comenzamos.

1.- Lo primero que tenemos que hacer es contar con un proyecto hecho en spriter, puedes realizar el tutorial de como empezar un proyecto nuevo en spriter a este link.

2.- Ahora conozco dos métodos para poder asignar los pivotes, en primera aprenderemos este método que lo llamaremos método 1 para no confundirse, bien el método 1 es de la siguiente manera en la ventana que nos aparece donde tenemos nuestras imágenes le daremos 2 clic y nos saldrá la siguiente ventanita.

3.- Aquí en esta ventana que nos abre vienen varias opciones, podemos manejar las coordenadas del pivote si conocemos las medidas exactas y podemos teclearlo manualmente, también nos muestra un cuadro donde podemos darle un clic a los diferentes puntos para que el pivote se localice ahí, ejemplo en el centro, en una esquina etc., y también una pequeña imagen en donde con el mouse podemos colocarlo en el punto que queramos, recordemos que el punto donde lo coloquemos sera importante para su rotación de movimiento, una vez hayamos colocado el pivote donde queramos le damos en el botón OK.

4.- Bien, para el segundo método necesitaremos colocar una imagen de las que utilizamos en el proyecto, para este ejemplo utilizare el torso de un personaje, primero hay que colocarlo en el canvas arrastrándolo.

5.- Si le damos clic a la imagen podemos ver la linea punteada de la imagen, si observamos bien se encuentra un punto de color rojo en nuestra imagen, si lo has identificado en efecto ese es el punto pivote.

6.- Ahora con el clic izquierdo del mouse lo seleccionamos y arrastramos en donde queremos poner el pivote y listo, ya hemos asignado nuestro punto de pivote con éxito.

Practica diariamente para hacerlo cada vez mejor, apoya al sitio dándole clic a la publicidad que aparece en el sitio para seguir con el entusiasmo y la motivación  de seguir haciendo tutoriales, excelente día.