Div Games en Html5 y Canvas

[AmakaSt]

Pilasengine 2 ya trae algunos comportamientos hechos que se llaman y hacen algo automaticamente pero tambien puedes crear los tuyos desde cero,creando una clase que extiende de la clase comportamientos.

Yo me refiero a esto ultimo,tener algo en divgo que me permita crear mis propios comportamientos y luego llamarlos desde un proceso para que haga algo automaticamente,y si tiene la opcion de pasarle parametros para modicar las opciones del comportamientos pues mejor.

Seria bueno para que cada cual cree sus comportamientos y los comparta con la comunidad,y asi tener una variedad de comportamientos que ayuden en el diseño de los juegos.

Esto mismo lo tiene gdevelop,la comunidad esta creando comportamientos y los comparte y asi estan extendiendo el engine sin esperar a que el creador añada mas comportamientos.

Hola hokuto40,

Tendría que mirarme gdevelop que no lo he tocado nunca. Yo lo de los comportamientos lo haría con herencias, tal cual es div, un proceso que se llame mover(desde, hasta), rotar(desde, hasta), etc... y que mueven al proceso padre.

Un saludo.

Hola AmakaST,
Como puedo simular este efecto en divgo:
Tengo una serie de graficos,procesos que dibuja la pantalla,cada frame,se borran y se dibujan de nuevo.necesito hacer un clipping ,indicando un rectangulo ,es decir ,la superficie que indique el rectangulo debe recortar los graficos haciendolos transparentes en esa  area ..........ni idea.
Otra cuestion,no me habia fijado hasta hora ,el gran trabajo de seleccionar tema,modo div clasico..muy bueno,da la sensacion de estar trabajando en div games studio.
Un saludo.

Hola osrkag,

Tienes la función clear_map() para hacer clipping a un graph indicando el rectángulo y la posición donde quieres borrar, hay ejemplo en el listado de funciones.

Esa era la idea, darle un aire al Div2 original.

Sobre el ordenador, creo que cualquiera actual te funcionaría bien Div GO, un procesador i3 o i5 actual con 8gb de ram, estarías sobrado y no pasaría de los 400€. El mío ya tiene 5 años y me costó unos 800€, hoy día no creo que valga más de 400€ y tendría mejor procesador incluso.

Un saludo.

[hokuto40]

Gdevelop es de codigo abierto,por lo que puedes ver su codigo y ver como esta programado.

Aqui te dejo el enlace por si quieres ojear su codigo.
https://github.com/4ian/GDevelop

[oskarg]

hola AmakaSt,
COmo paso una estructura a un proceso. y que esta estructura al pasarlo,puede cambiar su nombre de la estructura?¿?es decir que actuase como un variable normal...

Código: [Seleccionar]

PROGRAM example_draw;
global

struct a1
xx;
yy;
end

struct b1
xx;
yy;
end
BEGIN


       set_mode(340,240);
        inicio(a1);
        inicio(b1);
       
        REPEAT
        FRAME;
        UNTIL (key(_esc));
END
PROCESS inicio(estructura)
BEGIN
 a1.xx=10;
 b1.yy=50;
 //estructura.xx=10 ERROR!!!!!!!!!!!?COMO PUEDO PASAR Una esctructura a un proceso y en este poderle cambiarle el nombre¿
 //pues hago multiples llamadas a inicio con multiples estrcturas definidas....
//estructura.b1=34 ERROR!!!
END


[oskarg]

lo que quiero es esto,en c simple en divgo COMO ?¿?¿ pasar una estructura como parametro

Código: [Seleccionar]

#include <stdio.h>
#include <math.h>
/* Definición de la estructura */
struct coordenadas
{
    float x;
    float y;
    float z;
};
/* Definición de función que calcula la distancia entre dos puntos */
float distancia(struct coordenadas a, struct coordenadas b)
{
    return sqrtf(pow(a.x - b.x, 2.0) +
                 pow(a.y - b.y, 2.0) +
                 pow(a.z - b.z, 2.0));
}

int main()
{
    /* Declaración e inicialización de dos variables */
    struct coordenadas punto_a = { 3.5e-120, 2.5, 1.5 };
    struct coordenadas punto_b = { 5.3e-120, 3.1, 6.3 };
    float d; /* Almacenar el resultado */

    /* Llamada a la función con las dos estructuras */   
    d = distancia(punto_a, punto_b);
    /* Imprimir el resultado */
    printf("%f\n", d);

    return 0;
}


[oskarg]

Hola AmakaSt requiero tu ayuda ,he preguntado en otro foro como se podia pasar una estructura en un proceso y me ha dando este ejemplo el cual funciona en div2...pero en divgo no tengo ni idea como traspolar tal informacion...no se como se hace,¿me puedes escribir el ejemplo en divgo?¿?.

Código: [Seleccionar]

/*
 * whatsnew.txt by o
 * (c) 2019 o
 */

PROGRAM esctructuras;

global


struct st;
int a,b,c;
end
valor;

begin
proc(&st);
valor=st.a;

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

loop
frame;
end


end

PROCESS proc(struct pointer st p_st)
BEGIN
p_st.a=10;
p_st.b=20;
p_st.c=30;
end




[AmakaSt]

Hola oskarg,

Acabo de probar y no está soportado por el compilador pasar los struct por parámetros, ni el declararlo en private, por eso da error. Para la próxima versión miraré de incluirlo.

Un saludo.

[oskarg]

Muchas gracias por el detalle,se agradece el gesto AmakaSt........estaba probado mil maneras y no habia forma.

[oskarg]

hola AmakaSt..
estoy intentando hacer este efecto.tengo un fondo que es un grafico de 128x128,de color azul...aunque debe ser negro,pero lo he puesto de este modo para que se vea que el efecto funciona correctamente.Luuego tengo un cuadrado de 16x16 de color verde.Muevo el cuadrado en cada frame,pero no se borra,con lo cual,hago un map_block_copy y entonces en cada frame hago un random aleatorio y pinto toda la pantalla de colores de un 1pixel,cada vez seran mas oscuros...habia pensado hacerlo con graphic_builder...pues debere leer el contenido y luego modificar,pero no se porque ,cuando hago map_block_copy,alla por donde pasa el cuadrado  verde,no pinta el recorrido que he hecho con el.en cambio con map_put_pixel si va..PORQUE?¿? no se puede utilizar de esta manera graphic-builder...incluyo ejemplo ..asi es mas visual...
 // map_put_pixel(0, 48,40,i,rgb(255,255,255));con esto funciona JOE!!.. si la activo esta linea funciona,pinta el fondo ,normal ,pero claro utilizo map_put_pixel......

[oskarg]

adjuto codigo correcto,con put_pixel...es lo que quiero ,pero por que no va con graphic_builder?¿?

Código: [Seleccionar]


/*
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;
    nave_x;
    nave_y;
    grafico;

begin
set_title("My Program Name");
    set_icon("graficos/009.png");
set_mode(128,128,3);
screen_color(cc_silver);
set_fps(60, 0);

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

frame;
end
end
//_________________________________________________________________________________________________________________________________________
process update()
begin
nave_x=128/2;
nave_y=128/2;
graph=49;
//z=100;
loop
x=nave_x;
y=nave_y;


if(key(_right) ) nave_x = nave_x+1;end
if(key(_left) )  nave_x =  nave_x-1;end
if(key(_up) )    nave_y =  nave_y-1;end
if(key(_down) )  nave_y =  nave_y+1;end


frame;
end
end
//____________________________________________________________________________________________________________________________________


//_________________________________________________________________________________________________________
process pelota()
private j,i;
begin
graph=48;
x=128/2;
y=128/2;
z=800;
loop

map_block_copy(0, 48, nave_x,nave_y, 49, 0,0,32,32);
 
 blaquea_fondo(graph);
frame;
end
end
//__________________________________________________________________________________________________________________________________________--
PROCESS blaquea_fondo(grafito)
private
i,jx,jy;
begin
x=128/2;
y=128/2;
z=100;
for(i=0;i<128;i++)
 jx=rand(0,128);
 jy=rand(0,128);
 
 map_put_pixel(0, 48,jx,jy,rgb(255,255,255));
end

end


[oskarg]

Código: [Seleccionar]

/*
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");

set_mode(320, 240);
screen_color(cc_silver);
set_fps(60, 0);
// call a process
pelota();

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

frame;
end
end

process pelota()
private nx,ny,veces;
begin
graph=23;
x=100;y=100;

loop
nx=0;
ny=0;

if(key(_left))   nx=-10;end
if(key(_right))  nx=10;end
if(key(_up))     ny=-10;end
if(key(_down))   ny=10;end
if (nx<>0 or ny<>0) clon(x,y);end
x=x+nx;
y=y+ny;
frame;
end

end
//____________________________________________________________________________________________________________________________________--
//____________________________________________________________________________________________________________________________________--

process clon(xx,yy)
begin
x=xx;
y=yy;
graph=23;
alpha=255;

loop
alpha=alpha-10;
if (alpha<=0 )break;end
frame;
end
end
//____________________________________________________________________________________________________________________________________--
//____________________________________________________________________________________________________________________________________--
//____________________________________________________________________________________________________________________________________--
//____________________________________________________________________________________________________________________________________--
//____________________________________________________________________________________________________________________________________--
//____________________________________________________________________________________________________________________________________--




es lo que pretendo hacer .....pero poniendo pixeles cada vez mas transparentes al grafico......para otro dia...aunque me queda la duda de eso de graphic builder porque no funciona como pretendo.

[oskarg]

Si manipulo un grafico con graphics builder,es como un draw_buffer,mas rapido que put_pixel??

[AmakaSt]

Si manipulo un grafico con graphics builder,es como un draw_buffer,mas rapido que put_pixel??

Había varios ejemplos con graphic_builder() y graphic_explorer(), uno es para explorar la información del graph y poder manipularlo, y el otro para reconstruir el graph modificado. En el listado de funciones hay un ejemplo, y creo que en este hilo hay un ejemplo de editor gráfico hecho con estas dos funciones.

Un saludo.

[AmakaSt]

ejemplo simple de particulas.

El fpg.dat y el index.html del ejemplo tiene más gráficos que los que hay en la carpeta y hace que falle la ejecución. Esto hay que tenerlo en cuenta, no cambiar los gráficos que hay en el empaquetado si no fallará.

[oskarg]

ahora lo miro y lo modifico ,gracias....Lo he bajado y ahora va..incluyo codigo fuente aqui...

Código: [Seleccionar]

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

program volcan_particulas;
global
N_P=0;// numero de particulas...

  struct particulas[10000]
       xx;
       yy;
       v;
       s;
       a;
  end
 
  struct particulas2[10000]
       xx;
       yy;
       v;
       s;
       a;
  end
 

 
  jota;
  jota2;



begin
set_title("Sistema de particulas");
    set_icon("graficos/009.png");
//    write_int(0,80,100,0,offset jota);
  //  write_int(0,160,100,0,offset jota2);
   
   // screen canvas options
     set_mode(128,128,3);
screen_color(cc_black);
     set_fps(60, 0);
     screen_smooth(false);
     INIT();
     UPDATE();
     
     
loop
   // _DRAW();
if (key(_esc)) exit("Text Exit", 1); end

frame;
end
end

//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
PROCESS INIT()
BEGIN
  //particulas[0].xx = rand(124,4);
  //particulas[0].yy = 128;
 // particulas[0].v  = rand(0,5)+0.5;
  //particulas[0].s  = rand(8,0);
  //particulas[0].a  = 0;

 // N_P=1;
END

//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
PROCESS UPDATE()
private i,j,k,npp;
BEGIN

 LOOP
   N_P;
   npp=0;
   
   for(j=0;j<=6;j++)
  particulas[N_P].xx = rand(4,124);
  particulas[N_P].yy = 128;
  particulas[N_P].v  = rand(0,5)+0.5;
  particulas[N_P].s  = rand(0,8);
  particulas[N_P].a  = 0;
 
  N_P++;//////////////////////////////////////////en cada bucle le asigno una particula mas...
   end
 
 
 
 
 
  for(j=0;j<=N_P;j++)

    particulas[j].xx =particulas[j].xx + rand(0,2)-1 ;
    particulas[j].yy =particulas[j].yy - particulas[j].v ;
    particulas[j].a  =particulas[j].a  + 1 ;
       
        if (particulas[j].yy<=0 OR  particulas[j].a>=30)
            particulas[j].a=-1;
        end

  jota=j;
  end
 
 /////////////////////////////////////////////////////////////////////////////////////
 k=0;

     /*
for(j=0;j<=N_P;j++)//N_P numero de particulas...
 

   if( particulas[j].a<>-1)//si es diferente a 1.copio tabla...
     
     particulas2[k].xx = particulas[j].xx ; 
     particulas2[k].yy = particulas[j].yy ; 
     particulas2[k].v  = particulas[j].v  ;
     particulas2[k].s  = particulas2[j].s ;
     particulas2[k].a  = particulas2[j].a ;
     k++;
     npp++;//indica numero de particulas..
   end
end
 */
 npp=0;k=0;
for(j=0;j<=N_P;j++)//N_P numero de particulas...
     particulas2[k].xx = particulas[j].xx ; 
     particulas2[k].yy = particulas[j].yy ; 
     particulas2[k].v  = particulas[j].v  ;
     particulas2[k].s  = particulas[j].s ;
     particulas2[k].a  = particulas[j].a ;
     npp++;
     k++;

end
 
 
 
 
 
 /////////////////////////////////////////////////////////////////////////////////////
 
 
 
 
 _DRAW();
// DEL();
 FRAME;

 
 END
 
END
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________

PROCESS DEL()//borro los elementos de la structura..
private i,j,npp;
BEGIN

npp=0;
for(i=0;i<=N_P;i++)//N_P numero de particulas...
 
       
   if( particulas[i].a<>-1)//si es diferente a 1.copio tabla...
     
     particulas2[i].xx = particulas[i].xx ; 
     particulas2[i].yy = particulas[i].yy ; 
     particulas2[i].v  = particulas[i].v  ;
     particulas2[i].s  = particulas2[i].s ;
     particulas2[i].a  = particulas2[i].a ;
     j++;
     npp++;//indica numero de particulas..
   end
end


//  N_P=npp;
END
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________
PROCESS _DRAW()
private i;
BEGIN
 
   for(i=0;i<=N_P;i++)
 
   x=     particulas2[i].xx ; 
   y=     particulas2[i].yy ;
   z=     particulas2[i].a ;
   alpha= particulas2[i].s ;
   
 
  if(y>0)
   SPRITE(x,y,z,alpha);
   end
   end

END


PROCESS SPRITE(xx,yy,aa,ss)
private spr;
BEGIN
graph=11;

    if (aa>=25)
         spr=11;
         else
         spr=floor(ss)+12;
    end
   
   
graph=spr;   

x=xx;
y=yy;
END
//____________________________________________________________________________________________________________________________________________________________________________________________________________
//____________________________________________________________________________________________________________________________________________________________________________________________________________





[AmakaSt]

Aquí el ejemplo editor gráfico con graphic_explorer() y graphic_builder(): https://www.divgo.net/c-433de98f