Tu web de informática

atras

1.2 Sprites

adelante

Antes de empezar informaron que en la sección de materiales para juegos podeis encontrar muchos materiales que os pueden resultar muy útiles para crear vuestros juegos, por ejemplo sprites.

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 una manzana, que se encuentra en la carpeta Maze-Platform y se llama apple:

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.

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 "Separate collision masks" junto al botón "Modify mask" nos sirve para elegir cuál es el zona de colisión, si no queremos que sea el contorno del muñeco. Sólo destaco que dándole al botón nos aparecerá otra ventana, en la que en la parte de abajo podemos elegir diversos contornos de colisión, como son rectángulo, disco o diamante. También destaco que si en dicha ventana marcamos "Show collision mask" se nos previsualiza en un color más oscura la zona de colisión en la imagen de la derecha.

Volviendo a la ventana del sprite, 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, cuando lo pongamos en la room dando un clic 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í.

Modificando los sprites

Nosotros podemos modificar un sprite dandole al botón "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, si seleccionamos una imagen del sprite y le damos al lapiz 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. Shift nos permite mover la imagen dentro del recuadro que la contiene.
    2. Mirror/Flip gira el sprite horizontalmente o verticalmente, según elijamos.
    3. Rotate nos permite girar el sprite 90º, 180º o la cantidad que queramos. Además podemos elegir si en sentido de las agujas del reloj o contrario marcando la casilla correspondiente.
    4. Scale nos permite redimensionar la imagen pero no el recuadro que la contiene.
    5. Skew nos permite distorsionar la imagen horizontalmente y verticalmente.
    6. Resize canvas redimensiona el recuadro que contiene la imagen, y nos permite elegir donde aparecerá la imagen en este recuadro mediante las flechitas. Si marcamos "Keep aspect ratio" el porcentaje será el mismo en los dos ejes.
    7. Stretch nos permite redimensionar tanto el recuadro que contiene la imagen como la imagen.
  • 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. Make opaque nos permite hacer todas las partes transparentes opacas. Erase a color nos permite hacer un determinado color transparente, lo borra, pudiendo seleccionar dicho color sobre la imagen. Smooth Edges redondea la imagen, siendo muy útil para imágenes pixeladas. Opacity nos permite hacer medio transparente o más opaca la imagen, eligiendo el grado de opacidad. Ser alpha form file utiliza otra imagen para hacer determinadas zonas de la imagen semitransparentes y otras zonas no.
    4. En fade elegimos un color y la imagen se aproximará a ese color, blur difumina la imagen y sharpen la pixela.
    5. Outline nos sirve para ponerle borde opaco a la imagen, shadow para ponerle sombra, glow para un borde difuminado, buttonize para creer un botón que tenga dicha imagen encima, y gradient fill para cambiar todos los colores de la imagen por un gradiente de colores, permaneciendo la forma de la imagen.

Antes de seguir con el menú animation 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 haciendo que la animación sea la misma pero más lenta o rápida.
  2. Reverse pone al revés la animación, mientras que add reverse duplica la animación pero al revés (este último sirve para hacer una animación sin saltos cuando se repita).
  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 éstas, que te vienen en la carpeta del game maker que vimos antes:

strip
strip
strip

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 una de las imagen que puse antes los datos a poner serían estos:

mario

Cuando le des a OK podrás ver la animación creada.

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.


  • Autor: Juanma (Administrador de Tu web de informática)

Si tienes alguna pregunta que hacernos tienes el foro a tu disposición.

atras
adelante

Volver a lección 1 >>


Creada el 22/04/10 15:47
Copyright © - Todos los derechos reservados - Página creada por Juanma