Taller: Creación de UI con Unity

Información

• Fisiomed
• Lugar: Biblioteca Vasconcelos.
• Fecha: 05/05/2018
• Hora: 15 hrs.

Instrucciones

1. Instalar Unity.

1.1. Descargar Unity Personal (gratuito) de la siguiente página: https://store.unity.com/download?ref=personal

1.2. Tal vez sea necesario obtener una cuenta de Unity (recomendable).

1.3. Elegir los siguientes componentes en el instalador:

• Unity 2018.1.0
• Visual Studio [for Mac] dado el caso, (antes MonoDevelop / Unity Debugger)
• Standard Assets
• Example Project (Omitir en caso de poca memoria en HDD).
• Android Build Support
• WebGL build Support

En la imagen se muestran seleccionados los componentes mínimos deseables.

1.4. (Opcional) Elegir alguno(s) de los siguientes componentes dependiendo los casos planteados.

• Documentation: se planea trabajar con poco o nulo acceso a internet. Poder consultar la documentación en todo momento es necesario para cualquier usuario de Unity.
• iOS Build Support: En caso de los usarios de Mac OS que cuenten con un dispositivo iOS (iPhone/iPad).

2. Instalar Github Desktop.

2.1. Descargar de la página: https://desktop.github.com/

2.2. La aplicación es una ventana como la siguiente:

3. Clonar proyecto de Github: https://github.com/Aestial/Fisiomed,

3.1. Para ello seleccionar la File -> Clone Repository.

3.2. Copiar la siguiente URL: https://github.com/Aestial/Fisiomed.git

3.3. El repositorio debe verse como la imagen 2.2 en la sección de Changes en caso de que no haya sido modificado ningún archivo.

3.4. El en la sección de History deben observarse diferentes títulos de cambios en el repositorio, así como su autor.

4. Descargar Assets faltantes (videos).

4.1. Descargar carpeta comprimida de la siguiente liga: https://www.dropbox.com/sh/jrg5r2k498nwk0a/AABxqKWo0jtOEqlmRWmWNV6Ma?dl=0

4.2. Descomprimir los videos y colocarlos en una ubicación cómoda (se usarán en el siguiente punto).

5. Reconocimiento rápido de la interfaz o Editor de Unity, relacionarla con algunos programas de creación de contenido como Photoshop, Blender, Maya, etc.

5.1. Abrir el editor de Unity.

5.2. Presionar el botón Open y abrir la carpeta Fisiomed que Github clonó en nuestro disco duro.

5.3. Cuando los archivos del proyecto terminen de cargar, podremos observar el Editor de Unity.

5.4. Buscar la ventana Project, en la que podemos encontrar los archivos o Assets de nuestro proyecto.

5.5. Arrastrar los videos del punto anterior a la ventana Project de Unity y acomodarlos en su carpeta adecuada.

5.6. Darle doble click a la escena llamada 'Interfaz' que se encuentra dentro de la carpeta Escenas.

6. Agregar assets en proyecto (siguiendo una buena estructura, jerarquía y nomenclatura)

7. Checar opciones de importación de assets, crear sprites/UI a partir de imágenes PNG, crear sprites a partir del multi sprite editor (textura con tilling, atlas).

8. Creación de escena, comprensión de los elementos de la escena, creación de objetos.

9. Creación de Canvas, para interfaz 2D (UI). Configuración del canvas, conocimiento de los diferentes componentes y comportamiento. Descripción de eventos de entrada de usuario, input.

10. Creación de Video Player, Render Texture y un Raw Image para asignar el video en Canvas.

11. Creación de elementos reconocidos en algunas de las pantallas (de las más sencillas), personalizar el fondo, la fuente, colores, etc.

12. Terminar la pantalla seleccionada (layout estático, aunque no se tenga la lógica programada).

13. Animaciones de propiedades de elementos de UI (botones, imágenes, etc.)

14. Programación básica de lógica de los eventos. Disparar un evento (reproducir sonido, cambiar texto, etc.) Introducción a la programación.