Visita nuestro foro
Animación 3d
Crear webs
Crear juegos
Crear vídeos
Programación
Utilidades
Photoshop
Tienda
Hacking
Contactar
www.tuwebdeinformatica.com - La web remodelada y mejorada en tuwebdeinformatica.com
atras

1.2 Sprites

Este tutorial ha podido ser actualizado en tu web de informatica. Pulsa sobre el enlace para ir a la página nueva.

adelante

Agregar sprites

Primero abrimos el Game Maker. Para agregar un sprite hay dos formas, las dos señaladas en la imagen siguiente. Una es dar botón derecho sobre la carpeta que se llama sprites y darle a Create Sprite, o también se le puede dar a la cara roja del menú de arriba.

sprites

Una vez agregado el sprite se nos abre la ventana siguiente:

sprites

Primero le ponemos un nombre al sprite donde pone Name (usa sólo letras, números y barras bajas, y procura que no haya dos sprites con el mismo nombre) y después cargamos uno dándole a "Load sprite". Nos aparecerá la carpeta de sprites por defecto del Game Maker, para nuestro primer sprite vamos a poner un bloque que puede servir de pared o suelo, se encuentra en la carpeta various y se llama Square.

square

Características de los sprites

Para continuar asegúrate de que esté marcada la casilla Advanced mode en file (en el menú de arriba del todo), porque sino no te aparecerán algunos botones.

Ahora vamos a aprender a modificar las características de los sprites siguiendo en la ventana que teníamos antes. Si la cerraste sólo tienes que darle dos clics al sprite que creaste. Por encima del botón OK puedes ver una casilla que se llama transparent, ésta vale para que el color que tenga en el pixel de abajo a la izquierda (en ese punto) no se vea, de forma que si ese punto es negro, todo lo que sea negro no se verá porque se hace transparente.

El botón de "precise collision checking" tiene que ver con la colisión entre objetos, es decir, cuando un objeto entra en contacto con otro. Si la casilla no está marcada la colisión se tendrá en cuenta con la zona transparente incluida, y si está marcada sólo se tendrá en cuenta la zona visible. Si está marcada el juego va a consumir más memoria, por lo que sólo lo marcaremos en objetos que necesiten colisiones perfectas, como el personaje del juego.

La casilla "smooth edges" sirve para que en el caso de que se nos vea el muñeco muy cuadriculado nos lo redondee. La casilla "Preload texture" sirve para que este sprite se cargue a la vez que el juego. Contra más sprites tengas con esta casilla marcada más tardará en cargar el juego, pero tampoco conviene quitarlas todas porque sino cuando aparezcan estas texturas en el juego se tendrán que cargar haciendo que durante el tiempo de carga vaya lento. Por lo tanto conviene marcarla en los sprites que más utilicemos, y los que apenas aparezcan no se marca.

Debajo de esos tres botones podemos ver una ventanita llamada origin. Cuando agreguemos un objeto en una room se pondrá en un sitio u otro dependiendo donde esté el origen, donde lo pongamos ahí se pondrá el origen del objeto. La mayoría de las veces utilizaremos el origen en el 0,0, pero si te conviene cambiarlo lo puedes cambiar ahí. La ventana llamada "bounding box" no la vamos a tocar, porque no tiene apenas utilidad.

Modificando los sprites

Nosotros podemos modificar un sprite dando en "Edit sprite". Ahí podemos ver el sprite, y en el caso de que sea un gif animado aparecerán las distintas imágenes que lo componen. En el menú de arriba a la derecha hay un lápiz, y si seleccionamos una imagen del sprite y le damos se nos abrirá una ventana en la que podemos cambiar el sprite como si fuera el paint. Si lo modificamos después lo podemos guardar dando clic en el disket del menú donde estaba el lápiz.

En la ventana de edit sprite además de modificarla como en el paint podemos hacer lo siguiente:

  • En el menú transform:
    1. Mirror horizontal gira el sprite horizontalmente.
    2. Flip vertical lo gira verticalmente
    3. Shift nos permite mover la imagen dentro del recuadro que la contiene.
    4. Rotate nos permite girar el sprite 90º, 180º o la cantidad que queramos. En el último podemos especificar la calidad, siendo 9 la máxima.
    5. Resize canvas redimensiona el recuadro que contiene la imagen, y nos permite elegir donde aparecerá la imagen en este recuadro. Si marcamos "Keep aspect ratio" el porcentaje será el mismo en los dos ejes.
    6. Stretch nos permite redimensionar tanto el recuadro que contiene la imagen como la imagen.
    7. Scale nos permite redimensionar la imagen pero no el recuadro que la contiene.
  • En el menú images:
    1. Cycle left hace que en los gifs animados la animación empiece en la imagen anterior, y cycle right en la siguiente.
    2. Black and white pone el sprite en blanco y negro, colorize cambia el color del sprite, colorize partial cambia de color sólo una parte, shift hue es otra forma de cambiar el color, intensity es la intensidad del color e invert invierte los colores.
    3. En fade elegimos un color y la imagen se aproximará a ese color, transparency nos permite hacer medio transaparente el objeto (cuanro más grande sea el nº que pongamos más transparente será) y blur difumina la imagen.
    4. Crop nos permite reducir la imagen tanto como sea posible dándonos a elegir la distancia entre ésta y el borde.

Antes de seguir con el menú transform os voy a enseñar a crear una animación gif a partir de las imágenes. Vamos a utilizar las siguientes tres imágenes de mario:

mario1mario2mario3

Guardadlas en vuestro ordenador antes de seguir. Cread un nuevo sprite, cargar la primera imagen de mario e iros a "Edit sprite". En el menú de arriba podeis ver una carpeta con un signo mas. Dadle y agregad la segunda imagen y luego la tercera. Ahora si marcais la casilla "Show preview" vereis el sprite en movimiento. Dentro del preview (previsualización) podeis ver un recuadro que se llama speed, hay podeis probar a poner una velocidad más lenta, como 10, pero esa no será la que tendrá en el juego. Una vez hecho esto veamos el menú animation::

  1. Set lenght nos da a elegir el nº de imágenes que tiene el gif animado repitiéndolas o borrándolas, mientras que stretch hace lo mismo pero duplicándolas o borrándolas.
  2. Reverse pone al revés la animación, mientras que add reverse duplica la animación pero al revés.
  3. Transalation sequence hace que en la animación la imagen se mueva un poco en cada paso, mientras que rotation hace que rote (clock-wise es en el sentido del reloj).
  4. Colorize hace que la animación vaya tomando un color en concreto, fade to color va convirtiendo la imagen en un color en concreto y dissapear hace que la imagen vaya desapareciendo.
  5. Shrink va encogiendo la imagen hasta que desaparece, grow empieza desaparecido y va agrandando, flatten aplasta la imagen en una dirección y raise la alarga.
  6. Overlay superpone la animación a una imagen o animación y morph va convirtiendo la animación en otra.

Para terminar, una animación también la puedes crear a partir de imágenes como ésta:

mario

Para ello en el menú file le damos a "Create from Strip" y abrimos la imagen. Entonces nos aparecerá una ventana con una serie de opciones en la derecha:

  1. Number of images es el número de imágenes que vas a extraer, y images per row son las imágenes que va a haber en cada fila.
  2. Image width es el ancho de las imágenes, y image heigth el alto.
  3. Horizontal cell offset es cuantas imágenes se salta horizontalmente, y vertical cell offset verticalmente.
  4. Horizontal pixel offset y vertical pixel offset es lo mismo pero en píxeles
  5. Horizontal separation y vertical separation es la separación en píxeles entre las imágenes

Para la imagen que puse antes los datos a poner serían estos:

mario

Cuando le des a OK te van a quedar las imágenes muy chicas, pero ya sabes agrandarlas.

Una vez hayas acabado de modificar el sprite sólo tienes que darle al tick que hay en el menú de arriba y después darle a OK en el menú de las propiedades del sprite. Con todo esto puedes llegar a hacer muy buenos sprites, sólo necesitas práctica.

Si tienes alguna duda o quieres opinar de éste manual lo puedes hacer en la sección de creación de juegos del foro. Nos vemos en el siguiente capítulo.

atras
adelante

Volver a lección 1 >>

Google
 
Creada el 12/10/07 16:57
Copyright © - Todos los derechos reservados - Página creada por Juanma
Free Web Hosting