Cómo utilizar el bucle de animación en la lona de javascript para HTML5 y CSS3 programación

categoría Computadoras y software / Programación / Javascript

Una animación en javascript generalmente requiere una organización especial llamada bucle de animación. La estructura básica del bucle de animación en la programación HTML5 y CSS3 funciona de la misma en cualquier idioma:

  1. Inicialización.

    Crear los activos, incluyendo el fondo y cualquiera de los objetos que va a utilizar. Los objetos que se pueden manipular en tiempo real normalmente se denominan sprites. Generalmente esto se hace cuando el programa se ejecuta en primer lugar, para ahorrar tiempo durante la ejecución principal. También puede establecer constantes de tamaño de imagen, tamaño de la pantalla, velocidad de fotogramas, y otros valores que no cambiarán durante la ejecución del juego.

  2. La determinación de una velocidad de fotogramas.

    Las animaciones y los juegos funcionan llamando a una función varias veces a una velocidad prescrita. En general, usted tendrá algún tipo de función que se llama repetidamente. En javascript, se utiliza normalmente la setInterval () función para especificar una función que será llamada repetidamente.

    La velocidad de fotogramas indica con qué frecuencia se llama la función especificada. Juegos y animaciones suelen correr a velocidades de cuadro entre 10 y 30 fotogramas por segundo. Una velocidad de fotogramas más rápido es más suave, pero puede no ser fácil de mantener con un poco de hardware.

  3. Evaluar el estado actual.

    Cada sprites es realmente un elemento de datos. Durante cada fotograma, determinar si algo importante ha sucedido: ¿El usuario pulse una tecla? Es un elemento supone que mover? Hizo un sprite salir de la pantalla? Hicimos dos sprites conk en la otra?

  4. Modificación de los datos de sprites.

    Cada elemento sprite tiene generalmente la posición o datos de rotación que puede ser modificado durante cada trama. Por lo general, esto se hace a través de transformaciones (traslación, rotación y escala), aunque a veces puede pasar de una imagen en su lugar.

  5. Borrado del fondo.

    Una animación es en realidad una serie de imágenes dibujado rápidamente en el mismo lugar. Por lo general, tendrá que borrar el fondo al comienzo de cada cuadro para limpiar la imagen del último fotograma.

  6. Volver a dibujar todos los sprites.

    Cada sprites es re-dibujado usando sus nuevos datos. Los sprites parecen moverse porque están dibujados en una nueva ubicación o la orientación.



Artículos Relacionados

Sobre el autor
Glosario de términos utilizados en GameMaker: Studio Glosario de términos utilizados en GameMaker: Studio

¿Quieres hablar el lenguaje de GameMaker: de estudio, pero no saben por dónde empezar? He aquí una breve lista de algunos de los términos más utilizados en el mundo de desarrollo de juegos de GameMaker: Studio.Acciones: Para cada evento, se…

Cómo agregar colisiones a su juego html5 Cómo agregar colisiones a su juego html5

Las cosas más interesantes en HTML5 videojuegos suceden cuando sprites conk y chocan entre sí. Motores de juego normalmente tienen algún tipo de herramienta para probar si dos sprites se superponen. Se llama detección de colisiones, y se puede…

¿Cómo construir una animación multi-estado en su juego html5 ¿Cómo construir una animación multi-estado en su juego html5

Con todo este movimiento pasando en su juego de HTML5, que te van a querer múltiples animaciones sofisticadas. Puede utilizar el changeImage () o setImage () función (son dos nombres diferentes para la misma cosa) para cambiar la imagen asociada a…

¿Cómo construir objetos de sprites para su juego html5 ¿Cómo construir objetos de sprites para su juego html5

Para hacer muy potentes juegos HTML5, tendrá que ser capaz de construir sus propios sprites que hacer exactamente lo que usted quiere que hagan. Después de realizar un objeto, puede darle características y comportamiento.Como hacer un objeto…

Cómo crear un bucle de animación en su juego html5 Cómo crear un bucle de animación en su juego html5

Si el lienzo define el espacio en un juego de HTML5, un bucle de animación define el tiempo. La mayoría de los juegos de javascript utilizan un mecanismo llamado setInterval () para provocar un comportamiento repetido. Esta función toma dos…

Cómo crear la interacción del usuario en su juego html5 Cómo crear la interacción del usuario en su juego html5

La mayor diferencia entre un juego de HTML5 y una animación es la interacción del usuario. Si usted quiere que sea un juego, que necesita el usuario para participar. Y aquí está cómo hacerlo.Aquí está el código:car.html¡Conduce el…

Desarrollo de juegos HTML5 para dummies Desarrollo de juegos HTML5 para dummies

El elemento principal de cualquier simpleGame juego es el Scene objeto. No cambie las propiedades de la escena directamente. En su lugar, utilice el método apropiado para gestionar la escena.tocableIndica si la escena se está ejecutando en una…

Mantener el juego en movimiento, con el objeto de sprites Mantener el juego en movimiento, con el objeto de sprites

Como un desarrollador de juegos, recuerde que el Sprite objeto es la base para mover elementos de juego. No cambie las propiedades directamente, sino utilice el método apropiado para manipular el sprite de la siguiente manera:spriteName = new…

Cómo crear un piloto electrónico en su juego html5 Cómo crear un piloto electrónico en su juego html5

Este es un tipo de un juego corredor de desplazamiento se puede utilizar en su HTML5. Este tipo de juego ha sido un elemento básico del universo del videojuego porque no puede haber tantas variaciones interesantes.En esta iteración en particular,…

Cómo utilizar animaciones CSS3 Cómo utilizar animaciones CSS3

los transformar comportamiento está muy bien, pero CSS3 promete una forma aún más emocionante de la animación llamada (esperar a que) Animación mecanismo. Aquí es una animación de un cuadro en movimiento alrededor de la pantalla.Aquí está…

Cómo dibujar imágenes en el lienzo de javascript para HTML5 y CSS3 programación Cómo dibujar imágenes en el lienzo de javascript para HTML5 y CSS3 programación

Aunque HTML siempre ha tenido soporte para imágenes, interfaz de la pagina web de javascript añade una nueva vida a imágenes de la web. Las imágenes se pueden visualizar en un lienzo, en el que se pueden integrar con las técnicas de dibujo…

Cómo mover un elemento en la lona de javascript para HTML5 y programación css3 Cómo mover un elemento en la lona de javascript para HTML5 y programación css3

A menudo, usted prefiere mover un elemento en la lona de javascript. Este proceso es realmente muy similar a la del mecanismo de rotación para la programación HTML5. Aquí hay un código que mueve una imagen y lo envuelve al otro lado cuando…

» » » » Cómo utilizar el bucle de animación en la lona de javascript para HTML5 y CSS3 programación