Tutorial Motor o_o – Inicializando

Inclusión del archivo o_o.js
Para poner en marcha el motor o_o, es necesario incluir el archivo de javascript o_o.js en el documento HTML, y después ejecutar el programa que queramos. Al no tener dependencias complicadas, ni cargas asíncronas, bastará con poner estas líneas justo antes del cierre de la etiqueta </BODY>:

<script type="text/javascript" src="o_o.js"></script>
<script type="text/javascript">
     // Programa ...
</script>

La ruta, por supuesto, debe ser la correcta. Si se hace así, no hará falta usar eventos onload o ready, para detectar la carga completa del documento. Aunque se puede hacer si se quiere.

Iniciando el Motor o_o
Para poner en marcha el framework, se usa el método iniciar:

o_o.iniciar(anchoCanvas, altoCanvas, configuracion);

El anchoCanvas y el altoCanvas son obligatorios y se especifican en píxeles. Y la configuración, es un objeto que permite añadir opciones extra de inicialización, como pueden ser el uso del ratón, o si se verá a pantalla completa. La lista de opciones es:

  • id (string): Permite especificar el id de un elemento del documento, que será el que usemos como CANVAS. Cuando damos este valor, el elemento con ese id será eliminado del documento y sustituido por el CANVAS en el que se realizará la ejecución del programa. Por lo tanto, el elemento puede ser cualquier cosa: una imagen, un enlace, un botón… es indiferente. Si no se especifica, se creará un CANVAS y se añadirá al final del BODY.
  • pantalla (string): Puede tomar los valores “normal” o “completa”. En pantalla normal, el CANVAS ocupará su lugar en el documento y su ancho y alto serán los que hemos especificado. En pantalla completa, el CANVAS ocupará el máximo posible de la ventana del navegador y estará centrado. Si no dice nada, su valor por defecto es “normal“.
    Nota: Aunque con la pantalla completa, el tamaño será aparentemente distinto al que hemos asignado, internamente a la hora de programar, las coordenadas seguirán estando referidas al tamaño especificado y no al que se ve. Es decir, si especificamos un ancho de 100px, aunque a pantalla completa se visualice como 800px, el punto más alejado de la derecha seguirá siendo la posición x=100, no la 800.
  • pixel (integer): Permite hacer un zoom para conseguir un efecto tipo pixel-art. Por defecto su valor es 1.
  • teclas (boolean): Sirve para indicar que se desea detectar pulsaciones de teclas en nuestro programa. Esto activará los eventos de detección de teclas. Es false por defecto.
  • raton (boolean): Sirve para indicar que se desea detectar los movimientos y clicks del ratón. Si se activa, se pondrán en marcha los eventos de detección, y se gestionarán los datos en cada iteración. Es false por defecto.
  • toques (boolean): Sirve para indicar que se desea detectar los toques de dedos en pantallas táctiles. Si se activa, se activarán los eventos de detección de estos toques, y se actualizará la información en cada iteración. Es false por defecto.

Nota: Con respecto a teclas, ratón y toques, es recomendable no activarlos a menos que se vayan a usar, para mejorar el rendimiento del programa.

Como es de esperar, no es necesario especificar todas las opciones, solamente las que se quieran cambiar. Un ejemplo con algunas de ellas:

o_o.iniciar(400, 300,{
    id: "juego",
    pantalla: "normal",
    raton: true,
    toques: true
});

La función iniciar, tiene un álias que es I mayúscula. Así que la forma más simple de poner en marcha un proyecto con el motor o_o, podría ser:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>o_o</title>
  </head>
  <body>
    Ejemplo:<br>
    <script type="text/javascript" src="o_o.js"></script>
    <script type="text/javascript">
      o_o.I(400,300);
    </script>
  </body>
</html>

Guarda este código en un archivo llamado index.htm y recuerda tener el archivo o_o.js en la misma carpeta. Con esto, ya debería aparecer un CANVAS con el logotipo del Motor o_o, y en el log de la consola deben haber aparecido mensajes informativos.

Siguiente: Creación de un objetos
Índice: Presentación