Comunidad orientada al desarrollo de videojuegos

Unity 3D Editor Window Parte 3 / Serie 1

Hola de nuevo, siento haber tardado hoy en hacer el tutorial pero andaba y ando ocupado con unas arreglillos en un disco duro. En cualquier caso aquí teneis el tutorial de hoy, el cual es un poco más complejo y largo que los demás.

Bueno, hoy meteremos a nuestro visualizador de texturas las funciones que necesita para que podamos visualizar las texturas de nuestro proyecto en esta ventana, asi que vamos a ello.

Lo primero que he hecho hoy ha sido expandir el tamaño del area derecha para que se puedan mostrar las texturas un poco mejor, el cambio es sencillo, en lugar de 150 lo he cambiado a 300, pero recordar que lo teneis que cambiar en ambas areas:

Primer área:

GUILayout.BeginArea(new Rect(0,0,this.position.width-300,this.position.height));

Segundo área:

GUILayout.BeginArea(new Rect(this.position.width-300,0,300,this.position.height));

Muy bien cuando hayamos hecho esto, añadiremos a nuestra area derecha una barra de scroll, para que en el caso de que tuvieramos muchas texturas podamos hacer scroll y elegir una para mostrar, el código es el siguiente:

Abrir scroll:

scrollPosition = GUILayout.BeginScrollView(scrollPosition);

Cerrar Scroll:

GUILayout.EndScrollView();

Y os preguntareis que es eso de scrollPosition, bien, scrollPosition es una variable Vector2 la cual sirve para obtener y poner la posición del scroll, asi que la tendremos que declarar como variable:

public Vector2 scrollPosition;

Una vez hecho esto añadiremos por encima de la parte del scroll un botón para cargar las texturas.

Pero antes necesitaremos declarar dos variables:

public Texture2D[] arrayTextures;
bool showTextures;

La primera es para guardar todas las texturas de nuestro proyecto que obtengamos con la función que declararemos ahora después.

Y la segunda es un condicional para guardar el estado del botón (si lo hemos presionado o no)

Bien ahora podemos declarar el botón y las funciones:

if(GUILayout.Button("Show Textures")){
showTextures = true;
arrayTextures = Resources.FindObjectsOfTypeAll<Texture2D>();
}

En este caso he añadido un GUILayout.Button con el nombre Show Textures (Mostrar texturas), y le he añadido un condicional de tal manera que si presionamos el botón la variable showTextures pasa a true (verdadera) y que a nuestro array de texturas añada todas las que encuentre en el proyecto.

Una vez hecho esto, dentro del scroll escribiremos esto:

if(showTextures){
for (int i = 0; i < arrayTextures.Length; i++) {
if(arrayTextures[i].hideFlags != HideFlags.HideInHierarchy && arrayTextures[i].hideFlags != HideFlags.NotEditable)
continue;
if(GUILayout.Button(arrayTextures[i] as Texture2D,GUILayout.Width(275),GUILayout.Height(275))){
textureToDraw = arrayTextures[i];
}
}
}

Con esta función estamos diciendo que recorra el array de texturas, y que las que sean modificables y que se puedan editar (es decir no internas, si no obtendriamos todos los iconos de Unity), que las muestre en un botón con ancho 275 y alto 275.

Ahora tenemos que hacer un paso más antes de que os explique que hace el botón.

Primero declararemos esta variable la cual va a ser la textura que se visualiza en la izquierda.

public Texture2D textureToDraw;

Y dentro del area izquierda en el código escribiremos esto:

Rect lastRect = new Rect(0,0,this.position.width-300,this.position.height);
GUI.Box(new Rect(lastRect.center.x-textureToDraw.width/2,lastRect.center.y-textureToDraw.height/2,textureToDraw.width,textureToDraw.height),textureToDraw);

Con esto estaremos, primero guardando el rectangulo que ocupa el area izquierda, puesto que lo necesitamos para posicionar la textura a dibujar.

Y luego hemos dicho que dibuje una caja(Box), pero que en el eje x coja el centro del rectangulo del area (es decir la variable guardada) y lo reste a su ancho entre 2 de esta manera posicionaremos cada textura independientemente de su anchura justo en el centro del area, luego hemos hecho lo mismo para la altura, y hemos dicho que dibuje la variable textureToDraw que es la que hemos declarado antes.

Con esto ya puedo explicar lo siguiente, al botón le hemos añadido la función de que cuando se presione, cambie la textura que se visualiza en la izquierda(es decir la textureToDraw) a la del botón en cuestión.

Bueno hemos terminado de momento:

El código quedaría así:shot_141108_032125

 

Y bueno el funcionamiento de la ventana sería el siguiente:

 

TextureVisualizer1

 

Como podeis ver en el gif, algunas texturas son muy grandes y no se ven bien, quizás en la próxima entrega intentaremos añadirle la función zoom a nuestro visualizador y alguna que otra función más, espero que os gusten mis tutoriales y si algo no entendéis no dudeis en avisarme.

Intentaré hacer un video completo de como hacer todo esto, y subiré el código a un repositorio online para que lo podais descargar, pero os recomiendo que lo hagais siguiendo los tutoriales puesto que aprendereis más.

Nos vemos en el próximo tutorial, un saludo!.

Leave a Reply