Maggi Jugoso a la Sartén

Un artículo del Dr. Amor.

Sí, sí... ya se que éste es un blog relacionado con la informática. Entonces, ¿Qué pinta Maggi Jugoso a la Sartén en todo esto? Déjad que el Dr. Amor os de unos consejos:

Conozco a informáticos que son unas fieras en todo lo que hacen. Aprenden cualquier lenguaje en segundos, salen de marcha todos los días, duermen, son bien parecidos y además cocinan bien... si eres uno de estos odiosos personajes sin duda mi artículo no es para tí...

Ahora bien, si perteneces al grupo que necesita dedicar todo su tiempo a ésto, que no pueden salir y ni siquiera tiene tiempo ni ganas para cocinar... estos consejos podrían servirte...

Ya se que sobrevivís perfectamente. Que coméis todos los días y que unas salchichas de frankfurt no son misterio para vosotros... el problema es qué hacer cuando un día, una fémina, convencida vete a saber tú con qué taimadas argucias, accede a venir a vuestra casa y claro... debéis preparar algo de comer...

Desde luego el arroz tres delicias de congelados 'La Sirena' y los San Jacobos son una buena solución siempre que no os de por echar el arroz a hervir (creedme... el Dr. Amor sabe de lo que habla), pero esa chica realmente os gusta y la queréis impresionar...

Podéis seguir tirando del arroz si queréis, pero un San Jacobo ya es jugársela mucho, es ahí donde Maggi como rezaba su slogan nos quiere ayudar...

Para eso antes de la cita deberemos ir a comprar unas pechuguitas de pollo. Id a la pollería, no os arriesguéis. Además hay que promover el comercio de barrio. Pedidle al / la poller@ que os filetee la pechuga con filetes de centímetro y medio de grosor.  Después id a vuestra tienda de ultramarinos favorita y comprad un  Maggi Jugoso a la Sartén a las finas hierbas o al ajillo. (Si prevees que tienes posibilidades con la chica, el Dr. Amor te aconseja las finas hierbas.)

No os equivoquéis... esto es lo que buscamos:

Ahora sólo queda esperar a la hora de la comida o cena, abrir una botellita de vino (aunque el Dr. Amor  siempre recomienda el cava) y mientras charláis y tomáis una copa, vas preparando la comida o cena... (por favor, nada de velas ni ñoñerías de esas... puede pensar que buscáis algo más que amistad... ¬¬ )

Hacéis vuestro primero, y luego preparáis las pechugas... para ello...

a) Nos lavaremos las manos. (Las chicas aprecian estos detalles)

b) Pondremos a calentar la sartén a media potencia. Es fácil, la rosca tiene unos numeritos... cogéis el mayor y lo dividís entre dos.. esa será nuestra potencia y NO LA MOVEREMOS! 

c) Abríremos el sobre de Maggi jugoso a la sartén y cogeremos uno de los papyrus y lo extenderemos sobre la mesa que previamente habremos limpiado de migas y restos de café.

d) Colocaremos uno de nuestros filetes en medio y doblaremos el papel. Presionaremos para que el pollo quede bien impregnado.

En este punto, si no hemos sido previsores y nuestra pechuga está fileteada más fina, superpondremos varios filetes hasta alcanzar el grosor de un centímetro y medio. Como cocinamos sin aceite usando la grasa del pollo, éste se unirá consigo mismo creando una única pechuga!!!!

e) Repetiremos el paso d) con el otro filete.

f) Dejaremos que la sartén se caliente un poco más (que no humee ni se funda el mango, por favor) y colocaremos sobre ella nuestros dos filetes. Miraremos de reojo la hora... (eso ella no lo debe notar, tenéis que aparentar un control total sobre los fogones)

g) Pasados seis minutos giraréis los filetes. Sin miedo. Con la mano. Si lo hacéis rápido y seguros no os quemaréis y ella os empezará a mirar de otra manera. 

h) Preparad los platos y en seis minutos más sacáis los filetes y los colocáis sobre el plato retirando el papel. 

Mirad que fácil:

Mientras hacéis la pechugas, si sois capaces, podéis haber ido preparando una ensalada para acompañar... una 'florette' bien aliñada vale... creed al Dr. Amor.  Quedaréis ante ella como un hombre pragmático, bien provisto pero que improvisa sin complicarse en la cocina...  y en la vida.

Cuando pruebe vuestras pechugas verá que son deliciosas, jugosas y muy sanas!!!... No daréis crédito de que habéis sido los artífices!!!... 

De postre un heladito. Vainilla. Nada sofisticado. Y bueno... si no eructáis durante la comida y os habéis acordado de apagar el fuego... el Dr. Amor os garantiza una sobremesa que no vais a olvidar.

Feliz Maggi Jugoso a la Sartén a todos.

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.

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:

<a href="/pages/home" class="button" target="_blank">Texto</a>

se pondría:

echo $this->Html->link(
    'Texto',
    '/pages/home',
    array('class' => 'button', 'target' => '_blank')
);

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

Identificador	Título	Creado
1	El título	2014-01-27 23:36:46
2	Un título otra vez	2014-01-27 23:36:46
3	El título vuelve	2014-01-27 23:36:46

Y con esto y un bizcocher...

Introducción a CakePHP (II): Mostrar datos en una tabla

Suponemos que tenemos CakePHP instalado con una base de datos en la que hemos dado de entrada unos registros de prueba con la tabla articulos como indica aquí.

Bien, veamos el contenido de nuestra tabla articulos:

http://misitio/cake20/articulos

Error: ArticulosController could not be found.

Claro, no hemos definido el controlador para nuestro modelo Articulo. De hecho ni siquiera hemos definido el modelo!  Aunque este paso lo ha hecho CakePHP por nosotros heredando de la clase AppController. ¿Una buena praxis? En absoluto.

Definiendo el controlador

En el capítulo anterior dijimos que los controladores se crean en la carpeta app/Controller de CakePHP. Así que crearemos el controlador con la acción que queremos darle: ver_tabla.

En app/Controller creamos el fichero ArticulosController.php, y le damos el siguiente contenido:

<?php

class ArticulosController extends AppController {

public function ver_tabla() {

$this->set('articulos', $this->Articulo->find('all'));

}

?>

Probemos:

http://misitio/cake20/articulos

Error: The action index is not defined in controller ArticulosController

Increíble. Parece que el modelo que aún no hemos definido y que lo ha hecho CakePHP por nosotros, está esperando la acción index. Para que no desespere cambiamos el nombre a nuestra acción.

<?php

class ArticulosController extends AppController {

public function index() {

$this->set('articulos', $this->Articulo->find('all'));

}
}

?>

¿Qué hace el método set?

Dijimos que para mostrar los datos CakePHP usa algo llamado vistas. Set pasa a la vista una variable (primer parámetro) y su valor (segundo parámetro). 

En este caso le pasa el resultado del método find('all') de nuestro modelo Articulo, que lo que hace es generar una tabla con el contenido de todos los registros de la tabla articulos. ¿Y dónde le hemos dicho que coja esa tabla y no otra? En ningún sitio. Es por eso que es tan importante atenerse a la convención en la nomenclatura de las cosas.  :-)

Veamos pues que sucede:
http://misitio/cake20/articulos

Error: The view for ArticulosController::index() was not found.

Maldición... olvidamos crear la vista. Además si os fijáis en el mensaje de error, lo que nos pide CakePHP es una vista para la acción index.

Dijimos que las vistas se colocaban en la carpeta /app/View al que nosotros añadiremos otro nivel de carpetas para tener todas las vistas de cada controlador separadas.  Eso significa que crearemos una vista llamada index.ctp en la carpeta /app/View/Articulos.

Comentamos que el método set del controlador pasaba el contenido de una variable a la vista, ¿no?. Pues bien como contenido de la vista pongamos lo siguiente:

<pre>
     <?php print_r($articulos); ?>
</pre>

Podemos ver cómo sobre la variable artículo habíamos recibido un array con la estructura y contenido de la tabla articulos de la base de datos:

Array
(
    [0] => Array
        (
            [Articulo] => Array
                (
                    [id] => 1
                    [title] => El título
                    [body] => Esto es el cuerpo del artículo.
                    [created] => 2014-01-27 23:36:46
                    [modified] => 
                )

        )

    [1] => 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] => 
                )

        )

    [2] => Array
        (
            [Articulo] => Array
                (
                    [id] => 3
                    [title] => El título vuelve
                    [body] => Esto es realmente excitante! No.
                    [created] => 2014-01-27 23:36:46
                    [modified] => 
                )

        )

)

Para acabar... si en la vista recibimos la tabla... nada nos impide cambiar el contenido de la vista por esto:

<!-- 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 $articulo['Articulo']['title']; ?></td>
        <td><?php echo $articulo['Articulo']['created']; ?></td>
    </tr>
<?php endforeach; ?>

</table> 

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

Artículos del Blog

Identificador	Título	Creado
1	El título	2014-01-27 23:36:46
2	Un título otra vez	2014-01-27 23:36:46
3	El título vuelve	2014-01-27 23:36:46

Lo flipasssssssssss....

Introducción a CakePHP (I)

CakePHP es un framework que pretende facilitarnos la vida programando en php. Por poner un ejemplo, se ha terminado el hacer consultas a la base de datos...

Insisto en este artículo, que el propósito de este blog no es más que plasmar mis propias anotaciones sobre los sistemas que ensayo, aunque siendo conocedor que no voy a ser el único que se aproveche de ello, me gusta darle apariencia de tutorial y dirigirme a un posible público como 'profesor' simplemente como diversión y porque me gusta escribir.

Aclarado esto, una vez me he metido en harina en este sistema que estoy probando, me he dado cuenta que el tutorial es un absoluto desastre, por lo que lo voy a reescribir a mi manera.

Instalación

1.- Descargamos CakePHP de la página oficial y lo descomprimimos.

2.- Ahora crearemos una carpeta que llamaremos por ejemplo /cake20 en la raíz de nuestro servidor web (ya sea un hosting en la red o un servidor web en nuestro PC como EasyPHP)

3.- Copiamos o subimos al servidor los archivos descomprimidos en la carpeta que hemos creado anteriormente.

4.- Creamos una base de datos.

5.- Configuramos la base de datos en CakePHP.

Para ello nos dirigimos a la carpeta /app/Config y copiamos el fichero database.php.default y lo renombramos simplemente como database.php.

Editamos el fichero y configuramos la base de datos:

public $default = array(
    'datasource' => 'Database/Mysql',
    'persistent' => false,
    'host' => 'localhost',
    'port' => '',
    'login' => 'cakeBlog',
    'password' => 'c4k3-rUl3Z',
    'database' => 'cake_blog_tutorial',
    'schema' => '',
    'prefix' => '',
    'encoding' => ''
);

 6.- Configuramos la encriptación, más que nada porque si no CakePHP se quejará.

Editamos el fichero core.php que se encuentra en la carpeta /app/Config.

Buscamos la línea Configure::write('Security.salt', 'pl345e-P45s_7h3*S@l7!'); y cambiamos la parte que he marcado en fosforito por la cadena de caracteres que nos de la gana.

Así mismo buscamos Configure::write('Security.cipherSeed', '7485712659625147843639846751'); y cambiamos los números por otra numeració cualquiera.

Y con esto ya hemos acabado.

Como funciona CakePHP

Pues funciona sólo. De hecho, en el manual se habla varias veces de la magia de CakePHP y en ocasiones parece que sea así.

De hecho para saber lo que tiene que hacer CakePHP usa una serie de convenciones en la nomenclatura y la estructura de carpetas y lo veremos con un ejemplo: una lista de artículos (o lo que viene a ser un blog)

Así que lo primero que haremos será rellenar la base de datos con tres artículos para probar. Así que usando nuestro gestor de base de datos (p. ej. PhpMyAdmin) ejecutaremos los siguientes comandos:

/* tabla para nuestros artículos */
CREATE TABLE articulos (
    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(50),
    body TEXT,
    created DATETIME DEFAULT NULL,
    modified DATETIME DEFAULT NULL
);

/* algunos valores de test */
INSERT INTO articulos (title,body,created)
    VALUES ('El título', 'Esto es el cuerpo del artículo.', NOW());
INSERT INTO articulos (title,body,created)
    VALUES ('Un título otra vez', 'Y sigue el cuerpo del artículo.', NOW());
INSERT INTO articulos (title,body,created)
    VALUES ('El título vuelve', 'Esto es realmente excitante! No?', NOW());

Pues bien, aquí viene la primera convención. Fijaos que hemos llamado a la tabla articulos en minúscula. Es más si hubiera sido nombre compuesto la hubiéramos llamado en minúscula y con un underscore ( _ ) entre palabras.

Esta tabla podríamos considerar que es una entidad, un objeto o como llama CakePHP, un modelo.

Los modelos se nombran en mayúscula y en singular y se guardan en la carpeta /app/model. En nuestro caso tendríamos un fichero llamado Articulo.php en esa carpeta. En ese archivo tendremos la declaración del modelo y sus validaciones.

Sólo por usar esa nomenclatura, CakePHP supondrá que en la carpeta /app/Controller, tendremos un fichero llamado ArticulosController.php. Como podemos imaginar, este tipo de objeto se llamará genéricamente controlador y gestionará la lectura y escritura de los datos.

Finalmente necesitaremos un formato de salida en pantalla, un template para entendernos. Sin embargo, no necesitaremos el mismo si mostramos una tabla para seleccionar un registro o el registro en sí, de lo que deduciremos que podremos tener varios. Estos archivos, que llamaremos vistas, llevan extensión '*.ctp' y se alojan en la carpeta /app/View/Nombre_controlador. En nuestro caso /app/View/Articulos/  (Artículos en plural). Los archivos con extensión '*.ctp' pueden tener cualquier nombre.

Con estas 4 cosas y unas pocas líneas de código, podemos desarrollar un mantenimiento CRUD completo. Pero esto, ya lo iremos viendo...

La importancia de las convenciones

Como ya se ha apuntado si seguimos una rígida normativa, CakePHP hará muchas cosas por nosotros.

La normativa para los modelos es que se escriben en singular y en UpperCamelCase si son compuestas.

La normativa para las tablas de la base de datos es que se ecriben en plural y con underscores ( _ ) en lugar de espacios si son compuestas.

Esto significa que si tenemos un modelo llamado Articulo, CakePHP manejará automáticamente la tabla articulos, y si tenemos un modelo llamado ArticuloLargo, CakePHP gestionará automáticamente la tabla articulo_largos. (Sí, ya se que en la lengua de Espronceda queda un poco raro, pero hay que hacer un esfuerzo)

Pero aún hay más! Si nuestra tabla tiene el campo name o title las usará como etiquetas en ciertas ocasiones (manda title sobre name) y si tenemos creados los campos created o modified se estamparán las fechas automáticamente! Y es más! (aunque yo no lo he conseguido) pero en principio si el campo id es de tipo int, se rumorea que CakePHP lo gestiona también y si es de tipo char(36) gestiona un identificador UUID)

Y eso es todo por ahora...  hasta la próxima.

CraftyJS - Viewport (I) o cómo posicionar la cámara.

Aunque en principio parezca más propio de los juegos en 3D, el viewport no es más que la cámara que filma la acción. Para ver su funcionamiento acudiremos a un ejemplo que se consta de:

1. Un helicóptero como protagonista  (Éste)
2. Una ventana de juego de 480 x 320 píxeles.
3. Una foto que actuará de fondo de 4608 x 3072 píxeles. (O sea, ésta)

Como os habréis dado cuenta, la foto es mucho más grande que la ventana. Esto lo he ideado así, para que se vea el desplazamiento real del helicóptero. Sobre un fondo monocromático no apreciaríamos visualmente el movimiento.

Si ahora montamos el fondo y el helicóptero sobre la imagen, veremos algo así. Como veis, la foto sale cortada porque no cabe.

Como es algo que a estas alturas ya sabemos hacer, no publico el código aquí, aunque lo podéis ver en funcionamiento junto con el código aquí.

Posicionar la cámara sobre la entidad.

Si ahora movemos el helicóptero a la posición 1000, 1000:

avion = Crafty.e('2D, Canvas, Fourway, avion')

.attr({

   x: 1000,

   y: 1000,

   w: 244,

   h: 982

   })

.fourway(4);

Es fácil imaginar que éste saldrá de pantalla y no lo veremos. Ésto lo podemos subsanar moviendo la cámara sobre el helicóptero, y es más, lo podemos hacer de forma inmediata o aplicando un lapso de tiempo.

Para ello utilizaremos la siguiente instrucción:

Crafty.viewport.centerOn(avion, 10000);

Si os habéis fijado antes al crear la entidad, la he asignado a una variable (avion) que la identifica entre otras instancias. Cuando centro la cámara, lo hago usando la variable.

El siguiente parámetro es el número de milisegundos que tardará la cámara en posicionarse sobre el objetivo (haciendo una especie de travelling). Evidentemente si ponemos un cero, la cosa será inmediata.

Podéis ver un ejemplito de ésto junto al código aquí.  Como la imagen es muy grande se puede perder parte del efecto, así que cuando haya cargado todo, pulsad [F5] para forzar la recarga de la página con la imagen ya en caché.

NOTA: En CraftyJs 6.0.2. esto deja de funcionar. Para subsanarlo debéis buscar la línea:
ctx.setTransform(view._scale, 0, 0, view._scale, view._x*view._scale, view._y*view._scale);
y substituirla por:
ctx.setTransform(view._scale, 0, 0, view._scale, Math.floor(view._x*view._scale), Math.floor(view._y*view._scale));

Follow the lider, lider, lider...

El siguiente paso es de cajón, que la cámara siga al helicóptero durante su movimiento. Como mantenemos quieto el fondo, el resultado será un efecto de scroll.

Para conseguir este efecto usaremos la siguiente instrucción:

Crafty.viewport.follow(Objeto, desplazamiento_x, desplazamiento_y)

El primer parámetro es como en el comando centerOn el nombre de la variable en la que se ha instanciado el objeto que queremos seguir.

Los siguientes parámetros indican el desplazamiento del objeto respecto a la cámara (que siempre estará en el centro).

Por ejemplo, mientras Crafty.viewport.follow(avion, 0, 0) dejaría la cámara sobre el helicóptero ( y en consecuencia éste quedaría centrado como en la imagen de arriba del todo de este artículo),  una instrucción del tipo  Crafty.viewport.follow(avion, 100, 100)  dejaría la imagen así:

Y Crafty.viewport.follow(avion, -100, -100) así:

Recordad que podéis trastear con todo esto Aquí.