Como crear un juego de plataformas paso a paso, II. Configurando un tileset

17 de septiembre de 2008
Valoración del artículo:
A continuación vamos a ver el capítulo:
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

II. Configurando un tileset (grupo de baldosas)

1. Haz clic en Tools y selecciona Tileset Editor.

2. Haz clic en Clear. Cuando te pregunte si estas seguro, haz clic en Yes. 3. Queremos que la rejilla tenga unas medidas de 32x32 pixels, asi que asegurate de que los campos Grid with and height contiene el valor 32 (estan situados en la parte inferior de la ventana.

4. Ahora vamo a añadir Tiles o baldosas al tileset o grupo de baldosas. Haz clic en Add. Situate en la carpeta donde hayas instalado el programa (Normalemte C:Archivos de ProgramaPlatform Studio). Aber la carpeta Graphics, y dentro de esta, abre la carpeta Tileset. En este tutorial, tan solo vamos a añadir de modo manual las dos primeras tiles para que aprendas como se hace. Selecciona blocks.png y bullet.png (puedes hacerlo manteniendo pulsada la tecla CTRL y haciendo clic en ambos archivos). Haz clic en Open. Si el archivo Bullet aparece antes que el de Blocks en la lista, selecciona Blocks y haz clic en la flecha arriba para moverlo, o también puedes arrastrarlo hasta el primer puesto de la lista.



5. Ahora debemos configurar las tiles del tileset que hemos creado (su tamaño, animación, acción que ejecutarán, etc.) Primero vamos a configurar el color transparenter. Ya que ambas tiles tienen un fondo de color magenta, puedes seleccionarlas a la vez para cambiar sus colores transparentes. Haz clic en Blocks y después manteniendo pulsada la tecla Ctrl haz clic en Bullet. Dentro de Properties, haz clic en Transparent color, después en la flecha hacia abajo, y selecciona el color Magenta (el ultimo color de la tercera fila).

6. Ahora tenemos que asignar los limites para la tile Blocks. Este paso es opcional pero esta altamente recomendado ya que ayudará a incrementar el rendimiento del juego. Haz clic en Blocks, y dentro de Boundaries, haz clic en(...). Dentro de Boundary type, selecciona Custom. Ahora crea un recuadro dentro de la vista previa de la tile, arrastrando el ratón, que rellene las zonas que contengan imagen de la tile. Si cometes algun error, haz clic en lo que has dibujado y pulsa el botón Delete. Deberías obtener algo parecido a esto:



Ahora continua con el siguiente Frame haciendo doble clic en Current frame. Haz lo mismo con cada frame. Por ejemplo, el frame 7 debería quedar así:



y el frame 13 así (sí, se pueden dibujar diferentes formas en el mismo frame):

publi tienda>



Ahora haz clic en OK.

7. Ya que la baldosa Blocks ya no necesita ninguna otra configuración, selecciona ahora la baldosa Bullet. Ya habrás notado que la vista previa de esta baldosa es algo extraña. Eso es debido a que no tiene seleccionado un tamaño adecuado. Ve al campo Section width, y escribe o selecciona 8. Ahora la vista previa debería ser la correcta.

8. Ahora vamos a añadir una animación a la baldosa Bullet. Dentr de Animations, haz clic en (...). Dentro de Animation, selecciona Disappear. Dentro de Start frame, escribe 2, y dentro de Stop frame, escribe 4. Finalmente, dentro de Frame interval, escribe 0.04 y haz clic en OK. Ahora puedes ver que dentro de las Propiedades, el campo "Animations" tiene ahora el valor "Disappear" ya que hemos seleccionado la animación Disappear.

9. Ya que tiene un tamaño no muy g rande podemos asignarle un limite rectangular. Ve dentro de Boundaries, haz clic en (...). Dentro de Boundary type, selecciona Rectangular. O si lo prefieres, también puedes usar un limite circular. En lugar de seleccionar Rectangular, selecciona OneCustom. Dentro de Tool, selecciona Circle, y dentro de Grid spacing, escribe 8. Ahora haciendo clic, arrastra el puntero desde la esquina superior izquierda hasta la esquina inferior derecha. Para acabar con esto haz clic en OK.

10. Lo último que nos queda por hacer para configurar este tileset o grupo de baldosas es seleccionar que acción ejecutarán. Dentro de Behavior, haz clic en down arrow (flecha abajo) y selecciona (Custom...). En la ventana "Customize Behavior", sube hacia arriba y selecciona Bullet. Las valores por defecto son válidos asi que haz clic en OK.

11. Ahora que ya sabes como editar propiedades a través del Tileset Editor, vamos a añadir rápidamente el resto de baldosas que necesitamos. Haz clic en Import (dentro de la barra de herramientas) y haz doble clic en Tileset.pst. Debería aparecer un cuadro de dialogo llamado "Import Tileset". Ya tenemos las baldosas Bullet y Blocks asi que seleccionamos todas las baldosas desde Button a Water haciendo clic en Button y arrastrando el ratón hacia abajo hasta que que el resto de baldosas hayan quedado seleccionadas. Ahora haz clic en OK. El Tileset Editor debería tener este aspecto:




12. Ya habriamos acabado de configurar el grupo de baldosas asi que haz clic en la X de la esquina superir derecha de la ventana para cerrarla. Los cambios se guardarn automáticamente.

Comentarios de los visitantes
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario.



El autor
Rubén Lapuerta
Colaborador Desarrollo Multimedia
http://www.desarrollomultimedia.es
Manuales

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...