Cómo utilizar la función de las transformaciones en su juego html5
los Duende clase tiene la capacidad de mover y girar en su juego HTML5, pero estas características no están incorporados en javascript normal. Puede utilizar las funciones de transformación de la etiqueta canvas para conseguir este comportamiento.
Las transformaciones son operaciones matemáticas que se pueden aplicar a cualquier dibujo o imagen para cambiar la apariencia. Hay tres grandes transformaciones:
traducción: Mueve una cantidad particular en X e Y.
rotación: Gira alrededor de un punto en particular.
escala: Cambia el tamaño del dibujo en X e Y.
El elemento canvas permite que todas estas operaciones en cualquier tipo de dibujo. Sin embargo, la forma en que el elemento canvas hace esto se vuelve un poco más cerca de matemáticas de lo que pudo haber conseguido antes. Transformaciones en el elemento canvas pueden ser difíciles de entender hasta que entienda un poco sobre cómo funcionan realmente.
Cómo llevar a cabo transformaciones en un juego de objetos
En matemáticas, no se sabe muy transformar objetos. En su lugar, se modifica el sistema coordinado y dibujar su imagen en el sistema de coordenadas recién transformado. Es común en una aplicación de dibujo vectorial de tener varios sistemas de coordenadas ocultos que trabajan a la vez. Eso es importante, porque es la forma en que las transformaciones lienzo de trabajo. En esencia, cuando se desea realizar transformaciones sobre un objeto, hace lo siguiente:
Anunciar el comienzo de un sistema de coordenadas temporal.
La imagen principal ya cuenta con su propio sistema de coordenadas que no va a cambiar. Antes de poder transformar cualquier cosa, es necesario construir un nuevo sistema de coordenadas para sostener esos cambios. los salvar() comando indica el comienzo de una nueva definición del sistema de coordenadas.
Mover el centro con traducir().
El origen (0, 0) Se inicia en la esquina superior izquierda del lienzo de forma predeterminada. Normalmente, se construirá sus objetos transformados en la (nueva) el origen y mover el origen para colocar el objeto. Si traduce (50, 50) Y luego dibujar una imagen al (0, 0), La imagen se dibuja en el origen del sistema de coordenadas temporal, que será a las (50, 50) En el lienzo principal.
Girar el sistema de coordenadas con girar().
los girar() comando gira el nuevo sistema de coordenadas en torno a su origen. El parámetro de rotación es un grado en radianes.
Escalar el sistema de coordenadas en X e Y.
También puede alterar el nuevo sistema de coordenadas mediante la aplicación de valores de escala X e Y. Esto le permite crear imágenes estiradas y aplastadas.
Crear elementos en el nuevo sistema de coordenadas.
Después de haber aplicado todas las transformaciones que desea, se pueden utilizar todas las técnicas de dibujo tela ordinaria. Sin embargo, estos dibujos se dibujarán en el sistema de coordenadas virtual que acaba de hacer, no en el sistema principal de coordenadas de la lona.
Cierre el sistema de coordenadas temporal.
Por lo general, tendrá que aplicar diferentes transformaciones a diferentes partes de su lienzo. Cuando haya terminado con una transformación en particular, utilice el restaurar() comando para cerrar el nuevo sistema de coordenadas. Todos los comandos de dibujo subsiguientes utilizarán el sistema del objeto de la lona de coordenadas predeterminado.
¿Cómo transformar una imagen de juego
Puede ser difícil entender cómo funcionan las transformaciones matemáticas porque parecen tan simple en la superficie. Construir un programa para ver cómo todo encaja.
transform.html transformaciones
Este programa hace la configuración normal lienzo y crea entonces una transformación que convierte la imagen en el centro de la tela, gira la imagen, y cambia el tamaño de la imagen:
Crear una página con un lienzo.
Normalmente, simpleGame creará el lienzo para usted, pero en este caso, el elemento canvas se hace a mano.
Hacer todas las cosas configuración normal.
Esto implica la limpieza periódica: para acceder a la lona y su contexto y la creación de la imagen.
Comenzar un nuevo sistema de coordenadas.
los salvar() comando en realidad no guardar nada. Se indica el comienzo de un nuevo sistema de coordenadas. Cualquier comando de dibujo que se producen entre este salvar() declaración y la correspondencia restaurar() seguirá funciones de transformación.
Traducir el nuevo sistema.
Mover el sistema de coordenadas (100, 100), que es el centro de la tela.
Gire el nuevo sistema.
Rotar la imagen por pi / 4 radianes, que es 45 por ciento.
Escalar el nuevo sistema.
multiplicar el x los valores de 3 y el Y valores por 1,5.
Dibujar una imagen.
Debido a que esta imagen se dibuja dentro de una salvar() / restaurar() bloque, se dibuja con las transformaciones intactas.
Terminar con el subsistema restaurar().
los restaurar() comando cierra el sistema de coordenadas temporales para todos los comandos posteriores se referirán a los padres sistema de coordenadas.
Dibujar un rectángulo rojo en el sistema por defecto.
El rojo acarició rectángulo se dibuja fuera de la normal del sistema de coordenadas, así que no es escalado o rotado.
El diseño principal de la Duende objeto es una imagen rodeada por una transformación. Cuando se crea un sprite, se construye el objeto de imagen, y define una transformación de traslación, rotación y escala.
Como manipular la posición, el ángulo y la velocidad del sprite, usted es realmente un simple cambio de los valores enviados a la transformación. La imagen se ve compensado por lo que el (x, y) propiedades del sprite especifican el centro del sprite. De esta manera, los sprites giran alrededor de su centro, lo que le da una apariencia más natural.