Comunidad orientada al desarrollo de videojuegos

Unity 3D Editor Window Parte 2 / Serie 1

Hola de nuevo, hoy os traigo la segunda parte de nuestro visualizador de texturas, en este caso vamos a hacer la  organización de la interfaz; vamos a ello:

En los editores de ventana no necesitaremos sobrescribir la interfaz puesto que no tenemos, asi que nos bastará con poner la función de interfaz:

void OnGUI(){ }

Cuando hayamos hecho esto ya podremos dibujar cosas en nuestra ventana, empezaremos haciendo dos areas, una para mostrar la textura y otra para mostrar la lista de texturas, aquí os muestro un boceto muy simple de como va a quedar:

 

Vale ahora que tenemos en mente lo que queremos hacer vamos a ello, pero antes os explicaré una cosa importante:

En las interfaces podemos usar dos tipos, por ejemplo en el caso del botón tenemos GUI.Button y GUILayout.Button, en el caso de que pusiéramos GUILayout  este botón se nos ajustaría automáticamente al diseño(layout) es útil en muchos casos, pero tenemos más control usando el que no tiene Layout puesto que le podemos especificar las coordenadas con un rectángulo (Rect(posición.x,posición.y,ancho,alto)), ya os iréis dando cuenta de como usarlos así que no os preocupéis.

Bien ahora que he explicado todo un poco vamos al código que es lo que nos interesa, para hacer areas usaremos la función GUILayout.BeginArea la cual nos deja especificar un rectángulo para hacer el diseño:

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

Os voy a explicar un poco la función, en este caso estamos diciendo que queremos un area en el punto X = 0, Y = 0 de nuestra ventana, y que queremos que el ancho sea el de la ventana (this.position.width) menos 150 pixeles para dejar espacio al otro area, luego hemos especificado la altura(this.position.height) puesto que queremos que el area siempre sea el alto de la ventana por si acaso la hacemos pequeña o grande.

Una vez que tenemos esto pondremos un botón para probar que funciona:

GUILayout.Button("Hola soy un botón que estoy dentro de un área");

Una vezque hayamos hecho esto tendremos que cerrar el área para que funcione:

GUILayout.EndArea();

Cuando hayamos hecho esto podremos guardar y probar la ventana os quedará algo así:

 

Perfecto, vamos a hacer otra área para el lado derecho que será nuestra lista de texturas en el proyecto, para ello escribiremos lo siguiente:

GUILayout.BeginArea(new Rect(this.position.width-150,0,150,this.position.height));
GUILayout.Button("Hola soy un boton que esta dentro de un area");
GUILayout.EndArea();

Con esto habremos creado otro área y nos aparecerá algo asi en nuestra ventana: 

Habiendo hecho todo este tutorial el código nos habrá quedado asi:

 

Info:No se si os habréis dado cuenta pero he borrado las funciones Start y Update puesto que no las iba a utilizar de momento.

Y con esto habremos terminado nuestro diseño de la ventana, si teneis dudas o necesitais algo decidmelo por Twitter.

Un Saludo, nos vemos en el siguiente tutorial!

, , ,

Leave a Reply