Creando imágenes de mosaico

En la pasada entrada de este blog "Fondo en movimiento", se aprendió a programar un fondo que se repite constantemente, aparentando no tener fin. Para esta técnica se requiere un tipo de imagen conocida como "Imágenes de Mosaico" (Tile Image), las cuales tienen la propiedad de que al repetirse una tras otra, no se vea dónde acaba la imagen y dónde comienza de nuevo.

Tú como artista, puedes verte en un problema cuando te pidan hacer una imagen en mosaico para el fondo de un videojuego. "¿¡Cómo haré eso!?", te preguntarás. Y aunque en un comienzo parezca una tarea casi-imposible (Ya estuve en ese caso), en realidad hay una técnica bastante sencilla para lograr este efecto.

Para este ejemplo, crearé un paisaje cuya repetición será horizontal. Lo primero que debes hacer es crear un nuevo lienzo con un tamaño al menos de la resolución del juego (Para este ejemplo, lo he hecho de 300x200), y sobre él dibujas tu fondo como lo harías normalmente, PERO, con un importante detalle: ¡No toques las orillas!

Cuando estés complacido con el resultado, pasaremos al segundo paso. Lo que haremos, es cortar la mitad de la imagen (No tiene que ser exacto), mover el resto de la imagen hasta pegarlo a la orilla, y pegar la imagen cortada en la orilla opuesta. El resultado quedará así:

Por último, simplemente terminaremos de dibujar la parte faltante de nuestra imagen en el centro. Recalco de nuevo y es importante que recuerdes esto: ¡NO TOQUES LAS ORILLAS! En el momento que lo hagas, el efecto de mosaico se verá comprometido, por lo que es importante que tengas mucho cuidado con ello. El resultado se verá de esta forma:

Para comprobar que el efecto de mosaico de la imagen ha quedado de forma correcta, he escrito este pequeño código que muestra la imágen en movimiento:

[Canvas not supported by your browser]

/*jslint es5: true */
(function (window, undefined) {
    'use strict';
    var canvas = null,
        ctx = null,
        bgTimer = 0,
        background = new Image();
    background.src = 'assets/mosaic3.png';

    function paint(ctx) {
        if (background.width) {
            ctx.drawImage(background, bgTimer, 0);
            ctx.drawImage(background, bgTimer - background.width, 0);

            bgTimer -= 1;
            if (bgTimer < 0) {
                bgTimer += background.width;
            }
        }
    }

    function run() {
        window.requestAnimationFrame(run);
        //act();
        paint(ctx);
    }

    function init() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 200;
        
        run();
    }
    
    window.addEventListener('load', init, false);
}(window));

Con esto, hemos aprendido a crear imágenes de mosaico de forma sencilla.

Editando la imagen en mosaico.

Es posible que, eventualmente, debas editar la imagen en mosaico. Puedes agregar pequeños detalles de forma sencilla si no tocas las orillas de la imágen. Pero si es necesario editar algo que afecte las orillas, debes repetir la misma técnica que se usó para crearlas: Editar el centro, cortar la mitad de la imágen, mover la restante a la orilla opuesta, pegar la imagen cortada en la sección correspondiente, y volver a editar el centro con los detalles faltantes.

¡Sigue practicando!

Al final de la entrada "Fondo en movimiento", expliqué el código para crear imágenes en paralaje, técnica que da la ilusión que los objetos más lejanos se mueven más lento que los cercanos. Para hacer este efecto, hay que dibujar cada plano en una imagen diferente (Las nubes en una imagen  las montañas en otra, y el pasto una más). Por supuesto, todas deben ser imágenes de mosaico.

¡Intenten esta técnica! Dará más realismo a sus escenarios. Y si tienes más dudas, deja tu comentario en la parte de abajo. También me agradará ver las imágenes que logren hacer con lo aprendido en esta entrada. ¡Felices trazos!