Puede acceder al curso completo aquí: Desarrollo de un Sistema de Prueba reutilizable

En este curso haremos un opción múltiple prueba juego . En concreto, vamos a ser capaces de:


  • Haga diferentes preguntas y respuestas para proporcionar múltiples jugador para elegir.
  • Haga diferentes tipos de preguntas, incluyendo preguntas ordinarias de texto ( “¿Qué significa esta palabra significa eso?”), Preguntas de imagen ( “¿Qué es este pájaro?”), Y las preguntas de audio ( “¿Qué instrumento es de juego?”). < / li>
  • Crear una pantalla que le dice a los jugadores de su puntuación.

    Unidad Abierta y crear un nuevo proyecto. Estamos llamando a nuestro Super Cuestionario . Seleccione la versión más reciente de la Unidad y seleccione la opción 2D plantilla. (Hemos utilizado la versión 2018.3.2f1)

    pantalla Hub Unidad para la creación de un proyecto

    Tenemos algunos medios de comunicación que vamos a utilizar en esta prueba, como se ve a continuación.

    Activos de juego de preguntas en la unidad

    Tabla de contenidos

    Configuración de la interfaz de usuario:

    En primer lugar queremos hacer una Panel . R-clic en la ventana Jerarquía, UI> Panel . Cambiar el nombre del Grupo Especial Pregunta ‘. Alejar la imagen y utilizar la herramienta de mano ( Q ) para centrarlo.

    Panel UI añadió a la escena de la unidad

    Vamos a tener nuestras preguntas aparece en este panel de la izquierda y mostrar las posibles respuestas a la derecha. Seleccione la Rect herramienta ( T ) y elegir la cantidad de espacio que desea el lado que se trate ha de hacer clic y arrastrar el borde del panel.

    Panel de interfaz de usuario cambia de tamaño en la escena de la unidad

    ancla a la parte central izquierda.

    Inspector de la Unidad con el conjunto de anclaje a la izquierda middle

    Y eliminar el color: En el Inspector, haga clic en el círculo imagen de la fuente y selecciona Ninguno , a continuación, haga clic en la barra de color por Color y gire el Alfa hasta el final abajo a 0.

    componente Imagen Unidad con la Fuente Conjunto de imagen a ninguno

    componente de imagen Unidad con selector de color abierto

    texto de la pregunta de diseño:

    En este proyecto vamos a utilizar TextMeshPro en lugar del predeterminado texto objeto porque es mejor en todo.

    R-clic en Panel , interfaz de usuario> TextMeshPro -. Texto (Si se le solicita, importación TMP Esencial )

    Colocar este nuevo cuadro de texto en el medio de la zona del panel de preguntas y se extienden hacia fuera. Cuanto más tiempo se espera que sus preguntas sean, mayor debe hacer el campo respectivo. Adición de una pregunta marcador de posición en texto en Texto de malla Pro Ugui (Script) y centrarlo en horizontal y en vertical ( Alineación ).

    Texto de malla Pro objeto añadido a la unidad con alineación central

    Comprobar Auto-Tamaño . Esto asegura siempre será dimensionados el texto para llenar el cuadro de texto.

    Texto de malla Pro con objeto de tamaño automático seleccionada en la unidad

    Ahora podemos trabajar en el área de respuestas. R-clic en Canvas , interfaz de usuario> Panel . Nombre de este nuevo Panel ‘ Respuestas ’, a continuación, utilizar la herramienta Rect para adaptarse a la zona restante y ancla a la parte central derecha.

    Unidad con segundo panel de interfaz de usuario añadido en uno

    En las respuestas del panel, queremos tener tantas respuestas posibles, como nos gusta por pregunta en lugar de, digamos, 4 opciones cada vez. Vamos a empezar por hacer un botón:. R-clic en Las respuestas, la interfaz de usuario> botón

    La unidad con el botón de añadido a los paneles de interfaz de usuario

    Seleccione Respuestas , haga clic en Añadir componentes y seleccionar Vertical grupo Diseño . Esto nos ayudará a apilar nuestra respuesta botones en la parte superior de uno al otro y asegurarse de que llenan el espacio que tenemos.

    Unidad Añadir botón de componente vertical con el esquema de grupo seleccionado

    Compruebe el Tamaño Child Control ‘s Ancho y Altura cajas para estirar nuestros botones para ajustar el panel. Duplicar el botón de respuesta para ver esto en acción!

    Unidad Vertical Grupo Disposición con tamaño controles secundarios para la anchura y la altura

    escena de la Unidad con el segundo botón añadido en el grupo disposición vertical

    Esto parece extraño, así que vamos a añadir un poco de distancia y el relleno. Set Espaciado y todos los valores de Relleno 15 . Siéntase libre de añadir más botones y ver cómo se ve. Cuando esté listo, reducir a un solo botón.

    Relleno 15 añadido a la Unidad Vertical Layout Grupo

    La unidad que muestra varios botones en el grupo de disposición

    Dentro de este en la Jerarquía, eliminar texto a continuación, R-clic y selecciona interfaz de usuario> TextMeshPro – Texto . Asegúrese de que el nuevo cuadro de texto para caber en el panel de respuestas, a continuación, introduzca un texto para una respuesta marcador de posición y centrarlo vertical y horizontalmente.

    escena de la unidad con el botón de centrado

    Unidad con el centro de respuesta de texto alineado añadido

    A continuación, seleccione la respuesta y cambiar el color a algo agradable (En (Script) , color normal ).

    selector de color del botón en el inspector de la Unidad

    Seleccione el botón de respuesta texto y verificación Auto-Tamaño . También podemos personalizar este – establecer el mínimo 14 y máxima 60 . Duplicar los botones para ver cómo se ve.

    La unidad con texto Mesh Pro conjunto de objetos de tamaño automático

    Unidad escena con varios botones de color azul

    Seleccione TextMeshPro – texto . Se podría arrastrar las líneas amarillas de los bordes del cuadro de texto para añadir márgenes a su área de texto, sino que lo añadiremos en el Inspector. En Ajustes extra , ajustar los márgenes a 10 cada uno. Duplicar los botones de nuevo para ver la diferencia.

    Texto Los objetos de malla Pro con márgenes establecidos a 10

    Unidad de escenas que muestran márgenes botón

    Ahora se ve bien, queremos asegurarnos de que nuestra prueba funciona bien en todos los tamaños. Mirada en el juego ver y cambiar el modo de visualización de Aspect gratuito a 16: 9.

    pantalla de juego Unidad con establecido de relación de aspecto a 16: 9

    interfaz de usuario en la escena de la Unidad superposición

    Esto se ve mal, así que necesitan para cambiar el tamaño. Seleccione Canvas y en Escalador de mano (Script) configurar el Modo de escala interfaz de usuario Escala con Tamaño de la pantalla . Set Partido 0.50 y cambiar el Resolución de referencia 1280 x 720 .

    escena de la Unidad con la interfaz de usuario efectúa en la pantalla escala de tamaño

    Ahora podemos empezar a escalar objetos para trabajar con esto. Arrastre los bordes de los paneles de preguntas y respuestas para que quepan dentro del área de la pantalla correctamente y no se superponen entre sí.

    La unidad con la escala adecuada interfaz de usuario

    Ahora, el cambio a Aspecto Libre en la juego ventana no lo romperá como lo hizo antes porque hemos escaló hasta igualar. Mientras modificarlo para trabajar dentro de 16: 9. Resolución, esto siempre debe trabajar

    Por último, podemos preparar nuestra pregunta de texto prefabricada y el botón de respuesta. R-clic en los Activos de la carpeta y seleccionar Crear> Carpeta , dándole el nombre prefabricada . Asegúrese de que sólo tiene un botón de respuesta y cambiarle el nombre ‘ Botón de respuesta ’. Cambiar el nombre de su pregunta TextMeshPro ‘ Texto de la pregunta ’, a continuación, arrastre a los dos en la carpeta prefabricada.

    Unidad respuesta Button y texto de la pregunta Prefabs

    Ahora tenemos nuestra disposición pregunta texto predeterminado!

    En la siguiente lección, diseñaremos los diseños predeterminados para las preguntas de audio y de imagen.

    Transcripción 1

    Hola chicos, mi nombre es Austin Gregory. Y en este supuesto, voy a enseñar cómo crear un simple y pequeño cuestionario de opción múltiple juego donde se puede hacer preguntas en diferentes formas, desde audio, imágenes, o preguntas de texto simples, y entonces usted tiene la opción de respuestas que van desde dos hasta opciones sin embargo muchos que puede caber en la pantalla.

    Así que puede continuar un juego desde donde lo dejé. Me llevará al conjunto o el tema de las preguntas que hice a, mientras que Nuevo juego me va a empezar desde el principio aquí. Lo que puedo ver es mi primera pregunta es una pregunta de audio. Puedo escuchar el sonido. De acuerdo, eso suena como una flauta. Ir a la siguiente pregunta. ¿De qué color son las flores? Bueno, no son de color naranja o negro. Quiero decir que son de color magenta. Entonces tengo una pequeña pantalla de puntuación aquí que dice que tenía dos preguntas, tienes dos a la derecha, por lo que su puntuación es 100%.

    Ahora que normalmente tendría más de dos preguntas, y que probablemente conseguir un poco mal. Pero eso es sólo cómo se va a trabajar porque sé las respuestas a estas preguntas por desgracia. ¿En qué país tiene esto de forma más representa? Esto va a ser Alemania. No es Italia o Francia a ciencia cierta, por lo que es Alemania. ¿Cuál de estos elementos es el queso? Ahora que podría ser una pregunta difícil si trataba sobre esta cuestión. Hay una gran cantidad de nombres de queso que son confusas y poco comunes. Pero en este caso, provolone, paraguas no es obviamente. Y hay que ir, volver al menú principal, y puedo continuar desde el último conjunto que abrí. Así que entre series, tenemos una pantalla de puntuación, y luego el último conjunto volvemos al menú principal.

    Sólo un pequeño sistema agradable que le permitirá crear cualquier tipo de juego de preguntas que tiene en mente. Mi nombre es Austin Gregory, y te verá en la primera lección.

    Transcripción 2

    Hola chicos, mi nombre es Austin Gregory, y en este curso vamos a construir un poco fresco juego de preguntas que nos va a permitir para hacer preguntas y dar respuestas opcionales donde el jugador tendrá entonces que elegir cuál es el respuesta correcta para esta pregunta.

    Ahora que es bastante simple y bastante sencillo, pero vamos a tener preguntas básicas que son meras cadenas de preguntas, entonces vamos a tener preguntas de imagen que van a proporcionar una imagen, y luego una etiqueta opcional. Por lo que tiene una imagen de un pájaro, el título puede decir lo que es este pájaro? Ese tipo de cosas, y luego vamos a tener también preguntas clip de audio en el que pueden hacer clic en un botón para reproducir un clip de audio con un título así. Y será como lo es este instrumento de juego, o de qué animal hace este ruido? Y luego vas a tener opciones para elegir.

    Al final de cada set pregunta o cada conjunto tema, o sin embargo ¿Quieres organizar sus preguntas, verá lo fácil que es hacer una vez que nos instalamos nuestro sistema. Vas a quedar anotado en la forma en que hicieron por ese conjunto de preguntas. Así que si hay 10 preguntas y tiene siete de cada 10, que tiene un 70% o un 70, o cualquier tipo de sistema de clasificación arbitraria que desea añadir a su juego, pero en este caso, va a ser todo bastante sencillo y cosas muy sencillas.

    Así que quiero crear un nuevo proyecto. Voy a llamarlo Súper Quiz, y voy a utilizar la última versión que tengo a mi disposición, que es 02/03/2018, y sólo voy a asegurarse de que sólo tengo en 2D. No importa realmente para esto, pero es sólo va a ser un juego de interfaz de usuario. No va a haber ningún gráficos del juego más allá de la interfaz. Así que va a ser algo bastante simple, y voy a hacer clic en Crear proyecto.

    Y si bien es hacerlo, quiero demostrar que en esta carpeta aquí, tengo un par de trozos de medios de comunicación. Tengo una imagen que va a ser sólo un campo que sólo puede utilizar para una pregunta ficticia. Y esto es sólo una imagen de Wikimedia Commons, y luego tengo un esbozo de un país sólo para un ejemplo de otra cuestión de imagen, y luego tengo un clip de audio aquí que es sólo una flauta. Así que lo que quiero hacer en esta primera lección es lo que quiero configurar la interfaz de usuario para nuestro juego de preguntas. Así que lo que quiero hacer en esta primera lección es empezar por la creación de nuestra interfaz de usuario para nuestro juego de preguntas. Vamos a ver si somos capaces de derribar todo hacia fuera en una lección rápida aquí.

    Así que lo que quiero hacer es crear sólo una interfaz de usuario. Vamos a crear un objeto de panel de interfaz de usuario aquí. Ahora lo que esto va a hacer por nosotros es crear un objeto de tela y un objeto sistema de eventos, lo que tenemos que trabajar con el sistema de la unidad de interfaz de usuario. Así que sólo voy a presentar a mi solo pregunta de examen y el diseño respuesta aquí. Y que solo puede ser una mitad y mitad 50-50 cosa aquí, o podemos hacer, no sé, lo que le gustaría hacer aquí, pero sólo voy a tener una sección de mi pregunta y luego una sección para mis respuestas.

    Y no quiero que esto tenga una imagen en él, necesariamente. Podría, si quisiera hacerlo, pero sólo quiero sólo tengo el objeto allí para ayudar amortajarme mi juego aquí. Ahora bien, esto no se va a estirar. Nosotros no vamos a hacer ninguna materia de lujo de interfaz de usuario. Sólo voy a asegurarse de que funciona. Así que sólo voy ancla esta al lado izquierdo aquí como si nada.

    Así que ahora esto va a ser donde podemos poner nuestras preguntas. Cualquiera que sea la plantilla puede ser, pero vamos a empezar con un simple, sólo es cuestión de cuerdas. Sólo una pregunta de texto. Así que estamos en este panel, voy a crear un objeto de texto UI TextMeshPro. Queremos utilizamos TextMeshPro porque es simplemente mejor. A continuación, voy a importar únicamente los elementos esenciales TMP aquí. ¿Qué me va a dar todo lo que necesito para usar TextMeshPro. Así que tuvimos este texto. Sólo voy a centrar este top un poco aquí. Entonces sólo podemos estirarlo.

    Vea Vamos. Sólo tendremos que hacer algo así. Depende de qué tipo de preguntas que planea pedir aquí. Planeo mis preguntas son bastante simple y directo. Sólo una frase, pero es posible que desee hacer algunos párrafos graves. Así que quiere configurar su disposición y su diseño para dar cabida a eso, pero en mi caso, aquí es donde mi pregunta va a ir. ¿Muy genial? Vamos a hacer que una pregunta por lo menos. Está bien, quiero estar seguro de que lo tengo centrado. Y quiero centrarlo horizontal y verticalmente. Así de fácil, y podemos aumentar el tamaño de la fuente un poco aquí. También puede hacer que sea de tamaño automático para que se ajuste en el área de texto que tiene. Así que si usted fuera a seguir escribiendo, por ejemplo. Esto es muy bueno también, que va a cambiar el tamaño para que coincida. Lo cual está muy bien, supongo.

    Así que probablemente quieres hacer eso, de hecho, y en realidad estaba haciendo cola esto de modo que podía poner algo debajo de ella, pero esto es sólo la cuestión de texto. Por lo que no tiene que tener nada debajo de ella allí. Por lo que sólo tendremos que hacerlo justo en el centro, y ahora a la derecha aquí es donde vamos a tener nuestros botones que van a ser las respuestas de la pregunta. Así que si la pregunta de qué color son típicamente elefantes? Usted tendría azul, verde, gris y morado, no sé y, a continuación, usted acaba de hacer clic en gris. Te obtener la respuesta correcta, y seguir adelante.

    Pero incluso si le da la respuesta incorrecta, usted todavía seguir adelante, y al final se le acaba de ver que tienes una incorrecta. Así que para hacer eso, lo que quiero hacer es añadir otro panel que va a ir fuera a la derecha de nuestra pregunta aquí. Así que sólo tienes que arrastrar esto adelante como si nada. Y de nuevo sólo vamos a anclar esta a la derecha. Ahora virguerías interfaz de usuario para esto.

    Estamos manteniendo la interfaz de usuario muy simple. Nos estamos enfocando más en los datos y la interacción con esos datos. El almacenamiento de esos datos y la visualización de los datos, y sólo podemos nombrar estas respuestas, pregunta. Ahora yo quiero ser capaz de tener alguna vez cómo responde a muchas que quiero para cada pregunta. Así que uno podría tener cierta o falsa, se podría tener tres números diferentes como una opción, se podría tener 10 opciones diferentes. Así que en realidad no tiene que conformarse con cuatro respuestas por pregunta. Es sólo una estúpida restricción. Así que no vamos a tener eso.

    Así que con el fin de dar cabida a que vamos a tener que asegurarse de que tenemos un sistema flexible que puede hacer frente a cómo cada vez que tiramos muchos botones en ese país. Así que para hacer eso, voy a tener en las respuestas, en primer lugar, vamos a lanzar un botón aquí para que podamos ver lo que va a ser similar. Así que si acabo de tirar un botón en mi panel de respuestas aquí.

    Ahora en las respuestas, Voy a agregar un componente, y quiero añadir, que ya tiene allí. grupo disposición vertical. Ahora vertical, ya sabes, arriba y abajo. Vamos a diseñar u objetos que están dentro de este panel. Vamos a apilar una encima de la otra, y vamos a asegurarnos de que llena el espacio que tenemos. Así que para hacer eso, vamos a decir Ancho control secundario. Lo que significa que va a estiramiento a la anchura del panel, y la altura tamaño control secundario. Lo que significa que va tramo a la altura del panel. Ahora que no funciona muy bien si tenemos una opción como respuesta, sino también una opción no funciona para una pregunta en un juego de preguntas. Así nunca vamos a tener ese problema.

    Pero si tuviera que duplicar la respuesta, ahora tenemos dos. Nos vemos entonces tenemos dos botones, y que acaba de dividir el espacio de manera uniforme. Que es exactamente lo que queremos, pero puedo decir que vamos a necesitar algo de distancia en el medio hay, así que vamos a añadir un poco de espacio. Y también puedo decir que va a añadir un poco de relleno alrededor del lado de este panel, de modo que no sólo estamos ajustan sobre las esquinas. Tal vez usted quiere eso. Es un poco de mirada fresco de hecho, pero para ello sólo vamos a añadir un poco de relleno alrededor de los lados.

    Cool, ahora si añadimos más botones, se puede ver lo que sucede allí. Tantos botones como desee. Ahora quiero asegurarme de que tomo este texto que hay aquí, quiero borrar ese texto y voy a asegurarse Luego agregar TextMeshPro texto. Queremos mantener todo el texto usando TextMeshPro. Es sólo más nítida, tiene más opciones, es más eficiente para su uso. Es simplemente mejor en todo. Respuesta, y de nuevo vamos a asegurarse de que está centrada verticalmente y horizontalmente, y dejar de tomar este botón aquí y sólo tendremos que cambiar el color en ella un poco.

    No sé qué haríamos con él. Acaba de hacer algo con él entonces, y en el texto de la respuesta aquí, podríamos hacer, si lo hacemos de tamaño automático, que puede funcionar muy bien porque podemos tener ninguna respuesta tamaño de ahí, y también tenemos opciones para el tamaño de automóviles. Por lo que el tamaño mínimo podría ser 14. El tamaño máximo podría ser 60. Eso podría funcionar bastante bien. De esa manera se puede volver muy pequeña, pero tampoco puede ser demasiado grande. Observe el tamaño va ahí abajo.

    Pero no me gusta el margen de alrededor de eso. Así que si tuviéramos que mirar lo que está pasando aquí, puedo agarrar esta caja amarilla y arrastre hacia adentro y que va a ser mi margen en el elemento de texto. Si nos vamos a la configuración extra, tenemos márgenes, izquierda, arriba, derecha e inferior. Yo sólo puedo añadir márgenes por todas partes, así como así, y ahora vamos a intentarlo de nuevo. Hay que ir, ahora no se ajustan sobre el botón. Mirada en el juego ver aquí. La vista está en juego aspecto libre, y desde nuestra interfaz de usuario es un poco, no es muy lujoso como estaba diciendo. Vamos a asegurarnos de que limitemos a 16 todo por nueve años, y sólo para este ejemplo, y vemos que, que causa un problema aquí, debido al tamaño de esta.

    Así que lo que podríamos hacer, es que sé que dijimos que no íbamos a hacer nada de lujos, pero quiero asegurarme de que trabajamos en todos los tamaños. Ir a mi lienzo aquí e ir a modo de escala de la interfaz de usuario. Puedo establecer este a escala con el tamaño de pantalla. Lo que significa que cuando mis cambios de tamaño de la pantalla, esto también escalas. No voy a ser completamente estático, pero tenemos un par de cosas que hacer aquí.

    Quiero asegurarme de la anchura y la altura es de 50-50. La forma en que afecta a la escala, la anchura y la altura tanto hacerlo con exactitud, y la resolución de la referencia que le gustaría ser un poco más de lo que estamos viendo allí. Así que tal vez sólo 720 P, y que nos da un punto de partida para que podamos empezar a escalar nuestros objetos de trabajo con esto. Por lo tanto, sólo una especie de arrastre esto aquí, y luego vamos a arrastrar esta terminado. Y sólo podemos hacer este ajuste. Deberíamos haber hecho esto antes que hicimos el diseño, pero a veces tienes que volver atrás y hacer algunos cambios, y eso es perfectamente bien. Así que hay que ir.

    Ahora bien, si tuviera que entrar aquí y yo tuviera que volver a aspecto libre, no se rompe por completo como era antes. Debido a que estamos reducido para igualar, pero siempre y cuando nos mantengamos dentro 16 a las nueve de resolución, deberíamos estar bien. Si tuviera que tirar de la visión del juego aquí, se va a quedar dentro de los 16 a las nueve, y lo último que quiero hacer de esta lección es lo que quiero crear una casa prefabricada de nuestros botones que tenemos en busca de respuestas, ya que vamos a estar capaz de crear los que están en tiempo de ejecución para cada respuesta que tenemos por pregunta.

    cosas bastante básico. Voy a crear una carpeta prefabricada muy rápido aquí. Prefabricada, y vamos a poner un botón de respuesta en ese país. Sólo va a nombrar este botón de respuesta. Y voy a eliminar estos otros botones aquí. Y quiero llamo a esto, en realidad como nuestra pregunta prefabricada, como nuestro panel de pregunta. Texto, que va a ser llamado texto de la pregunta, y eso es porque esto va a ser el diseño de pregunta predeterminado. Vamos a tener el diseño de audio, vamos a tener el diseño de la imagen, y vamos a diseñar los de la siguiente lección, chicos.

    Así que mi nombre es Austin, y voy a verte allí.

    interesado en continuar? Echa un vistazo a la plena Desarrollar un Sistema de Prueba reutilizable por supuesto, que es parte de nuestra EdTech Mini-Grado .

    Mensajes relacionados

Deja una respuesta

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