sábado, 9 de abril de 2016

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.

sábado, 14 de noviembre de 2015

Como iniciar un proyecto en Spriter

1.- Primero que nada debemos de crear una carpeta en nuestro Escritorio o el lugar de nuestra preferencia para poder tener un proyecto limpio y tener el orden para poder trabajar adecuadamente en Spriter, también como un dato adicional usa imágenes separadas de tus sprites para cuando trabajes con ellos puedas tener una mejor manipulación cuando toque usar los pivotes, de preferencia el formato deberías usar PNG para evitar problemas con las transparencias, bien una vez tomado en cuenta estos tips crearemos una carpeta en el Escritorio y le llamaremos como queramos, una vez creada la carpeta colocaremos nuestras imágenes ahí como muestro a continuación.



2.- Una vez que tengamos ya preparado nuestra carpeta y las imágenes iniciamos Spriter, hacemos esto ya que cuando iniciemos un nuevo proyecto Spriter nos dice que carpeta utilizaremos para poder comenzar así que por eso iniciamos haciendo esto.


3.- Ahora en la parte superior izquierda nos situamos en File y después New Project.


4.- Nos aparecerá un mensaje que le indiquemos la carpeta, le daremos en OK.


5.- Localizamos nuestra carpeta y le daremos Seleccionar carpeta, con esto ya podemos empezar a trabajar.


6.- Y listo ya podemos empezar a probar las demás herramientas de Spriter, si gustas seguir probando puedes revisar mis demás tutoriales de como animar sprites y sprites esqueléticos.



Hola si te ha servido el tutorial siempre puedes ayudar colaborando con el sitio dando clic a la publicidad para seguir dándole vida al sitio, gracias y espero te haya sido útil como es de divertido para mi crearlos.

Aquí un vídeo de Animación Idle de este personaje.