Clase para dibujar mapas de Tiles

[Hechelion]

Buenas.

Aunque he estado este último tiempo metido con Elipse y SDL decidí terminar un pendiente que quería crear para la librería y es una clase para dibujar mapas de tiles a partir de archivos de texto.
Espero subir la clase y algunos vídeos para este fin de semana.

[[EX3]]

Genial, esperando ver alguna demo con el sistema implementado :D

Yo por mi parte tendria que poner un poco al dia la web con estos proyectos que teneis montados, como el scroll parallax, la clase sprite, etc...

Salu2...

[Hechelion]

Como siempre me pasa, al final me he entusiasmado y estoy agregando un montón de cosas extras a la clase, actualmente se encuentra completamente funcional en su forma básica pero quiero agregarle la capacidad de utilizar autotileset con y sin animación, un editor que permita sacarle el jugo y que maneje archivos XML.

Que se encuentra desarrollado y funcionando.
-Multicapas con configuración independiente del Z.
-Zoom independiente por capa.
-control de parallax por capa (se puede hacer que una capa se mueva más rápido que la otra dando la sensación de profundidad)
-una matriz para control de colisiones.
-uso de archivos de textoplano para almacenar la información, al igual que la clase de animación permite cargar como archivo o como cadena de texto permitiendo trabajar con encriptación.

Código [Seleccionar] Expand


[layer_0]
zoom=1
deltaX=1
deltaY=1
centroX=1
centroY=1
z=0
SubColX=1
SubColY=1

[map_0]
{(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)
(1,1,1,1,1,1,1,1,1,1,1,1)}

[col_0]
{(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)}

[layer_1]
zoom=1
deltaX=1
deltaY=1
centroX=1
centroY=1
z=0
SubColX=1
SubColY=1

[map_1]
{(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,24,24,24,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,24,0,0,0)
(0,0,0,0,30,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,24,0,0,0,0,0,24,0,0)
(0,0,0,0,0,0,24,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0)}


y todo con sólo 3 líneas de código

Código (vb) [Seleccionar] Expand


...
Dim oTileMap As ClsTileMap
...
Call oTileMap.Init(m_gfx, m_System, App.Path & "\mapa.txt")
...
...
Call oTileMap.Draw(0)
...


[[EX3]]

Como siempre dando caña al asunto, si señor :)

Salu2...

[Hechelion]

Ahí estamos, al pie del cañón como se dice, a ver si algún día aparece alguna noticia en la página   0:-)

Como nota a parte les contaré que pasé todo el día buscando un error que hacía que un mismo pixel se viere en 2 tileset, luego de repasar toda la lógica de las funciones y repasar la clase entera me di cuenta que el problema era que la imagen era de 256*576 y al no ser múltiplo de potencia de 2 hacía que la librería "suavizara" la imagen produciendo el dichoso error.

Les dejo un vídeo de lo que puede hacer actualmente la librería, por desgracia al comprimir el vídeo se perdió mucha calidad, pero que le vamos a hacer.
http://www.youtube.com/watch?v=_EQFsUstoZA

Todo lo que muestra el vídeo es controlado por la clase, el código es exactamente el mismo que para el ejemplo anterior

Código (vb) [Seleccionar] Expand


...
Dim oTileMap As ClsTileMap
...
Call oTileMap.Init(m_gfx, m_System, App.Path & "\mapa.txt")
...
...
Call oTileMap.Draw(0)
...


Lo único que cambia es el archivo de texto que almacena el mapa

Código [Seleccionar] Expand


#archivo de ejemplo para estrutura de tile map basado en archivo de texto plano
[cabecera]
tipo=Mapa_tiles_txt
version=1

[imagenes]
0=.\recursos\tileset\plataforma.png


[tileset]
Imagen=0
ancho=32
alto=32
mapaAncho=20
mapaAlto=20
MaxAncho = 8
MaxAlto = 18
SubDivX = 1
SubDivY = 1

[Col]
{(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0)}

[obj_0]
Tipo=Anim
Imagen=0
X=0
Y=32
Anim=4
Tiempos=10,10,10,10

[obj_1]
Tipo=Anim
Imagen=0
X=128
Y=32
Anim=4
Tiempos=10,10,10,10

[layer_0]
zoom=2
deltaX=1
deltaY=1
centroX=-128
centroY=-128
z=0

[map_0]
{(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10001,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10001,10000,10000,10000,10000,10000,10001,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10001,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10001,10000,10000,10001,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10001,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10001,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10001,10000,10000,10000,10000,10001,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10001,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)
(10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000)}


[layer_1]
zoom=1
deltaX=1,5
deltaY=1,5
centroX=1
centroY=1
z=0

[map_1]
{(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,2,3,3,3,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,2,3,3,3,3,4,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,2,3,3,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,2,3,3,3,3,3,4,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1)}

[layer_2]
zoom=2
deltaX=2
deltaY=2
centroX=-128
centroY=1
z=-1

[map_2]
{(5,6,7,0,0,0,0,0,0,0,0,5,6,6,7,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,5,6,6,7,0,0,0,0,0,0,0,5,6,7,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,5,6,6,6,6,6,7,0,0,0,0,5,7,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,5,6,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,5,6,6,7,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(5,6,6,6,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)}


Lo único que estaría faltando es crear un editor, pues al aumentar la complejidad del proyecto (delta, animaciones, etc) los editores de tiles que he encontrado no permiten exportar todas las opciones que requiere la clase.
Cuando tenga el editor voy a subir la clase y el programa (de paso voy a volver a subir todas las otras herramientas que he creado) y espero escribir un manual corto explicando como crear un sencillo juego en base a dxlib_32 y las clases que he programado.

saludos.

[[EX3]]

Joder, y luego decia el otro gañan de "falta de recursos" que no se podian hacer juegos plataformeros con esta libreria. Como se nota el que le echa ganas y se lo curra y el que espera que se lo den todo hecho :P

Me ha gustado el invento, con scroll parallax y tiles animados como decias :) Algun proyecto en mente para aprovechar el sistema?

Salu2...

[Hechelion]

La verdad no, pensaba crear un demo más que un juego y hacer un PDF con todo el proceso para que sirva de guía a cualquiera que se anime con la librería, con las clases de tilemap, menús y el editor de animaciones creo que está toda la base para facilitar el trabajo a cualquiera que quiera crear juegos con la librería.

En lo personal y como había dicho en otros post, me encuentro trabajando en un juego de estrategia espacial, pero lo estoy desarrollando para linux y he pasado bastantes ratos libres dándole a SDL y a Ogre.

PD: Me alegra que os gustara el invento.

[Hechelion]

Saludos.

Bueno, el editor va tomando forma, lento pero va avanzando.


al igual que el GUI para crear animaciones, será una aplicación libre, de paso comento que he estado subiendo los otros proyectos a mi página, con lo cual los programas estarán siempre disponibles y sin ningún tipo de publicidad o similar.

En estos momentos mis metas serían
- Terminar el editor de Tiles.
- Adaptar las clases para Net.
- Crear un pequeño manual que cree un juego utilizando las herramientas que he creado.
- Posiblemente Crear un SideScroll pequeño.

[Hechelion]

otra fotito del avance del editor   :P



Al fin logro ver el final del editor, está faltando guardar y abrir un proyecto de mapa (exportar para visualizar con la clase ya funciona, como ven en la imagen), el editor de animaciones y editar los "flag" y con eso estaría listo para publicarlo.

[[EX3]]

Maldito proxy del curro que no me deja ver la mitad de las imagenes que colgais en el foro :P Curiosamente las de imageshack si me deja  :..

Salu2...

[Halcon07]

Juas!  :o
Excelente proyecto, me han gustado los resultados de los videos...

[superbalgas]

Buenisimo... la verdad es q le estas dando con todo xD!!..

me permitis una sugerencia???.. en ves de q detecte el rosa como transparente... podrias aprovechar los canales alpha de los targa xD!!.... no se si lo admitira dx_lib32, "creo q si".....

es muy bueno ya q podes crear un canal parte y q detecte ese segundo canal en las sonas oscuras como transparente y las sonas blancas como solidos... como tambien se pueden hacer semi transparentes agregando un color r128 g128 b128 "gris"

Salu2!...

la verdad q me sorprendiste con el editor de niveles ^^... espero q lo termines pronto y sin interrupciones problematicas q tiene todo programador xD!

[Hechelion]

Tanto el editor como la clase trabajan en base a DXlin32, por lo cual si aceptan el canal alpha. (en el vídeo no se nota mucho, pero las nubes tienen transparencia).

el color fucsia que se ve en la imagen es el color de fondo del editor.

[Propiedades]
ColorTransparente = &H0
ColorGrilla = &HFF000000
ColorFondoMap = &HFFFF00FF
ColorFondoTile  = &HFFFF00FF

El editor ya está 95% listo, así que es cuestión de algunos días para que lo publique junto con la clase y algunos ejemplos y gracias por el interés.

[superbalgas]

ah... piola entonces... es q el fucsia se lo distingue mucho en los juegos 3d como transparente... un ejemplo es en el motor Genesis3D... como en el motor Sierra q seria un azul...

pero bueno... estaré esperando con ansias esta cls ^^

[Hechelion]

Escribo esto más que nada para darme ánimos, el editor me ha costando bastante más de lo que esperaba y aunque aún le faltan algunas funciones básicas creo que ya se encuentra en condiciones de ser publicado como versión beta.

Como comentario personal, me he pasado toda la noche depurando y puliendo el editor, así que dentro unas horas más (voy a dormir algo) voy a publicar el editor junto con la clase.

¿Que novedades trae?.
-Además de todo lo que ya está publicado, le agregué la opción de crear un mapa de tile con múltiples imágenes (o sea, se pueden seleccionar distintos archivos de imagen para cada layer del mapa, la única condición es que tengan el mismo ancho).
-Sistema de Flag de 16 bit para poder utilizar la clase para programar colisiones.
-Capacidad para trabajar con mapas enormes (lo he probado hasta 512*512 tiles sin problemas en el rendimiento).