miércoles, 11 de marzo de 2015

Tutorial Unity - Plataformas 1


Bienvenidos, espero que este pequeño curso de Unity les resulte de utilidad
Primero que nada el pequeño ejemplo de lo que vamos a hacer en este tutorial:

Aqui el asombroso ejemplo 


Primero que nada, deseo aclarar algunos puntos, veremos código, eso es indispensable para cualquiera que quiera desarrollar videojuegos, sin embargo tratare de hacerlo lo mas sencillo y ameno posible, si tienen cualquier duda, pueden dejármela en el blog:




Muy bien, como cualquier archivo proyecto u otro, lo primero que vamos a hacer es crear un nuevo proyecto, si ya instalaron unity y lo abrieron tienen que darle en la pestaña File y luego "New Project", una vez hecho esto (o abriendo el programa por primera vez), debe saltarles esta pantalla:


En ella lo único que deben seleccionar para este tutorial es cambiarle el "modo" de 2d a 3d, de cualquier forma esto pueden cambiarlo después, pero es lo mas cómodo.
Una vez hecho eso, debe abrirse la siguiente vista


En ella lo que usaremos serán las pestañas de:
Inspector: Donde estarán todos los detalles del objeto actual
#scene: es la vista de editor, donde puedes manipular la escena que estamos trabajando
Hierarchy: contiene una lista con todos los objetos de la escena, ordenados en jerarquías
Game: Aquí se vera nuestro juego cuando este corriendo, en este momento tiene la vista de nuestra cámara
Project: Esta pestaña contiene todos los archivos de nuestro proyecto, scripts, sprites, prefabs, etc.
Ahora si tienen dudas no se preocupen solo ubiquen todas las pestañas y pronto entenderán.
Primero que nada vamos a importar nuestros sprites, primero bájelos en el link que viene a continuación:

http://opengameart.org/content/styled-platformer-asset-sheet-0

http://cife.edu.mx/imagenes/Standard%20sprites%202.png

Una vez hecho eso vamos a dar clic derecho en nuestra pestaña de proyect, como viene a continuación:


Seleccionaremos nuestros sprite y le daremos import, lo haremos de nuevo con el otro archivo de sprites.
debe quedaros mas o menos así:

Una vez hecho esto, seleccionamos nuestros sprites (una hoja a la vez) y vemos la pestaña de inspector,
en ella debe estar el nombre de nuestra hoja de sprites, una vez ubicada hacemos los siguientes cambios (si no están hechos ya):
Texture type : sprite
sprite mode :múltiple( porque nuestra hoja contiene varios sprites)
Filter mode: point (porque estamos trabajando con pixeles así que no queremos que los suavicen
y le damos apply, debe quedar asi:

Después de eso, en la misma ventana damos clic en "sprite editor"
surge la siguiente ventana

en la esquina superior izquierda le damos donde dice "slice", dejamos todo como esta y damos "Slice"


Debe quedarnos de la siguiente manera:



y por ultimo damos clic donde dice Apply en la parte de arriba:


si vamos a la pestaña de proyect y en la hoja que acabamos de "slicear" damos clic en:



deberemos ver una hoja desplegarse de la siguiente manera:




Repetimos todos los pasos con la siguiente hoja, una vez hecho eso, vamos a arrastrar un sprite de la hoja a nuestra escena (vamos a hacerlo un par de veces para que tengamos un suelo adecuado):



si le damos a play ahora (los botones de arriba), solo veremos nuestra pantalla estática (no es muy interesante la verdad, pero apenas estamos comenzando).
Salimos del modo play, (dando clic de nuevo en icono de play, asegurate de que estan en color negro antes de seguir trabajando)
vamos a ubicar nuestro héroe y vamos a moverlo a nuestra escena también ( si queda muy pequeño, hay que escalarlo, como todos los programas con los puntos azules de las esquinas.

Muy bien ahora viene algo mas interesante, agregar componentes a nuestros objetos, estos componentes son módulos que podemos agregar a nuestros objetos para que se comporten de la manera que queramos, por ejemplo, si seleccionamos a nuestro héroe veremos en la pestaña del inspector:


vamos a darle add component
dentro de physics2D}

seleccionamos rigidBody2D

y debe quedar de esta manera:

Ahora nuestro objeto tiene 3 componentes, si le damos clic a play ahora veremos como simplemente se desliza hacia la nada.
ahora necesitamos que nuestro objeto, que a partir de ahora llamare héroe, (y que deberían cambiarle el nombre también en la casilla que muestro a continuación)

pueda colisionar con otros objetos, para esto vamos a agregar un componente mas realizamos los mismos pasos que antes pero esta vez escogemos BoxCollider2D,

el objeto del heroe debe tener los siguientes componentes:

 ahora puede colisionar, pero aun no tiene con que, así que lo que aremos será escoger cada una de las cajitas de terreno y agregarles un box collider2d igual que con el heroe de manera que cada cajita quede así:

si lo hacen correctamente, cuando le den play de nuevo, nuestro héroe debería caer y posarse sobre nuestro suelo de esta manera:

Si no es así, revisa paso por paso para checar donde pudo haber errores.
Ahora, viene la parte mas divertida, mover a nuestro héroe!
Aquí viene algo de programación, que tratare de explicar de la mejor manera posible, sin embargo si nunca has programado quizá quieras ver algunos tutoriales de programación para entender mejor lo que esta pasando, te dejare algunas paginas de referencia.
Primero que nada crearemos un nuevo script vamos a nuestra pestaña de proyecto damos clic derecho create C# script y se creara un nuevo documento, hay que ponerle un nombre, yo lo llamare "hero_brain" porque controlara al héroe.


Nota: Es bueno que sus scripts tengan un nombre fácil de reconocer porque pueden llegar a tener demasiados y es difícil de encontrar alguno.
Una vez creado, damos doble clic sobre el y se abrirá un nuevo programa, dentro de el debe estar este código:
Les explico
using UnityEngine;
using System.Collections;
Son cabeceras para que reconozca el programa que esto es un script de unity
public class hero_brain : MonoBehaviour {
Es el inicio de nuestra clase, indica el nombre y el comportamiento, mas de eso en las referencias
void Start () {
}
Es el código que se ejecutara cuando este objeto inicia
void Update () {
}
Este código se ejecuta cada frame del juego.

Muy bien, primero dentro de "update" vamos a agregar el siguiente codigo
if(Input.GetKey(KeyCode.RightArrow))
¿Qué significa todo esto? pues simplemente que "SI" la tecla "flecha derecha" haga algo, y que va a hacer?, bueno eso es la siguiente línea:
rigidbody2D.velocity=new Vector2(2,0);
Recuerdan que agregamos un componente llamado rigidbody? bueno pues en esta línea le estamos diciendo que su velocidad es igual a un vector 2,0 (para definiciones pueden ver las referencias, pero simplemente significa una dirección hacia la derecha)
tendría que quedar el código de esta manera:

muy bien, ahora regresemos al programa y vamos a asignar nuestro flamante nuevo script a nuestro héroe, pongámosle "cerebro", vamos a agregarle un componente a nuestro héroe, (si no recuerdas como hacerlo, revisa mas arriba) pero en vez de ir a physics vamos a ir a scripts y luego seleccionamos el único script que hay aquí, nuestro hero brain


Como vemos nuestro inspector ya muestra muchos componentes en nuestro héroe:


Ahora pulsemos play y nuestra escena debe ser igual a la anterior, hasta que pulsemos la flecha derecha entonces,… esta vivo!! nuestro Hero se tira al vacío sin dudar!


perfecto, ahora vemos que nuestro héroe se mueve ala izquierda, ahora para moverlo a la derecha simplemente agregamos las mismas líneas con algunos cambios debajo de las que ya teníamos
if(Input.GetKey(KeyCode.LeftArrow))
rigidbody2D.velocity=new Vector2(-2,0);
como ves simplemente le dijimos que si presionábamos la flecha izquierda, entonces su velocidad seria igual a -2,0 (eso es izquierda, de nuevo lectura de vectores altamente recomendada),
de nuevo regresamos a nuestra escena y le damos play
ya podremos moverlo a la izquierda!


Perfecto, ahora lo que sige es Saltar!, como se habrán imaginado, no es muy diferente de como moverse ala izquierda o derecha, el codigo que usaremos esta vez es un poco diferente, vean:
if(Input.GetKeyDown(KeyCode.UpArrow))
rigidbody2D.AddForce(new Vector2(0,250));
primero el código funciona con GetKeyDown que quiere decir? que solo se ejecutara una vez cuando la tecla arriba se presione , y hasta que vuelva a ser presionada no hará la acción otra vez, eso significa que si la mantenemos presionada no seguirá saltando.
También usamos ,addforce en vez de velocity, esto es así porque no queremos una velocidad continua sino una fuerza de impulso y luego que la gravedad haga su trabajo.
El código debe quedar asi:


(si tu héroe no salta lo suficiente, aumenta el 250 al numero que tu quieras)
perfecto ya salta, ya casi terminamos el 1er tutorial!
Sin embargo si tratas de moverte a la hora de saltar, pues tu personaje se comporta raro, no vuelve a caer a la tierra, esto es porque cuando movemos a la izquierda o derecha el personaje vuelve su velocidad en y 0, así que hay que hacer estos cambios:
en ambas líneas de rigidbody2D.velocity=new Vector2(-2,0);
vamos a cambiar el 0 por rigidbody2D.velocity.y para que queden de esta manera:
esto hará que presionar las flechas izquierda y derecha no haga que cambie la velocidad en el eje y.
probamos nuestro script de nuevo y deberemos saltar igual que Mario!
ya podemos construirle un pequeño mundo para que salte y recorra.
aremos eso copiando y pegando nuestros cubitos (ctr+c y ctrl+v funcionan perfectamente en unity).
una vez tenemos algo como esto:



podemos recorrer el mundo, pero nuestra cámara sigue fija,
y resultara en situaciones como esta:

Primero vamos a crear un nuevo script y lo llamaremos camera_brain y lo abrimos
(si no recuerdan como crear un script revisa mas arriba)
después de la línea "public class camera_brain : MonoBehaviour {"
escribimos:
Public Gameobject heroe;
y debajo de Update()
escribimos:
transform.position =new Vector3( heroe.transform.position.x,heroe.transform.position.y,-10);
estas dos líneas se refieren a primero crear una variable que almacene un objeto, en este caso sera nuestro héroe y la segunda le dice que en todo momento su posición (de la cámara) sera igual a al posición de nuestro héroe en el eje x , y en el y pero que siempre estará en -10 de profundidad
Una vez realizado esto debe quedarnos de esta manera:


vamos a agregar nuestro script a nuestra cámara, de la misma forma que agregamos el hero brain, pero esta ves elegiremos el camera_brain, también cuando la agreguemos veremos un pequeño espacio en el script:

Justo en ese lugar vamos a arrastrar desde nuestro hierarchy a nuestro héroe

Si lo hemos hecho correctamente cuando juguemos nuestro héroe será seguido a todas partes por nuestra camera, incluso cuando cae al vacío.

Muy bien, con esto terminamos la primera parte del  tutorial, espero que les haya gustado, cualquier duda /agradecimiento/critica, pueden dejármela abajo, estaré encantado de recibirlos.
dejo aqui los  scripts  completos que pudieran necesitar, también dejo las hojas de sprites que use en proyecto. 
y el material de referencia, léanlo para darse una mejor idea de que va todo. 

hero_brain:

using UnityEngine;
using System.Collections;

public class hero_brain : MonoBehaviour {

// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {
if(Input.GetKey(KeyCode.RightArrow))
rigidbody2D.velocity=new Vector2(2,rigidbody2D.velocity.y);
if(Input.GetKey(KeyCode.LeftArrow))
rigidbody2D.velocity=new Vector2(-2,rigidbody2D.velocity.y);
if(Input.GetKeyDown(KeyCode.UpArrow))
rigidbody2D.AddForce(new Vector2(0,250));
}
}


camera_brain:

using UnityEngine;
using System.Collections;

public class camera_brain : MonoBehaviour {
public GameObject heroe;
// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {
transform.position =new Vector3( heroe.transform.position.x,heroe.transform.position.y,-10);
}
}



Material:




http://opengameart.org/content/styled-platformer-asset-sheet-0

http://cife.edu.mx/imagenes/Standard%20sprites%202.png



Referencias:
Programar en c# https://www.youtube.com/watch?v=mugmZY41UMM
vectores  http://neetescuela.com/explicacion-de-vectores/

No hay comentarios:

Publicar un comentario