Tutorial de AGD 2: ¿Qué son los tiles?


Continuamos con el tutorial, en esta ocasión centramos la atención en los tiles o bloques.

Si empiezas de cero lee la primera parte de este tutorial de AGD antes de entrar a que son los tiles

En esta ocasión continuamos con el primero de los siguientes elementos (Los tres restantes serán a entrega número 3, por razones de extensión). En conjunto, los cuatro nos permitirán crear nuestro «mundo virtual»:

  • Bloques (Tiles)
  • Creación de muros
  • Generación de plataformas
  • Diseño de nuestra primera pantalla

Una vez completemos este y el siguiente capitulo seremos capaces de crear pantallas sencillas.

¿Qué son los Tiles?

Pantalla de la cueva de Javi's Big Adventure

Antes de comenzar a explicar como se crean tales en AGD , quizá estaría bien explicar en que consisten los tiles y que es eso de «mapas hechos con tiles».

Todo comienza debido a que las maquinas sobre las que ejecutaremos nuestros juegos tienen una memoria extremadamente limitada, así que conviene ahorrar lo mas posible.

En la época, los desarrolladores que trataban de grabar los pantallas de sus juegos directamente en memoria.

Rápidamente se encontraban con el problema de que la memoria del ordenador se llenaba extremadamente rápido.

Por ello, idearon una forma de reducir el espacio que ocupaban sus pantallas.

«Divide y Vencerás»

Eso reza la famosa máxima, y esto es lo que hicieron, dividir la pantalla en trocitos mas pequeños y repetir estos de forma que con un numero limitado de trozos de gráfico, un poco de arte y un mucho de paciencia, lograban crear pantallas bastante complejas, con un gasto de memoria mínimo, al tener que indicar solo que en la posición tal , estaba el gráfico cual y no almacenar el gráfico en si mas que una vez.

¿No lo ves Claro? fíjate en el agua de la parte inferior de la captura que acompaña a estas lineas y los pinchos del fondo ¿muchos verdad? en realidad no, tan solo hay un gráfico de 8×8 pixels para el agua y otro para el pincho, a base de repetir estos dos gráficos he construido ese «lago mortal de la leche».

Si lo tradujera en texto, en lugar de tener que guardar algo del estilo: «dibujoagua dibujoagua dibujoagua dibujoagua dibujoagua dibujoagua dibujoagua dibujoagua dibujoagua»simplemente almacenaremos «9 x dibujoagua»lo que evidentemente ahorra cantidades ingentes de memoria para almacenar las pantallas.

El truco radica en guardar una sola vez el dibujo y repetirlo en lugar de almacenar los pixeles de cada parte de la pantalla, requiere mas trabajo para evitar que se note la repetición pero merece la pena.

AGD hay que trabajarlo

Esta claro que llegar a crear pantallas vistosas, en las que no se note la repetición de los pequeños bloques (o lo menos posible) y que ademas sea colorista, no es fácil, pero os enseñare lo básico para que luego vuestra creatividad os lleve al Olimpo de los creadores de pantallas.

Como me jacto de unir lo viejo y lo nuevo, predicaré con el ejemplo, este video, con un tono muy actual, explica bastante bien como funciona esto en la practica. Hay diferencias entre la época «arcaica» (que es donde haremos nuestro juego con AGD) y la «mona elegante», pero es un modo muy visual de ver esto en la práctica:

Un pequeño ejercicio: dedica un rato a tratar de identificar los bloques individuales que he usado para crear el mareado de The Javi’s Big Adventuree incluso descárgalo, y usando la versión 4.6 de AGD cargado para ver como esta hecho, no hay mejor forma de aprender que tocar.

Si vas a cargar el juego en AGD, te recomiendo que uses la opción cargar de AGD y pongas la cinta del juego a partir del final de la screen.

Creando nuestros primeros tiles en AGD

Editor de Bloques - Bloque 0 Fondo

Lo primero de todo, es acceder al editor de bloques desde el menú principal, pulsando B, esto nos llevara a la pantalla del Editor de Bloques, y mostrara el Bloque 0.

Este es un bloque muy especial y que debemos dejar sin tocar.

AGD utiliza este bloque , de tipo «empty space» (lo explicaremos cuando lleguemos a crear paredes y plataformas) que básicamente es el «cielo», o relleno por defecto de todas las pantallas.

Si lo tocamos, variaremos todo el fondo (para bien.y para mal).

Nota importante: Este bloque también define los colores de los sprites, el "paper" de este bloque sera el de fondo y el "ink" la tinta. Es algo que sucede "por que se ha diseñado así"

En la pantalla del editor podemos ver varios elementos:

  • El bloque en tamaño grande, que será donde lo editemos.
  • La versión en pequeño para previsualizarlo.
  • El tipo de bloque (que trabajaremos en la próxima entrega).
  • Una indicación de las distintas tintas y fondos disponibles (los standard de ZX Spectrum básicamente)
  • La indicación del número de bloque que estamos editando.

Os copio aquí las lista de atajos de teclado de esta pantalla:

TECLAS
============================================
FLECHAS = Mover el cursor de dibujo
SPACE = Cambia color del pixel seleccionado

Q = Mover a la izquierda por las propiedades
W = Mover derecha por las propiedades

N = Siguiente Bloque
L = Bloque Anterior

P = Rotar color de Fondo
I = Rotar color de Tinta
B = Cambiar Brillo y Flash

M = Copiar bloque actual al portapapeles
K = Pegar bloque desde el portapapeles
C = Limpiar el bloque actual

X = Crea un nuevo bloque
D = Borra el bloque actual

ENTER = Volver al menu principal.

Bloques, bloques, bloques

Bien, continuemos, en la primera entrega creamos «el area de juego», ahora es el momento de comenzar a llenarla con nuestro «mundo virtual». Como hemos dicho las pantallas se componen de bloques. Cada uno de ellos de 8×8 pixels.

Como sabemos en ZX Spectrum, cada «carácter» de 8×8 pixels puede tener solamente un color de fondo y otro de tinta, por lo que debemos prepararnos para ser creativos.

En esencia es un proceso sencillo, pero lleva práctica. Ya sabéis que el maestro Fran Gallego nos incita a practicar, practicar y practicary aquí vamos a hacer honor a ese guideline!.

Practicar, Practicar, Practicar

Bien, además de trastear con los distintos bloques, en esta ocasión os voy a plantear un reto. La pantalla de «la cueva» que vemos en este mis post, esta construida con 12 tiles distintos.

El reto consiste en identificar esos 12 tiles y replicarlos en el editor de bloques.

Como no es algo sencillo, en caso de que se bloqueen , quieran comprobar si los encontraron, o tengan dudas, pueden preguntarme a través de los comentarios aquí, en twitter en la cuenta @metsuke, o por mail en metsuke(at)gmail.com y – en la medida de mis posibilidades y tiempo libre, que no es demasiado – intentare ayudarles.

En el proximo capitulo usaremos esos bloques para crear la misma pantalla en el editor (por si son curiosos) y a continuación haremos un ejercicio artístico que les revelaré en la próxima entrega 🙂

Sobre todo, disfruten haciéndolo!.

¡Compártelo!

Ayudame a difundir este contenido a todo aquel que pueda sacarle partido, difundelo en redes, cuéntaselo a tus amigos, coméntalo en la cola del supermercado, además de aportar, ¡seguro que conoces a gente interesante y acabas uniéndose al bando rebelde!

Sígueme en Redes

Acelera mi progreso de la materia que te interesa.

El calendario y ritmo de publicaciones actualmente responde a mis necesidades de estudio y desarrollo de proyectos personales, si quieres invertir en que acelere alguna materia concreta, te ofrezco una posibilidad:

Puedes donar en mi paypal (paypal at metsuke.com), indicando la materia, por cada 25 euros donados, priorizaré un capítulo de la materia que me indiques que ya tenga escrito para que salga el proximo dia viable y disponible de lunes a viernes (en orden de llegada y a un post diario).

En caso de que el capítulo aún no exista, centraré mi atención en escribirlos y publicarlos con prioridad, pero no puedo prometer inmediatez.

De nuevo priorizaré las donaciones por orden de llegada pero cuando coincidan varias, iré rotando cada dia una para evitar la monopolización de mi foco de tareas.

Me reservo el fin de semana para priorizar lo que considere pertinente en el caso de que haya cola de entrega. Si te gusta el proyecto, ¡es un buen modo de apoyarme!

¿Te interesan mis servicios a título personal?

Puedo ofrecerte una amplia gama de productos y servicios en accesibilidad a través de mis partners, aunque quizá prefieras que lo haga yo personalmente…

En ese caso, puedes contactarme en mi correo r.carrillo@metsuke.com y cuéntame que necesitas, si lo que leo me gusta, te pongo en contacto con el comercial de mi empresa de consultoría.

Si quieres que sea yo expresamente quien te atienda, puedes indicármelo y llegamos a un acuerdo.

Advierto que esta última posibilidad te saldrá bastante más cara que hablar con mi equipo, pero si es lo que deseas, a tu disposición.

Un Abrazo.

Sobre las traducciones

Por el momento me he visto obligado a detener la traducción del contenido, apenas doy abasto a escribirlo (que es mi objetivo, ya que son mis apuntes de estudio), por lo que no parece tener sentido mantener activas unas traducciones que no doy abasto a crear.

En caso de que más adelante el flujo de caja me lo permita, es mi intención contratar servicios de traducción y editores que realicen la tarea, pero por ahora lo dejo desactivado.


Quizá te interese leer más sobre AGD

7 Respuestas a “Tutorial de AGD 2: ¿Qué son los tiles?”

    • Hola!, la copia normal cargará (en la 4.6), lo único que has de tener en cuenta es que AGD no cargará el juego si le pones la cinta desde el comienzo, debes dejar pasar el bloque de la pantalla de carga y ponerlo a cargar justo a continuación 🙂 saludos! (igual vendria bien que el proximo capítulo del curso sea justo esto … le dare una vuelta)

      • Muchas gracias, es que estoy intentando hacer una gota de agua, pero cuando llega a tocar el bloque no logro que empiece desde arriba otra vez.
        El codigo que uso es:
        IF CANGODOWN
        SPRITEDOWN
        ELSE
        LET FRAME 2 (SERIA LA ANIMACION FINAL DE LA GOTA ROTA)
        ENDIF
        IF COLLISION 0
        KILL
        ENDIF

        Pero nose como reiniciar el recorrido desde arriba otra vez. Gracias.

        • El tipo de sprite asociado a la gota en Javi’s Big Adventure es el 7, básicamente lo que yo hice fue hacer que rebote arriba y abajo, la animacion contiene un frame vacio que uso para mostrar cuando va hacia arriba, y controlo que ese no se vea al bajar, de ese modo parece que cae, pero en realidad esta rebotando arriba y abajo.

          Uso después PARAMA para saber cuando sube y evitar que la colision mate al jugador. En el fondo el que la gota cae es un efecto óptico 😉 , lo dicho mira el codigo del evento para el tipo de sprite 7, si ves que tienes dudas sobre como funciona ese codigo dime y te aclaro.

          Bonus: ese frame vacio me ayuda en las pantallas de hielo a generar el «efecto» de los «espíritus de agua» que usan la misma secuencia de animacion pero gestionada de un modo distinto. 😉

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>