Div Games en Html5 y Canvas

[SplinterGU]

ah, solo la version en movil, no en PC... esas cosas son necesarias aclararlas... sigo el hilo, pero me pierdo mucho, la verdad...

Hola SplinterGU,

Esa opción también aparece en el ordenador, al compilar sale también el botón de ejecutar en proyector que es como una vista previa de cómo queda el proyecto final, sin debug y similar a lo que te descarga la opción de crear empaquetado, que es el proyecto final con todos los archivos incluido en el paquete. Hay varias funciones que no se ejecutan al 100% en el IDE (debug), como modos de pantalla completa o de colores de entorno.

Un saludo.

genial! ahi si lo vi! queda de lujo! gracias por la explicacion!

[oskarg]

Buenos dias ,AmakaSt

bug seno y coseno va en sentido contrario,hacia arriba ,en versiones anteriores funcionaba correctamente .adjunto codigo..Deberia ir a la posicion 0,240

Otra cuestion sobre el foro ,cuando hago o intento hacer un copy paste aqui,para adjuntar codigo,me expresa internal server error

[AmakaSt]

Buenos dias ,AmakaSt

bug seno y coseno va en sentido contrario,hacia arriba ,en versiones anteriores funcionaba correctamente .adjunto codigo..Deberia ir a la posicion 0,240

Otra cuestion sobre el foro ,cuando hago o intento hacer un copy paste aqui,para adjuntar codigo,me expresa internal server error

Hola oskarg,

En la versión 1.40 actualice la función fget_angle() para que devuelva los valores similares a Div2 (DivDX) que sería "lo correcto", antes estaba invertido.

Este es tu ejemplo pero para que lo pruebes en DivDX o Div2 y veras que el resultado ahora es similar que en DivGO, salvo que en DivGO si divides puede devolver decimales. :)

Code Select Expand

PROGRAM example_fget_angle;
BEGIN
    load_fpg("help/help.fpg");

    set_mode(m320x240);
    set_fps(60, 0);

    // call a process
    my_process(320/2, 240/2);

    loop
        if (key(_esc)) exit("Text Exit", 1); end

        frame;
    end
end

PROCESS  my_process(x, y);
private
posicionx;
posiciony;
angulo;
angulox;
anguloy;
velocidad;



begin
    graph = 100;
    //size  = 20;
    z      = 10;

   
velocidad=10;
posicionx=x;//posicionx del enemigo que lanza la bomba
posiciony=y;//posiciony del enemigo que lanza la bomba

angulo=fget_angle(x,y,0,240);
angulox=cos(angulo); // 1000;
anguloy=sin(angulo); // 1000;

  write_int(0,0,0,0, &angulox);
  write_int(0,0,10,0, &anguloy);

  LOOP
     FRAME;
     posicionx=posicionx+velocidad*angulox;//posicionInicial+velocidad*cos*angulo que forma entre los puntos x///de esta manera recorro una linea recta hasta donde se encuentra la nave
     posiciony=posiciony+velocidad*anguloy;//posicionInicial+velocidad*sin*angulo que forma entre los puntos y
     x=posicionx;
     y=posiciony;

     if(y>320) break;end //si he salidod de la pantalla mato el proceso..

   END
END


Un saludo.

[oskarg]

Gracias AmakaSt,
Ok....Ahora mismo estoy mirando como iba en div2...tienes razon,tengo que adaptarme a la nueva manera.

[oskarg]

Buenos dias AmakSt,
1.En el editor grafico si hago un grafico nuevo ,modifico el tamaño por defecto,para que sea mas pequeño,lo hace,pero al guardar y salir mantiene el tamaño inicial.

2.En el edito grafico estaria bien que se pudiera evitar el suavizado de lineas.

Sugerencia,poder quitar el suavizado al crear circulos cuando utilizo la instruccion draw,he intentado hacerlo con smooth_screen(false) ,pero no tiene efecto.

Un saludo.

[AmakaSt]

Hola oskarg,

Gracias por la revisión, me apunto el primer punto para corregir, con los últimos cambios del ide se me ha tenido que pasar esto. Sobre el segundo punto y la sugerencia, es algo que he intentado pero siempre queda suavizado los círculos y líneas que no son rectas al dibujarse en el canvas, debo seguir probando cosas a ver si consigo dar con una solución.

Un saludo.

[oskarg]

BUG encontrado en raiz cuadrada

Code Select Expand




program raizcuadrada;
global
// declared global variables
    points = 0;
    hi_score = 0;
valor       = 0;
begin
set_mode(480, 320);
screen_color(cc_silver);

set_fps(60, 0);
    write_int(0,100,100,0,offset valor);

    raiz(0.9 );
   

loop
if (key(_esc)) exit("Text Exit", 1); end

frame;
end
end

process raiz(t);
private
 
begin
     
valor=sqrt(t);
   
loop

frame;
end
end




da 0 la raiz cuadrada..Ya se que pasa no soporta decimales ,por ejemplo la raiz cuadrada de 2.5 da 1 :-\
Luego tengo que mirar algo del seno,creo que falla tambien,ya te dire... si no encuentro el motivo te paso  el codigo.

[oskarg]

Buenos dias Amkast,

te comento un par de bugs...

1.la raiz cuadrada  no acepta decimales --> raiz(0.6) == 0 ... :-\

2.Te explico..Como tengo problemas a la hora de crear graficos ...empleo la version de divgov120 .Con esta creo una caperta  y hago un copy paste con los graficos enumerados 01.png 02.png en dicho lugar...entonces simplemente  hago un load_fpg("graficos/oscar/t1") compilo y guala!!! los graficos aparecen al momento sin tener que arrastrarlos uno a uno.Ha creado el fpg  ..genial!!entonces lo copio a divgo actual ....

En esta version actual,este metodo no me va!! me sale el icono de carga de graficos constantemente se queda bloqueado..si lo hago manual,a veces va y otras  sale el temido icono de la redonda constantemente intentando cargar el grafico.
Sigo trasteando y te comento ....

Otro bug...
3.el boton de crear empaquetado en la version desktop ha dejado de funcionar,solucion de momento utilizo la version con xamp

Un saludo.

[AmakaSt]

Hola oskarg,

1. Sobre la función sqrt() de DivGO la hice hace mucho tiempo pensando en cómo funcionaba Div2, por lo que solo funciona con valores int y como resultado devuelve también int, debo repasar y actualizar las funciones matemáticas.
2. Hice varios cambios en la carga de fpg, en distintas versiones, uno de ellos era que no se necesitara crear una carpeta y llenarla, se puede hacer desde el propio ide. Si lo haces con la carpeta debes incluir el fpg.dat con la lista de gráficos para que sea válido.
3. Tengo que mirar porque no funciona, me lo apunto para revisar.

Un saludo.

[oskarg]

Hola Amakast,te comento...
1.adjunto codigo de funciones tweens para divgo,el r15,r20,r21y 22 estan anulados porque no va la raiz cuadrada con decimales,el r15 el sin no se si va correctamente,porque es asi la formula.

Code Select Expand


/*
Program's Name: <My Program Name>
Author's Name: <My Name>
Company's Name: <My Company or Group>
*/

program tweens;
global
jota0;
begin
set_title("My Program Name");
    set_icon("graficos/009.png");

// screen canvas options
set_mode(640, 480);
screen_color(cc_silver);
    set_fps(60, 0);
   
   
     
     write(0,100,100,0,"PULSA ENTER PARA RESETEAR");
   
     Movimiento2(1,20 );//  Linear_tween
     Movimiento2(2,40 );//  Easy in Quad
     Movimiento2(3,60 );//  Easy out Quad
Movimiento2(4,80 );//  Easy in out Quad
Movimiento2(5,100);//  Easy in cubic
     Movimiento2(6,120);//  Easy out cubit
Movimiento2(7,140);//  Easy in out cubit
Movimiento2(8,160);//  EaseInQuart
Movimiento2(9,180);//  EaseOutQuart
     Movimiento2(10,200);// EaseInOutQuart
     Movimiento2(11,220);// EaseInQuint
     Movimiento2(12,240);// EaseOutQuint
     Movimiento2(13,260);// EaseInOutQuint
     Movimiento2(14,280);// EaseInSine
   //  Movimiento2(15,300);// EaseOutSine
     Movimiento2(16,320);// EaseInOutSine
     Movimiento2(17,340);// EaseInExpo
     Movimiento2(18,360);// EaseOutExpo
     Movimiento2(19,380);// EaseInOutExpo
   //  Movimiento2(20,400);//  EaseInCirc
   //  Movimiento2(21,420);// EaseOutCirc
   //  Movimiento2(22,460);// EaseInOutCirc
     
     
     

loop
if (key(_esc)) exit("Text Exit", 1); end

frame;
end
end


PROCESS movimiento2(m,yy)

private
//t;//tiempo;
b;//x0;
f;//xf;
d;//duracion;
c;//delta de xf-x0;
una_vez;
una;
final;
t;
xx
BEGIN
graph=1;
size=25;

y=yy;//y0
b=0;//x0
f=640;//yfinal
c=f-b;//delta xfinal-x0
d=180;//frames..//numero de frames para recorrer la distancia
final=false;


loop

    if (  t<=d  )
     
       if ( m == 1)
          x=R1(t,b,c,d,xx);// 
       end
       if ( m == 2)
          x=R2(t,b,c,d,xx);// 
         
       end
       if ( m == 3)
          x=R3(t,b,c,d,xx);// 
         
       end
       
       if ( m == 4)
          x=R4(t,b,c,d,xx);// 
         
       end
       
       if ( m == 5)
          x=R5(t,b,c,d,xx);// 
         
       end
       if ( m == 6)
          x=R6(t,b,c,d,xx);// 
         
       end
       if ( m == 7)
          x=R7(t,b,c,d,xx);// 
         
       end
       
       if ( m == 8)
          x=R8(t,b,c,d,xx);//
         
       end
       if ( m == 9)
          x=R9(t,b,c,d,xx);//
         
       end
       if ( m == 10)
          x=R10(t,b,c,d,xx);//
         
       end
     
       if ( m == 11)
          x=R11(t,b,c,d,xx);//
         
       end
         if ( m == 12)
          x=R12(t,b,c,d,xx);//
         
       end
         if ( m == 13)
          x=R13(t,b,c,d,xx);//
         
       end
        if ( m == 14)
          x=R14(t,b,c,d,xx);//
         
       end
     
       if ( m == 15)
          x=R15(t,b,c,d,xx);//
         
       end
       if ( m == 16)
          x=R16(t,b,c,d,xx);//
         
       end
     
       if ( m == 17)
          x=R17(t,b,c,d,xx);//
         
       end
       if ( m == 18)
          x=R18(t,b,c,d,xx);//
         
       end
       if ( m == 19)
          x=R19(t,b,c,d,xx);//
         
       end
       if ( m == 20)
          x=R20(t,b,c,d,xx);//
         
       end
       if ( m == 21)
          x=R21(t,b,c,d,xx);//
         
       end
       if ( m == 22)
          x=R22(t,b,c,d,xx);//
         
       end
     
     
     
    end
 
 
  t++;
 
  if (key(_enter)) b=0;f=640;c=f-b;x=0;t=0;end
   
frame;

end

END

//---------------------------------------------------------------------------------------------------------------

//  linear_tween
//---------------------------------------------------------------------------------------------------------------

PROCESS R1(t,b,c,d,xx)
BEGIN
return (c*t/d)+b; 

END


//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

//Easy in Quad
PROCESS R2(t,b,c,d,xx)
BEGIN
//t*t
//return c*(t/=d)*t + b;

//return c*(t/=d)*t + b;
x=t/d;
return c*(x)*x + b;



END
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

//Easy out Quad
PROCESS R3(t,b,c,d)
BEGIN
return -c * (t/=d)*(t-2) + b;
END
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

//Easy in out Quad
PROCESS R4(t,b,c,d)
BEGIN
if ((t/=d/2) < 1) return c/2*t*t + b;end
return -c/2 * ((--t)*(t-2) - 1) + b;
END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

//easy in cubic
PROCESS R5(t,b,c,d)
BEGIN
return c * pow (t/d, 3) + b;

END


//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

// easy out cubit

PROCESS R6(t,b,c,d)
BEGIN
return c * (pow (t/d-1, 3) + 1) + b;


END


//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

// easy in out cubit

PROCESS R7(t,b,c,d)
BEGIN

if ((t/=d/2) < 1)return c/2 * pow (t, 3) + b;end
return c/2 * (pow (t-2, 3) + 2) + b;

END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

//EaseInQuart
PROCESS R8(t,b,c,d)
BEGIN

return c * pow (t/d, 4) + b;

END


//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------

//EaseOutQuart

PROCESS R9(t,b,c,d)
BEGIN

return -c * (pow (t/d-1, 4) - 1) + b;
END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInOutQuart
PROCESS R10(t,b,c,d)
BEGIN
if ((t/=d/2) < 1)return c/2 * pow (t, 4) + b;end
return -c/2 * (pow (t-2, 4) - 2) + b;
END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInQuint
PROCESS R11(t,b,c,d)
BEGIN
return c * pow (t/d, 5) + b;
END


//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseOutQuint
PROCESS R12(t,b,c,d)
BEGIN
return c * (pow (t/d-1, 5) + 1) + b;
END
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInOutQuint
PROCESS R13(t,b,c,d)
BEGIN
if ((t/=d/2) < 1)return c/2 * pow (t, 5) + b;end
return c/2 * (pow (t-2, 5) + 2) + b;

END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInSine
PROCESS R14(t,b,c,d)
private
grados;
radianes;
BEGIN

//grados   = 90;
//radianes = 90 * pi  / 180;
//360 grados=2*pi radianes
//radianes=angulo* pi/180;
//radianes a angulo-->180*pi ......

//radianes=t/d*(pi/2);

//grados =radianes*180000/pi;
//return c * (1 - cos(grados)/1000 ) + b;
//QUE CACAO me he hecho con los grados !!
//return c * (1 - cos(t/d * (pi/2))) + b;
return c * (1 - cos(t/d * (pi/2))/1000) + b;

END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseOutSine
PROCESS R15(t,b,c,d)
BEGIN


return c * sin(t/d * (pi/2)/1000) + b; //falla el sin....

END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInOutSine
PROCESS R16(t,b,c,d)
BEGIN

return c/2 * (1 - cos(pi*t/d)/1000) + b;
END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInExpo
PROCESS R17(t,b,c,d)
BEGIN
return c * pow(2, 10 * (t/d - 1)) + b;
END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseOutExpo
PROCESS R18(t,b,c,d)
BEGIN


return c * (-pow(2, -10 * t/d) + 1) + b;
END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
//EaseInOutExpo
PROCESS R19(t,b,c,d)
BEGIN

//i=3;
//x=i++ -> x=3 and i=4;
//x=++i -> x=4 and i=4;
if ( (t/=d/2) < 1)return c/2 * pow(2, 10 * (t - 1)) + b;end
return c/2 * (-pow(2, -10 * (--t)) + 2) + b;

END

//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
// EaseInCirc
PROCESS R20(t,b,c,d)
private
e0;
e2;
BEGIN



return  c * (1 - sqrt(1 - (t/=d)*t)) + b;


return c*0.1;
END
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
// EaseOutCirc
PROCESS R21(t,b,c,d)
BEGIN
return c * sqrt(1 - (t=t/d-1)*t) + b;
END
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
// EaseInOutCirc
PROCESS R22(t,b,c,d)
BEGIN

if ((t/=d/2) < 1)return c/2 * (1 - sqrt(1 - t*t)) + b;end
return c/2 * (sqrt(1 - (t-=2)*t) + 1) + b;


END






2.Lo he probado como dices y me crea los graficos,pero no los visualiza,sale una pantalla en negro cuando lo ejecuto,es decir crear un fpg.dat desde cero,entonces he cogido un fpg ya realizado que trae por defecto divgo y pegado nuevos graficos en la carpeta y ya me funciona..perfecto.
3.Lo de crear empaquetado ni idea porque no va,en localhost me funciona
Un saludo

[oskarg]

Buenos dias Amakast,
No es un bug,pero falla la precision en decimales al hacer un for..esto sucede desde hace bastante tiempo..

Code Select Expand





/*
Program's Name: <My Program Name>
Author's Name: <My Name>
Company's Name: <My Company or Group>
*/

program MyProgramName;
global
// declared global variables
    points = 0;
    hi_score = 0;

begin
set_title("My Program Name");
    set_icon("graficos/009.png") ;

// screen canvas options
set_mode(480, 320);
screen_color(cc_silver);

set_fps(60, 0);

// call a process
decimales();

loop
if (key(_esc)) exit("Text Exit", 1); end

frame;
end
end

process decimales();
private
   
      i;
      tabla[10];

       
begin
graph = 9;
size  = 100;
z   = 10;

     for(i=0;i<=1;i=i+0.1)
   
     
     
     tabla[i]=i;
     
     
     write_int(0,100,10+200*i,  0, offset tabla[i]);
     end
   

   
   
   
loop

frame;
end
end


[AmakaSt]

Buenas oskarg,

Ya he corregido las funciones matemáticas para que soporte decimales, he tenido que hacer cambios también en otras funciones como por ejemplo son get_dist() o fget_dist() que llamaba a estas funciones para que no den problemas con el cambio. Ahora el ejemplo parece funcionar bien, se mueven todos los corazones de forma correcta.

Sobre la precisión de los decimales no es un fallo de DivGO tal cual, es cosa del propio Javascript.

Un saludo

[oskarg]

Buenas noches AmakaSt,
Gracias por la mejora..
otra cuestion adjunto un simple programa ,lo que deberia hacer simplemente es trazar una linea en el trebol..con put_pixel funciona,con map_put_pixel no se que hago mal..
1.primero dibujo un pixel en la coordenada 1,120 entonces hago un recorrigo si encuentro ese color ,pinto en x+1...Pues nada no hay manera,no entiendo donde cometo el error.

Un saludo.

[AmakaSt]

Buenas noches AmakaSt,
Gracias por la mejora..
otra cuestion adjunto un simple programa ,lo que deberia hacer simplemente es trazar una linea en el trebol..con put_pixel funciona,con map_put_pixel no se que hago mal..
1.primero dibujo un pixel en la coordenada 1,120 entonces hago un recorrigo si encuentro ese color ,pinto en x+1...Pues nada no hay manera,no entiendo donde cometo el error.

Un saludo.

Buenas noches oskarg,

Es por la comprobación del pixel de color rojo == 255 no se da en el graph del trebol, aquí te dejo una corrección del código para que trace la línea al buscar algo en el pixel rojo.

Code Select Expand


/*
    Program's Name:    <My Program Name>
    Author's Name:    <My Name>
    Company's Name:    <My Company or Group>
*/

program MyProgramName;
global
    // declared global variables
    points        = 0;
    hi_score    = 0;
    jota        = 0;
   
begin
    set_title("My Program Name");
    set_icon("graficos/009.png");

    // screen canvas options
    set_mode(128,128,4);
    screen_color(rgb(0,0,0));
    screen_smooth(false);
   
    write_int(0,10,10,0,offset jota);

    set_fps(60, 0);

    // call a process
    fondo();
   
    loop       
        if (key(_esc)) exit("Text Exit", 1); end

        frame;
    end
end

process fondo()
private
      i,j;
      xx;
      yy;
      velocidad;
      rojo;
      veces;
      nose;
      tabla[128];
      maximo=128;
      tt=0;
begin
    graph = 5;
    size  = 100;
    z      = 10;
   
    x= 120/2;
    y= 120/2;

   
    xx = 1;
    yy =128/2;

   
     
       //map_put_pixel(0,graph,xx,yy ,rgba(255,255,255,255)); 
   

       write_int(0,10,128,6,&j);
   
    LOOP


     for (j=0;j<128;j++)
             
              rojo = map_get_pixel(0,graph,j,yy ,"r"); 
           
           //if (rojo == 255)
           if (rojo > 10)
            jota++;
       
              map_put_pixel(0,graph,j,yy ,rgba(255,255,255,255));  //No me pinta la linea completa?¿?
              //map_put_pixel(0,graph,jota,yy ,rgba(255,255,255,255));  //No me pinta la linea completa?¿?
           end
           frame;
     end
     
    FRAME;
    END
       


END

Un saludo.

[oskarg]

Buenos dias Amakast,
te explico:
1.Cargo un mapa negro,entonces le pinto un pixel blanco.
2.Ahora hago un recorrido del mapa y cuando encuentre ese pixel blanco que me pinte otro pixel enl x+1...La primera vez lo hace,la segunda iteracion ya no.
3.el algoritmo que me has mostrado se agradece ,pero es diferente,en tu caso haces si r es diferente a 0 por ejemplo entonces pinta ....sin tener en cuenta que yo he modificado el grafico de origen previamente para que busque el color determinado -->blanco

adjunto ejemplo que funciona correctamente en div3 pero no en divgo por que?¿?¿