Diferencias

Muestra las diferencias entre dos versiones de la página.

--- es:manual:items:interactivos:unity [2021/06/23 10:30] – root
+++ es:manual:items:interactivos:unity [2023/05/08 12:26] (actual) – root
@@ Línea 2: / Línea 2: @@
 ===== Interacción con Unity =====
-[[https://unity.com|Unity]] es un motor de videojuego multiplataforma que puede funcionar dentro de una página web. Unity se basa en un entorno propio para desarrollo de videojuegos, lo que proporciona mucha flexibilidad a la hora de configurar ciertas tareas. Unity se basa en el lenguaje de programación [[https://docs.microsoft.com/es-es/dotnet/csharp/tour-of-csharp/|C#]], pero puede interactuar con código [[wpes>javascript]] para comunicarcíon entre la aplicación y la página.
+[[https://unity.com|Unity]] es un motor de videojuego multiplataforma que puede funcionar dentro de una página web. Unity se basa en un entorno propio para desarrollo de videojuegos, lo que proporciona mucha flexibilidad a la hora de configurar ciertas tareas. Unity se basa en el lenguaje de programación [[https://docs.microsoft.com/es-es/dotnet/csharp/tour-of-csharp/|C#]], pero puede interactuar con código [[wpes>javascript]] para comunicarcíon entre la aplicación y la página web.
-A través de esta interactividad Unity-Javascript se pueden integrar llamadas desde la pagina que contiene un ítem en Siette, y el juego, lo que permite construir una pregunta interactiva.
+A través de esta interactividad Unity-Javascript mediante [[https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html|WebGL]] se pueden integrar llamadas desde la pagina que contiene un ítem en Siette, y el juego, lo que permite construir una pregunta interactiva.
 A continuación se muestran ejemplos que como se ha resuelto en algunos casos concretos:
@@ Línea 11: / Línea 11: @@
 Se trata de la implementación del conocido juego [[wpes>Simon_(juego)|Simón]], en el que se emiten secuencias de sonidos, cada vez mas largas, asociadas a unos botones de colores, que el alumno debe reproducir en el mismo orden. Esta pensado para medir la capacidad de memoria visual y sonora.
-=== Ejecución del juego ===
+El juego es configurable, se puede modificar la imagen del fondo, el número máximo de secuencias que se presentan, la velocidad de exposición, etc. y presenta unas instrucciones breves al comenzar mediante un texto leído de forma automática.
+{{ es:manual:items:item-unity-simon-4.png?400 | }}
+Como resultado de la interacción el juego devuelve a Siette varios valores numéricos, correspondientes al número de secuencias correctas, incorrectas, tiempo de ejecució, etc.
+=== Proceso de carga del juego ===
 El juego esta implementado en Unity, aunque para Siette se trata de un ítem interactivo [[es:manual:items:interactivos:evaluacion|integrado mediante de javascript]] por lo que usará las mismas funciones. En este caso, el enunciado de la pregunta contiene el siguiente script:
@@ Línea 56: / Línea 62: @@
 </script>
 </code>
+La cabeceera de este código carga los ficheros auxiliares de Unity, y a continuación establece un ''div'' de dimensiones ''480x300'' sobre el que se cargará el juego. Unity resscala todas las imagenes para adaptarse al tamaño del ''div'' en el que se ejecuta. El juego propiamente dicho se carga mediante la sentencia:
+<code javascript>
+   var unityInstance = UnityLoader.instantiate("unityContainer",
+          "/siette.htdocs/techcat/unity/Simon/Build/Simon.json",
+          {onProgress: UnityProgress});
+</code>
+lo que provoca que aparezca el logo de Unity y comience la carga:
+{{ es:manual:items:item-unity-simon-1.png?400 | }}
+El juego está programado para esperar a recibir los parámetros antes de comenzar propiamente su ejecución, presentando una vez concluida la carga, la siguiente pantalla
+{{ es:manual:items:item-unity-simon-2.png?400 | }}
+La carga del juego y de la pagina web que lo contiene se hace de forma asíncrona. Los parámetros se envian al juego tan pronto como se ha cargado la página y se invoca la ejecución de la función ''load()'' que pasa los parámetros de inicialización a la aplicación en Unity, que comienza su ejecución:
+{{ es:manual:items:item-unity-simon-3.png?400 | }}
+Un detalle importante a tener en cuenta es que el juego puede no haber terminado de cargarse al ejecutar la función ''load()'', por lo que esta función lo que hace es programar (mediante ''setTimeout'') diversas llamadas de forma iterativa para garantizar que la aplicación Unity recibe los mensajes.:
+<code javascript>
+    function load() {
+       for(conta=5000; conta<60000; conta+=2500) {
+           setTimeout(function()  { setParameters(2,3,6); }, conta );
+       }
+    }
+</code>
+=== Final del juego ===
+El final del juego se puede producir por dos circunstancias:
+  * El alumno ha completado todas las secuencias que se le han propuesto. En este caso el juego ejecuta una llamada a la [[es:manual:items:interactivos:evaluacion#Función RespuestaActiva()|función javascript RespuestaActiva()]] (ya implementada en Siette, véase la [[es:manual:items:interactivos:evaluacion|integración con javascript]]).
+  * El alumno pulsa el botón ''Siguiente pregunta'', indicando que ya no quiere seguir jugando. Esto provoca que Siette antes de terminar programe una llamada a la [[es:manual:items:interactivos:evaluacion#Función RespuestaPasiva()|función javascript RespuestaPasiva()]], que a su vez llamará a la [[es:manual:items:interactivos:evaluacion#Función evaluacion()|función evaluacion()]].
+<code javascript>
+   function evaluacion() {
+        unityInstance .SendMessage('Log', 'Stop');
+   }
+</code>
+Normalmente, esta función debería devolver un valor, pero en esta ocasión no lo hace, sino que simplemente emite un mensaje para la aplicación Unity, indicandole que pare el juego. Internamente al juego este mensaje desencadena una llamada a la [[es:manual:items:interactivos:evaluacion#Función RespuestaActiva()|función RespuestaActiva()]], y el proceso continúa como en el caso anterior.
+Las llamadas a a la [[es:manual:items:interactivos:evaluacion#Función RespuestaActiva()|función RespuestaActiva(respuesta)]], tiene como argumento una cadena de texto que contiene una secuencia de valores con el siguiente formato:
+;#;
+'{' <i>respuesta0</i> , <i>respuesta1</i> , <i>respuesta2</i> , .... '}'
+;#;
+En este caso estos valores son indicadores del resultado obtenido con la interaccion del juego en concreto:
+          * Número de secuencias correctas ,
+          * Número de secuencias incorrectas ,
+          * Máximo número de secuencias consecutivas correctas ,
+          * Máximo número de secuencias consecutivas incorrectas ,
+          * Tiempo de juego
+Siette almacena evaluará esta respuesta, por ejemplo mendiante [[es:manual:items:patron:funciones|patrones de funciones de evaluación]], y onbtendrá así una evaluación de la actividad realizada en el juego.
+=== Presentación de resultados ===
+Cuando Siette necesite presentar los resultados de esta evaluación, volverá a cargar el ítem que contiene el juego javascript y llamará a la [[es:manual:items:interactivos:evaluacion#Función resolver()|función resolver(respuesta,correcto)]], pasandole como argumentos la respuesta del alumno (es decir, la cadena de caracteres con los indicadores que recibió como respuesta); y la corrección de cada una de los [[es:manual:items:patron:funciones|patrones de funciones de evaluación]]. La  [[es:manual:items:interactivos:evaluacion#función resolver()]] lo que hace es simplemente pasarle al juego esta respuesta que la muestra como resultado.
+<code javascript>
+   function resolver(respuesta, correccion) {
+       play = false;
+       for(conta=2500; conta<60000; conta+=2500) {
+           setTimeout(function() {
+               unityInstance.SendMessage("Log", "Solve", respuesta);
+           }, conta );
+       }
+    }
+</code>
+{{ es:manual:items:item-unity-simon-5.png?400 | }}
+En la imagen puede verse que Siette tambien muestra la respuesta del alumno, (la cadena de indicadores recibida). Esta duplicidad de información puede evitarse añadiendo ''return true'' al final de la [[es:manual:items:interactivos:evaluacion#función resolver()]], que inidica a Siette que la corrección de la pregunta ya se ha mostrado. Nótese que al igual que en la carga del juego para su ejecución, hay que esperar a que el juego se cargue para poder enviarle los mensajes. No hemos encontrado manera de obtener esta información desde la página javascript, por lo que una manera de sortear el problema es programar una secuencia de mensajes para estar seguros que el juego los recibe.
+En el [[#Ejemplo 2|siguiente ejemplo]] se describe en detalle como hay que programar en Unity la recepción y envío de todos estos  mensajes.
 ==== Ejemplo 2 ====
@@ Línea 141: / Línea 230: @@
 </code>
-==== Paso de parámetros de configuración ====
+=== Paso de parámetros de configuración ===
 Dentro de esta página se ha definido una funcion javascript ''setParameters(curvas, textura)'' a la que se llama desde el código que se ha escrito en el enunciado y que pasa dos parámetros que controlan algunos aspectos del juego, en este caso, si la carretera tiene curvas o es recta y la textura de la carretera. Modificando la llamada a esos parametros se obtiene una cambio en el funcionamiento del juego. Por ejemplo con la llamada ''setParameters(2,1)'' se obtiene este otro juego: