Belloto HTML 5

Belloto HTML5

Belloto HTML 5 es un prototipo de integración de google map para gestionar segmentos de rutas ciclistas.

Abrir en otra ventana

PuZZ & UmlEditor

Puzz HTML5

Puzz es un prototipo de juego para niños desarrollado con HTML5 y canvas.

Abrir en otra ventana

 

Editor de Casos de Uso (canvas)

UML es un prototipo de editor de casos y aplicación para tabletas de uso desarrollado con HTML5, canvas e IndexedDB para almacenar diagramas y actores y casos utilizados. Implementa además la funcionalidad de hacer y deshacer.

Abrir en otra ventana

 

XaLaTaX (Webgl)

XaLaTax es un prototipo de juego (Engine) desarrollado con HTML5 y WebGL que es capaz de cargar los mapas generados por PolMapEditor.

Abrir en otra ventana

Mapa.txt

# =====================================================
# Level/Map Properties section
# =====================================================
Level
  EditDate = 23/01/2015 12:33:42
  Designer = pos=530,251;zoom=100;layer=1
  Properties = Screen.Size=800,480#World.Bounds=0,0,5000,480#
  Bookmarks  = 
Level

# =====================================================
# Resources/TileDescriptors/Animations
# =====================================================
Resources
  Id=3;Location=../img/Data.png
  Id=2;Location=../img/Mountains.png
  Id=1;Location=../img/Colums.png
  Id=4;Location=../img/Ground.png
  Id=5;Location=../img/Nebulosa.png
Resources
Resources#TileDescriptors
  Name = Numeros;IdResource=3;Source=0,0,512,512;W=128;H=128
  Name = NUMERO#067;IdResource=3;Source=141,123,231,141;W=231;H=141
  Name = DATA.PNG#010;IdResource=3;Source=128,256,128,128;W=128;H=128
  Name = Mountains.png#0001;IdResource=2;Source=0,0,512,64;W=512;H=64
  Name = Colums.png#0001;IdResource=1;Source=0,0,64,64;W=64;H=64
  Name = Ground.png#0001;IdResource=4;Source=0,0,128,128;W=128;H=128
  Name = Nebulosa.png#0001;IdResource=5;Source=0,0,100,200;W=100;H=200
Resources#TileDescriptors

# =====================================================
# Layer declaration section
# =====================================================
LayerDeclaration
  Game_Entities = Type=EntityStateControler;Display=True;Locked=False;Opacity=100;Properties=
  Points_&_Shapes = Type=VectorStateControler;Display=False;Locked=False;Opacity=100;Properties=
LayerDeclaration

# =====================================================
# Layer definition sections
# =====================================================
LayerDefinition_Game_Entities
LayerDefinition_Game_Entities#Objects  
  Object1 = Id=AutoId_1;Class=;tsName=Ground.png#0001;Width=5020;Height=284;Pos=-3,294;Z=0;Properties=Wrap=FlipX#Rotate=15#ScaleX=10#ScaleY=2#
  Object2 = Id=AutoId_181;Class=;tsName=Mountains.png#0001;Width=3049;Height=305;Pos=2001,0;Z=1;Properties=Locked=True#
  Object3 = Id=AutoId_1;Class=;tsName=Mountains.png#0001;Width=2416;Height=305;Pos=0,0;Z=2;Properties=Locked=True# 
  Object4 = Id=AutoId_1;Class=;tsName=Colums.png#0001;Width=128;Height=134;Pos=1557,304;Z=3;Properties=
  Object5 = Id=AutoId_45;Class=;tsName=Colums.png#0001;Width=94;Height=145;Pos=1061,296;Z=4;Properties=
  Object6 = Id=AutoId_46;Class=Tile;tsName=Numeros;Width=130;Height=112;Pos=1324,269;Z=5;Properties=
  Object7 = Id=AutoId_1;Class=;tsName=DATA.PNG#010;Width=114;Height=233;Pos=174,182;Z=6;Properties=     
  Object9 = Id=AutoId_24;Class=;tsName=Nebulosa.png#0001;Width=106;Height=456;Pos=170,180;Z=8;Properties=
  Object10 = Id=AutoId_24;Class=;tsName=Nebulosa.png#0001;Width=106;Height=456;Pos=110,100;Z=8;Properties=
  Object8 = Id=AutoId_2;Class=;tsName=NUMERO#067;Width=354;Height=147;Pos=256,279;Z=7;Properties=
  Object11 = Id=AutoId_26;Class=;tsName=Nebulosa.png#0001;Width=1489;Height=249;Pos=1521,49;Z=8;Properties=Wrap=FlipX#ScaleX=0.5#ScaleY=0.5#Rotate=0 
  Object9 = Id=AutoId_25;Class=;tsName=Nebulosa.png#0001;Width=489;Height=449;Pos=521,49;Z=8;Properties=Wrap=FlipX#ScaleX=1.5#ScaleY=1.5#Rotate=15 
 

LayerDefinition_Game_Entities#Objects
LayerDefinition_Game_Entities
LayerDefinition_Points_&_Shapes
  Objects = Id=;T=1;Class=Rectangle;Pos=128,128;Z=0;Size=384,128;Properties=|Id=;T=0;Class=Point;Pos=0,0;Z=0;Type=0;Properties=R=32#|Id=;T=2;Class=PolyLine;Points=80,400,208,320,448,320,624,400,;Z=0;Properties=Color=red#|
LayerDefinition_Points_&_Shapes

 

Charts (Canvas)

Generación de gráficos con HTML5 canvas

Abrir en otra ventana

Collision Grid - Layer

En esta entrada voy a detallar la funcionalidad de la capa Grid o de colisiones.

A veces es necesario contar con una capa en la que podamos indicar qué partes del mapa son transitables por nuestro personaje, qué tipo de suelo es, si existe un pared u obstáculo que nos impide el paso, etc.

PolMapEditor permite especificar el tamaño de las celdas que forman la rejilla estableciendo la variable Design.Grid que hemos visto en anteriores entradas. Permite además la asignación de enteros a cada celda.

Crear una nueva capa

En esta imagen se puede ver como añadir una capa de este tipo a nuestro mapa.

Se puede cambiar entre el modo marcador, creación, borrado y selección por medio de la barra de herramientas. Además existe la posibilidad de utilizar la selección de celdas adyacentes que compartan el mismo valor y la herramienta de relleno.

Teclas de acceso rápido

A continuación se muestra la lista de teclas y combinaciones para realizar algunas acciones habituales:

• Flecha izquierda - Desplaza el visor hacía la izquierda.
• Flecha derecha - Desplaza el visor hacía la derecha.
• Flecha arriba - Desplaza el visor hacía arriba
• Flecha abajo - Desplaza el visos hacía hacía abajo
• Flecha izquierda - Desplaza el visos hacía la izquierda
• Shift derecho – Posibilita selección múltiple y duplicar cuando se arrastran celdas.
• Supr - Elimina los elementos seleccionados
• Mas (+) – Incrementa el valor de las celdas seleccionadas.
• Menos (-) - decrementa el valor de las celdas seleccionadas.

Formato de los datos

La información almacenada por celda se compone de tres valores correspondientes a las coordenadas x e y de la esquina superior de la celda y su valor correspondiente.

Es posible establecer propiedades adicionales para cada celda. Estos valores estarán en Properties separados por punto y coma (;) donde la parte anterior al primer igual (=) es el identificador de la celda (coordenadas x e y) y la posterior una lista de pares clave, valor separada por #".

# =====================================================
# Layer declaration section
# =====================================================
LayerDeclaration
  Collision_Layer = Type=GridStateControler;Display=True;Locked=False;Opacity=100;Properties=
LayerDeclaration

# =====================================================
# Layer definition sections
# =====================================================
LayerDefinition_Collision_Layer
  Data       = -320,-256,7,-288,-256,2,-256,-256,1,-224,-256,1,
  Properties = -320 -256=Value=Exit#;
LayerDefinition_Collision_Layer

 

Video

Aquí os dejo un video para que os podáis hacer una idea de la funcionalidad.

Hasta otra entrega, saludos

Graph - Layer

En esta entrada voy a detallar la funcionalidad de la capa Graph.

En el diseño de mapas es útil contar con una forma de establecer puntos concretos en el mapa. Estos se pueden utilizar para desencadenar determinados eventos, indicar puntos de restauración, entradas a cámaras secretas, etc. Además de para definir grafos para utilizar algoritmos de búsquedas como el A-Star y sus variantes. Esta capa permite precisamente eso: crear puntos y sus posibles conexiones.

 

Crear una nueva capa

En esta imagen se puede ver como añadir una capa de este tipo a nuestro mapa.

Aquí podemos ver un mapa por donde se desenvuelve del famoso héroe Glypy. Se aprecian los nodos y las líneas que los unen y que en este caso determinan el camino que utilizarán los enemigos: 

Se puede cambiar entre el modo marcador, creación de nodos, borrado y selección por medio de la barra de herramientas. Además de dos utilidades relacionadas con el enlace de nodos. Enlazar con el anterior nodo y autoenlace a la hora de la creación de nodos.

Teclas de acceso rápido

A continuación se muestra la lista de teclas y combinaciones para realizar algunas acciones habituales:

• Flecha izquierda - Desplaza el visor hacía la izquierda.
• Flecha derecha - Desplaza el visor hacía la derecha.
• Flecha arriba - Desplaza el visor hacía arriba
• Flecha abajo - Desplaza el visos hacía hacía abajo
• Flecha izquierda - Desplaza el visos hacía la izquierda
• Ctrl derecho + Flecha izquierda - Desplaza la selección al objeto anterior.
• Ctrl derecho + Flecha derecha - Desplaza la selección al objeto siguiente.
• Shift derecho + click derecho – Posibilita selección múltiple.
• Supr - Elimina los elementos seleccionados
• F7 – Cambia el modo de enlace. Cuando está activado automáticamente se enlazan los nuevos nodos con el anterior.
• + – Enlaza el nodo seleccionado con el anterior.

Formato de los datos

El formato de los puntos y de las líneas se se almacenan de la siguiente forma:

# =====================================================
# Layer declaration section
# =====================================================
LayerDeclaration
  Graph_Layer = Type=GraphStateControler;Display=True;Locked=False;Opacity=100;Properties=Design.Grid=16,32,1#
LayerDeclaration 
# =====================================================
# Layer definition sections
# ===================================================== 
LayerDefinition_Graph_Layer
  Nodes = 807,786,1152,768,1456,704,1664,672,1920,768,1748,848,2001,886,1997,652,
  Edges = 1456,704,1456,704,1664,672,1664,672,1920,768,1920,768,1748,848,1920,768,2001,886,1920,768,1997,652,
  Edges2 = 0,1,1,2,2,3,3,4,4,5,4,6,4,7,
LayerDefinition_Graph_Layer

• Nodes : Pares de posición x, posición y
  
• Edges : Cuatro valores correspondientes a las coordenadas de los nodos enlazados.
  
• Edges2 : Pares correspondientes a los índices de los nodos enlazados.

Configuración

Esta capa admite la configuración del tamaño de la rejilla

La clave es Design.Grid y el valor ancho,alto,divisiones. Por ejemplo 16,16,2 creará puntos de alineación cada 16 pixeles horizontales y verticales y las líneas de la rejilla cada 2, es decir cada 32 pixeles.

Video

Aquí os dejo un video para que os podáis hacer una idea de la funcionalidad.

 

 

Hasta otra entrega, saludos

Line - Layer

En esta entrada voy a detallar la funcionalidad de la capa Line.

Esta capa fue el origen del editor. Por entonces estaba pensando en realizar un juego en el que el protagonista pudiera desplazarse por un mundo lleno de pendientes. Para ello necesitaba de una herramienta que permitiera la creación de una línea que definiera el terreno.

La primera implementación fue bastante fácil y simple pero pronto empecé a echar en falta acciones como copiar, pegar, mover y rotar ciertos segmentos de la línea. Esto no me llevo mucho tiempo pero una vez realizado necesitaba una forma de deshacer lo hecho y poder rehacerlo si era el caso. Aprendí el patrón Memento y Command y volví a codificar todas las acciones bajo este enfoque de forma que se pudiese volver al estado anterior después de cada operación.

Lo que en un principio nació como una herramienta simple se estaba convirtiendo en algo más complejo que iba a necesitar de otras formas de codificar.

Esta capa por tanto solamente trabaja con una línea que como digo puede servir para definir la superficie por la que se desplace un personaje o móvil.

Crear una nueva capa

En esta imagen se puede ver como añadir una capa de este tipo a nuestro mapa.

Esta es una imagen del un ejemplo de línea:

Se puede cambiar entre el modo edición de puntos, el marcador y la selección por medio de la barra de herramientas.

Existe además la posibilidad de añadir formar predefinidas: semicírculos, triángulos, etc. Cuando se seleccionan más de un punto se habilitan las opciones de desplazamiento, rotación, mirror, flip y reverse.

La opción de rotación ofrece valores fijos predefinidos y permite especificar un valor determinado. Además permite establecer el punto central para la rotación.

Teclas de acceso rápido

A continuación se muestra la lista de teclas y combinaciones para realizar algunas acciones habituales:

• Flecha izquierda - Desplaza el visor hacía la izquierda.
• Flecha derecha - Desplaza el visor hacía la derecha.
• Flecha arriba - Desplaza el visor hacía arriba
• Flecha abajo - Desplaza el visos hacía hacía abajo
• Flecha izquierda - Desplaza el visos hacía la izquierda
• Ctrl derecho + Flecha izquierda - Desplaza la selección al objeto anterior.
• Ctrl derecho + Flecha derecha - Desplaza la selección al objeto siguiente.
• Shift derecho + click derecho – Posibilita selección multiple.
• Ctrl derecho – Cambia el posicionamiento de lo los puntos de las formas preestablecidas.
• Shift derecho – Cambia el posicionamiento de lo los puntos de las formas preestablecidas.
• Supr - Elimina los puntos seleccionados
• Insert – Crea los puntos correspondientes cuando está habilitada la opción Preview de las formas preestablecidas
• + y - – Cambia forma preestablecida

Formato de los datos

El formato de los puntos que forman la línea se almacenan de la siguiente forma:

# =====================================================
# Layer declaration section
# =====================================================
LayerDeclaration
  Line_Layer = Type=LineStateControler;Display=True;Locked=False;Opacity=100;Properties=Design.Grid=16,32,1#
LayerDeclaration 
# =====================================================
# Layer definition sections
# =====================================================
LayerDefinition_Line_Layer
  Data = 4,-128,-45,-58,-81,-16,-135,75,-240,74,-293,-18
LayerDefinition_Line_Layer 

Configuración

Esta capa admite la configuración del tamaño de la rejilla

La clave es Design.Grid y el valor ancho,alto,divisiones. Por ejemplo 16,16,2 creará puntos de alineación cada 16 pixeles horizontales y verticales y las líneas de la rejilla cada 2, es decir cada 32 pixeles.

Video

Aquí os dejo un video para que os podáis hacer una idea de la funcionalidad.

Hasta otra entrega, saludos

Configuración del PolMapEditor

Puedes ver un  vídeo explicativo en el que he utilizan una capa para colisiones "LayerGrid".

 

PolMapEditor ofrece la posibilidad de trabajar con diferentes capas. Esta capas pueden ser de varios tipos que serán tratados individualmente con más
profundidad. Las capas pueden se pueden ocultar o mostrar, cambiar su orden y además se les puede establecer un nivel de transparencia. Todas esta funciones se pueden realizar por medio de los correspondientes botones de la barra de herramientas de la ventana "Layers".

La capa seleccionada será la que ocupe el primer plano, las demás se muestran según su orden en la pila. También es posible seleccionar la "primera capa" como en la imagen superior de forma que se pueden establecer propiedades que afectan a TODO el mapa.

Como se ve es posible la introducción de propiedades de usuario por cada capa y algunas que tienen un significado especial para el diseñador.

 

Propiedades globales

Existen una serie de propiedades globales que permiten la personalización de la interfaz del diseñador.

• AxisForeColor - Color de los ejes X e Y (*).
• BackgroundColor - Color del fondo del editor (*).
• ForeColor - Color de los puntos y cuadrícula (*).
• Screen.Size - Tamaño de la pantalla física del dispositivo para el que se diseña el juego. Por ejemplo 800x480 para WP7.
• Screen.Border.Color - Color con el que se ocultará la parte del mapa que no entra en la vista actual (*).
• World.Bounds - posición y dimensiones (rectangulo) del mundo por ejemplo "-400,-200,1300,600"

* - Color en formato html por ejemplo : #FFAA00 o Blue.

 

Teclas de acceso rápido

A continuación se muestra la lista de teclas y combinaciones para realizar algunas acciones habituales:

• Flecha izquierda - Desplaza el visor hacía la izquierda.
• Flecha derecha - Desplaza el visor hacía la derecha.
• Flecha arriba - Desplaza el visor hacía arriba
• Flecha abajo - Desplaza el visos hacía hacía abajo
• Flecha izquierda - Desplaza el visos hacía la izquierda
• Ctrl derecho + Flecha izquierda - Desplaza la selección al objeto anterior.
• Ctrl derecho + Flecha derecha - Desplaza la selección al objeto siguiente.
• Ctrl izquierdo + G - Bloquea el desplazamiento horizontal con el ratón.
• Ctrl izquierdo + H - Bloquea el desplazamiento vertical con el ratón.
• Ctrl izquierdo + * - inserta un marcador en el centro de la vista.
• Supr - Elimina el elemento seleccionado.

Barra de estado

PolMapEditor muestra una barra de estado en la que se muestran una serie de mensajes y la información de:

- Las dimensiones de la selección
- La posición del ratón en coordenadas de pantalla
- La posición del ratón en coordenadas del mundo.
- La posición del ratón en coordenadas del mundo alineadas a la cuadrícula.
- Cinco botones para: activar alineación a la rejilla, mostrar/ocultar rejilla, mostrar/ocultar puntos y bloquear desplazamientos

 

Formato del fichero

No he querido utilizar ninguno de los formatos de fichero para maps existentes ni tampoco utilizar XML por el tamaño de los ficheros resultantes. Por el contrario he utilizado un fichero de texto plano.

Los valores se agrupan en secciones del mismo nombre dentro de las cuales aparecen las diferentes propiedades y sus valores.

El algoritmo para grabar y leer estas propiedades será por lo tanto bastante sencillo. Básicamente se parte la cadena primeramente por retornos de carro y a continuación por el carácter "=". Más adelante pondré la implementación en C#.

Si una propiedad es a su vez una lista de propiedades, un diccionario, las diferentes propiedades están separadas por el carácter "#". En el caso de ser puntos estos están separados por comas ",".

A continuación se muestra el fragmento del fichero correspondiente a la parte global del mapa.

# =====================================================
# Level/Map Properties section
# =====================================================
Level
  EditDate   = 18/10/2013 13:09:01
  Designer   = pos=-134,-28;zoom=100;layer=2
  Properties = BackgroundColor=black#Screen.Border.Color=Red#Screen.Size=400,320#World.Bounds=-400,-200,1300,600#
  Bookmarks  =
Level

Los caracteres "#" y ";" al principio de las líneas hacen que estas sean tratadas como comentarios.

 

Fichero

Se puede ver el contenido del fichero del mapa pulsando las teclas Ctrl+Mayús+T o desde el menú View. Los cambios realizados en esta ventana NO serán guardados.

PolMapEditor 1.0

Aquí dejo un enlace para la descarga del programa:

http://glypy.mipropia.com/PolMapEditor.rar

Son 6 ficheros que pueden ser copiados en cualquier directorio. Es necesario tener instalado Microsoft Net Framework 3.1 o superior para el correcto funcionamiento.

 

Saludos

Primer video

Aquí dejo un pequeño video en la que os podéis hacer una idea de como es el editor a la hora de tratar con lineas, poli-lineas, formas.

El editor

En esta entrada voy a mostrar algunas capturas de pantalla en las que se pueden ver algunas características de PolMapEditor.

La primera corresponde a un mapa importado de Glypy The Hero, mi primer juego en WP7. Aquí dejo el enlace por si alguien quiere probarlo.

Otra en la que se aprecia la ventana TileSets y la de Resources

Otra más en la que se puede ver la capa Grid seleccionada así como la celda y sus propiedades.

Seguiré publicando más entradas y próximamente el programa y su código, así de gratis…

Mensaje de bienvenida

Hola a todos los visitantes de este nuevo blog que abro.

Con él intento dar a conocer PolMapEditor, un programa para la edición mapas que he estado desarrollando durante algún tiempo. Está enfocado a desarrolladores de juegos y he utilizado C# como lenguaje de programación.

No está finalizado, pero es posible la edición de diferentes tipos de capas utilizadas en la creación de juegos: Grid, TileMaps, Grafos, lineas, polilineas, poligonos, Objetos, Parallax, Scroll, etc.