Aprende a crear juegos en HTML5 Canvas

viernes, 25 de mayo de 2012

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!

[Mosaic Image Background]

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í:

[Mosaic Image Background]

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:

[Mosaic Image Background]

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!

14 comentarios:

  1. Jaja Karl eres increible compañero, acabo de seguir tu tutorial al pie de la letra y me ha salido un mosaico estupendo, quizás para un futuro juego aunque el diseño grafico no es lo mio jaja

    http://img13.imageshack.us/img13/2282/fondoxe.png

    Lo bueno de esto es que lo he probado en código para verlo en movimiento y no tiene errores a mi parecer, que alegría ^^

    Eaaa, pues ya puedo decir que se hacer una Tile image :)

    Pd: Anda que no estoy aprendiendo cosas contigo, parece esto un curso a distancia, estudio lo que quiero y cuando quiero jaja xD

    ResponderEliminar
    Respuestas
    1. ¡Te ha quedado bastante bien! Apuesto que si ponemos las montañas en una imagen, el mar y las nubes en otra, y dejamos fija la luna, ¡Haría un Parallax Scrolling maravilloso!

      ¡Jajaja! Sería buena idea que pudiera dar constancias a los que terminen de leer el blog, una vez concluidos las entradas básicas :P... Me pregunto si algo así sería posible... ¿Que se necesitará para hacer una constancia así válida?

      Eliminar
  2. Hola, la verdad que estoy muy a gusto con tu blog y con como explicas. Me saco el sombrero ante usted por todo lo que ayudaste.

    Queria saber con que me recomiendas seguir luego de haber terminado con todo el blog.

    Me recomienda seguir y aprender Turbulenz Engine?, espero su respuesta. Gracias y saludos

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias! Me alegra saber que el blog ha sido de gran ayuda para ti.

      Este blog es solo una introducción al desarrollo de juegos (Y como podrás notar, aun no está terminado... Quizá nunca termine), y si bien hay mucho más por aprender, realmente todo depende de lo que cada uno desea desarrollar de aquí en adelante, por lo que no puedo recomendar "con que seguir luego" tras terminar aquí.

      Por supuesto, si encuentras en Turbulenz aquello que tú estás buscando para continuar con el desarrollo de juegos, entonces no deberías dudar que ese es el camino que debes seguir.

      ¡Éxito en tus desarrollos!

      Eliminar
  3. eres una máquina tio!! tienes juegos publicados? supongo que harás no?
    un saludos enhorabuena por tu blog, es estupendo!!

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias! ¡Y por supuesto que sí! Toda la experiencia que he recopilado en estos años, son el fruto de este blog. ¡Gracias por tu comentario!

      Eliminar
  4. Hola, me han sido útiles tus tutoriales y aunque bastantes cosas ya las conocía aqui las he visto explicadas de una forma mas enfocada para juegos, me encanta lo que haces y realmente es muy útil.
    PD: me gustaría poder mantener una vía de comunicación privada contigo

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias por tus comentarios! Muchas gente ya se comunica de forma privada conmigo por medio de Hangouts y Facebook. Prefiero que las dudas generales queden en el blog para que ayude a más gente, pero si consideras tus dudas más personales, con gusto atenderé tus mensajes privados.

      Eliminar
  5. Hola Karl, en mi ordenador parece que la animacion no es totalmente lineal..es decir parece que hay momento que la velocidad de desplazamiento de la imagen es irregular no constante..varia un poquito pero se nota...alguien mas le ocurre esto?

    ResponderEliminar
    Respuestas
    1. Ocurre lo mismo en mi celular, y esto debe ser causado seguramente por que el procesador de tu computadora es antiguo, o está demasiado ocupado con otras tareas. Por suerte, en los tutoriales se va viendo técnicas para regular el tiempo, y evitar esta clase de problemas.

      Eliminar
  6. Disculpe amigo me puede decir como mover las imagenes de mosaico mas lentamente. Y sus tutoriales me han sido de mucha ayuda sigua asi

    ResponderEliminar
    Respuestas
    1. Todo se maneja con la variable bgTimer, por lo que solo debes desplazarla con un valor mayor o menor, según desees la velocidad con la que se moverá.

      Eliminar
  7. hola señor segui las instrucciones que le dio a el usuario anonimo acerca de los bgTimer pero no me funciona me lo podria explicar mas detalladamente en la barra de codigo que tengo que modificar o crear para que se vea mas lento

    ResponderEliminar
    Respuestas
    1. Para empezar, es importante que uses una técnica de regulación de tiempo como explique en la entrada del mismo nombre. Una vez que ya tengas la técnica implementada, cambias la línea bgTimer++ por bgTimer+=2 para hacerlo al doble de la velocidad, o bgTimer+=0.5 para hacerle a la mitad.

      Si usas deltaTime como regulador de velocidad, solo debes multiplicar esta delta por la cantidad de pixeles que quieras que se mueva por segundo al asignarla a bgTimer, quizá una técnica más sencilla y precisa una vez implementada.

      Eliminar