es:manual:items:interactivos:unity []

¡Esta es una revisión vieja del documento!

Interacción con Unity

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 C#, pero puede interactuar con código javascript para comunicarcíon entre la aplicación y la página.

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 continuación se muestra un ejemplo que como se ha resuelto en un caso concreto:

Se trata de un minijuego denominado EndlessRoad con el que se quiere medir el tiempo y la constancia que un niño tiene en la realización de una tarea concreta. El objetvo final es medir la función ejecutiva de inhibición. Para ello se propone este juego en el que aparece un coche, una carretera y un regalo al final de la carretera.

El regalo nunca llega a alcanzarse, pero el niño debe intentarlo procurando no salirse de la carretera. Si lo hace aparece un tono de aviso.

Finalmente el niño se aburre y pulsa el botón Siguiente, o bien trascurren 10 minutos y el propio sistema fuerza la terminación, obteniendo la respuesta.

Como resultado de la interacción el juego devuelve a Siette varios valores numéricos, correspondientes al tiempo que ha estado el coche dentro de la carretera, el tiempo que ha estado fuera, el número de veces que se ha salido, etc. Con estos datos Siette realiza la evaluación utilizando como patrones funciones de evaluación a las que asigna diversas puntuaciones según una determinada combinación de valores.

El juego esta implementado en Unity, aunque para Siette se trata de un ítem interactivo integrado mediante de javascript por lo que usará las mismas funciones. En este caso, el enunciado de la pregunta contiene el siguiente script:

<iframe allowfullscreen 
   id="unity" 
   src="/siette.htdocs/techcat/unity/EndlessRoad/index.html" 
   width="960" height="600"
>
</iframe>
 
   <script>
       function evaluacion() {
          var iframe = document.getElementById("unity");
          iframe.contentWindow.evaluacion();
      }
 
       for(conta=2500; conta<60000; conta+=2500) {
          setTimeout(
             function()  { 
               document.getElementById("unity").contentWindow.setParameters(1,0);  
             }
             , conta );
      }
    </script>

Esta pagina carga el juego en unity en un iframe que contiene el código de inicialización de Unity, en concreto para este ejemplo este codigo es el siguiente:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Endless Road</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate(
                                         "gameContainer", 
                                         "Build/EndlessRoad.json", 
                                         {onProgress: UnityProgress}
                                      );
     function RespuestaActiva(respuesta) {
          window.parent.RespuestaActiva(respuesta);
     }
     function evaluacion() {
           gameInstance.SendMessage('Log', 'OnApplicationQuit');
     }
     function setParameters(curvas, textura) {
           gameInstance.SendMessage('MaterialSelector', 'SelectMaterial',textura); 
           gameInstance.SendMessage('MaterialSelector', 'SelectScene',curvas);
       } 
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
    </div>
  </body>
</html>

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:

Como puede observarse en el código del enunciado, la llamada a esta función se repite varias veces a lo largo de la carga del juego, esto es debido a que hasta que el juego no termina de cargar las llamadas no tienenefecto, por lo que se repiten varias veces para conseguir este efecto.

En el código del iframe, las llamadas a la funcion setParameters(curvas, textura) se traducen en dos llamadas a la funcion SendMesssage que es la que envia el mensaje a la instancia de Unity. (Véase la documentación de Unity sobre la integración con javascript).

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;
using UnityEngine.SceneManagement;
 
public class MaterialSelector : MonoBehaviour {
    ....
    string SceneName;
    public void SelectScene(int Scene) {
        if (Scene == 1) {
            SceneName = "Straight";
            SceneManager.LoadScene(SceneName);
        } else if (Scene == 2) {
            SceneName = "Curve";
            SceneManager.LoadScene(SceneName);
        }
    }
}