viernes, 21 de febrero de 2014

CraftyJS - Viewport (II) - Trucos de cámara

Como no podía ser de otra manera, e al igual que cuando me estaba ocupando de la animación, sale una nueva versión de CraftyJS y me lo cambian todo obligándome a reescribir el artículo por completo.

Por lo tanto, todo lo aquí escrito, sólo tiene validez a partir de la versión 0.6.2 de CraftyJS.

Continuamos el artículo del viewport donde lo dejamos viendo otras funcionalidades:

Viewport.pan

Si lo último que vimos fue cómo hacer que la cámara siguiera a nuestra entidad, ahora lo que haremos es desplazar la cámara por sí misma en un movimiento PANorámico.

La instrucción es bien simple:

Crafty.viewport.pan(pixeles_x, pixeles_y, tiempo_en_ms);

Es decir, que le indicamos al viewport cuantos píxeles queremos desplazar la cámara sobre cada eje y el tiempo expresado en milisegundos en que queremos que la cámara llegue a destino.

Se puede ver un ejemplo funcionando de esto aquí.  

Viewport.pan con una vuelta de rosca

Ahora le vamos a dar una vuelta de rosca a este tema, concretamente una vuelta de rosca de ratón. Haremos que nuestra cámara se mueva con lo que los albiones llaman el 'mouse wheel' y nosotros la ruedecilla del ratón.



Nosotros podemos interceptar eventos en CraftyJS con la función .bind que tiene la siguiente sintaxis:

Crafty.bind(evento, acción)

O sea, que podemos hacer lo siguiente:

Crafty.bind("MouseWheel", function(e) {
    var delta = (e.wheelDelta ? e.wheelDelta/120 : e.detail);
   Crafty.viewport.pan(-delta*30, -delta*20, 100);
    });

¿Qué hace esto?

Está claro que delta es un modificador que aplicaremos al desplazamiento del viewport, básicamente para que suba o baje en función del sentido en el que movamos la ruedecilla.

Bien, pues cuando interceptamos el evento de la rueda, éste tiene una propiedad llamada detail con valor +/- 1 si usamos Firefox u Opera o una propiedad wheelDelta con valor +/- 120 si usamos otro navegador.

Es por eso que preguntamos por la propiedad y la dividimos por 120 o la dejamos tal cual, con el objeto de acabar teniendo un +1 si la rueda sube y un -1 si la rueda baja.

Finalmente, dado que en Crafty el eje y incrementa de arriba hacia abajo, le cambiamos el signo para lograr el efecto deseado.

Podéis ver esto y un bizcocho aquí.

Zoom!

Otro efecto que podemos hacer con viewport es un zoom. El zoom además del uso que nos viene a la cabeza de forma intuitiva, puede ser una buena manera de adaptar nuestro juego al tamaño de la pantalla sobre el que se ejecute sin necesidad de redimensionar nada.

Crafty.viewport.scale

Sintaxis:

Crafty.viewport.scale(aumento)

El parámetro aumento es el multiplicador del zoom. Es decir, con un aumento 2, algo que mide 10 píxeles pasará a medir 20. Si ponemos un aumento de 0.5 (1/2), algo que mide 10 píxeles pasará a medir la mitad.

Si pasamos 0 o 1 a la función, todo adquirirá el tamaño normal.

Crafty.viewport.zoom

Sintaxis:

Crafty.viewport.zoom(aumento, pos_x, pos_y, tiempo)

Hace el zoom sobre un punto (x,y) en el tiempo que queramos (expresado en milisegundos). De todas formas aquí debemos tener en cuenta que el aumento es relativo. Es decir, al contrario que con scale que redimensiona al tamaño que queramos, zoom redimensiona sobre la última redimensión. Esto es especialmente importante si hacemos zoom de manera progresiva, ya que el aumento / disminución del tamaño sucederá de manera exponencial.
Ni que decir tiene, que a todo esto le podemos añadir el rollo de la ruedecilla de antes y que nos quede algo asín.
Espero que hayáis disfrutado este artículo tanto como yo escribiéndolo y otros formalismos que se os ocurran. Nos vemos a la próxima.

sábado, 1 de febrero de 2014

Introducción a CakePHP (III): Ver el contenido de un registro

Si llegáis por primera vez a esta especie de minitutorial de aficionado, os aconsejo que empecéis por el principio por aquí. Vimos en el capítulo anterior cómo ver los datos de una tabla. Ahora lo que intentaremos es acceder al detalle de un registro... la verdad es que misterio poco... vamos a verlo...

Vamos a incluir esto en nuestro ArticuloController.

public function ver($id = null) {
$this->Articulo->id = $id;
$this->set('articulo', $this->Articulo->read());

}

Vemos que la acción ver recibe un parámetro que asignará al modelo Artículo.
Después mediante set y bajo las variable artículo pasamos a la vista ver (recordemos que tiene el mismo nombre que la acción), el resultado de Articulo->read().

read(), si lo pasamos sin parámetros, devuelve un array con el registro que hemos seleccionado.

Es decir, con la base de datos de ejemplo que creamos en el primer capítulo, si llamáramos a lo siguiente http://misitio/cake20/articulos/ver/2 nos devolverá:

Array
        (
            [Articulo] => Array
                (
                    [id] => 2
                    [title] => Un título otra vez
                    [body] => Y sigue el cuerpo del artículo.
                    [created] => 2014-01-27 23:36:46
                    [modified] => 
                )

        )

Por otro lado... ya sabemos del capítulo anterior, que realmente esto tal como está daría error. Debemos definir la vista.

En nuestra carpeta /app/View/Articulos, creamos el archivo ver.ctp:

<!-- File: /app/View/Articulos/ver.ctp -->

<h1><?php echo $articulo['Articulo']['title'];?> </h1>
<p><small>Creado: <?php echo $articulo['Articulo']['created'];?></small></p>
<p><?php echo $articulo['Articulo']['body'];?></p>

Ahora ya si hacemos:
http://misitio/cake20/articulos/ver/2


Podremos ver lo que hemos cometido:

Un título otra vez

Creado: 2014-01-30 17:28:48
Y sigue el cuerpo del artículo.

HtmlHelpers

Los helpers son clases que nos ayudan a completar acciones habituales como realizar un link, crear un formulario, formatear texto y números, utilizar Javascript y AJAX...

Cuando queramos generar html de manera dinámica, podemos hacerlo como siempre: con echos de las etiquetas o dejar que CakePHP lo genere por nosotros. Para ello usaremos el HtmlHelper.

¿Qué queremos hacer?  Pues convertiremos el título de nuestro artículo en un enlace que nos llevará a otra pantalla en la que veremos el detalle del registro. Hemos visto una líneas más arriba que podíamos llamar al detalle de un registro con esto:  http://misitio/cake20/articulos/ver/id. Lo que tenemos que hacer es entonces que el enlace se genere dinámicamente referenciando al registro sobre el que se posiciona.

Para acometer este reto usaremos HtmlHelper::link

El formato es el siguiente:

link(cadena a mostrar,  destino, array de opciones)

El array de opciones son los parámetros que de por sí tiene link en html, por ejemplo:
Mención a parte requiere el destino. Podemos como en el ejemplo de arriba poner la url absoluta o relativa o un routing array.


Routing array

No se si a estas alturas merece la pena entrar al detalle con esto... creo que se verá mejor con un ejemplo de uso...

Recordamos de unas líneas más arriba que accedíamos al detalle de un registro así:
http://misitio/cake20/articulos/ver/id

Como ya sabemos la peculiar estructura de carpetas y nomenclaturas en CakePHP nos indica en la URL anterior que articulos es el controlador, view la acción e id el parámetro que está esperando la acción. Esto en nuestro array sería así:

array('controller' => 'articulos', 'action' => 'ver', $articulo['Articulo']['id']));

Fijaos que en este caso hemos obviado el tercer parámetro.

index.ctp

Finalmente... sintetizamos esto en nuestro index.ctp (que recordamos mostraba la tabla)...

<!-- File: /app/View/Articulos/index.ctp -->

<h1>Artículos del Blog</h1>

<table>
    <tr>
        <th>Identificador</th>
        <th>Título</th>
        <th>Creado</th>
    </tr>

<?php foreach ($articulos as $articulo): ?>
    <tr>
        <td><?php echo $articulo['Articulo']['id']; ?></td>
        <td><?php echo $this->Html->link($articulo['Articulo']['title'],                       array('controller' => 'articulos', 'action' => 'ver', $articulo['Articulo']['id'])); ?></td>
        <td><?php echo $articulo['Articulo']['created']; ?></td>
    </tr>
<?php endforeach; ?>

</table> 


Ahora sí...
http://misitio/cake20/articulos

Artículos del Blog

IdentificadorTítuloCreado
1El título2014-01-27 23:36:46
2Un título otra vez2014-01-27 23:36:46
3El título vuelve2014-01-27 23:36:46

Y con esto y un bizcocher...