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 es un prototipo de juego para niños desarrollado con HTML5 y canvas.
Abrir en otra ventanaUML 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 ventanaXaLaTax es un prototipo de juego (Engine) desarrollado con HTML5 y WebGL que es capaz de cargar los mapas generados por PolMapEditor.
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
Generación de gráficos con HTML5 canvas
Abrir en otra ventanaEn 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.
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.
A continuación se muestra la lista de teclas y combinaciones para realizar algunas acciones habituales:
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
Aquí os dejo un video para que os podáis hacer una idea de la funcionalidad.
Hasta otra entrega, saludos