Noticias

¡RECUERDA QUE SI ERES UN NUEVO USUARIO, DEBES PRESENTARTE PARA PODER PUBLICAR MENSAJES! | TENEMOS CANAL OFICIAL DE TELEGRAM: t.me/unity3dspain

Tutoriales sobre UI antiguo

Iniciado por rogerdv, Julio 11, 2018, 04:20:59 PM

Tema anterior - Siguiente tema
hola
 
Estoy creando un editor para dialogos en mi proyecto, similar al mecanim. Por tanto, necesito programar el ui al estilo antiguo (antes del 4.6) y lo poco que aprendi al respecto ya lo he olvidado. Alguien puede recomendarme algunos tutoriales? Estoy buscando en youtube pero no encuentro nada.

http://dsgp.blogspot.com">Divagaciones sobre programación y juegos



Puedo preguntar por qué debe ser el UI antiguo? por tu versión? Te recomendaría que primero anotes los elementos/propiedades que vas a necesitar, textos, cambiar colores de textos, cambiar fuentes, cambiar tamaños de fuente, crear cajas de texto, usar/entender GUILayouts, GUiAreas, en casi todos los casos familiarizarte con Begin"X" y End"X" (van de la mano) etc y de acá ir una a una al manual o las referencias e implementarlas, no creo que un tutorial sea necesario es bastante simple de aplicar.
 
Se me olvidaba rects!!! esto es el transform básico de este mundo, aprendelo.https://docs.unity3d.com/ScriptReference/Rect.html
 
GUI : Ponés las cosas donde se te cante : https://docs.unity3d.com/ScriptReference/GUI.html
 
GUILAyout : Ponés las cosas por capas, por ej separás el ancho en 3 y ponés 3 elementos a igual distancia sin preocuparte por las coordenadas : https://docs.unity3d.com/ScriptReference/GUILayout.html
 
Una cosa más, quizás también vas a necesitar manejar al mínimo los "Events" ya que vas a desear detectar cuando el cursor está encima de X botón por ej, si es así investiga Event en gral , "Event.current" , Event.Use() "EventType" ,y el famoso switch que le sigue (dependiendo del tipo de evento vas a realizar tal o tal acción por ej), todo esto va en OnGUI. Si vas a detectar la posición del mouse con eventos tenés que usar Event.current.mousePosition y no Input.mousePosition, usan diferentes coordenadas, invierten el "y" creo nada más.
 
https://docs.unity3d.com/ScriptReference/Event.html
 
y de acá podés irte expandiendo, con las GUILayoutUtilities , EditorGUILayoutUtilities (si querés meter inputfields y cosas así)
 
Saludos

Porque el editor se programa aun a la manera antigua, no puedes usar el nuevo UI cuando personalizas el editor de unity. El juego como tal si utiliza el nuevo ui, en eso no tengo problemas porque los tutoriales sobran.

http://dsgp.blogspot.com">Divagaciones sobre programación y juegos



Cita de: rogerdv date=1531417566Porque el editor se programa aun a la manera antigua, no puedes usar el nuevo UI cuando personalizas el editor de unity. El juego como tal si utiliza el nuevo ui, en eso no tengo problemas porque los tutoriales sobran.
   


Ahhh me comí lo de "editor" , pensé que era una especie de editor in game o casas así, perdón. Bueno igual todo lo que mencioné vale, de acá te vas a poder ir a inspectores y ventanas principalmente, ambos se manejan bastante parecido, igual te recomiendo el manual, tenés lindos ejemplos para crearte tu ventana o inspector.
 
Vas a usar SerializedProperty y serializedObject un montón, EditorGUILayout, EditorGUIUtilities , GUILayoutUtilities, los "GUI" solos en general no son usados para editores, o es poco común.
 
Con el tiempo me di cuenta que tenés dos formas de hacer estos editores, una es con el target e ir pidiendo los "publics" del objeto, funciona bien, pero no es la solución pensada para este tipo de cosas, la otra es definir las propiedades del objeto(serializedObject) y en el editor buscarlas con los ya mencionados SerializedProperty. La segunda es la más prolija, tenés undo/redo incorporado y es sensible a un prefab si fuera parte de uno.
 
En gral acá tenés para ver que hace cada cosa con ejemplos y todo:
 
https://docs.unity3d.com/ScriptReference/EditorGUILayout.html
 
Algo como para pispear un poco tenés esto, muestra un poco de todo, muy buen vid:
 


   
eature=oembed" width="480">

 
Y si querés conocer lo básico, esas cosas que a un siempre se le pasan, como menús, submenus, contextMenu, GUID, validación (cuando un item está inhabilidato porque seleccionaste un tipo inválido) cosas así tenés:
 
https://unity3d.com/es/learn/tutorials/topics/interface-essentials/unity-editor-extensions-menu-items
 
Cuento corto, lo de GUI sigue siendo igual, pero hay cosas que van más allá del OnGUI u OnInspectorGUI o similares y esas cosas quizás son las que debas aprender si te querés hacer tu editor, no tanto la parte bonita visual.
 
Como tip primero hacete tu monobehaviour, vamos a llamarlo DialogSystem , y tu clase C# en una carpeta llamada "Editor" , vamos a llamarlo DialogSystem (con el método 1, esto se aplica a inspectores y a ventanas con mínimas diferencias):
 

//DialogSystem.cs , donde quieras
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class DialogSystem : Monobehaviour {
    public bool boolean;
    public void Method()
    {
        Debug.Log("Lo mismo que hacemos todas las noches, Pinky, tratar de conquistar al mundo.");
    }
}


//DialogSystemEditor.cs , dentro de una carpeta llama "Editor"
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Unit***itor;
 
[CustomEditor(typeof(DialogSystem))]
public class DialogSystemEditor : Editor {
    DialogSystem m_target;
    void OnEnable()
    {
        m_target = (DialogSystem)target;
    }
    public override void OnInspectorGUI()
    {
        GUILayout.BeginVertical("Box");     // comienza el estilo "Caja"
        //Título en Negrita
        GUILayout.Label("Grid properties", EditorStyles.boldLabel);
   
        GUILayout.BeginHorizontal();
        GUILayout.Label("boolean");
        m_target.boolean = EditorGUILayout.Toggle(m_target.boolean);
        GUILayout.EndHorizontal();
   // Podrías hacer lo de arriba de una sin poner los begin horizontal:
   // m_target.boolean = EditorGUILayout.Toggle("boolean" , m_target.boolean);
       
        GUILayout.Space(10);
       
        //Si boolean no está en true se dibuja hasta acá, asegurate de terminar el BeginVertical de arriba!!!
        if(!m_target.boolean){
      GUILayout.EndVertical();  // Termina el estilo "Caja"
            return;
   }
        //Sin poner BeginHorizontal ... Toma todo el ancho del renglón
        GUILayout.Label("boolean es true");
   // Un botón
   if(GUILayout.Button("Click me")
      m_target.Method();
   GUI.Color = Color.red;
   if(GUILayout.Button("Click me")
      Debug.Log("No hago nada, solo estoy para mostrar los colores")
   GUI.Color = Color.white;   // volvemos a white por default
        GUILayout.EndVertical();        // Termina el estilo "Caja"
    }
}
       

 
(Los hice acá así que puede haber errores)

Etiquetas: