Integrando Django con Html5

En el anterior post intentamos explicar el mecanismo del elemento «canvas» de html5. Ahora bien, cada usuario de Vands mantendrá una configuración diferente al resto. Por ello, tanto el conjunto de elementos que forman una vista como su disposición en la escena, variarán en función del desarrollo de cada jugador. ¿Cómo es posible adaptar nuestra animación a cada usuario?

Javascripts como templates

Para el que no esté familiarizado con django, explicaremos por encima su sistema de plantillas con el fin de que pueda entenderse el resto del post. De cualquier forma, recordamos que podéis acceder a una documentación bastante completa a través de este enlace: django-book.

Como algunos sabrán, django utiliza plantillas a las que posteriormente se les proporciona un contexto a través de diccionarios. Explicaremos esto con un breve ejemplo:

Plantilla «myname.html»:

Hola, me llamo {{ name }}.

Diccionario:

d = {'name':'Carlos'}

Renderizando:

render_to_response('myname.html',d)
Hola, me llamo Carlos.

Ahora, si recordamos, para pintar en un elemento canvas necesitábamos un javascript que lo asociara a una variable y nos permitiera indicar qué queremos hacer con éste. Vands es un juego basado en «sprites», por lo que la función de dibujo estrella será «drawImage». Teniendo esto, he aquí un ejemplo de cómo dibujar el cuerpo de un personaje en nuestro lienzo:

window.onload = function() {
   canvas = document.getElementById("canvas");
   contexto = canvas.getContext("2d");
   //Dibujamos el cuerpo del jugador
   contexto.drawImage(jugador.body_img, 
      jugador.x, jugador.y,
      jugador.body_width, jugador.body_height);
 }

De esta forma podemos dibujar la imagen «jugador.body_img» en las coordenadas («jugador.x», «jugador.y»)  y con unas dimensiones de «jugador.body_width» para la anchura, y «jugador.body_height» para la altura.

En Vands, el usuario pone cara a su personaje subiendo una foto. Ésta deberá ser ajustada para centrarla respecto al cuerpo. Este proceso implica que las coordenadas y las dimensiones de la cara sean diferentes para cada jugador.

Una base de datos se encarga de almacenar esta configuración para después ser recuperada por django:

Tabla «appearance»:

Donde:

• «face_x» es la posición x relativa de la cara respecto al cuerpo.
• «face_y» es la posición y relativa de la cara respecto al cuerpo.
• «face_w» es la anchura de la cara.
• «face_h» es la altura de la cara.

Para adaptar nuestro lienzo a las coordenadas del usuario activo, usaremos nuestro javascript a modo de plantilla para que, posteriormente, django pueda renderizarlo. Incluyendo en nuestro diccionario el objeto «appearance» obtenido de la tabla de arriba, obtenemos nuestro archivo .js final.

Plantilla «dibujarJugador.js»:

window.onload = function() {
   canvas = document.getElementById("canvas");
   contexto = canvas.getContext("2d");
   //Dibujamos la cara del jugador
   contexto.drawImage(jugador.face_img, 
      jugador.x+{{ appearance.face_x }}, jugador.y+{{ appearance.face_y }},
      {{ appearance.face_w }}, {{ appearance.face_h }});
   //Dibujamos el cuerpo del jugador
   contexto.drawImage(jugador.body_img, 
      jugador.x, jugador.y,
      jugador.body_width, jugador.body_height);
 }

Dibujamos primero la cara, pues el cuerpo se pintará encima a modo de máscara.

Renderizando:

//Obtenemos la apariencia del usuario que mantiene la sesión activa
appearance = Appearance.objects.get(user=request.session['user'])
render_to_response('dibujarJugador.js',appearance)

resultado:

window.onload = function() {
   canvas = document.getElementById("canvas");
   contexto = canvas.getContext("2d");
   //Dibujamos la cara del jugador
   contexto.drawImage(jugador.face_img, 
      jugador.x+2.5, jugador.y+1,
      30, 50);
   //Dibujamos el cuerpo del jugador
   contexto.drawImage(jugador.body_img, 
      jugador.x, jugador.y,
      jugador.body_width, jugador.body_height);
 }

Como adivinaréis, esto puede aplicarse a todo lo relacionado con la customización de la escena del juego. Por ejemplo, los instrumentos que posee el jugador o los miembros con los que forma alguna de sus bandas.