Tabla de contenidos

Introducción

En este tutorial, vamos a ser la construcción de una aplicación en la unidad que se conectará a una API, envíe una consulta y devolver un archivo JSON de los resultados a la visualización en la pantalla. Para este caso, vamos a estar haciendo una aplicación que mostrará próximos fuegos artificiales.

fuegos artificiales APP hizo con Unity

Proyecto Archivos

Este proyecto contará con una casa prefabricada que está ya pre-hechos. Junto con eso, puede descargar los archivos de proyecto incluidos aquí.

No se pierda! extremos de la oferta en

  • Accede a los más de 200 cursos
  • Nuevos cursos añadió mensual
  • Cancelar en cualquier momento
  • Los certificados de terminación

    ACCESO ahora

    La API

    Con nuestra aplicación, vamos a ser la visualización de datos en nuestra pantalla. Estos datos va a ser una lista de próximas fuegos artificiales . El Gobierno de Queensland tiene una buena página web con una gran cantidad de diferentes conjuntos de datos para conectarse a.

    Próximos espectáculos de fuegos artificiales conjunto de datos.

    página web del Gobierno de Queensland datos

    Cuando en el sitio web, haga clic en el botón API de datos . Esta es una lista de ejemplos de consultas. Lo que queremos es la consulta que devuelve los resultados que contengan una determinada cadena.

    https://data.qld.gov.au/api/action/datastore_search?resource_id=346d58fc-b7c1-4c38-bf4d-c9d5fb43ce7b&q=

    ejemplos de CKAN API de datos de cadenas de consulta

    Configuración del Proyecto

    Crear un nuevo proyecto Unity 2D. Lo primero que tenemos que hacer es cambiar nuestra relación de aspecto. Dado que estamos diseñando una aplicación móvil, vamos a ir a la pestaña juego y añadir una nueva relación de aspecto de 09:16. Será escalable para cualquier relación de aspecto, sólo vamos a diseño es para pantallas de retrato.

    Juego de la Unidad de aspecto de pantalla opciones de relación

    Vamos también a cambiar el color de fondo. Seleccione la cámara y establezca el Fondo a un azul oscuro – He utilizado el color 32323C .

    rueda de color Unidad con azul elegido

    Para acceder y convertir los datos, vamos a utilizar un activo llamado simplejson . Puede descargarlo desde GitHub aquí.

    Creación de la interfaz de usuario
    haga clic

    Haga la Jerarquía y seleccionar interfaz de usuario> Canvas . Ahora podemos empezar con nuestra interfaz de usuario!

    objeto Unidad de interfaz de usuario de mano

    Cree dos GameObjects vacías (clic derecho lienzo > GameObject vacío ) y llamarlos Encabezado y FireworkList . La cabecera llevará a cabo nuestros botones de la barra de búsqueda y filtro.


    • Establecer la altura de 100SET el ancla a la parte superior-stretchPosition esto en la parte superior del lienzo, como a continuación

      En la lista de fuegos artificiales, basta con que rellenar el resto del espacio y el ancla al estiramiento estiramiento. Aquí es donde vamos a estar enumerando a cabo nuestros datos.

      Unidad Transformada de componentes para la cabecera

      En la barra de búsqueda, crear un nuevo TextMeshPro – Campo de entrada como hijo de la cabecera (puede que tenga que importar unos activos). Llamarlo SearchSuburb .


      • Establecer el Sprite a ninguno (lo convierte en un rectángulo de color) Ajuste el ancla al estiramiento-stretchSet las compensaciones a 5, 5, 5, 52.5We’ll puede dar todo un acolchado de 5

        configuración del objeto de entrada de la unidad


        • Establecer color de la barra de búsqueda de negro con la opacidad en halfFor el marcador de posición y el texto … Ponga el Color en blanco (la mitad de opacidad para el marcador de posición) Establecer el tamaño de fuente a 20Set la alineación de Medio

          configuración de los objetos de texto de la unidad de aplicación de los fuegos artificiales

          Ahora vamos a trabajar en nuestros botones de filtro. Crear una GameObject vacío y llamarlo FilterButtons . Ajuste el ancla y posiciones a lo mismo que la barra de búsqueda, pero por debajo de ella.

          A continuación, añadir un Horizontal Disposición Grupo componente. Activar todas las casillas de verificación y ajuste el Espaciado a 5. Esto se utiliza para escalar uniformemente posición y nuestros botones automáticamente.

          componente de texto Unidad con Horizontal Layout Grupo añadió

          Como hijo de la FilterButtons , crear un nuevo botón, retirar al niño de texto y establecer el color de la misma que la barra de búsqueda.

          Configuración de componente Button de la unidad

          Ahora, crear un nuevo TextMeshPro -. Texto objeto como un hijo del botón


          • Establecer el ancla a ser los límites de la buttonset el tamaño de fuente a 20 Porque nuestro primer botón, vamos a configurar el texto de hoy

            La unidad objeto de texto con Hoy escrito

            Duplicar el botón 3 veces para un total de 4 botones:. Hoy en día, semana, mes y todo

            La unidad de interfaz de usuario con opciones de selección de día

            Ahora vamos a trabajar en la lista de los fuegos artificiales. En primer lugar, crear un GameObject vacío como el hijo de FireworkList y lo llaman Container .


            • Set el ancla a la parte superior-stretchSet las compensaciones a 5, 0, 5, anythingSet el pivote a 0,5, 1This nos permitirá aumentar la altura del recipiente para la abrazadera a los datos easilyFinally, añadir un grupo ComponentSet Disposición Vertical la espaciamiento de los controles 5Enable tamaño infantil – Ancho * Desactivar Fuerza niño Ampliar – Altura (no se ve en la imagen)

              Vertical Layout Grupo y transformar los componentes en la unidad

              En la página FireworkList objeto, complemento Scroll Rect y Rect Máscara 2D componentes. Esto nos permitirá desplazarse hacia arriba y abajo en la lista. Asegúrese de copiar las propiedades como se ve a continuación:

              objeto FireworkList como se ve en Inspector Unidad

              Crear un nuevo botón (llamarlo FireworkSegment ), al igual que con los demás -. Retirar al niño de texto y añadir un TextMeshPro uno (dos en este caso)


              • establecer la altura del segmento a 50

                Plantilla para la aplicación de fuegos artificiales en la unidad

                Para terminar esto, crear una carpeta llamada Prefabs y arrastre el segmento de fuegos artificiales en ella. Eliminar el de la escena por lo que estaremos de desove en adelante.

                Objeto añadió a la carpeta Prefabs en la unidad

                artificiales visuales

                Para hacer la aplicación un poco más interesante, vamos a añadir en algunas imágenes de fuegos artificiales a la interfaz de usuario. Crear un nuevo Render textura haga clic derecho en la ventana de proyecto > Crear> render textura y lo llaman FireworkRenderTexture . Todo lo que tenemos que hacer aquí, se establece en el Tamaño a 500 x 500.

                Opciones FireworkRenderTexture con tamaño ajustado

                A continuación, vaya a la Etiquetas y Capas pantalla ( Editar> Ajustes del proyecto> Etiquetas y Capas ) y añadir una nueva capa llamada fuegos artificiales . Esto es para que la cámara hacen sólo los fuegos artificiales.

                Etiquetas y capas de ventana en la unidad

                A continuación, crear una nueva cámara y arrastrarlo lejos del otro. Fije la textura rendir a ella y las otras propiedades como se ve a continuación:

                Opciones de la cámara unidad con arreglo ajustado

                Ahora en el carpeta casas prefabricadas, no debe haber dos casas prefabricadas de partículas. Arrastre los de la posición de ellos y en frente de la cámara. Vamos a ajustar estos más tarde.


                última parte de la interfaz de usuario

                La última parte de la interfaz de usuario es la caída de cuadro de información hacia abajo. Esto mostrará más información acerca de un evento cuando lo selecciona. Crear un nuevo Imagen objeto como el secundario del contenedor (llamarlo InfoDropdown ).


                • Establecer la altura de 160Set el color a un color azul oscuro con la mitad de la opacidad

                  objeto Unidad Panel interfaz de usuario para fuego artificial aplicación Display

                  A continuación, añadir dos textos TextMeshPro por la información y dirección, y un cruda imagen de la textura de los fuegos artificiales de render.

                  La información de texto para la Unidad de los fuegos artificiales de aplicaciones de visualización

                  juego vista, debe ser capaz de ver los fuegos artificiales en la interfaz de usuario!

                  Script App Manager

                  Ahora es el momento de iniciar secuencias de comandos. Crear una nueva carpeta llamada Scripts y crear un nuevo guión C # llamado AppManager . Para mantener este script, cree un nuevo GameObject llamado _AppManager y adjuntar la secuencia de comandos a la misma.

                  objeto AppManager en la Jerarquía Unidad

                  Dentro de nuestro script, primero vamos a añadir los espacios de nombres que vamos a utilizar.
                  utilizando UnityEngine.Networking; usando System.Text; using System; usando System.Linq; usando simplejson; 12345usingUnityEngine.Networking; usingSystem.Text; usingSystem; usingSystem.Linq; usingSimpleJSON;

                  Dentro de nuestra clase, vamos a definir en primer lugar el < strong> Duración empadronador. Esta es una lista de todos los tipos de filtros de duración que podemos utilizar.
                  enumeración pública Duración {Hoy = 0, Semana = 1, Mes = 2, Todo = 3} 1234567publicenumDuration {Hoy = 0, Semana = 1, Mes = 2, Todo = 3}

                  Nuestra primera dos variables son la url , que es lo que va a conectarse a la API, y la JsonResult que será una lista de los datos.
                  // API urlpublic string url // resultante JSON de una API requestpublic JSONNode JsonResult; 12345 // API urlpublicstringurl; // resultante JSON de una API requestpublicJSONNode JsonResult;

                  Por último, vamos a crear un producto único / instancia para el guión. Esto nos permitirá fácilmente acceder a él siempre que queramos.
                  // ejemplo AppManager estática instancepublic; void Awake () {// establecer la instancia a ser este caso script = esta;} 12345678 // ejemplo instancepublicstaticAppManager; voidAwake () {// establecer la instancia que ser de esta scriptinstance = esta;} < p> Entonces, ¿cómo vamos a obtener los datos? Vamos a crear una co-rutina llamada GetData . Esto tomará una cadena para la ubicación y añadir que a la consulta. Si la cadena de ubicación está vacía, se solicitará a todos los datos. Estamos utilizando un co-rutina, porque tenemos que hacer una pausa en la mitad del camino a la función de envío / recepción de los datos.
                  // envía una solicitud de API – devuelve un JSON fileIEnumerator GetData (localización cadena) {} // 12345 envía una solicitud de API – devuelve un JSON fileIEnumerator GetData (stringlocation) {}

                  En primer lugar, vamos a crear la solicitud web y gestor de descarga , la construcción de la url también, incluyendo la consulta.
                  // crear la solicitud Web y descarga handlerUnityWebRequest webReq = new UnityWebRequest (); webReq.downloadHandler = new DownloadHandlerBuffer (); // construir la URL y querywebReq.url = string.Format ( «{0} & q = {1}», url, ubicación); 123456 // crear la solicitud web y descarga handlerUnityWebRequest webReq = newUnityWebRequest (); webReq.downloadHandler = newDownloadHandlerBuffer (); // construir la URL y querywebReq.url = string.Format ( «{0} & q = { 1}», URL, ubicación);

                  A continuación, vamos a enviar la solicitud web. Esto hará una pausa en la función y esperar a que el resultado antes de continuar.
                  // enviar la solicitud web y esperar a que un retorno resultyield regresar webReq.SendWebRequest (); // 12 Enviar la solicitud web y espera por una returnwebReq.SendWebRequest resultyield regresar ();

                  Con nuestro resultado, vamos a convertirlo de una matriz de bytes en una cadena, a continuación, analizar que en un objeto JSONNode.
                  // convertir la matriz de bytes y esperar un regreso resultstring rawJson = Encoding.Default.GetString (webReq.downloadHandler.data); // analizar la cadena en bruto en un resultado JSON podemos fácilmente readjsonResult = JSON.parse (rawJson); 12345 // convertir la matriz de bytes y esperar una volver resultstringrawJson = Encoding.Default.GetString (webReq.downloadHandler.data); // analizar la cadena en bruto en un resultado JSON podemos fácilmente readjsonResult = JSON.parse (rawJson);

                  no hemos hecho el guión de interfaz de usuario, sin embargo, pero esto es lo que vamos a llamar. Estamos enviando a través de los registros del archivo JSON para hacer que aparezcan en la pantalla.
                  // mostrar los resultados en screenUI.instance.SetSegments (JsonResult [ «resultado»] [ «registros»]); 12 // ver los resultados en screenUI.instance.SetSegments (JsonResult [ «resultado»] [ «registros»]) ;

                  Ahora vamos a trabajar en el , función FilterByDuration. Esto se llama cuando uno de los botones de filtro se presiona.
                  // llamada cuando se pulsa un botón duración // filtra la lista en función de la longitud de tiempo máximo givenpublic FilterByDuration vacío (int durIndex) {} // 123456 llama cuando se presiona un botón duración // filtra la lista en función de la longitud de tiempo máximo givenpublicvoidFilterByDuration (intdurIndex) {}

                  en primer lugar, vamos a convertir en el durIndex a una selección del empadronador Duración. A continuación, vamos a llegar una matriz de los registros de modo que podamos ordenar a través de ellos.
                  // obtener el enum duración de la dur indexDuration = (duración) durIndex; // obtener una matriz de los registros recordsJSONArray = JsonResult [ «resultado»] [ «registros»] asArray;. 12 345 // obtener el enum duración de la indexDuration dur = (duración) durIndex; // obtener una matriz de los registros recordsJSONArray = [JsonResult «número»] [ «registros»] asArray;..

                  a continuación, vamos a llegar a la fecha máxima en función de la duración del filtro < / p>
                  // crear el max dateDateTime MaxDate = new DateTime (); // establecer la fecha max dependiendo de la durationswitch (DUR) {case Duration.Today: MaxDate = DateTime.Now.AddDays (1); descanso; caso Duration.Week: MaxDate = DateTime.Now.AddDays (7); descanso; caso Duration.Month: MaxDate = DateTime.Now.AddMonths (1); descanso; caso Duration.All: MaxDate = DateTime.MaxValue; romper;} 12345678910111213141516171819 // crear el max dateDateTime MaxDate = newDateTime (); // conjunto de la fecha max dependiendo de la durationswitch (dur) {caseDuration.Today:maxDate=DateTime.Now.AddDays (1); break; caseDuration.Week : MaxDate = DateTime.Now.AddDays (7); break; caseDuration.Month: MaxDate = DateTime.Now.AddMonths (1); break; caseDuration.All: MaxDate = DateTime.MaxValue; break;}

                  Luego’ ll bucle a través de todos los registros y añadir los antes de la fecha máxima a filteredRecords .
                  // crear un nuevo JSONArray para contener todos los filtrada recordsJSONArray filteredRecords = new JSONArray (); // bucle a través de todos los registros y añadir los dentro de la duración, a la recordsfor filtrada (int x = 0; x por último, al igual que en la última función, que llamaremos la función de interfaz de usuario
                  // mostrar los resultados en screenUI.instance.SetSegments (filteredRecords); 12 // ver los resultados en screenUI.instance.SetSegments (filteredRecords);

                  UI de secuencias de comandos

                  Crear un nuevo guión C # llamado interfaz de usuario y adjuntarlo a la _AppManager objeto.

                  Vamos a necesitar estos espacios de nombres.
                  utilizando UnityEngine.UI; usando TMPro; usando simplejson; using System; 1234usingUnityEngine.UI; usingTMPro; usingSimpleJSON; usingSystem;

                  En primer lugar, tenemos nuestras variables para mantener nuestro contenedor, prefabricada segmento y una lista de todos los segmentos .
                  // contiene todos los segmentos en un recipiente RectTransform layoutpublic vertical; // segmento prefabricado a instantiatepublic GameObject segmentPrefab; // lista de todos Lista disponible segmentsprivate segmentos = nueva lista (); 12345678 // contiene todos los segmentos en un recipiente layoutpublicRectTransform vertical; // segmento prefabricado a instantiatepublicGameObject segmentPrefab; // lista de todos segmentsprivateList disponible segmentos = newList ();

                  Entonces tenemos las variables para el abajo gota .
                  [Encabezado ( «Info desplegable»)] // información desplegable objectpublic RectTransform infoDropdown; // texto que muestra el tiempo, tipo de evento, etcpublic TextMeshProUGUI infoDropdownText; // texto que muestra el caso addresspublic TextMeshProUGUI infoDropdownAddressText; 12345678910 [Encabezado ( «Info desplegable»)] // información desplegable objectpublicRectTransform infoDropdown; // texto que muestra el tiempo, tipo de evento, etcpublicTextMeshProUGUI infoDropdownText; // de texto que muestra el evento addresspublicTextMeshProUGUI infoDropdownAddressText;.

                  Y por último una instancia de este script
                  // ejemplo de interfaz de usuario estático instancepublic; void Awake () {// establecer la instancia a esta instancia script = esta;} 12345678 // instancepublicstaticUI ejemplo; voidAwake () {// establecer la instancia a esta scriptinstance = esta;}

                  la CreateNewSegment función, crea un nuevo segmento y vuelve a él.
                  // crea un nuevo segmento y devuelve itGameObject CreateNewSegment () {// instantiate y la configuración del segmento segmento GameObject = Instantiate (segmentPrefab); segment.transform.parent = container.transform; segments.Add (segmento); // añadir OnClick detector de eventos al segment.GetComponent botón

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *