Tutorial Motor o_o – Creación de escenas y acción

Una vez que hemos declarado los objetos que se usarán, es hora de instanciarlos. Como se suele decir en programación orientada a objetos, un objeto es como un molde de galletas y los objetos son las galletas… Hagamos algunas galletas entonces.

Los objetos deben crearse dentro de una escena, y una escena es simplemente una función que se pasa como argumento al método crearEscena de o_o.

o_o.crearEscena(nombre,nuevaEscena);

  • nombre(string): es el nombre que se asignará a la escena. Se usará posteriormente cuando queramos cargarla, por lo que es conveniente que el nombre sea descriptivo y no esté repetido.
  • nuevaEscena(function): se trata de una función que se encargará de crear las instancias de los objetos que figurarán en la escena y meterlos en el array de objetos de o_o. El array de objetos es el conjunto de objetos que deberán actualizarse y pintarse en cada iteración.

Un ejemplo sencillo de escena usando el objeto creado en la sección anterior podría ser este:

o_o.crearEscena("escenaPrincipal",function(){
  var un_cuadro = new Cuadro(50,1);
  o_o.agregarObjeto( un_cuadro );
});

En la función, hemos creado el objeto un_cuadro a partir del objeto Cuadro. En la siguiente línea, lo hemos agregado al array de objetos que se actualizarán y pintarán en cada iteración. Para agregar un objeto hemos usado agregarObjeto:

o_o.agregarObjeto(nuevoObjeto);

  • nuevoObjeto (object): el objeto que le pasemos debe tener el método actualizar y el método pintar tal y como se describió en la sección anterior.

Cuando mandemos al Motor o_o que ponga en marcha la escena “escenaPrincipal“, se eliminarán todos los objetos que haya en el array de objetos y se ejecutará esta función, que creará y añadirá los nuevos objetos a dicho array.

Hay que tener en cuenta, que lo que hemos hecho es definir la escena, pero no la hemos puesto en acción. Para poner en acción una escena, primero debe haber sido definida, y después hay que usar el método o_o.accion:

o_o.accion(nombreEscena,archivos);

  • nombreEscena (string): es el nombre de la escena que queremos poner en marcha. Tras la orden de acción, se pondrá en marcha la escena que indiquemos.
  • archivos (string[]): es opcional, pero si se incluye, se trata de un array de strings que indicarán los archivos que deberán pre-cargarse antes de poner la escena en marcha. Es decir, si la escena que requerimos utiliza un cierto objeto que está declarado en un archivo aparte, este archivo deberá ser pre-cargado antes de poder poner en acción esta escena.

Nota: la ruta de los archivos, siempre serán relativas al archivo o_o.js

Por ejemplo, para poner en marcha la escena que hemos declarado antes, necesitaremos pre-cargar el archivo cuadro.js y la sentencia será:

o_o.accion("uno",[
  "cuadro.js"
]);

Una vez que se precarga un archivo, no es necesario volver a hacerlo porque permanecerá en memoria. Esto quiere decir que existe la opción de precargar todos los archivos que se necesitarán para todas las escenas con la primera escena, y no hará falta hacer más precargas. Esto es a elección del programador.

Las tres funciones de o_o que hemos visto en esta sección, tienen álias asociados que son:

o_o.crearEscena() = o_o.E()
o_o.agregarObjeto() = o_o.O()
o_o.accion() = o_o.A()

Usando esto, nuestro programa podría quedar así:

o_o.I(400,300);
o_o.E("escenaPrincipal",function(){
  o_o.O( new Cuadro(50,1) );
})
o_o.A("escenaPrincipal",["cuadro.js"]);

Aquí además, hemos evitado la variable intermedia un_cuadro, y menos creado directamente el objeto como argumento de o_o.O es decir, o_o.agregarObjeto.

Anterior: Creación de objetos
Siguiente: Un ejemplo comentado
Índice: Presentación