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.