Para programar con el framework o_o, es necesario saber programar en Javascript, al menos a nivel básico y algo sobre la programación orientada a objetos. Todas las cosas que aparecerán en nuestras escenas, serán objetos que cuenten con su constructor y los métodos actualizar y pintar, como mínimo.

Nota: Si esto fuese Java lo arreglaríamos con herencia o un interface, pero para nosotros bastará con tener en cuenta que los objetos deben tener estos métodos.

Es muy recomendable que cada objeto esté en un archivo Javascript independiente, pero esto no es obligatorio, y en algunos casos incluso podría ser buena idea tener más de una declaracion en el mismo archivo. Esto se deja a discreción del programador.

Veamos un ejemplo, un cuadradito que rebota de izquierda a derecha:

function Cuadro(posInicial,velInicial) {
  this.pos = posInicial;
  this.vel = velInicial;
}

Cuadro.prototype.actualizar = function (ms,cam) {
  this.pos += this.vel;
  if(this.pos>400) this.vel = -Math.abs(this.vel);
  if(this.pos<0) this.vel = Math.abs(this.vel);
}

Cuadro.prototype.pintar = function (ctx,cam) {
  ctx.fillStyle = "#000";
  ctx.fillRect(this.pos, 50, 20, 20);
}

El constructor: recibe los datos necesarios para crear el objeto, en este caso son la posición inicial y la velocidad inicial, pero podrían ser los que queramos. Cualquier tarea que se tenga que hacer al iniciar el objeto, se deberá hacer aquí.

El método actualizar: se ejecuta en cada iteración antes de pintar, y recibe siempre dos argumentos, los milisegundos que han pasado desde la última actualización y el objeto cámara de la escena.
Aunque las iteraciones están programadas para que se repitan cada 33 milisegundos (30 iteraciones por segundo), esto no siempre se consigue y confiar en este valor para conseguir animaciones suaves es poco recomendable. Con el valor de los milisegundos se puede hacer, si se quiere, una actualización mucho más exacta calculando los movimientos en función al incremento de tiempo.
Con respecto a la cámara, se trata de un objeto que contiene las propiedades x e y, y sirve para saber qué parte de la escena es la que se ve en la pantalla. Esto es útil para no actualizar objetos que no sean visibles en el momento y así ahorrar tiempo.

El método pintar: se ejecuta en cada iteración después de actualizar, y recibe siempre dos argumentos, el contexto gráfico para poder pintar y el objeto cámara de la escena.
Para pintar en un CANVAS, se necesita su contexto gráfico. En o_o es importante saber, que cada escena tiene su propio CANVAS (virtual) que no es visible. Cuando todos los objetos de la escena se han pintado en este CANVAS virtual, se copia todo al CANVAS real. Esto evita que se vean parpadeos o partes a medio pintar. El contexto que recibe el objeto es, por lo tanto, el del CANVAS virtual y puesto que todos los objetos lo usarán, es muy recomendable empezar con un save() y terminar con un restore(), aunque si se sabe lo que se está haciendo no es obligatorio.
También se recibe el objeto cámara de la escena, igual que en el método actualizar, con el objetivo, en este caso, de no pintar objetos que no sean visibles en el momento y así ahorrar tiempo.

En cada iteración de la escena, se ejecutan los métodos actualizar de todos los objetos que se hayan creado, y una vez hecho esto, se ejecutarán los métodos pintar de todos estos objetos. Por último se copia la imagen que se haya creado en el CANVAS virtual, al CANVAS real.

Anterior: Inicializando
Siguiente: Creación de escenas y acción
Índice: Presentación