Div Games en Html5 y Canvas

[panreyes]

He visto que esta línea:
write(0,0,0,0,size);


Escribe "size" en pantalla, cuando realmente quiero pasar el valor de la variable.


Ya sé que existe write_int, pero en ocasiones no quiero que se actualice el número, con el consecuente malgasto de recursos.


------------


También me he fijado que el proceso principal/main no funciona como un proceso cualquiera. Si añado algo de código relacionado con procesos: x,y,z,angle,size,advance, etc... el proceso no hace lo que debería o se cuelga.


-----------


Y ya por fastidiar del todo. ¿Qué tal el mejorar la compatibilidad con los diferentes divlikes?


Estaría bien que set_mode se comiera esto por igual:
set_mode(m640x480);
set_mode(640,480);
set_mode(640,480,16);
set_mode(640,480,32);
set_mode(640,480,32,MODE_FULLSCREEN);


Ignorando, claro está, los bits de color y las posibles variables que viniesen después.


------------------------------------


Y una vez más, un código que lo rompe todo:

Code Select Expand



program test;
begin
nave();
end


Process nave();
Begin
graph=1;
    loop
    x=mouse.x;
    y=mouse.y;
        if(mouse.left) sombra(x,y,graph); end
        frame;
    end
End


Process sombra(x,y,graph);
Begin
angle=rand(0,360)*1000;
frame;
    //while(size>0)
    //size--;
    //frame;
    //end
End



Enhorabuena por tu trabajo :)
Si estás interesado en hacerlo open source, yo podría ayudarte :)

[AmakaSt]

Gracias Pixel por el testeo. :)

Lo del program ya era algo que tenía controlado, haciendo pruebas con los ejemplos de Div2 me di cuenta de la cagada, quiero corregirlo para próximas versiones. :P
El set_mode puedo poner que sea compatible con la segunda opción (set_mode(640,480);), el resto como dices habría que ignorarlo, así que no tiene mucho sentido añadirlo, aparte de compatibilidad, pero es algo muy fácil de cambiar.
Y el código que has puesto a mi me funciona bien, ¿qué error te da?

Es posible hacer un juego en local sin usar la web? se puede empaquetar de alguna manera para hacer los juegos portables?

En breve añadiré que se pueda descargar la web, para que la podáis tener en local y puedas programar tus juegos, necesitaras instalar Wamp, Xamp o similar para que funcione php.

Un saludo.

[Erkosone]

Amaka entonces si que te voy a ir a buscar a tu casa a darte un beso  :o
Recuerda que se donde vives XD..

[panreyes]

El proceso sombra debería mostrarse una vez y luego desaparecer, pero aparte de eso, cuando lo probé el otro día, al pulsar una sóla vez el botón del ratón luego permanecía como apretado.


Supongo que size no funciona aún, ¿verdad?

[AmakaSt]

Es raro, el size funciona bien... me lo reviso de todos modos.   ;)

Y ya está disponible para descargar Div GO desde la web de Amaka Soft, para que podáis ir haciendo pruebas en local y cambiar los gráficos y tal...

Un saludo.

[panreyes]

:OOOO :D


¡Me encanta la licencia asociada! ¿Planeas trabajar con algún servicio de repositorio de software libre? SF.net, Google Code, etc...?


..........


10 segundos después he visto el contenido de los PHP. ¿Planeas hacerlo open source o no? xD

[AmakaSt]

:OOOO :D


¡Me encanta la licencia asociada! ¿Planeas trabajar con algún servicio de repositorio de software libre? SF.net, Google Code, etc...?


..........


10 segundos después he visto el contenido de los PHP. ¿Planeas hacerlo open source o no? xD

Si, planeo hacerlo Open Source, pero más adelante, ahora mismo el código del compilador es un poco caótico y puede que lo cambie entero. Es que antes de un compilador Div era algo totalmente distinto para yo probar canvas.

Esta versión es para el que quiera pueda hacer su juego en local.

Y como dices, tal vez use Google Code.

Un saludo.

[AmakaSt]

He visto que esta línea:
write(0,0,0,0,size);


Escribe "size" en pantalla, cuando realmente quiero pasar el valor de la variable.


Ya sé que existe write_int, pero en ocasiones no quiero que se actualice el número, con el consecuente malgasto de recursos.


------------


También me he fijado que el proceso principal/main no funciona como un proceso cualquiera. Si añado algo de código relacionado con procesos: x,y,z,angle,size,advance, etc... el proceso no hace lo que debería o se cuelga.


-----------


Y ya por fastidiar del todo. ¿Qué tal el mejorar la compatibilidad con los diferentes divlikes?


Estaría bien que set_mode se comiera esto por igual:
set_mode(m640x480);
set_mode(640,480);
set_mode(640,480,16);
set_mode(640,480,32);
set_mode(640,480,32,MODE_FULLSCREEN);


Ignorando, claro está, los bits de color y las posibles variables que viniesen después.


------------------------------------


Y una vez más, un código que lo rompe todo:

Code Select Expand



program test;
begin
   nave();
end


Process nave();
Begin
   graph=1;
    loop
       x=mouse.x;
       y=mouse.y;
        if(mouse.left) sombra(x,y,graph); end
        frame;
    end
End


Process sombra(x,y,graph);
Begin
   angle=rand(0,360)*1000;
   frame;
    //while(size>0)
       //size--;
       //frame;
    //end
End



Enhorabuena por tu trabajo :)
Si estás interesado en hacerlo open source, yo podría ayudarte :)

Para la próxima versión ya está solucionado lo del write, lo del proceso de inicio (program) y mejorado el set_mode y screen_color.

set_mode se podra cambiar en cualquier momento del programa, cambiando el tamaño del canvas y se podra usar de las siguientes formas:
set_mode(m640x480); //compatible divlikes
set_mode(640,480); //compatible divlikes
set_mode(m640x480x2); //nuevo, el tercer valor x2 será un reescalado de imagen al doble de tamaño, x3 triple, etc...
set_mode(640, 480, x2); o set_mode(640, 480, 2); //el tercer valor será un reescalado de imagen

Y habra más novedades: get_id, get_dist, get_angle, load_fpg, load_sound, sound, stop_sound...  ;)

Un saludo.

[AmakaSt]

Subida la versión 0.12, y la lista de novedades:
- Funciones nuevas: get_angle(); get_dist(); get_id(); define_region(); load_fpg(); load_sound(); sound(); stop_sound(); //la api de sonido de html5 en cada navegador funciona de forma distinta, solo Chrome y Opera lo hacen de forma aceptable
- Cambios en set_mode() y screen_color();
- Nuevas variables locales: size_x, size_y, alpha y resolution
- Mejoras en el lenguaje: ahora program genera un proceso, al declarar variables se puede separa con una coma en la misma línea de código, optimizado el código que convierte de Div a Javascript y alguna cosa más...
- Algunos ejemplos actualizados para probar el Touch y algunas de las funciones nuevas.

Mas info en la web de DivGO y próximamente descarga.  ;)

Un saludo

[JaViS]

Estoy un poco confundido, es que existen dos proyectos para portar bennu a web?

[l1nk3rn3l]

EL EJEMPLO DE DISPAROS ESTA RAPIDOOOOOO..

PODRIAS INCLUIR EL EJEMPLO DE NAVES ESE SENCILLO QUE SE MOVIA DE IZQUIERDA
A DERECHA Y CA I AN NAVES DE ARRIBA Y DISPARABA CON ESPACIO , YA CON ESE EJEMPLO CUALQUIERA SE ARMA
UN JUEGO COMPLETO..


GRACIAS POR ESTE PROYECTO.. !!!!

SE LLAMA TUTOR4.PRG ESTA EN EL BENNUPACK SECCION EJEMPLOS BASICOS



//-------------------------------------------------------------------
// TITULO: Tutorial 1
// AUTOR:  Antonio Marchal
// FECHA:  10/10/97
//-------------------------------------------------------------------

PROGRAM Tutorial_1;

GLOBAL
    puntuacion=0;     // Variable para guardar la puntuaci¢n

BEGIN
    load_fpg("media\tutor1.fpg");  // Se carga el fichero de gr ficos
    load_fnt("media\tutor1.fnt");  // Se carga el tipo de letras

    set_mode(m640x480);               // Pone el modo de video 640 x 480
    set_fps(24,0);                    // N£mero de im genes por segundo
    put_screen(0,63);                 // Pone la pantalla de fondo
    nave(320,240,41);                 // Crea el proceso nave

    teclado();

    write_int(1,320,0,1,OFFSET puntuacion); // Muestra la puntuacion
    FROM x=1 TO 4; asteroide(1); END        // Crea 4 asteroides grandes
    FROM x=1 TO 4; asteroide(21); END       // Crea 4 asteroides peque¤os
END


process teclado();
begin
  loop
    if (key(_esc)) exit(); end;
    frame;
  end;
end;


//-------------------------------------------------------------------
// Maneja la nave protagonista
// Entradas: Coordenadas y c¢digo del gr fico
//-------------------------------------------------------------------

PROCESS nave(x,y,graph)
BEGIN
    LOOP
        // Comprueba si se pulsan las teclas de izquierda o derecha
        // Y modifica el  ngulo si est n pulsadas
        IF (key(_left)) angle=angle+10000; END
        IF (key(_right)) angle=angle-10000; END
        // Si se pulsa la tecla de arriba, la nave avanza
        IF (key(_up)) advance(8); END
        // Si se pulsa la tecla control crea un proceso del tipo disparo
        IF (key(_control)) disparo(x,y,angle); END
        // Corrige las coordenadas, para que la nave no desaparezca
        // de pantalla
        corrige_coordenadas();
        FRAME;  // Hace aparecer el gr fico de la nave en pantalla
    END
END

//-------------------------------------------------------------------
// Proceso disparo
// Crea los disparos de la nave protagonista
// Entradas: Coordenadas y  ngulo del gr fico
//-------------------------------------------------------------------

PROCESS disparo(x,y,angle)
BEGIN
    // Hace un avance inicial y define el gr fico a usar
    advance(24); graph=42;
    // Mientras el gr fico este dentro de pantalla
    WHILE (NOT out_region(id,0))
        // Hace que avance en el angulo que tenga predeterminado
        advance(16);
        FRAME;  // Hace que el gr fico aparezca en pantalla
    END
END

//-------------------------------------------------------------------
// Proceso asteroide
// Maneja todos los asteroides del juegos tanto grandes como peque¤os
// Entradas: Codigo del tipo de asteroide que es su gr fico inicial
//-------------------------------------------------------------------

PROCESS asteroide(codigo)
BEGIN
    LOOP
        // Crea el asteroide en la esquina superior izquierda
        // (Coordenadas: 0,0) y asigna el c¢digo de gr fico
        x=0; y=0; graph=codigo;
        // Elige un angulo al azar
        angle=rand(-180000,180000);
        LOOP
            // Anima el gr fico, sumando uno a su c¢digo
            graph=graph+1;
            // Si sobrepasa el limite de la animaci¢n, la reinicia
            IF (graph==codigo+20) graph=codigo; END
            // Hace avanzar el gr fico en la direccion determinada
            advance(4);
            // Si colisiona con el gr fico del disparo sale
            // del bucle, que de otra manera no tiene final
            IF (collision (TYPE disparo)) BREAK; END
            // Corrige las coordenadas para que no desaparezca de
            // pantalla, haciendole aparecer por el otro lado
            corrige_coordenadas();
            FRAME;      // Hace que el gr fico salga en pantalla
        END
        puntuacion=puntuacion+5;    // Suma 5 puntos a la puntuaci¢n
        // Pone la animaci¢n de la explosion mediante un bucle
        FROM graph=43 TO 62; FRAME; END
    END
END

//-------------------------------------------------------------------
// Proceso corrige_coordenadas
// Corrige las coordenadas del proceso que los llama haciendo
// que dichas coordenadas sean ciclicas en pantalla
//-------------------------------------------------------------------

PROCESS corrige_coordenadas()
BEGIN
    // Si se sale por la izquierda hace que aparezca por la derecha
    // restando para ello el ancho de pantalla
    IF (father.x<-20) father.x=father.x+680; END
    // Si se sale por la derecha hace que aparezca por la izquierda
    IF (father.x>660) father.x=father.x-680; END
    // Si se sale por la arriba hace que aparezca por la abajo
    IF (father.y<-20) father.y=father.y+520; END
    // Si se sale por la abajo hace que aparezca por la arriba
    IF (father.y>500) father.y=father.y-520; END
END

[Transdiv]

Estoy un poco confundido, es que existen dos proyectos para portar bennu a web?

Sips, uno usa HTML5 y el otro Código Nativo pero solo en el navegador Google Chrome.

[Transdiv]

Tenias que encriptar el compilador.....  :'(

[AmakaSt]

Tenias que encriptar el compilador.....  :'(

En breve estarán los códigos abiertos, será open source.

l1nk3rn3l mirare de crear algunos ejemplos y de portar algún tutor como el que me indicas. Aunque ya viendo ese código así por encima, veo funciones y variables que todavía no soporta DivGO.

Estoy un poco confundido, es que existen dos proyectos para portar bennu a web?

Sí, hay 2 proyectos. Uno se basa en BennuGD y otro en Div. Pienso que cuantos más lenguajes Div-Like hayan mejor, siempre habrá más en donde elegir y se mantendrá viva y creciente la comunidad. :)

Un saludo.

[panreyes]

Pinta genial! :D Aunque para los hardcore se nos queda un poco corto aún, pero va por buen camino.


Nada más se pueda portaré alguno de mis juegos al completo.
Según veo no se pueden crear Structs aún, ¿no?
¿Permitirás usar load_png?


Este código hace explotar DivGO sobremanera xD

Code Select Expand



program vilanet;


global
music;
wavs[10];


//MODO DE PANTALLA Y FPS
ancho_pantalla=480;
alto_pantalla=800;
frameskip=2;
_fps=25;

//UI
matabotones;
id_boton_menu;
opcion_menu;


ready;
doble_clic;
dificultad;
distancia;
obstaculos_en_pantalla;
puntos;
fuente;

//DIVGO!!!
os_id=1003;
focus_status=1;

Private
graph_loading;

Local
i;
accion;
begin
//establecemos la pantalla a utilizar y su tamaño
frame;

//inicializamos el modo gráfico, fps y nombre de la ventana
set_mode(480,800);
set_fps(_fps,frameskip);

//ponemos el gráfico de "cargando"...
//graph_loading=load_png("loading.png");
put_screen(0,graph_loading);
frame; //tengo que hacer 2 frames para que lo de arriba funcione :|
frame;
//unload_map(0,graph_loading);

//cargamos los recursos a utilizar durante todo el juego
carga_sonidos();

//cargamos el fpg de gráficos
load_fpg("fpg/vilanet.fpg");

//la fuente
fuente=load_fnt("fpg/1.fnt");

//si no estamos en android, ponemos algo para localizar el cursor
if(os_id!=1003)
mouse.graph=71;
end

//y finalmente el menú
//menu_tactil();

juego();
end


process juego()
Private
retraso=100;
retraso_esquiador;
anterior;
nuevo;
begin
//graph=get_screen();
let_me_alone();
clear_screen();
controlador();
puntos=0;
distancia=0;
obstaculos_en_pantalla=0;
x=ancho_pantalla/2;
y=alto_pantalla/2;
start_scroll(0,0,11,0,0,15);
//scroll[0].camera=camara();
camara();
prota();
ready=0;
write_int(fuente,ancho_pantalla,0,2,&puntos);

//ponemos la canción de fondo del juego
//music=load_song("ogg/2.ogg");
//play_song(music,-1);
music=load_sound("ogg/2.ogg");
sound(music);
ready=1;
loop
distancia++;
puntos+=1+(dificultad/3);
while(alpha>0) alpha-=5; frame; end
dificultad=6+(distancia/100);

// if(rand(0,100)=<dificultad)
if(obstaculos_en_pantalla<5)
if(retraso>50-dificultad*2)
loop
nuevo=rand(1,5);
if(nuevo!=anterior) break; end
end
obstaculo(nuevo,rand(15,19));
anterior=nuevo;
retraso=0;
else
retraso++;
end
end
// end
if(retraso_esquiador>100)
retraso_esquiador=rand(-100,0);
esquiador(rand(1,5));
else
retraso_esquiador++;
end

//botón esc, salir
if(key(_esc))
while(key(_esc)) frame; end
let_me_alone();
//graph=get_screen();
x=ancho_pantalla/2; y=alto_pantalla/2; z=-100;
//menu_tactil();
//from alpha=255 to 0 step -15; frame; end
//unload_map(0,graph);
break;
end
frame;
end
end


Function carga_sonidos();
Begin
from i=1 to 7;
//wavs[i]=load_sound("wav/"+i+".wav");
end
End


Function sonido(num);
Begin
//play_sound(wavs[num],0);
End


//hace una capa de emulación del táctil para pc y gestiona el boton de volver
Process controlador();
Begin
loop
if(mouse.left)
dedo(mouse.x,mouse.y);
end
/*for(i=0; i<10; i++)
if(multi_info(i, "ACTIVE") > 0)
dedo(multi_info(i, "X"),multi_info(i, "Y"));
end
end*/
frame;
end
End


Process dedo(x,y);
Begin
priority=1;
graph=71;
alpha=0;
frame;
End


Process prota();
Private
retraso;
anim;
Begin
//flags=B_VMIRROR;
x=ancho_pantalla/2;
y=alto_pantalla-70;
z=-2;
graph=5;
loop
if(anim<10-(dificultad/5))
anim++;
else
if(graph<10) graph++; else graph=5; end
anim=0;
end
if((os_id==1003 and mouse.left) or os_id!=1003)
if(x<mouse.x)
x+=20;
if(x>mouse.x) x=mouse.x; end
else
if(x>mouse.x)
x-=20;
if(x<mouse.x) x=mouse.x; end
end
end
end
if(x<(ancho_pantalla/10)) x=ancho_pantalla/10; end
if(x>ancho_pantalla-(ancho_pantalla/10)) x=ancho_pantalla-(ancho_pantalla/10); end
if(retraso>100)
// if((os_id==1003 and mouse.left and mouse.y<(alto_pantalla/4)*3) or (os_id!=1003 and mouse.left))
// disparo();
// retraso=0;
// end
else
retraso++;
end
if(accion<0) break; end
frame;
end
if(accion==-1) explosion(); end
if(accion==-2) sonido(5); from size=100 to 0 step -10; frame; end end
gameover();
End


Process disparo();
Begin
x=father.x;
y=father.y;
z=-1;
graph=4;
size=200;
while(y>-100)
if(accion==-1)
from alpha=255 to 0 step -30;
size+=3;
frame;
end
break;
end
y-=20;
angle+=20000;
frame;
end
End


Process obstaculo(pos_x,graph);
Private
id_col;
pos_x; //FAILURE!
Begin
y=-100;
if(graph==18) pos_x=1; end
if(graph==19) pos_x=5; end
if(graph==18 or graph==19)
y=-600;
end
x=((pos_x-1) * (480/5))+(480/10);
z=-1;
size=150;
if(collision(type obstaculo))
//signal(s_kill,id);
end
size=100;
obstaculos_en_pantalla++;
loop
if(id_col=collision(type prota))
if(graph==18 or graph==19)
id_col.accion=-2;
else
id_col.accion=-1;
end
end
if(graph<18)
if(id_col=collision(type disparo))
if(graph==17) //explosion
explosion();
end
id_col.accion=-1;
if(graph==15 or graph==16) sonido(3); end
break;
end
if(y>alto_pantalla+100) break; end
else
//barrancos
if(y>alto_pantalla+600) break; end
end
y+=3+dificultad;
frame;
end
//explosion
from alpha=255 to 0 step -30; y+=3+dificultad; frame; end
obstaculos_en_pantalla--;
End


Process explosion();
Private
anim;
Begin
sonido(4);
x=father.x;
y=father.y;
z=-2;
graph=22;
while(graph<27)
if(anim==4) graph++; anim=0; else anim++; end
size+=10;
alpha-=5;
y+=3+dificultad;
frame;
end

End


Process esquiador(pos_x);
Private
id_col;
pos_x;
Begin
x=((pos_x-1)*(480/5))+(480/10);
y=-100;
z=0;
graph=20;
size=150;
if(collision(type obstaculo))
esquiador(rand(1,5));
//signal(s_kill,id);
end
size=100;
if(collision(type obstaculo))
//signal(s_kill,id);
end
while(y<alto_pantalla+100);
if(graph==20)
if(id_col=collision(type disparo))
id_col.accion=-1;
graph=21;
sonido(2);
end
if(collision(type obstaculo))
graph=21;
sonido(3);
end
if(collision(type prota))
puntos+=1000;
sonido(2);
break;
end
y+=6+dificultad;
else
y+=3+dificultad;
end
frame;
end
End


Process camara();
Begin
loop
scroll.y0-=3+dificultad;
frame;
end
End


Process gameover();
Begin
delete_text(all_text);
write(fuente,ancho_pantalla/2,(alto_pantalla/4)*3,4,puntos);
x=ancho_pantalla/2;
y=(alto_pantalla/2);
graph=705;
z=-10;
while(is_playing_song()) frame; end
let_me_alone();
delete_text(all_text);
juego();
//menu_tactil();
end


Process get_screen();
Begin
End


Process load_song(string basura);
Begin
End


Process is_playing_song();
Begin
End


Process fade_music_off();
Begin
End