Bienvenidos!.

Presentación del tema: "Bienvenidos!."— Transcripción de la presentación:

1 Bienvenidos!

2 Materiales www.mediacitylabs.com/recursos/sesion7
Pueden descargar los materiales y ejemplos que usaremos en esta sesión utilizando el siguiente formato de URL

3 En esta sesión: Contenido Fundamentos de Ilustración 2D.
El concepto de Lienzo & escenario. Sistema de Coordenadas 2D & puntos de origen. Escenarios Expandidos. Tipos de escenarios (Estáticos & Dinámicos) Mapas de Bloques. Talleres Crearemos un juego de física utilizando imágenes externas. Exploración de dispositivos.

4 Conceptos importantes para comprender la ilustración de juegos 2D
El concepto de lienzo o “canvas” Consiste en considerar la pantalla de un dispositivo como un lienzo en blanco con dimensiones especificas en donde podemos ir colocando o “pintando” en ella diferentes objetos capa tras capa. La mayoría de los motores 2D incluyendo Corona SDK. HTML5 El sistema de interfaz del usuario en Unity. El concepto de escenario o “Stage” La pantalla muestra todo los objetos que se encuentran dentro del campo de visión de una cámara virtual, en el orden en que estos se encuentran respecto de la cámara.

5 Trabajando con Lienzos o Escenarios
Generalmente se utiliza una capa de fondo y varias capas superiores que pueden contener: Gráficos pertinentes al escenario, También conocidos como “props” o utilerías. Textos, Botones e Iconos, Que comprenden la interfaz del usuario. Estos elementos gráficos pueden ser: vectores o mapas de bits. Además pueden ser: Estáticos o animados.

6 Como colocar nuestro contenido
Para poder determinar la posición de nuestros objetos en la pantalla es necesario conocer las dimensiones (alto & ancho) en pixeles de nuestra pantalla y la ubicación del punto de origen desde donde comenzaremos a contarlos. El punto de origen de nuestro motor grafico se encuentra en la esquina superior izquierda.

7 Sistemas de coordenadas
Por ejemplo, si queremos colocar un rectángulo rojo en nuestra pantalla: 100 pixeles a la derecha de punto de origen &; (X = 100) 100 pixeles hacia abajo del punto de origen (Y = 100) Ocuparía exactamente esta posición.

8 Limites del espacio en nuestro lienzo
Es teóricamente infinito desde el punto de origen hacia todas las direcciones. (Ver Demostración) En realidad esta limitado por el espacio de la memoria en entornos 2D por lo que generalmente se usan mapas de baldosas intercambiables. En entornos 3D el tamaño del escenario esta limitado por la precisión de los cálculos geométricos para la visualización.

9 Escenarios expandidos.
Hasta ahora hemos construido múltiples prototipos de juegos que se desarrollan en un escenario estático sin que este supere los limites de la pantalla. Sin embargo en todos los motores de juegos existe la posibilidad de expandir nuestros escenarios y construir entornos de juego extensos sin que estos se vean limitados al espacio disponible nuestra pantalla. Esto se logra mediante diferentes técnicas de simulación para generar dinámicamente los escenarios en forma sincronizada simulando el movimiento de cámaras virtuales. (usando grupos & jerarquías.)

10 Existen 3 diferentes sistemas de coordenadas en espacios 2D & 3D
Coordenadas de Espacio Global: Determinan la posición de nuestros objetos en relación a todo nuestro escenario aun cuando este sea mas grande que nuestra pantalla. Coordenadas de Espacio de Pantalla: Determinan la posición de nuestros objetos en relación a los limites del tamaño físico en pixeles de nuestra pantalla. Coordenadas de Espacio Local: Determinan la posición de los objetos en relación al espacio ocupado por un objeto especifico. Generalmente son normalizadas en un rango de 0 a1

11 Técnica mas utilizada para generar escenarios dinámicos:
La Técnica mas usada es el empaquetado de Texturas en “Hojas de piezas” o “Tile Maps”. Esto nos permite generar escenarios dinámicos en tiempo real usando poca memoria al generarlos usando un mismo set de piezas o tiles. Históricamente esta técnica se uso para generar escenarios que permitieron diferentes tipos de desplazamiento como por ejemplo: Desplazamiento En 2 vías o Horizontal (Super Mario Bros) . Desplazamiento En 4 vías (Horizontal & Vertical) (Zelda). Desplazamiento de múltiples planos en paralelo. “Parallax Scrolling” (Donkey Kong). Desplazamiento Isométrico (Super Mario RPG).

12 Mapas de Tiles Como mencionamos esta técnica sirve para expandir nuestros escenarios y al mismo tiempo conservar la memoria de video generando dinámicamente nuestro escenario mientras nos desplazamos. Consiste en “armar” el entorno tiempo real mientras navegamos por el, construyéndolo bloque x bloque utilizando “mapas de bloques”(Tile Maps). La mayoría de los motores de juegos tienen librerías especializadas (nativas o de terceros)para el manejo de estos mapas. Existen diferentes tipos de mapas de piezas ó bloques.

13 Tipos de mapas de bloques.
Mapas Ortogonales (cuadrados con ángulos rectos) Usados para representar Perspectiva lateral Perspectiva Cenital

14 Tipos de mapas de bloques.
Mapas Isométricos Usados para representar Perspectiva Isométrica Simular Profundidad

15 Tipos de mapas de bloques.
Mapas Hexagonales Menos comunes Usados en RPG clásicos

16 Entendiendo el Espacio Global o “World Space”
Coordenadas & posicionamiento en el “Espacio Global” – Todo el Mapa. La flecha ocupa las siguientes coordenadas Globales X =384 Y = 192

17 Espacio Local o “Screen Space”
Coordenadas & posicionamiento en el “Espacio Local” – Pantalla. La flecha ocupa las coordenadas Locales X =150 Y = 50

18 Transiciones entre escenarios
Otra técnica muy útil para agregar profundidad a nuestros juegos es la posibilidad de movernos ó transitar entre diferentes escenarios o pantallas. Esto es esencial para implementar esquemas de progresión en nuestros juegos a través de menús, escenas, niveles o mapas. La mayoría de los motores de juegos cuentan con librerías para facilitarnos esta tarea que además cuentan con muchas ventajas. Poseen un sistema de gestión automática de memoria del sistema. Es posible utilizar diferentes animaciones de transición entre escenarios. Nos permite pasar variables con información de un escenario a otro.

19 Grupos & Jerarquías Ojo Derecho Cabeza Ojo Izquierdo Fantasma Cuerpo
Los sistemas de contenedores de agrupamiento y jerarquías son esenciales para facilitar la organización y manipulación de objetos visibles en nuestros escenarios. Principalmente cuando estos objetos visibles tienen una relación entre si. Ejemplo: Descendientes de Cabeza Descendientes de Fantasma Cabeza es a su vez Padre de Ojos Grupo Padre Fantasma Cabeza Ojo Derecho Ojo Izquierdo Cuerpo