EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Animaciones en Canvas

            animaciones canvas

            En el apartado anterior hemos visto cómo pintar gráficos en un lienzo de <canvas>. Veamos ahora cómo realizar una pequeña animación y cómo interactuar con los elementos del lienzo mediante el teclado.

            Contenidos del artículo

            • 1. Animaciones en Canvas
                • ¿Qué método utilizamos para pintar un Canvas en intervalos de tiempo?
                • Actividad 8

            1. Animaciones en Canvas

            Para crear animaciones o videojuegos en Canvas seguiremos los siguientes pasos:

            1. Pintamos un gráfico en Canvas.
            2. Borramos el Canvas pasados unos milisegundos.
            3. Volvemos a pintar un gráfico con un ligero cambio.
            4. Borramos el Canvas pasados unos milisegundos.
            5. Seguimos el mismo proceso de los pasos anteriores.

            Esta técnica es como crear dibujos animados utilizando una hoja que hay que borrar en cada fotograma. Este borrado se realiza tan rápido que el ojo humano humano no lo detecta y lo que se aprecia es una animación. Este es el principio que se suele aplicar en los videojuegos en dos dimensiones.

            En JavaScript se utiliza el método setInterval() para ejecutar un código concreto cada cierto tiempo. Sin embargo, para modificar el Canvas en intervalos de tiempo se utiliza el método requestAnimationFrame(función).

            function run(){
                //requestAnimationFrame(): informa de que queremos realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación.
                requestAnimationFrame(run); //animación optimizada
                accionesJuego();
                pintarLienzo(lienzo);
            }

            Veamos un ejemplo:

            default

            Ejemplos más avanzados:

            Rejilla a modo de lienzo:

            0

            Juego de la serpiente:

            0

            Ver 10 juegos sencillos realizados con HTML5 y Canvas

            ¿Qué método utilizamos para pintar un Canvas en intervalos de tiempo?

            ¡Bien! ¡Has fallado!

            Ejercicio propuesto

            Actividad 8

            Partiendo de la animación vista en clase realiza las siguientes modificaciones:

            • Implementa el movimiento del player por el lienzo en función de las teclas presionadas (KEY_LEFT=37, KEY_UP=38, KEY_RIGHT=39, KEY_DOWN=40;).
            • Implementa la funcionalidad “pausar el juego”.

            Navegación de entradas

            ← Elemento Canvas en HTML5
            Referencias y recursos: sonido, vídeos y animaciones →

            Sonido, Vídeo y animaciones

            • 1. Formatos de vídeo y conversiones
            • 2. Inserción de vídeo en HTML5
            • 3. Formatos de audio y optimizaciones
            • 4. Inserción de audio en HTML5
            • 5. Control de vídeo y audio con JavaScript
            • 6. Animaciones con propiedad animation
            • 7. Canvas en HTML5
            • 8. Animaciones en Canvas
            • 9. Referencias y recursos: sonido, vídeos y animaciones

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados