En el ejercicio 14 aprenderemos a montar un Canvas, y anclarlo a la cámara para que se vea en todo momento.
Después veremos cómo introducir una imagen, y ajustarla a la parte de la pantalla que mejor nos venga. Por último, veremos algún truco para conseguir que la interfaz se vea bien aunque el tamaño y resolución que tenga la pantalla sean de pequeñas para la cual queramos compilar el juego.Devonn
Lo primero de todo es abrir una nueva escena que pasaremos a llamar Diseño_de_Interfaz, después desplegamos la opción UI de la pestaña GameObject y elegimos Canvas
Se nos mostrará así:
Vamos a asignar el canvas a la visión de nuestra camara para que cuando jugemos veamos el menú de opciones que los jugadores puedan interactuar con el primer nivel de información de nuestro juego.
Un canvas en concreto es como un lienzo principal que podemos mostrar al usuario.Sería como un lienzo en dos dimensiones que podemos ponerlo en algún sitio de nuestra escena.
En este ejercicio vamos a asignarselo a la Camara.
Nos vamos al parametro Canvas en nuestro Inspector Y elegimos:
Render Mode> ScreenSpace-Camera
Ahora en la opción de abajo vamos a asignar nuestra mainCamera:
Si clicamos en la rueda que hay a la derecha de la opción Render camera nos aparecerá la pestaña Select Camera y a partir de ahí añadimos la Camara principal con solo clicar en el texto.
Este canvas sirve para colocar una serie de objetos con los que podemos interactuar ya sean botones como uno para reiniciar el nivel, para volver al menú principal o imagenes que nos sirvan de fondo, para así ver toda la información que queremos que se muestre en la partida.
Ahora vamos a añadir una imagen a nuestro canvas.
Para ello nos vamos a GameObject>Ui>Image
Vamos hacer un sprite con base a una textura que tenemos en nuestra carpeta de material llamado game:
Abrimos nuestra imagen en el inspector y cambiamos el tipo de textura a Sprite Seguidamente pulsamos la opción Apply.
Ahora dentro del elemento Image podemos aсadirle la imagen de Game para que se use de fondo fijo. Para ello pulsamos Canvas>Image y arrastramos nuestra imagen a la opciуn Source Image:
Pulsamos la última opcioón que aparece en la barra de herramientas que nos sirve para poder transladar nuesrtos objetos, rotar la vista o escalar lo que haya en nuestro escenario:
Nos aparecerán estas aristas azules desde las que podremos editar su tamaño, podremos rotar o colocar en el espacio que queramos de nuestro canvas. Cogemos el tirador que aparecen señalado y escalamos hasta que ocupe el alto de nuestro Canvas:
Por ultimo vamos a ver la opciуn ancla que nos servira para poder colocar nuestro sprite. La cruz blanca que aparece en nuestro canvas es el punto de referencia que tiene nuestro objeto para colocarse de tal manera que cuando se modifique el tamaсo de pantalla nuestro objeto no se mueva de la referencia que tiene con esta cruz blanca.
Seleccionamos cada parte de esta estrella blanca y la llevamos a la esquina superior derecha de tal manera que nuestro sprite ahora se encuentre a esa distancia con respecto a la cruz blanca.
Esto nos permite ver que variando la pantalla de tamaño nuestro objeto Game permanece a la misma distancia con respecto a la estrella blanca.
Al posicionar nuestra imagen justo donde está nuestra cruz hace que cuando variemos nuestra resolución y tamaño de pantalla la imagen siga invariable con respecto a lo que vemos. Por último reubicaremos tanto la cruz como la imagen en el centro de nuestro canvas quedando así:
