Div Games en Html5 y Canvas

[darío]

Estoy bastante seguro que en los FPG de32bpp de Bennu no hay ningún registro final así que tiene que ser un invento del FPG Editor.

Cuando hice el Smart Fpg Editor hice pruebas en las que comparaba los archivos generado con mi programa y los hackeaba ;) comparaba en un editor hexadecimal.
Ten en cuenta que los FNT son distintos en Fenix y en DIV. En DIV son muy parecidos al formato de de los FPGs. Mi programa puede abrir los FNT de div como FPG, por lo que a lo mejor un poco de código puede serte útil si piensas dar soporte a los mismos.

[AmakaSt]

Hola darío,

Gracias por la información, he intentado probar tu programa Smart FPG, pero me da error y no puedo ejecutarlo: Run-time error '429' (Active X...).

He visto que los FNT que no son de Div tienen más información, ya tengo más o menos los FNT "32", digo más o menos porque me falla el canal alpha que no acaba de ser de 32bits, he usado el Fntmake para probar de crear fuentes de 32bits, por el foro no he encontrado muchos editores de fuentes.

Un saludo.

[darío]

Hola AmakaSt,

Apuesto a que mi editor no te funciona por que estás usando la versión "binaria" en cualquier cosa que no sea Windows XP o a que lo estás ejecutando desde el Bennupack.

Si usas el instalador no tendrás problema. Lo he probado en Windows 7 y 8 y funciona sin problemas y el motivo es los componentes COM, que al ser una tecnología "legacy" no funcionan igual en XP que en los "nuevos" Windows, hoy probaré a instalarlo en Windows 10 a ver si sigue funcionando :D. El instalador es la forma más limpia también debido a que desinstalándolo te aseguras que se eliminan esas referencias COM. Y si te preocupa lo que pueda hacer el isntalador "sin tu conocimiento", bueno, está el script del instalador en bitbucket y verás que lo único que hace es copiar archivos y registrar las dlls COM oportunas... La versión binaria la hice porque al parecer en su día había gente a probar mi editor si estaba con un instalador (cuando en realidad es la forma más limpia de que todo se elimine cuando ya no necesitas la aplicación...)

Sobre el FNT de Bennu, mi consejo es que te descarges el código fuente de Bennu, hagas un find in files y encuentres la estructura del formato FNT o la rutina donde se carga :). Smart Fpg Editor no abre esos ficheros en cualquier caso.

Mvh,
Darío

[AmakaSt]

Versión 0.86 ya disponible online, esta incluye compatibilidad con los FPG, FNT y MAP de BennuGD a 32bits de color. Aquí la lista de novedades completa:

variables:
   - rgb_to_16c, rgb_to_128c, rgb_to_256c, rgb_to_gboy

bugs y mejoras:
   - [MEGA ADD] compatibilidad con los formatos map, fnt y fpg de bennugd (32 bits de color)
   - [ADD] el visor de fuentes ahora también soporta el formato fnt de 32bits
   - [ADD] el visor de fpg ahora también visualiza (no edita) archivos fpg compatibles de bennugd
   - [ADD] ahora al cambiar de pestaña se guarda la posición de línea donde te habías quedado en cada pestaña
   - [DEL] la opción de mostrar listado de compilación, dejo de ser útil desde hace muchas versiones
   - [FIX] corregido problema con la proyección de sombras
   - [FIX] solucionado problema al quitar, añadir o seleccionar pestaña
   - [FIX] corrección de varios bugs menores del compilador y del ide

Un saludo.

[Erkosone]

Lo de poder leer el formato de bennuGD es genial, esto ahorra un montón de trabajo tio.
Gracias por incluirlo  ;D :D :)

[AmakaSt]

Lo de poder leer el formato de bennuGD es genial, esto ahorra un montón de trabajo tio.
Gracias por incluirlo  ;D :D :)

De nada. :)

Entre hoy y mañana subiré las versiones descargables para que ya podáis trabajar en local.

[AmakaSt]

Div GO versión 0.86 ya disponible para descargar.  8)

[Erkosone]

Versión 0.86 ya disponible online, esta incluye compatibilidad con los FPG, FNT y MAP de BennuGD a 32bits de color. Aquí la lista de novedades completa:

variables:
   - rgb_to_16c, rgb_to_128c, rgb_to_256c, rgb_to_gboy

bugs y mejoras:
   - [MEGA ADD] compatibilidad con los formatos map, fnt y fpg de bennugd (32 bits de color)
   - [ADD] el visor de fuentes ahora también soporta el formato fnt de 32bits
   - [ADD] el visor de fpg ahora también visualiza (no edita) archivos fpg compatibles de bennugd
   - [ADD] ahora al cambiar de pestaña se guarda la posición de línea donde te habías quedado en cada pestaña
   - [DEL] la opción de mostrar listado de compilación, dejo de ser útil desde hace muchas versiones
   - [FIX] corregido problema con la proyección de sombras
   - [FIX] solucionado problema al quitar, añadir o seleccionar pestaña
   - [FIX] corrección de varios bugs menores del compilador y del ide

Un saludo.

Hola AmakaSt, yo también quiero empezar a trabajar con el formato de archivo FPG de BennuGD de 32 bits, supongo que si nadie ha objetado nada entiendo que no hay problema en usarlo verdad? en el caso de que no exista problema realmente, me gustaría mucho ponerme a desarrollar la librería de funciones para processing necesaria para poder crear/editar/leer estos archivos como tu has hecho en DivGO.


Podrías darme algún consejo/indicación para empezar a trabajar en esto?
Actualmente estoy metido en un proyecto grande y tengo todos los archivos de imagen al descubierto y todos sueltos en una carpeta, y los puntos de control a parte en un archivo de texto con el mismo nombre que cada archivo .png de imagen.


Tienes algun documento "para torpes" sobre como trabajar con esto? te lo pregunto por que creo que eres la persona que mas reciente tiene todo esto.

[AmakaSt]

Hola Erkosone,

Lo mejor sería empezar con un MAP, que es solo una imagen con sus colores y sus puntos de control, que con un FPG... pero pides un FPG... :P

Así empecé yo, con este código:

Code Select Expand


        var a        = new XMLHttpRequest(),
            datos     = [],
            info    = '';
   
        a.open('GET', 'miarchivo.fpg', true);
        a.responseType = 'arraybuffer';
       
        a.onload = function(){
            if (this.readyState == 4 && this.status == 200) {
                datos = new Uint8Array(this.response);
               
                for (var i = 0, l = datos.length; i < l; i++){
                    info += datos[i] + ', ';
                }
               
                document.body.innerHTML = info;
            }
        }
       
        a.send();


Con esto podrás leer y guardar la información que hay en un archivo en un array donde cada elemento del array tendrá un valor del 0 al 255. En este código que te paso lo escribe en el body del html para poder inspeccionarlo.

El resultado que debería darte sería algo así desde el principio: 102, 51, 50, 26, 13, 10, 0, 0, 1, 0, 0, 0, 64, 220, 5, 0, 66, 97, 110, 110, 101, 114, 95, 78, 101, 117, 114, 111, 99, 105, 101, 110, 99, 105, 97, 45, 101, 109, 97, 103, 105, 115, 116, 101, 114, 45, 49, 54, 66, 97, 110, 110, 101, 114, 95, 78, 101, 117, 114, 111, 160, 0, 0, 0, 88, 2, 0, 0, 0, 0, 0, 0, 255, 255, 255,... (y muchísimo mas dependiendo la cantidad de imágenes dentro del archivo)

En el resultado que he escrito arriba, los primeros 8 elementos: '102,51,50,26,13,10,0,0', es una cabecera o identificador del archivo.
Luego le sigue el código del grafico: '1, 0'... continuaría con una descripción y a partir de la posición 60 del array estaría el ancho y alto del grafico con: '160, 0, 0, 0, 88, 2, 0, 0'; el grafico tendría de ancho 160px [160, 0, 0, 0] y de alto 600px [88, 2, 0, 0]. El cálculo del alto en este caso es el valor del primer elemento sumado a 256 por el valor del segundo: 88 + (256 * 2).
Lo siguiente seria los puntos de control que en este no hay: '0, 0, 0, 0' y luego seguiría la información rgba de la imagen.

Luego es repetir esto para la siguiente imagen...

No sé si ha quedado claro, con el código que te he puesto arriba iba comparando la información con un editor FPG para ver las coincidencias... :P

Un saludo.

[Erkosone]

Bueno pues casi que tienes razon, mejor empiezo por un .map a pelo que si no van a salirme muchas dudas, algun consejo para los .map?


Supongo que es bastante similar pero tienes a mano la estructura del archivo .map?

[AmakaSt]

Si es bastante similar, el código que te he puesto te vale para ver la información.

Los primeros 8 elementos del MAP (posiciones de 0 a 7), como en el FPG, es una cabecera o identificador del archivo.
Los siguientes 4 son para el ancho y el alto. Posición 8 y 9 para el ancho y las posiciones 10 y 11 para el alto.

En la posición 48 está el número total de puntos de control, que se va recorriendo sumando 4 posiciones (para el ancho y el alto) por cada punto de control.

Y luego ya solo queda los datos rgba de la imagen.

[Erkosone]

Gracias por la info tio, estos dias quiero aprobechar y empezar con esto, haber si para este año que entra tengo las tan usadas herramientas de bennuGD funcionando con mis proyectos en java.
Gracias Amaka ;)

[Erkosone]

Empezando con el tema..

[Erkosone]

Buenas Amaka, por casualidad no tendrás información sobre como leer un fpg a 16bits verdad? he intentado dejando toda la estructura de lectura iwal que en 32 bits pero leyendo 3 bytes por pixel.. ya veo que de inicio la información del principioo no me cuadra,  tienes alguna nota apuntada por ahí que me puedas pasar tio?

[AmakaSt]

Buenas Amaka, por casualidad no tendrás información sobre como leer un fpg a 16bits verdad? he intentado dejando toda la estructura de lectura iwal que en 32 bits pero leyendo 3 bytes por pixel.. ya veo que de inicio la información del principioo no me cuadra,  tienes alguna nota apuntada por ahí que me puedas pasar tio?

Hola Erkosone,

No llegue a probar el fpg de 16bits, empecé con los maps en su momento... pero no llegue a acabarlo. El map 16 es similar en cuanto a espacios de cabecera, ancho y alto, y en los puntos de control. Cambia en el tema de los pixels de color, no son 3 bytes por pixel, componerlo como un rgb(255,255,255) no funciona (esto tiene sentido si fuera de 24), son solo 2 bytes (eso fue lo último que llegue a descubrir para que cuadrara el dibujo en sus dimensiones), a partir de ahí lo deje de lado, no lo vi interesante dedicarle más tiempo teniendo los fpg de 32bits. :P

Un saludo.